Add subtle track behind scrubber, adjust opacity

This commit is contained in:
Eric Bailey
2025-01-18 18:03:55 -06:00
parent f7a9ba67c8
commit d83a62795f
+24 -2
View File
@@ -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>
</>