Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Generate video thumbnails from the File object instead of the DOM (#20696) 

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
This commit is contained in:
Blake Erickson 2023-03-20 13:40:14 -06:00 committed by GitHub
parent 5b0d300b8a
commit 62e7c72126
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/composer-editor.js
View File

@ -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);

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

@ -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`,

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

@ -17,30 +17,12 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
useUploadPlaceholders: true,
@bind
_generateVideoThumbnail() {
if (!this.siteSettings.enable_diffhtml_preview) {
return;
}
_generateVideoThumbnail(videoFile, uploadUrl) {
let video = document.createElement("video");
video.src = URL.createObjectURL(videoFile.data);
let videos = document.getElementsByClassName("video-container");
if (!videos) {
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)
let videoSha1 = uploadUrl
.substring(uploadUrl.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,
});