From 8eac031047ba4b58a6a9f5b674b831e3ad89d06f Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Tue, 10 Aug 2021 13:45:54 +0200
Subject: [PATCH] Re-add wrapper anchor for unfurl images

We don't want the wrapper for interactive elements (GIF, video, audio),
but for images we still want them to link to the unfurled URL.
---
 src/plugins/muc-views/tests/unfurls.js | 2 +-
 src/shared/chat/templates/unfurl.js    | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/plugins/muc-views/tests/unfurls.js b/src/plugins/muc-views/tests/unfurls.js
index 4a6ee29f2..7c9c98cad 100644
--- a/src/plugins/muc-views/tests/unfurls.js
+++ b/src/plugins/muc-views/tests/unfurls.js
@@ -79,8 +79,8 @@ describe("A Groupchat Message", function () {
 
         const unfurl = await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
         expect(unfurl.querySelector('.card-img-top').getAttribute('text')).toBe('https://conversejs.org/dist/images/custom_emojis/converse.png');
+        expect(unfurl.querySelector('.card-img-top a')?.getAttribute('href')).toBe('https://conversejs.org/dist/images/custom_emojis/converse.png');
         expect(unfurl.querySelector('.card-body')).toBe(null);
-        expect(unfurl.querySelector('a')).toBe(null);
     }));
 
     it("will render multiple unfurls based on OGP data", mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
diff --git a/src/shared/chat/templates/unfurl.js b/src/shared/chat/templates/unfurl.js
index 677b05155..45f33d78e 100644
--- a/src/shared/chat/templates/unfurl.js
+++ b/src/shared/chat/templates/unfurl.js
@@ -1,4 +1,4 @@
-import { getURI, isGIFURL, isImageDomainAllowed } from '@converse/headless/utils/url.js';
+import { getURI, isAudioURL, isGIFURL, isVideoURL, isImageDomainAllowed } from '@converse/headless/utils/url.js';
 import { html } from 'lit';
 
 
@@ -11,11 +11,15 @@ function isValidImage (image) {
     return image && isImageDomainAllowed(image) && isValidURL(image);
 }
 
+function shouldHideMediaURL (o) {
+    return isGIFURL(o.url) || isVideoURL(o.url) || isAudioURL(o.url);
+}
+
 const tpl_url_wrapper = (o, wrapped_template) =>
     (o.url && isValidURL(o.url) && !isGIFURL(o.url)) ?
         html`<a href="${o.url}" target="_blank" rel="noopener">${wrapped_template(o)}</a>` : wrapped_template(o);
 
-const tpl_image = (o) => html`<converse-rich-text class="card-img-top" text="${o.image}" show_images hide_media_urls .onImgLoad=${o.onload}></converse-rich-text>`;
+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);