@umituz/react-native-video-editor 1.0.1

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

@@ -0,0 +1,198 @@
+/**
+ * Layer Operations Service (Facade)
+ * Single Responsibility: Coordinate layer operations across specialized services
+ */
+
+import { textLayerOperationsService } from "./text-layer-operations.service";
+import { imageLayerOperationsService } from "./image-layer-operations.service";
+import { shapeLayerOperationsService } from "./shape-layer-operations.service";
+import { layerManipulationService } from "./layer-manipulation.service";
+import type { Scene, TextLayer, ImageLayer, Animation } from "@domains/video";
+import type {
+  LayerOperationResult,
+  LayerOrderAction,
+  AddTextLayerData,
+  AddImageLayerData,
+  AddShapeLayerData,
+} from "../../types";
+
+class LayerOperationsService {
+  /**
+   * Add text layer to scene
+   */
+  addTextLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerData: AddTextLayerData,
+    defaultColor: string,
+  ): LayerOperationResult {
+    return textLayerOperationsService.addTextLayer(
+      scenes,
+      sceneIndex,
+      layerData,
+      defaultColor,
+    );
+  }
+
+  /**
+   * Edit text layer
+   */
+  editTextLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerId: string,
+    layerData: Partial<TextLayer>,
+  ): LayerOperationResult {
+    return textLayerOperationsService.editTextLayer(
+      scenes,
+      sceneIndex,
+      layerId,
+      layerData,
+    );
+  }
+
+  /**
+   * Add image layer to scene
+   */
+  addImageLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerData: AddImageLayerData,
+  ): LayerOperationResult {
+    return imageLayerOperationsService.addImageLayer(
+      scenes,
+      sceneIndex,
+      layerData,
+    );
+  }
+
+  /**
+   * Edit image layer
+   */
+  editImageLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerId: string,
+    layerData: Partial<ImageLayer>,
+  ): LayerOperationResult {
+    return imageLayerOperationsService.editImageLayer(
+      scenes,
+      sceneIndex,
+      layerId,
+      layerData,
+    );
+  }
+
+  /**
+   * Add shape layer to scene
+   */
+  addShapeLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerData: AddShapeLayerData,
+    defaultColor: string,
+  ): LayerOperationResult {
+    return shapeLayerOperationsService.addShapeLayer(
+      scenes,
+      sceneIndex,
+      layerData,
+      defaultColor,
+    );
+  }
+
+  /**
+   * Delete layer from scene
+   */
+  deleteLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerId: string,
+  ): LayerOperationResult {
+    return layerManipulationService.deleteLayer(scenes, sceneIndex, layerId);
+  }
+
+  /**
+   * Change layer order
+   */
+  changeLayerOrder(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerId: string,
+    action: LayerOrderAction,
+  ): LayerOperationResult {
+    return layerManipulationService.changeLayerOrder(
+      scenes,
+      sceneIndex,
+      layerId,
+      action,
+    );
+  }
+
+  /**
+   * Duplicate layer
+   */
+  duplicateLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerId: string,
+  ): LayerOperationResult {
+    return layerManipulationService.duplicateLayer(scenes, sceneIndex, layerId);
+  }
+
+  /**
+   * Update layer position
+   */
+  updateLayerPosition(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerId: string,
+    x: number,
+    y: number,
+  ): LayerOperationResult {
+    return layerManipulationService.updateLayerPosition(
+      scenes,
+      sceneIndex,
+      layerId,
+      x,
+      y,
+    );
+  }
+
+  /**
+   * Update layer size
+   */
+  updateLayerSize(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerId: string,
+    width: number,
+    height: number,
+  ): LayerOperationResult {
+    return layerManipulationService.updateLayerSize(
+      scenes,
+      sceneIndex,
+      layerId,
+      width,
+      height,
+    );
+  }
+
+  /**
+   * Update layer animation
+   */
+  updateLayerAnimation(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerId: string,
+    animation: Animation | undefined,
+  ): LayerOperationResult {
+    return layerManipulationService.updateLayerAnimation(
+      scenes,
+      sceneIndex,
+      layerId,
+      animation,
+    );
+  }
+}
+
+export const layerOperationsService = new LayerOperationsService();

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

