@umituz/react-native-video-editor 1.0.1

package/src/presentation/hooks/useSceneActions.tsx

@@ -0,0 +1,81 @@
+/**
+ * useSceneActions Hook
+ * Single Responsibility: Scene action handlers
+ */
+
+import { useCallback } from "react";
+import { AudioEditor } from "../presentation/components/AudioEditor";
+import { SceneActionsMenu } from "../presentation/components/SceneActionsMenu";
+import type { UseEditorScenesReturn } from "./useEditorScenes";
+import type { UseEditorBottomSheetReturn } from "./useEditorBottomSheet";
+
+export interface UseSceneActionsParams {
+  currentScene: any;
+  scenes: UseEditorScenesReturn;
+  bottomSheet: UseEditorBottomSheetReturn;
+}
+
+export interface UseSceneActionsReturn {
+  handleAudio: () => void;
+  handleSceneLongPress: (index: number, canDelete: boolean) => void;
+}
+
+export function useSceneActions({
+  currentScene,
+  scenes,
+  bottomSheet,
+}: UseSceneActionsParams): UseSceneActionsReturn {
+  const { openBottomSheet, closeBottomSheet } = bottomSheet;
+
+  const handleAudio = useCallback(() => {
+    if (!currentScene) return;
+    openBottomSheet({
+      title: currentScene.audio ? "Edit Audio" : "Add Audio",
+      children: (
+        <AudioEditor
+          audio={currentScene.audio}
+          onSave={scenes.updateSceneAudio}
+          onRemove={
+            currentScene.audio
+              ? () => scenes.updateSceneAudio(undefined)
+              : undefined
+          }
+          onCancel={closeBottomSheet}
+        />
+      ),
+    });
+  }, [
+    currentScene,
+    scenes.updateSceneAudio,
+    openBottomSheet,
+    closeBottomSheet,
+  ]);
+
+  const handleSceneLongPress = useCallback(
+    (index: number, canDelete: boolean) => {
+      openBottomSheet({
+        title: `Scene ${index + 1} Actions`,
+        children: (
+          <SceneActionsMenu
+            sceneIndex={index}
+            canDelete={canDelete}
+            onDuplicate={() => {
+              closeBottomSheet();
+              scenes.duplicateScene(index);
+            }}
+            onDelete={() => {
+              closeBottomSheet();
+              scenes.deleteScene(index);
+            }}
+          />
+        ),
+      });
+    },
+    [scenes, openBottomSheet, closeBottomSheet],
+  );
+
+  return {
+    handleAudio,
+    handleSceneLongPress,
+  };
+}

package/src/presentation/hooks/useShapeLayerForm.ts

@@ -0,0 +1,84 @@
+/**
+ * useShapeLayerForm Hook
+ * Manages form state for shape layer editor
+ */
+
+import { useState, useCallback } from "react";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { ShapeLayer } from "@domains/video";
+import type { ShapeType } from "../constants/shape-layer.constants";
+
+export interface ShapeLayerFormState {
+  shape: ShapeType;
+  fillColor: string;
+  borderColor: string;
+  borderWidth: number;
+  opacity: number;
+}
+
+export interface UseShapeLayerFormReturn {
+  formState: ShapeLayerFormState;
+  setShape: (shape: ShapeType) => void;
+  setFillColor: (color: string) => void;
+  setBorderColor: (color: string) => void;
+  setBorderWidth: (width: number) => void;
+  setOpacity: (opacity: number) => void;
+  buildLayerData: () => Partial<ShapeLayer>;
+}
+
+/**
+ * Hook for managing shape layer form state
+ */
+export function useShapeLayerForm(
+  initialLayer?: ShapeLayer,
+): UseShapeLayerFormReturn {
+  const tokens = useAppDesignTokens();
+
+  const [formState, setFormState] = useState<ShapeLayerFormState>({
+    shape: initialLayer?.shape || "rectangle",
+    fillColor: initialLayer?.fillColor || "#3B82F6",
+    borderColor: initialLayer?.borderColor || tokens.colors.textPrimary,
+    borderWidth: initialLayer?.borderWidth || 0,
+    opacity: initialLayer?.opacity || 1,
+  });
+
+  const setShape = useCallback((shape: ShapeType) => {
+    setFormState((prev) => ({ ...prev, shape }));
+  }, []);
+
+  const setFillColor = useCallback((color: string) => {
+    setFormState((prev) => ({ ...prev, fillColor: color }));
+  }, []);
+
+  const setBorderColor = useCallback((color: string) => {
+    setFormState((prev) => ({ ...prev, borderColor: color }));
+  }, []);
+
+  const setBorderWidth = useCallback((width: number) => {
+    setFormState((prev) => ({ ...prev, borderWidth: width }));
+  }, []);
+
+  const setOpacity = useCallback((opacity: number) => {
+    setFormState((prev) => ({ ...prev, opacity }));
+  }, []);
+
+  const buildLayerData = useCallback((): Partial<ShapeLayer> => {
+    return {
+      shape: formState.shape,
+      fillColor: formState.fillColor,
+      borderColor: formState.borderColor,
+      borderWidth: formState.borderWidth,
+      opacity: formState.opacity,
+    };
+  }, [formState]);
+
+  return {
+    formState,
+    setShape,
+    setFillColor,
+    setBorderColor,
+    setBorderWidth,
+    setOpacity,
+    buildLayerData,
+  };
+}

