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

This reverts commit 7d289a4. Now that 36bad0c is in, and we have video previews on all platforms, the commit that's being reverted is no longer needed. In 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
discourse · Jul 17, 2020 · cc9be1e · cc9be1e
1 parent fab8b86
commit cc9be1e
Show file tree

Hide file tree

Showing 4 changed files with 2 additions and 18 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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>