From 0b13e69854a361a67bcc67baaf22c9364a53378f Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Thu, 25 Jul 2024 14:06:06 +0200
Subject: [PATCH] fix: make progress bars initialise out of view

---
 src/components/Progresstrack.tsx                        | 4 ++--
 src/screens/Music/overlays/NowPlaying/index.tsx         | 4 ++--
 src/screens/modals/Lyrics/components/LyricsProgress.tsx | 4 +++-
 src/screens/modals/Player/components/ProgressBar.tsx    | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Progresstrack.tsx b/src/components/Progresstrack.tsx
index 0b9f46e7..9e4f21f8 100644
--- a/src/components/Progresstrack.tsx
+++ b/src/components/Progresstrack.tsx
@@ -20,8 +20,8 @@ export function calculateProgressTranslation(
     const completion = position / reference;
 
     // GUARD: Check whether the calculated number is valid and not infinite
-    if (Number.isNaN(completion) || !Number.isFinite(completion)) {
-        return 0;
+    if (Number.isNaN(completion) || !Number.isFinite(completion) || !width) {
+        return -1_000;
     }
 
     const output = (1 - completion) * -1 * width;
diff --git a/src/screens/Music/overlays/NowPlaying/index.tsx b/src/screens/Music/overlays/NowPlaying/index.tsx
index 049be62a..e256dcbe 100644
--- a/src/screens/Music/overlays/NowPlaying/index.tsx
+++ b/src/screens/Music/overlays/NowPlaying/index.tsx
@@ -119,8 +119,8 @@ function NowPlaying({ offset = 0, inset }: { offset?: number, inset?: boolean })
 
     const navigation = useNavigation<NavigationProp>();
 
-    const bufferAnimation = useRef(new Animated.Value(0));
-    const progressAnimation = useRef(new Animated.Value(0));
+    const bufferAnimation = useRef(new Animated.Value(-1_000));
+    const progressAnimation = useRef(new Animated.Value(-1_000));
 
     const openNowPlayingModal = useCallback(() => {
         navigation.navigate('Player');
diff --git a/src/screens/modals/Lyrics/components/LyricsProgress.tsx b/src/screens/modals/Lyrics/components/LyricsProgress.tsx
index bac70229..3a77f6f4 100644
--- a/src/screens/modals/Lyrics/components/LyricsProgress.tsx
+++ b/src/screens/modals/Lyrics/components/LyricsProgress.tsx
@@ -47,7 +47,7 @@ export default function LyricsProgress({
     // Calculate the progress animation
     const progressAnimation = useDerivedValue(() => {
         // GUARD: If the animatino is not active, hide the progress bar
-        if (!active) return -width.value;
+        if (!active) return -1_000;
 
         // Calculate how far along we are
         const progress = calculateProgressTranslation(position - start, end - start, width.value);
@@ -65,6 +65,8 @@ export default function LyricsProgress({
         };
     });
 
+    console.log(progressAnimation.value);
+
     // GUARD: Only show durations if they last for more than 5 seconds.
     if (duration < 5e7) { 
         return null;
diff --git a/src/screens/modals/Player/components/ProgressBar.tsx b/src/screens/modals/Player/components/ProgressBar.tsx
index 3d68727a..e97d4e75 100644
--- a/src/screens/modals/Player/components/ProgressBar.tsx
+++ b/src/screens/modals/Player/components/ProgressBar.tsx
@@ -187,7 +187,7 @@ function ProgressBar() {
                     <ProgressTrack
                         style={[
                             styles.themeBackground,
-                            bufferStyles
+                            bufferStyles,
                         ]}
                         opacity={0.15}
                     />