@movementinfra/expo-twostep-video 0.1.14 → 0.1.15

package/build/ExpoTwoStepVideo.types.d.ts

@@ -86,6 +86,12 @@ export type TwoStepVideoViewProps = {
     onPanZoomChange?: (event: {
         nativeEvent: PanZoomChangeEvent;
     }) => void;
+    /** Show playhead bar overlay at bottom of video (default: true) */
+    showPlayheadBar?: boolean;
+    /** Enable double-tap to skip forward/backward (default: true) */
+    enableDoubleTapSkip?: boolean;
+    /** Seconds to skip on double-tap (default: 5) */
+    doubleTapSkipInterval?: number;
     /** View style */
     style?: StyleProp<ViewStyle>;
 };

package/build/ExpoTwoStepVideo.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoTwoStepVideo.types.d.ts","sourceRoot":"","sources":["../src/ExpoTwoStepVideo.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExpoTwoStepVideo.types.d.ts","sourceRoot":"","sources":["../src/ExpoTwoStepVideo.types.ts"],"names":[],"mappings":"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"}

package/build/ExpoTwoStepVideo.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoTwoStepVideo.types.js","sourceRoot":"","sources":["../src/ExpoTwoStepVideo.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\n/**\n * Playback status event payload\n */\nexport type PlaybackStatusEvent = {\n  status: 'ready' | 'playing' | 'paused' | 'ended' | 'seeked';\n  time?: number;\n};\n\n/**\n * Progress event payload\n */\nexport type ProgressEvent = {\n  currentTime: number;\n  duration: number;\n  progress: number;\n};\n\n/**\n * Error event payload\n */\nexport type ErrorEvent = {\n  error: string;\n};\n\n/**\n * Pan/Zoom state representing the current view transform\n */\nexport type PanZoomState = {\n  /** Horizontal pan position (-1.0 to 1.0, 0 = center) */\n  panX: number;\n  /** Vertical pan position (-1.0 to 1.0, 0 = center) */\n  panY: number;\n  /** Zoom level (1.0 = no zoom, 2.0 = 2x zoom, etc.) */\n  zoomLevel: number;\n};\n\n/**\n * Pan/Zoom change event payload\n */\nexport type PanZoomChangeEvent = PanZoomState;\n\n/**\n * Options for creating a pan/zoom composition\n */\nexport type PanZoomVideoOptions = {\n  /** ID of the loaded asset */\n  assetId: string;\n  /** Horizontal pan position (-1.0 to 1.0, 0 = center) */\n  panX?: number;\n  /** Vertical pan position (-1.0 to 1.0, 0 = center) */\n  panY?: number;\n  /** Zoom level (1.0 = no zoom, 2.0 = 2x zoom, etc.) */\n  zoomLevel?: number;\n  /** Optional start time in seconds */\n  startTime?: number;\n  /** Optional end time in seconds */\n  endTime?: number;\n};\n\n/**\n * Video player view props\n */\nexport type TwoStepVideoViewProps = {\n  /** ID of a composition to play (from trimVideo, mirrorVideo, etc.) */\n  compositionId?: string;\n  /** ID of an asset to play (from loadAsset) */\n  assetId?: string;\n  /** Enable continuous looping - video will restart automatically when it ends */\n  loop?: boolean;\n  /** Minimum zoom level (default: 1.0) */\n  minZoom?: number;\n  /** Maximum zoom level (default: 5.0) */\n  maxZoom?: number;\n  /** Called when playback status changes */\n  onPlaybackStatusChange?: (event: { nativeEvent: PlaybackStatusEvent }) => void;\n  /** Called periodically with playback progress */\n  onProgress?: (event: { nativeEvent: ProgressEvent }) => void;\n  /** Called when playback reaches the end (not called if loop is true) */\n  onEnd?: (event: { nativeEvent: Record<string, never> }) => void;\n  /** Called when an error occurs */\n  onError?: (event: { nativeEvent: ErrorEvent }) => void;\n  /** Called when pan/zoom gesture changes */\n  onPanZoomChange?: (event: { nativeEvent: PanZoomChangeEvent }) => void;\n  /** View style */\n  style?: StyleProp<ViewStyle>;\n};\n\n/**\n * Base ref handle for video player views (common playback controls)\n */\nexport type BaseVideoViewRef = {\n  /** Start playback */\n  play: () => Promise<void>;\n  /** Pause playback */\n  pause: () => Promise<void>;\n  /** Seek to a specific time in seconds */\n  seek: (time: number) => Promise<void>;\n  /** Restart playback from the beginning */\n  replay: () => Promise<void>;\n};\n\n/**\n * Ref handle for video player view (with pan/zoom support)\n */\nexport type TwoStepVideoViewRef = BaseVideoViewRef & {\n  /** Get the current pan/zoom state */\n  getPanZoomState: () => Promise<PanZoomState>;\n  /** Set the pan/zoom state programmatically */\n  setPanZoomState: (state: Partial<PanZoomState>) => Promise<void>;\n  /** Reset pan/zoom to default state (zoom=1, pan=0,0) */\n  resetPanZoom: () => Promise<void>;\n};\n\n/**\n * Video player controller view props (with native controls)\n */\nexport type TwoStepPlayerControllerViewProps = TwoStepVideoViewProps & {\n  /** Show native playback controls (default: true) */\n  showsPlaybackControls?: boolean;\n};\n\n/**\n * Ref handle for video player controller view (with fullscreen support)\n * Note: Pan/zoom gestures are not available on this view as it uses AVPlayerViewController\n */\nexport type TwoStepPlayerControllerViewRef = BaseVideoViewRef & {\n  /** Enter fullscreen mode */\n  enterFullscreen: () => Promise<void>;\n  /** Exit fullscreen mode */\n  exitFullscreen: () => Promise<void>;\n};\n"]}
+{"version":3,"file":"ExpoTwoStepVideo.types.js","sourceRoot":"","sources":["../src/ExpoTwoStepVideo.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\n/**\n * Playback status event payload\n */\nexport type PlaybackStatusEvent = {\n  status: 'ready' | 'playing' | 'paused' | 'ended' | 'seeked';\n  time?: number;\n};\n\n/**\n * Progress event payload\n */\nexport type ProgressEvent = {\n  currentTime: number;\n  duration: number;\n  progress: number;\n};\n\n/**\n * Error event payload\n */\nexport type ErrorEvent = {\n  error: string;\n};\n\n/**\n * Pan/Zoom state representing the current view transform\n */\nexport type PanZoomState = {\n  /** Horizontal pan position (-1.0 to 1.0, 0 = center) */\n  panX: number;\n  /** Vertical pan position (-1.0 to 1.0, 0 = center) */\n  panY: number;\n  /** Zoom level (1.0 = no zoom, 2.0 = 2x zoom, etc.) */\n  zoomLevel: number;\n};\n\n/**\n * Pan/Zoom change event payload\n */\nexport type PanZoomChangeEvent = PanZoomState;\n\n/**\n * Options for creating a pan/zoom composition\n */\nexport type PanZoomVideoOptions = {\n  /** ID of the loaded asset */\n  assetId: string;\n  /** Horizontal pan position (-1.0 to 1.0, 0 = center) */\n  panX?: number;\n  /** Vertical pan position (-1.0 to 1.0, 0 = center) */\n  panY?: number;\n  /** Zoom level (1.0 = no zoom, 2.0 = 2x zoom, etc.) */\n  zoomLevel?: number;\n  /** Optional start time in seconds */\n  startTime?: number;\n  /** Optional end time in seconds */\n  endTime?: number;\n};\n\n/**\n * Video player view props\n */\nexport type TwoStepVideoViewProps = {\n  /** ID of a composition to play (from trimVideo, mirrorVideo, etc.) */\n  compositionId?: string;\n  /** ID of an asset to play (from loadAsset) */\n  assetId?: string;\n  /** Enable continuous looping - video will restart automatically when it ends */\n  loop?: boolean;\n  /** Minimum zoom level (default: 1.0) */\n  minZoom?: number;\n  /** Maximum zoom level (default: 5.0) */\n  maxZoom?: number;\n  /** Called when playback status changes */\n  onPlaybackStatusChange?: (event: { nativeEvent: PlaybackStatusEvent }) => void;\n  /** Called periodically with playback progress */\n  onProgress?: (event: { nativeEvent: ProgressEvent }) => void;\n  /** Called when playback reaches the end (not called if loop is true) */\n  onEnd?: (event: { nativeEvent: Record<string, never> }) => void;\n  /** Called when an error occurs */\n  onError?: (event: { nativeEvent: ErrorEvent }) => void;\n  /** Called when pan/zoom gesture changes */\n  onPanZoomChange?: (event: { nativeEvent: PanZoomChangeEvent }) => void;\n  /** Show playhead bar overlay at bottom of video (default: true) */\n  showPlayheadBar?: boolean;\n  /** Enable double-tap to skip forward/backward (default: true) */\n  enableDoubleTapSkip?: boolean;\n  /** Seconds to skip on double-tap (default: 5) */\n  doubleTapSkipInterval?: number;\n  /** View style */\n  style?: StyleProp<ViewStyle>;\n};\n\n/**\n * Base ref handle for video player views (common playback controls)\n */\nexport type BaseVideoViewRef = {\n  /** Start playback */\n  play: () => Promise<void>;\n  /** Pause playback */\n  pause: () => Promise<void>;\n  /** Seek to a specific time in seconds */\n  seek: (time: number) => Promise<void>;\n  /** Restart playback from the beginning */\n  replay: () => Promise<void>;\n};\n\n/**\n * Ref handle for video player view (with pan/zoom support)\n */\nexport type TwoStepVideoViewRef = BaseVideoViewRef & {\n  /** Get the current pan/zoom state */\n  getPanZoomState: () => Promise<PanZoomState>;\n  /** Set the pan/zoom state programmatically */\n  setPanZoomState: (state: Partial<PanZoomState>) => Promise<void>;\n  /** Reset pan/zoom to default state (zoom=1, pan=0,0) */\n  resetPanZoom: () => Promise<void>;\n};\n\n/**\n * Video player controller view props (with native controls)\n */\nexport type TwoStepPlayerControllerViewProps = TwoStepVideoViewProps & {\n  /** Show native playback controls (default: true) */\n  showsPlaybackControls?: boolean;\n};\n\n/**\n * Ref handle for video player controller view (with fullscreen support)\n * Note: Pan/zoom gestures are not available on this view as it uses AVPlayerViewController\n */\nexport type TwoStepPlayerControllerViewRef = BaseVideoViewRef & {\n  /** Enter fullscreen mode */\n  enterFullscreen: () => Promise<void>;\n  /** Exit fullscreen mode */\n  exitFullscreen: () => Promise<void>;\n};\n"]}

