fix: audio track selection

apps/expo/src/components/player/AudioTrackSelector.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { Pressable, ScrollView, View } from "react-native";
 import Modal from "react-native-modal";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
@@ -21,7 +22,9 @@ export interface AudioTrack {
 
 export const AudioTrackSelector = () => {
   const tracks = usePlayerStore((state) => state.interface.audioTracks);
+  const setAudioTracks = usePlayerStore((state) => state.setAudioTracks);
   const stream = usePlayerStore((state) => state.interface.currentStream);
+  const selectedTrack = useAudioTrackStore((state) => state.selectedTrack);
 
   const setSelectedAudioTrack = useAudioTrackStore(
     (state) => state.setSelectedAudioTrack,
@@ -30,6 +33,22 @@ export const AudioTrackSelector = () => {
   const { isTrue, on, off } = useBoolean();
   const { synchronizePlayback } = useAudioTrack();
 
+  useEffect(() => {
+    if (tracks && selectedTrack) {
+      const needsUpdate = tracks.some(
+        (t) => t.active !== (t.uri === selectedTrack.uri),
+      );
+
+      if (needsUpdate) {
+        const updatedTracks = tracks.map((t) => ({
+          ...t,
+          active: t.uri === selectedTrack.uri,
+        }));
+        setAudioTracks(updatedTracks);
+      }
+    }
+  }, [selectedTrack, setAudioTracks, tracks]);
+
   if (!tracks?.length) return null;
 
   return (

apps/expo/src/stores/audio/index.ts

@@ -12,8 +12,8 @@ export const useAudioTrackStore = create(
   immer<AudioTrackStore>((set) => ({
     selectedTrack: null,
     setSelectedAudioTrack: (track) => {
-      set((s) => {
-        s.selectedTrack = track;
+      set((state) => {
+        state.selectedTrack = track;
       });
     },
   })),