From b03d449a1bd5d16e16f15dbb215a75cfd2e0cc7c Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Fri, 25 Oct 2024 00:27:37 +0200
Subject: [PATCH] fix: show past lyrics in grey

---
 src/screens/modals/Lyrics/components/LyricsLine.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/screens/modals/Lyrics/components/LyricsLine.tsx b/src/screens/modals/Lyrics/components/LyricsLine.tsx
index 144eed8..3f7c015 100644
--- a/src/screens/modals/Lyrics/components/LyricsLine.tsx
+++ b/src/screens/modals/Lyrics/components/LyricsLine.tsx
@@ -41,6 +41,7 @@ function LyricsLine({
     const active = useMemo(() => (
         position > start && position < end
     ), [start, end, position]);
+    const past = useMemo(() => position > end, [end, position]);
 
     // Call the parent when the active state changes
     useEffect(() => {
@@ -50,10 +51,10 @@ function LyricsLine({
     // Determine the current style for this line
     const lyricsTextStyle: StyleProp<TextStyle> = useMemo(() => ({
         color: active ? defaultStyles.themeColor.color : defaultStyles.text.color,
-        opacity: active ? 1 : 0.7,
+        opacity: active ? 1 : (past ? 0.25 : 0.7),
         transformOrigin: 'left center',
         fontSize: size === 'full' ? 24 : 18,
-    }), [active, defaultStyles, size]);
+    }), [active, defaultStyles, size, past]);
 
     const scale = useDerivedValue(() => withTiming(active ? 1.05 : 1));
     const animatedStyle = useAnimatedStyle(() => ({