@@ -0,0 +1,166 @@
+/**
+ * Scene Operations Service
+ * Single Responsibility: Business logic for scene operations
+ */
+
+import { generateUUID } from "@umituz/react-native-uuid";
+import type { Scene, Audio } from "@domains/video";
+import type { SceneOperationResult } from "../../types";
+
+class SceneOperationsService {
+  /**
+   * Add new scene
+   */
+  addScene(scenes: Scene[]): SceneOperationResult {
+    try {
+      const newScene: Scene = {
+        id: generateUUID(),
+        duration: 5000,
+        background: { type: "color", value: "#000000" },
+        layers: [],
+        transition: { type: "fade", duration: 500 },
+      };
+
+      const updatedScenes = [...scenes, newScene];
+      return {
+        success: true,
+        updatedScenes,
+        newSceneIndex: updatedScenes.length - 1,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        updatedScenes: scenes,
+        error: error instanceof Error ? error.message : "Failed to add scene",
+      };
+    }
+  }
+
+  /**
+   * Duplicate scene
+   */
+  duplicateScene(scenes: Scene[], sceneIndex: number): SceneOperationResult {
+    try {
+      if (sceneIndex < 0 || sceneIndex >= scenes.length) {
+        return {
+          success: false,
+          updatedScenes: scenes,
+          error: "Invalid scene index",
+        };
+      }
+
+      const sceneToDuplicate = scenes[sceneIndex];
+      const duplicatedScene: Scene = {
+        ...JSON.parse(JSON.stringify(sceneToDuplicate)),
+        id: generateUUID(),
+        layers: sceneToDuplicate.layers.map((layer) => ({
+          ...layer,
+          id: generateUUID(),
+        })),
+      };
+
+      const updatedScenes = [...scenes];
+      updatedScenes.splice(sceneIndex + 1, 0, duplicatedScene);
+
+      return {
+        success: true,
+        updatedScenes,
+        newSceneIndex: sceneIndex + 1,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        updatedScenes: scenes,
+        error:
+          error instanceof Error ? error.message : "Failed to duplicate scene",
+      };
+    }
+  }
+
+  /**
+   * Delete scene
+   */
+  deleteScene(
+    scenes: Scene[],
+    sceneIndex: number,
+    currentSceneIndex: number,
+  ): SceneOperationResult {
+    try {
+      if (scenes.length === 1) {
+        return {
+          success: false,
+          updatedScenes: scenes,
+          error: "Cannot delete the last scene",
+        };
+      }
+
+      if (sceneIndex < 0 || sceneIndex >= scenes.length) {
+        return {
+          success: false,
+          updatedScenes: scenes,
+          error: "Invalid scene index",
+        };
+      }
+
+      const updatedScenes = scenes.filter((_, index) => index !== sceneIndex);
+
+      let newSceneIndex = currentSceneIndex;
+      if (currentSceneIndex >= updatedScenes.length) {
+        newSceneIndex = updatedScenes.length - 1;
+      } else if (currentSceneIndex > sceneIndex) {
+        newSceneIndex = currentSceneIndex - 1;
+      }
+
+      return {
+        success: true,
+        updatedScenes,
+        newSceneIndex,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        updatedScenes: scenes,
+        error:
+          error instanceof Error ? error.message : "Failed to delete scene",
+      };
+    }
+  }
+
+  /**
+   * Update scene audio
+   */
+  updateSceneAudio(
+    scenes: Scene[],
+    sceneIndex: number,
+    audio: Audio | undefined,
+  ): SceneOperationResult {
+    try {
+      if (sceneIndex < 0 || sceneIndex >= scenes.length) {
+        return {
+          success: false,
+          updatedScenes: scenes,
+          error: "Invalid scene index",
+        };
+      }
+
+      const updatedScenes = [...scenes];
+      updatedScenes[sceneIndex] = {
+        ...updatedScenes[sceneIndex],
+        audio,
+      };
+
+      return { success: true, updatedScenes };
+    } catch (error) {
+      return {
+        success: false,
+        updatedScenes: scenes,
+        error:
+          error instanceof Error
+            ? error.message
+            : "Failed to update scene audio",
+      };
+    }
+  }
+}
+
+export const sceneOperationsService = new SceneOperationsService();

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

