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 = () => {
{album?.Tracks?.length ? album.Tracks.map((trackId) =>
-
+
{tracks[trackId]?.IndexNumber}
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 (
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