From 9462a3e294bffc46f25797688aefec2a43f7cccb Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sun, 26 Jan 2025 21:23:18 +0100
Subject: [PATCH] fix: more accurately return current track

---
 src/utility/useCurrentTrack.ts | 43 +++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/utility/useCurrentTrack.ts b/src/utility/useCurrentTrack.ts
index 3145b9d..942e202 100644
--- a/src/utility/useCurrentTrack.ts
+++ b/src/utility/useCurrentTrack.ts
@@ -1,6 +1,6 @@
 import { useTypedSelector } from '@/store';
 import { AlbumTrack } from '@/store/music/types';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import TrackPlayer, { Event, useTrackPlayerEvents, Track } from 'react-native-track-player';
 
 interface CurrentTrackResponse {
@@ -24,22 +24,33 @@ export default function useCurrentTrack(): CurrentTrackResponse {
         entities[track?.backendId]
     ), [track?.backendId, entities]);
 
-    // Retrieve the current track from the queue using the index
-    const retrieveCurrentTrack = useCallback(async () => {
-        const queue = await TrackPlayer.getQueue();
-        const currentTrackIndex = await TrackPlayer.getActiveTrackIndex();
-        if (currentTrackIndex !== undefined) {
-            setTrack(queue[currentTrackIndex]);
-            setIndex(currentTrackIndex);
-        } else {
-            setTrack(undefined);
-            setIndex(undefined);
-        }
-    }, [setTrack, setIndex]);
-
     // Then execute the function on component mount and track changes
-    useEffect(() => { retrieveCurrentTrack(); }, [retrieveCurrentTrack]);
-    useTrackPlayerEvents([ Event.PlaybackActiveTrackChanged, Event.PlaybackState ], retrieveCurrentTrack);
+    useEffect(() => { 
+        // Async function that retrieves the current track whenever the hook is
+        // first executed
+        async function getTrack() {
+            const queue = await TrackPlayer.getQueue();
+            const currentTrackIndex = await TrackPlayer.getActiveTrackIndex();
+            if (currentTrackIndex !== undefined) {
+                setTrack(queue[currentTrackIndex]);
+                setIndex(currentTrackIndex);
+            } else {
+                setTrack(undefined);
+                setIndex(undefined);
+            }
+        }
+
+        getTrack();
+    }, []);
+
+    // Listen for update events
+    useTrackPlayerEvents([ Event.PlaybackActiveTrackChanged, Event.PlaybackState ], (e) => {
+        // GUARD: Listen for active track changed events
+        if (e.type === Event.PlaybackActiveTrackChanged) {
+            setIndex(e.index);
+            setTrack(e.track);
+        }
+    });
 
     return { track, index, albumTrack };
 }