Add identifiers for multiple tracks

src/screens/Music/stacks/Album.tsx

@@ -82,7 +82,7 @@ const Album: React.FC = () => {
             <Button title="Play Album" onPress={selectAlbum} color={THEME_COLOR} />
             {album?.Tracks?.length ? album.Tracks.map((trackId) =>
                 <TouchableHandler key={trackId} id={trackId} onPress={selectTrack}>
-                    <TrackContainer isPlaying={trackId === currentTrack?.id}>
+                    <TrackContainer isPlaying={currentTrack?.id.startsWith(trackId) || false}>
                         <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>
                             {tracks[trackId]?.IndexNumber}
                         </Text>

src/screens/Player/components/Queue.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import useQueue from 'utility/useQueue';
 import { View, Text } from 'react-native';
 import styled, { css } from 'styled-components/native';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import TouchableHandler from 'components/TouchableHandler';
-import usePlayTrack from 'utility/usePlayTrack';
+import TrackPlayer from 'react-native-track-player';
 import { THEME_COLOR } from 'CONSTANTS';
 
 const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean }>`
@@ -28,7 +28,10 @@ export default function Queue() {
     const queue = useQueue();
     const currentTrack = useCurrentTrack();
     const currentIndex = queue.findIndex(d => d.id === currentTrack?.id);
-    const playTrack = usePlayTrack();
+    const playTrack = useCallback(async (trackId: string) => {
+        await TrackPlayer.skip(trackId);
+        await TrackPlayer.play();
+    }, []);
 
     return (
         <View>

src/utility/usePlayTrack.ts

@@ -23,14 +23,17 @@ export default function usePlayTrack() {
         }
 
         // GUARD: Check if the track is already in the queue
-        if (!queue?.some((t) => t.id === trackId)) {
-            // If it is not, we must then generate it, and add it to the queue
-            const newTrack = generateTrack(track, credentials);
-            await TrackPlayer.add([ newTrack ]);
-        }
+        const trackInstances = queue.filter((t) => t.id.startsWith(trackId));
+
+        // Generate the new track for the queue
+        const newTrack = {
+            ...(trackInstances.length ? trackInstances[0] : generateTrack(track, credentials)),
+            id: `${trackId}_${trackInstances.length}`
+        };
+        await TrackPlayer.add([ newTrack ]);
 
         // Then we'll skip to it and play it
-        await TrackPlayer.skip(trackId);
+        await TrackPlayer.skip(newTrack.id);
         TrackPlayer.play();
     }, [credentials, tracks, queue]);
 }