(1) Play whole album when selecting a single track

(2) Create popup window on track long-press in which the track can be added to the end or front of the queue
(3) Add Redux counter for added tracks so that the queue is properly updated

src/components/Modal.tsx

@@ -1,23 +1,38 @@
-import React from 'react';
-import styled from 'styled-components/native';
-import { SafeAreaView } from 'react-native';
+import React, { useCallback } from 'react';
+import styled, { css } from 'styled-components/native';
+import { SafeAreaView, Pressable } from 'react-native';
 import { colors } from './Colors';
+import { useNavigation, StackActions } from '@react-navigation/native';
 
-const Background = styled.View`
+interface Props {
+    fullSize?: boolean;
+}
+
+const Background = styled(Pressable)`
     padding: 100px 25px;
     flex: 1;
+    justify-content: center;
 `;
 
-const Container = styled.View`
+const Container = styled(Pressable)<Pick<Props, 'fullSize'>>`
     border-radius: 20px;
-    flex: 1;
+    margin: auto 0;
+
+    ${props => props.fullSize && css`
+        flex: 1;
+    `}
 `;
 
-const Modal: React.FC = ({ children }) => {
+const Modal: React.FC<Props> = ({ children, fullSize = true }) => {
+    const navigation = useNavigation();
+    const closeModal = useCallback(() => {
+        navigation.dispatch(StackActions.popToTop());    
+    }, [navigation]);
+
     return (
-        <Background style={colors.modal}>
+        <Background style={colors.modal} onPress={closeModal}>
             <SafeAreaView style={{ flex: 1 }}>
-                <Container style={colors.view}>
+                <Container style={colors.view} fullSize={fullSize}>
                     {children}
                 </Container>
             </SafeAreaView>

src/components/TouchableHandler.tsx

@@ -1,24 +1,41 @@
 import React, { useCallback } from 'react';
-import { TouchableOpacity } from 'react-native';
+import { Pressable, ViewStyle } from 'react-native';
 
 interface TouchableHandlerProps {
     id: string;
     onPress: (id: string) => void;
+    onLongPress?: (id: string) => void;
+}
+
+function TouchableStyles({ pressed }: { pressed: boolean }): ViewStyle {
+    if (pressed) {
+        return { opacity: 0.5 };
+    } else {
+        return { opacity: 1 };
+    }
 }
 
 /**
  * This is a generic handler that accepts id as a prop, and return it when it is
  * pressed. This comes in handy with lists in which albums / tracks need to be selected.
  */
-const TouchableHandler: React.FC<TouchableHandlerProps>  = ({ id, onPress, children }) => {
+const TouchableHandler: React.FC<TouchableHandlerProps>  = ({ id, onPress, onLongPress, children }) => {
     const handlePress = useCallback(() => {
         return onPress(id);
     }, [id, onPress]);
 
+    const handleLongPress = useCallback(() => {
+        return onLongPress ? onLongPress(id) : undefined;
+    }, [id, onLongPress]);
+
     return (
-        <TouchableOpacity onPress={handlePress}>
+        <Pressable
+            onPress={handlePress}
+            onLongPress={handleLongPress}
+            style={TouchableStyles}
+        >
             {children}
-        </TouchableOpacity>
+        </Pressable>
     );
 };
 

src/screens/Music/stacks/Album.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { StackParams } from '../types';
 import { Text, ScrollView, Dimensions, Button, RefreshControl, StyleSheet } from 'react-native';
 import { useGetImage } from 'utility/JellyfinApi';
 import styled, { css } from 'styled-components/native';
-import { useRoute, RouteProp } from '@react-navigation/native';
+import { useRoute, RouteProp, useNavigation } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import { useDispatch } from 'react-redux';
 import { differenceInDays } from 'date-fns';
@@ -11,10 +11,10 @@ import { useTypedSelector } from 'store';
 import { fetchTracksByAlbum } from 'store/music/actions';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS, THEME_COLOR } from 'CONSTANTS';
 import usePlayAlbum from 'utility/usePlayAlbum';
-import usePlayTrack from 'utility/usePlayTrack';
 import TouchableHandler from 'components/TouchableHandler';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import { colors } from 'components/Colors';
+import TrackPlayer from 'react-native-track-player';
 
 type Route = RouteProp<StackParams, 'Album'>;
 
@@ -71,11 +71,26 @@ const Album: React.FC = () => {
     const getImage = useGetImage();
     const playAlbum = usePlayAlbum();
     const currentTrack = useCurrentTrack();
+    const navigation = useNavigation();
 
     // Setup callbacks
     const selectAlbum = useCallback(() => { playAlbum(id); }, [playAlbum, id]);
-    const selectTrack = usePlayTrack();
     const refresh = useCallback(() => { dispatch(fetchTracksByAlbum(id)); }, [id, dispatch]);
+    const selectTrack = useCallback(async (trackId) => {
+        const tracks = await playAlbum(id, false);
+        
+        if (tracks) {
+            const track = tracks.find((t) => t.id.startsWith(trackId));
+
+            if (track) {
+                await TrackPlayer.skip(track.id);
+                await TrackPlayer.play();
+            }
+        }
+    }, [playAlbum, id]);
+    const longPressTrack = useCallback((trackId: string) => { 
+        navigation.navigate('TrackPopupMenu', { trackId }); 
+    }, [navigation]);
 
     // Retrieve album tracks on load
     useEffect(() => {
@@ -101,7 +116,12 @@ const Album: React.FC = () => {
             <Text style={styles.artist}>{album?.AlbumArtist}</Text>
             <Button title="Play Album" onPress={selectAlbum} color={THEME_COLOR} />
             {album?.Tracks?.length ? album.Tracks.map((trackId) =>
-                <TouchableHandler key={trackId} id={trackId} onPress={selectTrack}>
+                <TouchableHandler
+                    key={trackId}
+                    id={trackId}
+                    onPress={selectTrack}
+                    onLongPress={longPressTrack}
+                >
                     <TrackContainer isPlaying={currentTrack?.id.startsWith(trackId) || false} style={colors.border}>
                         <Text style={styles.index}>
                             {tracks[trackId]?.IndexNumber}

src/screens/index.tsx

@@ -12,8 +12,10 @@ import GearIcon from 'assets/gear.svg';
 import { THEME_COLOR } from 'CONSTANTS';
 import { useTypedSelector } from 'store';
 import Onboarding from './Onboarding';
+import TrackPopupMenu from './modals/TrackPopupMenu';
+import { ModalStackParams } from './types';
 
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<ModalStackParams>();
 const Tab = createBottomTabNavigator();
 
 type Screens = {
@@ -84,6 +86,7 @@ export default function Routes() {
         }}>
             <Stack.Screen name="Screens" component={Screens} />
             <Stack.Screen name="SetJellyfinServer" component={SetJellyfinServer} />
+            <Stack.Screen name="TrackPopupMenu" component={TrackPopupMenu} />
         </Stack.Navigator>
     );
 }

src/screens/modals/TrackPopupMenu.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import Modal from 'components/Modal';
+import { Text, Button } from 'react-native';
+import { useNavigation, StackActions, useRoute, RouteProp } from '@react-navigation/native';
+import { ModalStackParams } from 'screens/types';
+import { useTypedSelector } from 'store';
+import { THEME_COLOR } from 'CONSTANTS';
+import { SubHeader } from 'components/Typography';
+import styled from 'styled-components/native';
+import usePlayTrack from 'utility/usePlayTrack';
+
+type Route = RouteProp<ModalStackParams, 'TrackPopupMenu'>;
+
+const Container = styled.View`
+    padding: 20px;
+`;
+
+const Buttons = styled.View`
+    margin-top: 20px;
+    flex-direction: row;
+    justify-content: space-around;
+`;
+
+function TrackPopupMenu() {
+    // Retrieve helpers
+    const { params: { trackId } } = useRoute<Route>();
+    const navigation = useNavigation();
+    const track = useTypedSelector((state) => state.music.tracks.entities[trackId]);
+    const playTrack = usePlayTrack();
+
+    // Set callback to close the modal
+    const closeModal = useCallback(() => {
+        navigation.dispatch(StackActions.popToTop());    
+    }, [navigation]);
+
+    const handlePlayNext = useCallback(() => {
+        playTrack(trackId, false, false);
+        closeModal();
+    }, [playTrack, closeModal, trackId]);
+    const handleAddToQueue = useCallback(() => {
+        playTrack(trackId, false, true);
+        closeModal();
+    }, [playTrack, closeModal, trackId]);
+
+    return (
+        <Modal fullSize={false}>
+            <Container>
+                <SubHeader>{track?.Name}</SubHeader>
+                <Text>{track?.Album} - {track?.AlbumArtist}</Text>
+                <Buttons>
+                    <Button title="Play Next" color={THEME_COLOR} onPress={handlePlayNext} />
+                    <Button title="Add to Queue" color={THEME_COLOR} onPress={handleAddToQueue} />
+                </Buttons>
+            </Container>
+        </Modal>
+    );
+}
+
+export default TrackPopupMenu;

src/screens/types.ts

@@ -0,0 +1,4 @@
+export interface ModalStackParams {
+    SetJellyfinServer: undefined;
+    TrackPopupMenu: { trackId: string };
+}

src/store/index.ts

@@ -13,9 +13,11 @@ const persistConfig: PersistConfig<AppState> = {
 
 import settings from './settings';
 import music from './music';
+import player from './player';
 
 const reducers = combineReducers({
     settings,
+    player: player.reducer,
     music: music.reducer,
 });
 

src/store/player/index.ts

@@ -0,0 +1,11 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const player = createSlice({
+    name: 'player',
+    initialState: 0,
+    reducers: {
+        addNewTrackToPlayer: (state) => state + 1,
+    }
+});
+
+export default player;

src/utility/usePlayAlbum.ts

@@ -2,17 +2,22 @@ import { useTypedSelector } from 'store';
 import { useCallback } from 'react';
 import TrackPlayer, { Track } from 'react-native-track-player';
 import { generateTrack } from './JellyfinApi';
+import useQueue from './useQueue';
+import player from 'store/player';
+import { useDispatch } from 'react-redux';
 
 /**
  * Generate a callback function that starts playing a full album given its
  * supplied id.
  */
 export default function usePlayAlbum() {
+    const dispatch = useDispatch();
     const credentials = useTypedSelector(state => state.settings.jellyfin);
     const albums = useTypedSelector(state => state.music.albums.entities);
     const tracks = useTypedSelector(state => state.music.tracks.entities);
+    const queue = useQueue();
 
-    return useCallback(async function playAlbum(albumId: string) {
+    return useCallback(async function playAlbum(albumId: string, play = true): Promise<TrackPlayer.Track[] | undefined> {
         const album = albums[albumId];
         const trackIds = album?.Tracks;
 
@@ -21,6 +26,29 @@ export default function usePlayAlbum() {
             return;
         }
 
+        // Check if the queue already contains the consecutive track listing
+        // that is described as part of the album
+        const queuedAlbum = queue.reduce<TrackPlayer.Track[]>((sum, track) => {
+            if (track.id.startsWith(trackIds[sum.length])) {
+                sum.push(track);
+            } else {
+                sum = [];
+            }
+
+            return sum;
+        }, []);
+
+        // If the entire album is already in the queue, we can just return those
+        // tracks, rather than adding it to the queue again.
+        if (queuedAlbum.length === trackIds.length) {
+            if (play) {
+                await TrackPlayer.skip(trackIds[0]);
+                await TrackPlayer.play();
+            }
+            
+            return queuedAlbum;
+        }
+
         // Convert all trackIds to the relevant format for react-native-track-player
         const newTracks = trackIds.map((trackId) => {
             const track = tracks[trackId];
@@ -34,7 +62,15 @@ export default function usePlayAlbum() {
         // Clear the queue and add all tracks
         await TrackPlayer.removeUpcomingTracks();
         await TrackPlayer.add(newTracks);
-        await TrackPlayer.skip(trackIds[0]);
-        TrackPlayer.play();
-    }, [credentials, albums, tracks]);
+        
+        // Then, we'll dispatch the added track event
+        dispatch(player.actions.addNewTrackToPlayer());
+
+        if (play) {
+            await TrackPlayer.skip(trackIds[0]);
+            await TrackPlayer.play();
+        }
+
+        return newTracks;
+    }, [credentials, albums, tracks, queue, dispatch]);
 }

src/utility/usePlayTrack.ts

@@ -3,17 +3,20 @@ import TrackPlayer from 'react-native-track-player';
 import { useTypedSelector } from 'store';
 import { generateTrack } from './JellyfinApi';
 import useQueue from './useQueue';
+import { useDispatch } from 'react-redux';
+import player from 'store/player';
 
 /**
  * A hook that generates a callback that can setup and start playing a
  * particular trackId in the player.
  */
 export default function usePlayTrack() {
+    const dispatch = useDispatch();
     const credentials = useTypedSelector(state => state.settings.jellyfin);
     const tracks = useTypedSelector(state => state.music.tracks.entities);
     const queue = useQueue();
 
-    return useCallback(async function playTrack(trackId: string) {
+    return useCallback(async function playTrack(trackId: string, play = true, addToEnd = true) {
         // Get the relevant track
         const track = tracks[trackId];
 
@@ -30,10 +33,35 @@ export default function usePlayTrack() {
             ...(trackInstances.length ? trackInstances[0] : generateTrack(track, credentials)),
             id: `${trackId}_${trackInstances.length}`
         };
-        await TrackPlayer.add([ newTrack ]);
+
+        // Then, we'll need to check where to add the track
+        if (addToEnd) {
+            await TrackPlayer.add([ newTrack ]);
+        } else {
+            // Try and locate the current track
+            const currentTrackId = await TrackPlayer.getCurrentTrack();
+            const currentTrackIndex = queue.findIndex(track => track.id === currentTrackId);
+            
+            // Since the argument is the id to insert the track BEFORE, we need
+            // to get the current track + 1
+            const targetTrack = currentTrackIndex >= 0 && queue.length > 1
+                ? queue[currentTrackIndex + 1].id
+                : undefined;
+            
+            // Depending on whether this track exists, we either add it there,
+            // or at the end of the queue.
+            await TrackPlayer.add([ newTrack ], targetTrack);
+        }
+
+        // Then, we'll dispatch the added track event
+        dispatch(player.actions.addNewTrackToPlayer());
 
         // Then we'll skip to it and play it
-        await TrackPlayer.skip(newTrack.id);
-        TrackPlayer.play();
-    }, [credentials, tracks, queue]);
+        if (play) {
+            await TrackPlayer.skip(newTrack.id);
+            await TrackPlayer.play();
+        }
+
+        return newTrack;
+    }, [credentials, tracks, queue, dispatch]);
 }

src/utility/useQueue.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import TrackPlayer, { usePlaybackState, Track } from 'react-native-track-player';
+import { useTypedSelector } from 'store';
 
 /**
  * This hook retrieves the current playing track from TrackPlayer
@@ -7,10 +8,11 @@ import TrackPlayer, { usePlaybackState, Track } from 'react-native-track-player'
 export default function useQueue(): Track[] {
     const state = usePlaybackState();
     const [queue, setQueue] = useState<Track[]>([]);
+    const addedTrackCount = useTypedSelector(state => state.player);
 
     useEffect(() => {
         TrackPlayer.getQueue().then(setQueue);
-    }, [state]);
+    }, [state, addedTrackCount]);
 
     return queue;
 }