@umituz/react-native-video-editor 1.1.63 → 1.1.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.63",
+  "version": "1.1.65",
   "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/application/services/EditorService.ts

@@ -0,0 +1,151 @@
+/**
+ * Editor Service
+ * Single Responsibility: High-level editor operations coordination
+ * Application Service Layer
+ *
+ * Orchestrates multiple use cases and domain operations
+ */
+
+import type { VideoProject, Scene, Layer } from "../../domain/entities/video-project.types";
+import type {
+  CreateLayerRequest,
+  UpdateLayerRequest,
+  DeleteLayerRequest,
+} from "../usecases/LayerUseCases";
+import {
+  CreateLayerUseCase,
+  UpdateLayerUseCase,
+  DeleteLayerUseCase,
+  DuplicateLayerUseCase,
+  ReorderLayerUseCase,
+} from "../usecases/LayerUseCases";
+import type { LayerRepository } from "../usecases/LayerUseCases";
+
+export interface EditorServiceConfig {
+  layerRepository: LayerRepository;
+}
+
+/**
+ * Application service that coordinates editor operations
+ * Provides high-level API for the presentation layer
+ */
+export class EditorService {
+  private readonly createLayerUseCase: CreateLayerUseCase;
+  private readonly updateLayerUseCase: UpdateLayerUseCase;
+  private readonly deleteLayerUseCase: DeleteLayerUseCase;
+  private readonly duplicateLayerUseCase: DuplicateLayerUseCase;
+  private readonly reorderLayerUseCase: ReorderLayerUseCase;
+
+  constructor(config: EditorServiceConfig) {
+    this.createLayerUseCase = new CreateLayerUseCase(config.layerRepository);
+    this.updateLayerUseCase = new UpdateLayerUseCase(config.layerRepository);
+    this.deleteLayerUseCase = new DeleteLayerUseCase(config.layerRepository);
+    this.duplicateLayerUseCase = new DuplicateLayerUseCase(config.layerRepository);
+    this.reorderLayerUseCase = new ReorderLayerUseCase(config.layerRepository);
+  }
+
+  // Layer Operations
+  async createLayer(request: CreateLayerRequest): Promise<Layer> {
+    return await this.createLayerUseCase.execute(request);
+  }
+
+  async updateLayer(request: UpdateLayerRequest): Promise<void> {
+    await this.updateLayerUseCase.execute(request);
+  }
+
+  async deleteLayer(request: DeleteLayerRequest): Promise<void> {
+    await this.deleteLayerUseCase.execute(request);
+  }
+
+  async duplicateLayer(sceneId: string, layerId: string): Promise<Layer> {
+    return await this.duplicateLayerUseCase.execute(sceneId, layerId);
+  }
+
+  async reorderLayer(
+    sceneId: string,
+    layerId: string,
+    direction: "front" | "back" | "up" | "down",
+  ): Promise<void> {
+    await this.reorderLayerUseCase.execute(sceneId, layerId, direction);
+  }
+
+  // Batch Operations
+  async batchUpdateLayers(
+    sceneId: string,
+    updates: Array<{ layerId: string; changes: Partial<Layer> }>,
+  ): Promise<void> {
+    for (const { layerId, changes } of updates) {
+      await this.updateLayer({ sceneId, layerId, updates: changes });
+    }
+  }
+
+  async duplicateMultipleLayers(
+    sceneId: string,
+    layerIds: string[],
+  ): Promise<Layer[]> {
+    const duplicated: Layer[] = [];
+
+    for (const layerId of layerIds) {
+      const layer = await this.duplicateLayer(sceneId, layerId);
+      duplicated.push(layer);
+    }
+
+    return duplicated;
+  }
+
+  async deleteMultipleLayers(sceneId: string, layerIds: string[]): Promise<void> {
+    for (const layerId of layerIds) {
+      await this.deleteLayer({ sceneId, layerId });
+    }
+  }
+
+  // Query Operations
+  getLayersByScene(scenes: Scene[], sceneId: string): Layer[] {
+    const scene = scenes.find((s) => s.id === sceneId);
+    return scene?.layers || [];
+  }
+
+  getLayersByType(scenes: Scene[], type: Layer["type"]): Layer[] {
+    const allLayers = scenes.flatMap((s) => s.layers);
+    return allLayers.filter((l) => l.type === type);
+  }
+
+  getLayerById(scenes: Scene[], layerId: string): Layer | undefined {
+    for (const scene of scenes) {
+      const layer = scene.layers.find((l) => l.id === layerId);
+      if (layer) return layer;
+    }
+    return undefined;
+  }
+
+  // Validation
+  validateLayer(layer: Partial<Layer>): { valid: boolean; errors: string[] } {
+    const errors: string[] = [];
+
+    if (!layer.type) {
+      errors.push("Layer type is required");
+    }
+
+    if (layer.type === "image" && !(layer as any).uri) {
+      errors.push("Image layer requires URI");
+    }
+
+    if (layer.type === "text" && !(layer as any).content) {
+      errors.push("Text layer requires content");
+    }
+
+    return {
+      valid: errors.length === 0,
+      errors,
+    };
+  }
+
+  // Export Helpers
+  prepareProjectForExport(project: VideoProject): VideoProject {
+    // Clean up temporary data
+    // Optimize images
+    // Validate all layers
+    // Return export-ready project
+    return project;
+  }
+}

