@movementinfra/expo-twostep-video 0.1.8 → 0.1.10

package/build/ExpoTwoStepVideo.types.d.ts

@@ -62,4 +62,20 @@ export type TwoStepVideoViewRef = {
     /** Restart playback from the beginning */
     replay: () => Promise<void>;
 };
+/**
+ * Video player controller view props (with native controls)
+ */
+export type TwoStepPlayerControllerViewProps = TwoStepVideoViewProps & {
+    /** Show native playback controls (default: true) */
+    showsPlaybackControls?: boolean;
+};
+/**
+ * Ref handle for video player controller view (with fullscreen support)
+ */
+export type TwoStepPlayerControllerViewRef = TwoStepVideoViewRef & {
+    /** Enter fullscreen mode */
+    enterFullscreen: () => Promise<void>;
+    /** Exit fullscreen mode */
+    exitFullscreen: () => Promise<void>;
+};
 //# sourceMappingURL=ExpoTwoStepVideo.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExpoTwoStepVideo.types.d.ts","sourceRoot":"","sources":["../src/ExpoTwoStepVideo.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,mBAAmB,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E,iDAAiD;IACjD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,aAAa,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,wEAAwE;IACxE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IACvD,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,qBAAqB;IACrB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,qBAAqB;IACrB,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,yCAAyC;IACzC,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,0CAA0C;IAC1C,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"ExpoTwoStepVideo.types.d.ts","sourceRoot":"","sources":["../src/ExpoTwoStepVideo.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,mBAAmB,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E,iDAAiD;IACjD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,aAAa,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,wEAAwE;IACxE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;IACvD,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,qBAAqB;IACrB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,qBAAqB;IACrB,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,yCAAyC;IACzC,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,0CAA0C;IAC1C,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,gCAAgC,GAAG,qBAAqB,GAAG;IACrE,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,8BAA8B,GAAG,mBAAmB,GAAG;IACjE,4BAA4B;IAC5B,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,2BAA2B;IAC3B,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC,CAAC"}

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 * 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  /** 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  /** View style */\n  style?: StyleProp<ViewStyle>;\n};\n\n/**\n * Ref handle for video player view\n */\nexport type TwoStepVideoViewRef = {\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"]}
+{"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 * 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  /** 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  /** View style */\n  style?: StyleProp<ViewStyle>;\n};\n\n/**\n * Ref handle for video player view\n */\nexport type TwoStepVideoViewRef = {\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 * 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 */\nexport type TwoStepPlayerControllerViewRef = TwoStepVideoViewRef & {\n  /** Enter fullscreen mode */\n  enterFullscreen: () => Promise<void>;\n  /** Exit fullscreen mode */\n  exitFullscreen: () => Promise<void>;\n};\n"]}

package/build/TwoStepPlayerControllerView.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { TwoStepPlayerControllerViewRef } from './ExpoTwoStepVideo.types';
+/**
+ * Video player view with native iOS controls and fullscreen support
+ *
+ * Uses AVPlayerViewController under the hood for native playback controls,
+ * AirPlay support, picture-in-picture, and fullscreen mode.
+ *
+ * @example
+ * ```tsx
+ * const playerRef = useRef<TwoStepPlayerControllerViewRef>(null);
+ *
+ * // Play a video with native controls
+ * <TwoStepPlayerControllerView
+ *   ref={playerRef}
+ *   assetId={asset.id}
+ *   showsPlaybackControls={true}
+ *   onProgress={(e) => setProgress(e.nativeEvent.progress)}
+ *   style={{ width: '100%', height: 300 }}
+ * />
+ *
+ * // Enter fullscreen mode
+ * playerRef.current?.enterFullscreen();
+ * ```
+ */
+declare const TwoStepPlayerControllerView: React.ForwardRefExoticComponent<import("./ExpoTwoStepVideo.types").TwoStepVideoViewProps & {
+    showsPlaybackControls?: boolean;
+} & React.RefAttributes<TwoStepPlayerControllerViewRef>>;
+export default TwoStepPlayerControllerView;
+//# sourceMappingURL=TwoStepPlayerControllerView.d.ts.map