package/build/ExpoTwoStepVideoView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoTwoStepVideoView.d.ts","sourceRoot":"","sources":["../src/ExpoTwoStepVideoView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAgB,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAoBpG;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,gBAAgB,mGA+BrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ExpoTwoStepVideoView.d.ts","sourceRoot":"","sources":["../src/ExpoTwoStepVideoView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAgB,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAsBpG;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,gBAAgB,mGA0HrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

package/build/ExpoTwoStepVideoView.js

@@ -1,6 +1,9 @@
 import { requireNativeView } from 'expo';
 import * as React from 'react';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { View } from 'react-native';
+import PlayheadBar from './components/PlayheadBar';
+import DoubleTapSkip from './components/DoubleTapSkip';
 const NativeView = requireNativeView('ExpoTwoStepVideo');
 /**
  * Video player view that can play compositions and assets directly
@@ -25,7 +28,15 @@ const NativeView = requireNativeView('ExpoTwoStepVideo');
  * ```
  */
 const TwoStepVideoView = forwardRef((props, ref) => {
+    const { showPlayheadBar = true, enableDoubleTapSkip = true, doubleTapSkipInterval = 5, onProgress, onPlaybackStatusChange, style, ...nativeProps } = props;
     const nativeRef = useRef(null);
+    const currentTimeRef = useRef(0);
+    const durationRef = useRef(0);
+    const isPlayingRef = useRef(false);
+    const wasPlayingRef = useRef(false);
+    // Force re-render for overlay state
+    const [currentTime, setCurrentTime] = React.useState(0);
+    const [duration, setDuration] = React.useState(0);
     useImperativeHandle(ref, () => ({
         play: async () => {
             await nativeRef.current?.play();
@@ -50,7 +61,45 @@ const TwoStepVideoView = forwardRef((props, ref) => {
             await nativeRef.current?.resetPanZoom();
         },
     }));
-    return <NativeView ref={nativeRef} {...props}/>;
+    const handleProgress = useCallback((event) => {
+        currentTimeRef.current = event.nativeEvent.currentTime;
+        durationRef.current = event.nativeEvent.duration;
+        setCurrentTime(event.nativeEvent.currentTime);
+        setDuration(event.nativeEvent.duration);
+        onProgress?.(event);
+    }, [onProgress]);
+    const handlePlaybackStatusChange = useCallback((event) => {
+        isPlayingRef.current = event.nativeEvent.status === 'playing';
+        onPlaybackStatusChange?.(event);
+    }, [onPlaybackStatusChange]);
+    // PlayheadBar callbacks
+    const handleSeekStart = useCallback(() => {
+        wasPlayingRef.current = isPlayingRef.current;
+        if (isPlayingRef.current) {
+            nativeRef.current?.pause();
+        }
+    }, []);
+    const handlePlayheadSeek = useCallback((time) => {
+        nativeRef.current?.seek(time);
+        currentTimeRef.current = time;
+        setCurrentTime(time);
+    }, []);
+    const handleSeekEnd = useCallback(() => {
+        if (wasPlayingRef.current) {
+            nativeRef.current?.play();
+        }
+    }, []);
+    // DoubleTapSkip callback
+    const handleDoubleTapSeek = useCallback((time) => {
+        nativeRef.current?.seek(time);
+        currentTimeRef.current = time;
+        setCurrentTime(time);
+    }, []);
+    return (<View style={[style, { overflow: 'hidden' }]}>
+        <NativeView ref={nativeRef} {...nativeProps} onProgress={handleProgress} onPlaybackStatusChange={handlePlaybackStatusChange} style={{ flex: 1 }}/>
+        {enableDoubleTapSkip && (<DoubleTapSkip currentTime={currentTime} duration={duration} skipInterval={doubleTapSkipInterval} onSeek={handleDoubleTapSeek}/>)}
+        {showPlayheadBar && (<PlayheadBar currentTime={currentTime} duration={duration} onSeekStart={handleSeekStart} onSeek={handlePlayheadSeek} onSeekEnd={handleSeekEnd}/>)}
+      </View>);
 });
 TwoStepVideoView.displayName = 'TwoStepVideoView';
 export default TwoStepVideoView;

package/build/ExpoTwoStepVideoView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoTwoStepVideoView.js","sourceRoot":"","sources":["../src/ExpoTwoStepVideoView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAoBhE,MAAM,UAAU,GAAyC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;AAE/F;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE9C,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,IAAI,EAAE,KAAK,IAAI,EAAE;YACf,MAAM,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;QAClC,CAAC;QACD,KAAK,EAAE,KAAK,IAAI,EAAE;YAChB,MAAM,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACnC,CAAC;QACD,IAAI,EAAE,KAAK,EAAE,IAAY,EAAE,EAAE;YAC3B,MAAM,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC;QACD,MAAM,EAAE,KAAK,IAAI,EAAE;YACjB,MAAM,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;QACpC,CAAC;QACD,eAAe,EAAE,KAAK,IAAI,EAAE;YAC1B,MAAM,KAAK,GAAG,MAAM,SAAS,CAAC,OAAO,EAAE,eAAe,EAAE,CAAC;YACzD,OAAO,KAAK,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC;QACrD,CAAC;QACD,eAAe,EAAE,KAAK,EAAE,KAA4B,EAAE,EAAE;YACtD,MAAM,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QACpF,CAAC;QACD,YAAY,EAAE,KAAK,IAAI,EAAE;YACvB,MAAM,SAAS,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC;QAC1C,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACnD,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,eAAe,gBAAgB,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\n\nimport { PanZoomState, TwoStepVideoViewProps, TwoStepVideoViewRef } from './ExpoTwoStepVideo.types';\n\n// Internal props type that includes the native ref\ntype NativeViewProps = TwoStepVideoViewProps & {\n  ref?: React.Ref<NativeViewRef>;\n};\n\n// Native view ref with native methods\ntype NativeViewRef = {\n  play: () => Promise<void>;\n  pause: () => Promise<void>;\n  seek: (time: number) => Promise<void>;\n  replay: () => Promise<void>;\n  getPanZoomState: () => Promise<PanZoomState>;\n  setPanZoomState: (panX?: number, panY?: number, zoomLevel?: number) => Promise<void>;\n  resetPanZoom: () => Promise<void>;\n};\n\nconst NativeView: React.ComponentType<NativeViewProps> = requireNativeView('ExpoTwoStepVideo');\n\n/**\n * Video player view that can play compositions and assets directly\n *\n * @example\n * ```tsx\n * const playerRef = useRef<TwoStepVideoViewRef>(null);\n *\n * // Play a composition (from mirrorVideo, trimVideo, etc.)\n * <TwoStepVideoView\n *   ref={playerRef}\n *   compositionId={composition.id}\n *   onPlaybackStatusChange={(e) => console.log(e.nativeEvent.status)}\n *   onProgress={(e) => setProgress(e.nativeEvent.progress)}\n *   style={{ width: '100%', height: 300 }}\n * />\n *\n * // Control playback\n * playerRef.current?.play();\n * playerRef.current?.pause();\n * playerRef.current?.seek(5.0);\n * ```\n */\nconst TwoStepVideoView = forwardRef<TwoStepVideoViewRef, TwoStepVideoViewProps>(\n  (props, ref) => {\n    const nativeRef = useRef<NativeViewRef>(null);\n\n    useImperativeHandle(ref, () => ({\n      play: async () => {\n        await nativeRef.current?.play();\n      },\n      pause: async () => {\n        await nativeRef.current?.pause();\n      },\n      seek: async (time: number) => {\n        await nativeRef.current?.seek(time);\n      },\n      replay: async () => {\n        await nativeRef.current?.replay();\n      },\n      getPanZoomState: async () => {\n        const state = await nativeRef.current?.getPanZoomState();\n        return state ?? { panX: 0, panY: 0, zoomLevel: 1 };\n      },\n      setPanZoomState: async (state: Partial<PanZoomState>) => {\n        await nativeRef.current?.setPanZoomState(state.panX, state.panY, state.zoomLevel);\n      },\n      resetPanZoom: async () => {\n        await nativeRef.current?.resetPanZoom();\n      },\n    }));\n\n    return <NativeView ref={nativeRef} {...props} />;\n  }\n);\n\nTwoStepVideoView.displayName = 'TwoStepVideoView';\n\nexport default TwoStepVideoView;\n"]}
+{"version":3,"file":"ExpoTwoStepVideoView.js","sourceRoot":"","sources":["../src/ExpoTwoStepVideoView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\nimport { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';\nimport { View } from 'react-native';\n\nimport { PanZoomState, TwoStepVideoViewProps, TwoStepVideoViewRef } from './ExpoTwoStepVideo.types';\nimport PlayheadBar from './components/PlayheadBar';\nimport DoubleTapSkip from './components/DoubleTapSkip';\n\n// Internal props type that includes the native ref\ntype NativeViewProps = TwoStepVideoViewProps & {\n  ref?: React.Ref<NativeViewRef>;\n};\n\n// Native view ref with native methods\ntype NativeViewRef = {\n  play: () => Promise<void>;\n  pause: () => Promise<void>;\n  seek: (time: number) => Promise<void>;\n  replay: () => Promise<void>;\n  getPanZoomState: () => Promise<PanZoomState>;\n  setPanZoomState: (panX?: number, panY?: number, zoomLevel?: number) => Promise<void>;\n  resetPanZoom: () => Promise<void>;\n};\n\nconst NativeView: React.ComponentType<NativeViewProps> = requireNativeView('ExpoTwoStepVideo');\n\n/**\n * Video player view that can play compositions and assets directly\n *\n * @example\n * ```tsx\n * const playerRef = useRef<TwoStepVideoViewRef>(null);\n *\n * // Play a composition (from mirrorVideo, trimVideo, etc.)\n * <TwoStepVideoView\n *   ref={playerRef}\n *   compositionId={composition.id}\n *   onPlaybackStatusChange={(e) => console.log(e.nativeEvent.status)}\n *   onProgress={(e) => setProgress(e.nativeEvent.progress)}\n *   style={{ width: '100%', height: 300 }}\n * />\n *\n * // Control playback\n * playerRef.current?.play();\n * playerRef.current?.pause();\n * playerRef.current?.seek(5.0);\n * ```\n */\nconst TwoStepVideoView = forwardRef<TwoStepVideoViewRef, TwoStepVideoViewProps>(\n  (props, ref) => {\n    const {\n      showPlayheadBar = true,\n      enableDoubleTapSkip = true,\n      doubleTapSkipInterval = 5,\n      onProgress,\n      onPlaybackStatusChange,\n      style,\n      ...nativeProps\n    } = props;\n\n    const nativeRef = useRef<NativeViewRef>(null);\n    const currentTimeRef = useRef(0);\n    const durationRef = useRef(0);\n    const isPlayingRef = useRef(false);\n    const wasPlayingRef = useRef(false);\n\n    // Force re-render for overlay state\n    const [currentTime, setCurrentTime] = React.useState(0);\n    const [duration, setDuration] = React.useState(0);\n\n    useImperativeHandle(ref, () => ({\n      play: async () => {\n        await nativeRef.current?.play();\n      },\n      pause: async () => {\n        await nativeRef.current?.pause();\n      },\n      seek: async (time: number) => {\n        await nativeRef.current?.seek(time);\n      },\n      replay: async () => {\n        await nativeRef.current?.replay();\n      },\n      getPanZoomState: async () => {\n        const state = await nativeRef.current?.getPanZoomState();\n        return state ?? { panX: 0, panY: 0, zoomLevel: 1 };\n      },\n      setPanZoomState: async (state: Partial<PanZoomState>) => {\n        await nativeRef.current?.setPanZoomState(state.panX, state.panY, state.zoomLevel);\n      },\n      resetPanZoom: async () => {\n        await nativeRef.current?.resetPanZoom();\n      },\n    }));\n\n    const handleProgress = useCallback(\n      (event: { nativeEvent: { currentTime: number; duration: number; progress: number } }) => {\n        currentTimeRef.current = event.nativeEvent.currentTime;\n        durationRef.current = event.nativeEvent.duration;\n        setCurrentTime(event.nativeEvent.currentTime);\n        setDuration(event.nativeEvent.duration);\n        onProgress?.(event);\n      },\n      [onProgress]\n    );\n\n    const handlePlaybackStatusChange = useCallback(\n      (event: { nativeEvent: { status: string; time?: number } }) => {\n        isPlayingRef.current = event.nativeEvent.status === 'playing';\n        onPlaybackStatusChange?.(event as any);\n      },\n      [onPlaybackStatusChange]\n    );\n\n    // PlayheadBar callbacks\n    const handleSeekStart = useCallback(() => {\n      wasPlayingRef.current = isPlayingRef.current;\n      if (isPlayingRef.current) {\n        nativeRef.current?.pause();\n      }\n    }, []);\n\n    const handlePlayheadSeek = useCallback((time: number) => {\n      nativeRef.current?.seek(time);\n      currentTimeRef.current = time;\n      setCurrentTime(time);\n    }, []);\n\n    const handleSeekEnd = useCallback(() => {\n      if (wasPlayingRef.current) {\n        nativeRef.current?.play();\n      }\n    }, []);\n\n    // DoubleTapSkip callback\n    const handleDoubleTapSeek = useCallback((time: number) => {\n      nativeRef.current?.seek(time);\n      currentTimeRef.current = time;\n      setCurrentTime(time);\n    }, []);\n\n    return (\n      <View style={[style, { overflow: 'hidden' }]}>\n        <NativeView\n          ref={nativeRef}\n          {...nativeProps}\n          onProgress={handleProgress}\n          onPlaybackStatusChange={handlePlaybackStatusChange}\n          style={{ flex: 1 }}\n        />\n        {enableDoubleTapSkip && (\n          <DoubleTapSkip\n            currentTime={currentTime}\n            duration={duration}\n            skipInterval={doubleTapSkipInterval}\n            onSeek={handleDoubleTapSeek}\n          />\n        )}\n        {showPlayheadBar && (\n          <PlayheadBar\n            currentTime={currentTime}\n            duration={duration}\n            onSeekStart={handleSeekStart}\n            onSeek={handlePlayheadSeek}\n            onSeekEnd={handleSeekEnd}\n          />\n        )}\n      </View>\n    );\n  }\n);\n\nTwoStepVideoView.displayName = 'TwoStepVideoView';\n\nexport default TwoStepVideoView;\n"]}

package/build/components/DoubleTapSkip.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type DoubleTapSkipProps = {
+    currentTime: number;
+    duration: number;
+    skipInterval: number;
+    onSeek: (time: number) => void;
+};
+export default function DoubleTapSkip({ currentTime, duration, skipInterval, onSeek, }: DoubleTapSkipProps): React.JSX.Element;
+//# sourceMappingURL=DoubleTapSkip.d.ts.map

package/build/components/DoubleTapSkip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleTapSkip.d.ts","sourceRoot":"","sources":["../../src/components/DoubleTapSkip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,MAAM,GACP,EAAE,kBAAkB,qBA2FpB"}

package/build/components/DoubleTapSkip.js

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { useRef, useCallback } from 'react';
+import { View, StyleSheet, TouchableWithoutFeedback, Animated, Text, } from 'react-native';
+const DOUBLE_TAP_DELAY = 300;
+export default function DoubleTapSkip({ currentTime, duration, skipInterval, onSeek, }) {
+    const currentTimeRef = useRef(currentTime);
+    currentTimeRef.current = currentTime;
+    const durationRef = useRef(duration);
+    durationRef.current = duration;
+    const lastTapLeft = useRef(0);
+    const lastTapRight = useRef(0);
+    const leftTimeoutRef = useRef(null);
+    const rightTimeoutRef = useRef(null);
+    const leftOpacity = useRef(new Animated.Value(0)).current;
+    const rightOpacity = useRef(new Animated.Value(0)).current;
+    const showFeedback = useCallback((opacity) => {
+        opacity.setValue(1);
+        Animated.timing(opacity, {
+            toValue: 0,
+            duration: 600,
+            delay: 200,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    const handleLeftTap = useCallback(() => {
+        const now = Date.now();
+        if (now - lastTapLeft.current < DOUBLE_TAP_DELAY) {
+            // Double tap detected
+            if (leftTimeoutRef.current) {
+                clearTimeout(leftTimeoutRef.current);
+                leftTimeoutRef.current = null;
+            }
+            const newTime = Math.max(0, currentTimeRef.current - skipInterval);
+            onSeek(newTime);
+            showFeedback(leftOpacity);
+            lastTapLeft.current = 0;
+        }
+        else {
+            lastTapLeft.current = now;
+            leftTimeoutRef.current = setTimeout(() => {
+                lastTapLeft.current = 0;
+                leftTimeoutRef.current = null;
+            }, DOUBLE_TAP_DELAY);
+        }
+    }, [skipInterval, onSeek, showFeedback, leftOpacity]);
+    const handleRightTap = useCallback(() => {
+        const now = Date.now();
+        if (now - lastTapRight.current < DOUBLE_TAP_DELAY) {
+            // Double tap detected
+            if (rightTimeoutRef.current) {
+                clearTimeout(rightTimeoutRef.current);
+                rightTimeoutRef.current = null;
+            }
+            const newTime = Math.min(durationRef.current, currentTimeRef.current + skipInterval);
+            onSeek(newTime);
+            showFeedback(rightOpacity);
+            lastTapRight.current = 0;
+        }
+        else {
+            lastTapRight.current = now;
+            rightTimeoutRef.current = setTimeout(() => {
+                lastTapRight.current = 0;
+                rightTimeoutRef.current = null;
+            }, DOUBLE_TAP_DELAY);
+        }
+    }, [skipInterval, onSeek, showFeedback, rightOpacity]);
+    return (<View style={styles.container} pointerEvents="box-none">
+      <TouchableWithoutFeedback onPress={handleLeftTap}>
+        <View style={styles.half}>
+          <Animated.View style={[styles.feedback, { opacity: leftOpacity }]}>
+            <View style={styles.feedbackCircle}>
+              <Text style={styles.arrowText}>{'<<'}</Text>
+              <Text style={styles.skipText}>{skipInterval}s</Text>
+            </View>
+          </Animated.View>
+        </View>
+      </TouchableWithoutFeedback>
+      <TouchableWithoutFeedback onPress={handleRightTap}>
+        <View style={styles.half}>
+          <Animated.View style={[styles.feedback, { opacity: rightOpacity }]}>
+            <View style={styles.feedbackCircle}>
+              <Text style={styles.arrowText}>{'>>'}</Text>
+              <Text style={styles.skipText}>{skipInterval}s</Text>
+            </View>
+          </Animated.View>
+        </View>
+      </TouchableWithoutFeedback>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        flexDirection: 'row',
+    },
+    half: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    feedback: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    feedbackCircle: {
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        backgroundColor: 'rgba(0,0,0,0.4)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    arrowText: {
+        color: '#FFFFFF',
+        fontSize: 20,
+        fontWeight: '700',
+    },
+    skipText: {
+        color: '#FFFFFF',
+        fontSize: 12,
+        fontWeight: '600',
+        marginTop: 2,
+    },
+});
+//# sourceMappingURL=DoubleTapSkip.js.map

package/build/components/DoubleTapSkip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleTapSkip.js","sourceRoot":"","sources":["../../src/components/DoubleTapSkip.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useRef, useCallback } from 'react';\nimport {\n  View,\n  StyleSheet,\n  TouchableWithoutFeedback,\n  Animated,\n  Text,\n} from 'react-native';\n\nexport type DoubleTapSkipProps = {\n  currentTime: number;\n  duration: number;\n  skipInterval: number;\n  onSeek: (time: number) => void;\n};\n\nconst DOUBLE_TAP_DELAY = 300;\n\nexport default function DoubleTapSkip({\n  currentTime,\n  duration,\n  skipInterval,\n  onSeek,\n}: DoubleTapSkipProps) {\n  const currentTimeRef = useRef(currentTime);\n  currentTimeRef.current = currentTime;\n\n  const durationRef = useRef(duration);\n  durationRef.current = duration;\n\n  const lastTapLeft = useRef(0);\n  const lastTapRight = useRef(0);\n  const leftTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rightTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const leftOpacity = useRef(new Animated.Value(0)).current;\n  const rightOpacity = useRef(new Animated.Value(0)).current;\n\n  const showFeedback = useCallback((opacity: Animated.Value) => {\n    opacity.setValue(1);\n    Animated.timing(opacity, {\n      toValue: 0,\n      duration: 600,\n      delay: 200,\n      useNativeDriver: true,\n    }).start();\n  }, []);\n\n  const handleLeftTap = useCallback(() => {\n    const now = Date.now();\n    if (now - lastTapLeft.current < DOUBLE_TAP_DELAY) {\n      // Double tap detected\n      if (leftTimeoutRef.current) {\n        clearTimeout(leftTimeoutRef.current);\n        leftTimeoutRef.current = null;\n      }\n      const newTime = Math.max(0, currentTimeRef.current - skipInterval);\n      onSeek(newTime);\n      showFeedback(leftOpacity);\n      lastTapLeft.current = 0;\n    } else {\n      lastTapLeft.current = now;\n      leftTimeoutRef.current = setTimeout(() => {\n        lastTapLeft.current = 0;\n        leftTimeoutRef.current = null;\n      }, DOUBLE_TAP_DELAY);\n    }\n  }, [skipInterval, onSeek, showFeedback, leftOpacity]);\n\n  const handleRightTap = useCallback(() => {\n    const now = Date.now();\n    if (now - lastTapRight.current < DOUBLE_TAP_DELAY) {\n      // Double tap detected\n      if (rightTimeoutRef.current) {\n        clearTimeout(rightTimeoutRef.current);\n        rightTimeoutRef.current = null;\n      }\n      const newTime = Math.min(durationRef.current, currentTimeRef.current + skipInterval);\n      onSeek(newTime);\n      showFeedback(rightOpacity);\n      lastTapRight.current = 0;\n    } else {\n      lastTapRight.current = now;\n      rightTimeoutRef.current = setTimeout(() => {\n        lastTapRight.current = 0;\n        rightTimeoutRef.current = null;\n      }, DOUBLE_TAP_DELAY);\n    }\n  }, [skipInterval, onSeek, showFeedback, rightOpacity]);\n\n  return (\n    <View style={styles.container} pointerEvents=\"box-none\">\n      <TouchableWithoutFeedback onPress={handleLeftTap}>\n        <View style={styles.half}>\n          <Animated.View style={[styles.feedback, { opacity: leftOpacity }]}>\n            <View style={styles.feedbackCircle}>\n              <Text style={styles.arrowText}>{'<<'}</Text>\n              <Text style={styles.skipText}>{skipInterval}s</Text>\n            </View>\n          </Animated.View>\n        </View>\n      </TouchableWithoutFeedback>\n      <TouchableWithoutFeedback onPress={handleRightTap}>\n        <View style={styles.half}>\n          <Animated.View style={[styles.feedback, { opacity: rightOpacity }]}>\n            <View style={styles.feedbackCircle}>\n              <Text style={styles.arrowText}>{'>>'}</Text>\n              <Text style={styles.skipText}>{skipInterval}s</Text>\n            </View>\n          </Animated.View>\n        </View>\n      </TouchableWithoutFeedback>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    ...StyleSheet.absoluteFillObject,\n    flexDirection: 'row',\n  },\n  half: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  feedback: {\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  feedbackCircle: {\n    width: 64,\n    height: 64,\n    borderRadius: 32,\n    backgroundColor: 'rgba(0,0,0,0.4)',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  arrowText: {\n    color: '#FFFFFF',\n    fontSize: 20,\n    fontWeight: '700',\n  },\n  skipText: {\n    color: '#FFFFFF',\n    fontSize: 12,\n    fontWeight: '600',\n    marginTop: 2,\n  },\n});\n"]}

package/build/components/PlayheadBar.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type PlayheadBarProps = {
+    currentTime: number;
+    duration: number;
+    onSeekStart: () => void;
+    onSeek: (time: number) => void;
+    onSeekEnd: () => void;
+};
+export default function PlayheadBar({ currentTime, duration, onSeekStart, onSeek, onSeekEnd, }: PlayheadBarProps): React.JSX.Element;
+//# sourceMappingURL=PlayheadBar.d.ts.map

package/build/components/PlayheadBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayheadBar.d.ts","sourceRoot":"","sources":["../../src/components/PlayheadBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAOF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,WAAW,EACX,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,gBAAgB,qBA6HlB"}

package/build/components/PlayheadBar.js

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { useRef, useCallback, useEffect } from 'react';
+import { View, StyleSheet, PanResponder, Animated, } from 'react-native';
+const COLLAPSED_HEIGHT = 2;
+const EXPANDED_HEIGHT = 4;
+const THUMB_SIZE = 14;
+const HIT_SLOP_HEIGHT = 30;
+export default function PlayheadBar({ currentTime, duration, onSeekStart, onSeek, onSeekEnd, }) {
+    const containerWidthRef = useRef(0);
+    const currentTimeRef = useRef(currentTime);
+    const durationRef = useRef(duration);
+    const isScrubbing = useRef(false);
+    const barHeight = useRef(new Animated.Value(COLLAPSED_HEIGHT)).current;
+    const thumbScale = useRef(new Animated.Value(0)).current;
+    const progress = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        currentTimeRef.current = currentTime;
+        if (!isScrubbing.current && duration > 0) {
+            progress.setValue(currentTime / duration);
+        }
+    }, [currentTime, duration, progress]);
+    useEffect(() => {
+        durationRef.current = duration;
+    }, [duration]);
+    const expand = useCallback(() => {
+        Animated.parallel([
+            Animated.timing(barHeight, {
+                toValue: EXPANDED_HEIGHT,
+                duration: 150,
+                useNativeDriver: false,
+            }),
+            Animated.timing(thumbScale, {
+                toValue: 1,
+                duration: 150,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    }, [barHeight, thumbScale]);
+    const collapse = useCallback(() => {
+        Animated.parallel([
+            Animated.timing(barHeight, {
+                toValue: COLLAPSED_HEIGHT,
+                duration: 150,
+                useNativeDriver: false,
+            }),
+            Animated.timing(thumbScale, {
+                toValue: 0,
+                duration: 150,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    }, [barHeight, thumbScale]);
+    const clampProgress = useCallback((pageX) => {
+        const width = containerWidthRef.current;
+        if (width <= 0 || durationRef.current <= 0)
+            return 0;
+        const clamped = Math.max(0, Math.min(1, pageX / width));
+        return clamped;
+    }, []);
+    const panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (evt) => {
+            isScrubbing.current = true;
+            expand();
+            onSeekStart();
+            const p = clampProgress(evt.nativeEvent.locationX);
+            progress.setValue(p);
+            onSeek(p * durationRef.current);
+        },
+        onPanResponderMove: (evt) => {
+            const width = containerWidthRef.current;
+            if (width <= 0)
+                return;
+            const p = Math.max(0, Math.min(1, evt.nativeEvent.locationX / width));
+            progress.setValue(p);
+            onSeek(p * durationRef.current);
+        },
+        onPanResponderRelease: () => {
+            isScrubbing.current = false;
+            collapse();
+            onSeekEnd();
+        },
+        onPanResponderTerminate: () => {
+            isScrubbing.current = false;
+            collapse();
+            onSeekEnd();
+        },
+    })).current;
+    const onLayout = useCallback((e) => {
+        containerWidthRef.current = e.nativeEvent.layout.width;
+    }, []);
+    const filledWidth = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0%', '100%'],
+    });
+    return (<View style={styles.container} pointerEvents="box-none">
+      <View style={styles.hitArea} onLayout={onLayout} {...panResponder.panHandlers}>
+        <Animated.View style={[styles.track, { height: barHeight }]}>
+          <Animated.View style={[styles.filled, { width: filledWidth }]}/>
+        </Animated.View>
+        <Animated.View style={[
+            styles.thumb,
+            {
+                transform: [{ scale: thumbScale }],
+                left: progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [-(THUMB_SIZE / 2), containerWidthRef.current > 0 ? containerWidthRef.current - THUMB_SIZE / 2 : 0],
+                }),
+            },
+        ]}/>
+      </View>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    hitArea: {
+        height: HIT_SLOP_HEIGHT,
+        justifyContent: 'flex-end',
+    },
+    track: {
+        width: '100%',
+        backgroundColor: 'rgba(255,255,255,0.25)',
+        overflow: 'hidden',
+    },
+    filled: {
+        height: '100%',
+        backgroundColor: 'rgba(255,255,255,0.7)',
+    },
+    thumb: {
+        position: 'absolute',
+        bottom: -(THUMB_SIZE / 2) + COLLAPSED_HEIGHT / 2,
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+        borderRadius: THUMB_SIZE / 2,
+        backgroundColor: '#FFFFFF',
+    },
+});
+//# sourceMappingURL=PlayheadBar.js.map

package/build/components/PlayheadBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayheadBar.js","sourceRoot":"","sources":["../../src/components/PlayheadBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useRef, useCallback, useEffect } from 'react';\nimport {\n  View,\n  StyleSheet,\n  PanResponder,\n  Animated,\n  LayoutChangeEvent,\n} from 'react-native';\n\nexport type PlayheadBarProps = {\n  currentTime: number;\n  duration: number;\n  onSeekStart: () => void;\n  onSeek: (time: number) => void;\n  onSeekEnd: () => void;\n};\n\nconst COLLAPSED_HEIGHT = 2;\nconst EXPANDED_HEIGHT = 4;\nconst THUMB_SIZE = 14;\nconst HIT_SLOP_HEIGHT = 30;\n\nexport default function PlayheadBar({\n  currentTime,\n  duration,\n  onSeekStart,\n  onSeek,\n  onSeekEnd,\n}: PlayheadBarProps) {\n  const containerWidthRef = useRef(0);\n  const currentTimeRef = useRef(currentTime);\n  const durationRef = useRef(duration);\n  const isScrubbing = useRef(false);\n\n  const barHeight = useRef(new Animated.Value(COLLAPSED_HEIGHT)).current;\n  const thumbScale = useRef(new Animated.Value(0)).current;\n  const progress = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    currentTimeRef.current = currentTime;\n    if (!isScrubbing.current && duration > 0) {\n      progress.setValue(currentTime / duration);\n    }\n  }, [currentTime, duration, progress]);\n\n  useEffect(() => {\n    durationRef.current = duration;\n  }, [duration]);\n\n  const expand = useCallback(() => {\n    Animated.parallel([\n      Animated.timing(barHeight, {\n        toValue: EXPANDED_HEIGHT,\n        duration: 150,\n        useNativeDriver: false,\n      }),\n      Animated.timing(thumbScale, {\n        toValue: 1,\n        duration: 150,\n        useNativeDriver: true,\n      }),\n    ]).start();\n  }, [barHeight, thumbScale]);\n\n  const collapse = useCallback(() => {\n    Animated.parallel([\n      Animated.timing(barHeight, {\n        toValue: COLLAPSED_HEIGHT,\n        duration: 150,\n        useNativeDriver: false,\n      }),\n      Animated.timing(thumbScale, {\n        toValue: 0,\n        duration: 150,\n        useNativeDriver: true,\n      }),\n    ]).start();\n  }, [barHeight, thumbScale]);\n\n  const clampProgress = useCallback((pageX: number): number => {\n    const width = containerWidthRef.current;\n    if (width <= 0 || durationRef.current <= 0) return 0;\n    const clamped = Math.max(0, Math.min(1, pageX / width));\n    return clamped;\n  }, []);\n\n  const panResponder = useRef(\n    PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n      onMoveShouldSetPanResponder: () => true,\n      onPanResponderGrant: (evt) => {\n        isScrubbing.current = true;\n        expand();\n        onSeekStart();\n\n        const p = clampProgress(evt.nativeEvent.locationX);\n        progress.setValue(p);\n        onSeek(p * durationRef.current);\n      },\n      onPanResponderMove: (evt) => {\n        const width = containerWidthRef.current;\n        if (width <= 0) return;\n        const p = Math.max(0, Math.min(1, evt.nativeEvent.locationX / width));\n        progress.setValue(p);\n        onSeek(p * durationRef.current);\n      },\n      onPanResponderRelease: () => {\n        isScrubbing.current = false;\n        collapse();\n        onSeekEnd();\n      },\n      onPanResponderTerminate: () => {\n        isScrubbing.current = false;\n        collapse();\n        onSeekEnd();\n      },\n    })\n  ).current;\n\n  const onLayout = useCallback((e: LayoutChangeEvent) => {\n    containerWidthRef.current = e.nativeEvent.layout.width;\n  }, []);\n\n  const filledWidth = progress.interpolate({\n    inputRange: [0, 1],\n    outputRange: ['0%', '100%'],\n  });\n\n  return (\n    <View style={styles.container} pointerEvents=\"box-none\">\n      <View\n        style={styles.hitArea}\n        onLayout={onLayout}\n        {...panResponder.panHandlers}\n      >\n        <Animated.View style={[styles.track, { height: barHeight }]}>\n          <Animated.View style={[styles.filled, { width: filledWidth }]} />\n        </Animated.View>\n        <Animated.View\n          style={[\n            styles.thumb,\n            {\n              transform: [{ scale: thumbScale }],\n              left: progress.interpolate({\n                inputRange: [0, 1],\n                outputRange: [-(THUMB_SIZE / 2), containerWidthRef.current > 0 ? containerWidthRef.current - THUMB_SIZE / 2 : 0],\n              }),\n            },\n          ]}\n        />\n      </View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n  hitArea: {\n    height: HIT_SLOP_HEIGHT,\n    justifyContent: 'flex-end',\n  },\n  track: {\n    width: '100%',\n    backgroundColor: 'rgba(255,255,255,0.25)',\n    overflow: 'hidden',\n  },\n  filled: {\n    height: '100%',\n    backgroundColor: 'rgba(255,255,255,0.7)',\n  },\n  thumb: {\n    position: 'absolute',\n    bottom: -(THUMB_SIZE / 2) + COLLAPSED_HEIGHT / 2,\n    width: THUMB_SIZE,\n    height: THUMB_SIZE,\n    borderRadius: THUMB_SIZE / 2,\n    backgroundColor: '#FFFFFF',\n  },\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movementinfra/expo-twostep-video",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "Minimal video editing for React Native using AVFoundation",
   "main": "build/index.js",
   "types": "build/index.d.ts",