From 5fdadfe5982e7a9c7b6c559967a3271d99f132e5 Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Wed, 7 Jul 2021 21:30:28 +0900
Subject: [PATCH] close now playing on no track

fix bugs caused by not queueing service commands
---
 src/components/NowPlayingBar.tsx            |  2 +-
 src/components/NowPlayingLayout.tsx         | 17 +++++++++++++++--
 src/components/Settings.tsx                 |  2 +-
 src/components/navigation/RootNavigator.tsx |  2 +-
 src/playback/service.ts                     | 21 +++++++++++++--------
 src/state/trackplayer.ts                    |  2 +-
 6 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/NowPlayingBar.tsx b/src/components/NowPlayingBar.tsx
index abf819f..230681b 100644
--- a/src/components/NowPlayingBar.tsx
+++ b/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}>
diff --git a/src/components/NowPlayingLayout.tsx b/src/components/NowPlayingLayout.tsx
index b33d3d4..dfcd03a 100644
--- a/src/components/NowPlayingLayout.tsx
+++ b/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}`} />
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index b157f8c..acac4a9 100644
--- a/src/components/Settings.tsx
+++ b/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>
   )
 }
diff --git a/src/components/navigation/RootNavigator.tsx b/src/components/navigation/RootNavigator.tsx
index 8aee1ff..adde2bd 100644
--- a/src/components/navigation/RootNavigator.tsx
+++ b/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>
 )
 
diff --git a/src/playback/service.ts b/src/playback/service.ts
index 5bc3603..c281aa3 100644
--- a/src/playback/service.ts
+++ b/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(() => {})),
+  )
 }
diff --git a/src/state/trackplayer.ts b/src/state/trackplayer.ts
index 3a94a62..dd8df73 100644
--- a/src/state/trackplayer.ts
+++ b/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[]) || []