Add ffmpeg download progress

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",

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

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -414,6 +414,10 @@
 			downloadStage = undefined;
 		}
 	}
+
+	function onLoadingFFmpeg(completed: boolean) {
+		downloadStage = $_('player.downloadSteps.ffmpeg');
+	}
 </script>
 
 <svelte:head>
@@ -541,7 +545,8 @@
 												await mergeMediaFromDASH(quality, data.video.title, {
 													video: onVideoDownloadProgress,
 													audio: onAudioDownloadProgress,
-													merging: onMergingProgress
+													merging: onMergingProgress,
+													loadingFfmpeg: onLoadingFFmpeg
 												})}>{quality.resolution}</a
 										>
 									{/each}