package/src/presentation/hooks/useShapeLayerOperations.ts

@@ -0,0 +1,52 @@
+/**
+ * useShapeLayerOperations Hook
+ * Single Responsibility: Shape layer operations (add)
+ */
+
+import { useCallback } from "react";
+import { Alert } from "react-native";
+import { layerOperationsService } from "../infrastructure/services/layer-operations.service";
+import type { AddShapeLayerData } from "../types";
+
+export interface UseShapeLayerOperationsParams {
+  scenes: any[];
+  sceneIndex: number;
+  onUpdateScenes: (scenes: any[]) => void;
+  onCloseBottomSheet: () => void;
+  defaultColor: string;
+}
+
+export interface UseShapeLayerOperationsReturn {
+  addShapeLayer: (data: AddShapeLayerData) => void;
+}
+
+export function useShapeLayerOperations({
+  scenes,
+  sceneIndex,
+  onUpdateScenes,
+  onCloseBottomSheet,
+  defaultColor,
+}: UseShapeLayerOperationsParams): UseShapeLayerOperationsReturn {
+  const addShapeLayer = useCallback(
+    (data: AddShapeLayerData) => {
+      const result = layerOperationsService.addShapeLayer(
+        scenes,
+        sceneIndex,
+        data,
+        defaultColor,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        onCloseBottomSheet();
+        Alert.alert("Success", "Shape layer added!");
+      } else {
+        Alert.alert("Error", result.error || "Failed to add shape layer");
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, defaultColor],
+  );
+
+  return {
+    addShapeLayer,
+  };
+}

package/src/presentation/hooks/useTextLayerForm.ts

@@ -0,0 +1,100 @@
+/**
+ * useTextLayerForm Hook
+ * Manages form state for text layer editor
+ */
+
+import { useState, useCallback } from "react";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { TextLayer } from "@domains/video";
+
+export interface TextLayerFormState {
+  text: string;
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: "normal" | "bold" | "300" | "700";
+  color: string;
+  textAlign: "left" | "center" | "right";
+}
+
+export interface UseTextLayerFormReturn {
+  formState: TextLayerFormState;
+  setText: (text: string) => void;
+  setFontSize: (size: number) => void;
+  setFontFamily: (family: string) => void;
+  setFontWeight: (weight: "normal" | "bold" | "300" | "700") => void;
+  setColor: (color: string) => void;
+  setTextAlign: (align: "left" | "center" | "right") => void;
+  buildLayerData: () => Partial<TextLayer>;
+  isValid: boolean;
+}
+
+/**
+ * Hook for managing text layer form state
+ */
+export function useTextLayerForm(
+  initialLayer?: TextLayer,
+): UseTextLayerFormReturn {
+  const tokens = useAppDesignTokens();
+
+  const [formState, setFormState] = useState<TextLayerFormState>({
+    text: initialLayer?.content || "",
+    fontSize: initialLayer?.fontSize || 48,
+    fontFamily: initialLayer?.fontFamily || "System",
+    fontWeight:
+      (initialLayer?.fontWeight as "normal" | "bold" | "300" | "700") || "bold",
+    color: initialLayer?.color || tokens.colors.textInverse,
+    textAlign: initialLayer?.textAlign || "center",
+  });
+
+  const setText = useCallback((text: string) => {
+    setFormState((prev) => ({ ...prev, text }));
+  }, []);
+
+  const setFontSize = useCallback((size: number) => {
+    setFormState((prev) => ({ ...prev, fontSize: size }));
+  }, []);
+
+  const setFontFamily = useCallback((family: string) => {
+    setFormState((prev) => ({ ...prev, fontFamily: family }));
+  }, []);
+
+  const setFontWeight = useCallback(
+    (weight: "normal" | "bold" | "300" | "700") => {
+      setFormState((prev) => ({ ...prev, fontWeight: weight }));
+    },
+    [],
+  );
+
+  const setColor = useCallback((color: string) => {
+    setFormState((prev) => ({ ...prev, color }));
+  }, []);
+
+  const setTextAlign = useCallback((align: "left" | "center" | "right") => {
+    setFormState((prev) => ({ ...prev, textAlign: align }));
+  }, []);
+
+  const buildLayerData = useCallback((): Partial<TextLayer> => {
+    return {
+      content: formState.text,
+      fontSize: formState.fontSize,
+      fontFamily: formState.fontFamily,
+      fontWeight: formState.fontWeight,
+      color: formState.color,
+      textAlign: formState.textAlign,
+    };
+  }, [formState]);
+
+  const isValid = formState.text.trim().length > 0;
+
+  return {
+    formState,
+    setText,
+    setFontSize,
+    setFontFamily,
+    setFontWeight,
+    setColor,
+    setTextAlign,
+    buildLayerData,
+    isValid,
+  };
+}

package/src/presentation/hooks/useTextLayerOperations.ts

@@ -0,0 +1,74 @@
+/**
+ * useTextLayerOperations Hook
+ * Single Responsibility: Text layer operations (add, edit)
+ */
+
+import { useCallback } from "react";
+import { Alert } from "react-native";
+import { layerOperationsService } from "../infrastructure/services/layer-operations.service";
+import type { AddTextLayerData } from "../types";
+import type { TextLayer } from "@domains/video";
+
+export interface UseTextLayerOperationsParams {
+  scenes: any[];
+  sceneIndex: number;
+  onUpdateScenes: (scenes: any[]) => void;
+  onCloseBottomSheet: () => void;
+  defaultColor: string;
+}
+
+export interface UseTextLayerOperationsReturn {
+  addTextLayer: (data: AddTextLayerData) => void;
+  editTextLayer: (layerId: string, data: Partial<TextLayer>) => void;
+}
+
+export function useTextLayerOperations({
+  scenes,
+  sceneIndex,
+  onUpdateScenes,
+  onCloseBottomSheet,
+  defaultColor,
+}: UseTextLayerOperationsParams): UseTextLayerOperationsReturn {
+  const addTextLayer = useCallback(
+    (data: AddTextLayerData) => {
+      const result = layerOperationsService.addTextLayer(
+        scenes,
+        sceneIndex,
+        data,
+        defaultColor,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        onCloseBottomSheet();
+        Alert.alert("Success", "Text layer added!");
+      } else {
+        Alert.alert("Error", result.error || "Failed to add text layer");
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, defaultColor],
+  );
+
+  const editTextLayer = useCallback(
+    (layerId: string, data: Partial<TextLayer>) => {
+      const result = layerOperationsService.editTextLayer(
+        scenes,
+        sceneIndex,
+        layerId,
+        data,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        onCloseBottomSheet();
+        Alert.alert("Success", "Text layer updated!");
+      } else {
+        Alert.alert("Error", result.error || "Failed to update text layer");
+      }
+    },
+    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet],
+  );
+
+  return {
+    addTextLayer,
+    editTextLayer,
+  };
+}