web/remux: add basic progress example

web/src/lib/libav.ts

@@ -162,11 +162,14 @@ export default class LibAVWrapper {
             return "unknown";
         })();
 
-        const tryNumber = (str: string) => {
+        const tryNumber = (str: string, transform?: (n: number) => number) => {
             if (str) {
                 const num = Number(str);
                 if (!isNaN(num)) {
-                    return num;
+                    if (transform)
+                        return transform(num);
+                    else
+                        return num;
                 }
             }
         }
@@ -179,6 +182,7 @@ export default class LibAVWrapper {
             dup_frames: tryNumber(entries.dup_frames),
             drop_frames: tryNumber(entries.drop_frames),
             speed: tryNumber(entries.speed?.trim()?.replace('x', '')),
+            out_time_sec: tryNumber(entries.out_time_us, n => Math.floor(n / 1e6))
         };
 
         this.onProgress(progress);

web/src/lib/types/libav.ts

@@ -22,6 +22,7 @@ export type FFmpegProgressEvent = {
     dup_frames?: number,
     drop_frames?: number,
     speed?: number,
+    out_time_sec?: number,
 }
 
 export type FFmpegProgressCallback = (info: FFmpegProgressEvent) => void;

web/src/routes/remux/+page.svelte

@@ -9,15 +9,34 @@
     let draggedOver = false;
     let file: File | undefined;
 
+    let totalDuration: number | undefined;
+    let processedDuration: number | undefined;
+    let progress = '';
+
+    $: {
+        if (totalDuration && processedDuration && processing) {
+            const percentage = ((processedDuration / totalDuration) * 100).toFixed(2);
+            progress = `(${percentage}%)`;
+        } else progress = '';
+    }
+
     let processing = false;
 
-    const ff = new LibAVWrapper(console.log);
+    const ff = new LibAVWrapper(progress => {
+        if (progress.out_time_sec) {
+            processedDuration = progress.out_time_sec;
+        }
+    });
+
     ff.init();
 
     const render = async () => {
         if (!file || processing) return;
         await ff.init();
 
+        const file_info = await ff.probe(file);
+        totalDuration = Number(file_info.format.duration);
+
         processing = true;
 
         const render = await ff.render({
@@ -64,7 +83,7 @@
 
     <div id="remux-processing" class:processing>
         {#if processing}
-            processing...
+            processing... {progress}
         {:else}
             done!
         {/if}