diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json index 50dbee11..8935b9c6 100644 --- a/materialious/src/lib/i18n/locales/en.json +++ b/materialious/src/lib/i18n/locales/en.json @@ -73,7 +73,8 @@ "downloadSteps": { "merging": "Merging video & audio together", "video": "Downloading video", - "audio": "Downloading audio" + "audio": "Downloading audio", + "ffmpeg": "Downloading ffmpeg library & components" }, "noPlaylists": "No playlists", "unableToLoadComments": "Unable to load comments", diff --git a/materialious/src/lib/videoDownload.ts b/materialious/src/lib/videoDownload.ts index 60c3abb3..314d142c 100644 --- a/materialious/src/lib/videoDownload.ts +++ b/materialious/src/lib/videoDownload.ts @@ -125,8 +125,13 @@ export async function mergeMediaFromDASH( video?: (progress: number) => void, audio?: (progress: number) => void, merging?: (progress: number) => void, + loadingFfmpeg?: (completed: boolean) => void; } ) { + if (progressCallbacks?.loadingFfmpeg) { + progressCallbacks.loadingFfmpeg(false); + } + const FFmpeg = await import('@ffmpeg/ffmpeg'); const ffmpeg = new FFmpeg.FFmpeg(); @@ -144,6 +149,10 @@ export async function mergeMediaFromDASH( workerURL: await toBlobURL('/ffmpeg/ffmpeg-core.worker.js', 'text/javascript') }); + if (progressCallbacks?.loadingFfmpeg) { + progressCallbacks.loadingFfmpeg(true); + } + const { videoUrl, audioUrl } = selectedQuality; ffmpeg.writeFile('input.mp4', await fetchFile(videoUrl, progressCallbacks?.video)); @@ -156,7 +165,7 @@ export async function mergeMediaFromDASH( const url = URL.createObjectURL(mergedFile); const a = document.createElement('a'); a.href = url; - a.download = `${fileName}.mp4`; + a.download = `${fileName} - ${selectedQuality.resolution}.mp4`; document.body.appendChild(a); a.click(); diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte index 9453c8e3..296f85cf 100644 --- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte +++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte @@ -414,6 +414,10 @@ downloadStage = undefined; } } + + function onLoadingFFmpeg(completed: boolean) { + downloadStage = $_('player.downloadSteps.ffmpeg'); + } @@ -541,7 +545,8 @@ await mergeMediaFromDASH(quality, data.video.title, { video: onVideoDownloadProgress, audio: onAudioDownloadProgress, - merging: onMergingProgress + merging: onMergingProgress, + loadingFfmpeg: onLoadingFFmpeg })}>{quality.resolution} {/each}