From f292e645b9eed988b20067e4e66d7ef1053e00cb Mon Sep 17 00:00:00 2001 From: Blake Erickson Date: Wed, 29 May 2024 08:24:29 -0600 Subject: [PATCH] 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. --- .../pretty-text/addon/upload-short-url.js | 33 +++++++++++++++++-- .../stylesheets/common/base/onebox.scss | 2 +- lib/pretty_text/helpers.rb | 4 +++ spec/system/composer_uploads_spec.rb | 26 +++++++++++++++ 4 files changed, 62 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/pretty-text/addon/upload-short-url.js b/app/assets/javascripts/pretty-text/addon/upload-short-url.js index ef2ad136956..55338061fa7 100644 --- a/app/assets/javascripts/pretty-text/addon/upload-short-url.js +++ b/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 = ` + `; + 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); diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss index 395d26babfd..be0c5b2a38b 100644 --- a/app/assets/stylesheets/common/base/onebox.scss +++ b/app/assets/stylesheets/common/base/onebox.scss @@ -1046,7 +1046,7 @@ iframe.loom-onebox { &:before { opacity: 0.8; content: svg-uri( - '' + '' ); } } diff --git a/lib/pretty_text/helpers.rb b/lib/pretty_text/helpers.rb index 0b60e66f447..a20d77decee 100644 --- a/lib/pretty_text/helpers.rb +++ b/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 diff --git a/spec/system/composer_uploads_spec.rb b/spec/system/composer_uploads_spec.rb index 7c081509b90..8a1914e97e1 100644 --- a/spec/system/composer_uploads_spec.rb +++ b/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