From 9229bae0074f740081811093eaf86545af633fdc Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Fri, 28 Feb 2025 11:14:14 +0100
Subject: [PATCH] fix: play tracks from the right discs fixes #275

---
 src/components/TouchableHandler.tsx               |  2 +-
 .../Music/stacks/components/TrackListView.tsx     | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/TouchableHandler.tsx b/src/components/TouchableHandler.tsx
index 7db92b5..4553590 100644
--- a/src/components/TouchableHandler.tsx
+++ b/src/components/TouchableHandler.tsx
@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useCallback } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 
-interface TouchableHandlerProps<T = number> {
+interface TouchableHandlerProps<T> {
     id: T;
     onPress: (id: T) => void;
     onLongPress?: (id: T) => void;
diff --git a/src/screens/Music/stacks/components/TrackListView.tsx b/src/screens/Music/stacks/components/TrackListView.tsx
index 5742713..8aade82 100644
--- a/src/screens/Music/stacks/components/TrackListView.tsx
+++ b/src/screens/Music/stacks/components/TrackListView.tsx
@@ -148,12 +148,15 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     // Setup callbacks
     const playEntity = useCallback(() => { playTracks(trackIds); }, [playTracks, trackIds]);
     const shuffleEntity = useCallback(() => { playTracks(trackIds, { shuffle: true }); }, [playTracks, trackIds]);
-    const selectTrack = useCallback(async (index: number) => {
-        await playTracks(trackIds, { playIndex: index });
+    const selectTrack = useCallback(async (trackId: string) => {
+        const index = trackIds.findIndex((id) => id === trackId);
+        if (index) {
+            await playTracks(trackIds, { playIndex: index });
+        }
     }, [playTracks, trackIds]);
-    const longPressTrack = useCallback((index: number) => {
-        navigation.navigate('TrackPopupMenu', { trackId: trackIds[index].toString() });
-    }, [navigation, trackIds]);
+    const longPressTrack = useCallback((trackId: string) => {
+        navigation.navigate('TrackPopupMenu', { trackId });
+    }, [navigation]);
     const downloadAllTracks = useCallback(() => {
         trackIds.forEach((trackId) => dispatch(queueTrackForDownload(trackId)));
     }, [dispatch, trackIds]);
@@ -190,7 +193,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
                             {groupTrackIds.map((trackId, i) =>
                                 <TouchableHandler
                                     key={trackId}
-                                    id={i}
+                                    id={trackId}
                                     onPress={selectTrack}
                                     onLongPress={longPressTrack}
                                     testID={`play-track-${trackId}`}