DEV: Generate video thumbnails from the File object instead of the DOM

In order to avoid built in browser CORS issues and sites that are using
CDNs this change allows us to generate thumbnail images from videos
directly from the File uploaded instead of reading the already uploaded
file via the `video` tag.

Follow-up to: f144c64e13

app/assets/javascripts/discourse/app/components/composer-editor.js

@@ -937,8 +937,6 @@ export default Component.extend(
         // Short upload urls need resolution
         resolveAllShortUrls(ajax, this.siteSettings, preview);
 
-        this._generateVideoThumbnail();
-
         preview.addEventListener("click", this._handleImageScaleButtonClick);
         this._registerImageAltTextButtonClick(preview);
 

app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js

@@ -325,6 +325,11 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
 
         cacheShortUploadUrl(upload.short_url, upload);
 
+        // video/mp4, video/webm, video/quicktime, etc.
+        if (file.type.split("/")[0] === "video") {
+          this._generateVideoThumbnail(file, upload.url);
+        }
+
         if (this.useUploadPlaceholders) {
           this.appEvents.trigger(
             `${this.composerEventPrefix}:replace-text`,

app/assets/javascripts/discourse/app/mixins/composer-video-thumbnail-uppy.js

@@ -17,30 +17,12 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
   useUploadPlaceholders: true,
 
   @bind
-  _generateVideoThumbnail() {
+  _generateVideoThumbnail(videoFile, uploadUrl) {
-    if (!this.siteSettings.enable_diffhtml_preview) {
+    let video = document.createElement("video");
-      return;
+    video.src = URL.createObjectURL(videoFile.data);
-    }
 
-    let videos = document.getElementsByClassName("video-container");
+    let videoSha1 = uploadUrl
-    if (!videos) {
+      .substring(uploadUrl.lastIndexOf("/") + 1)
-      return;
-    }
-
-    // Only generate a topic thumbnail for the first video
-    let video_container = videos[0];
-    if (!video_container) {
-      return;
-    }
-
-    let video = video_container.querySelector("video:first-of-type");
-    if (!video) {
-      return;
-    }
-
-    let video_src = video.getElementsByTagName("source")[0].src;
-    let video_sha1 = video_src
-      .substring(video_src.lastIndexOf("/") + 1)
       .split(".")[0];
 
     // Wait for the video element to load, otherwise the canvas will be empty
@@ -58,10 +40,10 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
       // upload video thumbnail
       canvas.toBlob((blob) => {
         this._uppyInstance = new Uppy({
-          id: `screenshot-placeholder`,
+          id: "video-thumbnail",
           meta: {
             upload_type: `thumbnail`,
-            video_sha1,
+            videoSha1,
           },
           autoProceed: true,
         });
@@ -99,7 +81,7 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
         try {
           this._uppyInstance.addFile({
             source: `${this.id} thumbnail`,
-            name: video_sha1,
+            name: `${videoSha1}`,
             type: blob.type,
             data: blob,
           });