diff --git a/apps/frontend/src/components/media/new.uploader.tsx b/apps/frontend/src/components/media/new.uploader.tsx index f1474bec..93038db3 100644 --- a/apps/frontend/src/components/media/new.uploader.tsx +++ b/apps/frontend/src/components/media/new.uploader.tsx @@ -69,7 +69,7 @@ export function useUppyUploader(props: { const uppy2 = new Uppy({ autoProceed: true, restrictions: { - maxNumberOfFiles: 5, + // maxNumberOfFiles: 5, allowedFileTypes: allowedFileTypes.split(','), maxFileSize: 1000000000, // Default 1GB, but we'll override with custom validation }, @@ -120,6 +120,67 @@ export function useUppyUploader(props: { }); }); + // required thumbnails + uppy2.addPreProcessor(async (fileIDs) => { + return new Promise(async (resolve, reject) => { + const findVideos = uppy2 + .getFiles() + .filter((f) => fileIDs.includes(f.id)) + .filter((f) => f.type?.startsWith('video/')); + + if (findVideos.length === 0) { + resolve(true); + return; + } + + for (const currentVideo of findVideos) { + const resolvedVideo = await new Promise((resolve, reject) => { + const video = document.createElement('video'); + const url = URL.createObjectURL(currentVideo.data); + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + video.addEventListener('loadedmetadata', () => { + const duration = video.duration; + const randomTime = Math.random() * duration; + + video.currentTime = randomTime; + + video.addEventListener('seeked', function capture() { + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + ctx.drawImage(video, 0, 0, canvas.width, canvas.height); + + canvas.toBlob((blob) => { + resolve(blob); + }); + // Cleanup + video.removeEventListener('seeked', capture); + URL.revokeObjectURL(url); + }); + }); + + video.src = url; + }); + + uppy2.addFile({ + name: `thumbnail-${Date.now()}.jpg`, + type: 'image/jpeg', + data: resolvedVideo, + meta: { + thumbnail: true, + videoId: currentVideo.id, + }, + isRemote: false, + }); + } + + // add the new thumbnail to uppy seperate from the file + + resolve(true); + }); + }); + const { plugin, options } = getUppyUploadPlugin( transloadit.length > 0 ? 'transloadit' : storageProvider, fetch, @@ -154,6 +215,7 @@ export function useUppyUploader(props: { return; } + console.log(result); if (transloadit.length > 0) { // @ts-ignore const allRes = result.transloadit[0].results;