@technotoil/image-video-editor 0.1.0 → 0.1.2

package/lib/typescript/src/components/VideoEditor.d.ts

@@ -2,12 +2,28 @@ import React from 'react';
 import type { MediaItem, MusicTrack } from '../types';
 export interface VideoEditorProps {
     onClose?: () => void;
-    onFinishExport?: (editedMedia: Record<string, MediaItem>, paths: string[], editedArray: MediaItem[], cameraMode?: string) => void;
+    onFinishExport?: (editedMedia: Record<string, MediaItem>, paths: string[], editedArray: MediaItem[], cameraMode?: string, globalMusic?: MusicTrack) => void;
     headerTitle?: string;
     customCancelIcon?: React.ReactNode;
     onCancelPress?: () => void;
     cameraModes?: string[];
     defaultCameraMode?: string;
     musicList?: MusicTrack[];
+    /** Maximum number of media items user can select. Default: 1, Max allowed: 5 */
+    maxSelection?: number;
+    /**
+     * Enforce a fixed aspect ratio for image/video preview.
+     * '1:1' = Square, '4:3' = Standard, '4:5' = Instagram Portrait,
+     * '16:9' = Landscape, '9:16' = Portrait, 'free' = No restriction (default)
+     */
+    aspectRatio?: '1:1' | '4:3' | '4:5' | '16:9' | '9:16' | 'free';
+    /**
+     * Maximum video duration allowed (in milliseconds).
+     */
+    maxVideoDurationMs?: number;
+    /** Filter the media type that can be picked. Default: 'any' */
+    mediaType?: 'photo' | 'video' | 'any';
+    /** Control which tabs are shown in the picker. Default: ['GALLERY', 'PHOTO', 'VIDEO'] */
+    mediaTabs?: ('GALLERY' | 'PHOTO' | 'VIDEO')[];
 }
-export default function VideoEditor({ onClose, onFinishExport, headerTitle, customCancelIcon, onCancelPress, cameraModes, defaultCameraMode, musicList, }: VideoEditorProps): React.JSX.Element;
+export default function VideoEditor({ onClose, onFinishExport, headerTitle, customCancelIcon, onCancelPress, cameraModes, defaultCameraMode, musicList, maxSelection, aspectRatio, maxVideoDurationMs, mediaType, mediaTabs, }: VideoEditorProps): React.JSX.Element;

package/lib/typescript/src/screens/CropScreen.d.ts

@@ -4,6 +4,8 @@ interface CropScreenProps {
     item: MediaItem;
     onBack: () => void;
     onSave: (uri: string, thumb?: string, duration?: number) => void;
+    aspectRatio?: '1:1' | '4:3' | '4:5' | '16:9' | '9:16' | 'free';
+    maxVideoDurationMs?: number;
 }
-export declare function CropScreen({ item, onBack, onSave }: CropScreenProps): React.JSX.Element;
+export declare function CropScreen({ item, onBack, onSave, aspectRatio, maxVideoDurationMs }: CropScreenProps): React.JSX.Element;
 export {};

