javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add identifiers for multiple tracks

Browse Source
This commit is contained in:
Lei Nelissen
2020-07-10 15:47:03 +02:00
parent 46ee047c3c
commit d27a0d3691
3 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/screens/Music/stacks/Album.tsx
View File

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

9
src/screens/Player/components/Queue.tsx
View File

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

15
src/utility/usePlayTrack.ts
View File

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