From 3f625ccc8f6b4c4264cc8a71daae5e6ab85d2264 Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Wed, 1 Jan 2025 15:23:36 -0600
Subject: [PATCH] player layout fixes

---
 components/Player/component.tsx   |  4 ++--
 components/Player/mini-player.tsx | 29 ++++++++++++++++++-----------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/Player/component.tsx b/components/Player/component.tsx
index a29c3c28..24d44939 100644
--- a/components/Player/component.tsx
+++ b/components/Player/component.tsx
@@ -30,7 +30,7 @@ export default function Player(): React.JSX.Element {
     return (
         <SafeAreaView>
             { nowPlaying && (
-                <YStack alignItems="center">
+                <YStack>
 
                     <HStack alignItems="center">
 
@@ -50,7 +50,7 @@ export default function Player(): React.JSX.Element {
                             />
                     </HStack>
 
-                    <HStack justifyContent="space-between">
+                    <HStack>
 
                         <YStack alignItems="flex-start" justifyContent="flex-start" flex={3}>
                             <Text>{nowPlaying?.title ?? "Untitled Track"}</Text>
diff --git a/components/Player/mini-player.tsx b/components/Player/mini-player.tsx
index 126a287b..0d9bd3b1 100644
--- a/components/Player/mini-player.tsx
+++ b/components/Player/mini-player.tsx
@@ -76,17 +76,7 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                     </YStack>
                     
                     <XStack flex={2}>
-                        { playbackState.state === State.Playing && (
-                            <Icon name="pause" large onPress={() => pause()} />
-                        )}
-
-                        { playbackState.state === State.Paused && (
-                            <Icon name="play" large onPress={() => play()} />
-                        )}
-
-                        { playbackState.state === State.Buffering || playbackState.state === State.Loading && (
-                            <Spinner size="small" color={Colors.Primary}/>
-                        )}
+                        { renderPlayPause(playbackState.state, play, pause) }
 
                         <Icon 
                             large
@@ -97,4 +87,21 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
             )}
         </BlurView>
     )
+}
+
+function renderPlayPause(playbackState: State | undefined, play: Function, pause: Function) {
+    switch (playbackState) {
+        case (State.Playing) : {
+            <Icon name="pause" large onPress={() => pause()} />
+        }
+    
+        case (State.Buffering) :
+        case (State.Loading) : {
+            <Spinner size="small" color={Colors.Primary}/>
+        }
+        
+        default : {
+            <Icon name="play" large onPress={() => play()} />
+        }
+    }
 }
\ No newline at end of file