From 397adfd128d18be13cd2f1da1c6a739505f88fc3 Mon Sep 17 00:00:00 2001
From: Martin Brennan <mjrbrennan@gmail.com>
Date: Wed, 29 Jan 2020 15:52:02 +1000
Subject: [PATCH] FIX: Wrap markdown videos with video-container class to stop
 post height jumping (#8806)

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.
---
 .../pretty-text/engines/discourse-markdown-it.js.es6  | 11 +++++++----
 .../javascripts/pretty-text/white-lister.js.es6       |  1 +
 app/assets/stylesheets/common/base/onebox.scss        |  3 ++-
 test/javascripts/lib/pretty-text-test.js.es6          | 10 ++++++----
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/pretty-text/engines/discourse-markdown-it.js.es6 b/app/assets/javascripts/pretty-text/engines/discourse-markdown-it.js.es6
index 81bfdf033a0..4439455f12c 100644
--- a/app/assets/javascripts/pretty-text/engines/discourse-markdown-it.js.es6
+++ b/app/assets/javascripts/pretty-text/engines/discourse-markdown-it.js.es6
@@ -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") {
diff --git a/app/assets/javascripts/pretty-text/white-lister.js.es6 b/app/assets/javascripts/pretty-text/white-lister.js.es6
index fa711f07f5f..c866c557fa7 100644
--- a/app/assets/javascripts/pretty-text/white-lister.js.es6
+++ b/app/assets/javascripts/pretty-text/white-lister.js.es6
@@ -188,6 +188,7 @@ export const DEFAULT_LIST = [
   "span[lang]",
   "span.excerpt",
   "div.excerpt",
+  "div.video-container",
   "span.hashtag",
   "span.mention",
   "strike",
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index c09bfb54b65..7ec86bc8072 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -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%;
diff --git a/test/javascripts/lib/pretty-text-test.js.es6 b/test/javascripts/lib/pretty-text-test.js.es6
index 8178ad79959..d796eb6eddf 100644
--- a/test/javascripts/lib/pretty-text-test.js.es6
+++ b/test/javascripts/lib/pretty-text-test.js.es6
@@ -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"
   );
 });