Add time codes to player

Adjust track component

components/Album/component.tsx

@@ -9,7 +9,7 @@ import { queryConfig } from "../../api/queries/query.config";
 import { H4, H5, Text } from "../Global/helpers/text";
 import { FlatList } from "react-native";
 import { usePlayerContext } from "../../player/provider";
-import RunTimeTicks from "../Global/helpers/runtimeticks";
+import { RunTimeTicks } from "../Global/helpers/time-codes";
 import Track from "../Global/components/track";
 import { useItemTracks } from "@/api/queries/tracks";
 import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";

components/Global/components/track.tsx

@@ -1,8 +1,8 @@
 import { usePlayerContext } from "@/player/provider";
 import React from "react";
-import { Separator, useTheme, View, XStack } from "tamagui";
+import { Separator, useTheme, View, XStack, YStack } from "tamagui";
 import { Text } from "../helpers/text";
-import RunTimeTicks from "../helpers/runtimeticks";
+import RunTimeTicks from "../helpers/time-codes";
 import { useApiClientContext } from "../../jellyfin-api-provider";
 import { mapDtoToTrack } from "@/helpers/mappings";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
@@ -44,7 +44,7 @@ export default function Track({
                     });
                 }}
                 paddingVertical={"$3"}
-                paddingHorizontal={"$1"}
+                marginHorizontal={"$1"}
             >
                 <XStack justifyContent="flex-start" flex={1}>
                     <Text color={isPlaying ? Colors.Primary : Colors.White}>
