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())