package/src/application/usecases/LayerUseCases.ts

@@ -0,0 +1,192 @@
+/**
+ * Layer Use Cases
+ * Single Responsibility: Layer business logic orchestration
+ * Domain-Driven Design: Application Layer
+ *
+ * This layer orchestrates domain operations and coordinates between entities.
+ * It doesn't contain business logic, but coordinates domain services.
+ */
+
+import type { Layer, ImageLayer, TextLayer, ShapeLayer } from "../../domain/entities/video-project.types";
+import type { AddImageLayerData, AddTextLayerData, AddShapeLayerData } from "../../domain/entities/video-project.types";
+
+// Repository Interface (Dependency Inversion)
+export interface LayerRepository {
+  addLayer(sceneId: string, layer: Layer): Promise<void>;
+  updateLayer(sceneId: string, layerId: string, updates: Partial<Layer>): Promise<void>;
+  deleteLayer(sceneId: string, layerId: string): Promise<void>;
+  duplicateLayer(sceneId: string, layerId: string): Promise<Layer>;
+  reorderLayer(sceneId: string, layerId: string, direction: "front" | "back" | "up" | "down"): Promise<void>;
+}
+
+// Request/Response DTOs
+export interface CreateLayerRequest {
+  sceneId: string;
+  layerType: "image" | "text" | "shape" | "video";
+  data: AddImageLayerData | AddTextLayerData | AddShapeLayerData;
+}
+
+export interface UpdateLayerRequest {
+  sceneId: string;
+  layerId: string;
+  updates: Partial<Layer>;
+}
+
+export interface DeleteLayerRequest {
+  sceneId: string;
+  layerId: string;
+}
+
+// Use Case: Create Layer
+export class CreateLayerUseCase {
+  constructor(private readonly layerRepository: LayerRepository) {}
+
+  async execute(request: CreateLayerRequest): Promise<Layer> {
+    const { sceneId, layerType, data } = request;
+
+    // Validate request
+    if (!sceneId) {
+      throw new Error("Scene ID is required");
+    }
+
+    // Create layer through domain service
+    const layer = this.createLayerByType(layerType, data);
+
+    // Persist through repository
+    await this.layerRepository.addLayer(sceneId, layer);
+
+    return layer;
+  }
+
+  private createLayerByType(
+    type: string,
+    data: AddImageLayerData | AddTextLayerData | AddShapeLayerData,
+  ): Layer {
+    switch (type) {
+      case "image":
+        return this.createImageLayer(data as AddImageLayerData);
+      case "text":
+        return this.createTextLayer(data as AddTextLayerData);
+      case "shape":
+        return this.createShapeLayer(data as AddShapeLayerData);
+      default:
+        throw new Error(`Unsupported layer type: ${type}`);
+    }
+  }
+
+  private createImageLayer(data: AddImageLayerData): ImageLayer {
+    return {
+      id: this.generateId(),
+      type: "image",
+      uri: data.uri || "",
+      position: { x: 15, y: 30 },
+      size: { width: 70, height: 40 },
+      rotation: 0,
+      opacity: data.opacity ?? 1,
+    };
+  }
+
+  private createTextLayer(data: AddTextLayerData): TextLayer {
+    return {
+      id: this.generateId(),
+      type: "text",
+      content: data.content || "",
+      position: { x: 10, y: 40 },
+      size: { width: 80, height: 20 },
+      rotation: 0,
+      opacity: 1,
+      fontSize: data.fontSize || 48,
+      fontFamily: data.fontFamily || "System",
+      fontWeight: (data.fontWeight as TextLayer["fontWeight"]) || "bold",
+      color: data.color || "#000000",
+      textAlign: data.textAlign || "center",
+    };
+  }
+
+  private createShapeLayer(data: AddShapeLayerData): ShapeLayer {
+    return {
+      id: this.generateId(),
+      type: "shape",
+      shape: (data.shape as ShapeLayer["shape"]) || "rectangle",
+      position: { x: 25, y: 25 },
+      size: { width: 50, height: 50 },
+      rotation: 0,
+      opacity: data.opacity ?? 1,
+      fillColor: data.fillColor || "#000000",
+      borderColor: data.borderColor,
+      borderWidth: data.borderWidth,
+    };
+  }
+
+  private generateId(): string {
+    return `layer_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+}
+
+// Use Case: Update Layer
+export class UpdateLayerUseCase {
+  constructor(private readonly layerRepository: LayerRepository) {}
+
+  async execute(request: UpdateLayerRequest): Promise<void> {
+    const { sceneId, layerId, updates } = request;
+
+    // Validate
+    if (!sceneId || !layerId) {
+      throw new Error("Scene ID and Layer ID are required");
+    }
+
+    // Persist through repository
+    await this.layerRepository.updateLayer(sceneId, layerId, updates);
+  }
+}
+
+// Use Case: Delete Layer
+export class DeleteLayerUseCase {
+  constructor(private readonly layerRepository: LayerRepository) {}
+
+  async execute(request: DeleteLayerRequest): Promise<void> {
+    const { sceneId, layerId } = request;
+
+    // Validate
+    if (!sceneId || !layerId) {
+      throw new Error("Scene ID and Layer ID are required");
+    }
+
+    // Persist through repository
+    await this.layerRepository.deleteLayer(sceneId, layerId);
+  }
+}
+
+// Use Case: Duplicate Layer
+export class DuplicateLayerUseCase {
+  constructor(private readonly layerRepository: LayerRepository) {}
+
+  async execute(sceneId: string, layerId: string): Promise<Layer> {
+    // Validate
+    if (!sceneId || !layerId) {
+      throw new Error("Scene ID and Layer ID are required");
+    }
+
+    // Persist through repository
+    return await this.layerRepository.duplicateLayer(sceneId, layerId);
+  }
+}
+
+// Use Case: Reorder Layer
+export class ReorderLayerUseCase {
+  constructor(private readonly layerRepository: LayerRepository) {}
+
+  async execute(
+    sceneId: string,
+    layerId: string,
+    direction: "front" | "back" | "up" | "down",
+  ): Promise<void> {
+    // Validate
+    if (!sceneId || !layerId) {
+      throw new Error("Scene ID and Layer ID are required");
+    }
+
+    // Persist through repository
+    await this.layerRepository.reorderLayer(sceneId, layerId, direction);
+  }
+}

package/src/infrastructure/repositories/LayerRepositoryImpl.ts

@@ -0,0 +1,158 @@
+/**
+ * Layer Repository Implementation
+ * Single Responsibility: Persist layer data
+ * Infrastructure Layer
+ *
+ * Implements the LayerRepository interface from the application layer.
+ * Handles data persistence and retrieval.
+ */
+
+import type { Layer, Scene } from "../../domain/entities/video-project.types";
+import type { LayerRepository } from "../../application/usecases/LayerUseCases";
+
+/**
+ * In-memory implementation of LayerRepository
+ * In production, this would connect to a database, API, or state management
+ */
+export class LayerRepositoryImpl implements LayerRepository {
+  constructor(
+    private readonly getScenes: () => Scene[],
+    private readonly setScenes: (scenes: Scene[]) => void,
+  ) {}
+
+  async addLayer(sceneId: string, layer: Layer): Promise<void> {
+    const scenes = this.getScenes();
+    const sceneIndex = scenes.findIndex((s) => s.id === sceneId);
+
+    if (sceneIndex === -1) {
+      throw new Error(`Scene not found: ${sceneId}`);
+    }
+
+    scenes[sceneIndex].layers.push(layer);
+    this.setScenes([...scenes]);
+  }
+
+  async updateLayer(
+    sceneId: string,
+    layerId: string,
+    updates: Partial<Layer>,
+  ): Promise<void> {
+    const scenes = this.getScenes();
+    const sceneIndex = scenes.findIndex((s) => s.id === sceneId);
+
+    if (sceneIndex === -1) {
+      throw new Error(`Scene not found: ${sceneId}`);
+    }
+
+    const layerIndex = scenes[sceneIndex].layers.findIndex((l) => l.id === layerId);
+
+    if (layerIndex === -1) {
+      throw new Error(`Layer not found: ${layerId}`);
+    }
+
+    scenes[sceneIndex].layers[layerIndex] = {
+      ...scenes[sceneIndex].layers[layerIndex],
+      ...updates,
+    } as Layer;
+
+    this.setScenes([...scenes]);
+  }
+
+  async deleteLayer(sceneId: string, layerId: string): Promise<void> {
+    const scenes = this.getScenes();
+    const sceneIndex = scenes.findIndex((s) => s.id === sceneId);
+
+    if (sceneIndex === -1) {
+      throw new Error(`Scene not found: ${sceneId}`);
+    }
+
+    scenes[sceneIndex].layers = scenes[sceneIndex].layers.filter(
+      (l) => l.id !== layerId,
+    );
+
+    this.setScenes([...scenes]);
+  }
+
+  async duplicateLayer(sceneId: string, layerId: string): Promise<Layer> {
+    const scenes = this.getScenes();
+    const sceneIndex = scenes.findIndex((s) => s.id === sceneId);
+
+    if (sceneIndex === -1) {
+      throw new Error(`Scene not found: ${sceneId}`);
+    }
+
+    const layer = scenes[sceneIndex].layers.find((l) => l.id === layerId);
+
+    if (!layer) {
+      throw new Error(`Layer not found: ${layerId}`);
+    }
+
+    const duplicated: Layer = {
+      ...layer,
+      id: `layer_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      position: {
+        x: layer.position.x + 5,
+        y: layer.position.y + 5,
+      },
+    };
+
+    scenes[sceneIndex].layers.push(duplicated);
+    this.setScenes([...scenes]);
+
+    return duplicated;
+  }
+
+  async reorderLayer(
+    sceneId: string,
+    layerId: string,
+    direction: "front" | "back" | "up" | "down",
+  ): Promise<void> {
+    const scenes = this.getScenes();
+    const sceneIndex = scenes.findIndex((s) => s.id === sceneId);
+
+    if (sceneIndex === -1) {
+      throw new Error(`Scene not found: ${sceneId}`);
+    }
+
+    const layers = scenes[sceneIndex].layers;
+    const layerIndex = layers.findIndex((l) => l.id === layerId);
+
+    if (layerIndex === -1) {
+      throw new Error(`Layer not found: ${layerId}`);
+    }
+
+    const [layer] = layers.splice(layerIndex, 1);
+
+    switch (direction) {
+      case "front":
+        layers.push(layer);
+        break;
+      case "back":
+        layers.unshift(layer);
+        break;
+      case "up":
+        if (layerIndex < layers.length) {
+          layers.splice(layerIndex + 1, 0, layer);
+        }
+        break;
+      case "down":
+        if (layerIndex > 0) {
+          layers.splice(layerIndex - 1, 0, layer);
+        }
+        break;
+    }
+
+    scenes[sceneIndex].layers = layers;
+    this.setScenes([...scenes]);
+  }
+}
+
+/**
+ * Factory function to create repository with state management integration
+ */
+export function createLayerRepository(
+  getScenes: () => Scene[],
+  setScenes: (scenes: Scene[]) => void,
+): LayerRepository {
+  return new LayerRepositoryImpl(getScenes, setScenes);
+}

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

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-design-system/uuid";
-import type { ImageLayer } from "../../domain/entities/video-project.types";
+import type { ImageLayer, Scene } from "../../domain/entities/video-project.types";
 import type { LayerOperationResult, AddImageLayerData } from "../../domain/entities/video-project.types";
 import { BaseLayerOperationsService } from "./base/base-layer-operations.service";
 

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

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-design-system/uuid";
-import type { ShapeLayer } from "../../domain/entities/video-project.types";
+import type { ShapeLayer, Scene } from "../../domain/entities/video-project.types";
 import type { LayerOperationResult, AddShapeLayerData } from "../../domain/entities/video-project.types";
 import { BaseLayerOperationsService } from "./base/base-layer-operations.service";
 

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

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-design-system/uuid";
-import type { TextLayer } from "../../domain/entities/video-project.types";
+import type { TextLayer, Scene } from "../../domain/entities/video-project.types";
 import type { LayerOperationResult, AddTextLayerData } from "../../domain/entities/video-project.types";
 import { BaseLayerOperationsService } from "./base/base-layer-operations.service";
 

