From 6e3aabf36922a3a02331a18b2d875a13aa4e8b27 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Wed, 6 Mar 2024 14:24:21 +0100
Subject: [PATCH] fix: audio track selection

---
 .../components/player/AudioTrackSelector.tsx  | 19 +++++++++++++++++++
 apps/expo/src/stores/audio/index.ts           |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)

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<AudioTrackStore>((set) => ({
     selectedTrack: null,
     setSelectedAudioTrack: (track) => {
-      set((s) => {
-        s.selectedTrack = track;
+      set((state) => {
+        state.selectedTrack = track;
       });
     },
   })),