Merge pull request #113 from THEOplayer/bugfix/scrub-video-timeline

Scrubbing video timeline on iOS Safari

Author: rbnbtns

.changeset/tricky-teeth-rest.md

@@ -0,0 +1,5 @@
+---
+'@theoplayer/react-native-ui': patch
+---
+
+Fixed an issue where the playhead on the `<SeekBar>` would occasionally snap back after scrubbing on iOS Safari.

src/ui/components/seekbar/SeekBar.tsx

@@ -6,6 +6,7 @@ import { useChaptersTrack, useDebounce, useDuration, useSeekable } from '../../h
 import { SingleThumbnailView } from './thumbnail/SingleThumbnailView';
 import { useSlider } from './useSlider';
 import { TestIDs } from '../../utils/TestIDs';
+import { SeekBarTouchHandler } from './SeekBarTouchHandler';
 import { PlayerEventType, SeekedEvent } from 'react-native-theoplayer';
 import { fuzzyEquals } from '../../utils/NumberUtils';
 
@@ -164,27 +165,29 @@ export const SeekBar = (props: SeekBarProps) => {
       onLayout={(event: LayoutChangeEvent) => {
         setWidth(event.nativeEvent.layout.width);
       }}>
-      <Slider
-        disabled={disabled}
-        minimumValue={normalizedTime(seekableRange.start)}
-        maximumValue={normalizedTime(seekableRange.end)}
-        containerStyle={props.sliderContainerStyle ?? { marginHorizontal: 8 }}
-        minimumTrackStyle={props.sliderMinimumTrackStyle ?? {}}
-        maximumTrackStyle={props.sliderMaximumTrackStyle ?? {}}
-        step={1000}
-        renderAboveThumbComponent={renderAboveThumbComponent}
-        onSlidingStart={onSlidingStart}
-        onValueChange={onSlidingValueChange}
-        onSlidingComplete={onSlidingComplete}
-        value={sliderTime}
-        minimumTrackTintColor={theme.colors.seekBarMinimum}
-        maximumTrackTintColor={theme.colors.seekBarMaximum}
-        thumbTintColor={theme.colors.seekBarDot}
-        thumbStyle={StyleSheet.flatten(props.thumbStyle)}
-        thumbTouchSize={props.thumbTouchSize}
-        renderTrackMarkComponent={chapterMarkerTimes.length ? props.chapterMarkers : undefined}
-        trackMarks={chapterMarkerTimes}
-      />
+      <SeekBarTouchHandler>
+        <Slider
+          disabled={disabled}
+          minimumValue={normalizedTime(seekableRange.start)}
+          maximumValue={normalizedTime(seekableRange.end)}
+          containerStyle={props.sliderContainerStyle ?? { marginHorizontal: 8 }}
+          minimumTrackStyle={props.sliderMinimumTrackStyle ?? {}}
+          maximumTrackStyle={props.sliderMaximumTrackStyle ?? {}}
+          step={1000}
+          renderAboveThumbComponent={renderAboveThumbComponent}
+          onSlidingStart={onSlidingStart}
+          onValueChange={onSlidingValueChange}
+          onSlidingComplete={onSlidingComplete}
+          value={sliderTime}
+          minimumTrackTintColor={theme.colors.seekBarMinimum}
+          maximumTrackTintColor={theme.colors.seekBarMaximum}
+          thumbTintColor={theme.colors.seekBarDot}
+          thumbStyle={StyleSheet.flatten(props.thumbStyle)}
+          thumbTouchSize={props.thumbTouchSize}
+          renderTrackMarkComponent={chapterMarkerTimes.length ? props.chapterMarkers : undefined}
+          trackMarks={chapterMarkerTimes}
+        />
+      </SeekBarTouchHandler>
     </View>
   );
 };

src/ui/components/seekbar/SeekBarTouchHandler.tsx

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+
+/**
+ * Native passthrough component - no touch event handling needed on native platforms.
+ */
+export const SeekBarTouchHandler = ({ children }: PropsWithChildren) => {
+  return <>{children}</>;
+};

src/ui/components/seekbar/SeekBarTouchHandler.web.tsx

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren, useCallback } from 'react';
+import { GestureResponderEvent, View } from 'react-native';
+
+/**
+ * Web-specific wrapper that calls preventDefault on touchstart and touchend events.
+ * This prevents iOS Safari from firing synthetic mouse events after touch events,
+ * which would cause the slider to snap back to its original position during scrubbing.
+ */
+export const SeekBarTouchHandler = ({ children }: PropsWithChildren) => {
+  const onTouchEvent = useCallback((e: GestureResponderEvent) => {
+    e.preventDefault();
+  }, []);
+
+  return (
+    <View onTouchStart={onTouchEvent} onTouchEnd={onTouchEvent}>
+      {children}
+    </View>
+  );
+};