Show video download URL

This commit is contained in:
JC Brand 2021-06-17 15:48:03 +02:00
parent 095d9b60cd
commit 619fb538d7
6 changed files with 20 additions and 13 deletions

View File

@ -17,15 +17,16 @@ describe("A Chat Message", function () {
await u.waitUntil(() => view.querySelectorAll('.chat-content video').length, 1000)
let msg = sizzle('.chat-content .chat-msg:last .chat-msg__text').pop();
expect(msg.innerHTML.replace(/<!-.*?->/g, '').trim()).toEqual(
`<video controls="" preload="metadata" style="max-height: 50vh" src="${message}"></video>`);
`<video controls="" preload="metadata" src="${message}"></video>`+
`<a target="_blank" rel="noopener" href="${message}">${message}</a>`);
message += "?param1=val1&param2=val2";
await mock.sendMessage(view, message);
await u.waitUntil(() => view.querySelectorAll('.chat-content video').length === 2, 1000);
msg = sizzle('.chat-content .chat-msg:last .chat-msg__text').pop();
expect(msg.innerHTML.replace(/<!-.*?->/g, '').trim()).toEqual(
`<video controls="" preload="metadata" style="max-height: 50vh" src="${Strophe.xmlescape(message)}"></video>`);
`<video controls="" preload="metadata" src="${Strophe.xmlescape(message)}"></video>`+
`<a target="_blank" rel="noopener" href="${Strophe.xmlescape(message)}">${Strophe.xmlescape(message)}</a>`);
done();
}));
@ -66,7 +67,8 @@ describe("A Chat Message", function () {
await u.waitUntil(() => view.querySelectorAll('.chat-content video').length, 1000)
const msg = sizzle('.chat-content .chat-msg:last .chat-msg__text').pop();
expect(msg.innerHTML.replace(/<!-.*?->/g, '').trim()).toEqual(
`<video controls="" preload="metadata" style="max-height: 50vh" src="${message}"></video>`);
`<video controls="" preload="metadata" src="${message}"></video>`+
`<a target="_blank" rel="noopener" href="${message}">${message}</a>`);
done();
}));
});

View File

@ -1,6 +1,6 @@
/*global mock, converse */
const { Promise, u } = converse.env;
const { Strophe, Promise, u } = converse.env;
describe("A Chat Message", function () {
describe("which contains an OOB URL", function () {
@ -66,12 +66,13 @@ describe("A Chat Message", function () {
const view = _converse.chatboxviews.get(contact_jid);
spyOn(view.model, 'sendMessage').and.callThrough();
const url = 'https://montague.lit/video.mp4';
let stanza = u.toStanza(`
<message from="${contact_jid}"
type="chat"
to="romeo@montague.lit/orchard">
<body>Have you seen this funny video?</body>
<x xmlns="jabber:x:oob"><url>https://montague.lit/video.mp4</url></x>
<x xmlns="jabber:x:oob"><url>${url}</url></x>
</message>`);
_converse.connection._dataRecv(mock.createRequest(stanza));
await u.waitUntil(() => view.querySelectorAll('.chat-content .chat-msg video').length, 2000)
@ -80,8 +81,8 @@ describe("A Chat Message", function () {
expect(msg.textContent).toEqual('Have you seen this funny video?');
let media = view.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "").replace(/<!-.*?->/g, '')).toEqual(
`<video controls="" preload="metadata" style="max-height: 50vh" src="https://montague.lit/video.mp4"></video>`);
`<video controls="" preload="metadata" src="${Strophe.xmlescape(url)}"></video>`+
`<a target="_blank" rel="noopener" href="${Strophe.xmlescape(url)}">${Strophe.xmlescape(url)}</a>`);
// If the <url> and <body> contents is the same, don't duplicate.
stanza = u.toStanza(`
@ -97,7 +98,8 @@ describe("A Chat Message", function () {
expect(msg.innerHTML.replace(/<!-.*?->/g, '')).toEqual('Have you seen this funny video?');
media = view.querySelector('.chat-msg:last-child .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "").replace(/<!-.*?->/g, '')).toEqual(
`<video controls="" preload="metadata" style="max-height: 50vh" src="https://montague.lit/video.mp4"></video>`);
`<video controls="" preload="metadata" src="${Strophe.xmlescape(url)}"></video>`+
`<a target="_blank" rel="noopener" href="${Strophe.xmlescape(url)}">${Strophe.xmlescape(url)}</a>`);
done();
}));

View File

@ -2,4 +2,8 @@ converse-chat-message-body {
audio {
width: 100%;
}
video {
max-height: 25vh;
}
}

View File

@ -14,7 +14,6 @@ import {
import {
filterQueryParamsFromURL,
getHyperlinkTemplate,
getURI,
isAudioDomainAllowed,
isAudioURL,
isImageDomainAllowed,
@ -118,7 +117,7 @@ export class RichText extends String {
'onLoad': this.onImgClick
});
} else if (this.embed_videos && isVideoURL(url_text) && isVideoDomainAllowed(url_text)) {
template = tpl_video({ 'url': filtered_url });
template = tpl_video(filtered_url);
} else if (this.embed_audio && isAudioURL(url_text) && isAudioDomainAllowed(url_text)) {
template = tpl_audio(filtered_url);
} else {

View File

@ -1,3 +1,3 @@
import { html } from "lit";
export default (o) => html`<video controls preload="metadata" src="${o.url}" style="max-height: 50vh"></video>`;
export default (url) => html`<video controls preload="metadata" src="${url}"></video><a target="_blank" rel="noopener" href="${url}">${url}</a>`;

View File

@ -178,7 +178,7 @@ u.getOOBURLMarkup = function (_converse, url) {
return url;
}
if (u.isVideoURL(uri)) {
return tpl_video({ url });
return tpl_video(url);
} else if (u.isAudioURL(uri)) {
return renderAudioURL(url);
} else if (u.isImageURL(uri)) {