@technotoil/image-video-editor 0.1.1 → 0.1.2

package/lib/module/screens/EditorScreen.js

@@ -168,12 +168,16 @@ export function EditorScreen({
   onBack,
   onSaved,
   onOpenCrop,
-  musicList
+  musicList,
+  maxVideoDurationMs
 }) {
   const [activeIndex, setActiveIndex] = useState(initialIndex);
   const currentItem = items[activeIndex] || items[0];
   const item = currentItem; // Aliasing to 'item' for ease of compatibility
 
+  useEffect(() => {
+    setActiveIndex(initialIndex);
+  }, [initialIndex]);
   const [activeFilter, setActiveFilter] = useState('none');
   const [imageOptions, setImageOptions] = useState({
     rotateDegrees: 0,
@@ -184,13 +188,21 @@ export function EditorScreen({
     saturation: 1,
     grayscale: false
   });
+  const [panel, setPanel] = useState(item.type === 'video' ? 'trim' : 'filter');
   const [trimStart, setTrimStart] = useState(0);
-  const [trimEnd, setTrimEnd] = useState(item.durationMs || 10000);
+  const [trimEnd, setTrimEnd] = useState(() => {
+    const end = item.durationMs || 10000;
+    return maxVideoDurationMs ? Math.min(end, maxVideoDurationMs) : end;
+  });
   useEffect(() => {
     setTrimStart(0);
-    setTrimEnd(item.durationMs || 10000);
+    const end = item.durationMs || maxVideoDurationMs || 10000;
+    setTrimEnd(maxVideoDurationMs ? Math.min(end, maxVideoDurationMs) : end);
     setThumbnails([]);
-  }, [item.id, item.durationMs]);
+    if (item.type === 'video' && maxVideoDurationMs && end > maxVideoDurationMs) {
+      setPanel('trim');
+    }
+  }, [item.id, item.durationMs, maxVideoDurationMs]);
   const [editsHistory, setEditsHistory] = useState({});
   const editsHistoryRef = useRef({});
   const [dimensionsMap, setDimensionsMap] = useState({});
@@ -247,7 +259,7 @@ export function EditorScreen({
       setCropOffset(saved.cropOffset);
       setZoomScale(saved.zoomScale);
       setStraightenAngle(saved.straightenAngle);
-      setIsMuted(saved.isMuted);
+      setIsMuted(selectedMusic ? true : saved.isMuted);
     } else {
       setActiveFilter('none');
       setImageOptions({
@@ -260,7 +272,8 @@ export function EditorScreen({
         grayscale: false
       });
       setTrimStart(0);
-      setTrimEnd(targetItem.durationMs || 10000);
+      const end = targetItem.durationMs || 10000;
+      setTrimEnd(maxVideoDurationMs ? Math.min(end, maxVideoDurationMs) : end);
       setOverlays([]);
       setCropRatio(null);
       setCropOffset({
@@ -269,7 +282,14 @@ export function EditorScreen({
       });
       setZoomScale(1);
       setStraightenAngle(0);
-      setIsMuted(false);
+      setIsMuted(selectedMusic ? true : false);
+    }
+
+    // Force trim panel if video is too long
+    if (targetItem.type === 'video' && maxVideoDurationMs && targetItem.durationMs && targetItem.durationMs > maxVideoDurationMs) {
+      setPanel('trim');
+    } else if (!saved) {
+      setPanel(targetItem.type === 'video' ? 'trim' : 'filter');
     }
   };
   const handleScrollEnd = e => {
@@ -328,13 +348,13 @@ export function EditorScreen({
         y: (o.y + 8) * renderScale,
         color: o.color,
         fontSize: o.fontSize * renderScale
-      }))
+      })),
+      frameUri: edits.imageOptions.frame && FRAME_IMAGES[edits.imageOptions.frame] ? Image.resolveAssetSource(FRAME_IMAGES[edits.imageOptions.frame]).uri : undefined
     };
   };
   const [saving, setSaving] = useState(false);
   const [videoPaused, setVideoPaused] = useState(false);
