From d83a62795fa6819a93a832052182e4b954750745 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Sat, 18 Jan 2025 18:03:55 -0600
Subject: [PATCH] Add subtle track behind scrubber, adjust opacity

---
 src/screens/VideoFeed/components/Scrubber.tsx | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/screens/VideoFeed/components/Scrubber.tsx b/src/screens/VideoFeed/components/Scrubber.tsx
index a29a447f1c..c67172745b 100644
--- a/src/screens/VideoFeed/components/Scrubber.tsx
+++ b/src/screens/VideoFeed/components/Scrubber.tsx
@@ -134,9 +134,16 @@ export function Scrubber({
       ? seekProgressSV.get()
       : currentTimeSV.get()
     const progress = currentTime === 0 ? 0 : currentTime / durationSV.get()
+    const isSeeking = seekingAnimationSV.get()
+    return {
+      height: isSeeking * 3 + 1,
+      opacity: isSeeking ? 0.6 : 0.4,
+      width: `${progress * 100}%`,
+    }
+  })
+  const trackStyle = useAnimatedStyle(() => {
     return {
       height: seekingAnimationSV.get() * 3 + 1,
-      width: `${progress * 100}%`,
     }
   })
 
@@ -186,7 +193,22 @@ export function Scrubber({
             },
             a.z_10,
           ]}>
-          <Animated.View style={[{backgroundColor: 'white'}, barStyle]} />
+          <View style={[a.w_full, a.relative]}>
+            <Animated.View
+              style={[
+                a.w_full,
+                {backgroundColor: 'white', opacity: 0.2},
+                trackStyle,
+              ]}
+            />
+            <Animated.View
+              style={[
+                a.absolute,
+                {top: 0, left: 0, backgroundColor: 'white'},
+                barStyle,
+              ]}
+            />
+          </View>
         </View>
       </GestureDetector>
     </>