Upgrade all dependencies

(1) react-native-track-player to v2
(2) react-navigation to v6
(3) react-native to v0.66.4

src/screens/Music/stacks/Album.tsx

@@ -72,27 +72,20 @@ const Album: React.FC = () => {
     const dispatch = useDispatch();
     const getImage = useGetImage();
     const playAlbum = usePlayAlbum();
-    const currentTrack = useCurrentTrack();
+    const { track: currentTrack } = useCurrentTrack();
     const navigation = useNavigation();
 
     // Setup callbacks
     const selectAlbum = useCallback(() => { playAlbum(id); }, [playAlbum, id]);
     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();
-            }
-        }
+    const selectTrack = useCallback(async (index: number) => {
+        await playAlbum(id, false);
+        await TrackPlayer.skip(index);
+        await TrackPlayer.play();
     }, [playAlbum, id]);
-    const longPressTrack = useCallback((trackId: string) => { 
-        navigation.navigate('TrackPopupMenu', { trackId }); 
-    }, [navigation]);
+    const longPressTrack = useCallback((index: number) => { 
+        navigation.navigate('TrackPopupMenu', { trackId: album?.Tracks?.[index] }); 
+    }, [navigation, album]);
 
     // Retrieve album tracks on load
     useEffect(() => {
@@ -118,14 +111,14 @@ const Album: React.FC = () => {
             <Text style={[ defaultStyles.text, styles.artist ]}>{album?.AlbumArtist}</Text>
             <Button title={t('play-album')} icon={Play} onPress={selectAlbum} />
             <View style={{ marginTop: 15 }}>
-                {album?.Tracks?.length ? album.Tracks.map((trackId) =>
+                {album?.Tracks?.length ? album.Tracks.map((trackId, i) =>
                     <TouchableHandler
                         key={trackId}
-                        id={trackId}
+                        id={i}
                         onPress={selectTrack}
                         onLongPress={longPressTrack}
                     >
-                        <TrackContainer isPlaying={currentTrack?.id.startsWith(trackId) || false} style={defaultStyles.border}>
+                        <TrackContainer isPlaying={currentTrack?.backendId === trackId || false} style={defaultStyles.border}>
                             <Text style={[ defaultStyles.text, styles.index ]}>
                                 {tracks[trackId]?.IndexNumber}
                             </Text>

src/screens/Music/stacks/RecentAlbums.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
-import { Album, NavigationProp } from '../types';
+import { NavigationProp } from '../types';
 import { Text, SafeAreaView, FlatList, StyleSheet } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
@@ -14,6 +14,7 @@ import { Header } from 'components/Typography';
 import ListButton from 'components/ListButton';
 import { t } from '@localisation';
 import useDefaultStyles from 'components/Colors';
+import { Album } from 'store/music/types';
 
 const styles = StyleSheet.create({
     columnWrapper: {

src/screens/Music/stacks/Search.tsx

@@ -226,7 +226,7 @@ export default function Search() {
                     }
 
                     return (
-                        <TouchableHandler id={album.Id} onPress={selectAlbum}>
+                        <TouchableHandler<string> id={album.Id} onPress={selectAlbum}>
                             <SearchResult style={defaultStyles.border}>
                                 <AlbumImage source={{ uri: getImage(album.Id) }} />
                                 <View>

src/screens/Music/types.ts

@@ -2,6 +2,7 @@ import { StackNavigationProp } from '@react-navigation/stack';
 import { Album } from 'store/music/types';
 
 export type StackParams = {
+    [key: string]: Record<string, unknown> | undefined;
     Albums: undefined;
     Album: { id: string, album: Album };
     RecentAlbums: undefined;

src/screens/Player/components/MediaControls.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
-import TrackPlayer, { usePlaybackState, STATE_PLAYING, STATE_PAUSED } from 'react-native-track-player';
+import React, { useState, useCallback } from 'react';
+import TrackPlayer, { Event, State, usePlaybackState, useTrackPlayerEvents } from 'react-native-track-player';
 import { TouchableOpacity, useColorScheme } from 'react-native';
 import styled from 'styled-components/native';
 import { useHasQueue } from 'utility/useQueue';
@@ -84,16 +84,12 @@ export function NextButton({ fill }: { fill: string }) {
 export function RepeatButton({ fill }: { fill: string}) {
     const [isRepeating, setRepeating] = useState(false);
     const handlePress = useCallback(() => setRepeating(!isRepeating), [isRepeating, setRepeating]);
-    const listener = useRef<TrackPlayer.EmitterSubscription | null>(null);
     
     // The callback that should determine whether we need to repeeat or not
-    const handleEndEvent = useCallback(async () => {
+    useTrackPlayerEvents([Event.PlaybackQueueEnded], async () => {
         if (isRepeating) {
-            // Retrieve all current tracks
-            const tracks = await TrackPlayer.getQueue();
-
-            // Then skip to the first track
-            await TrackPlayer.skip(tracks[0].id);
+            // Skip to the first track
+            await TrackPlayer.skip(0);
 
             // Cautiously reset the seek time, as there might only be a single
             // item in queue.
@@ -102,19 +98,7 @@ export function RepeatButton({ fill }: { fill: string}) {
             // Then play the item
             await TrackPlayer.play();
         }
-    }, [isRepeating]);
-
-    // Subscribe to ended event handler so that we can restart the queue from
-    // the start if looping is enabled
-    useEffect(() => {
-        // Set the event listener
-        listener.current = TrackPlayer.addEventListener('playback-queue-ended', handleEndEvent);
-        
-        // Then clean up after
-        return function cleanup() {
-            listener?.current?.remove();
-        };
-    }, [handleEndEvent]);
+    });
 
     return (
         <TouchableOpacity onPress={handlePress} style={{ opacity: isRepeating ? 1 : 0.5 }}>
@@ -146,13 +130,13 @@ export function MainButton({ fill }: { fill: string }) {
     const state = usePlaybackState();
 
     switch (state) {
-        case STATE_PLAYING:
+        case State.Playing:
             return (
                 <TouchableOpacity onPress={pause}>
                     <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
                 </TouchableOpacity>
             );
-        case STATE_PAUSED:
+        case State.Paused:
             return (
                 <TouchableOpacity onPress={play}>
                     <PlayIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />

src/screens/Player/components/NowPlaying.tsx

@@ -32,7 +32,7 @@ const styles = StyleSheet.create({
 
 
 export default function NowPlaying() {
-    const track = useCurrentTrack();
+    const { track } = useCurrentTrack();
     const defaultStyles = useDefaultStyles();
 
     return (
@@ -40,7 +40,7 @@ export default function NowPlaying() {
             <Artwork
                 style={defaultStyles.imageBackground}
                 source={{ 
-                    uri: track?.artwork,
+                    uri: track?.artwork as string | undefined,
                     priority: FastImage.priority.high,
                 }} 
             />

src/screens/Player/components/Queue.tsx

@@ -38,10 +38,9 @@ const styles = StyleSheet.create({
 export default function Queue() {
     const defaultStyles = useDefaultStyles();
     const queue = useQueue();
-    const currentTrack = useCurrentTrack();
-    const currentIndex = queue.findIndex(d => d.id === currentTrack?.id);
-    const playTrack = useCallback(async (trackId: string) => {
-        await TrackPlayer.skip(trackId);
+    const { index: currentIndex } = useCurrentTrack();
+    const playTrack = useCallback(async (index: number) => {
+        await TrackPlayer.skip(index);
         await TrackPlayer.play();
     }, []);
     const clearQueue = useCallback(async () => {
@@ -52,14 +51,14 @@ export default function Queue() {
         <View>
             <Text style={{ marginTop: 20, marginBottom: 20 }}>{t('queue')}</Text>
             {queue.map((track, i) => (
-                <TouchableHandler id={track.id} onPress={playTrack} key={i}>
+                <TouchableHandler id={i} onPress={playTrack} key={i}>
                     <QueueItem 
-                        active={currentTrack?.id === track.id}
+                        active={currentIndex === i}
                         key={i}
-                        alreadyPlayed={i < currentIndex}
+                        alreadyPlayed={currentIndex ? i < currentIndex : false}
                         style={[
                             defaultStyles.border,
-                            currentTrack?.id === track.id ? defaultStyles.activeBackground : {},
+                            currentIndex === i ? defaultStyles.activeBackground : {},
                         ]}
                     >
                         <Text style={styles.trackTitle}>{track.title}</Text>

src/screens/index.tsx

@@ -62,12 +62,11 @@ function Screens() {
                         }
 
                         return <Icon fill={color} width={size} height={size} />;
-                    }
+                    },
+                    tabBarActiveTintColor: THEME_COLOR,
+                    tabBarInactiveTintColor: 'gray',
+                    headerShown: false,
                 })}
-                tabBarOptions={{
-                    activeTintColor: THEME_COLOR,
-                    inactiveTintColor: 'gray',
-                }}
             >
                 <Tab.Screen name="NowPlaying" component={Player} options={{ tabBarLabel: t('now-playing') }} />
                 <Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music') }} />
@@ -85,10 +84,12 @@ type Routes = {
 
 export default function Routes() {
     return (
-        <Stack.Navigator mode="modal" headerMode="none" screenOptions={{
+        <Stack.Navigator screenOptions={{
             cardStyle: {
                 backgroundColor: 'transparent'
-            }
+            },
+            presentation: 'modal',
+            headerShown: false,
         }}>
             <Stack.Screen name="Screens" component={Screens} />
             <Stack.Screen name="SetJellyfinServer" component={SetJellyfinServer} />

src/screens/types.ts

@@ -1,4 +1,5 @@
 export interface ModalStackParams {
+    [key: string]: Record<string, unknown> | undefined;
     SetJellyfinServer: undefined;
     TrackPopupMenu: { trackId: string };
 }