@@ -0,0 +1,65 @@
+/**
+ * Shape Layer Operations Service
+ * Single Responsibility: Shape layer business logic
+ */
+
+import { generateUUID } from "@umituz/react-native-uuid";
+import type { Scene, ShapeLayer } from "@domains/video";
+import type { LayerOperationResult, AddShapeLayerData } from "../../types";
+
+class ShapeLayerOperationsService {
+  /**
+   * Add shape layer to scene
+   */
+  addShapeLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerData: AddShapeLayerData,
+    defaultColor: string,
+  ): LayerOperationResult {
+    try {
+      if (sceneIndex < 0 || sceneIndex >= scenes.length) {
+        return {
+          success: false,
+          updatedScenes: scenes,
+          error: "Invalid scene index",
+        };
+      }
+
+      const newLayer: ShapeLayer = {
+        id: generateUUID(),
+        type: "shape",
+        shape: (layerData.shape as ShapeLayer["shape"]) || "rectangle",
+        position: { x: 25, y: 25 },
+        size: { width: 50, height: 50 },
+        rotation: 0,
+        opacity: layerData.opacity || 1,
+        fillColor: layerData.fillColor || defaultColor,
+        borderColor: layerData.borderColor,
+        borderWidth: layerData.borderWidth,
+        animation: {
+          type: "fade",
+          duration: 500,
+          easing: "ease-in-out",
+        },
+      };
+
+      const updatedScenes = [...scenes];
+      updatedScenes[sceneIndex] = {
+        ...updatedScenes[sceneIndex],
+        layers: [...updatedScenes[sceneIndex].layers, newLayer],
+      };
+
+      return { success: true, updatedScenes };
+    } catch (error) {
+      return {
+        success: false,
+        updatedScenes: scenes,
+        error:
+          error instanceof Error ? error.message : "Failed to add shape layer",
+      };
+    }
+  }
+}
+
+export const shapeLayerOperationsService = new ShapeLayerOperationsService();

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

@@ -0,0 +1,114 @@
+/**
+ * Text Layer Operations Service
+ * Single Responsibility: Text layer business logic
+ */
+
+import { generateUUID } from "@umituz/react-native-uuid";
+import type { Scene, TextLayer } from "@domains/video";
+import type { LayerOperationResult, AddTextLayerData } from "../../types";
+
+class TextLayerOperationsService {
+  /**
+   * Add text layer to scene
+   */
+  addTextLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerData: AddTextLayerData,
+    defaultColor: string,
+  ): LayerOperationResult {
+    try {
+      if (sceneIndex < 0 || sceneIndex >= scenes.length) {
+        return {
+          success: false,
+          updatedScenes: scenes,
+          error: "Invalid scene index",
+        };
+      }
+
+      const newLayer: TextLayer = {
+        id: generateUUID(),
+        type: "text",
+        content: layerData.content || "",
+        position: { x: 10, y: 40 },
+        size: { width: 80, height: 20 },
+        rotation: 0,
+        opacity: 1,
+        fontSize: layerData.fontSize || 48,
+        fontFamily: layerData.fontFamily || "System",
+        fontWeight: (layerData.fontWeight as TextLayer["fontWeight"]) || "bold",
+        color: layerData.color || defaultColor,
+        textAlign: layerData.textAlign || "center",
+        animation: {
+          type: "fade",
+          duration: 500,
+          easing: "ease-in-out",
+        },
+      };
+
+      const updatedScenes = [...scenes];
+      updatedScenes[sceneIndex] = {
+        ...updatedScenes[sceneIndex],
+        layers: [...updatedScenes[sceneIndex].layers, newLayer],
+      };
+
+      return { success: true, updatedScenes };
+    } catch (error) {
+      return {
+        success: false,
+        updatedScenes: scenes,
+        error:
+          error instanceof Error ? error.message : "Failed to add text layer",
+      };
+    }
+  }
+
+  /**
+   * Edit text layer
+   */
+  editTextLayer(
+    scenes: Scene[],
+    sceneIndex: number,
+    layerId: string,
+    layerData: Partial<TextLayer>,
+  ): LayerOperationResult {
+    try {
+      if (sceneIndex < 0 || sceneIndex >= scenes.length) {
+        return {
+          success: false,
+          updatedScenes: scenes,
+          error: "Invalid scene index",
+        };
+      }
+
+      const updatedScenes = [...scenes];
+      const layerIndex = updatedScenes[sceneIndex].layers.findIndex(
+        (l) => l.id === layerId,
+      );
+
+      if (layerIndex === -1) {
+        return {
+          success: false,
+          updatedScenes: scenes,
+          error: "Layer not found",
+        };
+      }
+
+      updatedScenes[sceneIndex].layers[layerIndex] = {
+        ...updatedScenes[sceneIndex].layers[layerIndex],
+        ...layerData,
+      } as TextLayer;
+
+      return { success: true, updatedScenes };
+    } catch (error) {
+      return {
+        success: false,
+        updatedScenes: scenes,
+        error:
+          error instanceof Error ? error.message : "Failed to edit text layer",
+      };
+    }
+  }
+}
+
+export const textLayerOperationsService = new TextLayerOperationsService();

