movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 14:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix slider resetting while sliding

Browse Source
This commit is contained in:
Jorrin
2024-02-14 22:18:07 +01:00
parent 439ba8c7e5
commit 61f3e77f58
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/expo/src/components/player/VideoSlider.tsx
View File

@@ -54,10 +54,13 @@ const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => {
}; };
const valueX = valueToX(value); const valueX = valueToX(value);
const translateX = useSharedValue(valueToX(value)); const translateX = useSharedValue(valueToX(value));
const isDragging = useSharedValue(false);
useEffect(() => { useEffect(() => {
if (!isDragging.value) {
translateX.value = clamp(valueX, 0, width - knobSize_); translateX.value = clamp(valueX, 0, width - knobSize_);
}, [valueX]); }
}, [valueX, isDragging.value]);
const _onSlidingComplete = (xValue: number) => { const _onSlidingComplete = (xValue: number) => {
"worklet"; "worklet";
@@ -66,16 +69,26 @@ const VideoSlider = ({ onSlidingComplete }: VideoSliderProps) => {
const _onActive = (value: number) => { const _onActive = (value: number) => {
"worklet"; "worklet";
isDragging.value = true;
translateX.value = clamp(value, 0, width - knobSize_); translateX.value = clamp(value, 0, width - knobSize_);
runOnJS(setIsIdle)(false); runOnJS(setIsIdle)(false);
}; };
const _onEnd = () => {
"worklet";
isDragging.value = false;
_onSlidingComplete(translateX.value);
};
const onGestureEvent = useAnimatedGestureHandler< const onGestureEvent = useAnimatedGestureHandler<
PanGestureHandlerGestureEvent, PanGestureHandlerGestureEvent,
{ offsetX: number } { offsetX: number }
>({ >({
onStart: (_, ctx) => (ctx.offsetX = translateX.value), onStart: (_, ctx) => (ctx.offsetX = translateX.value),
onActive: (event, ctx) => _onActive(event.translationX + ctx.offsetX), onActive: (event, ctx) => _onActive(event.translationX + ctx.offsetX),
onEnd: _onEnd,
onCancel: _onEnd,
onFinish: _onEnd,
}); });
const onTapEvent = ( const onTapEvent = (