scaling changes

components/Global/components/track.tsx

@@ -46,8 +46,10 @@ export default function Track({
                 paddingVertical={"$2"}
                 paddingHorizontal={"$1"}
             >
-                <XStack justifyContent="center" flex={1}>
-                    <Text>{ track.IndexNumber?.toString() ?? "" }</Text>
+                <XStack justifyContent="flex-end" flex={1}>
+                    <Text color={isPlaying ? Colors.Primary : Colors.White}>
+                        { track.IndexNumber?.toString() ?? "" }
+                    </Text>
                 </XStack>
 
                 <XStack alignContent="flex-start" flex={5}>

components/Global/helpers/runtimeticks.tsx

@@ -20,7 +20,9 @@ function calculateRunTimeFromTicks(runTimeTicks: number) : string {
     const runTimeMinutes = Math.floor((runTimeTotalSeconds % 3600) / 60)
     const runTimeSeconds = runTimeTotalSeconds % 60;
 
-    return `${ runTimeHours != 0 ? `${padRunTimeNumber(runTimeHours)}:` : "" }${padRunTimeNumber(runTimeMinutes)}:${padRunTimeNumber(runTimeSeconds)}`;
+    return (runTimeHours != 0 ? `${padRunTimeNumber(runTimeHours)}:` : "") + 
+        (runTimeHours != 0 ? `${padRunTimeNumber(runTimeMinutes)}:` : `${runTimeMinutes}:`) +
+        (padRunTimeNumber(runTimeSeconds));
 }
 
 function padRunTimeNumber(number: number) : string {

components/Player/component.tsx

@@ -23,7 +23,7 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
     const { apiClient } = useApiClientContext();
     const { nowPlaying, progress, useSeekTo } = usePlayerContext();
 
-    const { width } = useSafeAreaFrame();
+    const { width, height } = useSafeAreaFrame();
 
     return (
         <SafeAreaView>
@@ -39,10 +39,11 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
                         )
                     }
                     imageStyle={{
-                        position: "relative",
+                        position: "absolute",
+                        alignSelf: "center",
                         zIndex: -99,
-                        width: width,
-                        height: width,
+                        width: height,
+                        height: height,
                         resizeMode: "cover",
                         borderRadius: 2
                     }}