소스 검색

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'));
         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) {

+ 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';
 
 
@@ -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);