package/src/presentation/components/AnimationEditor.tsx

@@ -0,0 +1,103 @@
+/**
+ * AnimationEditor Component
+ * Main component for editing animation layers
+ */
+
+import React from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { Animation } from "@domains/video";
+import { useAnimationLayerForm } from "../../hooks/useAnimationLayerForm";
+import {
+  DURATIONS,
+  DELAYS,
+  EASINGS,
+  type Easing,
+} from "../../constants/animation-layer.constants";
+import { ValueSelector } from "./shape-layer/ValueSelector";
+import { OptionSelector } from "./text-layer/OptionSelector";
+import {
+  AnimationTypeSelector,
+  AnimationEditorActions,
+} from "./animation-layer";
+import { AnimationInfoBanner } from "./animation-layer";
+
+interface AnimationEditorProps {
+  animation?: Animation;
+  onSave: (animation: Animation) => void;
+  onRemove?: () => void;
+  onCancel: () => void;
+}
+
+export const AnimationEditor: React.FC<AnimationEditorProps> = ({
+  animation,
+  onSave,
+  onRemove,
+  onCancel,
+}) => {
+  const {
+    formState,
+    setAnimationType,
+    setDuration,
+    setDelay,
+    setEasing,
+    buildAnimationData,
+  } = useAnimationLayerForm(animation);
+
+  const handleSave = () => {
+    onSave(buildAnimationData());
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <AnimationTypeSelector
+          selectedType={formState.animationType}
+          onTypeChange={setAnimationType}
+        />
+
+        {formState.animationType !== "none" && (
+          <>
+            <ValueSelector
+              title="Duration"
+              value={formState.duration}
+              options={DURATIONS}
+              formatValue={(val) => `${val}ms`}
+              onValueChange={setDuration}
+            />
+
+            <ValueSelector
+              title="Delay"
+              value={formState.delay}
+              options={DELAYS}
+              formatValue={(val) => `${val}ms`}
+              onValueChange={setDelay}
+            />
+
+            <OptionSelector
+              title="Easing"
+              options={EASINGS}
+              selectedValue={formState.easing}
+              onValueChange={(value) => setEasing(value as Easing)}
+            />
+
+            <AnimationInfoBanner />
+          </>
+        )}
+      </ScrollView>
+
+      <AnimationEditorActions
+        hasAnimation={!!animation}
+        onRemove={onRemove}
+        onCancel={onCancel}
+        onSave={handleSave}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 16,
+  },
+});