@umituz/react-native-video-editor 1.1.54 → 1.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.54",
+  "version": "1.1.55",
   "description": "Professional video editor with layer-based timeline, text/image/shape/audio/animation layers, and export functionality",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/infrastructure/services/layer-operations/layer-duplicate.service.ts

@@ -6,10 +6,12 @@
 import { generateUUID } from "@umituz/react-native-design-system/uuid";
 import type { Scene } from "../../../domain/entities/video-project.types";
 import type { LayerOperationResult } from "../../../domain/entities/video-project.types";
+import { cloneLayerWithNewId } from "../../../infrastructure/utils/data-clone.utils";
 
 class LayerDuplicateService {
   /**
    * Duplicate layer
+   * Optimized using clone utility for better performance
    */
   duplicateLayer(
     scenes: Scene[],
@@ -37,9 +39,9 @@ class LayerDuplicateService {
         };
       }
 
+      // Use clone utility for consistent duplication
       const duplicatedLayer = {
-        ...JSON.parse(JSON.stringify(layerToDuplicate)),
-        id: generateUUID(),
+        ...cloneLayerWithNewId(layerToDuplicate, generateUUID),
         position: {
           x: layerToDuplicate.position.x + 5,
           y: layerToDuplicate.position.y + 5,

package/src/infrastructure/services/scene-operations.service.ts

@@ -6,6 +6,7 @@
 import { generateUUID } from "@umituz/react-native-design-system/uuid";
 import type { Scene, Audio } from "../../domain/entities/video-project.types";
 import type { SceneOperationResult } from "../../domain/entities/video-project.types";
+import { cloneSceneWithNewId } from "../utils/data-clone.utils";
 
 class SceneOperationsService {
   /**
@@ -38,6 +39,7 @@ class SceneOperationsService {
 
   /**
    * Duplicate scene
+   * Optimized using clone utility for better performance
    */
   duplicateScene(scenes: Scene[], sceneIndex: number): SceneOperationResult {
     try {
@@ -50,14 +52,9 @@ class SceneOperationsService {
       }
 
       const sceneToDuplicate = scenes[sceneIndex];
-      const duplicatedScene: Scene = {
-        ...JSON.parse(JSON.stringify(sceneToDuplicate)),
-        id: generateUUID(),
-        layers: sceneToDuplicate.layers.map((layer) => ({
-          ...layer,
-          id: generateUUID(),
-        })),
-      };
+
+      // Use clone utility for consistent duplication
+      const duplicatedScene = cloneSceneWithNewId(sceneToDuplicate, generateUUID);
 
       const updatedScenes = [...scenes];
       updatedScenes.splice(sceneIndex + 1, 0, duplicatedScene);

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

@@ -0,0 +1,141 @@
+/**
+ * Data Clone Utilities
+ * Optimized deep cloning functions for video editor data structures
+ */
+
+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
+ */
+export function cloneVideoProject(project: VideoProject): VideoProject {
+  // Use structured clone for better performance if available
+  if (typeof structuredClone !== 'undefined') {
+    return structuredClone(project);
+  }
+
+  // Manual clone fallback - only clone what's necessary
+  return {
+    ...project,
+    scenes: project.scenes.map((scene: Scene) => ({
+      ...scene,
+      layers: scene.layers.map((layer: Layer) => ({ ...layer })),
+    })),
+  };
+}
+
+/**
+ * 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 })),
+  };
+}
+
+/**
+ * Optimized shallow clone for Layer
+ * Layer objects are already immutable in our architecture
+ */
+export function cloneLayer(layer: Layer): Layer {
+  return { ...layer };
+}
+
+/**
+ * Clone multiple layers
+ */
+export function cloneLayers(layers: Layer[]): Layer[] {
+  return layers.map((layer: Layer) => ({ ...layer }));
+}
+
+/**
+ * Clone scene with new ID (for duplication)
+ */
+export function cloneSceneWithNewId(scene: Scene, generateId: () => string): Scene {
+  return {
+    ...scene,
+    id: generateId(),
+    layers: scene.layers.map((layer: Layer) => ({
+      ...layer,
+      id: generateId(),
+    })),
+  };
+}
+
+/**
+ * Clone layer with new ID (for duplication)
+ */
+export function cloneLayerWithNewId(layer: Layer, generateId: () => string): Layer {
+  return {
+    ...layer,
+    id: generateId(),
+  };
+}
+
+/**
+ * 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)
+ */
+export function cloneArray<T>(array: T[]): T[] {
+  return [...array];
+}
+
+/**
+ * Safe array slice that handles edge cases
+ */
+export function safeSlice<T>(
+  array: T[],
+  start?: number,
+  end?: number,
+): T[] {
+  return array.slice(start, end);
+}
+
+/**
+ * Check if two values are shallow equal
+ */
+export function isShallowEqual<T>(a: T, b: T): boolean {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== 'object' || typeof b !== 'object') return false;
+
+  const keysA = Object.keys(a as object);
+  const keysB = Object.keys(b as object);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (const key of keysA) {
+    if ((a as Record<string, unknown>)[key] !== (b as Record<string, unknown>)[key]) {
+      return false;
+    }
+  }
+
+  return true;
+}

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

@@ -0,0 +1,182 @@
+/**
+ * Position & Size Calculation Utilities
+ * Centralized position and size calculations for video editor
+ */
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+/**
+ * Convert percentage position to canvas pixels
+ */
+export function percentageToPixels(
+  percentage: number,
+  canvasSize: number,
+): number {
+  if (canvasSize <= 0) return 0;
+  return (percentage / 100) * canvasSize;
+}
+
+/**
+ * Convert canvas pixels to percentage
+ */
+export function pixelsToPercentage(
+  pixels: number,
+  canvasSize: number,
+): number {
+  if (canvasSize <= 0) return 0;
+  return (pixels / canvasSize) * 100;
+}
+
+/**
+ * Convert position from percentage to pixels
+ */
+export function positionToPixels(
+  position: Position,
+  canvasWidth: number,
+  canvasHeight: number,
+): Position {
+  return {
+    x: percentageToPixels(position.x, canvasWidth),
+    y: percentageToPixels(position.y, canvasHeight),
+  };
+}
+
+/**
+ * Convert position from pixels to percentage
+ */
+export function positionToPercentage(
+  position: Position,
+  canvasWidth: number,
+  canvasHeight: number,
+): Position {
+  return {
+    x: pixelsToPercentage(position.x, canvasWidth),
+    y: pixelsToPercentage(position.y, canvasHeight),
+  };
+}
+
+/**
+ * Convert size from percentage to pixels
+ */
+export function sizeToPixels(
+  size: Size,
+  canvasWidth: number,
+  canvasHeight: number,
+): Size {
+  return {
+    width: percentageToPixels(size.width, canvasWidth),
+    height: percentageToPixels(size.height, canvasHeight),
+  };
+}
+
+/**
+ * Convert size from pixels to percentage
+ */
+export function sizeToPercentage(
+  size: Size,
+  canvasWidth: number,
+  canvasHeight: number,
+): Size {
+  return {
+    width: pixelsToPercentage(size.width, canvasWidth),
+    height: pixelsToPercentage(size.height, canvasHeight),
+  };
+}
+
+/**
+ * Clamp value between min and max
+ */
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+/**
+ * Clamp position to canvas bounds (in pixels)
+ */
+export function clampPositionToCanvas(
+  position: Position,
+  canvasWidth: number,
+  canvasHeight: number,
+  elementWidth: number,
+  elementHeight: number,
+): Position {
+  return {
+    x: clamp(position.x, 0, canvasWidth - elementWidth),
+    y: clamp(position.y, 0, canvasHeight - elementHeight),
+  };
+}
+
+/**
+ * Clamp position to percentage bounds (0-100)
+ */
+export function clampPositionPercentage(position: Position): Position {
+  return {
+    x: clamp(position.x, 0, 100),
+    y: clamp(position.y, 0, 100),
+  };
+}
+
+/**
+ * Clamp size to minimum and maximum percentage values
+ */
+export function clampSizePercentage(
+  size: Size,
+  minSize: number = 1,
+  maxSize: number = 100,
+): Size {
+  return {
+    width: clamp(size.width, minSize, maxSize),
+    height: clamp(size.height, minSize, maxSize),
+  };
+}
+
+/**
+ * Calculate center position for an element
+ */
+export function calculateCenterPosition(
+  elementWidth: number,
+  elementHeight: number,
+  canvasWidth: number,
+  canvasHeight: number,
+): Position {
+  return {
+    x: (canvasWidth - elementWidth) / 2,
+    y: (canvasHeight - elementHeight) / 2,
+  };
+}
+
+/**
+ * Offset position by delta
+ */
+export function offsetPosition(position: Position, deltaX: number, deltaY: number): Position {
+  return {
+    x: position.x + deltaX,
+    y: position.y + deltaY,
+  };
+}
+
+/**
+ * Check if position is within canvas bounds
+ */
+export function isPositionInBounds(
+  position: Position,
+  canvasWidth: number,
+  canvasHeight: number,
+  elementWidth: number,
+  elementHeight: number,
+): boolean {
+  return (
+    position.x >= 0 &&
+    position.y >= 0 &&
+    position.x + elementWidth <= canvasWidth &&
+    position.y + elementHeight <= canvasHeight
+  );
+}

package/src/infrastructure/utils/srt.utils.ts

@@ -1,16 +1,10 @@
 /**
  * SRT Subtitle Utilities
+ * Re-exports time utilities for backward compatibility
  */
 
 import type { Subtitle } from "../../domain/entities/video-project.types";
-
-function toSrtTime(seconds: number): string {
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor((seconds % 3600) / 60);
-  const s = Math.floor(seconds % 60);
-  const ms = Math.floor((seconds % 1) * 1000);
-  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")},${String(ms).padStart(3, "0")}`;
-}
+import { toSrtTime } from "./time-calculations.utils";
 
 export function generateSRT(subtitles: Subtitle[]): string {
   const validSubtitles = subtitles.filter((sub) => (
@@ -26,15 +20,5 @@ export function generateSRT(subtitles: Subtitle[]): string {
     .join("\n");
 }
 
-export function formatTimeDisplay(seconds: number): string {
-  const m = Math.floor(seconds / 60);
-  const s = Math.floor(seconds % 60);
-  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-}
-
-export function formatTimeDetailed(seconds: number): string {
-  const m = Math.floor(seconds / 60);
-  const s = Math.floor(seconds % 60);
-  const t = Math.floor((seconds % 1) * 10);
-  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}.${t}`;
-}
+// Re-export time utilities for backward compatibility
+export { formatTimeDisplay, formatTimeDetailed, toSrtTime } from "./time-calculations.utils";

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

@@ -0,0 +1,107 @@
+/**
+ * Time Calculation Utilities
+ * Centralized time-related calculations for video editor
+ */
+
+/**
+ * Convert milliseconds to seconds
+ */
+export function msToSeconds(ms: number): number {
+  return ms / 1000;
+}
+
+/**
+ * Convert seconds to milliseconds
+ */
+export function secondsToMs(seconds: number): number {
+  return seconds * 1000;
+}
+
+/**
+ * Format milliseconds as display time (e.g., "5s" or "1:23")
+ */
+export function formatTimeDisplay(ms: number, showMinutes: boolean = false): string {
+  const totalSeconds = Math.floor(ms / 1000);
+
+  if (!showMinutes || totalSeconds < 60) {
+    return `${totalSeconds}s`;
+  }
+
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+
+/**
+ * Format milliseconds as detailed time (e.g., "1:23.4")
+ */
+export function formatTimeDetailed(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const tenths = Math.floor((ms % 1000) / 100);
+
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${tenths}`;
+}
+
+/**
+ * Calculate progress percentage (0-1)
+ */
+export function calculateProgress(current: number, total: number): number {
+  if (total <= 0) return 0;
+  return Math.min(1, Math.max(0, current / total));
+}
+
+/**
+ * Calculate progress percentage (0-100)
+ */
+export function calculateProgressPercent(current: number, total: number): number {
+  return calculateProgress(current, total) * 100;
+}
+
+/**
+ * Calculate delta time between two timestamps
+ */
+export function calculateDelta(current: number, previous: number): number {
+  return current - previous;
+}
+
+/**
+ * Add delta time to base time
+ */
+export function addDeltaTime(baseTime: number, deltaTime: number): number {
+  return baseTime + deltaTime;
+}
+
+/**
+ * Clamp time to duration bounds
+ */
+export function clampTime(time: number, duration: number): number {
+  return Math.max(0, Math.min(duration, time));
+}
+
+/**
+ * Check if time is at or past duration
+ */
+export function isTimeAtEnd(time: number, duration: number): boolean {
+  return time >= duration;
+}
+
+/**
+ * Convert seconds to SRT time format (HH:MM:SS,mmm)
+ */
+export function toSrtTime(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  const ms = Math.floor((seconds % 1) * 1000);
+
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")},${String(ms).padStart(3, "0")}`;
+}
+
+/**
+ * Calculate total duration from scenes (in milliseconds)
+ */
+export function calculateTotalDuration(sceneDurations: number[]): number {
+  return sceneDurations.reduce((total, duration) => total + duration, 0);
+}

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

@@ -0,0 +1,169 @@
+/**
+ * Video Calculation Utilities
+ * Centralized video-related calculations for export and file size estimation
+ */
+
+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;
+
+/**
+ * Calculate estimated file size for video export
+ */
+export function calculateEstimatedFileSize(
+  durationSeconds: number,
+  resolution: string,
+  quality: string,
+): number {
+  const baseSize = durationSeconds * BASE_SIZE_PER_SECOND;
+  const resolutionMultiplier = RESOLUTION_MULTIPLIERS[resolution] || 1.0;
+  const qualityMultiplier = QUALITY_MULTIPLIERS[quality] || 1.0;
+
+  return baseSize * resolutionMultiplier * qualityMultiplier;
+}
+
+/**
+ * Calculate estimated file size and return formatted string
+ */
+export function formatEstimatedFileSize(
+  durationSeconds: number,
+  resolution: string,
+  quality: string,
+  decimals: number = 1,
+): string {
+  const sizeInMB = calculateEstimatedFileSize(durationSeconds, resolution, quality);
+  return sizeInMB.toFixed(decimals);
+}
+
+/**
+ * Calculate total project duration from scenes (in seconds)
+ */
+export function calculateProjectDuration(scenes: Scene[]): number {
+  return scenes.reduce((total, scene) => total + scene.duration, 0) / 1000;
+}
+
+/**
+ * Calculate total project duration from VideoProject (in seconds)
+ */
+export function calculateVideoProjectDuration(project: VideoProject): number {
+  return calculateProjectDuration(project.scenes);
+}
+
+/**
+ * Calculate aspect ratio as decimal
+ */
+export function getAspectRatioValue(aspectRatio: string): number {
+  const ratioMap: Record<string, number> = {
+    "16:9": 16 / 9,
+    "9:16": 9 / 16,
+    "1:1": 1,
+    "4:5": 4 / 5,
+  };
+
+  return ratioMap[aspectRatio] || 16 / 9;
+}
+
+/**
+ * Calculate height from width and aspect ratio
+ */
+export function calculateHeightFromAspectRatio(
+  width: number,
+  aspectRatio: string,
+): number {
+  const ratio = getAspectRatioValue(aspectRatio);
+  return width / ratio;
+}
+
+/**
+ * Calculate width from height and aspect ratio
+ */
+export function calculateWidthFromAspectRatio(
+  height: number,
+  aspectRatio: string,
+): number {
+  const ratio = getAspectRatioValue(aspectRatio);
+  return height * ratio;
+}
+
+/**
+ * Calculate resolution dimensions
+ */
+export interface ResolutionDimensions {
+  width: number;
+  height: number;
+}
+
+export function calculateResolutionDimensions(
+  resolution: string,
+  aspectRatio: string,
+): ResolutionDimensions {
+  const baseHeights: Record<string, number> = {
+    "720p": 720,
+    "1080p": 1080,
+    "4k": 2160,
+  };
+
+  const height = baseHeights[resolution] || 1080;
+  const width = calculateWidthFromAspectRatio(height, aspectRatio);
+
+  return { width, height };
+}
+
+/**
+ * Calculate bitrate based on resolution and quality (in kbps)
+ */
+export function calculateBitrate(
+  resolution: string,
+  quality: string,
+): number {
+  const baseBitrates: Record<string, number> = {
+    "720p": 5000,
+    "1080p": 10000,
+    "4k": 40000,
+  };
+
+  const qualityMultipliers: Record<string, number> = {
+    low: 0.6,
+    medium: 1.0,
+    high: 1.5,
+  };
+
+  const baseBitrate = baseBitrates[resolution] || 10000;
+  const qualityMultiplier = qualityMultipliers[quality] || 1.0;
+
+  return Math.round(baseBitrate * qualityMultiplier);
+}
+
+/**
+ * Estimate file size based on bitrate and duration (in MB)
+ */
+export function estimateFileSizeFromBitrate(
+  bitrateKbps: number,
+  durationSeconds: number,
+): number {
+  // Formula: (bitrate in kbps * duration) / 8 = kilobytes
+  // Then divide by 1024 to get MB
+  const kilobytes = (bitrateKbps * durationSeconds) / 8;
+  return kilobytes / 1024;
+}