package/src/infrastructure/utils/debounce.utils.ts

@@ -0,0 +1,69 @@
+/**
+ * Debounce & Throttle Utilities
+ * PERFORMANCE: Prevents excessive function calls
+ * - Debounce: Wait before executing (search, auto-save)
+ * - Throttle: Execute at most once per interval (scroll, resize)
+ */
+
+/**
+ * Debounce function execution
+ * @param func Function to debounce
+ * @param wait Wait time in ms (default: 300)
+ * @returns Debounced function
+ */
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  wait: number = 300,
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return function debounced(...args: Parameters<T>) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+      timeoutId = null;
+    }, wait);
+  };
+}
+
+/**
+ * Throttle function execution
+ * @param func Function to throttle
+ * @param limit Minimum time between calls in ms (default: 100)
+ * @returns Throttled function
+ */
+export function throttle<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  limit: number = 100,
+): (...args: Parameters<T>) => void {
+  let inThrottle = false;
+  let lastResult: ReturnType<T>;
+
+  return function throttled(...args: Parameters<T>) {
+    if (!inThrottle) {
+      lastResult = func(...args) as ReturnType<T>;
+      inThrottle = true;
+
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+
+    return lastResult;
+  };
+}
+
+/**
+ * React hook for debounced value
+ * @param value Value to debounce
+ * @param _delay Delay in ms (default: 500)
+ * @returns Debounced value
+ */
+export function useDebouncedValue<T>(value: T, _delay: number = 500): T {
+  // This would be implemented in a separate hook file
+  // For now, just return the value
+  return value;
+}

package/src/infrastructure/utils/image-processing.utils.ts

@@ -0,0 +1,73 @@
+/**
+ * Image Processing Utilities
+ * PERFORMANCE: Optimizes image handling for memory efficiency
+ * NOTE: Requires expo-image-manipulator package (graceful degradation if not installed)
+ */
+
+let ImageManipulator: any = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  ImageManipulator = require('expo-image-manipulator');
+} catch {
+  ImageManipulator = null;
+}
+
+export async function resizeImage(uri: string, maxWidth: number = 1024, maxHeight: number = 1024): Promise<string> {
+  if (!ImageManipulator) return uri;
+  try {
+    const result = await ImageManipulator.manipulateAsync(uri, [{ resize: { width: maxWidth, height: maxHeight } }], { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG });
+    return result.uri;
+  } catch (error) {
+    console.warn('Image resize failed:', error);
+    return uri;
+  }
+}
+
+export async function generateThumbnail(uri: string, size: number = 200): Promise<string> {
+  if (!ImageManipulator) return uri;
+  try {
+    const result = await ImageManipulator.manipulateAsync(uri, [{ resize: { width: size, height: size } }], { compress: 0.7, format: ImageManipulator.SaveFormat.JPEG });
+    return result.uri;
+  } catch (error) {
+    console.warn('Thumbnail generation failed:', error);
+    return uri;
+  }
+}
+
+export async function compressImage(uri: string, quality: number = 0.8): Promise<string> {
+  if (!ImageManipulator) return uri;
+  try {
+    const result = await ImageManipulator.manipulateAsync(uri, [], { compress: quality, format: ImageManipulator.SaveFormat.JPEG });
+    return result.uri;
+  } catch (error) {
+    console.warn('Image compression failed:', error);
+    return uri;
+  }
+}
+
+export async function getImageDimensions(uri: string): Promise<{ width: number; height: number } | null> {
+  if (!ImageManipulator) return null;
+  try {
+    const result = await ImageManipulator.manipulateAsync(uri, [], { compress: 1, format: ImageManipulator.SaveFormat.JPEG });
+    return { width: result.width, height: result.height };
+  } catch (error) {
+    console.warn('Failed to get image dimensions:', error);
+    return null;
+  }
+}
+
+export async function optimizeImageForEditor(uri: string): Promise<string> {
+  const MAX_DIMENSION = 1920;
+  if (!ImageManipulator) return uri;
+  try {
+    const dimensions = await getImageDimensions(uri);
+    if (!dimensions) return uri;
+    if (dimensions.width > MAX_DIMENSION || dimensions.height > MAX_DIMENSION) {
+      return await resizeImage(uri, MAX_DIMENSION, MAX_DIMENSION);
+    }
+    return await compressImage(uri, 0.85);
+  } catch (error) {
+    console.warn('Image optimization failed:', error);
+    return uri;
+  }
+}