From 1742e832789eb09e356562a2974d774dc6cd5728 Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Sat, 28 Dec 2024 15:21:04 -0600
Subject: [PATCH] miniplayer buttons

---
 components/Global/icon.tsx                  | 25 +++++++++++++++---
 components/Login/helpers/server-library.tsx |  2 +-
 components/Player/mini-player.tsx           | 29 ++++++++++++++++-----
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/components/Global/icon.tsx b/components/Global/icon.tsx
index 91fc7670..968b04be 100644
--- a/components/Global/icon.tsx
+++ b/components/Global/icon.tsx
@@ -3,11 +3,28 @@ import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityI
 import { Colors } from "react-native/Libraries/NewAppScreen"
 
 const iconDimensions = {
-    width: 25,
-    height: 25
+    width: 50,
+    height: 50
 }
 
-export default function Icon({ name }: { name: string }) : React.JSX.Element {
-    return <MaterialCommunityIcons color={Colors.Primary} name={name} {...iconDimensions} />
+const largeDimensions = {
+    width: 100,
+    height: 100
+}
 
+export default function Icon({ name, onPress, large }: { name: string, onPress?: Function, large?: boolean }) : React.JSX.Element {
+    
+    let dimensions = large ? largeDimensions : iconDimensions
+    
+    return (
+        <MaterialCommunityIcons 
+            color={Colors.Primary} 
+            name={name} 
+            onPress={() => {
+                if (onPress)
+                    onPress();
+            }}
+            {...dimensions} 
+        />
+    )
 }
\ No newline at end of file
diff --git a/components/Login/helpers/server-library.tsx b/components/Login/helpers/server-library.tsx
index 8d90caba..b81c6e6e 100644
--- a/components/Login/helpers/server-library.tsx
+++ b/components/Login/helpers/server-library.tsx
@@ -46,7 +46,7 @@ export default function ServerLibrary(): React.JSX.Element {
             <H1>Select Music Library</H1>
 
             { isPending ? (
-                <Spinner />
+                <Spinner size="large" />
             ) : (
                 <ToggleGroup
                     orientation="vertical"
diff --git a/components/Player/mini-player.tsx b/components/Player/mini-player.tsx
index 871999d0..3db5196f 100644
--- a/components/Player/mini-player.tsx
+++ b/components/Player/mini-player.tsx
@@ -1,16 +1,18 @@
 import React from "react";
-import { Button, Spacer, Text, XStack, YStack } from "tamagui";
-import { useActiveTrack } from "react-native-track-player";
+import { Button, Spacer, Spinner, Text, XStack, YStack } from "tamagui";
+import { State, useActiveTrack, usePlaybackState } from "react-native-track-player";
 import { JellifyTrack } from "../../types/JellifyTrack";
 import { usePlayerContext } from "../../player/provider";
 import { BottomTabNavigationEventMap, BottomTabNavigationProp } from "@react-navigation/bottom-tabs";
 import { NavigationHelpers, ParamListBase } from "@react-navigation/native";
 import { BlurView } from "@react-native-community/blur";
-import { pause, skipToNext } from "react-native-track-player/lib/src/trackPlayer";
+import { pause, play, skipToNext } from "react-native-track-player/lib/src/trackPlayer";
 import Icon from "../Global/icon";
 
 export function Miniplayer({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }) : React.JSX.Element {
 
+    const playbackState = usePlaybackState();
+
     const activeTrack = useActiveTrack() as JellifyTrack | undefined;
 
     const { setShowPlayer } = usePlayerContext();
@@ -27,12 +29,25 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                 <Button onPress={() => {
                     pause()
                 }}>
+                </Button>
+                    
+                { playbackState.state === State.Playing && (
                     <Icon name="pause" />
-                </Button>
+                )}
 
-                <Button onPress={() => skipToNext()}>
-                    <Icon name="fast-forward" />
-                </Button>
+                { playbackState.state === State.Paused && (
+                    <Icon name="play" large onPress={() => play()} />
+                )}
+
+                { playbackState.state === State.Buffering || playbackState.state === State.Loading && (
+                    <Spinner size="small" />
+                )}
+
+                <Icon 
+                    large
+                    name="fast-forward" 
+                    onPress={() => skipToNext()} 
+                />
             </XStack>
         </BlurView>
     )