@movementinfra/expo-twostep-video 0.1.12 → 0.1.14

package/README.md

@@ -7,20 +7,23 @@ Professional video editing for React Native, powered by native AVFoundation.
 
 ## Features
 
-- 🎬 **Load videos** from file system or Photos library
-- ✂️ **Trim videos** with frame-accurate precision
-- 🪞 **Mirror videos** horizontally, vertically, or both
-- ⏱️ **Speed adjustment** - slow motion (0.25x) to fast forward (4x)
-- 🔄 **Loop segments** - repeat video sections for perfect loops
-- 🎛️ **Combined transformations** - trim + mirror + speed in one operation
-- 🎞️ **Create multi-segment compositions** (highlight reels)
-- 📸 **Generate thumbnails** at any timestamp
-- 🎥 **Native video player** with playback controls
-- 💾 **Export** with customizable quality settings
-- 📊 **Real-time progress tracking** during exports
-- 🧹 **Automatic cleanup** of partial/temp files
-- 🔒 **Type-safe TypeScript API** with full IntelliSense
-- 📱 **iOS 15+** support
+- **Trim videos** with frame-accurate precision
+- **Mirror videos** horizontally, vertically, or both
+- **Speed adjustment** - slow motion (0.25x) to fast forward (4x)
+- **Loop segments** - repeat video sections for perfect loops
+- **Pan & zoom** - pinch-to-zoom with gesture controls
+- **Multi-segment compositions** - create highlight reels
+- **Generate thumbnails** at any timestamp
+- **Native video player** with playback controls
+- **Export** with customizable quality settings
+- **Real-time progress** tracking during exports
+- **Type-safe TypeScript API** with full IntelliSense
+
+## Requirements
+
+- iOS 15.0+
+- Expo SDK 50+
+- React Native 0.72+
 
 ## Installation
 
@@ -38,634 +41,328 @@ const asset = await TwoStepVideo.loadAsset({
   uri: 'file:///path/to/video.mp4'
 });
 
-// Trim it (5 seconds to 15 seconds)
+// Trim to 10 seconds
 const composition = await TwoStepVideo.trimVideo({
   assetId: asset.id,
   startTime: 5.0,
   endTime: 15.0
 });
 
-// Export with progress tracking
+// Export
 const result = await TwoStepVideo.exportVideo({
   compositionId: composition.id,
   quality: TwoStepVideo.Quality.HIGH
 });
 
 console.log('Exported to:', result.uri);
-```
-
-## Complete Example
-
-```typescript
-import React, { useState, useEffect } from 'react';
-import { View, Button, Text } from 'react-native';
-import * as TwoStepVideo from 'expo-twostep-video';
 
-function VideoEditor() {
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    const subscription = TwoStepVideo.addExportProgressListener((event) => {
-      setProgress(event.progress);
-    });
-    return () => subscription.remove();
-  }, []);
-
-  const trimAndExport = async () => {
-    try {
-      // Load
-      const asset = await TwoStepVideo.loadAsset({
-        uri: 'file:///path/to/video.mp4'
-      });
-
-      // Trim
-      const composition = await TwoStepVideo.trimVideo({
-        assetId: asset.id,
-        startTime: 0,
-        endTime: 10
-      });
-
-      // Export
-      const result = await TwoStepVideo.exportVideo({
-        compositionId: composition.id,
-        quality: TwoStepVideo.Quality.HIGH
-      });
-
-      alert(`Saved to: ${result.uri}`);
-
-      // Cleanup
-      TwoStepVideo.releaseAsset(asset.id);
-      TwoStepVideo.releaseComposition(composition.id);
-
-    } catch (error) {
-      console.error('Error:', error);
-    }
-  };
-
-  return (
-    <View>
-      <Text>Progress: {Math.round(progress * 100)}%</Text>
-      <Button title="Trim & Export" onPress={trimAndExport} />
-    </View>
-  );
-}
+// Cleanup
+TwoStepVideo.releaseAll();
 ```
 
 ## API Reference
 
-### Quick Reference
-
-| Function | Description | Returns |
-|----------|-------------|---------|
-| `loadAsset({ uri })` | Load video from file URI | `VideoAsset` |
-| `loadAssetFromPhotos(id)` | Load from Photos library | `VideoAsset` |
-| `validateVideoUri(uri)` | Validate without loading | `boolean` |
-| `trimVideo({ assetId, startTime, endTime })` | Trim to time range | `VideoComposition` |
-| `trimVideoMultiple({ assetId, segments })` | Multi-segment trim | `VideoComposition` |
-| `mirrorVideo({ assetId, axis, startTime?, endTime? })` | Mirror/flip video | `VideoComposition` |
-| `adjustSpeed({ assetId, speed, startTime?, endTime? })` | Change speed | `VideoComposition` |
-| `loopSegment({ assetId, startTime, endTime, loopCount })` | Loop a segment | `LoopResult` |
-| `transformVideo({ assetId, speed?, mirrorAxis?, startTime?, endTime? })` | Combined transform | `VideoComposition` |
-| `panZoomVideo({ assetId, panX, panY, zoomLevel })` | Apply pan/zoom crop | `VideoComposition` |
-| `generateThumbnails({ assetId, times, size? })` | Extract frames | `string[]` (base64) |
-| `exportVideo({ compositionId, quality? })` | Export composition | `ExportResult` |
-| `exportAsset({ assetId, quality? })` | Export asset directly | `ExportResult` |
-| `releaseAsset(id)` | Free memory | `void` |
-| `releaseComposition(id)` | Free memory | `void` |
-| `releaseAll()` | Free all memory | `void` |
-
 ### Loading Videos
 
-#### `loadAsset(options)`
-Load a video from a file URI.
-
 ```typescript
-const asset = await TwoStepVideo.loadAsset({
-  uri: 'file:///path/to/video.mp4'
-});
+// Load from file URI
+const asset = await TwoStepVideo.loadAsset({ uri: 'file:///path/to/video.mp4' });
 // Returns: { id, duration, width, height, frameRate, hasAudio }
