From d27a0d36916887cba6920c066327c93abe35c48e Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Fri, 10 Jul 2020 15:47:03 +0200
Subject: [PATCH] Add identifiers for multiple tracks

---
 src/screens/Music/stacks/Album.tsx      |  2 +-
 src/screens/Player/components/Queue.tsx |  9 ++++++---
 src/utility/usePlayTrack.ts             | 15 +++++++++------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/screens/Music/stacks/Album.tsx b/src/screens/Music/stacks/Album.tsx
index 66639eb..d4b0ee1 100644
--- a/src/screens/Music/stacks/Album.tsx
+++ b/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>
diff --git a/src/screens/Player/components/Queue.tsx b/src/screens/Player/components/Queue.tsx
index 950e7e7..f87fdaf 100644
--- a/src/screens/Player/components/Queue.tsx
+++ b/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>
diff --git a/src/utility/usePlayTrack.ts b/src/utility/usePlayTrack.ts
index f5a59d9..c326721 100644
--- a/src/utility/usePlayTrack.ts
+++ b/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]);
 }
\ No newline at end of file