Add progress for ffmpeg components

materialious/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 30
-        versionName "1.3.1"
+        versionCode 31
+        versionName "1.3.2"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

materialious/electron/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Materialious",
-	"version": "1.3.1",
+	"version": "1.3.2",
 	"description": "Modern material design for Invidious.",
 	"author": {
 		"name": "Ward Pearce",

materialious/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "materialious",
-	"version": "1.3.1",
+	"version": "1.3.2",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -62,4 +62,4 @@
 		"svelte-persisted-store": "^0.11.0",
 		"vidstack": "^1.12.9"
 	}
-}
+}

materialious/src/lib/i18n/locales/en.json

@@ -74,7 +74,11 @@
 			"merging": "Merging video & audio together",
 			"video": "Downloading video",
 			"audio": "Downloading audio",
-			"ffmpeg": "Downloading ffmpeg library & components"
+			"ffmpeg": "Downloading ffmpeg library & components",
+			"classWorker": "Downloading ffmpeg class worker",
+			"core": "Downloading ffmpeg core",
+			"wasm": "Downloading ffmpeg wasm",
+			"worker": "Downloading ffmpeg worker"
 		},
 		"noPlaylists": "No playlists",
 		"unableToLoadComments": "Unable to load comments",

materialious/src/lib/videoDownload.ts

@@ -49,9 +49,9 @@ export async function fetchFile(
 export async function toBlobURL(
   url: string,
   mimeType: string,
+  onProgress?: (progress: number) => void
 ): Promise<string> {
-  const response = await fetch(url);
-  return URL.createObjectURL(new Blob([await response.arrayBuffer()], { type: mimeType }));
+  return URL.createObjectURL(new Blob([await fetchFile(url, onProgress)], { type: mimeType }));
 }
 
 
@@ -126,6 +126,10 @@ export async function mergeMediaFromDASH(
     audio?: (progress: number) => void,
     merging?: (progress: number) => void,
     loadingFfmpeg?: (completed: boolean) => void;
+    classWorker?: (progress: number) => void,
+    core?: (progress: number) => void;
+    wasm?: (progress: number) => void;
+    worker?: (progress: number) => void;
   }
 ) {
   if (progressCallbacks?.loadingFfmpeg) {
@@ -143,10 +147,10 @@ export async function mergeMediaFromDASH(
   });
 
   await ffmpeg.load({
-    classWorkerURL: await toBlobURL('/ffmpeg/ffmpeg-worker.js', 'text/javascript'),
-    coreURL: await toBlobURL('/ffmpeg/ffmpeg-core.js', 'text/javascript'),
-    wasmURL: await toBlobURL('/ffmpeg/ffmpeg-core.wasm', 'application/wasm'),
-    workerURL: await toBlobURL('/ffmpeg/ffmpeg-core.worker.js', 'text/javascript')
+    classWorkerURL: await toBlobURL('/ffmpeg/ffmpeg-worker.js', 'text/javascript', progressCallbacks?.classWorker),
+    coreURL: await toBlobURL('/ffmpeg/ffmpeg-core.js', 'text/javascript', progressCallbacks?.core),
+    wasmURL: await toBlobURL('/ffmpeg/ffmpeg-core.wasm', 'application/wasm', progressCallbacks?.wasm),
+    workerURL: await toBlobURL('/ffmpeg/ffmpeg-core.worker.js', 'text/javascript', progressCallbacks?.worker)
   });
 
   if (progressCallbacks?.loadingFfmpeg) {

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

@@ -416,8 +416,29 @@
 	}
 
 	function onLoadingFFmpeg(completed: boolean) {
+		downloadProgress = 0;
 		downloadStage = $_('player.downloadSteps.ffmpeg');
 	}
+
+	function onClassWorkerProgress(progress) {
+		downloadStage = $_('player.downloadSteps.classWorker');
+		downloadProgress = progress;
+	}
+
+	function onCoreProgress(progress) {
+		downloadStage = $_('player.downloadSteps.core');
+		downloadProgress = progress;
+	}
+
+	function onWasmProgress(progress) {
+		downloadStage = $_('player.downloadSteps.wasm');
+		downloadProgress = progress;
+	}
+
+	function onWorkerProgress(progress) {
+		downloadStage = $_('player.downloadSteps.worker');
+		downloadProgress = progress;
+	}
 </script>
 
 <svelte:head>
@@ -440,7 +461,12 @@
 
 		{#if downloadStage}
 			<article>
-				<h6>{downloadStage} ({Math.round(downloadProgress)}%)</h6>
+				<h6>
+					{downloadStage}
+					{#if downloadProgress > 0}
+						({Math.round(downloadProgress)}%)
+					{/if}
+				</h6>
 				<progress class="max" value={downloadProgress} max="100"></progress>
 			</article>
 		{/if}
@@ -546,7 +572,11 @@
 													video: onVideoDownloadProgress,
 													audio: onAudioDownloadProgress,
 													merging: onMergingProgress,
-													loadingFfmpeg: onLoadingFFmpeg
+													loadingFfmpeg: onLoadingFFmpeg,
+													classWorker: onClassWorkerProgress,
+													core: onCoreProgress,
+													wasm: onWasmProgress,
+													worker: onWorkerProgress
 												})}>{quality.resolution}</a
 										>
 									{/each}

update_versions.py

@@ -5,7 +5,7 @@ import json
 import os
 import re
 
-LATEST_VERSION = "1.3.1"
+LATEST_VERSION = "1.3.2"
 WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious")
 
 ROOT_PACKAGE = os.path.join(WORKING_DIR, "package.json")