From cf956a000c2ef86165a7d28a4824c95da755d01a Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Sat, 28 Dec 2024 09:29:32 -0600
Subject: [PATCH] hide miniplayer if the queue is empty

---
 components/tabs.tsx | 12 ++++++++++--
 player/provider.tsx |  9 ++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/components/tabs.tsx b/components/tabs.tsx
index caf48e47..2b003094 100644
--- a/components/tabs.tsx
+++ b/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} />
                     </>
diff --git a/player/provider.tsx b/player/provider.tsx
index 5a465cf7..07f93722 100644
--- a/player/provider.tsx
+++ b/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,