better flo processing

Author: NellowTCS

Build/src/helpers/audioProcessor.ts

@@ -6,7 +6,7 @@ import initFlo from "@flo-audio/libflo-audio";
 export const createAudioProcessor = () => {
   let floInitialized = false;
   const processAudioBatch = async (songs: Song[]): Promise<Song[]> => {
-    // Ensure FLO WASM is initialized before any decode
+    // Ensure flo WASM is initialized before any decode
     if (!floInitialized) {
       await initFlo();
       floInitialized = true;
@@ -29,7 +29,7 @@ export const createAudioProcessor = () => {
           let mimeType = res.headers.get("content-type") || "audio/mpeg";
           const ext = song.url.split(".").pop()?.toLowerCase() || "";
 
-          // If FLO file, decode using @flo-audio/libflo-audio (placeholder)
+          // If flo file, decode using @flo-audio/libflo-audio (placeholder)
           if (ext === "flo") {
             // TODO: Integrate @flo-audio/libflo-audio decoder here
             // Example:

Build/src/helpers/filePickerHelper.tsx

@@ -481,49 +481,57 @@ function processFiles(files: File[]): AudioFile[] {
 // ---------------------
 export async function extractAudioMetadata(file: File): Promise<AudioMetadata> {
   setProcessingState(true);
+  
   const ext = file.name.split(".").pop()?.toLowerCase();
-  // Use FLO-specific extraction for .flo files
+  
+  // Use flo-specific extraction for .flo files
   if (ext === "flo") {
     try {
       const arrayBuffer = await file.arrayBuffer();
-      const { getFloMetadata, getFloCoverArt, getFloSyncedLyrics, getFloInfo } =
-        await import("./floProcessor");
+      const { 
+        getFloMetadata, 
+        getFloCoverArt, 
+        getFloSyncedLyrics, 
+        getFloInfo 
+      } = await import("./floProcessor");
+      
+      // Get all flo data in parallel
       const [meta, cover, lyrics, info] = await Promise.all([
         getFloMetadata(arrayBuffer),
         getFloCoverArt(arrayBuffer),
         getFloSyncedLyrics(arrayBuffer),
         getFloInfo(arrayBuffer),
       ]);
+
+      // Process album art if available
       let albumArt: string | undefined = undefined;
       if (cover && cover.data && cover.data.length > 0) {
-        // Animated cover art is supported (webp/gif) and not compressed
-        const blob = new Blob([new Uint8Array(cover.data)], {
-          type: cover.mime_type,
-        });
+        const blob = new Blob([cover.data], { type: cover.mime_type });
         albumArt = await new Promise<string>((resolve, reject) => {
           const reader = new FileReader();
           reader.onloadend = () => resolve(reader.result as string);
           reader.onerror = () => reject(new Error("Failed to read album art"));
           reader.readAsDataURL(blob);
         });
       }
-      // Lyrics: convert to EmbeddedLyrics[]
-      let embeddedLyrics = undefined;
-      if (Array.isArray(lyrics)) {
+
+      // Convert synced lyrics to EmbeddedLyrics format
+      let embeddedLyrics: EmbeddedLyrics[] | undefined = undefined;
+      if (Array.isArray(lyrics) && lyrics.length > 0) {
         embeddedLyrics = [
           {
             synced: true,
             lines: lyrics.map((l) => ({
               text: l.text,
-              timestamp: l.timestamp_ms,
+              timestamp: l.timestamp_ms / 1000, // Convert ms to seconds
             })),
           },
         ];
       }
-      // Info: duration, encoding, etc
-      const duration = info?.duration_secs ?? 0;
+
+      // Build encoding details from info
       const encoding: EncodingDetails = {
-        bitrate: undefined,
+        bitrate: undefined, // flo doesn't provide bitrate directly
         codec: "flo",
         sampleRate: info?.sample_rate,
         channels: info?.channels,
@@ -532,17 +540,34 @@ export async function extractAudioMetadata(file: File): Promise<AudioMetadata> {
         lossless: !info?.is_lossy,
         profile: info?.is_lossy ? "lossy" : "lossless",
       };
+
       return {
         title: meta?.title || file.name.replace(/\.[^/.]+$/, ""),
         artist: meta?.artist || i18n.t("common.unknownArtist"),
         album: meta?.album || i18n.t("common.unknownAlbum"),
-        duration,
+        duration: info?.duration_secs || 0,
         albumArt,
         embeddedLyrics,
         encoding,
-        gapless: undefined, // TODO: add if FLO supports gapless info
+        gapless: undefined, // flo doesn't expose gapless info currently
         metadataWarnings: undefined,
       };
+    } catch (error) {
+      console.error("Failed to extract flo metadata:", error);
+      // Fallback to basic file info
+      return {
+        title: file.name.replace(/\.[^/.]+$/, ""),
+        artist: i18n.t("common.unknownArtist"),
+        album: i18n.t("common.unknownAlbum"),
+        duration: 0,
+        albumArt: undefined,
+        embeddedLyrics: undefined,
+        encoding: {
+          codec: "flo",
+          container: "flo",
+        },
+        gapless: undefined,
+      };
     } finally {
       setProcessingState(false);
     }

Build/src/helpers/floProcessor.ts

@@ -1,60 +1,88 @@
-import * as flo from "@flo-audio/libflo-audio";
-import initFlo from "@flo-audio/libflo-audio";
+// floProcessor.ts - Fixed flo audio processing
+import initFlo, * as flo from "@flo-audio/libflo-audio";
 
 let floInitialized = false;
+
 async function ensureFloInitialized() {
   if (!floInitialized) {
     await initFlo();
     floInitialized = true;
   }
 }
 
-// Decode a .flo file buffer to AudioBuffer using @flo-audio/libflo
+// Decode a .flo file buffer to AudioBuffer using @flo-audio/libflo-audio
 export async function decodeFloToAudioBuffer(
   floData: ArrayBuffer,
   audioContext: AudioContext,
 ): Promise<AudioBuffer> {
   await ensureFloInitialized();
+  
   const uint8Flo = new Uint8Array(floData);
+  
+  // Decode flo to interleaved Float32Array samples
   const samples = flo.decode(uint8Flo);
+  
+  // Get file info for audio properties
   const fileInfo = flo.info(uint8Flo);
   const { channels, sample_rate } = fileInfo;
-  const length = samples.length / channels;
-  const audioBuffer = audioContext.createBuffer(channels, length, sample_rate);
-  // Deinterleave
+  
+  // Calculate number of frames
+  const frameCount = samples.length / channels;
+  
+  // Create AudioBuffer
+  const audioBuffer = audioContext.createBuffer(
+    channels,
+    frameCount,
+    sample_rate
+  );
+  
+  // Deinterleave samples into separate channels
   for (let ch = 0; ch < channels; ch++) {
     const channelData = audioBuffer.getChannelData(ch);
-    for (let i = 0; i < length; i++) {
+    for (let i = 0; i < frameCount; i++) {
       channelData[i] = samples[i * channels + ch];
     }
   }
+  
   return audioBuffer;
 }
 
-// Get FLO file info (sample rate, channels, bit depth, duration, etc)
-export async function getFloInfo(floData: ArrayBuffer): Promise<any> {
+// Get flo file info (returns object with sample_rate, channels, bit_depth, etc.)
+export async function getFloInfo(floData: ArrayBuffer): Promise<{
+  sample_rate: number;
+  channels: number;
+  bit_depth: number;
+  duration_secs: number;
+  is_lossy: boolean;
+  compression_ratio?: number;
+}> {
   await ensureFloInitialized();
   const uint8Flo = new Uint8Array(floData);
   return flo.info(uint8Flo);
 }
 
-// Validate FLO file integrity (CRC32)
+// Validate flo file integrity (CRC32)
 export async function validateFlo(floData: ArrayBuffer): Promise<boolean> {
   await ensureFloInitialized();
   const uint8Flo = new Uint8Array(floData);
   return flo.validate(uint8Flo);
 }
 
-// Extract metadata as JS object (title, artist, album, etc)
+// Extract metadata as JS object (returns null if no metadata)
 export async function getFloMetadata(
   floData: ArrayBuffer,
-): Promise<any | null> {
+): Promise<{
+  title?: string;
+  artist?: string;
+  album?: string;
+  [key: string]: any;
+} | null> {
   await ensureFloInitialized();
   const uint8Flo = new Uint8Array(floData);
   return flo.get_metadata(uint8Flo);
 }
 
-// Extract cover art (returns { mime_type, data })
+// Extract cover art (returns { mime_type, data } or null)
 export async function getFloCoverArt(
   floData: ArrayBuffer,
 ): Promise<{ mime_type: string; data: Uint8Array } | null> {
@@ -63,7 +91,7 @@ export async function getFloCoverArt(
   return flo.get_cover_art(uint8Flo);
 }
 
-// Extract synchronized lyrics (returns array or null)
+// Extract synchronized lyrics (returns array of { timestamp_ms, text } or null)
 export async function getFloSyncedLyrics(
   floData: ArrayBuffer,
 ): Promise<Array<{ timestamp_ms: number; text: string }> | null> {
@@ -72,10 +100,13 @@ export async function getFloSyncedLyrics(
   return flo.get_synced_lyrics(uint8Flo);
 }
 
-// Create FLO metadata from JS object (returns Uint8Array)
+// Create flo metadata from JS object (returns Uint8Array)
 export async function createFloMetadataFromObject(
   obj: any,
 ): Promise<Uint8Array> {
   await ensureFloInitialized();
   return flo.create_metadata_from_object(obj);
 }
+
+// Export initialization function
+export { initFlo, ensureFloInitialized };