feat: finish audiotrack switching

apps/expo/src/hooks/player/useAudioTrack.ts

@@ -1,4 +1,5 @@
-import { useCallback, useState } from "react";
+import type { Video } from "expo-av";
+import { useCallback, useEffect } from "react";
 import { Audio } from "expo-av";
 
 import type { Stream } from "@movie-web/provider-utils";
@@ -8,52 +9,80 @@ import { usePlayerStore } from "~/stores/player/store";
 
 export const useAudioTrack = () => {
   const videoRef = usePlayerStore((state) => state.videoRef);
-  const [audioObject, setAudioObject] = useState<Audio.Sound | null>(null);
+  const audioObject = usePlayerStore((state) => state.audioObject);
+  const currentAudioTrack = usePlayerStore((state) => state.currentAudioTrack);
+  const setAudioObject = usePlayerStore((state) => state.setAudioObject);
+  const setCurrentAudioTrack = usePlayerStore(
+    (state) => state.setCurrentAudioTrack,
+  );
 
   const synchronizePlayback = useCallback(
     async (selectedAudioTrack?: AudioTrack, stream?: Stream) => {
-      console.log("synchronizePlayback called");
-
       if (selectedAudioTrack && stream) {
-        console.log("Loading audio track", selectedAudioTrack.uri);
-        const { uri } = selectedAudioTrack;
-        const { sound } = await Audio.Sound.createAsync({
-          // never resolves or rejects :(
-          uri,
-          headers: {
-            ...stream.headers,
-            ...stream.preferredHeaders,
-          },
-        });
-        console.log("Audio track loaded");
-        setAudioObject(sound);
+        if (audioObject) {
+          await audioObject.unloadAsync();
+        }
+
+        const createAudioAsyncWithTimeout = (uri: string, timeout = 5000) => {
+          return new Promise<Audio.Sound | undefined>((resolve, reject) => {
+            Audio.Sound.createAsync({
+              uri,
+              headers: {
+                ...stream.headers,
+                ...stream.preferredHeaders,
+              },
+            })
+              .then((value) => resolve(value.sound))
+              .catch(reject);
+
+            setTimeout(() => {
+              reject(new Error("Timeout: Audio loading took too long"));
+            }, timeout);
+          });
+        };
+        try {
+          const sound = await createAudioAsyncWithTimeout(
+            selectedAudioTrack.uri,
+          );
+          if (!sound) return;
+          setAudioObject(sound);
+          setCurrentAudioTrack(selectedAudioTrack);
+        } catch (error) {
+          console.error("Error loading audio track:", error);
+        }
       } else {
         if (audioObject) {
-          console.log("Unloading existing audio track");
           await audioObject.unloadAsync();
           setAudioObject(null);
         }
       }
-
-      if (videoRef && audioObject) {
-        console.log("Synchronizing audio with video");
-        const videoStatus = await videoRef.getStatusAsync();
-
-        if (selectedAudioTrack && videoStatus.isLoaded) {
-          console.log("Muting video and starting audio playback");
-          await videoRef.setIsMutedAsync(true);
-          await audioObject.setPositionAsync(videoStatus.positionMillis);
-          await audioObject.playAsync();
-        } else {
-          console.log("Unmuting video");
-          await videoRef.setIsMutedAsync(false);
-        }
-      }
     },
-    [videoRef, audioObject],
+    [audioObject, setAudioObject, setCurrentAudioTrack],
   );
 
-  return {
-    synchronizePlayback,
-  } as const;
+  const synchronizeAudioWithVideo = async (
+    videoRef: Video | null,
+    audioObject: Audio.Sound | null,
+    selectedAudioTrack?: AudioTrack,
+  ): Promise<void> => {
+    if (videoRef && audioObject) {
+      const videoStatus = await videoRef.getStatusAsync();
+
+      if (selectedAudioTrack && videoStatus.isLoaded) {
+        await videoRef.setIsMutedAsync(true);
+        await audioObject.playAsync();
+        await audioObject.setPositionAsync(videoStatus.positionMillis);
+      } else {
+        await videoRef.setIsMutedAsync(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (audioObject && currentAudioTrack) {
+      void synchronizeAudioWithVideo(videoRef, audioObject, currentAudioTrack);
+    }
+  }, [audioObject, videoRef, currentAudioTrack]);
+
+  return { synchronizePlayback };
 };