-```
 
-#### `loadAssetFromPhotos(localIdentifier)`
-Load a video from the Photos library.
-
-```typescript
+// Load from Photos library
 const asset = await TwoStepVideo.loadAssetFromPhotos(photoAsset.id);
-```
-
-#### `validateVideoUri(uri)`
-Quickly validate a video URI without loading.
 
-```typescript
+// Validate without loading
 const isValid = await TwoStepVideo.validateVideoUri(uri);
 ```
 
 ### Trimming
 
-#### `trimVideo(options)`
-Trim to a single time range.
-
 ```typescript
+// Single segment
 const composition = await TwoStepVideo.trimVideo({
   assetId: asset.id,
-  startTime: 5.0,  // seconds
+  startTime: 5.0,
   endTime: 15.0
 });
-```
-
-#### `trimVideoMultiple(options)`
-Create a composition from multiple segments.
 
-```typescript
+// Multiple segments (highlight reel)
 const composition = await TwoStepVideo.trimVideoMultiple({
   assetId: asset.id,
   segments: [
-    { start: 0, end: 5 },
+    { start: 0, end: 3 },
     { start: 10, end: 15 },
     { start: 20, end: 25 }
   ]
 });
 ```
 
-### Thumbnails
-
-#### `generateThumbnails(options)`
-Extract thumbnail images at specific times.
-
-```typescript
-const thumbnails = await TwoStepVideo.generateThumbnails({
-  assetId: asset.id,
-  times: [0, 5, 10, 15],
-  size: { width: 300, height: 300 }
-});
-
-// Use in Image component
-<Image source={{ uri: `data:image/png;base64,${thumbnails[0]}` }} />
-```
-
-### Video Mirroring
-
-#### `mirrorVideo(options)`
-Mirror (flip) a video horizontally, vertically, or both. Perfect for selfie videos that need to be flipped.
+### Mirroring
 
 ```typescript
-// Mirror horizontally (flip left-right) - common for selfie videos
+// Horizontal (flip left-right) - common for selfie videos
 const mirrored = await TwoStepVideo.mirrorVideo({
   assetId: asset.id,
   axis: 'horizontal'
 });
 
-// Mirror vertically (flip top-bottom)
+// Vertical (flip top-bottom)
 const flipped = await TwoStepVideo.mirrorVideo({
   assetId: asset.id,
   axis: 'vertical'
 });
 
-// Mirror both axes (180° rotation effect)
+// Both axes
 const both = await TwoStepVideo.mirrorVideo({
   assetId: asset.id,
   axis: 'both'
 });
-
-// Mirror only a specific segment (5s to 10s)
-const partialMirror = await TwoStepVideo.mirrorVideo({
-  assetId: asset.id,
-  axis: 'horizontal',
-  startTime: 5,
-  endTime: 10
-});
 ```
 
 ### Speed Adjustment
 
-#### `adjustSpeed(options)`
-Change the playback speed of a video. Supports slow motion (< 1.0) and fast forward (> 1.0).
-
 ```typescript
-// Slow motion (0.5x = 2x slower, video becomes twice as long)
+// Slow motion (0.5x = 2x slower)
 const slowMo = await TwoStepVideo.adjustSpeed({
   assetId: asset.id,
   speed: 0.5
 });
 