@@ -52,7 +52,7 @@ export default function Track({
                     </Text>
                 </XStack>
 
-                <XStack alignContent="flex-start" flex={6}>
+                <YStack justifyContent="flex-start" flex={6}>
                     <Text 
                         color={isPlaying ? Colors.Primary : Colors.White}
                         lineBreakStrategyIOS="standard"
@@ -60,7 +60,7 @@ export default function Track({
                     >
                         { track.Name ?? "Untitled Track" }
                     </Text>
-                </XStack>
+                </YStack>
 
                 <XStack alignContent="flex-end" flex={1}>
                     <RunTimeTicks>{ track.RunTimeTicks }</RunTimeTicks>

components/Global/helpers/time-codes.tsx

@@ -1,8 +1,12 @@
-import { pad } from "lodash";
 import { Text } from "./text";
 import { convertRunTimeTicksToSeconds } from "@/helpers/runtimeticks";
+import React from "react";
 
-export default function RunTimeTicks({ children } : { children?: number | null | undefined }) : React.JSX.Element {
+export function RunTimeSeconds({ children }: { children: number }) : React.JSX.Element {
+    return <Text>{ calculateRunTimeFromSeconds(children) }</Text>
+}
+
+export function RunTimeTicks({ children } : { children?: number | null | undefined }) : React.JSX.Element {
     if (!!!children) 
         return <Text>0:00</Text>
 
@@ -11,18 +15,22 @@ export default function RunTimeTicks({ children } : { children?: number | null |
     return <Text color="$gray10">{ time }</Text>
 }
 
+function calculateRunTimeFromSeconds(seconds: number) : string {
+    const runTimeHours = Math.floor(seconds / 3600);
+    const runTimeMinutes = Math.floor((seconds % 3600) / 60)
+    const runTimeSeconds = seconds % 60;
+
+    return (runTimeHours != 0 ? `${padRunTimeNumber(runTimeHours)}:` : "") + 
+        (runTimeHours != 0 ? `${padRunTimeNumber(runTimeMinutes)}:` : `${runTimeMinutes}:`) +
+        (padRunTimeNumber(runTimeSeconds));
+}
+
 function calculateRunTimeFromTicks(runTimeTicks: number) : string {
 
 
     const runTimeTotalSeconds = convertRunTimeTicksToSeconds(runTimeTicks);
 
-    const runTimeHours = Math.floor(runTimeTotalSeconds / 3600);
-    const runTimeMinutes = Math.floor((runTimeTotalSeconds % 3600) / 60)
-    const runTimeSeconds = runTimeTotalSeconds % 60;
-
-    return (runTimeHours != 0 ? `${padRunTimeNumber(runTimeHours)}:` : "") + 
-        (runTimeHours != 0 ? `${padRunTimeNumber(runTimeMinutes)}:` : `${runTimeMinutes}:`) +
-        (padRunTimeNumber(runTimeSeconds));
+    return calculateRunTimeFromSeconds(runTimeTotalSeconds);
 }
 
 function padRunTimeNumber(number: number) : string {

components/Player/component.tsx

@@ -5,7 +5,7 @@ import { useApiClientContext } from "../jellyfin-api-provider";
 import { getImageApi } from "@jellyfin/sdk/lib/utils/api";
 import { ImageType } from "@jellyfin/sdk/lib/generated-client/models";
 import { queryConfig } from "../../api/queries/query.config";
-import { Text } from "../Global/helpers/text";
+import { H5, Text } from "../Global/helpers/text";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { HorizontalSlider } from "../Global/helpers/slider";
 import PlayPauseButton from "./helpers/buttons";
@@ -14,6 +14,7 @@ import { skipToNext, skipToPrevious } from "react-native-track-player/lib/src/tr
 import Icon from "../Global/helpers/icon";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { StackParamList } from "../types";
+import { RunTimeSeconds } from "../Global/helpers/time-codes";
 
 export default function Player({ navigation }: { navigation: NativeStackNavigationProp<StackParamList>}): React.JSX.Element {
 
@@ -47,6 +48,11 @@ export default function Player({ navigation }: { navigation: NativeStackNavigati
             <>
                 <YStack>
 
+                    <YStack justifyContent="center">
+                        <Text>Playing from</Text>
+                        <H5>THING</H5>
+                    </YStack>
+
                     <XStack justifyContent="center">
                         <CachedImage
                             source={getImageApi(apiClient!)
@@ -89,12 +95,12 @@ export default function Player({ navigation }: { navigation: NativeStackNavigati
                         </XStack>
                     </XStack>
 
-                    <XStack justifyContent="center" marginVertical={20}>
+                    <XStack justifyContent="center" marginTop={20}>
                         {/* playback progress goes here */}
                         <HorizontalSlider 
                             value={progressState}
                             max={progress!.duration}
-                            width={width / 1.1}
+                            width={width / 1.25}
                             props={{
                                 // If user swipes off of the slider we should seek to the spot
                                 onPressOut: (event) => {
@@ -118,6 +124,11 @@ export default function Player({ navigation }: { navigation: NativeStackNavigati
 
                     </XStack>
 
+                    <XStack alignContent="space-between">
+                        <RunTimeSeconds>{progress!.position}</RunTimeSeconds>
+                        <RunTimeSeconds>{progress!.duration}</RunTimeSeconds>
+                    </XStack>
+
                     <XStack justifyContent="center">
                         <Icon
                             large

components/Playlist/component.tsx

@@ -5,7 +5,7 @@ import { ScrollView, XStack, YStack } from "tamagui";
 import { useApiClientContext } from "../jellyfin-api-provider";
 import { usePlayerContext } from "@/player/provider";
 import { useItemTracks } from "@/api/queries/tracks";
-import RunTimeTicks from "../Global/helpers/runtimeticks";
+import { RunTimeTicks } from "../Global/helpers/time-codes";
 import { H4, H5, Text } from "../Global/helpers/text";
 import Track from "../Global/components/track";
 import { FlatList } from "react-native";
@@ -28,7 +28,7 @@ export default function Playlist(props: PlaylistProps): React.JSX.Element {
     const { data: tracks, isLoading } = useItemTracks(props.playlist.Id!, apiClient!);
 
     return (
-        <SafeAreaView edges={["top", "right", "left"]}>
+        <SafeAreaView edges={["right", "left"]}>
             <ScrollView contentInsetAdjustmentBehavior="automatic">
                 <YStack alignItems="center">
                     <CachedImage