-  const [panel, setPanel] = useState(item.type === 'video' ? 'trim' : 'filter');
-  const resolvedMusicList = musicList || DUMMY_MUSIC_LIST;
+  const resolvedMusicList = musicList || [];
   const [selectedMusic, setSelectedMusic] = useState(null);
   const [musicPaused, setMusicPaused] = useState(false);
   const [showMusicModal, setShowMusicModal] = useState(false);
@@ -1113,13 +1133,18 @@ export function EditorScreen({
         y: (o.y + 8) * renderScale,
         color: o.color,
         fontSize: o.fontSize * renderScale
-      }))
+      })),
+      frameUri: imageOptions.frame && FRAME_IMAGES[imageOptions.frame] ? Image.resolveAssetSource(FRAME_IMAGES[imageOptions.frame]).uri : undefined
     };
   }, [imageOptions, cropOffset, maxPan, dimensions, cropRatio, straightenAngle, overlays]);
 
   // For visual trim
 
   const duration = item.durationMs ?? 10_000;
+  const durationRef = useRef(duration);
+  useEffect(() => {
+    durationRef.current = duration;
+  }, [duration]);
   const formatTime = ms => {
     const totalSec = Math.floor(ms / 1000);
     const mins = Math.floor(totalSec / 60);
@@ -1181,6 +1206,39 @@ export function EditorScreen({
       generateThumbs();
     }
   }, [item.type, item.uri, duration, thumbnails.length]);
+  const leftOverlayRef = useRef(null);
+  const rightOverlayRef = useRef(null);
+  const selectionRangeRef = useRef(null);
+  const leftHandleRef = useRef(null);
+  const rightHandleRef = useRef(null);
+  const updateNativeRefs = (newStartX, newEndX) => {
+    leftOverlayRef.current?.setNativeProps({
+      style: {
+        width: newStartX
+      }
+    });
+    rightOverlayRef.current?.setNativeProps({
+      style: {
+        left: newEndX
+      }
+    });
+    selectionRangeRef.current?.setNativeProps({
+      style: {
+        left: newStartX,
+        width: newEndX - newStartX
+      }
+    });
+    leftHandleRef.current?.setNativeProps({
+      style: {
+        left: newStartX - 16
+      }
+    });
+    rightHandleRef.current?.setNativeProps({
+      style: {
+        left: newEndX - 16
+      }
+    });
+  };
   const startPanOffset = useRef(0);
   const startPan = useRef(PanResponder.create({
     onStartShouldSetPanResponder: () => true,
@@ -1194,20 +1252,76 @@ export function EditorScreen({
       setScrollEnabled(false);
     },
     onPanResponderMove: (_, gesture) => {
-      const newX = Math.max(0, Math.min(endX.current - 32, startPanOffset.current + gesture.dx));
+      let newX = Math.max(0, Math.min(endX.current - 32, startPanOffset.current + gesture.dx));
+      let newTime = newX / TIMELINE_WIDTH * durationRef.current;
+      const currentTrimEnd = endX.current / TIMELINE_WIDTH * durationRef.current;
+      if (maxVideoDurationMs && currentTrimEnd - newTime > maxVideoDurationMs) {
+        newTime = currentTrimEnd - maxVideoDurationMs;
+        newX = newTime / durationRef.current * TIMELINE_WIDTH;
+      }
       startX.current = newX;
-      const newTime = newX / TIMELINE_WIDTH * duration;
-      setTrimStart(newTime);
+      updateNativeRefs(newX, endX.current);
       throttledSeek(newTime);
     },
     onPanResponderRelease: () => {
       isDraggingHandle.current = false;
       setScrollEnabled(true);
+      setTrimStart(startX.current / TIMELINE_WIDTH * durationRef.current);
+      setTrimEnd(endX.current / TIMELINE_WIDTH * durationRef.current);
       setSeekToMs(-1);
     },
     onPanResponderTerminate: () => {
       isDraggingHandle.current = false;
       setScrollEnabled(true);
+      setTrimStart(startX.current / TIMELINE_WIDTH * durationRef.current);
+      setTrimEnd(endX.current / TIMELINE_WIDTH * durationRef.current);
+      setSeekToMs(-1);
+    }
+  })).current;
+  const middlePanOffsetStart = useRef(0);
+  const middlePanOffsetEnd = useRef(0);
+  const middlePan = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onStartShouldSetPanResponderCapture: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderGrant: () => {
+      pushToHistory();
+      middlePanOffsetStart.current = startX.current;
+      middlePanOffsetEnd.current = endX.current;
+      isDraggingHandle.current = true;
+      setScrollEnabled(false);
+    },
+    onPanResponderMove: (_, gesture) => {
+      const windowWidth = middlePanOffsetEnd.current - middlePanOffsetStart.current;
+      let newStartX = middlePanOffsetStart.current + gesture.dx;
+      let newEndX = middlePanOffsetEnd.current + gesture.dx;
+      if (newStartX < 0) {
+        newStartX = 0;
+        newEndX = windowWidth;
+      }
+      if (newEndX > TIMELINE_WIDTH) {
+        newEndX = TIMELINE_WIDTH;
+        newStartX = TIMELINE_WIDTH - windowWidth;
+      }
+      startX.current = newStartX;
+      endX.current = newEndX;
+      const newStartTime = newStartX / TIMELINE_WIDTH * durationRef.current;
+      updateNativeRefs(newStartX, newEndX);
+      throttledSeek(newStartTime);
+    },
+    onPanResponderRelease: () => {
+      isDraggingHandle.current = false;
+      setScrollEnabled(true);
+      setTrimStart(startX.current / TIMELINE_WIDTH * durationRef.current);
+      setTrimEnd(endX.current / TIMELINE_WIDTH * durationRef.current);
+      setSeekToMs(-1);
+    },
+    onPanResponderTerminate: () => {
+      isDraggingHandle.current = false;
+      setScrollEnabled(true);
+      setTrimStart(startX.current / TIMELINE_WIDTH * durationRef.current);
+      setTrimEnd(endX.current / TIMELINE_WIDTH * durationRef.current);
       setSeekToMs(-1);
     }
   })).current;