-// Very slow motion (0.25x = 4x slower)
-const verySlow = await TwoStepVideo.adjustSpeed({
-  assetId: asset.id,
-  speed: 0.25
-});
-
-// Fast forward (2x speed, video becomes half as long)
-const fastForward = await TwoStepVideo.adjustSpeed({
+// Fast forward (2x speed)
+const fast = await TwoStepVideo.adjustSpeed({
   assetId: asset.id,
   speed: 2.0
 });
 
-// Timelapse effect (4x speed)
+// Timelapse (4x speed)
 const timelapse = await TwoStepVideo.adjustSpeed({
   assetId: asset.id,
   speed: 4.0
 });
-
-// Speed up only a specific segment (10s to 30s becomes a quick timelapse)
-const partialSpeed = await TwoStepVideo.adjustSpeed({
-  assetId: asset.id,
-  speed: 4.0,
-  startTime: 10,
-  endTime: 30
-});
 ```
 
-### Video Looping
-
-#### `loopSegment(options)`
-Loop a segment of video multiple times. Great for creating perfect loops for social media or extending short clips.
+### Looping
 
 ```typescript
-// Loop a 2-second segment 3 times (plays 4 times total = 8 seconds)
+// Loop a 3-second segment 4 times (plays 5 times total = 15 seconds)
 const looped = await TwoStepVideo.loopSegment({
-  assetId: asset.id,
-  startTime: 5,
-  endTime: 7,
-  loopCount: 3  // Repeats 3 times after first play
-});
-
-console.log(`Duration: ${looped.duration}s`);     // 8 seconds
-console.log(`Total plays: ${looped.totalPlays}`); // 4 times
-
-// Create a 15-second loop from a 3-second clip for Instagram/TikTok
-const socialLoop = await TwoStepVideo.loopSegment({
   assetId: asset.id,
   startTime: 0,
   endTime: 3,
-  loopCount: 4  // 3s * 5 plays = 15 seconds
+  loopCount: 4
 });
 
-// Loop the best moment of a video
-const bestMoment = await TwoStepVideo.loopSegment({
-  assetId: asset.id,
-  startTime: 12.5,  // Start at 12.5 seconds
-  endTime: 14.0,    // 1.5 second clip
-  loopCount: 9      // 1.5s * 10 plays = 15 seconds
-});
+console.log(`Duration: ${looped.duration}s, plays ${looped.totalPlays} times`);
 ```
 
 ### Combined Transformations
 
-#### `transformVideo(options)`
-Apply multiple transformations in a single operation: trim, mirror, and speed adjustment combined.
-
 ```typescript
-// Mirror and slow down (selfie video correction + slow-mo effect)
+// Mirror + slow motion in one operation
 const transformed = await TwoStepVideo.transformVideo({
   assetId: asset.id,
   speed: 0.5,
-  mirrorAxis: 'horizontal'
+  mirrorAxis: 'horizontal',
+  startTime: 0,
+  endTime: 10
 });
+```
 
-// Just mirror (speed defaults to 1.0)
-const mirrored = await TwoStepVideo.transformVideo({
-  assetId: asset.id,
-  mirrorAxis: 'both'
-});
+### Pan & Zoom
 
-// Trim + mirror + speed all at once
-const fullTransform = await TwoStepVideo.transformVideo({
+```typescript
+// Apply pan/zoom for export (bakes transform into video)
+const zoomed = await TwoStepVideo.panZoomVideo({
   assetId: asset.id,
-  speed: 2.0,
-  mirrorAxis: 'horizontal',
-  startTime: 0,
-  endTime: 10  // Take first 10 seconds, mirror it, speed it up
+  panX: 0.3,       // Pan position (-1 to 1)
+  panY: -0.2,
+  zoomLevel: 1.5   // Zoom level (1 to 5)
 });
+```
+
+### Thumbnails
 
-// Speed up without mirroring (just provide speed)
-const fastVersion = await TwoStepVideo.transformVideo({
+```typescript
+const thumbnails = await TwoStepVideo.generateThumbnails({
   assetId: asset.id,
-  speed: 1.5,
-  startTime: 5,
-  endTime: 15
+  times: [0, 5, 10, 15],
+  size: { width: 300, height: 300 }
 });
+
+// Use in Image component
+<Image source={{ uri: `data:image/png;base64,${thumbnails[0]}` }} />
 ```
 
 ### Exporting
 
-#### `exportVideo(options)`
-Export a composition to a file.
-
 ```typescript
+// Export composition
 const result = await TwoStepVideo.exportVideo({
   compositionId: composition.id,
-  quality: TwoStepVideo.Quality.HIGH,  // or LOW, MEDIUM, HIGHEST
-  outputUri: 'file:///path/to/output.mp4'  // optional
+  quality: TwoStepVideo.Quality.HIGH
 });
-```
 
-#### `exportAsset(options)`
-Export an asset directly (without trimming).
-
-```typescript
+// Export asset directly
 const result = await TwoStepVideo.exportAsset({
   assetId: asset.id,
   quality: TwoStepVideo.Quality.MEDIUM
 });
-```
-
-### Video Player View
-
-#### `TwoStepVideoView`
-A native video player component for playing assets and compositions with full playback control.
 
-```tsx
-import { TwoStepVideoView, TwoStepVideoViewRef } from 'expo-twostep-video';
-import { useRef, useState } from 'react';
-import { View, Button, Text } from 'react-native';
-
-function VideoPlayer({ compositionId }: { compositionId: string }) {
-  const playerRef = useRef<TwoStepVideoViewRef>(null);
-  const [status, setStatus] = useState<string>('ready');
-  const [progress, setProgress] = useState(0);
-
-  return (
-    <View style={{ flex: 1 }}>
-      <TwoStepVideoView
-        ref={playerRef}
-        compositionId={compositionId}
-        loop={false}
-        onPlaybackStatusChange={(e) => setStatus(e.nativeEvent.status)}
-        onProgress={(e) => setProgress(e.nativeEvent.progress)}
-        onEnd={() => console.log('Video ended')}
-        onError={(e) => console.error(e.nativeEvent.error)}
-        style={{ width: '100%', height: 300 }}
-      />
-
-      <Text>Status: {status} | Progress: {Math.round(progress * 100)}%</Text>
-
-      <View style={{ flexDirection: 'row', gap: 10 }}>
-        <Button title="Play" onPress={() => playerRef.current?.play()} />
-        <Button title="Pause" onPress={() => playerRef.current?.pause()} />
-        <Button title="Seek 5s" onPress={() => playerRef.current?.seek(5)} />
-        <Button title="Replay" onPress={() => playerRef.current?.replay()} />
-      </View>
-    </View>
-  );
-}
+// Track progress
+const subscription = TwoStepVideo.addExportProgressListener((event) => {
+  console.log(`${Math.round(event.progress * 100)}%`);
+});
+// Later: subscription.remove();
 ```
 
-#### Player Props
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `compositionId` | `string` | ID from `mirrorVideo`, `trimVideo`, `loopSegment`, etc. |
-| `assetId` | `string` | ID from `loadAsset` (for playing without transformations) |
-| `loop` | `boolean` | Enable continuous looping (default: `false`) |
-| `onPlaybackStatusChange` | `function` | Called when status changes (`ready`, `playing`, `paused`, `ended`, `seeked`) |
-| `onProgress` | `function` | Called periodically with `{ currentTime, duration, progress }` |
-| `onEnd` | `function` | Called when video ends (not called if `loop` is true) |
-| `onError` | `function` | Called on playback error |
-| `onPanZoomChange` | `function` | Called when user pinches/pans with `{ panX, panY, zoomLevel }` |
-
-#### Player Methods (via ref)
+### Memory Management
 
 ```typescript
-const playerRef = useRef<TwoStepVideoViewRef>(null);
-
-// Start playback
-await playerRef.current?.play();
-
-// Pause playback
-await playerRef.current?.pause();
-
-// Seek to specific time (in seconds)
-await playerRef.current?.seek(10.5);
-
-// Restart from beginning
-await playerRef.current?.replay();
+TwoStepVideo.releaseAsset(asset.id);
+TwoStepVideo.releaseComposition(composition.id);
+TwoStepVideo.releaseAll();  // Release everything
+TwoStepVideo.cleanupFile(result.uri);  // Delete temp file
 ```
 
-### Pan & Zoom
-
-The `TwoStepVideoView` component supports interactive pan and zoom gestures, allowing users to zoom into video content and pan around while zoomed.
-
-#### Gesture Controls
+## Video Scrubber Component
 
-| Gesture | Action |
-|---------|--------|
-| Pinch (2 fingers) | Zoom in/out (1x to 5x) |
-| Drag (2 fingers) | Pan around when zoomed in |
+### VideoScrubber
 
-#### Pan/Zoom Events
-
-Listen for pan/zoom state changes with the `onPanZoomChange` prop:
+A native-style video scrubber/trimmer with thumbnail strip, draggable trim handles, and a draggable playhead for frame-accurate seeking:
 
 ```tsx
-import { TwoStepVideoView, PanZoomState } from 'expo-twostep-video';
+import { VideoScrubber, VideoScrubberRef } from 'expo-twostep-video';
 
-function VideoWithZoom() {
-  const [panZoom, setPanZoom] = useState<PanZoomState>({
-    panX: 0,
-    panY: 0,
-    zoomLevel: 1,
-  });
+function VideoEditor({ asset }: { asset: VideoAsset }) {
+  const playerRef = useRef<TwoStepVideoViewRef>(null);
+  const [trimStart, setTrimStart] = useState(0);
+  const [trimEnd, setTrimEnd] = useState(asset.duration);
+  const [currentTime, setCurrentTime] = useState(0);
 
   return (
     <View>
       <TwoStepVideoView
+        ref={playerRef}
         assetId={asset.id}
-        onPanZoomChange={(e) => setPanZoom(e.nativeEvent)}
-        style={{ width: '100%', height: 300 }}
+        onProgress={(e) => setCurrentTime(e.nativeEvent.currentTime)}
       />
 
-      {panZoom.zoomLevel > 1 && (
-        <Text>
-          Zoom: {panZoom.zoomLevel.toFixed(1)}x |
-          Pan: ({panZoom.panX.toFixed(2)}, {panZoom.panY.toFixed(2)})
-        </Text>
-      )}
+      <VideoScrubber
+        assetId={asset.id}
+        duration={asset.duration}
+        currentTime={currentTime}
+        startTime={trimStart}
+        endTime={trimEnd}
+        onStartTimeChange={setTrimStart}
+        onEndTimeChange={setTrimEnd}
+        onScrub={(time) => playerRef.current?.seek(time)}
+        onScrubbing={(time) => playerRef.current?.seek(time)}
+      />
     </View>
   );
 }
 ```
 
-#### Pan/Zoom Methods (via ref)
-
-Control pan/zoom programmatically using the player ref:
+**Props:**
 
-```typescript
-const playerRef = useRef<TwoStepVideoViewRef>(null);
-
-// Get current pan/zoom state
-const state = await playerRef.current?.getPanZoomState();
-// Returns: { panX: number, panY: number, zoomLevel: number }
-
-// Set pan/zoom programmatically
-await playerRef.current?.setPanZoomState({
-  panX: 0.5,      // Pan right (range: -1 to 1)
-  panY: -0.3,     // Pan up (range: -1 to 1)
-  zoomLevel: 2.0  // 2x zoom (range: 1 to 5)
-});
-
-// Reset to default (no zoom, centered)
-await playerRef.current?.resetPanZoom();
-```
-
-#### Baking Pan/Zoom into Export
-
-To permanently apply the pan/zoom transform to a video for export, use `panZoomVideo`:
-
-```typescript
-import * as TwoStepVideo from 'expo-twostep-video';
-
-// Apply pan/zoom as a permanent transformation
-const composition = await TwoStepVideo.panZoomVideo({
-  assetId: asset.id,
-  panX: 0.3,       // Pan position (-1 to 1)
-  panY: -0.2,
-  zoomLevel: 1.5,  // Zoom level (1 to 5)
-});
-
-// Export the cropped/zoomed video
-const result = await TwoStepVideo.exportVideo({
-  compositionId: composition.id,
-  quality: 'high',
-});
-```
-
-#### Complete Pan/Zoom Example
-
-A full implementation with gesture preview and export:
+| Prop | Type | Description |
+|------|------|-------------|
+| `assetId` | `string` | Asset ID for thumbnail generation |
+| `duration` | `number` | Total video duration in seconds |
+| `currentTime` | `number` | Current playback position (for playhead) |
+| `startTime` | `number` | Selected start time in seconds |
+| `endTime` | `number` | Selected end time in seconds |
+| `thumbnailCount` | `number` | Number of thumbnails (default: 10) |
+| `thumbnailHeight` | `number` | Height of thumbnail strip (default: 50) |
+| `onStartTimeChange` | `function` | Called when start handle moves |
+| `onEndTimeChange` | `function` | Called when end handle moves |
+| `onScrub` | `function` | Called when playhead is tapped or dragged |
+| `onScrubbing` | `function` | Called continuously during any drag |
+| `onScrubEnd` | `function` | Called when drag ends |
+| `minDuration` | `number` | Minimum selection duration (default: 0.5) |
+| `showPlayhead` | `boolean` | Show playhead indicator (default: true) |
+| `handleWidth` | `number` | Handle width in pixels (default: 20) |
+| `theme` | `object` | Custom colors for handles, playhead, etc. |
+
+**Features:**
+- Drag the **yellow handles** to adjust trim start/end times
+- Drag the **white playhead** to scrub through the video
+- Tap anywhere in the selection to seek to that position
+- All drag operations call `onScrubbing` for smooth video preview
+
+## Video Player Component
+
+### TwoStepVideoView
+
+Native video player with pan/zoom gesture support:
 
 ```tsx
-import React, { useState, useRef } from 'react';
-import { View, Button, Text, StyleSheet } from 'react-native';
-import * as TwoStepVideo from 'expo-twostep-video';
-import {
-  TwoStepVideoView,
-  TwoStepVideoViewRef,
-  PanZoomState,
-} from 'expo-twostep-video';
+import { TwoStepVideoView, TwoStepVideoViewRef } from 'expo-twostep-video';
 
-function PanZoomEditor({ assetId }: { assetId: string }) {
+function VideoPlayer({ compositionId }: { compositionId: string }) {
   const playerRef = useRef<TwoStepVideoViewRef>(null);
-  const [panZoom, setPanZoom] = useState<PanZoomState>({
-    panX: 0,
-    panY: 0,
-    zoomLevel: 1,
-  });
-
-  const hasTransform = panZoom.zoomLevel > 1 ||
-    panZoom.panX !== 0 ||
-    panZoom.panY !== 0;
-
-  const handleReset = async () => {
-    await playerRef.current?.resetPanZoom();
-    setPanZoom({ panX: 0, panY: 0, zoomLevel: 1 });
-  };
-
-  const handleApplyAndExport = async () => {
-    // Bake the pan/zoom into a composition
-    const composition = await TwoStepVideo.panZoomVideo({
-      assetId,
-      panX: panZoom.panX,
-      panY: panZoom.panY,
-      zoomLevel: panZoom.zoomLevel,
-    });
-
-    // Export the result
-    const result = await TwoStepVideo.exportVideo({
-      compositionId: composition.id,
-      quality: 'high',
-    });
-
-    // Reset the preview since transform is now baked in
-    await handleReset();
-
-    console.log('Exported to:', result.uri);
-  };
 
   return (
-    <View style={styles.container}>
-      {/* Video Preview with Gestures */}
+    <View>
       <TwoStepVideoView
         ref={playerRef}
-        assetId={assetId}
-        onPanZoomChange={(e) => setPanZoom(e.nativeEvent)}
-        style={styles.video}
+        compositionId={compositionId}
+        loop={false}
+        onPlaybackStatusChange={(e) => console.log(e.nativeEvent.status)}
+        onProgress={(e) => console.log(e.nativeEvent.progress)}
+        onPanZoomChange={(e) => console.log(e.nativeEvent.zoomLevel)}
+        style={{ width: '100%', height: 300 }}
       />
 
-      {/* Gesture Hint */}
-      <Text style={styles.hint}>
-        Pinch to zoom, drag with 2 fingers to pan
-      </Text>
-
-      {/* Transform Info */}
-      {hasTransform && (
-        <View style={styles.info}>
-          <Text>Zoom: {panZoom.zoomLevel.toFixed(2)}x</Text>
-          <Text>Pan X: {panZoom.panX.toFixed(3)}</Text>
-          <Text>Pan Y: {panZoom.panY.toFixed(3)}</Text>
-        </View>
-      )}
-
-      {/* Controls */}
-      <View style={styles.buttons}>
-        <Button
-          title="Reset"
-          onPress={handleReset}
-          disabled={!hasTransform}
-        />
-        <Button
-          title="Apply & Export"
-          onPress={handleApplyAndExport}
-          disabled={!hasTransform}
-        />
-      </View>
+      <Button title="Play" onPress={() => playerRef.current?.play()} />
+      <Button title="Pause" onPress={() => playerRef.current?.pause()} />
+      <Button title="Seek 5s" onPress={() => playerRef.current?.seek(5)} />
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: { flex: 1, padding: 16 },
-  video: { width: '100%', height: 300, backgroundColor: '#000' },
-  hint: { textAlign: 'center', color: '#666', marginTop: 8 },
-  info: { padding: 12, backgroundColor: '#f0f0f0', borderRadius: 8, marginTop: 12 },
-  buttons: { flexDirection: 'row', justifyContent: 'space-around', marginTop: 16 },
-});
-
-export default PanZoomEditor;
 ```
 
-#### Pan/Zoom Notes
-
-- **Zoom range**: 1x (no zoom) to 5x by default
-- **Pan range**: -1 to 1 on both axes (only effective when zoomed in)
-- **Pan constraint**: Pan is automatically constrained to keep video content visible at the current zoom level
-- **Simulator testing**: Multi-touch gestures work best on real devices. The iOS Simulator uses Option+drag for pinch, which can be unreliable
+**Props:**
 
-### Events
-
-#### `addExportProgressListener(callback)`
-Listen for export progress updates.
+| Prop | Type | Description |
+|------|------|-------------|
+| `compositionId` | `string` | ID from trimVideo, mirrorVideo, etc. |
+| `assetId` | `string` | ID from loadAsset (for raw playback) |
+| `loop` | `boolean` | Enable continuous looping |
+| `minZoom` | `number` | Minimum zoom level (default: 1.0) |
+| `maxZoom` | `number` | Maximum zoom level (default: 5.0) |
+| `onPlaybackStatusChange` | `function` | Status: ready, playing, paused, ended |
+| `onProgress` | `function` | Progress: currentTime, duration, progress |
+| `onPanZoomChange` | `function` | Pan/zoom: panX, panY, zoomLevel |
+| `onEnd` | `function` | Called when playback ends |
+| `onError` | `function` | Called on error |
+
+**Ref Methods:**
 
 ```typescript
-const subscription = TwoStepVideo.addExportProgressListener((event) => {
-  console.log(`${Math.round(event.progress * 100)}%`);
-});
+await playerRef.current?.play();
+await playerRef.current?.pause();
+await playerRef.current?.seek(10.5);
+await playerRef.current?.replay();
 
-// Remove listener
-subscription.remove();
+// Pan/zoom control
+const state = await playerRef.current?.getPanZoomState();
+await playerRef.current?.setPanZoomState({ zoomLevel: 2.0 });
+await playerRef.current?.resetPanZoom();
 ```
 
-### Memory Management
+### TwoStepPlayerControllerView
 
-```typescript
-// Release assets when done
-TwoStepVideo.releaseAsset(asset.id);
-TwoStepVideo.releaseComposition(composition.id);
+Native iOS player with system controls (AirPlay, PiP, fullscreen):
 
-// Release all at once
-TwoStepVideo.releaseAll();
+```tsx
+import { TwoStepPlayerControllerView } from 'expo-twostep-video';
 
-// Clean up temp files
-TwoStepVideo.cleanupFile(tempFileUri);
+<TwoStepPlayerControllerView
+  assetId={asset.id}
+  showsPlaybackControls={true}
+  style={{ width: '100%', height: 300 }}
+/>
 ```
 
 ## Constants
@@ -673,575 +370,49 @@ TwoStepVideo.cleanupFile(tempFileUri);
 ### Quality Presets
 
 ```typescript
-TwoStepVideo.Quality.LOW       // ~0.1 bits per pixel - fast, small files
-TwoStepVideo.Quality.MEDIUM    // ~0.2 bits per pixel - good for web/social
-TwoStepVideo.Quality.HIGH      // ~0.4 bits per pixel (recommended default)
-TwoStepVideo.Quality.HIGHEST   // ~0.8 bits per pixel - archival quality
+TwoStepVideo.Quality.LOW      // Fast, small files
+TwoStepVideo.Quality.MEDIUM   // Good for web/social
+TwoStepVideo.Quality.HIGH     // Recommended default
+TwoStepVideo.Quality.HIGHEST  // Archival quality
 ```
 
 ### Mirror Axis
 
 ```typescript
-TwoStepVideo.Mirror.HORIZONTAL  // Flip left-right (selfie correction)
+TwoStepVideo.Mirror.HORIZONTAL  // Flip left-right
 TwoStepVideo.Mirror.VERTICAL    // Flip top-bottom
-TwoStepVideo.Mirror.BOTH        // Flip both axes (180° rotation effect)
-```
-
-### Speed Ranges
-
-| Speed | Effect | Duration Change |
-|-------|--------|-----------------|
-| 0.25 | Very slow motion | 4x longer |
-| 0.5 | Slow motion | 2x longer |
-| 1.0 | Normal speed | No change |
-| 2.0 | Fast forward | 2x shorter |
-| 4.0 | Timelapse | 4x shorter |
-
-## TypeScript Support
-
-Full TypeScript definitions included:
-
-```typescript
-// Core types
-interface VideoAsset {
-  id: string;
-  duration: number;
-  width: number;
-  height: number;
-  frameRate: number;
-  hasAudio: boolean;
-}
-
-interface VideoComposition {
-  id: string;
-  duration: number;
-}
-
-interface ExportResult {
-  uri: string;
-  path: string;
-}
-
-// Transformation types
-type MirrorAxis = 'horizontal' | 'vertical' | 'both';
-type VideoQuality = 'low' | 'medium' | 'high' | 'highest';
-
-interface MirrorVideoOptions {
-  assetId: string;
-  axis: MirrorAxis;
-  startTime?: number;  // Optional: mirror only a segment
-  endTime?: number;
-}
-
-interface AdjustSpeedOptions {
-  assetId: string;
-  speed: number;       // 0.25 to 4.0
-  startTime?: number;
-  endTime?: number;
-}
-
-interface LoopSegmentOptions {
-  assetId: string;
-  startTime: number;
-  endTime: number;
-  loopCount: number;   // Repeats after first play
-}
-
-interface LoopResult {
-  id: string;
-  duration: number;
-  loopCount: number;
-  totalPlays: number;  // loopCount + 1
-}
-
-interface TransformVideoOptions {
-  assetId: string;
-  speed?: number;
-  mirrorAxis?: MirrorAxis;
-  startTime?: number;
-  endTime?: number;
-}
-
-// Player types
-interface TwoStepVideoViewProps {
-  compositionId?: string;
-  assetId?: string;
-  loop?: boolean;
-  onPlaybackStatusChange?: (event: { nativeEvent: PlaybackStatusEvent }) => void;
-  onProgress?: (event: { nativeEvent: ProgressEvent }) => void;
-  onEnd?: (event: { nativeEvent: {} }) => void;
-  onError?: (event: { nativeEvent: ErrorEvent }) => void;
-  onPanZoomChange?: (event: { nativeEvent: PanZoomState }) => void;
-  style?: ViewStyle;
-}
-
-interface TwoStepVideoViewRef {
-  play: () => Promise<void>;
-  pause: () => Promise<void>;
-  seek: (time: number) => Promise<void>;
-  replay: () => Promise<void>;
-  getPanZoomState: () => Promise<PanZoomState>;
-  setPanZoomState: (state: Partial<PanZoomState>) => Promise<void>;
-  resetPanZoom: () => Promise<void>;
-}
-
-// Pan/Zoom types
-interface PanZoomState {
-  panX: number;      // Horizontal pan (-1 to 1, 0 = center)
-  panY: number;      // Vertical pan (-1 to 1, 0 = center)
-  zoomLevel: number; // Zoom level (1 to 5, 1 = no zoom)
-}
-
-interface PanZoomVideoOptions {
-  assetId: string;
-  panX: number;
-  panY: number;
-  zoomLevel: number;
-  startTime?: number;
-  endTime?: number;
-}
+TwoStepVideo.Mirror.BOTH        // Flip both
 ```
 
-## Advanced Usage
-
-### Create a Highlight Reel
+## TypeScript Types
 
 ```typescript
-async function createHighlightReel(videoUri: string) {
-  const asset = await TwoStepVideo.loadAsset({ uri: videoUri });
-
-  // Extract 3-second clips evenly throughout video
-  const numClips = 5;
-  const interval = asset.duration / (numClips + 1);
-
-  const segments = Array.from({ length: numClips }, (_, i) => ({
-    start: interval * (i + 1),
-    end: Math.min(interval * (i + 1) + 3, asset.duration)
-  }));
-
-  const composition = await TwoStepVideo.trimVideoMultiple({
-    assetId: asset.id,
-    segments
-  });
-
-  return await TwoStepVideo.exportVideo({
-    compositionId: composition.id,
-    quality: TwoStepVideo.Quality.HIGH
-  });
-}
-```
-
-### Selfie Video Mirror & Loop
-
-A complete example for processing selfie videos with mirror correction and perfect loops:
-
-```tsx
-import React, { useState, useRef, useEffect } from 'react';
-import { View, Button, Text, StyleSheet, ActivityIndicator } from 'react-native';
-import * as TwoStepVideo from 'expo-twostep-video';
-import { TwoStepVideoView, TwoStepVideoViewRef } from 'expo-twostep-video';
-
-interface Props {
-  videoUri: string;
-}
-
-function SelfieVideoEditor({ videoUri }: Props) {
-  const playerRef = useRef<TwoStepVideoViewRef>(null);
-  const [asset, setAsset] = useState<TwoStepVideo.VideoAsset | null>(null);
-  const [composition, setComposition] = useState<TwoStepVideo.VideoComposition | null>(null);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [exportProgress, setExportProgress] = useState(0);
-
-  // Load the video asset
-  useEffect(() => {
-    async function loadVideo() {
-      const loaded = await TwoStepVideo.loadAsset({ uri: videoUri });
-      setAsset(loaded);
-    }
-    loadVideo();
-
-    return () => {
-      // Cleanup on unmount
-      TwoStepVideo.releaseAll();
-    };
-  }, [videoUri]);
-
-  // Mirror the selfie video (fix the mirror effect from front camera)
-  const handleMirror = async () => {
-    if (!asset) return;
-    setIsProcessing(true);
-
-    const mirrored = await TwoStepVideo.mirrorVideo({
-      assetId: asset.id,
-      axis: 'horizontal'
-    });
-
-    setComposition(mirrored);
-    setIsProcessing(false);
-  };
-
-  // Create a slow-motion effect
-  const handleSlowMo = async () => {
-    if (!asset) return;
-    setIsProcessing(true);
-
-    const slowMo = await TwoStepVideo.adjustSpeed({
-      assetId: asset.id,
-      speed: 0.5  // Half speed
-    });
-
-    setComposition(slowMo);
-    setIsProcessing(false);
-  };
-
-  // Mirror + slow motion combined
-  const handleMirrorAndSlowMo = async () => {
-    if (!asset) return;
-    setIsProcessing(true);
-
-    const transformed = await TwoStepVideo.transformVideo({
-      assetId: asset.id,
-      speed: 0.5,
-      mirrorAxis: 'horizontal'
-    });
-
-    setComposition(transformed);
-    setIsProcessing(false);
-  };
-
-  // Create a perfect loop for social media
-  const handleCreateLoop = async () => {
-    if (!asset) return;
-    setIsProcessing(true);
-
-    // Loop the first 3 seconds to create 15 seconds of content
-    const looped = await TwoStepVideo.loopSegment({
-      assetId: asset.id,
-      startTime: 0,
-      endTime: 3,
-      loopCount: 4  // 3s * 5 plays = 15 seconds
-    });
-
-    setComposition(looped);
-    setIsProcessing(false);
-    console.log(`Created ${looped.totalPlays}-play loop, ${looped.duration}s duration`);
-  };
-
-  // Export the result
-  const handleExport = async () => {
-    if (!composition) return;
-
-    const subscription = TwoStepVideo.addExportProgressListener((event) => {
-      setExportProgress(event.progress);
-    });
-
-    try {
-      const result = await TwoStepVideo.exportVideo({
-        compositionId: composition.id,
-        quality: 'high'
-      });
-
-      alert(`Exported to: ${result.uri}`);
-    } finally {
-      subscription.remove();
-      setExportProgress(0);
-    }
-  };
-
-  if (!asset) {
-    return <ActivityIndicator size="large" />;
-  }
-
-  return (
-    <View style={styles.container}>
-      {/* Video Player */}
-      <TwoStepVideoView
-        ref={playerRef}
-        compositionId={composition?.id}
-        assetId={!composition ? asset.id : undefined}
-        loop={true}
-        style={styles.video}
-      />
-
-      {/* Video Info */}
-      <Text style={styles.info}>
-        Duration: {composition?.duration.toFixed(1) || asset.duration.toFixed(1)}s |
-        Size: {asset.width}x{asset.height}
-      </Text>
-
-      {/* Processing Indicator */}
-      {isProcessing && <ActivityIndicator size="small" />}
-
-      {/* Transformation Buttons */}
-      <View style={styles.buttons}>
-        <Button title="Mirror" onPress={handleMirror} disabled={isProcessing} />
-        <Button title="Slow-Mo" onPress={handleSlowMo} disabled={isProcessing} />
-        <Button title="Mirror + Slow" onPress={handleMirrorAndSlowMo} disabled={isProcessing} />
-        <Button title="Create Loop" onPress={handleCreateLoop} disabled={isProcessing} />
-      </View>
-
-      {/* Playback Controls */}
-      <View style={styles.controls}>
-        <Button title="Play" onPress={() => playerRef.current?.play()} />
-        <Button title="Pause" onPress={() => playerRef.current?.pause()} />
-        <Button title="Replay" onPress={() => playerRef.current?.replay()} />
-      </View>
-
-      {/* Export */}
-      {composition && (
-        <View style={styles.export}>
-          <Button title="Export Video" onPress={handleExport} />
-          {exportProgress > 0 && (
-            <Text>Exporting: {Math.round(exportProgress * 100)}%</Text>
-          )}
-        </View>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { flex: 1, padding: 16 },
-  video: { width: '100%', height: 300, backgroundColor: '#000' },
-  info: { textAlign: 'center', marginVertical: 8 },
-  buttons: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginVertical: 8 },
-  controls: { flexDirection: 'row', justifyContent: 'center', gap: 16 },
-  export: { marginTop: 16, alignItems: 'center' },
-});
-
-export default SelfieVideoEditor;
-```
-
-### Timestamp-Based Effects
-
-Apply different effects to specific timestamps/segments of a video:
-
-```typescript
-import * as TwoStepVideo from 'expo-twostep-video';
-
-async function applyTimestampEffects(videoUri: string) {
-  const asset = await TwoStepVideo.loadAsset({ uri: videoUri });
-
-  // Example: Mirror only the segment from 5s to 10s
-  const mirroredSegment = await TwoStepVideo.mirrorVideo({
-    assetId: asset.id,
-    axis: 'horizontal',
-    startTime: 5,
-    endTime: 10
-  });
-
-  // Example: Speed up only a boring middle section (10s to 30s at 4x speed)
-  const timelapseMiddle = await TwoStepVideo.adjustSpeed({
-    assetId: asset.id,
-    speed: 4.0,
-    startTime: 10,
-    endTime: 30
-  });
-
-  // Example: Transform a specific segment (trim + mirror + speed)
-  const transformedClip = await TwoStepVideo.transformVideo({
-    assetId: asset.id,
-    speed: 0.5,          // Slow motion
-    mirrorAxis: 'horizontal',
-    startTime: 45,       // Best moment starts at 45s
-    endTime: 50          // 5 seconds of slow-mo mirrored footage
-  });
-
-  return transformedClip;
-}
-```
-
-### Create Social Media Loop with Mirror
-
-Perfect for TikTok/Instagram Reels - select a short segment, mirror it, and loop it:
-
-```typescript
-async function createSocialMediaLoop(
-  videoUri: string,
-  startTime: number,
-  endTime: number,
-  targetDuration: number = 15
-) {
-  const asset = await TwoStepVideo.loadAsset({ uri: videoUri });
-
-  // First, create the mirrored and trimmed base clip
-  const mirroredClip = await TwoStepVideo.transformVideo({
-    assetId: asset.id,
-    mirrorAxis: 'horizontal',
-    startTime,
-    endTime
-  });
-
-  // Export the mirrored clip first (loopSegment needs the original asset)
-  const exportedMirror = await TwoStepVideo.exportVideo({
-    compositionId: mirroredClip.id,
-    quality: 'high'
-  });
-
-  // Load the exported mirrored video
-  const mirroredAsset = await TwoStepVideo.loadAsset({
-    uri: exportedMirror.uri
-  });
-
-  // Calculate how many loops needed to reach target duration
-  const clipDuration = endTime - startTime;
-  const loopCount = Math.ceil(targetDuration / clipDuration) - 1;
-
-  // Create the loop
-  const looped = await TwoStepVideo.loopSegment({
-    assetId: mirroredAsset.id,
-    startTime: 0,
-    endTime: mirroredAsset.duration,
-    loopCount
-  });
-
-  console.log(`Created ${looped.duration}s loop from ${clipDuration}s clip`);
-
-  // Export final result
-  const result = await TwoStepVideo.exportVideo({
-    compositionId: looped.id,
-    quality: 'high'
-  });
-
-  // Cleanup intermediate files
-  TwoStepVideo.cleanupFile(exportedMirror.uri);
-
-  return result;
-}
-
-// Usage
-const socialLoop = await createSocialMediaLoop(
-  'file:///path/to/selfie.mp4',
-  5.0,   // Start at 5 seconds
-  8.0,   // End at 8 seconds (3 second clip)
-  15     // Target 15 seconds for Instagram
-);
-```
-
-### With Progress Bar
-
-```typescript
-function VideoExporter({ videoUri }) {
-  const progress = TwoStepVideo.useExportProgress();
-
-  return (
-    <View>
-      <ProgressBar progress={progress} />
-      <Text>{Math.round(progress * 100)}%</Text>
-    </View>
-  );
-}
-```
-
-## Development
-
-This module contains both the Swift library and Expo bridge in one package.
-
-### Running Tests
-
-```bash
-# Run Swift unit tests
-npm run test:swift
-
-# All tests should pass:
-# ✅ 69 tests executed, 20 skipped (integration tests)
-```
-
-### Building
-
-```bash
-# Build TypeScript
-npm run build
-
-# Clean build artifacts
-npm run clean
-```
-
-### Running Example App
-
-```bash
-cd example
-npm install
-npm run ios
-```
-
-## Architecture
-
-```
-expo-twostep-video/
-├── ios/
-│   ├── TwoStepVideo/           # Swift library
-│   │   ├── Models/             # Data models
-│   │   ├── Core/               # Core functionality
-│   │   └── TwoStepVideo.swift  # Main facade
-│   ├── Tests/                   # Swift unit tests
-│   ├── ExpoTwoStepVideoModule.swift  # Expo bridge
-│   └── Package.swift            # Swift package for testing
-├── src/
-│   └── index.ts                 # TypeScript API
-├── example/                     # Example React Native app
-└── docs/                        # Documentation
+import type {
+  VideoAsset,
+  VideoComposition,
+  ExportResult,
+  LoopResult,
+  TwoStepVideoViewRef,
+  TwoStepVideoViewProps,
+  PanZoomState,
+  MirrorAxis,
+  VideoQuality,
+  VideoScrubberProps,
+  VideoScrubberRef,
+  VideoScrubberTheme,
+} from 'expo-twostep-video';
 ```
 
-## Documentation
-
-- [Architecture](./docs/ARCHITECTURE.md) - Design and implementation details
-- [Developer Guide](./docs/CLAUDE.md) - Best practices and patterns
-- [Temp File Management](./docs/TEMP_FILE_MANAGEMENT.md) - File cleanup strategies
-
-## Requirements
-
-- iOS 15.0+
-- Expo SDK 50+
-- React Native 0.72+
-
 ## Platform Support
 
 - ✅ iOS (fully supported)
 - ⏳ Android (coming soon)
 
-## Error Handling
-
-All errors include descriptive codes and messages:
-
-```typescript
-try {
-  await TwoStepVideo.exportVideo(options);
-} catch (error: any) {
-  switch (error.code) {
-    case 'EXPORT_FAILED':
-      // Handle export failure
-      break;
-    case 'ASSET_NOT_FOUND':
-      // Asset was released too early
-      break;
-    default:
-      console.error('Unknown error:', error);
-  }
-}
-```
-
-## Performance Tips
-
-1. **Release resources promptly** after use
-2. **Use `releaseAll()`** when unmounting components
-3. **Validate URIs** before loading with `validateVideoUri()`
-4. **Clean up temp files** after moving/uploading
-
-## Contributing
-
-Contributions welcome! Please see [CONTRIBUTING](./docs/CONTRIBUTING.md).
-
 ## License
 
 MIT © Richard Guo
 
-## Support
-
-- 📧 Email: richardg7890@gmail.com
-- 🐛 Issues: [GitHub Issues](https://github.com/rguo123/twostep-video/issues)
-- 📚 Docs: [Full Documentation](./docs/)
-
-## Acknowledgments
+## Links
 
-Built with AVFoundation and Expo Modules.
+- [GitHub Repository](https://github.com/rguo123/twostep-video)
+- [Issue Tracker](https://github.com/rguo123/twostep-video/issues)