From f6063c684ba9a158e42083e57af77aeeae80c189 Mon Sep 17 00:00:00 2001
From: Blake Erickson <o.blakeerickson@gmail.com>
Date: Thu, 9 Mar 2023 13:19:19 -0700
Subject: [PATCH] DEV: Add crossOrigin to video tag (#20617)

* DEV: Add crossOrigin to video tag

This is a follow-up commit to f144c64e139e41f176ea2ec3433a468fa49b955f
which enables the ability to generate thumbnail images for video
uploads.

In order for the html5 canvas element to create an image or blob the
source video element needs to to have the crossOrigin attribute set to
"anonymous" because a cdn is likely being used in production
environments.

We are already doing something similar in
https://github.com/discourse/discourse/blob/e292c45924bb0b0a79497e5f494afcb8af2e1efc/app/assets/javascripts/discourse/app/lib/update-tab-count.js#L63
---
 .../javascripts/discourse/tests/unit/lib/pretty-text-test.js  | 4 ++--
 .../pretty-text/addon/engines/discourse-markdown-it.js        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js b/app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js
index 085a971f700..2fd249ed870 100644
--- a/app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js
+++ b/app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js
@@ -1048,7 +1048,7 @@ eviltrout</p>
     assert.cooked(
       "![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
       `<p><div class="video-container">
-    <video width="100%" height="100%" preload="metadata" controls>
+    <video width="100%" height="100%" preload="metadata" crossorigin="anonymous" controls>
       <source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
       <a href="/404">/404</a>
     </video>
@@ -1074,7 +1074,7 @@ eviltrout</p>
         lookupUploadUrls,
       },
       `<p><div class="video-container">
-    <video width="100%" height="100%" preload="metadata" controls>
+    <video width="100%" height="100%" preload="metadata" crossorigin="anonymous" controls>
       <source src="/secure-uploads/original/3X/c/b/test.mp4">
       <a href="/secure-uploads/original/3X/c/b/test.mp4">/secure-uploads/original/3X/c/b/test.mp4</a>
     </video>
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 84f8ce8c37a..69542c4ea50 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
@@ -160,7 +160,7 @@ function videoHTML(token) {
   const origSrc = token.attrGet("data-orig-src");
   const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : "";
   return `<div class="video-container">
-    <video width="100%" height="100%" preload="metadata" controls>
+    <video width="100%" height="100%" preload="metadata" crossOrigin="anonymous" controls>
       <source src="${src}" ${dataOrigSrcAttr}>
       <a href="${src}">${src}</a>
     </video>