Re-render message if relevant config settings change

src/plugins/chatview/tests/message-images.js

@@ -147,16 +147,10 @@ describe("A Chat Message", function () {
 
         api.settings.set('allowed_image_domains', []);
 
-        // FIXME: remove once we can update based on settings change event
-        view.querySelector('converse-chat-message-body').requestUpdate();
-        view.querySelector('converse-message-actions').requestUpdate();
         await u.waitUntil(() => view.querySelector('converse-chat-message-body .chat-image') === null);
         expect(view.querySelector('.chat-msg__action-hide-previews')).toBe(null);
 
-        // FIXME: remove once we can update based on settings change event
         api.settings.set('allowed_image_domains', null);
-        view.querySelector('converse-chat-message-body').requestUpdate();
-        view.querySelector('converse-message-actions').requestUpdate();
         await u.waitUntil(() => view.querySelector('converse-chat-message-body .chat-image'));
         expect(view.querySelector('.chat-msg__action-hide-previews')).not.toBe(null);
     }));

src/plugins/muc-views/tests/unfurls.js

@@ -294,9 +294,11 @@ describe("A Groupchat Message", function () {
 
     it("lets the user hide an unfurl",
             mock.initConverse(['chatBoxesFetched'],
-            {'render_media': []},
+            {'render_media': true},
             async function (_converse) {
 
+        const { api } = _converse;
+
         const nick = 'romeo';
         const muc_jid = 'lounge@montague.lit';
         await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
@@ -327,10 +329,20 @@ describe("A Groupchat Message", function () {
         _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
 
         await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
-        const button = await u.waitUntil(() => view.querySelector('.chat-msg__content .chat-msg__action-hide-previews'));
+        let button = await u.waitUntil(() => view.querySelector('.chat-msg__content .chat-msg__action-hide-previews'));
+        expect(button.textContent.trim()).toBe('Hide URL previews');
         button.click();
         await u.waitUntil(() => view.querySelector('converse-message-unfurl') === null, 750);
+        button = view.querySelector('.chat-msg__content .chat-msg__action-hide-previews');
+        expect(button.textContent.trim()).toBe('Show URL preview');
         button.click();
         await u.waitUntil(() => view.querySelector('converse-message-unfurl'), 750);
+
+        // Check that the image doesn't render if the domain is not allowed
+        expect(view.querySelector('converse-message-unfurl .chat-image')).not.toBe(null);
+        api.settings.set('allowed_image_domains', []);
+        await u.waitUntil(() => view.querySelector('converse-message-unfurl .chat-image') === null);
+        api.settings.set('allowed_image_domains', undefined);
+        await u.waitUntil(() => view.querySelector('converse-message-unfurl .chat-image') !== null);
     }));
 });

src/shared/chat/message-actions.js

@@ -31,7 +31,6 @@ class MessageActions extends CustomElement {
         this.listenTo(settings, 'change:render_media', () => this.requestUpdate());
     }
 
-
     render () {
         return html`${until(this.renderActions(), '')}`;
     }

src/shared/chat/message.js

@@ -17,6 +17,7 @@ import { _converse, api, converse } from  '@converse/headless/core';
 import { getHats } from './utils.js';
 import { html } from 'lit';
 import { renderAvatar } from 'shared/directives/avatar';
+import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
 
 const { Strophe, dayjs } = converse.env;
 
@@ -38,16 +39,21 @@ export default class Message extends CustomElement {
             return;
         }
 
-        this.listenTo(this.chatbox, 'change:first_unread_id', this.requestUpdate);
-        this.listenTo(this.model, 'change', this.requestUpdate);
-        this.model.vcard && this.listenTo(this.model.vcard, 'change', this.requestUpdate);
+        const settings = getAppSettings();
+        // Reset individual show/hide state of media when the `render_media` config setting changes.
+        this.listenTo(settings, 'change:render_media',
+            () => this.model.get('hide_url_previews') && this.model.save('hide_url_previews', undefined));
+
+        this.listenTo(this.chatbox, 'change:first_unread_id', () => this.requestUpdate());
+        this.listenTo(this.model, 'change', () => this.requestUpdate());
+        this.model.vcard && this.listenTo(this.model.vcard, 'change', () => this.requestUpdate());
 
         if (this.model.get('type') === 'groupchat') {
             if (this.model.occupant) {
-                this.listenTo(this.model.occupant, 'change', this.requestUpdate);
+                this.listenTo(this.model.occupant, 'change', () => this.requestUpdate());
             } else {
                 this.listenTo(this.model, 'occupantAdded', () => {
-                    this.listenTo(this.model.occupant, 'change', this.requestUpdate)
+                    this.listenTo(this.model.occupant, 'change', () => this.requestUpdate())
                 });
             }
         }

src/shared/chat/templates/message-text.js

@@ -26,6 +26,7 @@ export default (el) => {
     const spoiler_classes = el.model.get('is_spoiler') ? `spoiler ${el.model.get('is_spoiler_visible') ? '' : 'hidden'}` : '';
     const text = el.model.getMessageText();
     const show_oob = el.model.get('oob_url') && text !== el.model.get('oob_url');
+
     return html`
         ${ el.model.get('is_spoiler') ? tpl_spoiler_hint : '' }
         ${ el.model.get('subject') ? html`<div class="chat-msg__subject">${el.model.get('subject')}</div>` : '' }

src/shared/chat/templates/unfurl.js

@@ -1,3 +1,4 @@
+import { api } from '@converse/headless/core.js';
 import { getURI, isAudioURL, isGIFURL, isVideoURL, isDomainAllowed } from '@converse/headless/utils/url.js';
 import { html } from 'lit';
 
@@ -22,11 +23,11 @@ const tpl_url_wrapper = (o, wrapped_template) =>
 const tpl_image = (o) => html`<converse-rich-text class="card-img-top" text="${o.image}" show_images ?hide_media_urls=${shouldHideMediaURL(o.url)} .onImgLoad=${o.onload}></converse-rich-text>`;
 
 export default (o) => {
-    const valid_image = isValidImage(o.image);
+    const show_image = isValidImage(o.image) && api.settings.get('render_media');
     const has_body_info = o.title || o.description || o.url;
-    if (valid_image || has_body_info) {
+    if (show_image || has_body_info) {
         return html`<div class="card card--unfurl">
-            ${ valid_image ? tpl_url_wrapper(o, tpl_image) : '' }
+            ${ show_image ? tpl_url_wrapper(o, tpl_image) : '' }
             ${ has_body_info ? html`
                 <div class="card-body">
                 ${ o.title ? tpl_url_wrapper(o, o => html`<h5 class="card-title">${o.title}</h5>`) : ''}

src/shared/chat/unfurl.js

@@ -1,6 +1,7 @@
+import tpl_unfurl from './templates/unfurl.js';
 import { CustomElement } from 'shared/components/element.js';
 import { api } from "@converse/headless/core";
-import tpl_unfurl from './templates/unfurl.js';
+import { getAppSettings } from '@converse/headless/shared/settings/utils.js';
 
 import './styles/unfurl.scss';
 
@@ -17,6 +18,12 @@ export default class MessageUnfurl extends CustomElement {
         }
     }
 
+    initialize () {
+        const settings = getAppSettings();
+        this.listenTo(settings, 'change:allowed_image_domains', () => this.requestUpdate());
+        this.listenTo(settings, 'change:render_media', () => this.requestUpdate());
+    }
+
     render () {
         return tpl_unfurl(Object.assign({
             'onload': () => this.onImageLoad()