@umituz/react-native-video-editor 1.0.1

package/src/presentation/hooks/useEditorActions.tsx

@@ -0,0 +1,93 @@
+/**
+ * useEditorActions Hook
+ * Single Responsibility: Compose editor action handlers
+ */
+
+import type { VideoProject } from "@domains/video";
+import type { UseEditorLayersReturn } from "./useEditorLayers";
+import type { UseEditorScenesReturn } from "./useEditorScenes";
+import type { UseEditorBottomSheetReturn } from "./useEditorBottomSheet";
+import { useLayerActions } from "./useLayerActions";
+import { useSceneActions } from "./useSceneActions";
+import { useMenuActions } from "./useMenuActions";
+import { useExportActions } from "./useExportActions";
+
+export interface UseEditorActionsParams {
+  project: VideoProject | undefined;
+  selectedLayerId: string | null;
+  currentScene: any;
+  layers: UseEditorLayersReturn;
+  scenes: UseEditorScenesReturn;
+  bottomSheet: UseEditorBottomSheetReturn;
+  onExportComplete: (settings: any, uri?: string) => void;
+}
+
+export interface UseEditorActionsReturn {
+  handleAddText: () => void;
+  handleEditLayer: () => void;
+  handleAddImage: () => void;
+  handleEditImageLayer: (layerId: string) => void;
+  handleAddShape: () => void;
+  handleAudio: () => void;
+  handleAnimate: (layerId: string) => void;
+  handleLayerActionsPress: (layer: any) => void;
+  handleSceneLongPress: (index: number) => void;
+  handleExport: () => void;
+  handleSave: () => void;
+}
+
+export function useEditorActions({
+  project,
+  selectedLayerId,
+  currentScene,
+  layers,
+  scenes,
+  bottomSheet,
+  onExportComplete,
+}: UseEditorActionsParams): UseEditorActionsReturn {
+  const layerActions = useLayerActions({
+    selectedLayerId,
+    currentScene,
+    layers,
+    bottomSheet,
+  });
+
+  const sceneActions = useSceneActions({
+    currentScene,
+    scenes,
+    bottomSheet,
+  });
+
+  const menuActions = useMenuActions({
+    layers,
+    bottomSheet,
+    handleEditLayer: layerActions.handleEditLayer,
+    handleEditImageLayer: layerActions.handleEditImageLayer,
+    handleAnimate: layerActions.handleAnimate,
+  });
+
+  const exportActions = useExportActions({
+    project,
+    bottomSheet,
+    onExportComplete,
+  });
+
+  const handleSceneLongPress = (index: number) => {
+    if (!project) return;
+    sceneActions.handleSceneLongPress(index, project.scenes.length > 1);
+  };
+
+  return {
+    handleAddText: layerActions.handleAddText,
+    handleEditLayer: layerActions.handleEditLayer,
+    handleAddImage: layerActions.handleAddImage,
+    handleEditImageLayer: layerActions.handleEditImageLayer,
+    handleAddShape: layerActions.handleAddShape,
+    handleAudio: sceneActions.handleAudio,
+    handleAnimate: layerActions.handleAnimate,
+    handleLayerActionsPress: menuActions.handleLayerActionsPress,
+    handleSceneLongPress,
+    handleExport: exportActions.handleExport,
+    handleSave: exportActions.handleSave,
+  };
+}

package/src/presentation/hooks/useEditorBottomSheet.ts

