@technotoil/image-video-editor 0.1.1 → 0.1.2

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

@@ -2,7 +2,7 @@ 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;
@@ -17,5 +17,13 @@ export interface VideoEditorProps {
      * '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, maxSelection, aspectRatio, }: 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

@@ -5,6 +5,7 @@ interface CropScreenProps {
     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, aspectRatio }: 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, maxSelection, aspectRatio, }: {
+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;
@@ -12,4 +12,7 @@ export declare function PickScreen({ items, onPicked, onNext, headerTitle, custo
     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,6 +1,6 @@
 {
   "name": "@technotoil/image-video-editor",
-  "version": "0.1.1",
+  "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/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -103,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;
@@ -30,6 +34,14 @@ export interface VideoEditorProps {
    * '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({
@@ -43,6 +55,9 @@ export default function VideoEditor({
   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';
@@ -52,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;
     }
   };
@@ -77,8 +104,9 @@ 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}
@@ -90,6 +118,8 @@ export default function VideoEditor({
             onCameraModeChange={(mode) => {
               setSelectedCameraMode(mode);
             }}
+            mediaType={mediaType}
+            mediaTabs={mediaTabs}
             onPicked={(picked: MediaItem[]) => {
               // Save originals for "Fresh Start" editing
               const newOriginals = { ...originals };
@@ -101,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);
@@ -157,6 +213,7 @@ export default function VideoEditor({
           <CropScreen
             item={current}
             aspectRatio={aspectRatio}
+            maxVideoDurationMs={maxVideoDurationMs}
             onBack={() => setScreen('editor')}
             onSave={(uri, thumbnailUri, durationMs) => {
               const updated = {

package/src/screens/CropScreen.tsx

@@ -100,8 +100,9 @@ interface CropScreenProps {
   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, aspectRatio = 'free' }: CropScreenProps) {
+export function CropScreen({ item, onBack, onSave, aspectRatio = 'free', maxVideoDurationMs }: CropScreenProps) {
   const isRatioLocked = aspectRatio !== 'free';
   const getInitialRatioLabel = () => {
     if (!aspectRatio || aspectRatio === 'free') return 'Free';
@@ -402,9 +403,13 @@ export function CropScreen({ item, onBack, onSave, aspectRatio = 'free' }: CropS
 
       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 {