hide miniplayer if the queue is empty

components/tabs.tsx

@@ -10,6 +10,7 @@ import Settings from "./Settings/component";
 import { Discover } from "./Discover/component";
 import { Miniplayer } from "./Player/mini-player";
 import { Separator } from "tamagui";
+import { usePlayerContext } from "../player/provider";
 
 const Tab = createBottomTabNavigator();
 
@@ -17,6 +18,8 @@ export function Tabs() : React.JSX.Element {
 
     const isDarkMode = useColorScheme() === 'dark';
 
+    const { showMiniplayer } = usePlayerContext();
+
     return (
             <Tab.Navigator
                 screenOptions={{
@@ -24,8 +27,13 @@ export function Tabs() : React.JSX.Element {
                 }}
                 tabBar={(props) => (
                     <>
-                        <Separator />
-                        <Miniplayer navigation={props.navigation} />
+                        { showMiniplayer && (
+                            /* Hide miniplayer if the queue is empty */
+                            <>
+                                <Separator />
+                                <Miniplayer navigation={props.navigation} />
+                            </>
+                        )}
                         <Separator />
                         <BottomTabBar {...props} />
                     </>

player/provider.tsx

@@ -1,4 +1,4 @@
-import { createContext, ReactNode, SetStateAction, useContext, useState } from "react";
+import { createContext, ReactNode, SetStateAction, useContext, useEffect, useState } from "react";
 import { JellifyTrack } from "../types/JellifyTrack";
 import { storage } from "../constants/storage";
 import { MMKVStorageKeys } from "../enums/mmkv-storage-keys";
@@ -51,6 +51,13 @@ const PlayerContextInitializer = () => {
         setQueue(newQueue)
     }
 
+    // Hide miniplayer if the queue is empty
+    useEffect(() => {
+        setShowMiniplayer(queue.length > 0)
+    }, [
+        queue
+    ])
+
     return {
         showPlayer,
         setShowPlayer,