Add subtle track behind scrubber, adjust opacity
This commit is contained in:
@@ -134,9 +134,16 @@ export function Scrubber({
|
|||||||
? seekProgressSV.get()
|
? seekProgressSV.get()
|
||||||
: currentTimeSV.get()
|
: currentTimeSV.get()
|
||||||
const progress = currentTime === 0 ? 0 : currentTime / durationSV.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 {
|
return {
|
||||||
height: seekingAnimationSV.get() * 3 + 1,
|
height: seekingAnimationSV.get() * 3 + 1,
|
||||||
width: `${progress * 100}%`,
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -186,7 +193,22 @@ export function Scrubber({
|
|||||||
},
|
},
|
||||||
a.z_10,
|
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>
|
</View>
|
||||||
</GestureDetector>
|
</GestureDetector>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user