@technotoil/image-video-editor 0.1.1 → 0.1.3

package/lib/commonjs/screens/EditorScreen.js

@@ -11,7 +11,7 @@ var _FrameGrabber = require("../native/FrameGrabber");
 var _MediaLibrary = require("../native/MediaLibrary");
 var _VideoPreview = require("../native/VideoPreview");
 var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
-var _Ionicons = _interopRequireDefault(require("react-native-vector-icons/Ionicons"));
+var _Icon = require("../components/Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -174,12 +174,16 @@ function EditorScreen({
   onBack,
   onSaved,
   onOpenCrop,
-  musicList
+  musicList,
+  maxVideoDurationMs
 }) {
   const [activeIndex, setActiveIndex] = (0, _react.useState)(initialIndex);
   const currentItem = items[activeIndex] || items[0];
   const item = currentItem; // Aliasing to 'item' for ease of compatibility
 
+  (0, _react.useEffect)(() => {
+    setActiveIndex(initialIndex);
+  }, [initialIndex]);
   const [activeFilter, setActiveFilter] = (0, _react.useState)('none');
   const [imageOptions, setImageOptions] = (0, _react.useState)({
     rotateDegrees: 0,
@@ -190,13 +194,21 @@ function EditorScreen({
     saturation: 1,
     grayscale: false
   });
+  const [panel, setPanel] = (0, _react.useState)(item.type === 'video' ? 'trim' : 'filter');
   const [trimStart, setTrimStart] = (0, _react.useState)(0);
-  const [trimEnd, setTrimEnd] = (0, _react.useState)(item.durationMs || 10000);
+  const [trimEnd, setTrimEnd] = (0, _react.useState)(() => {
+    const end = item.durationMs || 10000;
+    return maxVideoDurationMs ? Math.min(end, maxVideoDurationMs) : end;
+  });
   (0, _react.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] = (0, _react.useState)({});
   const editsHistoryRef = (0, _react.useRef)({});
   const [dimensionsMap, setDimensionsMap] = (0, _react.useState)({});
@@ -253,7 +265,7 @@ function EditorScreen({
       setCropOffset(saved.cropOffset);
       setZoomScale(saved.zoomScale);
       setStraightenAngle(saved.straightenAngle);
-      setIsMuted(saved.isMuted);
+      setIsMuted(selectedMusic ? true : saved.isMuted);
     } else {
       setActiveFilter('none');
       setImageOptions({
@@ -266,7 +278,8 @@ 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({
@@ -275,7 +288,14 @@ 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 => {
@@ -334,13 +354,13 @@ function EditorScreen({
         y: (o.y + 8) * renderScale,
         color: o.color,
         fontSize: o.fontSize * renderScale
-      }))
+      })),
+      frameUri: edits.imageOptions.frame && FRAME_IMAGES[edits.imageOptions.frame] ? _reactNative.Image.resolveAssetSource(FRAME_IMAGES[edits.imageOptions.frame]).uri : undefined
     };
   };
   const [saving, setSaving] = (0, _react.useState)(false);
   const [videoPaused, setVideoPaused] = (0, _react.useState)(false);
-  const [panel, setPanel] = (0, _react.useState)(item.type === 'video' ? 'trim' : 'filter');
-  const resolvedMusicList = musicList || DUMMY_MUSIC_LIST;
+  const resolvedMusicList = musicList || [];
   const [selectedMusic, setSelectedMusic] = (0, _react.useState)(null);
   const [musicPaused, setMusicPaused] = (0, _react.useState)(false);
   const [showMusicModal, setShowMusicModal] = (0, _react.useState)(false);
@@ -1119,13 +1139,18 @@ function EditorScreen({
         y: (o.y + 8) * renderScale,
         color: o.color,
         fontSize: o.fontSize * renderScale
-      }))
+      })),
+      frameUri: imageOptions.frame && FRAME_IMAGES[imageOptions.frame] ? _reactNative.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 = (0, _react.useRef)(duration);
+  (0, _react.useEffect)(() => {
+    durationRef.current = duration;
+  }, [duration]);
   const formatTime = ms => {
     const totalSec = Math.floor(ms / 1000);
     const mins = Math.floor(totalSec / 60);
@@ -1187,6 +1212,39 @@ function EditorScreen({
       generateThumbs();
     }
   }, [item.type, item.uri, duration, thumbnails.length]);