@@ -1224,20 +1338,29 @@ export function EditorScreen({
       setScrollEnabled(false);
     },
     onPanResponderMove: (_, gesture) => {
-      const newX = Math.min(TIMELINE_WIDTH, Math.max(startX.current + 32, endPanOffset.current + gesture.dx));
+      let newX = Math.min(TIMELINE_WIDTH, Math.max(startX.current + 32, endPanOffset.current + gesture.dx));
+      let newTime = newX / TIMELINE_WIDTH * durationRef.current;
+      const currentTrimStart = startX.current / TIMELINE_WIDTH * durationRef.current;
+      if (maxVideoDurationMs && newTime - currentTrimStart > maxVideoDurationMs) {
+        newTime = currentTrimStart + maxVideoDurationMs;
+        newX = newTime / durationRef.current * TIMELINE_WIDTH;
+      }
       endX.current = newX;
-      const newTime = newX / TIMELINE_WIDTH * duration;
-      setTrimEnd(newTime);
+      updateNativeRefs(startX.current, newX);
       throttledSeek(newTime);
     },
     onPanResponderRelease: () => {
       isDraggingHandle.current = false;
       setScrollEnabled(true);
+      setTrimStart(startX.current / TIMELINE_WIDTH * durationRef.current);
+      setTrimEnd(endX.current / TIMELINE_WIDTH * durationRef.current);
       setSeekToMs(-1);
     },
     onPanResponderTerminate: () => {
       isDraggingHandle.current = false;
       setScrollEnabled(true);
+      setTrimStart(startX.current / TIMELINE_WIDTH * durationRef.current);
+      setTrimEnd(endX.current / TIMELINE_WIDTH * durationRef.current);
       setSeekToMs(-1);
     }
   })).current;
