浏览代码

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.
JC Brand 4 年之前
父节点
当前提交
8eac031047
共有 2 个文件被更改,包括 7 次插入3 次删除
  1. 1 1
      src/plugins/muc-views/tests/unfurls.js
  2. 6 2
      src/shared/chat/templates/unfurl.js

+ 1 - 1
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'));
         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').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('.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) {
     it("will render multiple unfurls based on OGP data", mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {

+ 6 - 2
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';
 import { html } from 'lit';
 
 
 
 
@@ -11,11 +11,15 @@ function isValidImage (image) {
     return image && isImageDomainAllowed(image) && isValidURL(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) =>
 const tpl_url_wrapper = (o, wrapped_template) =>
     (o.url && isValidURL(o.url) && !isGIFURL(o.url)) ?
     (o.url && isValidURL(o.url) && !isGIFURL(o.url)) ?
         html`<a href="${o.url}" target="_blank" rel="noopener">${wrapped_template(o)}</a>` : wrapped_template(o);
         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) => {
 export default (o) => {
     const valid_image = isValidImage(o.image);
     const valid_image = isValidImage(o.image);