Add button for clearing current queue

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>
     );
 }

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