miniplayer buttons

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} 
+        />
+    )
 }

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"

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