FEATURE: Show video thumbnail in composer (#27233)

When uploading a video, the composer will now show a thumbnail image in
the composer preview instead of just the video placeholder image.

If `enable_diffhtml_preview` is enabled the video will be rendered in
the composer preview and is playable.

app/assets/javascripts/pretty-text/addon/upload-short-url.js

@@ -157,6 +157,33 @@ function _loadCachedShortUrls(uploadElements, siteSettings, opts) {
           }
         });
 
+        break;
+      case "DIV":
+        if (siteSettings.enable_diffhtml_preview === true) {
+          retrieveCachedUrl(upload, siteSettings, "orig-src", opts, (url) => {
+            const videoHTML = `
+              <video width="100%" height="100%" preload="metadata" controls style="">
+                <source src="${url}">
+              </video>`;
+            upload.insertAdjacentHTML("beforeend", videoHTML);
+            upload.classList.add("video-container");
+          });
+        } else {
+          retrieveCachedUrl(
+            upload,
+            siteSettings,
+            "orig-src-id",
+            opts,
+            (url) => {
+              upload.style.backgroundImage = `url('${url}')`;
+
+              const placeholderIcon = upload.querySelector(
+                ".placeholder-icon.video"
+              );
+              placeholderIcon.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
+            }
+          );
+        }
         break;
     }
   });
@@ -175,7 +202,9 @@ function _loadShortUrls(uploads, ajax, siteSettings, opts) {
   let urls = [...uploads].map((upload) => {
     return (
       upload.getAttribute("data-orig-src") ||
-      upload.getAttribute("data-orig-href")
+      upload.getAttribute("data-orig-href") ||
+      upload.getAttribute("data-orig-src-id") ||
+      upload.getAttribute("data-orig-src")
     );
   });
 
@@ -196,7 +225,7 @@ function _loadShortUrls(uploads, ajax, siteSettings, opts) {
 }
 
 const SHORT_URL_ATTRIBUTES =
-  "img[data-orig-src], a[data-orig-href], source[data-orig-src]";
+  "img[data-orig-src], a[data-orig-href], source[data-orig-src], div[data-orig-src-id], div[data-orig-src]";
 
 export function resolveCachedShortUrls(siteSettings, scope, opts) {
   const shortUploadElements = scope.querySelectorAll(SHORT_URL_ATTRIBUTES);

app/assets/stylesheets/common/base/onebox.scss

@@ -1046,7 +1046,7 @@ iframe.loom-onebox {
       &:before {
         opacity: 0.8;
         content: svg-uri(
-          '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="grey" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg>'
+          '<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="white" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg>'
         );
       }
     }

lib/pretty_text/helpers.rb

@@ -44,6 +44,10 @@ module PrettyText
 
       urls.each do |url|
         sha1 = Upload.sha1_from_short_url(url)
+        if (url.split(".")[1].nil?) # video sha1 without extension for thumbnail
+          thumbnail = Upload.where("original_filename LIKE ?", "#{sha1}.%").last
+          sha1 = thumbnail.sha1 if thumbnail
+        end
         map[url] = sha1 if sha1
       end
 

spec/system/composer_uploads_spec.rb

@@ -84,6 +84,11 @@ describe "Uploading files in the composer", type: :system do
       expect(composer).to have_no_in_progress_uploads
       expect(composer.preview).to have_css(".onebox-placeholder-container")
 
+      expect(page).to have_css(
+        '.onebox-placeholder-container[style*="background-image"]',
+        wait: Capybara.default_max_wait_time,
+      )
+
       composer.submit
 
       expect(find("#topic-title")).to have_content("Video upload test")
@@ -95,5 +100,26 @@ describe "Uploading files in the composer", type: :system do
         expect(page).to have_css(".video-placeholder-container[data-thumbnail-src]")
       end
     end
+
+    it "shows video player in composer" do
+      sign_in(current_user)
+      SiteSetting.enable_diffhtml_preview = true
+
+      visit "/new-topic"
+      expect(composer).to be_opened
+      topic.fill_in_composer_title("Video upload test")
+
+      file_path_1 = file_from_fixtures("small.mp4", "media").path
+      attach_file(file_path_1) { composer.click_toolbar_button("upload") }
+
+      expect(composer).to have_no_in_progress_uploads
+      expect(composer.preview).to have_css(".video-container video")
+
+      expect(page).to have_css(
+        ".video-container video source[src]",
+        visible: false,
+        wait: Capybara.default_max_wait_time,
+      )
+    end
   end
 end