Remove `muc_ogp_show_unfurls` setting

And instead use the `render_media` setting to determine whether unfurls
should be shown.

CHANGES.md

@@ -15,6 +15,7 @@ Three config settings have been obsoleted:
   - embed_audio
   - embed_video
   - show_images_inline
+  - muc_show_ogp_unfurls
 
 
 ### Breaking Changes

docs/source/configuration.rst

@@ -1506,19 +1506,6 @@ a nickname configured for it), you'll see the message history (if the
 server supports `XEP-0313 Message Archive Management <https://xmpp.org/extensions/xep-0313.html>`_)
 and the nickname form at the bottom.
 
-muc_show_ogp_unfurls
---------------------
-
-* Default: ``true``
-
-Supports showing extra metadata (picture and description) for URLs contained in
-groupchat messages.
-
-The metadata must come from the MUC itself, metadata sent from participants
-themselves will not be shown.
-
-For Prosody XMPP server, `mod_ogp <https://modules.prosody.im/mod_ogp.html>`_ can be used.
-
 
 muc_subscribe_to_rai
 --------------------
@@ -1839,6 +1826,16 @@ will be shown.
 Setting it to an array of domains means that media will be rendered only for URLs
 matching those domains.
 
+Media URLs are those URLs which appear to point to media files as well as URLs
+for which `Open Graph Protocol (OGP) <https://modules.prosody.im/mod_ogp.html`_
+data was received (for example via Prosody's `mod_ogp <https://modules.prosody.im/mod_ogp.html>`_).
+
+The OGP metadata must come from the MUC itself, metadata sent from participants
+themselves will not be shown.
+
+Based on the OGP metadata Converse will render a URL preview (also known as an
+"unfurl").
+
 .. note::
 
   Note, even if this setting is ``false`` (or if the URL domain is not in the

src/headless/plugins/muc/index.js

@@ -185,7 +185,6 @@ converse.plugins.add('converse-muc', {
                 ...converse.MUC.INFO_CODES.role_changes,
             ],
             'muc_show_logs_before_join': false,
-            'muc_show_ogp_unfurls': true,
             'muc_subscribe_to_rai': false,
         });
         api.promises.add(['roomsAutoJoined']);

src/headless/plugins/muc/muc.js

@@ -2083,9 +2083,6 @@ const ChatRoomMixin = {
     },
 
     handleMetadataFastening (attrs) {
-        if (!api.settings.get('muc_show_ogp_unfurls')) {
-            return false;
-        }
         if (attrs.ogp_for_id) {
             if (attrs.from !== this.get('jid')) {
                 // For now we only allow metadata from the MUC itself and not

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

@@ -174,10 +174,12 @@ describe("A Groupchat Message", function () {
         expect(view.querySelector('converse-message-unfurl')).toBe(null);
     }));
 
-    it("will not render an unfurl based on OGP data if muc_show_ogp_unfurls is false",
+    it("will not render an unfurl based on OGP data if render_media is false",
             mock.initConverse(['chatBoxesFetched'],
-            {'muc_show_ogp_unfurls': false},
+            { 'render_media': false },
             async function (_converse) {
+
+        const { api } = _converse;
         const nick = 'romeo';
         const muc_jid = 'lounge@montague.lit';
         await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
@@ -209,9 +211,18 @@ describe("A Groupchat Message", function () {
             </message>`);
         _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
 
-        await u.waitUntil(() => view.model.handleMetadataFastening.calls.count());
-        expect(view.model.handleMetadataFastening.calls.first().returnValue).toBe(false);
         expect(view.querySelector('converse-message-unfurl')).toBe(null);
+
+        api.settings.set('render_media', true);
+        await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
+
+        let button = await u.waitUntil(() => view.querySelector('.chat-msg__content .chat-msg__action-hide-previews'));
+        expect(button.textContent.trim()).toBe('Hide media');
+        button.click();
+
+        await u.waitUntil(() => !view.querySelector('converse-message-unfurl'), 1000);
+        button = await u.waitUntil(() => view.querySelector('.chat-msg__content .chat-msg__action-hide-previews'));
+        expect(button.textContent.trim()).toBe('Show media');
     }));
 
     it("will only render a single unfurl when receiving the same OGP data multiple times",
@@ -259,6 +270,8 @@ describe("A Groupchat Message", function () {
             {'allowed_image_domains': []},
             async function (_converse) {
 
+        const { api } = _converse;
+
         const nick = 'romeo';
         const muc_jid = 'lounge@montague.lit';
         await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
@@ -288,8 +301,10 @@ describe("A Groupchat Message", function () {
             </message>`);
         _converse.connection._dataRecv(mock.createRequest(metadata_stanza));
 
-        const unfurl = await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
-        expect(unfurl.querySelector('.card-img-top')).toBe(null);
+        await u.waitUntil(() => !view.querySelector('converse-message-unfurl'));
+
+        api.settings.set('allowed_image_domains', null);
+        await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
     }));
 
     it("lets the user hide an unfurl",

src/shared/chat/message-actions.js

@@ -188,8 +188,7 @@ class MessageActions extends CustomElement {
             });
         } else {
             const ogp_metadata = this.model.get('ogp_metadata') || [];
-            const unfurls_to_show = api.settings.get('muc_show_ogp_unfurls') && ogp_metadata.length;
-            if (unfurls_to_show) {
+            if (ogp_metadata.length) {
                 this.model.set('url_preview_transition', 'fade-out');
             } else {
                 this.model.save({
@@ -222,12 +221,9 @@ class MessageActions extends CustomElement {
     }
 
     getMediaURLs () {
-        let unfurls_to_show = [];
-        if (api.settings.get('muc_show_ogp_unfurls')) {
-            unfurls_to_show = (this.model.get('ogp_metadata') || [])
-                .map(o => ({ 'url': o['og:image'], 'is_image': true }))
-                .filter(o => isMediaURLDomainAllowed(o));
-        }
+        const unfurls_to_show = (this.model.get('ogp_metadata') || [])
+            .map(o => ({ 'url': o['og:image'], 'is_image': true }))
+            .filter(o => isMediaURLDomainAllowed(o));
 
         const media_urls = getMediaURLs(this.model.get('media_urls') || [], this.model.get('body'))
             .filter(o => isMediaURLDomainAllowed(o));

src/shared/chat/message.js

@@ -40,8 +40,11 @@ export default class Message extends CustomElement {
         }
 
         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.save('hide_url_previews', undefined));
+        this.listenTo(settings, 'change:render_media', () => {
+            // Reset individual show/hide state of media
+            this.model.save('hide_url_previews', undefined)
+            this.requestUpdate();
+        });
 
         this.listenTo(this.chatbox, 'change:first_unread_id', () => this.requestUpdate());
         this.listenTo(this.model, 'change', () => this.requestUpdate());
@@ -132,7 +135,7 @@ export default class Message extends CustomElement {
     onUnfurlAnimationEnd () {
         if (this.model.get('url_preview_transition') === 'fade-out') {
             this.model.save({
-                'hide_url_previews': !this.model.get('hide_url_previews'),
+                'hide_url_previews': true,
                 'url_preview_transition': 'fade-in'
             });
         }

src/shared/chat/templates/message.js

@@ -2,6 +2,7 @@ import 'shared/chat/unfurl.js';
 import { __ } from 'i18n';
 import { html } from "lit";
 import { renderAvatar } from 'shared/directives/avatar';
+import { shouldRenderMediaFromURL } from '@converse/headless/utils/url.js';
 
 
 export default (el, o) => {
@@ -43,15 +44,21 @@ export default (el, o) => {
                         message_type="${o.message_type}"></converse-message-actions>
                 </div>
 
-                ${ !el.model.get('hide_url_previews') ? el.model.get('ogp_metadata')?.map(m =>
-                    html`<converse-message-unfurl
+                ${ el.model.get('ogp_metadata')?.map(m => {
+                    if (el.model.get('hide_url_previews') === true) {
+                        return '';
+                    }
+                    if (!shouldRenderMediaFromURL(m['og:image'], 'image')) {
+                        return '';
+                    }
+                    return html`<converse-message-unfurl
                         @animationend="${el.onUnfurlAnimationEnd}"
                         class="${el.model.get('url_preview_transition')}"
                         jid="${el.chatbox?.get('jid')}"
                         description="${m['og:description'] || ''}"
                         title="${m['og:title'] || ''}"
                         image="${m['og:image'] || ''}"
-                        url="${m['og:url'] || ''}"></converse-message-unfurl>`) : '' }
+                        url="${m['og:url'] || ''}"></converse-message-unfurl>` }) }
             </div>
         </div>`;
 }

src/shared/chat/templates/unfurl.js

@@ -3,8 +3,7 @@ import {
     isAudioURL,
     isGIFURL,
     isVideoURL,
-    isDomainAllowed,
-    shouldRenderMediaFromURL,
+    isDomainAllowed
 } from '@converse/headless/utils/url.js';
 import { html } from 'lit';
 
@@ -36,7 +35,7 @@ const tpl_image = o =>
     ></converse-rich-text>`;
 
 export default o => {
-    const show_image = isValidImage(o.image) && shouldRenderMediaFromURL(o.url);
+    const show_image = isValidImage(o.image);
     const has_body_info = o.title || o.description || o.url;
     if (show_image || has_body_info) {
         return html`<div class="card card--unfurl">