@@ -0,0 +1,43 @@
+/**
+ * useEditorBottomSheet Hook
+ * Single Responsibility: Bottom sheet state management
+ */
+
+import { useState, useCallback } from "react";
+import { Alert } from "react-native";
+
+export interface BottomSheetContent {
+  title: string;
+  children: React.ReactNode;
+}
+
+export interface UseEditorBottomSheetReturn {
+  isOpen: boolean;
+  content: BottomSheetContent | null;
+  openBottomSheet: (content: BottomSheetContent) => void;
+  closeBottomSheet: () => void;
+}
+
+export function useEditorBottomSheet(): UseEditorBottomSheetReturn {
+  const [isOpen, setIsOpen] = useState(false);
+  const [content, setContent] = useState<BottomSheetContent | null>(null);
+
+  const openBottomSheet = useCallback((sheetContent: BottomSheetContent) => {
+    setContent(sheetContent);
+    setIsOpen(true);
+    // TODO: Implement actual bottom sheet
+    // For now, using Alert as fallback
+  }, []);
+
+  const closeBottomSheet = useCallback(() => {
+    setIsOpen(false);
+    setContent(null);
+  }, []);
+
+  return {
+    isOpen,
+    content,
+    openBottomSheet,
+    closeBottomSheet,
+  };
+}

package/src/presentation/hooks/useEditorHistory.ts

@@ -0,0 +1,80 @@
+/**
+ * useEditorHistory Hook
+ * Single Responsibility: History operations for editor
+ */
+
+import { useCallback } from "react";
+import { Alert } from "react-native";
+// TODO: Refactor to use TanStack Query instead of store
+// Temporary stub until refactor
+const useHistoryStore = () => ({
+  addToHistory: () => {},
+  pushHistory: (_project: any, _action: string) => {},
+  undo: () => undefined,
+  redo: () => undefined,
+  canUndo: () => false,
+  canRedo: () => false,
+});
+import type { VideoProject } from "@domains/video";
+
+export interface UseEditorHistoryParams {
+  project: VideoProject | undefined;
+  projectId: string;
+  onUpdateProject: (updates: Partial<VideoProject>) => void;
+}
+
+export interface UseEditorHistoryReturn {
+  undo: () => void;
+  redo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  updateWithHistory: (updates: Partial<VideoProject>, action: string) => void;
+}
+
+export function useEditorHistory({
+  project,
+  projectId,
+  onUpdateProject,
+}: UseEditorHistoryParams): UseEditorHistoryReturn {
+  const {
+    pushHistory,
+    undo: historyUndo,
+    redo: historyRedo,
+    canUndo,
+    canRedo,
+  } = useHistoryStore();
+
+  const updateWithHistory = useCallback(
+    (updates: Partial<VideoProject>, action: string) => {
+      if (project) {
+        pushHistory(project, action);
+        onUpdateProject(updates);
+      }
+    },
+    [project, pushHistory, onUpdateProject],
+  );
+
+  const undo = useCallback(() => {
+    const previousState = historyUndo();
+    if (previousState) {
+      onUpdateProject(previousState);
+      Alert.alert("Undo", "Action undone");
+    }
+  }, [historyUndo, onUpdateProject]);
+
+  const redo = useCallback(() => {
+    const nextState = historyRedo();
+    if (nextState) {
+      onUpdateProject(nextState);
+      Alert.alert("Redo", "Action redone");
+    }
+  }, [historyRedo, onUpdateProject]);
+
+  return {
+    undo,
+    redo,
+    canUndo: canUndo(),
+    canRedo: canRedo(),
+    updateWithHistory,
+  };
+}

package/src/presentation/hooks/useEditorLayers.ts

