From 8fac21f4d85a3d26812e6552c6f5c1768ca9069b Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Fri, 28 Aug 2020 12:45:00 +0200
Subject: [PATCH] Add button for clearing current queue

---
 src/screens/Player/components/Queue.tsx | 12 +++++++++++-
 src/utility/useCurrentTrack.ts          |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/screens/Player/components/Queue.tsx b/src/screens/Player/components/Queue.tsx
index c3fd587..3eb055f 100644
--- a/src/screens/Player/components/Queue.tsx
+++ b/src/screens/Player/components/Queue.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import useQueue from 'utility/useQueue';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, Button } from 'react-native';
 import styled, { css } from 'styled-components/native';
 import useCurrentTrack from 'utility/useCurrentTrack';
 import TouchableHandler from 'components/TouchableHandler';
@@ -23,6 +23,10 @@ const QueueItem = styled.View<{ active?: boolean, alreadyPlayed?: boolean, isDar
     `}
 `;
 
+const ClearQueue = styled.View`
+    margin: 20px 0;
+`;
+
 const styles = StyleSheet.create({
     title: {
         ...colors.text,
@@ -42,6 +46,9 @@ export default function Queue() {
         await TrackPlayer.skip(trackId);
         await TrackPlayer.play();
     }, []);
+    const clearQueue = useCallback(async () => {
+        await TrackPlayer.reset();
+    }, []);
 
     return (
         <View>
@@ -62,6 +69,9 @@ export default function Queue() {
                     </QueueItem>
                 </TouchableHandler>
             ))}
+            <ClearQueue>
+                <Button title="Clear Queue" color={THEME_COLOR} onPress={clearQueue} />
+            </ClearQueue>
         </View>
     );
 }
\ No newline at end of file
diff --git a/src/utility/useCurrentTrack.ts b/src/utility/useCurrentTrack.ts
index 3c758e1..13dcf9b 100644
--- a/src/utility/useCurrentTrack.ts
+++ b/src/utility/useCurrentTrack.ts
@@ -14,7 +14,7 @@ export default function useCurrentTrack(): Track | undefined {
         
             // GUARD: Only fetch current track if there is a current track
             if (!currentTrackId) {
-                return;
+                setTrack(undefined);
             }
 
             // GUARD: Only retrieve new track if it is different from the one we