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

FIX: Blank video thumbnails (#21200) 

* FIX: Blank video thumbnails

On some mobile and possibly other browsers, the automatic video
thumbnail generation would create blank or all white images.

This commit addresses several different issues that was preventing image
generation from working correctly on mobile.

* fix typo
This commit is contained in:
Blake Erickson 2023-04-24 12:34:30 -06:00 committed by GitHub
parent 6cb733d6c7
commit 6890beb95a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 66 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,22 +21,31 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
let video = document.createElement("video");
video.src = URL.createObjectURL(videoFile.data);
// These attributes are needed for thumbnail generation on mobile.
// This video tag is not visible, so this is all happening in the background.
video.autoplay = true;
video.muted = true;
video.playsinline = true;
let videoSha1 = uploadUrl
.substring(uploadUrl.lastIndexOf("/") + 1)
.split(".")[0];
// Wait for the video element to load, otherwise the canvas will be empty
video.oncanplay = () => {
// Wait for the video element to load, otherwise the canvas will be empty.
// iOS Safari prefers onloadedmetadata over oncanplay.
video.onloadedmetadata = () => {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let videoHeight, videoWidth;
videoHeight = video.videoHeight;
videoWidth = video.videoWidth;
canvas.width = videoWidth;
canvas.height = videoHeight;
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
// A timeout is needed on mobile.
setTimeout(() => {
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}, 100);
// A timeout is needed on mobile.
setTimeout(() => {
// upload video thumbnail
canvas.toBlob((blob) => {
this._uppyInstance = new Uppy({
@ -91,6 +100,7 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
});
}
});
}, 100);
};
},