feat(ffmpeg): enhance progress tracking and logging

- Improved progress tracking in FFmpeg worker by extracting total duration and current time from logs.
- Updated downloadTrackBlob function to use console logging for progress updates.
- Enhanced error handling and progress reporting during audio encoding.

js/api.js

@@ -1201,7 +1201,14 @@ export class LosslessAPI {
             // Convert to MP3 320kbps if requested
             if (quality === 'MP3_320') {
                 try {
-                    blob = await encodeToMp3(blob, onProgress, options.signal);
+                    blob = await encodeToMp3(
+                        blob,
+                        (progress) => {
+                            console.log(progress);
+                            onProgress?.(progress);
+                        },
+                        options.signal
+                    );
                 } catch (encodingError) {
                     if (onProgress) {
                         onProgress({
@@ -1223,7 +1230,10 @@ export class LosslessAPI {
                                     { args: ['-c:a', 'copy'] },
                                     'output.flac',
                                     'audio/flac',
-                                    onProgress,
+                                    (progress) => {
+                                        console.log(progress);
+                                        onProgress?.(progress);
+                                    },
                                     options.signal
                                 );
                             }
@@ -1234,7 +1244,10 @@ export class LosslessAPI {
                                 { args: ['-c:a', 'alac'] },
                                 'output.m4a',
                                 'audio/mp4',
-                                onProgress,
+                                (progress) => {
+                                    console.log(progress);
+                                    onProgress?.(progress);
+                                },
                                 options.signal
                             );
                             break;

js/downloads.js

@@ -362,7 +362,7 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
 
     // Convert to MP3 320kbps if requested
     if (quality === 'MP3_320') {
-        blob = await encodeToMp3(blob, () => undefined, signal);
+        blob = await encodeToMp3(blob, console.log, signal);
     }
 
     if (quality.endsWith('LOSSLESS')) {
@@ -375,7 +375,7 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
                             { args: ['-c:a', 'copy'] },
                             'output.flac',
                             'audio/flac',
-                            () => undefined,
+                            console.log,
                             signal
                         );
                     }
@@ -386,7 +386,7 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null, sign
                         { args: ['-c:a', 'alac'] },
                         'output.m4a',
                         'audio/mp4',
-                        () => undefined,
+                        console.log,
                         signal
                     );
                     break;

js/ffmpeg.worker.js

@@ -3,6 +3,36 @@ import { FFmpeg } from '@ffmpeg/ffmpeg';
 let ffmpeg = null;
 let loadingPromise = null;
 
+// For granular progress
+let totalDurationSeconds = null;
+let lastProgress = 0;
+
+function parseTimestamp(str) {
+    // Expects format: 00:03:19.26
+    const match = str.match(/(\d+):(\d+):(\d+\.?\d*)/);
+    if (!match) return null;
+    const [, h, m, s] = match;
+    return parseInt(h) * 3600 + parseInt(m) * 60 + parseFloat(s);
+}
+
+function extractDurationFromLog(log) {
+    // Looks for 'Duration: 00:03:19.26'
+    const match = log.match(/Duration: (\d+:\d+:\d+\.?\d*)/);
+    if (match) {
+        return parseTimestamp(match[1]);
+    }
+    return null;
+}
+
+function extractTimeFromLog(log) {
+    // Looks for 'time=00:01:05.53'
+    const match = log.match(/time=(\d+:\d+:\d+\.?\d*)/);
+    if (match) {
+        return parseTimestamp(match[1]);
+    }
+    return null;
+}
+
 async function loadFFmpeg(loadOptions = {}) {
     if (loadingPromise) return loadingPromise;
 
@@ -11,20 +41,55 @@ async function loadFFmpeg(loadOptions = {}) {
 
         ffmpeg.on('log', ({ message }) => {
             self.postMessage({ type: 'log', message });
+
+            // Try to extract total duration from input log
+            if (totalDurationSeconds === null) {
+                const dur = extractDurationFromLog(message);
+                if (dur) {
+                    totalDurationSeconds = dur;
+                    self.postMessage({ type: 'progress', stage: 'parsing', message: `Detected duration: ${dur}s` });
+                }
+            }
+
+            // Try to extract current time from progress log
+            if (totalDurationSeconds) {
+                const cur = extractTimeFromLog(message);
+                if (cur !== null) {
+                    let progress = Math.min(100, (cur / totalDurationSeconds) * 100);
+                    // Only send if progress increased by at least 0.1%
+                    if (progress - lastProgress >= 0.1 || progress === 100) {
+                        lastProgress = progress;
+                        self.postMessage({
+                            type: 'progress',
+                            stage: 'encoding',
+                            progress,
+                            time: cur,
+                            message: `Encoding: ${progress.toFixed(1)}% (${cur.toFixed(2)}s / ${totalDurationSeconds.toFixed(2)}s)`,
+                        });
+                    }
+                }
+            }
         });
 
+        // Optionally keep the original progress event for fallback
         ffmpeg.on('progress', ({ progress, time }) => {
-            self.postMessage({
-                type: 'progress',
-                stage: 'encoding',
-                progress: progress * 100,
-                time,
-            });
+            // Only send if we don't have granular progress
+            if (!totalDurationSeconds) {
+                self.postMessage({
+                    type: 'progress',
+                    stage: 'encoding',
+                    progress: progress * 100,
+                    time,
+                });
+            }
         });
 
         self.postMessage({ type: 'progress', stage: 'loading', message: 'Loading FFmpeg...' });
 
         await ffmpeg.load(loadOptions);
+        // Reset progress state for each run
+        totalDurationSeconds = null;
+        lastProgress = 0;
     })();
 
     return loadingPromise;
@@ -47,7 +112,7 @@ self.onmessage = async (e) => {
         console.log(loadOptions);
         await loadFFmpeg(loadOptions);
 
-        self.postMessage({ type: 'progress', stage: 'encoding', message: encodeStartMessage });
+        self.postMessage({ type: 'progress', stage: 'encoding', message: encodeStartMessage, progress: 0.0 });
 
         try {
             // Write input file to FFmpeg virtual filesystem
@@ -61,7 +126,7 @@ self.onmessage = async (e) => {
             // Run FFMPEG with the provided arguments.
             await ffmpeg.exec(ffmpegArgs);
 
-            self.postMessage({ type: 'progress', stage: 'finalizing', message: encodeEndMessage });
+            self.postMessage({ type: 'progress', stage: 'finalizing', message: encodeEndMessage, progress: 100.0 });
 
             // Read output file - use Uint8Array directly to avoid extra bytes from ArrayBuffer
             const data = await ffmpeg.readFile(output.name);