@@ -0,0 +1,97 @@
+/**
+ * useEditorLayers Hook
+ * Single Responsibility: Compose layer operations
+ */
+
+import { useTextLayerOperations } from "./useTextLayerOperations";
+import { useImageLayerOperations } from "./useImageLayerOperations";
+import { useShapeLayerOperations } from "./useShapeLayerOperations";
+import { useLayerManipulation } from "./useLayerManipulation";
+import type {
+  AddTextLayerData,
+  AddImageLayerData,
+  AddShapeLayerData,
+  LayerOrderAction,
+} from "../types";
+import type { TextLayer, ImageLayer, Animation } from "@domains/video";
+
+export interface UseEditorLayersParams {
+  projectId: string;
+  scenes: any[];
+  sceneIndex: number;
+  onUpdateScenes: (scenes: any[]) => void;
+  onCloseBottomSheet: () => void;
+  defaultColor: string;
+  onLayerDeleted?: () => void;
+}
+
+export interface UseEditorLayersReturn {
+  addTextLayer: (data: AddTextLayerData) => void;
+  editTextLayer: (layerId: string, data: Partial<TextLayer>) => void;
+  addImageLayer: (data: AddImageLayerData) => void;
+  editImageLayer: (layerId: string, data: Partial<ImageLayer>) => void;
+  addShapeLayer: (data: AddShapeLayerData) => void;
+  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 useEditorLayers({
+  scenes,
+  sceneIndex,
+  onUpdateScenes,
+  onCloseBottomSheet,
+  defaultColor,
+  onLayerDeleted,
+}: UseEditorLayersParams): UseEditorLayersReturn {
+  const textLayerOps = useTextLayerOperations({
+    scenes,
+    sceneIndex,
+    onUpdateScenes,
+    onCloseBottomSheet,
+    defaultColor,
+  });
+
+  const imageLayerOps = useImageLayerOperations({
+    scenes,
+    sceneIndex,
+    onUpdateScenes,
+    onCloseBottomSheet,
+  });
+
+  const shapeLayerOps = useShapeLayerOperations({
+    scenes,
+    sceneIndex,
+    onUpdateScenes,
+    onCloseBottomSheet,
+    defaultColor,
+  });
+
+  const layerManipulation = useLayerManipulation({
+    scenes,
+    sceneIndex,
+    onUpdateScenes,
+    onCloseBottomSheet,
+    onLayerDeleted,
+  });
+
+  return {
+    addTextLayer: textLayerOps.addTextLayer,
+    editTextLayer: textLayerOps.editTextLayer,
+    addImageLayer: imageLayerOps.addImageLayer,
+    editImageLayer: imageLayerOps.editImageLayer,
+    addShapeLayer: shapeLayerOps.addShapeLayer,
+    deleteLayer: layerManipulation.deleteLayer,
+    changeLayerOrder: layerManipulation.changeLayerOrder,
+    duplicateLayer: layerManipulation.duplicateLayer,
+    updateLayerPosition: layerManipulation.updateLayerPosition,
+    updateLayerSize: layerManipulation.updateLayerSize,
+    updateLayerAnimation: layerManipulation.updateLayerAnimation,
+  };
+}

package/src/presentation/hooks/useEditorPlayback.ts

@@ -0,0 +1,90 @@
+/**
+ * useEditorPlayback Hook
+ * Single Responsibility: Playback control for editor
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import type { Scene } from "@domains/video";
+
+export interface UseEditorPlaybackParams {
+  currentScene: Scene | undefined;
+}
+
+export interface UseEditorPlaybackReturn {
+  isPlaying: boolean;
+  currentTime: number;
+  playPause: () => void;
+  reset: () => void;
+  setCurrentTime: (time: number) => void;
+}
+
+export function useEditorPlayback({
+  currentScene,
+}: UseEditorPlaybackParams): UseEditorPlaybackReturn {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+
+  // Video playback animation loop
+  useEffect(() => {
+    if (!currentScene) return;
+    let animationFrameId: number;
+    let lastTimestamp = 0;
+
+    const animate = (timestamp: number) => {
+      if (!isPlaying || !currentScene) return;
+
+      if (lastTimestamp === 0) {
+        lastTimestamp = timestamp;
+      }
+      const deltaTime = timestamp - lastTimestamp;
+      lastTimestamp = timestamp;
+
+      setCurrentTime((prevTime) => {
+        const newTime = prevTime + deltaTime;
+        const sceneDuration = currentScene.duration;
+
+        if (newTime >= sceneDuration) {
+          setIsPlaying(false);
+          return sceneDuration;
+        }
+
+        return newTime;
+      });
+
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    if (isPlaying) {
+      lastTimestamp = 0;
+      animationFrameId = requestAnimationFrame(animate);
+    }
+
+    return () => {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+    };
+  }, [isPlaying, currentScene?.duration]);
+
+  const playPause = useCallback(() => {
+    if (!currentScene) return;
+
+    if (currentTime >= currentScene.duration) {
+      setCurrentTime(0);
+    }
+    setIsPlaying(!isPlaying);
+  }, [currentScene, currentTime, isPlaying]);
+
+  const reset = useCallback(() => {
+    setCurrentTime(0);
+    setIsPlaying(false);
+  }, []);
+
+  return {
+    isPlaying,
+    currentTime,
+    playPause,
+    reset,
+    setCurrentTime,
+  };
+}

package/src/presentation/hooks/useEditorScenes.ts

@@ -0,0 +1,106 @@
+/**
+ * useEditorScenes Hook
+ * Single Responsibility: Scene operations for editor
+ */
+
+import { useCallback } from "react";
+import { Alert } from "react-native";
+import { sceneOperationsService } from "../infrastructure/services/scene-operations.service";
+import type { Audio } from "@domains/video";
+
+export interface UseEditorScenesParams {
+  scenes: any[];
+  currentSceneIndex: number;
+  onUpdateScenes: (scenes: any[]) => void;
+  onSceneIndexChange: (index: number) => void;
+}
+
+export interface UseEditorScenesReturn {
+  addScene: () => void;
+  duplicateScene: (sceneIndex: number) => void;
+  deleteScene: (sceneIndex: number) => void;
+  updateSceneAudio: (audio: Audio | undefined) => void;
+}
+
+export function useEditorScenes({
+  scenes,
+  currentSceneIndex,
+  onUpdateScenes,
+  onSceneIndexChange,
+}: UseEditorScenesParams): UseEditorScenesReturn {
+  const addScene = useCallback(() => {
+    const result = sceneOperationsService.addScene(scenes);
+    if (result.success) {
+      onUpdateScenes(result.updatedScenes);
+      if (result.newSceneIndex !== undefined) {
+        onSceneIndexChange(result.newSceneIndex);
+      }
+      Alert.alert("Success", "New scene added!");
+    } else {
+      Alert.alert("Error", result.error || "Failed to add scene");
+    }
+  }, [scenes, onUpdateScenes, onSceneIndexChange]);
+
+  const duplicateScene = useCallback(
+    (sceneIndex: number) => {
+      const result = sceneOperationsService.duplicateScene(scenes, sceneIndex);
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        if (result.newSceneIndex !== undefined) {
+          onSceneIndexChange(result.newSceneIndex);
+        }
+        Alert.alert("Success", "Scene duplicated!");
+      } else {
+        Alert.alert("Error", result.error || "Failed to duplicate scene");
+      }
+    },
+    [scenes, onUpdateScenes, onSceneIndexChange],
+  );
+
+  const deleteScene = useCallback(
+    (sceneIndex: number) => {
+      const result = sceneOperationsService.deleteScene(
+        scenes,
+        sceneIndex,
+        currentSceneIndex,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        if (result.newSceneIndex !== undefined) {
+          onSceneIndexChange(result.newSceneIndex);
+        }
+        Alert.alert("Success", "Scene deleted");
+      } else {
+        Alert.alert("Error", result.error || "Failed to delete scene");
+      }
+    },
+    [scenes, currentSceneIndex, onUpdateScenes, onSceneIndexChange],
+  );
+
+  const updateSceneAudio = useCallback(
+    (audio: Audio | undefined) => {
+      const result = sceneOperationsService.updateSceneAudio(
+        scenes,
+        currentSceneIndex,
+        audio,
+      );
+      if (result.success) {
+        onUpdateScenes(result.updatedScenes);
+        Alert.alert(
+          "Success",
+          audio ? "Audio added to scene!" : "Audio removed from scene",
+        );
+      } else {
+        Alert.alert("Error", result.error || "Failed to update scene audio");
+      }
+    },
+    [scenes, currentSceneIndex, onUpdateScenes],
+  );
+
+  return {
+    addScene,
+    duplicateScene,
+    deleteScene,
+    updateSceneAudio,
+  };
+}

