From 81e9cde57838282bb8cdb66b1499287ebfcde98e Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Sun, 19 Jan 2025 19:27:04 +0000 Subject: [PATCH] improve scrubber on android --- src/screens/VideoFeed/components/Scrubber.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/screens/VideoFeed/components/Scrubber.tsx b/src/screens/VideoFeed/components/Scrubber.tsx index d44ec8f8e9..768ba61428 100644 --- a/src/screens/VideoFeed/components/Scrubber.tsx +++ b/src/screens/VideoFeed/components/Scrubber.tsx @@ -52,11 +52,17 @@ export function Scrubber({ const updateTime = (currentTime: number, duration: number) => { 'worklet' currentTimeSV.set(currentTime) - durationSV.set(duration) + if (duration !== 0) { + durationSV.set(duration) + } } useEventListener(player, 'timeUpdate', evt => { - runOnUI(updateTime)(evt.currentTime, player.duration) + const duration = player.duration + if (duration !== 0) { + setDuration(Math.round(duration)) + } + runOnUI(updateTime)(evt.currentTime, duration) }) const isSeekingSV = useSharedValue(false) @@ -71,15 +77,6 @@ export function Scrubber({ }, ) - useAnimatedReaction( - () => Math.round(durationSV.get()), - (duration, prevDuration) => { - if (duration !== prevDuration) { - runOnJS(setDuration)(duration) - } - }, - ) - const seekBy = useCallback( (time: number) => { player.seekBy(time) @@ -98,7 +95,7 @@ export function Scrubber({ const scrubPanGesture = useMemo(() => { return Gesture.Pan() .blocksExternalGesture(scrollGesture) - .activeOffsetX([-1, 1]) + .activeOffsetX([-10, 10]) .failOffsetY([-10, 10]) .onStart(() => { 'worklet' @@ -120,6 +117,9 @@ export function Scrubber({ const progress = evt.x / screenWidth const newTime = clamp(progress * durationSV.get(), 0, durationSV.get()) + // optimisically set the progress bar + seekProgressSV.set(newTime) + // it's seek by, so offset by the current time // seekBy sets isSeekingSV back to false, so no need to do that here runOnJS(seekBy)(newTime - currentTimeSV.get())