diff --git a/apps/expo/src/components/player/AudioTrackSelector.tsx b/apps/expo/src/components/player/AudioTrackSelector.tsx index 8278af9..d5db38a 100644 --- a/apps/expo/src/components/player/AudioTrackSelector.tsx +++ b/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 ( diff --git a/apps/expo/src/stores/audio/index.ts b/apps/expo/src/stores/audio/index.ts index 7017dfc..595aa97 100644 --- a/apps/expo/src/stores/audio/index.ts +++ b/apps/expo/src/stores/audio/index.ts @@ -12,8 +12,8 @@ export const useAudioTrackStore = create( immer((set) => ({ selectedTrack: null, setSelectedAudioTrack: (track) => { - set((s) => { - s.selectedTrack = track; + set((state) => { + state.selectedTrack = track; }); }, })),