@umituz/react-native-video-editor 1.0.1

package/src/presentation/hooks/useExportForm.ts

@@ -0,0 +1,96 @@
+/**
+ * useExportForm Hook
+ * Manages form state for export dialog
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type { ExportSettings, VideoProject } from "@domains/video";
+import type {
+  Resolution,
+  Quality,
+  Format,
+} from "../constants/export.constants";
+import {
+  BASE_SIZE_PER_SECOND,
+  RESOLUTION_MULTIPLIERS,
+  QUALITY_MULTIPLIERS,
+} from "../constants/export.constants";
+
+export interface ExportFormState {
+  resolution: Resolution;
+  quality: Quality;
+  format: Format;
+  includeWatermark: boolean;
+}
+
+export interface UseExportFormReturn {
+  formState: ExportFormState;
+  setResolution: (resolution: Resolution) => void;
+  setQuality: (quality: Quality) => void;
+  setFormat: (format: Format) => void;
+  setIncludeWatermark: (include: boolean) => void;
+  buildExportSettings: () => ExportSettings;
+  estimatedSize: string;
+  projectDuration: number;
+}
+
+/**
+ * Hook for managing export form state
+ */
+export function useExportForm(project: VideoProject): UseExportFormReturn {
+  const [formState, setFormState] = useState<ExportFormState>({
+    resolution: "1080p",
+    quality: "high",
+    format: "mp4",
+    includeWatermark: false,
+  });
+
+  const projectDuration = useMemo(() => {
+    return (
+      project.scenes.reduce((acc, scene) => acc + scene.duration, 0) / 1000
+    );
+  }, [project.scenes]);
+
+  const estimatedSize = useMemo(() => {
+    const baseSize = projectDuration * BASE_SIZE_PER_SECOND;
+    const resolutionMultiplier = RESOLUTION_MULTIPLIERS[formState.resolution];
+    const qualityMultiplier = QUALITY_MULTIPLIERS[formState.quality];
+    return (baseSize * resolutionMultiplier * qualityMultiplier).toFixed(1);
+  }, [projectDuration, formState.resolution, formState.quality]);
+
+  const setResolution = useCallback((resolution: Resolution) => {
+    setFormState((prev) => ({ ...prev, resolution }));
+  }, []);
+
+  const setQuality = useCallback((quality: Quality) => {
+    setFormState((prev) => ({ ...prev, quality }));
+  }, []);
+
+  const setFormat = useCallback((format: Format) => {
+    setFormState((prev) => ({ ...prev, format }));
+  }, []);
+
+  const setIncludeWatermark = useCallback((include: boolean) => {
+    setFormState((prev) => ({ ...prev, includeWatermark: include }));
+  }, []);
+
+  const buildExportSettings = useCallback((): ExportSettings => {
+    return {
+      resolution: formState.resolution,
+      quality: formState.quality,
+      format: formState.format,
+      includeWatermark: formState.includeWatermark,
+    };
+  }, [formState]);
+
+  return {
+    formState,
+    setResolution,
+    setQuality,
+    setFormat,
+    setIncludeWatermark,
+    buildExportSettings,
+    estimatedSize,
+    projectDuration,
+  };
+}

package/src/presentation/hooks/useImageLayerForm.ts

