@technotoil/image-video-editor 0.1.0 → 0.1.2

package/lib/module/screens/EditorScreen.js

@@ -10,6 +10,7 @@ import Video from 'react-native-video';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const SCREEN_WIDTH = Dimensions.get('window').width;
+const SCREEN_HEIGHT = Dimensions.get('window').height;
 const TIMELINE_WIDTH = SCREEN_WIDTH - 40;
 const HANDLE_SIZE = 24;
 const CARD_WIDTH = SCREEN_WIDTH * 0.76;
@@ -167,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,
@@ -183,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({});
@@ -246,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({
@@ -259,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({
@@ -268,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 => {
@@ -327,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);
@@ -428,6 +449,8 @@ export function EditorScreen({
   const [newText, setNewText] = useState('');
   const isNewOverlay = React.useRef(false); // track if overlay was just created (not yet saved)
   const originalOverlayBackup = React.useRef(null);
+  const [activeDraggingId, setActiveDraggingId] = useState(null);
+  const [isOverTrash, setIsOverTrash] = useState(false);
 
   // ── Stickers ────────────────────────────────────────────────────────────────
   const STICKER_LIST = ['😂', '❤️', '🔥', '✨', '💯', '👑', '🎉', '🌈', '🎶', '💫', '🙌', '😍', '🤩', '😎', '🥳', '🌸', '🦋', '⚡', '🌙', '💎', '🍕', '🎸', '🎬', '📸', '🎯', '🌺', '🦄', '🐉', '🎭', '🪩'];
@@ -894,10 +917,17 @@ export function EditorScreen({
   const createTextPan = id => {
     let startX = 0;
     let startY = 0;
+    let pressStartTime = 0;
+    let hasMoved = false;
+    let longPressTimeout = null;
     return PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: () => {
+        pressStartTime = Date.now();
+        hasMoved = false;
+        setActiveDraggingId(id);
+        setIsOverTrash(false);
         setOverlays(prev => {
           const item = prev.find(o => o.id === id);
           if (item) {
@@ -906,13 +936,78 @@ export function EditorScreen({
           }
           return prev;
         });
+
+        // Setup long press timer (600ms)
+        if (longPressTimeout) clearTimeout(longPressTimeout);
+        longPressTimeout = setTimeout(() => {
+          if (!hasMoved) {
+            removeTextOverlay(id);
+          }
+        }, 600);
       },
       onPanResponderMove: (_, gesture) => {
+        if (Math.abs(gesture.dx) > 4 || Math.abs(gesture.dy) > 4) {
+          hasMoved = true;
+          if (longPressTimeout) {
+            clearTimeout(longPressTimeout);
+            longPressTimeout = null;
+          }
+        }
+        const newX = startX + gesture.dx;
+        const newY = startY + gesture.dy;
+
+        // Trash zone: bottom 140px of screen, center horizontal
+        const isNearTrash = gesture.moveY > SCREEN_HEIGHT - 140 && Math.abs(gesture.moveX - SCREEN_WIDTH / 2) < 90;
+        setIsOverTrash(isNearTrash);
         setOverlays(prev => prev.map(o => o.id === id ? {
           ...o,
-          x: startX + gesture.dx,
-          y: startY + gesture.dy
+          x: newX,
+          y: newY
         } : o));
+      },
+      onPanResponderRelease: (_, gesture) => {
+        if (longPressTimeout) {
+          clearTimeout(longPressTimeout);
+          longPressTimeout = null;
+        }
+
+        // Check if released over trash zone using final touch screen coordinates
+        const releasedOverTrash = gesture.moveY > SCREEN_HEIGHT - 140 && Math.abs(gesture.moveX - SCREEN_WIDTH / 2) < 90;
+
+        // Reset dragging states
+        setActiveDraggingId(null);
+        setIsOverTrash(false);
+        if (releasedOverTrash) {
+          setTimeout(() => {
+            removeTextOverlay(id);
+          }, 50);
+          return;
+        }
+        const pressDuration = Date.now() - pressStartTime;
+        if (!hasMoved && pressDuration < 250) {
+          pushToHistory();
+          setOverlays(prev => {
+            const found = prev.find(o => o.id === id);
+            if (found) {
+              originalOverlayBackup.current = {
+                ...found
+              };
+              isNewOverlay.current = false;
+              setEditingTextId(id);
+              setNewText(found.text);
+              setPanel('text');
+            }
+            return prev;
+          });
+        }
+      },
+      onPanResponderTerminate: () => {
+        if (longPressTimeout) {
+          clearTimeout(longPressTimeout);
+          longPressTimeout = null;
+        }
+        setActiveDraggingId(null);
+        setIsOverTrash(false);
       }
     });
   };
@@ -1038,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);
@@ -1106,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,
@@ -1119,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;
@@ -1149,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;
@@ -1937,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
         });
       }
@@ -1958,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];
@@ -1983,6 +2187,7 @@ export function EditorScreen({
               outUri = await trimVideo(outUri, {
                 isImage: true,
                 musicUri: selectedMusic.url,
+                musicOffsetMs: cumulativeMusicOffsetMs,
                 rotateDegrees: 0,
                 flipX: false,
                 flipY: false,
@@ -1997,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;
@@ -2020,6 +2233,7 @@ export function EditorScreen({
               thumbnailUri: newThumb ? newThumb : targetItem.thumbnailUri,
               durationMs: newDuration
             };
+            cumulativeMusicOffsetMs += newDuration;
           }
         } else {
           if (selectedMusic) {
@@ -2028,6 +2242,7 @@ export function EditorScreen({
               outUri = await trimVideo(targetItem.uri, {
                 isImage: true,
                 musicUri: selectedMusic.url,
+                musicOffsetMs: cumulativeMusicOffsetMs,
                 rotateDegrees: 0,
                 flipX: false,
                 flipY: false,
@@ -2036,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,
@@ -2050,6 +2270,7 @@ export function EditorScreen({
                 saturation: 1,
                 grayscale: false
               });
+              cumulativeMusicOffsetMs += safeEndMs;
             }
             updatedItems[i] = {
               ...targetItem,
@@ -2223,20 +2444,9 @@ export function EditorScreen({
               zIndex: 20
             }, isSelected && styles.selectedTextContainer],
             ...responder.panHandlers,
-            children: /*#__PURE__*/_jsx(Pressable, {
-              onLongPress: () => removeTextOverlay(overlay.id),
-              onPress: () => {
-                pushToHistory();
-                // Backup original state (text, color, position, size, etc.)
-                const found = overlays.find(o => o.id === overlay.id);
-                if (found) {
-                  originalOverlayBackup.current = {
-                    ...found
-                  };
-                }
-                isNewOverlay.current = false;
-                setEditingTextId(overlay.id);
-                setNewText(overlay.text);
+            children: /*#__PURE__*/_jsx(View, {
+              style: {
+                padding: 4
               },
               children: /*#__PURE__*/_jsx(Text, {
                 style: [styles.textOverlay, {
@@ -2466,19 +2676,9 @@ export function EditorScreen({
                 zIndex: 20
               }, isSelected && styles.selectedTextContainer],
               ...responder.panHandlers,
-              children: /*#__PURE__*/_jsx(Pressable, {
-                onLongPress: () => removeTextOverlay(overlay.id),
-                onPress: () => {
-                  pushToHistory();
-                  const found = overlays.find(o => o.id === overlay.id);
-                  if (found) {
-                    originalOverlayBackup.current = {
-                      ...found
-                    };
-                  }
-                  isNewOverlay.current = false;
-                  setEditingTextId(overlay.id);
-                  setNewText(overlay.text);
+              children: /*#__PURE__*/_jsx(View, {
+                style: {
+                  padding: 4
                 },
                 children: /*#__PURE__*/_jsx(Text, {
                   style: [styles.textOverlay, {
@@ -2612,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,
@@ -2623,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, {
@@ -2917,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, {
@@ -3057,19 +3263,9 @@ export function EditorScreen({
               zIndex: 20
             }, isSelected && styles.selectedTextContainer],
             ...responder.panHandlers,
-            children: /*#__PURE__*/_jsx(Pressable, {
-              onLongPress: () => removeTextOverlay(overlay.id),
-              onPress: () => {
-                pushToHistory();
-                const found = overlays.find(o => o.id === overlay.id);
-                if (found) {
-                  originalOverlayBackup.current = {
-                    ...found
-                  };
-                }
-                isNewOverlay.current = false;
-                setEditingTextId(overlay.id);
-                setNewText(overlay.text);
+            children: /*#__PURE__*/_jsx(View, {
+              style: {
+                padding: 4
               },
               children: /*#__PURE__*/_jsx(Text, {
                 style: [styles.textOverlay, {
@@ -3089,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, {
@@ -3258,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,
@@ -3368,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`;
                 })()
@@ -3379,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, {
@@ -3680,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, {
@@ -3988,6 +4214,7 @@ export function EditorScreen({
               onPress: () => {
                 setSelectedMusic(null);
                 setMusicPaused(true);
+                setIsMuted(false);
               },
               style: styles.musicFooterRemoveBtn,
               children: /*#__PURE__*/_jsx(Text, {
@@ -4097,6 +4324,24 @@ export function EditorScreen({
           })]
         })
       })
+    }), activeDraggingId !== null && /*#__PURE__*/_jsx(View, {
+      style: styles.globalTrashZone,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.trashZoneContainer, isOverTrash && styles.trashZoneActive, isOverTrash ? {
+          transform: [{
+            scale: 1.15
+          }]
+        } : {}],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: isOverTrash ? "trash" : "trash-outline",
+          size: 20,
+          color: "#fff"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.trashZoneText,
+          children: isOverTrash ? "Release to Delete" : "Drag here to delete"
+        })]
+      })
     })]
   });
 }
@@ -4737,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: {
@@ -4747,7 +4994,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     borderTopWidth: 2,
     borderBottomWidth: 2,
-    borderColor: '#fff'
+    borderColor: '#FFD60A'
   },
   handle: {
     position: 'absolute',
@@ -4773,7 +5020,7 @@ const styles = StyleSheet.create({
     top: 0,
     width: 16,
     height: 60,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: '#FFD60A',
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 20
@@ -5375,6 +5622,44 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'rgba(255, 255, 255, 0.3)'
   },
+  globalTrashZone: {
+    position: 'absolute',
+    bottom: Platform.OS === 'ios' ? 48 : 28,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 9999
+  },
+  trashZoneContainer: {
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+    borderColor: 'rgba(255, 255, 255, 0.25)',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 6,
+    elevation: 8
+  },
+  trashZoneActive: {
+    backgroundColor: '#ef4444',
+    borderColor: '#fca5a5'
+  },
+  trashZoneText: {
+    color: '#ffffff',
+    fontSize: 12,
+    fontWeight: '700',
+    marginLeft: 8
+  },
   cropIconText: {
     color: '#FFFFFF',
     fontSize: 18,