close now playing on no track

fix bugs caused by not queueing service commands

src/components/NowPlayingBar.tsx

@@ -63,7 +63,7 @@ const NowPlayingBar = () => {
 
   return (
     <Pressable
-      onPress={() => navigation.navigate('Now Playing')}
+      onPress={() => navigation.navigate('NowPlaying')}
       style={{ ...styles.container, display: track ? 'flex' : 'none' }}>
       <ProgressBar />
       <View style={styles.subContainer}>

src/components/NowPlayingLayout.tsx

@@ -1,7 +1,8 @@
 import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { StatusBar, StyleSheet, Text, View } from 'react-native'
+import { NativeStackScreenProps } from 'react-native-screens/lib/typescript/native-stack'
 import { State } from 'react-native-track-player'
 import IconFA from 'react-native-vector-icons/FontAwesome'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
@@ -296,9 +297,21 @@ const controlsStyles = StyleSheet.create({
   },
 })
 
-const NowPlayingLayout = () => {
+type RootStackParamList = {
+  Main: undefined
+  NowPlaying: undefined
+}
+type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'NowPlaying'>
+
+const NowPlayingLayout: React.FC<NowPlayingProps> = ({ navigation }) => {
   const track = useAtomValue(currentTrackAtom)
 
+  useEffect(() => {
+    if (!track && navigation.canGoBack()) {
+      navigation.popToTop()
+    }
+  })
+
   return (
     <View style={styles.container}>
       <ImageGradientBackground imageUri={track?.artworkThumb as string} imageKey={`${track?.album}${track?.artist}`} />

src/components/Settings.tsx

@@ -19,7 +19,7 @@ const TestControls = () => {
   return (
     <View>
       <Button title="Remove all keys" onPress={removeAllKeys} />
-      <Button title="Now Playing" onPress={() => navigation.navigate('Now Playing')} />
+      <Button title="Now Playing" onPress={() => navigation.navigate('NowPlaying')} />
     </View>
   )
 }

src/components/navigation/RootNavigator.tsx

@@ -11,7 +11,7 @@ const RootNavigator = () => (
       headerShown: false,
     }}>
     <RootStack.Screen name="Main" component={BottomTabNavigator} />
-    <RootStack.Screen name="Now Playing" component={NowPlayingLayout} />
+    <RootStack.Screen name="NowPlaying" component={NowPlayingLayout} />
   </RootStack.Navigator>
 )
 

src/playback/service.ts

@@ -1,23 +1,28 @@
 import TrackPlayer, { Event } from 'react-native-track-player'
+import { trackPlayerCommands } from '../state/trackplayer'
 
 module.exports = async function () {
-  TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play())
-  TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause())
-  TrackPlayer.addEventListener(Event.RemoteStop, () => TrackPlayer.destroy())
+  TrackPlayer.addEventListener(Event.RemotePlay, () => trackPlayerCommands.enqueue(TrackPlayer.play))
+  TrackPlayer.addEventListener(Event.RemotePause, () => trackPlayerCommands.enqueue(TrackPlayer.pause))
+  TrackPlayer.addEventListener(Event.RemoteStop, () => trackPlayerCommands.enqueue(TrackPlayer.destroy))
 
   TrackPlayer.addEventListener(Event.RemoteDuck, data => {
     if (data.permanent) {
-      TrackPlayer.stop()
+      trackPlayerCommands.enqueue(TrackPlayer.stop)
       return
     }
 
     if (data.paused) {
-      TrackPlayer.pause()
+      trackPlayerCommands.enqueue(TrackPlayer.pause)
     } else {
-      TrackPlayer.play()
+      trackPlayerCommands.enqueue(TrackPlayer.play)
     }
   })
 
-  TrackPlayer.addEventListener(Event.RemoteNext, () => TrackPlayer.skipToNext().catch(() => {}))
-  TrackPlayer.addEventListener(Event.RemotePrevious, () => TrackPlayer.skipToPrevious().catch(() => {}))
+  TrackPlayer.addEventListener(Event.RemoteNext, () =>
+    trackPlayerCommands.enqueue(() => TrackPlayer.skipToNext().catch(() => {})),
+  )
+  TrackPlayer.addEventListener(Event.RemotePrevious, () =>
+    trackPlayerCommands.enqueue(() => TrackPlayer.skipToPrevious().catch(() => {})),
+  )
 }

src/state/trackplayer.ts

@@ -78,7 +78,7 @@ const removeProgressSub = atom(null, (get, set) => {
   set(progressSubs, get(progressSubs) - 1)
 })
 
-const trackPlayerCommands = new PromiseQueue(1)
+export const trackPlayerCommands = new PromiseQueue(1)
 
 const getQueue = async (): Promise<TrackExt[]> => {
   return ((await TrackPlayer.getQueue()) as TrackExt[]) || []