github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 09:42:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: Wrap markdown videos with video-container class to stop post height jumping (#8806)

Browse Source 
This will lock video aspect ratio to 16:9 and stop them from making posts jump around on load.

See also discourse/onebox@6f58545 and fe20cb4.
This commit is contained in:
Martin Brennan 2020-01-29 15:52:02 +10:00 committed by GitHub
parent d2ce733936
commit 397adfd128
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/pretty-text/engines/discourse-markdown-it.js.es6
View File

@ -144,10 +144,12 @@ export function extractDataAttribute(str) {
function videoHTML(token) {
const src = token.attrGet("src");
const origSrc = token.attrGet("data-orig-src");
return `<video width="100%" height="100%" controls>
<source src="${src}" data-orig-src="${origSrc}">
<a href="${src}">${src}</a>
</video>`;
return `<div class="video-container">
<video width="100%" height="100%" controls>
<source src="${src}" data-orig-src="${origSrc}">
<a href="${src}">${src}</a>
</video>
</div>`;
}
function audioHTML(token) {
@ -169,6 +171,7 @@ function renderImageOrPlayableMedia(tokens, idx, options, env, slf) {
// markdown-it supports returning HTML instead of continuing to render the current token
// see https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
// handles |video and |audio alt transformations for image tags
if (split[1] === "video") {
return videoHTML(token);
} else if (split[1] === "audio") {

1
app/assets/javascripts/pretty-text/white-lister.js.es6
View File

@ -188,6 +188,7 @@ export const DEFAULT_LIST = [
"span[lang]",
"span.excerpt",
"div.excerpt",
"div.video-container",
"span.hashtag",
"span.mention",
"strike",

3
app/assets/stylesheets/common/base/onebox.scss
View File

@ -691,7 +691,8 @@ aside.onebox.stackexchange .onebox-body {
}
// Force oneboxed videos to 16:9 aspect ratio
.onebox.video-onebox {
.onebox.video-onebox,
.video-container {
position: relative;
padding: 0 0 56.25% 0;
width: 100%;

10
test/javascripts/lib/pretty-text-test.js.es6
View File

@ -976,10 +976,12 @@ QUnit.test("images", assert => {
QUnit.test("video", assert => {
assert.cooked(
"![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
`<p><video width="100%" height="100%" controls>
<source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
<a href="/404">/404</a>
</video></p>`,
`<p><div class="video-container">
<video width="100%" height="100%" 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"
);
});