From 7d289a4f3e9531a0c7e458a52af85d0ae5affab9 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Wed, 17 Jun 2020 12:38:00 +0200
Subject: [PATCH] UX: Style video elements, show descriptions (#10040)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It's a stop gap – ideally we would generate a thumbnail for uploaded videos. For now, a bit of intentionality in the style and a pinch of context should do.
---
 .../pretty-text/addon/engines/discourse-markdown-it.js   | 4 +++-
 app/assets/javascripts/pretty-text/addon/white-lister.js | 1 +
 app/assets/stylesheets/common/base/onebox.scss           | 9 +++++++++
 test/javascripts/lib/pretty-text-test.js                 | 3 +++
 4 files changed, 16 insertions(+), 1 deletion(-)

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 213aef39d9a..358595d2485 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
@@ -147,6 +147,7 @@ function videoHTML(token, opts) {
   const preloadType = opts.secureMedia ? "none" : "metadata";
   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="${preloadType}" controls>
       <source src="${src}" ${dataOrigSrcAttr}>
       <a href="${src}">${src}</a>
@@ -176,7 +177,8 @@ function renderImageOrPlayableMedia(tokens, idx, options, env, slf) {
   // 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 = {
-    secureMedia: options.discourse.limitedSiteSettings.secureMedia
+    secureMedia: options.discourse.limitedSiteSettings.secureMedia,
+    alt: split[0]
   };
   if (split[1] === "video") {
     return videoHTML(token, mediaOpts);
diff --git a/app/assets/javascripts/pretty-text/addon/white-lister.js b/app/assets/javascripts/pretty-text/addon/white-lister.js
index 88eb29085b4..e161c630070 100644
--- a/app/assets/javascripts/pretty-text/addon/white-lister.js
+++ b/app/assets/javascripts/pretty-text/addon/white-lister.js
@@ -185,6 +185,7 @@ 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 124da3ec4b6..15da415d4e0 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -703,6 +703,9 @@ 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%;
@@ -714,6 +717,12 @@ 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 a5619bcc77d..c1304f3657d 100644
--- a/test/javascripts/lib/pretty-text-test.js
+++ b/test/javascripts/lib/pretty-text-test.js
@@ -1030,6 +1030,7 @@ QUnit.test("video - secure media enabled", assert => {
     "![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>
@@ -1055,6 +1056,7 @@ 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>
@@ -1081,6 +1083,7 @@ 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="none" 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>