package/src/presentation/hooks/useExport.ts

@@ -0,0 +1,67 @@
+/**
+ * useExport Hook
+ * Manages export state and operations
+ */
+
+import { useState, useCallback, useEffect } from "react";
+import type { ExportSettings, VideoProject } from "@domains/video";
+import type { ExportProgress } from "@domains/video/infrastructure/services/video-export.service";
+import { exportOrchestratorService } from "../infrastructure/services/export-orchestrator.service";
+
+export interface UseExportReturn {
+  isExporting: boolean;
+  exportProgress: ExportProgress | null;
+  exportVideo: (
+    project: VideoProject,
+    settings: ExportSettings,
+  ) => Promise<{ success: boolean; uri?: string; error?: string }>;
+  resetExport: () => void;
+}
+
+/**
+ * Hook for managing export operations
+ */
+export function useExport(): UseExportReturn {
+  const [isExporting, setIsExporting] = useState(false);
+  const [exportProgress, setExportProgress] = useState<ExportProgress | null>(
+    null,
+  );
+
+  useEffect(() => {
+    exportOrchestratorService.requestNotificationPermissions();
+  }, []);
+
+  const exportVideo = useCallback(
+    async (
+      project: VideoProject,
+      settings: ExportSettings,
+    ): Promise<{ success: boolean; uri?: string; error?: string }> => {
+      setIsExporting(true);
+      setExportProgress(null);
+
+      const result = await exportOrchestratorService.exportVideo(
+        project,
+        settings,
+        (progress) => {
+          setExportProgress(progress);
+        },
+      );
+
+      setIsExporting(false);
+      return result;
+    },
+    [],
+  );
+
+  const resetExport = useCallback(() => {
+    setIsExporting(false);
+    setExportProgress(null);
+  }, []);
+
+  return {
+    isExporting,
+    exportProgress,
+    exportVideo,
+    resetExport,
+  };
+}

