Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Bugfix. GIF unfurl images not loading...

Browse Source 
and causing `TypeError: this.shouldRenderMedia is not a function`
This commit is contained in:
JC Brand 2022-04-04 16:31:32 +02:00
parent b429484501
commit 32a443408a
7 changed files with 59 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -18296,7 +18296,6 @@
},
"@converse/skeletor": {
"version": "git+ssh://git@github.com/conversejs/skeletor.git#c7e76b023337a8ac201c74507f7a1209de1c6d18",
"integrity": "sha512-2g+6XxFUorhlHncfkBWB8+26+8Izl2kJYf+1uk/Umb53/ltvCgtCJcQuAECmKXC/y99yCjNWot+qhA+tQK9sWQ==",
"from": "@converse/skeletor@conversejs/skeletor#c7e76b023337a8ac201c74507f7a1209de1c6d18",
"requires": {
"lit-html": "^2.0.0-rc.2",
@ -25061,7 +25060,6 @@
},
"localforage-getitems": {
"version": "git+ssh://git@github.com/conversejs/localForage-getItems.git#de039970de16a9d3b54cdaa816aed5adaefb80c9",
"integrity": "sha512-fPxYV2vJFx2onqHfL+En0bTesjawTmn1v/peYf/0gaYL7uhx5nP9czVHNUYAXoKL9kKplVH8lZo4LRrE2MK23w==",
"from": "localforage-getitems@conversejs/localForage-getItems#de039970de16a9d3b54cdaa816aed5adaefb80c9",
"requires": {
"localforage": ">=1.4.0"

51
src/plugins/muc-views/tests/unfurls.js
View File

@ -10,6 +10,9 @@ describe("A Groupchat Message", function () {
await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
const view = _converse.chatboxviews.get(muc_jid);
const unfurl_image_src = "https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg";
const unfurl_url = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
const message_stanza = u.toStanza(`
<message xmlns="jabber:client" type="groupchat" from="${muc_jid}/arzu" xml:lang="en" to="${_converse.jid}" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
<body>https://www.youtube.com/watch?v=dQw4w9WgXcQ</body>
@ -26,9 +29,9 @@ describe("A Groupchat Message", function () {
<message xmlns="jabber:client" from="${muc_jid}" to="${_converse.jid}" type="groupchat">
<apply-to xmlns="urn:xmpp:fasten:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:site_name" content="YouTube" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:url" content="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:url" content="${unfurl_url}" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:title" content="Rick Astley - Never Gonna Give You Up (Video)" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:image" content="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:image" content="${unfurl_image_src}" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:image:width" content="1280" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:image:height" content="720" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:description" content="Rick Astley&amp;#39;s official music video for &quot;Never Gonna Give You Up&quot; Listen to Rick Astley: https://RickAstley.lnk.to/_listenYD Subscribe to the official Rick Ast..." />
@ -43,7 +46,8 @@ describe("A Groupchat Message", function () {
_converse.connection._dataRecv(mock.createRequest(metadata_stanza));
const unfurl = await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
expect(unfurl.querySelector('.card-img-top').getAttribute('text')).toBe('https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg');
expect(unfurl.querySelector('.card-img-top').getAttribute('src')).toBe(unfurl_image_src);
expect(unfurl.querySelector('.card-img-top').getAttribute('href')).toBe(unfurl_url);
}));
it("will render an unfurl with limited OGP data", mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
@ -78,10 +82,49 @@ describe("A Groupchat Message", function () {
_converse.connection._dataRecv(mock.createRequest(metadata_stanza));
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('src')).toBe('https://conversejs.org/dist/images/custom_emojis/converse.png');
expect(unfurl.querySelector('.card-body')).toBe(null);
}));
it("will render an unfurl containing a GIF", mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
const nick = 'romeo';
const muc_jid = 'lounge@montague.lit';
await mock.openAndEnterChatRoom(_converse, muc_jid, nick);
const view = _converse.chatboxviews.get(muc_jid);
const unfurl_url = "https://giphy.com/gifs/giphyqa-4YY4DnqeUDBXNTcYMu";
const gif_url = "https://media4.giphy.com/media/4YY4DnqeUDBXNTcYMu/giphy.gif?foo=bar";
const message_stanza = u.toStanza(`
<message xmlns="jabber:client" type="groupchat" from="${muc_jid}/arzu" xml:lang="en" to="${_converse.jid}" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
<body>${unfurl_url}</body>
<active xmlns="http://jabber.org/protocol/chatstates"/>
<origin-id xmlns="urn:xmpp:sid:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04"/>
<stanza-id xmlns="urn:xmpp:sid:0" by="${muc_jid}" id="8f7613cc-27d4-40ca-9488-da25c4baf92a"/>
<markable xmlns="urn:xmpp:chat-markers:0"/>
</message>`);
_converse.connection._dataRecv(mock.createRequest(message_stanza));
const el = await u.waitUntil(() => view.querySelector('.chat-msg__text'));
expect(el.textContent).toBe(unfurl_url);
const metadata_stanza = u.toStanza(`
<message xmlns="jabber:client" from="${muc_jid}" to="${_converse.jid}" type="groupchat">
<apply-to xmlns="urn:xmpp:fasten:0" id="eda6c790-b4f3-4c07-b5e2-13fff99e6c04">
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:title" content="Animated GIF" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:description" content="Alright then, keep your secrets" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:url" content="${unfurl_url}" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:image" content="${gif_url}" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:image:type" content="image/gif" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:image:width" content="360" />
<meta xmlns="http://www.w3.org/1999/xhtml" property="og:image:height" content="302" />
</apply-to>
</message>`);
_converse.connection._dataRecv(mock.createRequest(metadata_stanza));
const unfurl = await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
expect(unfurl.querySelector('.card-img-top').getAttribute('src')).toBe(gif_url);
}));
it("will render multiple unfurls based on OGP data", mock.initConverse(['chatBoxesFetched'], {}, async function (_converse) {
const nick = 'romeo';
const muc_jid = 'lounge@montague.lit';

2
src/plugins/omemo/utils.js
View File

@ -202,7 +202,7 @@ function getTemplateForObjectURL (uri, obj_url, richtext) {
}
if (isImageURL(file_url)) {
return tpl_image({
'url': obj_url,
'src': obj_url,
'onClick': richtext.onImgClick,
'onLoad': richtext.onImgLoad
});

2
src/shared/chat/templates/unfurl.js
View File

@ -17,7 +17,7 @@ const tpl_url_wrapper = (o, wrapped_template) =>
: wrapped_template(o);
const tpl_image = o =>
html`<converse-image class="card-img-top" text="${o.image}" href="${o.url}" .onImgLoad=${o.onload}></converse-image>`;
html`<converse-image class="card-img-top" href="${o.url}" src="${o.image}" .onImgLoad=${o.onload}></converse-image>`;
export default o => {
const show_image = isValidImage(o.image);

16
src/shared/components/image.js
View File

@ -2,27 +2,27 @@ import tpl_gif from 'templates/gif.js';
import tpl_image from 'templates/image.js';
import { CustomElement } from './element.js';
import { api } from "@converse/headless/core";
import { filterQueryParamsFromURL, isGIFURL } from '@converse/headless/utils/url.js';
import { filterQueryParamsFromURL, isGIFURL, shouldRenderMediaFromURL } from '@converse/headless/utils/url.js';
export default class Image extends CustomElement {
static get properties () {
return {
'href': { type: String },
'src': { type: String },
'onImgLoad': { type: Function },
'text': { type: String },
// If specified, image is wrapped in a hyperlink that points to this URL.
'href': { type: String },
}
}
render () {
const filtered_url = filterQueryParamsFromURL(this.href);
if (isGIFURL(this.text) && this.shouldRenderMedia(this.text, 'image')) {
return tpl_gif(filtered_url);
if (isGIFURL(this.src) && shouldRenderMediaFromURL(this.src, 'image')) {
return tpl_gif(filterQueryParamsFromURL(this.src), true);
} else {
return tpl_image({
'url': this.text,
'href': filtered_url,
'src': filterQueryParamsFromURL(this.src),
'href': this.href,
'onClick': this.onImgClick,
'onLoad': this.onImgLoad
});

2
src/shared/rich-text.js
View File

@ -134,7 +134,7 @@ export class RichText extends String {
template = tpl_gif(filtered_url, this.hide_media_urls);
} else if (isImageURL(url_text) && this.shouldRenderMedia(url_text, 'image')) {
template = tpl_image({
'url': filtered_url,
'src': filtered_url,
// XXX: bit of an abuse of `hide_media_urls`, might want a dedicated option here
'href': this.hide_media_urls ? null : filtered_url,
'onClick': this.onImgClick,

2
src/templates/image.js
View File

@ -1,4 +1,4 @@
import { html } from "lit";
import { renderImage } from "shared/directives/image.js";
export default (o) => html`${renderImage(o.url, o.href, o.onLoad, o.onClick)}`;
export default (o) => html`${renderImage(o.src || o.url, o.href, o.onLoad, o.onClick)}`;