package/build/TwoStepPlayerControllerView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoStepPlayerControllerView.d.ts","sourceRoot":"","sources":["../src/TwoStepPlayerControllerView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAoC,8BAA8B,EAAE,MAAM,0BAA0B,CAAC;AAmB5G;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,2BAA2B;;wDA2BhC,CAAC;AAIF,eAAe,2BAA2B,CAAC"}

package/build/TwoStepPlayerControllerView.js

@@ -0,0 +1,54 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+const NativeView = requireNativeView('ExpoTwoStepVideo_ExpoTwoStepPlayerControllerView');
+/**
+ * Video player view with native iOS controls and fullscreen support
+ *
+ * Uses AVPlayerViewController under the hood for native playback controls,
+ * AirPlay support, picture-in-picture, and fullscreen mode.
+ *
+ * @example
+ * ```tsx
+ * const playerRef = useRef<TwoStepPlayerControllerViewRef>(null);
+ *
+ * // Play a video with native controls
+ * <TwoStepPlayerControllerView
+ *   ref={playerRef}
+ *   assetId={asset.id}
+ *   showsPlaybackControls={true}
+ *   onProgress={(e) => setProgress(e.nativeEvent.progress)}
+ *   style={{ width: '100%', height: 300 }}
+ * />
+ *
+ * // Enter fullscreen mode
+ * playerRef.current?.enterFullscreen();
+ * ```
+ */
+const TwoStepPlayerControllerView = forwardRef((props, ref) => {
+    const nativeRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        play: async () => {
+            await nativeRef.current?.play();
+        },
+        pause: async () => {
+            await nativeRef.current?.pause();
+        },
+        seek: async (time) => {
+            await nativeRef.current?.seek(time);
+        },
+        replay: async () => {
+            await nativeRef.current?.replay();
+        },
+        enterFullscreen: async () => {
+            await nativeRef.current?.enterFullscreen();
+        },
+        exitFullscreen: async () => {
+            await nativeRef.current?.exitFullscreen();
+        },
+    }));
+    return <NativeView ref={nativeRef} {...props}/>;
+});
+TwoStepPlayerControllerView.displayName = 'TwoStepPlayerControllerView';
+export default TwoStepPlayerControllerView;
+//# sourceMappingURL=TwoStepPlayerControllerView.js.map

package/build/TwoStepPlayerControllerView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoStepPlayerControllerView.js","sourceRoot":"","sources":["../src/TwoStepPlayerControllerView.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;AAmBhE,MAAM,UAAU,GAAyC,iBAAiB,CAAC,kDAAkD,CAAC,CAAC;AAE/H;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,2BAA2B,GAAG,UAAU,CAC5C,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,SAAS,CAAC,OAAO,EAAE,eAAe,EAAE,CAAC;QAC7C,CAAC;QACD,cAAc,EAAE,KAAK,IAAI,EAAE;YACzB,MAAM,SAAS,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;QAC5C,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,2BAA2B,CAAC,WAAW,GAAG,6BAA6B,CAAC;AAExE,eAAe,2BAA2B,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\n\nimport { TwoStepPlayerControllerViewProps, TwoStepPlayerControllerViewRef } from './ExpoTwoStepVideo.types';\n\n// Internal props type that includes the native ref\ntype NativeViewProps = TwoStepPlayerControllerViewProps & {\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  enterFullscreen: () => Promise<void>;\n  exitFullscreen: () => Promise<void>;\n};\n\nconst NativeView: React.ComponentType<NativeViewProps> = requireNativeView('ExpoTwoStepVideo_ExpoTwoStepPlayerControllerView');\n\n/**\n * Video player view with native iOS controls and fullscreen support\n *\n * Uses AVPlayerViewController under the hood for native playback controls,\n * AirPlay support, picture-in-picture, and fullscreen mode.\n *\n * @example\n * ```tsx\n * const playerRef = useRef<TwoStepPlayerControllerViewRef>(null);\n *\n * // Play a video with native controls\n * <TwoStepPlayerControllerView\n *   ref={playerRef}\n *   assetId={asset.id}\n *   showsPlaybackControls={true}\n *   onProgress={(e) => setProgress(e.nativeEvent.progress)}\n *   style={{ width: '100%', height: 300 }}\n * />\n *\n * // Enter fullscreen mode\n * playerRef.current?.enterFullscreen();\n * ```\n */\nconst TwoStepPlayerControllerView = forwardRef<TwoStepPlayerControllerViewRef, TwoStepPlayerControllerViewProps>(\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      enterFullscreen: async () => {\n        await nativeRef.current?.enterFullscreen();\n      },\n      exitFullscreen: async () => {\n        await nativeRef.current?.exitFullscreen();\n      },\n    }));\n\n    return <NativeView ref={nativeRef} {...props} />;\n  }\n);\n\nTwoStepPlayerControllerView.displayName = 'TwoStepPlayerControllerView';\n\nexport default TwoStepPlayerControllerView;\n"]}