package/lib/typescript/src/screens/EditorScreen.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { MediaItem, MusicTrack } from '../types';
-export declare function EditorScreen({ items, initialIndex, onBack, onSaved, onOpenCrop, musicList, }: {
+export declare function EditorScreen({ items, initialIndex, onBack, onSaved, onOpenCrop, musicList, maxVideoDurationMs, }: {
     items: MediaItem[];
     initialIndex?: number;
     onBack: () => void;
     onSaved: (updatedItems: MediaItem[]) => void;
     onOpenCrop: (item: MediaItem) => void;
     musicList?: MusicTrack[];
+    maxVideoDurationMs?: number;
 }): React.JSX.Element;

package/lib/typescript/src/screens/PickScreen.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MediaItem } from '../types';
-export declare function PickScreen({ items, onPicked, onNext, headerTitle, customCancelIcon, onCancelPress, cameraModes, onCameraModeChange, defaultCameraMode, }: {
+export declare function PickScreen({ isActive, items, onPicked, onNext, headerTitle, customCancelIcon, onCancelPress, cameraModes, onCameraModeChange, defaultCameraMode, maxSelection, aspectRatio, mediaType, mediaTabs, }: {
     items: MediaItem[];
     onPicked: (items: MediaItem[]) => void;
     onNext: (picked: MediaItem[]) => void;
@@ -10,4 +10,9 @@ export declare function PickScreen({ items, onPicked, onNext, headerTitle, custo
     cameraModes?: string[];
     onCameraModeChange?: (mode: string) => void;
     defaultCameraMode?: string;
+    maxSelection?: number;
+    aspectRatio?: '1:1' | '4:3' | '4:5' | '16:9' | '9:16' | 'free';
+    mediaType?: 'photo' | 'video' | 'any';
+    mediaTabs?: ('GALLERY' | 'PHOTO' | 'VIDEO')[];
+    isActive?: boolean;
 }): React.JSX.Element;

package/lib/typescript/src/types.d.ts

@@ -52,6 +52,7 @@ export type VideoTrimOptions = ImageEditOptions & {
     mute?: boolean;
     isImage?: boolean;
     musicUri?: string;
+    musicOffsetMs?: number;
 };
 export type FrameCaptureOptions = {
     timeMs: number;

package/package.json

@@ -1,16 +1,21 @@
 {
   "name": "@technotoil/image-video-editor",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A high-performance React Native image and video editor featuring video trimming, filters, photo overlay frames, and camera/gallery integration.",
-  "main": "./lib/module/index.js",
-  "types": "./lib/typescript/src/index.d.ts",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.tsx",
-      "types": "./lib/typescript/src/index.d.ts",
-      "default": "./lib/module/index.js"
-    },
-    "./package.json": "./package.json"
+      "import": {
+        "types": "./lib/typescript/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
   },
   "files": [
     "src",
@@ -90,6 +95,7 @@
     "source": "src",
     "output": "lib",
     "targets": [
+      "commonjs",
       [
         "module",
         {
@@ -97,5 +103,8 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "react-native-fs": "^2.20.0"
   }
 }

package/src/components/VideoEditor.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Alert, StatusBar, useColorScheme } from 'react-native';
+import { Alert, StatusBar, useColorScheme, View, Text, ActivityIndicator } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { PickScreen } from '../screens/PickScreen';
 import { CropScreen } from '../screens/CropScreen';
@@ -7,6 +7,9 @@ import { EditorScreen } from '../screens/EditorScreen';
 import { ExportScreen } from '../screens/ExportScreen';
 import { exportAsset } from '../native/MediaLibrary';
 import type { MediaItem, MusicTrack } from '../types';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+Ionicons.loadFont().catch(() => {});
 
 export interface VideoEditorProps {
   onClose?: () => void;
@@ -14,7 +17,8 @@ export interface VideoEditorProps {
     editedMedia: Record<string, MediaItem>,
     paths: string[],
     editedArray: MediaItem[],
-    cameraMode?: string
+    cameraMode?: string,
+    globalMusic?: MusicTrack
   ) => void;
   headerTitle?: string;
   customCancelIcon?: React.ReactNode;
@@ -22,6 +26,22 @@ export interface VideoEditorProps {
   cameraModes?: string[];
   defaultCameraMode?: string;
   musicList?: MusicTrack[];
+  /** Maximum number of media items user can select. Default: 1, Max allowed: 5 */
+  maxSelection?: number;
+  /**
+   * Enforce a fixed aspect ratio for image/video preview.
+   * '1:1' = Square, '4:3' = Standard, '4:5' = Instagram Portrait,
+   * '16:9' = Landscape, '9:16' = Portrait, 'free' = No restriction (default)
+   */
+  aspectRatio?: '1:1' | '4:3' | '4:5' | '16:9' | '9:16' | 'free';
+  /**
+   * Maximum video duration allowed (in milliseconds).
+   */
+  maxVideoDurationMs?: number;
+  /** Filter the media type that can be picked. Default: 'any' */
+  mediaType?: 'photo' | 'video' | 'any';
+  /** Control which tabs are shown in the picker. Default: ['GALLERY', 'PHOTO', 'VIDEO'] */
+  mediaTabs?: ('GALLERY' | 'PHOTO' | 'VIDEO')[];
 }
 
 export default function VideoEditor({
@@ -33,7 +53,13 @@ export default function VideoEditor({
   cameraModes,
   defaultCameraMode,
   musicList,
+  maxSelection = 1,
+  aspectRatio = 'free',
+  maxVideoDurationMs,
+  mediaType = 'any',
+  mediaTabs = ['GALLERY', 'PHOTO', 'VIDEO'],
 }: VideoEditorProps) {
+  const clampedMax = Math.min(5, Math.max(1, maxSelection));
   const isDarkMode = useColorScheme() === 'dark';
   const [screen, setScreen] = useState<'pick' | 'editor' | 'crop' | 'export'>('pick');
   const [items, setItems] = useState<MediaItem[]>([]);
@@ -41,19 +67,31 @@ export default function VideoEditor({
   const [editedMedia, setEditedMedia] = useState<Record<string, MediaItem>>({});
   const [originals, setOriginals] = useState<Record<string, MediaItem>>({});
   const [selectedCameraMode, setSelectedCameraMode] = useState<string>(defaultCameraMode || 'STORY');
+  const [processing, setProcessing] = useState(false);
+  const [exportCache, setExportCache] = useState<Record<string, string>>({});
 
   const ensureExported = async (item: MediaItem, ignoreEdits = false): Promise<MediaItem> => {
+    console.log(`[ensureExported] Start for item: ${item.id}, uri: ${item.uri}`);
     if (!ignoreEdits && editedMedia[item.id]) {
+      console.log(`[ensureExported] Found in editedMedia! Returning early.`);
       return editedMedia[item.id];
     }
+    if (exportCache[item.id]) {
+      console.log(`[ensureExported] Found in exportCache! Returning cached URI: ${exportCache[item.id]}`);
+      return { ...item, uri: exportCache[item.id] };
+    }
     if (!item.uri.startsWith('ph://') && !item.uri.startsWith('content://')) {
+      console.log(`[ensureExported] URI is already local file, skipping native export.`);
       return item;
     }
     try {
+      console.log(`[ensureExported] Calling native exportAsset...`);
       const fileUri = await exportAsset(item.id);
+      console.log(`[ensureExported] Native export success! New URI: ${fileUri}`);
+      setExportCache(prev => ({ ...prev, [item.id]: fileUri }));
       return { ...item, uri: fileUri };
     } catch (err: any) {
-      console.error('ASSET EXPORT FROM LIBRARY FAILED:', err?.message ?? err);
+      console.error('[ensureExported] ASSET EXPORT FROM LIBRARY FAILED:', err?.message ?? err);
       return item;
     }
   };
@@ -66,17 +104,22 @@ export default function VideoEditor({
           backgroundColor="transparent"
           translucent={true}
         />
-        {screen === 'pick' && (
+        <View style={{ flex: 1, display: screen === 'pick' ? 'flex' : 'none' }}>
           <PickScreen
+            isActive={screen === 'pick'}
             items={items}
             headerTitle={headerTitle}
             customCancelIcon={customCancelIcon}
             onCancelPress={onCancelPress || onClose}
             cameraModes={cameraModes}
             defaultCameraMode={defaultCameraMode}
+            maxSelection={clampedMax}
+            aspectRatio={aspectRatio}
             onCameraModeChange={(mode) => {
               setSelectedCameraMode(mode);
             }}
+            mediaType={mediaType}
+            mediaTabs={mediaTabs}
             onPicked={(picked: MediaItem[]) => {
               // Save originals for "Fresh Start" editing
               const newOriginals = { ...originals };
@@ -88,22 +131,48 @@ export default function VideoEditor({
               setItems(picked);
             }}
             onNext={async (picked) => {
+              console.log(`[onNext] Triggered with ${picked?.length} items`);
+              if (processing) {
+                console.log(`[onNext] Aborting, already processing!`);
+                return;
+              }
               if (!picked || picked.length === 0) {
+                console.log(`[onNext] Aborting, picked is empty!`);
                 return;
               }
-              const resolvedItems = await Promise.all(
-                picked.map(item => ensureExported(item, false))
-              );
-              setItems(resolvedItems);
-              setCurrent(resolvedItems[0]);
-              setScreen('editor');
+              console.log(`[onNext] Setting processing=true`);
+              setProcessing(true);
+              
+              try {
+                console.log(`[onNext] Starting Promise.all for ${picked.length} items`);
+                const resolvedItems = await Promise.all(
+                  picked.map(item => ensureExported(item, false))
+                );
+                
+                console.log(`[onNext] Promise.all completed! Updating state...`);
+                setItems(resolvedItems);
+                setCurrent(resolvedItems[0]);
+                setScreen('editor');
+                console.log(`[onNext] Screen set to editor`);
+              } catch (e) {
+                console.error(`[onNext] Promise.all threw an error!`, e);
+              } finally {
+                console.log(`[onNext] Finally block - setting processing=false`);
+                setProcessing(false);
+              }
             }}
           />
-        )}
+          {processing && (
+            <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
+              <ActivityIndicator size="large" color="#ffffff" />
+            </View>
+          )}
+        </View>
         {screen === 'editor' && current && (
            <EditorScreen 
             items={items}
             initialIndex={Math.max(0, items.findIndex(it => it.id === current.id))}
+            maxVideoDurationMs={maxVideoDurationMs}
             onBack={() => {
               setEditedMedia({});
               const restoredItems = items.map(item => originals[item.id] || item);
@@ -143,6 +212,8 @@ export default function VideoEditor({
         {screen === 'crop' && current && (
           <CropScreen
             item={current}
+            aspectRatio={aspectRatio}
+            maxVideoDurationMs={maxVideoDurationMs}
             onBack={() => setScreen('editor')}
             onSave={(uri, thumbnailUri, durationMs) => {
               const updated = {

package/src/screens/CropScreen.tsx

@@ -99,12 +99,21 @@ interface CropScreenProps {
   item: MediaItem;
   onBack: () => void;
   onSave: (uri: string, thumb?: string, duration?: number) => void;
+  aspectRatio?: '1:1' | '4:3' | '4:5' | '16:9' | '9:16' | 'free';
+  maxVideoDurationMs?: number;
 }
-export function CropScreen({ item, onBack, onSave }: CropScreenProps) {
+export function CropScreen({ item, onBack, onSave, aspectRatio = 'free', maxVideoDurationMs }: CropScreenProps) {
+  const isRatioLocked = aspectRatio !== 'free';
+  const getInitialRatioLabel = () => {
+    if (!aspectRatio || aspectRatio === 'free') return 'Free';
+    if (aspectRatio === '1:1') return 'Square';
+    return aspectRatio; // '4:3', '4:5', '16:9', '9:16'
+  };
+
   const [straightenAngle, setStraightenAngle] = useState(0);
   const [rotation, setRotation] = useState(0);
-  const [selectedRatio, setSelectedRatio] = useState<string>('Free');
-  const [isFixedRatio, setIsFixedRatio] = useState(false);
+  const [selectedRatio, setSelectedRatio] = useState<string>(getInitialRatioLabel());
+  const [isFixedRatio, setIsFixedRatio] = useState(isRatioLocked);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
 
@@ -394,9 +403,13 @@ export function CropScreen({ item, onBack, onSave }: CropScreenProps) {
 
       const outUri = item.type === 'image'
         ? await editImage(item.uri, options)
-        : await trimVideo(item.uri, { startMs: 0, endMs: item.durationMs || 10000, ...options });
+        : await trimVideo(item.uri, { startMs: 0, endMs: maxVideoDurationMs ? Math.min(item.durationMs || 10000, maxVideoDurationMs) : (item.durationMs || 10000), ...options });
 
-      onSave(outUri, item.type === 'image' ? outUri : undefined, item.durationMs);
+      const clampedDuration = item.type === 'video' && maxVideoDurationMs 
+        ? Math.min(item.durationMs || 10000, maxVideoDurationMs) 
+        : item.durationMs;
+
+      onSave(outUri, item.type === 'image' ? outUri : undefined, clampedDuration);
     } catch (err: any) {
       Alert.alert('Apply failed', err?.message ?? 'Could not process crop.');
     } finally {
@@ -409,8 +422,8 @@ export function CropScreen({ item, onBack, onSave }: CropScreenProps) {
     setRotation(0);
     setFlipX(false);
     setFlipY(false);
-    setSelectedRatio('Free');
-    setIsFixedRatio(false);
+    setSelectedRatio(getInitialRatioLabel());
+    setIsFixedRatio(isRatioLocked);
   };
 
   const sliderPan = useRef(
@@ -565,9 +578,15 @@ export function CropScreen({ item, onBack, onSave }: CropScreenProps) {
             <View style={styles.panelTitleContainer}>
               <Text style={styles.panelTitle}>Aspect Ratio</Text>
             </View>
-            <Pressable style={[styles.fixedRatioBtn, isFixedRatio && styles.fixedRatioBtnActive]} onPress={() => setIsFixedRatio(!isFixedRatio)}>
-              <Text style={styles.fixedRatioText}>{isFixedRatio ? 'Locked' : 'Unlocked'}</Text>
-            </Pressable>
+            {!isRatioLocked ? (
+              <Pressable style={[styles.fixedRatioBtn, isFixedRatio && styles.fixedRatioBtnActive]} onPress={() => setIsFixedRatio(!isFixedRatio)}>
+                <Text style={styles.fixedRatioText}>{isFixedRatio ? 'Locked' : 'Unlocked'}</Text>
+              </Pressable>
+            ) : (
+              <View style={[styles.fixedRatioBtn, styles.fixedRatioBtnActive, { opacity: 0.7 }]}>
+                <Text style={styles.fixedRatioText}>Locked</Text>
+              </View>
+            )}
           </View>
 
           {/* Straighten Control */}
@@ -593,29 +612,31 @@ export function CropScreen({ item, onBack, onSave }: CropScreenProps) {
           </View>
 
           {/* Ratio Selector */}
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.ratioScroll} contentContainerStyle={styles.ratioContent}>
-            {ratios.map((r) => {
-              const isSelected = selectedRatio === r.label;
-              const boxRatio = r.ratio || 1;
-              // Limit box size for icon
-              const boxStyle = {
-                width: boxRatio > 1 ? 24 : 24 * boxRatio,
-                height: boxRatio > 1 ? 24 / boxRatio : 24,
-                borderWidth: 1.5,
-                borderColor: isSelected ? '#4A8CFF' : '#666',
-                borderRadius: 2,
-              };
-
-              return (
-                <Pressable key={r.label} style={styles.ratioItem} onPress={() => handleRatioSelect(r.label, r.ratio)}>
-                  <View style={[styles.ratioIconBox, isSelected && styles.ratioIconBoxActive]}>
-                    <View style={boxStyle} />
-                  </View>
-                  <Text style={[styles.ratioLabel, isSelected && styles.ratioLabelActive]}>{r.label}</Text>
-                </Pressable>
-              );
-            })}
-          </ScrollView>
+          {!isRatioLocked && (
+            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.ratioScroll} contentContainerStyle={styles.ratioContent}>
+              {ratios.map((r) => {
+                const isSelected = selectedRatio === r.label;
+                const boxRatio = r.ratio || 1;
+                // Limit box size for icon
+                const boxStyle = {
+                  width: boxRatio > 1 ? 24 : 24 * boxRatio,
+                  height: boxRatio > 1 ? 24 / boxRatio : 24,
+                  borderWidth: 1.5,
+                  borderColor: isSelected ? '#4A8CFF' : '#666',
+                  borderRadius: 2,
+                };
+
+                return (
+                  <Pressable key={r.label} style={styles.ratioItem} onPress={() => handleRatioSelect(r.label, r.ratio)}>
+                    <View style={[styles.ratioIconBox, isSelected && styles.ratioIconBoxActive]}>
+                      <View style={boxStyle} />
+                    </View>
+                    <Text style={[styles.ratioLabel, isSelected && styles.ratioLabelActive]}>{r.label}</Text>
+                  </Pressable>
+                );
+              })}
+            </ScrollView>
+          )}
 
           {/* Footer Status with Save Button */}
           <View style={styles.footerStatus}>