@technotoil/image-video-editor 0.1.4 → 0.1.6

package/android/src/main/java/com/technotoil/image_videoeditor/MediaEditorModule.kt

@@ -449,11 +449,11 @@ class MediaEditorModule(private val reactContext: ReactApplicationContext) :
         if (File(fontPath).exists()) {
           val textFilters = mutableListOf<String>()
           for (i in 0 until overlays.size()) {
-            val o = overlays.getMap(i)
+            val o = overlays.getMap(i) ?: continue
             val text = o.getString("text") ?: continue
             val x = if (o.hasKey("x")) o.getDouble("x") else 0.0
             val y = if (o.hasKey("y")) o.getDouble("y") else 0.0
-            val colorHex = if (o.hasKey("color")) o.getString("color") else "#FFFFFF"
+            val colorHex = if (o.hasKey("color")) o.getString("color") ?: "#FFFFFF" else "#FFFFFF"
             val fontSize = if (o.hasKey("fontSize")) o.getDouble("fontSize") else 24.0
             
             val safeText = text.replace(":", "\\:").replace("'", "\\'")

package/lib/commonjs/screens/EditorScreen.js

@@ -1027,13 +1027,14 @@ function EditorScreen({
   const containerHeight = showMusicModal ? SCREEN_WIDTH * 0.72 : SCREEN_WIDTH * 1.25;
   const maxPan = (0, _react.useMemo)(() => {
     // If no cropRatio, we still want to allow panning/zooming if zoomScale > 1
-    const actualRatio = typeof cropRatio === 'number' ? cropRatio : dimensions.width / (dimensions.height || 1);
-    let imgW = dimensions.width;
-    let imgH = dimensions.height;
+    let imgW = dimensions.width || item.width || 1080;
+    let imgH = dimensions.height || item.height || 1920;
     if ((imageOptions.rotateDegrees || 0) % 180 !== 0) {
-      imgW = dimensions.height;
-      imgH = dimensions.width;
+      const temp = imgW;
+      imgW = imgH;
+      imgH = temp;
     }
+    const actualRatio = typeof cropRatio === 'number' ? cropRatio : imgW / (imgH || 1);
     const baseH = actualRatio <= 1 ? containerHeight - 24 : (SCREEN_WIDTH - 24) / actualRatio;
     const baseW = actualRatio > 1 ? SCREEN_WIDTH - 24 : baseH * actualRatio;
     const boxW = baseW * (cropRatio === 'custom' ? cropResizeScaleX : cropResizeScale);
@@ -1047,7 +1048,7 @@ function EditorScreen({
       boxW,
       boxH
     };
-  }, [cropRatio, dimensions, imageOptions.rotateDegrees, zoomScale, cropResizeScale, cropResizeScaleX, cropResizeScaleY, showMusicModal, containerHeight]);
+  }, [cropRatio, dimensions, item, imageOptions.rotateDegrees, zoomScale, cropResizeScale, cropResizeScaleX, cropResizeScaleY, showMusicModal, containerHeight]);
   const maxPanRef = (0, _react.useRef)(maxPan);
   (0, _react.useEffect)(() => {
     maxPanRef.current = maxPan;
@@ -1093,11 +1094,12 @@ function EditorScreen({
     }
   })).current;
   const activeOptions = (0, _react.useMemo)(() => {
-    let imgW = dimensions.width;
-    let imgH = dimensions.height;
+    let imgW = dimensions.width || item.width || 1080;
+    let imgH = dimensions.height || item.height || 1920;
     if ((imageOptions.rotateDegrees || 0) % 180 !== 0) {
-      imgW = dimensions.height;
-      imgH = dimensions.width;
+      const temp = imgW;
+      imgW = imgH;
+      imgH = temp;
     }
     const actualRatio = typeof cropRatio === 'number' ? cropRatio : imgW / (imgH || 1);
     const scale = maxPan.scale;
@@ -1129,7 +1131,7 @@ function EditorScreen({
       ...(hasCrop ? {
         crop: finalCrop
       } : {}),
-      imageAspectRatio: dimensions.width / (dimensions.height || 1),
+      imageAspectRatio: imgW / (imgH || 1),
       frameScale: imageOptions.frame ? frameConfig.scale : 1,
       frameOffsetY: imageOptions.frame ? frameConfig.offsetY || 0 : 0,
       overlays: overlays.map(o => ({
@@ -1142,7 +1144,7 @@ function EditorScreen({
       })),
       frameUri: imageOptions.frame && FRAME_IMAGES[imageOptions.frame] ? _reactNative.Image.resolveAssetSource(FRAME_IMAGES[imageOptions.frame]).uri : undefined
     };
-  }, [imageOptions, cropOffset, maxPan, dimensions, cropRatio, straightenAngle, overlays]);
+  }, [imageOptions, cropOffset, maxPan, dimensions, item, cropRatio, straightenAngle, overlays]);
 
   // For visual trim
 
@@ -2242,10 +2244,9 @@ function EditorScreen({
             cumulativeMusicOffsetMs += newDuration;
           }
         } else {
-          if (selectedMusic) {
-            let outUri = targetItem.uri;
-            if (targetItem.type === 'image') {
-              outUri = await (0, _MediaEditor.trimVideo)(targetItem.uri, {
+          if (targetItem.type === 'image') {
+            if (selectedMusic) {
+              const outUri = await (0, _MediaEditor.trimVideo)(targetItem.uri, {
                 isImage: true,
                 musicUri: selectedMusic.url,
                 musicOffsetMs: cumulativeMusicOffsetMs,
@@ -2258,9 +2259,17 @@ function EditorScreen({
                 grayscale: false
               });
               cumulativeMusicOffsetMs += 10000;
-            } else {
-              const safeEndMs = targetItem.durationMs || 10000;
-              outUri = await (0, _MediaEditor.trimVideo)(targetItem.uri, {
+              updatedItems[i] = {
+                ...targetItem,
+                uri: outUri,
+                thumbnailUri: outUri
+              };
+            }
+          } else {
+            const needsTrim = selectedMusic || maxVideoDurationMs && (!targetItem.durationMs || targetItem.durationMs > maxVideoDurationMs);
+            if (needsTrim) {
+              const safeEndMs = maxVideoDurationMs ? Math.min(targetItem.durationMs || 10000, maxVideoDurationMs) : targetItem.durationMs || 10000;
+              const outUri = await (0, _MediaEditor.trimVideo)(targetItem.uri, {
                 startMs: 0,
                 endMs: safeEndMs,
                 mute: isMuted,
@@ -2276,13 +2285,24 @@ function EditorScreen({
                 saturation: 1,
                 grayscale: false
               });
+              let newThumb = undefined;
+              try {
+                newThumb = await (0, _FrameGrabber.captureFrame)(outUri, {
+                  timeMs: 0
+                });
+              } catch (e) {
+                console.warn('Could not generate filtered thumb', e);
+              }
+              updatedItems[i] = {
+                ...targetItem,
+                uri: outUri,
+                thumbnailUri: newThumb ? newThumb : targetItem.thumbnailUri,
+                durationMs: safeEndMs
+              };
               cumulativeMusicOffsetMs += safeEndMs;
+            } else {
+              cumulativeMusicOffsetMs += targetItem.durationMs || 10000;
             }
-            updatedItems[i] = {
-              ...targetItem,
-              uri: outUri,
-              thumbnailUri: targetItem.type === 'image' ? outUri : targetItem.thumbnailUri
-            };
           }
         }
       }
@@ -2818,32 +2838,40 @@ function EditorScreen({
                     },
                     style: styles.filmstripImage
                   }, idx)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    ref: leftOverlayRef,
                     style: [styles.timelineOverlay, {
                       left: 0,
-                      width: trimStart / duration * TIMELINE_WIDTH
+                      width: startX.current
                     }]
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    ref: rightOverlayRef,
                     style: [styles.timelineOverlay, {
-                      left: trimEnd / duration * TIMELINE_WIDTH,
+                      left: endX.current,
                       right: 0
                     }]
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    ref: selectionRangeRef,
                     style: [styles.selectionRange, {
-                      left: trimStart / duration * TIMELINE_WIDTH,
-                      width: (trimEnd - trimStart) / duration * TIMELINE_WIDTH
-                    }]
+                      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 - 16
+                    left: endX.current - 16
                   }],
+                  ...endPan.panHandlers,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                     style: styles.handleBarLine
                   })
@@ -3462,8 +3490,8 @@ function EditorScreen({
             keyExtractor: it => it.id,
             initialScrollIndex: activeIndex,
             getItemLayout: (_, index) => ({
-              length: SCREEN_WIDTH,
-              offset: SCREEN_WIDTH * index,
+              length: SNAP_INTERVAL,
+              offset: SNAP_INTERVAL * index,
               index
             }),
             horizontal: true,