+  const leftOverlayRef = (0, _react.useRef)(null);
+  const rightOverlayRef = (0, _react.useRef)(null);
+  const selectionRangeRef = (0, _react.useRef)(null);
+  const leftHandleRef = (0, _react.useRef)(null);
+  const rightHandleRef = (0, _react.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 = (0, _react.useRef)(0);
   const startPan = (0, _react.useRef)(_reactNative.PanResponder.create({
     onStartShouldSetPanResponder: () => true,
@@ -1200,20 +1258,76 @@ 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 = (0, _react.useRef)(0);
+  const middlePanOffsetEnd = (0, _react.useRef)(0);
+  const middlePan = (0, _react.useRef)(_reactNative.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;
@@ -1230,20 +1344,29 @@ 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;
@@ -2018,11 +2141,16 @@ 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 (0, _MediaEditor.trimVideo)(item.uri, {
-          startMs: trimStart,
-          endMs: trimEnd,
+          startMs: safeStartMs,
+          endMs: safeEndMs,
           mute: isMuted,
-          musicUri: selectedMusic?.url || undefined,
+          ...(selectedMusic?.url ? {
+            musicUri: selectedMusic.url
+          } : {}),
           ...activeOptions
         });
       }
@@ -2039,6 +2167,7 @@ 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];
@@ -2064,6 +2193,7 @@ function EditorScreen({
               outUri = await (0, _MediaEditor.trimVideo)(outUri, {
                 isImage: true,
                 musicUri: selectedMusic.url,
+                musicOffsetMs: cumulativeMusicOffsetMs,
                 rotateDegrees: 0,
                 flipX: false,
                 flipY: false,
@@ -2078,12 +2208,20 @@ 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 (0, _MediaEditor.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;
@@ -2101,6 +2239,7 @@ function EditorScreen({
               thumbnailUri: newThumb ? newThumb : targetItem.thumbnailUri,
               durationMs: newDuration
             };
+            cumulativeMusicOffsetMs += newDuration;
           }
         } else {
           if (selectedMusic) {
@@ -2109,6 +2248,7 @@ function EditorScreen({
               outUri = await (0, _MediaEditor.trimVideo)(targetItem.uri, {
                 isImage: true,
                 musicUri: selectedMusic.url,
+                musicOffsetMs: cumulativeMusicOffsetMs,
                 rotateDegrees: 0,
                 flipX: false,
                 flipY: false,
@@ -2117,12 +2257,17 @@ function EditorScreen({
                 saturation: 1,
                 grayscale: false
               });
+              cumulativeMusicOffsetMs += 10000;
             } else {
+              const safeEndMs = targetItem.durationMs || 10000;
               outUri = await (0, _MediaEditor.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,
@@ -2131,6 +2276,7 @@ function EditorScreen({
                 saturation: 1,
                 grayscale: false
               });
+              cumulativeMusicOffsetMs += safeEndMs;
             }
             updatedItems[i] = {
               ...targetItem,
@@ -2258,7 +2404,7 @@ function EditorScreen({
             style: styles.previewOverlay,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.playPauseCircle,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "play",
                 size: 22,
                 color: "#fff"
@@ -2382,7 +2528,7 @@ function EditorScreen({
         }), isActive && cardItem.type === 'image' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
           style: styles.cropIconBtn,
           onPress: () => onOpenCrop(cardItem),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             name: "crop-outline",
             size: 20,
             color: "#fff"
@@ -2417,7 +2563,7 @@ function EditorScreen({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
           onPress: () => setIsEditingVideo(false),
           style: styles.editModeBackBtn,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             name: "chevron-down",
             size: 22,
             color: "#fff"
@@ -2429,7 +2575,7 @@ function EditorScreen({
           children: saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
             size: "small",
             color: "#fff"
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             name: "arrow-forward",
             size: 20,
             color: "#fff"
@@ -2556,7 +2702,7 @@ function EditorScreen({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
           onPress: () => setVideoPaused(!videoPaused),
           style: styles.editPlayPauseBtn,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             name: videoPaused ? 'play' : 'pause',
             size: 20,
             color: "#fff"
@@ -2572,7 +2718,7 @@ function EditorScreen({
             }],
             onPress: handleUndo,
             disabled: undoStack.length === 0,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               name: "arrow-undo",
               size: 18,
               color: "#fff"
@@ -2583,7 +2729,7 @@ function EditorScreen({
             }],
             onPress: handleRedo,
             disabled: redoStack.length === 0,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               name: "arrow-redo",
               size: 18,
               color: "#fff"
@@ -2672,7 +2818,15 @@ function EditorScreen({
                     },
                     style: styles.filmstripImage
                   }, idx)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                    style: styles.timelineOverlay
+                    style: [styles.timelineOverlay, {
+                      left: 0,
+                      width: trimStart / duration * TIMELINE_WIDTH
+                    }]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    style: [styles.timelineOverlay, {
+                      left: trimEnd / duration * TIMELINE_WIDTH,
+                      right: 0
+                    }]
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                     style: [styles.selectionRange, {
                       left: trimStart / duration * TIMELINE_WIDTH,
@@ -2683,20 +2837,18 @@ function EditorScreen({
                   style: [styles.customHandle, styles.customHandleLeft, {
                     left: trimStart / duration * TIMELINE_WIDTH - 16
                   }],
-                  ...startPan.panHandlers,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                     style: styles.handleBarLine
                   })
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                   style: [styles.customHandle, styles.customHandleRight, {
-                    left: trimEnd / duration * TIMELINE_WIDTH
+                    left: trimEnd / duration * TIMELINE_WIDTH - 16
                   }],
-                  ...endPan.panHandlers,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                     style: styles.handleBarLine
                   })
                 })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+              }), resolvedMusicList.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
                 style: styles.subTrackRow,
                 onPress: () => setShowMusicModal(true),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -2893,7 +3045,7 @@ function EditorScreen({
                 justifyContent: 'center',
                 alignItems: 'center'
               },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "close",
                 size: 20,
                 color: "#fff"
@@ -2968,7 +3120,7 @@ function EditorScreen({
             onPress: addTextOverlay,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "text",
                 size: 22,
                 color: "#fff"
@@ -2977,12 +3129,12 @@ function EditorScreen({
               style: styles.toolLabel,
               children: "Text"
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+          }), resolvedMusicList.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
             style: [styles.toolButton, showMusicModal && styles.toolButtonActive],
             onPress: () => setShowMusicModal(true),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "musical-notes",
                 size: 22,
                 color: "#fff"
@@ -2996,7 +3148,7 @@ function EditorScreen({
             onPress: () => setPanel(panel === 'transform' ? 'trim' : 'transform'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "crop",
                 size: 22,
                 color: "#fff"
@@ -3010,7 +3162,7 @@ function EditorScreen({
             onPress: () => setPanel(panel === 'filter' ? 'trim' : 'filter'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "color-palette",
                 size: 22,
                 color: "#fff"
@@ -3024,7 +3176,7 @@ function EditorScreen({
             onPress: () => setPanel(panel === 'frame' ? 'trim' : 'frame'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "images",
                 size: 22,
                 color: "#fff"
@@ -3038,7 +3190,7 @@ function EditorScreen({
             onPress: () => setPanel(panel === 'edit' ? 'trim' : 'edit'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "settings-outline",
                 size: 22,
                 color: "#fff"
@@ -3061,7 +3213,7 @@ function EditorScreen({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         onPress: onBack,
         style: styles.fullscreenCloseBtn,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           name: "close",
           size: 24,
           color: "#fff"
@@ -3069,7 +3221,7 @@ function EditorScreen({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         onPress: () => setIsMuted(!isMuted),
         style: styles.fullscreenSoundBtn,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           name: isMuted ? 'volume-mute' : 'volume-high',
           size: 22,
           color: "#fff"
@@ -3139,12 +3291,12 @@ function EditorScreen({
           contentContainerStyle: [styles.toolButtonsRow, {
             flexGrow: 1
           }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+          children: [resolvedMusicList.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
             style: [styles.toolButton, showMusicModal && styles.toolButtonActive],
             onPress: () => setShowMusicModal(true),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "musical-notes",
                 size: 22,
                 color: "#fff"
@@ -3158,7 +3310,7 @@ function EditorScreen({
             onPress: addTextOverlay,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "text",
                 size: 22,
                 color: "#fff"
@@ -3175,7 +3327,7 @@ function EditorScreen({
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "crop",
                 size: 22,
                 color: "#fff"
@@ -3189,7 +3341,7 @@ function EditorScreen({
             onPress: () => setIsEditingVideo(true),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "cut",
                 size: 22,
                 color: "#fff"
@@ -3206,7 +3358,7 @@ function EditorScreen({
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "images",
                 size: 22,
                 color: "#fff"
@@ -3223,7 +3375,7 @@ function EditorScreen({
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "color-palette",
                 size: 22,
                 color: "#fff"
@@ -3240,7 +3392,7 @@ function EditorScreen({
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.toolIconContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "settings-outline",
                 size: 22,
                 color: "#fff"
@@ -3279,7 +3431,7 @@ function EditorScreen({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
           onPress: onBack,
           style: styles.backButton,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             name: "close",
             size: 22,
             color: "#fff"
@@ -3289,7 +3441,7 @@ function EditorScreen({
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
             onPress: () => setIsMuted(!isMuted),
             style: styles.soundButton,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               name: isMuted ? 'volume-mute' : 'volume-high',
               size: 22,
               color: "#fff"
@@ -3308,6 +3460,12 @@ 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,
@@ -3418,7 +3576,7 @@ 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`;
                 })()
@@ -3429,30 +3587,54 @@ function EditorScreen({
               }],
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                 style: styles.filmstrip,
-                children: [thumbnails.map((uri, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                children: [thumbnails.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                    color: "#ffffff",
+                    size: "small"
+                  })
+                }) : thumbnails.map((uri, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
                   source: {
                     uri
                   },
                   style: styles.filmstripImage
                 }, idx)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                  style: styles.timelineOverlay
+                  ref: leftOverlayRef,
+                  style: [styles.timelineOverlay, {
+                    left: 0,
+                    width: startX.current
+                  }]
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  ref: selectionRangeRef,
+                  style: [styles.selectionRange, {
+                    left: startX.current,
+                    width: endX.current - startX.current
+                  }],
+                  ...middlePan.panHandlers
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                ref: leftHandleRef,
                 style: [styles.customHandle, styles.customHandleLeft, {
-                  left: trimStart / duration * TIMELINE_WIDTH - 16
+                  left: startX.current - 16
                 }],
                 ...startPan.panHandlers,
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                   style: styles.handleBarLine
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                ref: rightHandleRef,
                 style: [styles.customHandle, styles.customHandleRight, {
-                  left: trimEnd / duration * TIMELINE_WIDTH
+                  left: endX.current - 16
                 }],
                 ...endPan.panHandlers,
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -3479,7 +3661,7 @@ function EditorScreen({
                     justifyContent: 'center',
                     alignItems: 'center'
                   }],
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                     name: "close",
                     size: 24,
                     color: "#fff"
@@ -3581,7 +3763,7 @@ function EditorScreen({
                     fontSize: 20
                   },
                   children: s.emoji
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                   name: "close-circle",
                   size: 14,
                   color: "#ff6b6b",
@@ -3689,7 +3871,7 @@ function EditorScreen({
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
                     onPress: () => removeCaption(c.id),
                     style: styles.captionRemoveBtn,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                       name: "close",
                       size: 14,
                       color: "#ff6b6b"
@@ -3730,12 +3912,12 @@ function EditorScreen({
             contentContainerStyle: [styles.toolButtonsRow, {
               flexGrow: 1
             }],
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+            children: [resolvedMusicList.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
               style: [styles.toolButton, showMusicModal && styles.toolButtonActive],
               onPress: () => setShowMusicModal(true),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: styles.toolIconContainer,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                   name: "musical-notes",
                   size: 22,
                   color: "#fff"
@@ -3749,7 +3931,7 @@ function EditorScreen({
               onPress: () => setPanel('text'),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: styles.toolIconContainer,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                   name: "text",
                   size: 22,
                   color: "#fff"
@@ -3763,7 +3945,7 @@ function EditorScreen({
               onPress: handleOpenTransform,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: styles.toolIconContainer,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                   name: "crop",
                   size: 22,
                   color: "#fff"
@@ -3777,7 +3959,7 @@ function EditorScreen({
               onPress: () => setPanel('trim'),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: styles.toolIconContainer,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                   name: "cut",
                   size: 22,
                   color: "#fff"
@@ -3791,7 +3973,7 @@ function EditorScreen({
               onPress: () => setPanel('frame'),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: styles.toolIconContainer,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                   name: "images",
                   size: 22,
                   color: "#fff"
@@ -3805,7 +3987,7 @@ function EditorScreen({
               onPress: () => setPanel('filter'),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: styles.toolIconContainer,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                   name: "color-palette",
                   size: 22,
                   color: "#fff"
@@ -3819,7 +4001,7 @@ function EditorScreen({
               onPress: () => setPanel('edit'),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: styles.toolIconContainer,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                   name: "settings-outline",
                   size: 22,
                   color: "#fff"
@@ -3846,7 +4028,7 @@ function EditorScreen({
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                   style: styles.nextBlueText,
                   children: "Next"
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                   name: "arrow-forward",
                   size: 16,
                   color: "#fff",
@@ -3881,7 +4063,7 @@ function EditorScreen({
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
               onPress: () => setShowMusicModal(false),
               style: styles.musicModalCloseBtn,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "close",
                 size: 24,
                 color: "#fff"
@@ -3902,7 +4084,7 @@ function EditorScreen({
             }), musicSearchQuery.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
               onPress: () => setMusicSearchQuery(''),
               style: styles.musicSearchClearBtn,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                 name: "close-circle",
                 size: 18,
                 color: "#8e8e93"
@@ -4038,6 +4220,7 @@ function EditorScreen({
               onPress: () => {
                 setSelectedMusic(null);
                 setMusicPaused(true);
+                setIsMuted(false);
               },
               style: styles.musicFooterRemoveBtn,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -4156,7 +4339,7 @@ function EditorScreen({
             scale: 1.15
           }]
         } : {}],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           name: isOverTrash ? "trash" : "trash-outline",
           size: 20,
           color: "#fff"
@@ -4805,7 +4988,9 @@ const styles = _reactNative.StyleSheet.create({
     height: 60
   },
   timelineOverlay: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
     backgroundColor: 'rgba(0,0,0,0.6)'
   },
   selectionRange: {
@@ -4815,7 +5000,7 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: 'transparent',
     borderTopWidth: 2,
     borderBottomWidth: 2,
-    borderColor: '#fff'
+    borderColor: '#FFD60A'
   },
   handle: {
     position: 'absolute',
@@ -4841,7 +5026,7 @@ const styles = _reactNative.StyleSheet.create({
     top: 0,
     width: 16,
     height: 60,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: '#FFD60A',
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 20