Revert "UX: Style video elements, show descriptions (#10040)" (#10258)

Revert “UX: Style video elements, show descriptions (#10040)” (#10258)

This reverts commit 7d289a4f3e9531a0c7e458a52af85d0ae5affab9.

Now that 36bad0c31f6fb1afce2d311b72f5f9661be6af97 is in and we have video previews on all platforms, the commit that’s being reverted is no longer needed. In the worst case scenario, the video description is clipped under the video poster if the video aspect ratio is other than 16:9. This commit removes descriptions and the custom style for the video elements.

Conflicts:# app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js# test/javascripts/lib/pretty-text-test.js

diff --git a/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js b/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js
index 3454994..1a5f50a 100644
--- a/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js
+++ b/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js
@@ -141,12 +141,11 @@ export function extractDataAttribute(str) {
 
 // videoHTML and audioHTML follow the same HTML syntax
 // as oneboxer.rb when dealing with these formats
-function videoHTML(token, opts) {
+function videoHTML(token) {
   const src = token.attrGet("src");
   const origSrc = token.attrGet("data-orig-src");
   const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : "";
   return `<div class="video-container">
-    <p class="video-description">${opts.alt}</p>
     <video width="100%" height="100%" preload="metadata" controls>
       <source src="${src}" ${dataOrigSrcAttr}>
       <a href="${src}">${src}</a>
@@ -174,11 +173,8 @@ 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
-  const mediaOpts = {
-    alt: split[0]
-  };
   if (split[1] === "video") {
-    return videoHTML(token, mediaOpts);
+    return videoHTML(token);
   } else if (split[1] === "audio") {
     return audioHTML(token);
   }
diff --git a/app/assets/javascripts/pretty-text/addon/white-lister.js b/app/assets/javascripts/pretty-text/addon/white-lister.js
index 15ae2ae..0d2ded7 100644
--- a/app/assets/javascripts/pretty-text/addon/white-lister.js
+++ b/app/assets/javascripts/pretty-text/addon/white-lister.js
@@ -185,7 +185,6 @@ export const DEFAULT_LIST = [
   "span.excerpt",
   "div.excerpt",
   "div.video-container",
-  "p.video-description",
   "span.hashtag",
   "span.mention",
   "strike",
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 15da415..124da3e 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -703,9 +703,6 @@ aside.onebox.stackexchange .onebox-body {
 // Force oneboxed videos to 16:9 aspect ratio
 .onebox.video-onebox,
 .video-container {
-  background: $primary-very-low;
-  border: 1px solid $primary-low;
-  border-radius: 2px;
   position: relative;
   padding: 0 0 56.25% 0;
   width: 100%;
@@ -717,12 +714,6 @@ aside.onebox.stackexchange .onebox-body {
   }
 }
 
-.video-description {
-  color: $primary-medium;
-  margin: 1rem;
-  position: absolute;
-}
-
 .onebox-placeholder-container {
   position: relative;
   width: 100%;
diff --git a/test/javascripts/lib/pretty-text-test.js b/test/javascripts/lib/pretty-text-test.js
index 5ab9895..e02e8c7 100644
--- a/test/javascripts/lib/pretty-text-test.js
+++ b/test/javascripts/lib/pretty-text-test.js
@@ -1029,7 +1029,6 @@ QUnit.test("video", assert => {
   assert.cooked(
     "![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
     `<p><div class="video-container">
-    <p class="video-description">baby shark</p>
     <video width="100%" height="100%" preload="metadata" controls>
       <source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
       <a href="/404">/404</a>
@@ -1056,7 +1055,6 @@ QUnit.test("video - mapped url - secure media enabled", assert => {
       lookupUploadUrls: lookupUploadUrls
     },
     `<p><div class="video-container">
-    <p class="video-description">baby shark</p>
     <video width="100%" height="100%" preload="metadata" controls>
       <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>

GitHub sha: de79f199

This commit appears in #10258 which was approved by eviltrout. It was merged by CvX.