FEATURE: Show a placeholder instead of videos in preview (#10962)

Adding a video in composer and then continuing to type into it will make the
video element flicker and restart playback on every keystroke, as the preview
is rendered. In certain configurations, this can lead to some performance
problems too.

Onebox already does the same for external videos.

app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js

@@ -1545,3 +1545,13 @@ test("extractDataAttribute", (assert) => {
   assert.notOk(extractDataAttribute("foo?=bar"));
   assert.notOk(extractDataAttribute("https://discourse.org/?q=hello"));
 });
+
+test("video - display placeholder when previewing", (assert) => {
+  assert.cookedOptions(
+    `![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)`,
+    { previewing: true },
+    `<p><div class=\"onebox-placeholder-container\">
+        <span class=\"placeholder-icon video\"></span>
+      </div></p>`
+  );
+});

app/assets/javascripts/pretty-text/addon/engines/discourse-markdown-it.js

@@ -174,7 +174,13 @@ 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
   if (split[1] === "video") {
-    return videoHTML(token);
+    if (options.discourse.previewing) {
+      return `<div class="onebox-placeholder-container">
+        <span class="placeholder-icon video"></span>
+      </div>`;
+    } else {
+      return videoHTML(token);
+    }
   } else if (split[1] === "audio") {
     return audioHTML(token);
   }

app/assets/javascripts/pretty-text/addon/white-lister.js

@@ -188,6 +188,8 @@ export const DEFAULT_LIST = [
   "span.excerpt",
   "div.excerpt",
   "div.video-container",
+  "div.onebox-placeholder-container",
+  "span.placeholder-icon video",
   "span.hashtag",
   "span.mention",
   "strike",