@@ -0,0 +1,57 @@
+/**
+ * useImageLayerForm Hook
+ * Manages form state for image layer editor
+ */
+
+import { useState, useCallback } from "react";
+import type { ImageLayer } from "@domains/video";
+
+export interface ImageLayerFormState {
+  imageUri: string;
+  opacity: number;
+}
+
+export interface UseImageLayerFormReturn {
+  formState: ImageLayerFormState;
+  setImageUri: (uri: string) => void;
+  setOpacity: (opacity: number) => void;
+  buildLayerData: () => Partial<ImageLayer>;
+  isValid: boolean;
+}
+
+/**
+ * Hook for managing image layer form state
+ */
+export function useImageLayerForm(
+  initialLayer?: ImageLayer,
+): UseImageLayerFormReturn {
+  const [formState, setFormState] = useState<ImageLayerFormState>({
+    imageUri: initialLayer?.uri || "",
+    opacity: initialLayer?.opacity || 1,
+  });
+
+  const setImageUri = useCallback((uri: string) => {
+    setFormState((prev) => ({ ...prev, imageUri: uri }));
+  }, []);
+
+  const setOpacity = useCallback((opacity: number) => {
+    setFormState((prev) => ({ ...prev, opacity }));
+  }, []);
+
+  const buildLayerData = useCallback((): Partial<ImageLayer> => {
+    return {
+      uri: formState.imageUri,
+      opacity: formState.opacity,
+    };
+  }, [formState]);
+
+  const isValid = formState.imageUri.length > 0;
+
+  return {
+    formState,
+    setImageUri,
+    setOpacity,
+    buildLayerData,
+    isValid,
+  };
+}

package/src/presentation/hooks/useImageLayerOperations.ts

