FIX: Preload metadata for audio/video when secure media enabled

Fixes an issue with missing video previews. Should have no side effects now that presigned URLs expire after 5 minutes.
This commit is contained in:
Penar Musaraj 2020-07-15 18:36:51 -04:00
parent 9e160f58ab
commit 36bad0c31f
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
2 changed files with 6 additions and 40 deletions

View File

@ -144,23 +144,21 @@ export function extractDataAttribute(str) {
function videoHTML(token, opts) { function videoHTML(token, opts) {
const src = token.attrGet("src"); const src = token.attrGet("src");
const origSrc = token.attrGet("data-orig-src"); const origSrc = token.attrGet("data-orig-src");
const preloadType = opts.secureMedia ? "none" : "metadata";
const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : ""; const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : "";
return `<div class="video-container"> return `<div class="video-container">
<p class="video-description">${opts.alt}</p> <p class="video-description">${opts.alt}</p>
<video width="100%" height="100%" preload="${preloadType}" controls> <video width="100%" height="100%" preload="metadata" controls>
<source src="${src}" ${dataOrigSrcAttr}> <source src="${src}" ${dataOrigSrcAttr}>
<a href="${src}">${src}</a> <a href="${src}">${src}</a>
</video> </video>
</div>`; </div>`;
} }
function audioHTML(token, opts) { function audioHTML(token) {
const src = token.attrGet("src"); const src = token.attrGet("src");
const origSrc = token.attrGet("data-orig-src"); const origSrc = token.attrGet("data-orig-src");
const preloadType = opts.secureMedia ? "none" : "metadata";
const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : ""; const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : "";
return `<audio preload="${preloadType}" controls> return `<audio preload="metadata" controls>
<source src="${src}" ${dataOrigSrcAttr}> <source src="${src}" ${dataOrigSrcAttr}>
<a href="${src}">${src}</a> <a href="${src}">${src}</a>
</audio>`; </audio>`;
@ -177,13 +175,12 @@ function renderImageOrPlayableMedia(tokens, idx, options, env, slf) {
// see https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer // see https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
// handles |video and |audio alt transformations for image tags // handles |video and |audio alt transformations for image tags
const mediaOpts = { const mediaOpts = {
secureMedia: options.discourse.limitedSiteSettings.secureMedia,
alt: split[0] alt: split[0]
}; };
if (split[1] === "video") { if (split[1] === "video") {
return videoHTML(token, mediaOpts); return videoHTML(token, mediaOpts);
} else if (split[1] === "audio") { } else if (split[1] === "audio") {
return audioHTML(token, mediaOpts); return audioHTML(token);
} }
// parsing ![myimage|500x300]() or ![myimage|75%]() or ![myimage|500x300, 75%] // parsing ![myimage|500x300]() or ![myimage|75%]() or ![myimage|500x300, 75%]
@ -342,10 +339,6 @@ export function setup(opts, siteSettings, state) {
opts.discourse = copy; opts.discourse = copy;
getOptions.f = () => opts.discourse; getOptions.f = () => opts.discourse;
opts.discourse.limitedSiteSettings = {
secureMedia: siteSettings.secure_media
};
opts.engine = window.markdownit({ opts.engine = window.markdownit({
discourse: opts.discourse, discourse: opts.discourse,
html: true, html: true,

View File

@ -1025,33 +1025,6 @@ QUnit.test("attachment - mapped url - secure media enabled", assert => {
); );
}); });
QUnit.test("video - secure media enabled", assert => {
assert.cookedOptions(
"![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
{ siteSettings: { secure_media: true } },
`<p><div class="video-container">
<p class="video-description">baby shark</p>
<video width="100%" height="100%" preload="none" controls>
<source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
<a href="/404">/404</a>
</video>
</div></p>`,
"It returns the correct video player HTML"
);
});
QUnit.test("audio - secure media enabled", assert => {
assert.cookedOptions(
"![young americans|audio](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp3)",
{ siteSettings: { secure_media: true } },
`<p><audio preload="none" controls>
<source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp3">
<a href="/404">/404</a>
</audio></p>`,
"It returns the correct audio player HTML"
);
});
QUnit.test("video", assert => { QUnit.test("video", assert => {
assert.cooked( assert.cooked(
"![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)", "![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
@ -1084,7 +1057,7 @@ QUnit.test("video - mapped url - secure media enabled", assert => {
}, },
`<p><div class="video-container"> `<p><div class="video-container">
<p class="video-description">baby shark</p> <p class="video-description">baby shark</p>
<video width="100%" height="100%" preload="none" controls> <video width="100%" height="100%" preload="metadata" controls>
<source src="/secure-media-uploads/original/3X/c/b/test.mp4"> <source src="/secure-media-uploads/original/3X/c/b/test.mp4">
<a href="/secure-media-uploads/original/3X/c/b/test.mp4">/secure-media-uploads/original/3X/c/b/test.mp4</a> <a href="/secure-media-uploads/original/3X/c/b/test.mp4">/secure-media-uploads/original/3X/c/b/test.mp4</a>
</video> </video>
@ -1120,7 +1093,7 @@ QUnit.test("audio - mapped url - secure media enabled", assert => {
siteSettings: { secure_media: true }, siteSettings: { secure_media: true },
lookupUploadUrls: lookupUploadUrls lookupUploadUrls: lookupUploadUrls
}, },
`<p><audio preload="none" controls> `<p><audio preload="metadata" controls>
<source src="/secure-media-uploads/original/3X/c/b/test.mp3"> <source src="/secure-media-uploads/original/3X/c/b/test.mp3">
<a href="/secure-media-uploads/original/3X/c/b/test.mp3">/secure-media-uploads/original/3X/c/b/test.mp3</a> <a href="/secure-media-uploads/original/3X/c/b/test.mp3">/secure-media-uploads/original/3X/c/b/test.mp3</a>
</audio></p>`, </audio></p>`,