From 16608fb1606d4aebd78cde2ed4814875d248fb07 Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Sun, 9 Feb 2025 11:08:16 -0600
Subject: [PATCH] texttickers

player screen layout changes
---
 components/Player/mini-player.tsx   |  2 +-
 components/Player/screens/index.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/Player/mini-player.tsx b/components/Player/mini-player.tsx
index 36192507..54fbcd45 100644
--- a/components/Player/mini-player.tsx
+++ b/components/Player/mini-player.tsx
@@ -44,7 +44,7 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
 
                     </YStack>
 
-
+                        {/** Memoize TextTickers otherwise they won't animate due to the progress being updated in the PlayerContext */}
                         { useMemo(() => {
                             return (
                                 <YStack 
diff --git a/components/Player/screens/index.tsx b/components/Player/screens/index.tsx
index ea4bead4..e1c280a9 100644
--- a/components/Player/screens/index.tsx
+++ b/components/Player/screens/index.tsx
@@ -3,7 +3,7 @@ import { RunTimeSeconds } from "../../../components/Global/helpers/time-codes";
 import { StackParamList } from "../../../components/types";
 import { usePlayerContext } from "../../../player/provider";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
 import { YStack, XStack, Spacer, getTokens } from "tamagui";
 import PlayPauseButton from "../helpers/buttons";
@@ -81,7 +81,10 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
                     </XStack>
 
                     <XStack marginHorizontal={20} paddingVertical={5}>
-                        <YStack justifyContent="flex-start" flex={4}>
+
+                        {/** Memoize TextTickers otherwise they won't animate due to the progress being updated in the PlayerContext */}
+                        { useMemo(() => {
+                            <YStack justifyContent="flex-start" flex={5}>
                             <TextTicker {...TextTickerConfig}>
                                 <Text 
                                     bold 
@@ -123,6 +126,9 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
                                 </Text>
                             </TextTicker>
                         </YStack>
+                        }, [
+                            nowPlaying
+                        ])}
 
                         <XStack 
                             justifyContent="flex-end"