@@ -2012,11 +2135,16 @@ export function EditorScreen({
           });
         }
       } else {
+        const safeEndMs = Math.min(trimEnd, item.durationMs || 10000);
+        const safeStartMs = Math.min(trimStart, Math.max(0, safeEndMs - 100));
+        const isFullTrim = trimStart === 0 && trimEnd >= (item.durationMs || 10000);
         exportUri = await trimVideo(item.uri, {
-          startMs: trimStart,
-          endMs: trimEnd,
+          startMs: safeStartMs,
+          endMs: safeEndMs,
           mute: isMuted,
-          musicUri: selectedMusic?.url || undefined,
+          ...(selectedMusic?.url ? {
+            musicUri: selectedMusic.url
+          } : {}),
           ...activeOptions
         });
       }
@@ -2033,6 +2161,7 @@ export function EditorScreen({
       setSaving(true);
       saveEditsForIndex(activeIndex);
       const updatedItems = [...items];
+      let cumulativeMusicOffsetMs = 0;
       for (let i = 0; i < items.length; i++) {
         const targetItem = items[i];
         let edits = editsHistoryRef.current[targetItem.id];
@@ -2058,6 +2187,7 @@ export function EditorScreen({
               outUri = await trimVideo(outUri, {
                 isImage: true,
                 musicUri: selectedMusic.url,
+                musicOffsetMs: cumulativeMusicOffsetMs,
                 rotateDegrees: 0,
                 flipX: false,
                 flipY: false,
@@ -2072,12 +2202,20 @@ export function EditorScreen({
               uri: outUri,
               thumbnailUri: outUri
             };
+            cumulativeMusicOffsetMs += 10000; // Images are 10s by default
           } else {
+            const originalDuration = targetItem.durationMs || maxVideoDurationMs || 10000;
+            const safeEndMs = Math.min(edits.trimEnd, originalDuration);
+            const safeStartMs = Math.min(edits.trimStart, Math.max(0, safeEndMs - 100));
+            const isFullTrim = edits.trimStart === 0 && edits.trimEnd >= originalDuration;
             const outUri = await trimVideo(targetItem.uri, {
-              startMs: edits.trimStart,
-              endMs: edits.trimEnd,
+              startMs: safeStartMs,
+              endMs: safeEndMs,
               mute: edits.isMuted,
-              musicUri: selectedMusic?.url || undefined,
+              ...(selectedMusic?.url ? {
+                musicUri: selectedMusic.url,
+                musicOffsetMs: cumulativeMusicOffsetMs
+              } : {}),
               ...opts
             });
             let newThumb = undefined;
@@ -2095,6 +2233,7 @@ export function EditorScreen({
               thumbnailUri: newThumb ? newThumb : targetItem.thumbnailUri,
               durationMs: newDuration
             };
+            cumulativeMusicOffsetMs += newDuration;
           }
         } else {
           if (selectedMusic) {
@@ -2103,6 +2242,7 @@ export function EditorScreen({
               outUri = await trimVideo(targetItem.uri, {
                 isImage: true,
                 musicUri: selectedMusic.url,
+                musicOffsetMs: cumulativeMusicOffsetMs,
                 rotateDegrees: 0,
                 flipX: false,
                 flipY: false,
@@ -2111,12 +2251,17 @@ export function EditorScreen({
                 saturation: 1,
                 grayscale: false
               });
+              cumulativeMusicOffsetMs += 10000;
             } else {
+              const safeEndMs = targetItem.durationMs || 10000;
               outUri = await trimVideo(targetItem.uri, {
                 startMs: 0,
-                endMs: targetItem.durationMs || 10000,
+                endMs: safeEndMs,
                 mute: isMuted,
-                musicUri: selectedMusic.url,
+                ...(selectedMusic?.url ? {
+                  musicUri: selectedMusic.url,
+                  musicOffsetMs: cumulativeMusicOffsetMs
+                } : {}),
                 rotateDegrees: 0,
                 flipX: false,
                 flipY: false,
@@ -2125,6 +2270,7 @@ export function EditorScreen({
                 saturation: 1,
                 grayscale: false
               });
+              cumulativeMusicOffsetMs += safeEndMs;
             }
             updatedItems[i] = {
               ...targetItem,
@@ -2666,7 +2812,15 @@ export function EditorScreen({
                     },
                     style: styles.filmstripImage
                   }, idx)), /*#__PURE__*/_jsx(View, {
-                    style: styles.timelineOverlay
+                    style: [styles.timelineOverlay, {
+                      left: 0,
+                      width: trimStart / duration * TIMELINE_WIDTH
+                    }]
+                  }), /*#__PURE__*/_jsx(View, {
+                    style: [styles.timelineOverlay, {
+                      left: trimEnd / duration * TIMELINE_WIDTH,
+                      right: 0
+                    }]
                   }), /*#__PURE__*/_jsx(View, {
                     style: [styles.selectionRange, {
                       left: trimStart / duration * TIMELINE_WIDTH,
@@ -2677,20 +2831,18 @@ export function EditorScreen({
                   style: [styles.customHandle, styles.customHandleLeft, {
                     left: trimStart / duration * TIMELINE_WIDTH - 16
                   }],
-                  ...startPan.panHandlers,
                   children: /*#__PURE__*/_jsx(View, {
                     style: styles.handleBarLine
                   })
                 }), /*#__PURE__*/_jsx(View, {
                   style: [styles.customHandle, styles.customHandleRight, {
-                    left: trimEnd / duration * TIMELINE_WIDTH
+                    left: trimEnd / duration * TIMELINE_WIDTH - 16
                   }],
-                  ...endPan.panHandlers,
                   children: /*#__PURE__*/_jsx(View, {
                     style: styles.handleBarLine
                   })
                 })]
-              }), /*#__PURE__*/_jsxs(Pressable, {
+              }), resolvedMusicList.length > 0 && /*#__PURE__*/_jsxs(Pressable, {
                 style: styles.subTrackRow,
                 onPress: () => setShowMusicModal(true),
                 children: [/*#__PURE__*/_jsx(Text, {
@@ -2971,7 +3123,7 @@ export function EditorScreen({
               style: styles.toolLabel,
               children: "Text"
             })]
-          }), /*#__PURE__*/_jsxs(Pressable, {
+          }), resolvedMusicList.length > 0 && /*#__PURE__*/_jsxs(Pressable, {
             style: [styles.toolButton, showMusicModal && styles.toolButtonActive],
             onPress: () => setShowMusicModal(true),
             children: [/*#__PURE__*/_jsx(View, {
@@ -3133,7 +3285,7 @@ export function EditorScreen({
           contentContainerStyle: [styles.toolButtonsRow, {
             flexGrow: 1
           }],
-          children: [/*#__PURE__*/_jsxs(Pressable, {
+          children: [resolvedMusicList.length > 0 && /*#__PURE__*/_jsxs(Pressable, {
             style: [styles.toolButton, showMusicModal && styles.toolButtonActive],
             onPress: () => setShowMusicModal(true),
             children: [/*#__PURE__*/_jsx(View, {
@@ -3302,6 +3454,12 @@ export function EditorScreen({
             data: items,
             extraData: [overlays, editingTextId, editsHistory, activeFilter, imageOptions, trimStart, trimEnd, isMuted, activeIndex],
             keyExtractor: it => it.id,
+            initialScrollIndex: activeIndex,
+            getItemLayout: (_, index) => ({
+              length: SCREEN_WIDTH,
+              offset: SCREEN_WIDTH * index,
+              index
+            }),
             horizontal: true,
             pagingEnabled: false,
             showsHorizontalScrollIndicator: false,
@@ -3412,7 +3570,7 @@ export function EditorScreen({
                   fontWeight: '700'
                 },
                 children: (() => {
-                  const selMs = trimEnd - trimStart;
+                  const selMs = (endX.current - startX.current) / TIMELINE_WIDTH * duration;
                   const totalSec = Math.floor(selMs / 1000);
                   return totalSec >= 60 ? `${Math.floor(totalSec / 60)}:${(totalSec % 60).toString().padStart(2, '0')} selected` : `${(selMs / 1000).toFixed(1)}s selected`;
                 })()
@@ -3423,30 +3581,54 @@ export function EditorScreen({
               }],
               children: [/*#__PURE__*/_jsxs(View, {
                 style: styles.filmstrip,
-                children: [thumbnails.map((uri, idx) => /*#__PURE__*/_jsx(Image, {
+                children: [thumbnails.length === 0 ? /*#__PURE__*/_jsx(View, {
+                  style: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                  },
+                  children: /*#__PURE__*/_jsx(ActivityIndicator, {
+                    color: "#ffffff",
+                    size: "small"
+                  })
+                }) : thumbnails.map((uri, idx) => /*#__PURE__*/_jsx(Image, {
                   source: {
                     uri
                   },
                   style: styles.filmstripImage
                 }, idx)), /*#__PURE__*/_jsx(View, {
-                  style: styles.timelineOverlay
+                  ref: leftOverlayRef,
+                  style: [styles.timelineOverlay, {
+                    left: 0,
+                    width: startX.current
+                  }]
                 }), /*#__PURE__*/_jsx(View, {
-                  style: [styles.selectionRange, {
-                    left: trimStart / duration * TIMELINE_WIDTH,
-                    width: (trimEnd - trimStart) / duration * TIMELINE_WIDTH
+                  ref: rightOverlayRef,
+                  style: [styles.timelineOverlay, {
+                    left: endX.current,
+                    right: 0
                   }]
+                }), /*#__PURE__*/_jsx(View, {
+                  ref: selectionRangeRef,
+                  style: [styles.selectionRange, {
+                    left: startX.current,
+                    width: endX.current - startX.current
+                  }],
+                  ...middlePan.panHandlers
                 })]
               }), /*#__PURE__*/_jsx(View, {
+                ref: leftHandleRef,
                 style: [styles.customHandle, styles.customHandleLeft, {
-                  left: trimStart / duration * TIMELINE_WIDTH - 16
+                  left: startX.current - 16
                 }],
                 ...startPan.panHandlers,
                 children: /*#__PURE__*/_jsx(View, {
                   style: styles.handleBarLine
                 })
               }), /*#__PURE__*/_jsx(View, {
+                ref: rightHandleRef,
                 style: [styles.customHandle, styles.customHandleRight, {
-                  left: trimEnd / duration * TIMELINE_WIDTH
+                  left: endX.current - 16
                 }],
                 ...endPan.panHandlers,
                 children: /*#__PURE__*/_jsx(View, {
@@ -3724,7 +3906,7 @@ export function EditorScreen({
             contentContainerStyle: [styles.toolButtonsRow, {
               flexGrow: 1
             }],
-            children: [/*#__PURE__*/_jsxs(Pressable, {
+            children: [resolvedMusicList.length > 0 && /*#__PURE__*/_jsxs(Pressable, {
               style: [styles.toolButton, showMusicModal && styles.toolButtonActive],
               onPress: () => setShowMusicModal(true),
               children: [/*#__PURE__*/_jsx(View, {
@@ -4032,6 +4214,7 @@ export function EditorScreen({
               onPress: () => {
                 setSelectedMusic(null);
                 setMusicPaused(true);
+                setIsMuted(false);
               },
               style: styles.musicFooterRemoveBtn,
               children: /*#__PURE__*/_jsx(Text, {
@@ -4799,7 +4982,9 @@ const styles = StyleSheet.create({
     height: 60
   },
   timelineOverlay: {
-    ...StyleSheet.absoluteFillObject,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
     backgroundColor: 'rgba(0,0,0,0.6)'
   },
   selectionRange: {
@@ -4809,7 +4994,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     borderTopWidth: 2,
     borderBottomWidth: 2,
-    borderColor: '#fff'
+    borderColor: '#FFD60A'
   },
   handle: {
     position: 'absolute',
@@ -4835,7 +5020,7 @@ const styles = StyleSheet.create({
     top: 0,
     width: 16,
     height: 60,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: '#FFD60A',
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 20