package/build/VideoScrubber.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { VideoScrubberProps, VideoScrubberRef } from './VideoScrubber.types';
+/**
+ * Video scrubber/trimmer component with thumbnail strip and draggable handles
+ *
+ * @example
+ * ```tsx
+ * <VideoScrubber
+ *   assetId={asset.id}
+ *   duration={asset.duration}
+ *   currentTime={currentTime}
+ *   startTime={trimStart}
+ *   endTime={trimEnd}
+ *   onStartTimeChange={setTrimStart}
+ *   onEndTimeChange={setTrimEnd}
+ *   onScrubbing={(time) => playerRef.current?.seek(time)}
+ * />
+ * ```
+ */
+declare const VideoScrubber: React.ForwardRefExoticComponent<VideoScrubberProps & React.RefAttributes<VideoScrubberRef>>;
+export default VideoScrubber;
+//# sourceMappingURL=VideoScrubber.d.ts.map

package/build/VideoScrubber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoScrubber.d.ts","sourceRoot":"","sources":["../src/VideoScrubber.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAsB,MAAM,uBAAuB,CAAC;AAYjG;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,aAAa,6FAkdjB,CAAC;AAuGH,eAAe,aAAa,CAAC"}

package/build/VideoScrubber.js

@@ -0,0 +1,489 @@
+import * as React from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { View, Image, StyleSheet, PanResponder, Animated, } from 'react-native';
+import ExpoTwoStepVideoModule from './ExpoTwoStepVideoModule';
+const DEFAULT_THEME = {
+    handleColor: '#FFD700',
+    selectedRegionColor: 'rgba(255,215,0,0.2)',
+    playheadColor: '#FFFFFF',
+    backgroundColor: '#1c1c1e',
+    dimmedColor: 'rgba(0,0,0,0.6)',
+    borderColor: '#FFD700',
+};
+/**
+ * Video scrubber/trimmer component with thumbnail strip and draggable handles
+ *
+ * @example
+ * ```tsx
+ * <VideoScrubber
+ *   assetId={asset.id}
+ *   duration={asset.duration}
+ *   currentTime={currentTime}
+ *   startTime={trimStart}
+ *   endTime={trimEnd}
+ *   onStartTimeChange={setTrimStart}
+ *   onEndTimeChange={setTrimEnd}
+ *   onScrubbing={(time) => playerRef.current?.seek(time)}
+ * />
+ * ```
+ */
+const VideoScrubber = forwardRef((props, ref) => {
+    const { assetId, duration, currentTime, startTime, endTime, thumbnailCount = 10, thumbnailHeight = 50, onStartTimeChange, onEndTimeChange, onScrub, onScrubbing, onScrubEnd, minDuration = 0.5, style, disabled = false, theme: userTheme, showPlayhead = true, handleWidth = 20, } = props;
+    const theme = useMemo(() => ({ ...DEFAULT_THEME, ...userTheme }), [userTheme]);
+    const [thumbnails, setThumbnails] = useState([]);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    const [dragging, setDragging] = useState(null);
+    // Track current values during drag - synced with props when not dragging
+    const dragStartTimeRef = useRef(startTime);
+    const dragEndTimeRef = useRef(endTime);
+    const currentTimeRef = useRef(currentTime);
+    const durationRef = useRef(duration);
+    const containerWidthRef = useRef(containerWidth);
+    const handleWidthRef = useRef(handleWidth);
+    // Sync refs with props when they change from outside (e.g., new video loaded)
+    useEffect(() => {
+        if (!dragging) {
+            dragStartTimeRef.current = startTime;
+            dragEndTimeRef.current = endTime;
+        }
+    }, [startTime, endTime, dragging]);
+    // Keep other refs in sync
+    useEffect(() => {
+        currentTimeRef.current = currentTime;
+    }, [currentTime]);
+    useEffect(() => {
+        durationRef.current = duration;
+    }, [duration]);
+    useEffect(() => {
+        containerWidthRef.current = containerWidth;
+    }, [containerWidth]);
+    useEffect(() => {
+        handleWidthRef.current = handleWidth;
+    }, [handleWidth]);
+    // Calculate thumbnail times
+    const thumbnailTimes = useMemo(() => {
+        if (duration <= 0)
+            return [];
+        const count = Math.min(thumbnailCount, Math.max(1, Math.ceil(duration)));
+        const interval = duration / count;
+        return Array.from({ length: count }, (_, i) => i * interval + interval / 2);
+    }, [duration, thumbnailCount]);
+    // Load thumbnails
+    useEffect(() => {
+        if (!assetId || thumbnailTimes.length === 0 || duration <= 0) {
+            setThumbnails([]);
+            setIsLoading(false);
+            return;
+        }
+        let cancelled = false;
+        setIsLoading(true);
+        ExpoTwoStepVideoModule.generateThumbnails(assetId, thumbnailTimes, { width: thumbnailHeight * 1.5, height: thumbnailHeight })
+            .then((thumbs) => {
+            if (!cancelled) {
+                setThumbnails(thumbs);
+                setIsLoading(false);
+            }
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                console.error('Failed to generate thumbnails:', err);
+                setIsLoading(false);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [assetId, thumbnailTimes, thumbnailHeight, duration]);
+    // The content area is between the handles
+    const contentWidth = containerWidth > 0 ? containerWidth - handleWidth * 2 : 0;
+    // Convert time to position within the content area (between handles)
+    const timeToPosition = useCallback((time) => {
+        if (duration <= 0 || contentWidth <= 0)
+            return handleWidth;
+        return handleWidth + (time / duration) * contentWidth;
+    }, [duration, contentWidth, handleWidth]);
+    // Calculate positions
+    const startPosition = timeToPosition(startTime);
+    const endPosition = timeToPosition(endTime);
+    const playheadPosition = timeToPosition(currentTime);
+    // Handle layout change
+    const handleLayout = useCallback((e) => {
+        setContainerWidth(e.nativeEvent.layout.width);
+    }, []);
+    // Store callbacks in refs to avoid recreating PanResponder on every render
+    const onStartTimeChangeRef = useRef(onStartTimeChange);
+    const onEndTimeChangeRef = useRef(onEndTimeChange);
+    const onScrubRef = useRef(onScrub);
+    const onScrubbingRef = useRef(onScrubbing);
+    const onScrubEndRef = useRef(onScrubEnd);
+    useEffect(() => {
+        onStartTimeChangeRef.current = onStartTimeChange;
+        onEndTimeChangeRef.current = onEndTimeChange;
+        onScrubRef.current = onScrub;
+        onScrubbingRef.current = onScrubbing;
+        onScrubEndRef.current = onScrubEnd;
+    }, [onStartTimeChange, onEndTimeChange, onScrub, onScrubbing, onScrubEnd]);
+    // Create pan responders for handles and playhead
+    // Using refs to avoid stale closures - PanResponder is only created once per type
+    const createPanResponder = useCallback((type) => {
+        let initialTime = 0;
+        return PanResponder.create({
+            onStartShouldSetPanResponder: () => !disabled,
+            onMoveShouldSetPanResponder: (_, gestureState) => {
+                // Claim the gesture if there's any horizontal movement
+                // This prevents ScrollView from capturing horizontal drags
+                return !disabled && Math.abs(gestureState.dx) > 2;
+            },
+            // Capture phase handlers - these fire before parent views
+            onStartShouldSetPanResponderCapture: () => false, // Don't capture on start, let it bubble
+            onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+                // Only capture if horizontal movement is dominant
+                return !disabled && Math.abs(gestureState.dx) > 5 && Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
+            },
+            onPanResponderGrant: () => {
+                // Read current values from refs at the moment the gesture starts
+                if (type === 'start') {
+                    initialTime = dragStartTimeRef.current;
+                }
+                else if (type === 'end') {
+                    initialTime = dragEndTimeRef.current;
+                }
+                else {
+                    initialTime = currentTimeRef.current;
+                }
+                setDragging(type);
+            },
+            onPanResponderMove: (_e, gestureState) => {
+                const containerW = containerWidthRef.current;
+                const hw = handleWidthRef.current;
+                const dur = durationRef.current;
+                // Content width is where time is mapped (between handles)
+                const cw = containerW - hw * 2;
+                if (cw <= 0 || dur <= 0)
+                    return;
+                const deltaX = gestureState.dx;
+                const deltaTime = (deltaX / cw) * dur;
+                let newTime = initialTime + deltaTime;
+                if (type === 'start') {
+                    // Constrain start handle
+                    newTime = Math.max(0, Math.min(newTime, dragEndTimeRef.current - minDuration));
+                    dragStartTimeRef.current = newTime;
+                    onStartTimeChangeRef.current?.(newTime);
+                    onScrubbingRef.current?.(newTime);
+                }
+                else if (type === 'end') {
+                    // Constrain end handle
+                    newTime = Math.max(dragStartTimeRef.current + minDuration, Math.min(newTime, dur));
+                    dragEndTimeRef.current = newTime;
+                    onEndTimeChangeRef.current?.(newTime);
+                    onScrubbingRef.current?.(newTime);
+                }
+                else {
+                    // Playhead - constrain to selection
+                    newTime = Math.max(dragStartTimeRef.current, Math.min(newTime, dragEndTimeRef.current));
+                    onScrubRef.current?.(newTime);
+                    onScrubbingRef.current?.(newTime);
+                }
+            },
+            onPanResponderRelease: (_e, gestureState) => {
+                setDragging(null);
+                if (type === 'start') {
+                    onScrubEndRef.current?.(dragStartTimeRef.current);
+                }
+                else if (type === 'end') {
+                    onScrubEndRef.current?.(dragEndTimeRef.current);
+                }
+                else {
+                    const containerW = containerWidthRef.current;
+                    const hw = handleWidthRef.current;
+                    const dur = durationRef.current;
+                    const cw = containerW - hw * 2;
+                    if (cw > 0 && dur > 0) {
+                        const deltaTime = (gestureState.dx / cw) * dur;
+                        const newTime = Math.max(dragStartTimeRef.current, Math.min(initialTime + deltaTime, dragEndTimeRef.current));
+                        onScrubEndRef.current?.(newTime);
+                    }
+                }
+            },
+            onPanResponderTerminate: () => {
+                setDragging(null);
+            },
+        });
+    }, [disabled, minDuration] // Only recreate if disabled or minDuration changes
+    );
+    const startPanResponder = useMemo(() => createPanResponder('start'), [createPanResponder]);
+    const endPanResponder = useMemo(() => createPanResponder('end'), [createPanResponder]);
+    const playheadPanResponder = useMemo(() => createPanResponder('playhead'), [createPanResponder]);
+    // Tap to seek - locationX is relative to the tap area which spans from startPosition to endPosition
+    const handleTap = useCallback((e) => {
+        if (disabled)
+            return;
+        const { locationX } = e.nativeEvent;
+        const startT = dragStartTimeRef.current;
+        const endT = dragEndTimeRef.current;
+        const selectionDuration = endT - startT;
+        if (selectionDuration <= 0)
+            return;
+        // The tap area spans the selection, so locationX=0 is startTime and locationX=width is endTime
+        // Calculate time proportionally within the selection
+        const width = containerWidthRef.current;
+        const dur = durationRef.current;
+        if (width <= 0 || dur <= 0)
+            return;
+        // Calculate the width of the tap area (endPosition - startPosition in content coordinates)
+        const cw = width - handleWidth * 2; // contentWidth
+        const tapAreaWidth = ((endT - startT) / dur) * cw;
+        if (tapAreaWidth <= 0)
+            return;
+        const proportion = Math.max(0, Math.min(1, locationX / tapAreaWidth));
+        const time = startT + proportion * selectionDuration;
+        onScrubRef.current?.(time);
+    }, [disabled, handleWidth]);
+    // Expose ref methods
+    useImperativeHandle(ref, () => ({
+        regenerateThumbnails: async () => {
+            if (!assetId || thumbnailTimes.length === 0)
+                return;
+            setIsLoading(true);
+            try {
+                const thumbs = await ExpoTwoStepVideoModule.generateThumbnails(assetId, thumbnailTimes, { width: thumbnailHeight * 1.5, height: thumbnailHeight });
+                setThumbnails(thumbs);
+            }
+            catch (err) {
+                console.error('Failed to regenerate thumbnails:', err);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        },
+        setPlayheadPosition: (time) => {
+            onScrub?.(Math.max(startTime, Math.min(time, endTime)));
+        },
+        getSelection: () => ({ startTime, endTime }),
+    }));
+    const thumbnailWidth = contentWidth > 0 && thumbnails.length > 0
+        ? contentWidth / thumbnails.length
+        : 0;
+    return (<View style={[
+            styles.container,
+            { backgroundColor: theme.backgroundColor },
+            style,
+        ]} onLayout={handleLayout}>
+      {/* Thumbnail Strip - positioned between handles */}
+      <View style={[styles.thumbnailStrip, { height: thumbnailHeight, marginLeft: handleWidth, width: contentWidth }]}>
+        {thumbnails.map((thumb, index) => (<Image key={index} source={{ uri: `data:image/png;base64,${thumb}` }} style={[
+                styles.thumbnail,
+                {
+                    width: thumbnailWidth,
+                    height: thumbnailHeight,
+                },
+            ]} resizeMode="cover"/>))}
+        {isLoading && thumbnails.length === 0 && (<View style={[styles.loadingPlaceholder, { height: thumbnailHeight }]}/>)}
+      </View>
+
+      {/* Dimmed region - left (covers trimmed content from left handle to start handle position) */}
+      <View style={[
+            styles.dimmedRegion,
+            {
+                left: handleWidth,
+                width: Math.max(0, startPosition - handleWidth),
+                height: thumbnailHeight,
+                backgroundColor: theme.dimmedColor,
+            },
+        ]} pointerEvents="none"/>
+
+      {/* Dimmed region - right (covers trimmed content from end handle position to right handle) */}
+      <View style={[
+            styles.dimmedRegion,
+            {
+                left: endPosition,
+                width: Math.max(0, containerWidth - handleWidth - endPosition),
+                height: thumbnailHeight,
+                backgroundColor: theme.dimmedColor,
+            },
+        ]} pointerEvents="none"/>
+
+      {/* Selection frame - top and bottom borders (span between handles) */}
+      <View style={[
+            styles.selectionBorder,
+            styles.selectionBorderTop,
+            {
+                left: startPosition,
+                width: Math.max(0, endPosition - startPosition),
+                backgroundColor: theme.borderColor,
+            },
+        ]} pointerEvents="none"/>
+      <View style={[
+            styles.selectionBorder,
+            styles.selectionBorderBottom,
+            {
+                left: startPosition,
+                width: Math.max(0, endPosition - startPosition),
+                top: thumbnailHeight - 2,
+                backgroundColor: theme.borderColor,
+            },
+        ]} pointerEvents="none"/>
+
+      {/* Start Handle - positioned to the LEFT of the trim point (outside content when startTime=0) */}
+      <Animated.View style={[
+            styles.handle,
+            styles.startHandle,
+            {
+                left: startPosition - handleWidth,
+                width: handleWidth,
+                height: thumbnailHeight,
+                backgroundColor: theme.handleColor,
+                opacity: dragging === 'start' ? 0.8 : 1,
+            },
+        ]} hitSlop={{ top: 15, bottom: 15, left: 15, right: 10 }} {...startPanResponder.panHandlers}>
+        <View style={styles.handleChevron}>
+          <View style={[styles.chevronLine, styles.chevronLineTopLeft]}/>
+          <View style={[styles.chevronLine, styles.chevronLineBottomLeft]}/>
+        </View>
+      </Animated.View>
+
+      {/* End Handle - positioned to the RIGHT of the trim point (outside content when endTime=duration) */}
+      <Animated.View style={[
+            styles.handle,
+            styles.endHandle,
+            {
+                left: endPosition,
+                width: handleWidth,
+                height: thumbnailHeight,
+                backgroundColor: theme.handleColor,
+                opacity: dragging === 'end' ? 0.8 : 1,
+            },
+        ]} hitSlop={{ top: 15, bottom: 15, left: 10, right: 15 }} {...endPanResponder.panHandlers}>
+        <View style={styles.handleChevron}>
+          <View style={[styles.chevronLine, styles.chevronLineTopRight]}/>
+          <View style={[styles.chevronLine, styles.chevronLineBottomRight]}/>
+        </View>
+      </Animated.View>
+
+      {/* Tap area for seeking - covers the selection between start and end trim points */}
+      <View style={[
+            styles.tapArea,
+            {
+                left: startPosition,
+                width: Math.max(0, endPosition - startPosition),
+                height: thumbnailHeight,
+            },
+        ]} onTouchEnd={handleTap}/>
+
+      {/* Playhead */}
+      {showPlayhead && playheadPosition >= startPosition && playheadPosition <= endPosition && (<Animated.View style={[
+                styles.playhead,
+                {
+                    left: playheadPosition - 1,
+                    height: thumbnailHeight + 8,
+                    top: -4,
+                    backgroundColor: theme.playheadColor,
+                    opacity: dragging === 'playhead' ? 0.8 : 1,
+                },
+            ]} {...playheadPanResponder.panHandlers}>
+          <View style={[styles.playheadKnob, { backgroundColor: theme.playheadColor }]}/>
+        </Animated.View>)}
+    </View>);
+});
+VideoScrubber.displayName = 'VideoScrubber';
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        borderRadius: 8,
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    thumbnailStrip: {
+        flexDirection: 'row',
+        width: '100%',
+    },
+    thumbnail: {
+        backgroundColor: '#2c2c2e',
+    },
+    loadingPlaceholder: {
+        flex: 1,
+        backgroundColor: '#2c2c2e',
+    },
+    dimmedRegion: {
+        position: 'absolute',
+        top: 0,
+    },
+    selectionBorder: {
+        position: 'absolute',
+        height: 2,
+    },
+    selectionBorderTop: {
+        top: 0,
+    },
+    selectionBorderBottom: {
+        bottom: 0,
+    },
+    handle: {
+        position: 'absolute',
+        top: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 4,
+    },
+    startHandle: {
+        borderTopLeftRadius: 6,
+        borderBottomLeftRadius: 6,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+    },
+    endHandle: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderTopRightRadius: 6,
+        borderBottomRightRadius: 6,
+    },
+    handleChevron: {
+        width: 8,
+        height: 16,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    chevronLine: {
+        width: 2,
+        height: 8,
+        backgroundColor: '#000',
+        borderRadius: 1,
+        position: 'absolute',
+    },
+    chevronLineTopLeft: {
+        transform: [{ rotate: '20deg' }],
+        top: 0,
+    },
+    chevronLineBottomLeft: {
+        transform: [{ rotate: '-20deg' }],
+        bottom: 0,
+    },
+    chevronLineTopRight: {
+        transform: [{ rotate: '-20deg' }],
+        top: 0,
+    },
+    chevronLineBottomRight: {
+        transform: [{ rotate: '20deg' }],
+        bottom: 0,
+    },
+    tapArea: {
+        position: 'absolute',
+        top: 0,
+    },
+    playhead: {
+        position: 'absolute',
+        width: 2,
+        borderRadius: 1,
+    },
+    playheadKnob: {
+        position: 'absolute',
+        top: -4,
+        left: -4,
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+    },
+});
+export default VideoScrubber;
+//# sourceMappingURL=VideoScrubber.js.map