@umituz/react-native-video-editor 1.1.62 → 1.1.64

package/src/infrastructure/utils/data-clone.utils.ts

@@ -6,42 +6,43 @@
 import type { Scene, VideoProject, Layer } from "../../domain/entities/video-project.types";
 
 /**
- * Optimized deep clone for VideoProject
- * Uses structured clone if available, falls back to manual clone
+ * Generic deep clone using structured clone or spread operator
  */
-export function cloneVideoProject(project: VideoProject): VideoProject {
-  // Use structured clone for better performance if available
+export function deepClone<T>(obj: T): T {
   if (typeof structuredClone !== 'undefined') {
-    return structuredClone(project);
+    return structuredClone(obj);
   }
 
-  // Manual clone fallback - only clone what's necessary
-  return {
-    ...project,
-    scenes: project.scenes.map((scene: Scene) => ({
-      ...scene,
-      layers: scene.layers.map((layer: Layer) => ({ ...layer })),
-    })),
-  };
+  if (Array.isArray(obj)) {
+    return obj.map(item => deepClone(item)) as T;
+  }
+
+  if (obj !== null && typeof obj === 'object') {
+    return Object.keys(obj).reduce((acc, key) => {
+      (acc as Record<string, unknown>)[key] = deepClone((obj as Record<string, unknown>)[key]);
+      return acc;
+    }, {} as T);
+  }
+
+  return obj;
+}
+
+/**
+ * Optimized deep clone for VideoProject
+ */
+export function cloneVideoProject(project: VideoProject): VideoProject {
+  return deepClone(project);
 }
 
 /**
  * Optimized deep clone for Scene
  */
 export function cloneScene(scene: Scene): Scene {
-  if (typeof structuredClone !== 'undefined') {
-    return structuredClone(scene);
-  }
-
-  return {
-    ...scene,
-    layers: scene.layers.map((layer: Layer) => ({ ...layer })),
-  };
+  return deepClone(scene);
 }
 
 /**
- * Optimized shallow clone for Layer
- * Layer objects are already immutable in our architecture
+ * Shallow clone for Layer
  */
 export function cloneLayer(layer: Layer): Layer {
   return { ...layer };
@@ -51,7 +52,7 @@ export function cloneLayer(layer: Layer): Layer {
  * Clone multiple layers
  */
 export function cloneLayers(layers: Layer[]): Layer[] {
-  return layers.map((layer: Layer) => ({ ...layer }));
+  return layers.map(layer => ({ ...layer }));
 }
 
 /**
@@ -61,7 +62,7 @@ export function cloneSceneWithNewId(scene: Scene, generateId: () => string): Sce
   return {
     ...scene,
     id: generateId(),
-    layers: scene.layers.map((layer: Layer) => ({
+    layers: scene.layers.map(layer => ({
       ...layer,
       id: generateId(),
     })),
@@ -79,36 +80,16 @@ export function cloneLayerWithNewId(layer: Layer, generateId: () => string): Lay
 }
 
 /**
- * Optimized clone for Audio configuration
- */
-export function cloneAudio(audio: Scene["audio"]): Scene["audio"] {
-  if (!audio) return audio;
-  return { ...audio };
-}
-
-/**
- * Optimized clone for Background configuration
- */
-export function cloneBackground(background: Scene["background"]): Scene["background"] {
-  return { ...background };
-}
-
-/**
- * Optimized clone for Transition configuration
- */
-export function cloneTransition(transition: Scene["transition"]): Scene["transition"] {
-  return { ...transition };
-}
-
-/**
- * Create a safe copy of an array (shallow clone)
+ * Generic shallow clone for any object
  */
-export function cloneArray<T>(array: T[]): T[] {
-  return [...array];
+export function shallowClone<T>(obj: T): T {
+  if (!obj) return obj;
+  if (Array.isArray(obj)) return [...obj] as T;
+  return { ...obj } as T;
 }
 
 /**
- * Safe array slice that handles edge cases
+ * Safe array slice
  */
 export function safeSlice<T>(
   array: T[],

package/src/infrastructure/utils/video-calculations.utils.ts

@@ -4,29 +4,11 @@
  */
 
 import type { Scene, VideoProject } from "../../domain/entities/video-project.types";
-
-/**
- * Resolution multipliers for file size estimation
- */
-export const RESOLUTION_MULTIPLIERS: Record<string, number> = {
-  "720p": 0.5,
-  "1080p": 1.0,
-  "4k": 3.0,
-};
-
-/**
- * Quality multipliers for file size estimation
- */
-export const QUALITY_MULTIPLIERS: Record<string, number> = {
-  low: 0.6,
-  medium: 1.0,
-  high: 1.4,
-};
-
-/**
- * Base file size per second of video (in MB)
- */
-export const BASE_SIZE_PER_SECOND = 2.5;
+import {
+  RESOLUTION_MULTIPLIERS,
+  QUALITY_MULTIPLIERS,
+  BASE_SIZE_PER_SECOND,
+} from "../constants/export.constants";
 
 /**
  * Calculate estimated file size for video export
@@ -37,8 +19,8 @@ export function calculateEstimatedFileSize(
   quality: string,
 ): number {
   const baseSize = durationSeconds * BASE_SIZE_PER_SECOND;
-  const resolutionMultiplier = RESOLUTION_MULTIPLIERS[resolution] || 1.0;
-  const qualityMultiplier = QUALITY_MULTIPLIERS[quality] || 1.0;
+  const resolutionMultiplier = RESOLUTION_MULTIPLIERS[resolution as keyof typeof RESOLUTION_MULTIPLIERS] || 1.0;
+  const qualityMultiplier = QUALITY_MULTIPLIERS[quality as keyof typeof QUALITY_MULTIPLIERS] || 1.0;
 
   return baseSize * resolutionMultiplier * qualityMultiplier;
 }

package/src/presentation/components/CollageEditorCanvas.tsx

@@ -3,18 +3,13 @@
  * Collage layout canvas with image cells, layout picker, spacing and border radius controls
  */
 
-import React, { useMemo } from "react";
-import {
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-  Dimensions,
-} from "react-native";
-import { Image } from "expo-image";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import React from "react";
+import { View, Dimensions } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { COLLAGE_LAYOUTS } from "../../infrastructure/constants/collage.constants";
+import { CollageCanvas } from "./collage/CollageCanvas";
+import { CollageControls } from "./collage/CollageControls";
+import { CollageLayoutSelector } from "./collage/CollageLayoutSelector";
 import type { CollageLayout } from "../../infrastructure/constants/collage.constants";
 
 const SCREEN_WIDTH = Dimensions.get("window").width;
@@ -47,184 +42,26 @@ export const CollageEditorCanvas: React.FC<CollageEditorCanvasProps> = ({
   const tokens = useAppDesignTokens();
   const size = canvasSize ?? SCREEN_WIDTH - tokens.spacing.md * 2;
 
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        canvas: {
-          width: size,
-          height: size,
-          alignSelf: "center",
-          position: "relative",
-          backgroundColor: tokens.colors.surface,
-          borderRadius: tokens.borders.radius.md,
-          overflow: "hidden",
-        },
-        cell: {
-          position: "absolute",
-          overflow: "hidden",
-        },
-        cellImage: {
-          width: "100%",
-          height: "100%",
-        },
-        cellEmpty: {
-          flex: 1,
-          backgroundColor: tokens.colors.surfaceVariant,
-          alignItems: "center",
-          justifyContent: "center",
-        },
-        controls: {
-          paddingHorizontal: tokens.spacing.md,
-          paddingTop: tokens.spacing.md,
-          gap: tokens.spacing.sm,
-        },
-        controlRow: {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-        },
-        stepper: {
-          flexDirection: "row",
-          alignItems: "center",
-          gap: tokens.spacing.sm,
-        },
-        stepBtn: {
-          width: 32,
-          height: 32,
-          borderRadius: 16,
-          backgroundColor: tokens.colors.surfaceVariant,
-          alignItems: "center",
-          justifyContent: "center",
-        },
-        stepValue: {
-          minWidth: 28,
-          textAlign: "center",
-        },
-        layoutSection: {
-          paddingTop: tokens.spacing.sm,
-        },
-        layoutScroll: {
-          paddingHorizontal: tokens.spacing.md,
-          gap: tokens.spacing.sm,
-        },
-        layoutCard: {
-          width: 64,
-          alignItems: "center",
-          gap: tokens.spacing.xs,
-        },
-        layoutPreview: {
-          width: 52,
-          height: 52,
-          borderRadius: tokens.borders.radius.sm,
-          overflow: "hidden",
-          position: "relative",
-          backgroundColor: tokens.colors.surfaceVariant,
-          borderWidth: 2,
-          borderColor: "transparent",
-        },
-        layoutPreviewActive: {
-          borderColor: tokens.colors.primary,
-        },
-      }),
-    [tokens, size],
-  );
-
   return (
     <View>
-      {/* Canvas */}
-      <View style={styles.canvas}>
-        {layout.grid.map((cell, index) => {
-          const [cx, cy, cw, ch] = cell;
-          const cellStyle = {
-            left: cx * size + spacing,
-            top: cy * size + spacing,
-            width: cw * size - spacing * 2,
-            height: ch * size - spacing * 2,
-            borderRadius,
-          };
-          return (
-            <TouchableOpacity
-              key={index}
-              style={[styles.cell, cellStyle]}
-              onPress={() => onCellPress(index)}
-              accessibilityLabel={`Cell ${index + 1}`}
-              accessibilityRole="button"
-            >
-              {images[index] ? (
-                <Image
-                  source={{ uri: images[index]! }}
-                  style={[styles.cellImage, { borderRadius }]}
-                  contentFit="cover"
-                />
-              ) : (
-                <View style={styles.cellEmpty}>
-                  <AtomicIcon name="add" size="md" color="textSecondary" />
-                </View>
-              )}
-            </TouchableOpacity>
-          );
-        })}
-      </View>
+      <CollageCanvas
+        layout={layout}
+        images={images}
+        spacing={spacing}
+        borderRadius={borderRadius}
+        onCellPress={onCellPress}
+        size={size}
+      />
 
-      {/* Spacing + Border Radius */}
-      <View style={styles.controls}>
-        <View style={styles.controlRow}>
-          <AtomicText type="labelSmall" color="textSecondary">
-            {t("editor.collage.spacing") || "Spacing"}
-          </AtomicText>
-          <View style={styles.stepper}>
-            <TouchableOpacity
-              style={styles.stepBtn}
-              onPress={() => onSpacingChange(Math.max(0, spacing - 2))}
-              accessibilityLabel="Decrease spacing"
-              accessibilityRole="button"
-            >
-              <AtomicIcon name="chevron-back" size="sm" color="textSecondary" />
-            </TouchableOpacity>
-            <AtomicText fontWeight="bold" style={styles.stepValue}>
-              {spacing}
-            </AtomicText>
-            <TouchableOpacity
-              style={styles.stepBtn}
-              onPress={() => onSpacingChange(Math.min(16, spacing + 2))}
-              accessibilityLabel="Increase spacing"
-              accessibilityRole="button"
-            >
-              <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
-            </TouchableOpacity>
-          </View>
-        </View>
+      <CollageControls
+        spacing={spacing}
+        borderRadius={borderRadius}
+        onSpacingChange={onSpacingChange}
+        onBorderRadiusChange={onBorderRadiusChange}
+        t={t}
+      />
 
-        <View style={styles.controlRow}>
-          <AtomicText type="labelSmall" color="textSecondary">
-            {t("editor.collage.corners") || "Corners"}
-          </AtomicText>
-          <View style={styles.stepper}>
-            <TouchableOpacity
-              style={styles.stepBtn}
-              onPress={() => onBorderRadiusChange(Math.max(0, borderRadius - 4))}
-              accessibilityLabel="Decrease corner radius"
-              accessibilityRole="button"
-            >
-              <AtomicIcon name="chevron-back" size="sm" color="textSecondary" />
-            </TouchableOpacity>
-            <AtomicText fontWeight="bold" style={styles.stepValue}>
-              {borderRadius}
-            </AtomicText>
-            <TouchableOpacity
-              style={styles.stepBtn}
-              onPress={() => onBorderRadiusChange(Math.min(24, borderRadius + 4))}
-              accessibilityLabel="Increase corner radius"
-              accessibilityRole="button"
-            >
-              <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-
-      {/* Layout Picker */}
-      <View style={styles.layoutSection}>
+      <View style={{ paddingTop: tokens.spacing.sm }}>
         <AtomicText
           type="labelSmall"
           color="textSecondary"
@@ -232,53 +69,7 @@ export const CollageEditorCanvas: React.FC<CollageEditorCanvasProps> = ({
         >
           {t("editor.collage.layout") || "Layout"}
         </AtomicText>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.layoutScroll}
-        >
-          {COLLAGE_LAYOUTS.map((l) => {
-            const isActive = layout.id === l.id;
-            return (
-              <TouchableOpacity
-                key={l.id}
-                style={styles.layoutCard}
-                onPress={() => onSelectLayout(l)}
-                accessibilityLabel={`Layout ${l.count} cells`}
-                accessibilityRole="button"
-                accessibilityState={{ selected: isActive }}
-              >
-                <View style={[styles.layoutPreview, isActive && styles.layoutPreviewActive]}>
-                  {l.grid.map((cell, i) => {
-                    const [lx, ly, lw, lh] = cell;
-                    return (
-                      <View
-                        key={i}
-                        style={{
-                          position: "absolute",
-                          left: lx * 52 + 2,
-                          top: ly * 52 + 2,
-                          width: lw * 52 - 4,
-                          height: lh * 52 - 4,
-                          backgroundColor: isActive
-                            ? tokens.colors.primary
-                            : tokens.colors.surfaceVariant,
-                          borderRadius: 2,
-                        }}
-                      />
-                    );
-                  })}
-                </View>
-                <AtomicText
-                  type="labelSmall"
-                  color={isActive ? "primary" : "textSecondary"}
-                >
-                  {l.count}
-                </AtomicText>
-              </TouchableOpacity>
-            );
-          })}
-        </ScrollView>
+        <CollageLayoutSelector selected={layout} onSelect={onSelectLayout} />
       </View>
     </View>
   );