@@ -0,0 +1,71 @@
+/**
+ * useImageLayerOperations Hook
+ * Single Responsibility: Image layer operations (add, edit)
+ */
+
+import { useCallback } from "react";
+import { Alert } from "react-native";
+import { layerOperationsService } from "../infrastructure/services/layer-operations.service";
+import type { AddImageLayerData } from "../types";
+import type { ImageLayer } from "@domains/video";
+
+export interface UseImageLayerOperationsParams {
+  scenes: any[];
+  sceneIndex: number;
+  onUpdateScenes: (scenes: any[]) => void;
+  onCloseBottomSheet: () => void;
+}
+
+export interface UseImageLayerOperationsReturn {
+  addImageLayer: (data: AddImageLayerData) => void;
+  editImageLayer: (layerId: string, data: Partial<ImageLayer>) => void;
+}
+
+export function useImageLayerOperations({
+  scenes,
+  sceneIndex,
+  onUpdateScenes,
+  onCloseBottomSheet,
+}: UseImageLayerOperationsParams): UseImageLayerOperationsReturn {
+  const addImageLayer = useCallback(
+    (data: AddImageLayerData) => {
+      const result = layerOperationsService.addImageLayer(
+        scenes,
+        sceneIndex,
+        data,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        onCloseBottomSheet();
+        Alert.alert("Success", "Image layer added!");
+      } else {
+        Alert.alert("Error", result.error || "Failed to add image layer");
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet],
+  );
+
+  const editImageLayer = useCallback(
+    (layerId: string, data: Partial<ImageLayer>) => {
+      const result = layerOperationsService.editImageLayer(
+        scenes,
+        sceneIndex,
+        layerId,
+        data,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        onCloseBottomSheet();
+        Alert.alert("Success", "Image layer updated!");
+      } else {
+        Alert.alert("Error", result.error || "Failed to update image layer");
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet],
+  );
+
+  return {
+    addImageLayer,
+    editImageLayer,
+  };
+}

package/src/presentation/hooks/useLayerActions.tsx

@@ -0,0 +1,162 @@
+/**
+ * useLayerActions Hook
+ * Single Responsibility: Layer action handlers (add, edit, animate)
+ */
+
+import { useCallback } from "react";
+import { TextLayerEditor } from "../presentation/components/TextLayerEditor";
+import { ImageLayerEditor } from "../presentation/components/ImageLayerEditor";
+import { ShapeLayerEditor } from "../presentation/components/ShapeLayerEditor";
+import { AnimationEditor } from "../presentation/components/AnimationEditor";
+import type { ImageLayer } from "@domains/video";
+import type { UseEditorLayersReturn } from "./useEditorLayers";
+import type { UseEditorBottomSheetReturn } from "./useEditorBottomSheet";
+
+export interface UseLayerActionsParams {
+  selectedLayerId: string | null;
+  currentScene: any;
+  layers: UseEditorLayersReturn;
+  bottomSheet: UseEditorBottomSheetReturn;
+}
+
+export interface UseLayerActionsReturn {
+  handleAddText: () => void;
+  handleEditLayer: () => void;
+  handleAddImage: () => void;
+  handleEditImageLayer: (layerId: string) => void;
+  handleAddShape: () => void;
+  handleAnimate: (layerId: string) => void;
+}
+
+export function useLayerActions({
+  selectedLayerId,
+  currentScene,
+  layers,
+  bottomSheet,
+}: UseLayerActionsParams): UseLayerActionsReturn {
+  const { openBottomSheet, closeBottomSheet } = bottomSheet;
+
+  const handleAddText = useCallback(() => {
+    openBottomSheet({
+      title: "Add Text Layer",
+      children: (
+        <TextLayerEditor
+          onSave={layers.addTextLayer}
+          onCancel={closeBottomSheet}
+        />
+      ),
+    });
+  }, [layers.addTextLayer, openBottomSheet, closeBottomSheet]);
+
+  const handleEditLayer = useCallback(() => {
+    if (!selectedLayerId || !currentScene) return;
+    const layer = currentScene.layers.find(
+      (l: any) => l.id === selectedLayerId,
+    );
+    if (!layer || layer.type !== "text") return;
+
+    openBottomSheet({
+      title: "Edit Text Layer",
+      children: (
+        <TextLayerEditor
+          layer={layer}
+          onSave={(data) => layers.editTextLayer(selectedLayerId, data)}
+          onCancel={closeBottomSheet}
+        />
+      ),
+    });
+  }, [
+    selectedLayerId,
+    currentScene,
+    layers.editTextLayer,
+    openBottomSheet,
+    closeBottomSheet,
+  ]);
+
+  const handleAddImage = useCallback(() => {
+    openBottomSheet({
+      title: "Add Image Layer",
+      children: (
+        <ImageLayerEditor
+          onSave={layers.addImageLayer}
+          onCancel={closeBottomSheet}
+        />
+      ),
+    });
+  }, [layers.addImageLayer, openBottomSheet, closeBottomSheet]);
+
+  const handleEditImageLayer = useCallback(
+    (layerId: string) => {
+      if (!currentScene) return;
+      const layer = currentScene.layers.find((l: any) => l.id === layerId) as
+        | ImageLayer
+        | undefined;
+      if (!layer) return;
+
+      openBottomSheet({
+        title: "Edit Image Layer",
+        children: (
+          <ImageLayerEditor
+            layer={layer}
+            onSave={(data) => layers.editImageLayer(layerId, data)}
+            onCancel={closeBottomSheet}
+          />
+        ),
+      });
+    },
+    [currentScene, layers.editImageLayer, openBottomSheet, closeBottomSheet],
+  );
+
+  const handleAddShape = useCallback(() => {
+    openBottomSheet({
+      title: "Add Shape Layer",
+      children: (
+        <ShapeLayerEditor
+          onSave={layers.addShapeLayer}
+          onCancel={closeBottomSheet}
+        />
+      ),
+    });
+  }, [layers.addShapeLayer, openBottomSheet, closeBottomSheet]);
+
+  const handleAnimate = useCallback(
+    (layerId: string) => {
+      if (!currentScene) return;
+      const layer = currentScene.layers.find((l: any) => l.id === layerId);
+      if (!layer) return;
+
+      openBottomSheet({
+        title: layer.animation ? "Edit Animation" : "Add Animation",
+        children: (
+          <AnimationEditor
+            animation={layer.animation}
+            onSave={(animation) =>
+              layers.updateLayerAnimation(layerId, animation)
+            }
+            onRemove={
+              layer.animation
+                ? () => layers.updateLayerAnimation(layerId, undefined)
+                : undefined
+            }
+            onCancel={closeBottomSheet}
+          />
+        ),
+      });
+    },
+    [
+      currentScene,
+      layers.updateLayerAnimation,
+      openBottomSheet,
+      closeBottomSheet,
+    ],
+  );
+
+  return {
+    handleAddText,
+    handleEditLayer,
+    handleAddImage,
+    handleEditImageLayer,
+    handleAddShape,
+    handleAnimate,
+  };
+}

package/src/presentation/hooks/useLayerManipulation.ts

@@ -0,0 +1,178 @@
+/**
+ * useLayerManipulation Hook
+ * Single Responsibility: Layer manipulation operations (delete, order, duplicate, position, size, animation)
+ */
+
+import { useCallback } from "react";
+import { Alert } from "react-native";
+import { layerOperationsService } from "../infrastructure/services/layer-operations.service";
+import type { LayerOrderAction } from "../types";
+import type { Animation } from "@domains/video";
+
+export interface UseLayerManipulationParams {
+  scenes: any[];
+  sceneIndex: number;
+  onUpdateScenes: (scenes: any[]) => void;
+  onCloseBottomSheet: () => void;
+  onLayerDeleted?: () => void;
+}
+
+export interface UseLayerManipulationReturn {
+  deleteLayer: (layerId: string) => void;
+  changeLayerOrder: (layerId: string, action: LayerOrderAction) => void;
+  duplicateLayer: (layerId: string) => void;
+  updateLayerPosition: (layerId: string, x: number, y: number) => void;
+  updateLayerSize: (layerId: string, width: number, height: number) => void;
+  updateLayerAnimation: (
+    layerId: string,
+    animation: Animation | undefined,
+  ) => void;
+}
+
+export function useLayerManipulation({
+  scenes,
+  sceneIndex,
+  onUpdateScenes,
+  onCloseBottomSheet,
+  onLayerDeleted,
+}: UseLayerManipulationParams): UseLayerManipulationReturn {
+  const deleteLayer = useCallback(
+    (layerId: string) => {
+      Alert.alert(
+        "Delete Layer",
+        "Are you sure you want to delete this layer?",
+        [
+          { text: "Cancel", style: "cancel" },
+          {
+            text: "Delete",
+            style: "destructive",
+            onPress: () => {
+              const result = layerOperationsService.deleteLayer(
+                scenes,
+                sceneIndex,
+                layerId,
+              );
+              if (result.success) {
+                onUpdateScenes(result.updatedScenes);
+                onLayerDeleted?.();
+                Alert.alert("Success", "Layer deleted");
+              } else {
+                Alert.alert("Error", result.error || "Failed to delete layer");
+              }
+            },
+          },
+        ],
+      );
+    },
+    [scenes, sceneIndex, onUpdateScenes, onLayerDeleted],
+  );
+
+  const changeLayerOrder = useCallback(
+    (layerId: string, action: LayerOrderAction) => {
+      const result = layerOperationsService.changeLayerOrder(
+        scenes,
+        sceneIndex,
+        layerId,
+        action,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        const actionNames = {
+          front: "Layer moved to front",
+          back: "Layer moved to back",
+          up: "Layer moved up",
+          down: "Layer moved down",
+        };
+        Alert.alert("Success", actionNames[action]);
+      } else {
+        Alert.alert("Error", result.error || "Failed to change layer order");
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes],
+  );
+
+  const duplicateLayer = useCallback(
+    (layerId: string) => {
+      const result = layerOperationsService.duplicateLayer(
+        scenes,
+        sceneIndex,
+        layerId,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        Alert.alert("Success", "Layer duplicated!");
+      } else {
+        Alert.alert("Error", result.error || "Failed to duplicate layer");
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes],
+  );
+
+  const updateLayerPosition = useCallback(
+    (layerId: string, x: number, y: number) => {
+      const result = layerOperationsService.updateLayerPosition(
+        scenes,
+        sceneIndex,
+        layerId,
+        x,
+        y,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes],
+  );
+
+  const updateLayerSize = useCallback(
+    (layerId: string, width: number, height: number) => {
+      const result = layerOperationsService.updateLayerSize(
+        scenes,
+        sceneIndex,
+        layerId,
+        width,
+        height,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes],
+  );
+
+  const updateLayerAnimation = useCallback(
+    (layerId: string, animation: Animation | undefined) => {
+      const result = layerOperationsService.updateLayerAnimation(
+        scenes,
+        sceneIndex,
+        layerId,
+        animation,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        onCloseBottomSheet();
+        Alert.alert(
+          "Success",
+          animation
+            ? "Animation applied to layer!"
+            : "Animation removed from layer",
+        );
+      } else {
+        Alert.alert(
+          "Error",
+          result.error || "Failed to update layer animation",
+        );
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet],
+  );
+
+  return {
+    deleteLayer,
+    changeLayerOrder,
+    duplicateLayer,
+    updateLayerPosition,
+    updateLayerSize,
+    updateLayerAnimation,
+  };
+}

package/src/presentation/hooks/useMenuActions.tsx

@@ -0,0 +1,92 @@
+/**
+ * useMenuActions Hook
+ * Single Responsibility: Menu action handlers (layer actions menu)
+ */
+
+import { useCallback } from "react";
+import { LayerActionsMenu } from "../presentation/components/LayerActionsMenu";
+import type { UseEditorLayersReturn } from "./useEditorLayers";
+import type { UseEditorBottomSheetReturn } from "./useEditorBottomSheet";
+
+export interface UseMenuActionsParams {
+  layers: UseEditorLayersReturn;
+  bottomSheet: UseEditorBottomSheetReturn;
+  handleEditLayer: () => void;
+  handleEditImageLayer: (layerId: string) => void;
+  handleAnimate: (layerId: string) => void;
+}
+
+export interface UseMenuActionsReturn {
+  handleLayerActionsPress: (layer: any) => void;
+}
+
+export function useMenuActions({
+  layers,
+  bottomSheet,
+  handleEditLayer,
+  handleEditImageLayer,
+  handleAnimate,
+}: UseMenuActionsParams): UseMenuActionsReturn {
+  const { openBottomSheet, closeBottomSheet } = bottomSheet;
+
+  const handleLayerActionsPress = useCallback(
+    (layer: any) => {
+      openBottomSheet({
+        title: "Layer Actions",
+        children: (
+          <LayerActionsMenu
+            layer={layer}
+            onEditText={() => {
+              closeBottomSheet();
+              setTimeout(() => handleEditLayer(), 300);
+            }}
+            onEditImage={() => {
+              closeBottomSheet();
+              setTimeout(() => handleEditImageLayer(layer.id), 300);
+            }}
+            onAnimate={() => {
+              closeBottomSheet();
+              setTimeout(() => handleAnimate(layer.id), 300);
+            }}
+            onDuplicate={() => {
+              closeBottomSheet();
+              layers.duplicateLayer(layer.id);
+            }}
+            onMoveFront={() => {
+              closeBottomSheet();
+              layers.changeLayerOrder(layer.id, "front");
+            }}
+            onMoveUp={() => {
+              closeBottomSheet();
+              layers.changeLayerOrder(layer.id, "up");
+            }}
+            onMoveDown={() => {
+              closeBottomSheet();
+              layers.changeLayerOrder(layer.id, "down");
+            }}
+            onMoveBack={() => {
+              closeBottomSheet();
+              layers.changeLayerOrder(layer.id, "back");
+            }}
+            onDelete={() => {
+              closeBottomSheet();
+              layers.deleteLayer(layer.id);
+            }}
+          />
+        ),
+      });
+    },
+    [
+      layers,
+      handleEditLayer,
+      handleEditImageLayer,
+      handleAnimate,
+      openBottomSheet,
+      closeBottomSheet,
+    ],
+  );
+
+  return {
+    handleLayerActionsPress,
+  };
+}