package/src/presentation/hooks/useExportActions.tsx

@@ -0,0 +1,51 @@
+/**
+ * useExportActions Hook
+ * Single Responsibility: Export action handlers
+ */
+
+import { useCallback } from "react";
+import { ExportDialog } from "../presentation/components/ExportDialog";
+import type { VideoProject, ExportSettings } from "@domains/video";
+import type { UseEditorBottomSheetReturn } from "./useEditorBottomSheet";
+
+export interface UseExportActionsParams {
+  project: VideoProject | undefined;
+  bottomSheet: UseEditorBottomSheetReturn;
+  onExportComplete: (settings: ExportSettings, uri?: string) => void;
+}
+
+export interface UseExportActionsReturn {
+  handleExport: () => void;
+  handleSave: () => void;
+}
+
+export function useExportActions({
+  project,
+  bottomSheet,
+  onExportComplete,
+}: UseExportActionsParams): UseExportActionsReturn {
+  const { openBottomSheet, closeBottomSheet } = bottomSheet;
+
+  const handleExport = useCallback(() => {
+    if (!project) return;
+    openBottomSheet({
+      title: "Export Video",
+      children: (
+        <ExportDialog
+          project={project}
+          onExport={onExportComplete}
+          onCancel={closeBottomSheet}
+        />
+      ),
+    });
+  }, [project, onExportComplete, openBottomSheet, closeBottomSheet]);
+
+  const handleSave = useCallback(() => {
+    // Project is automatically saved via updateProject calls
+  }, []);
+
+  return {
+    handleExport,
+    handleSave,
+  };
+}