@umituz/react-native-video-editor 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "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/domain/entities/video-project.types.ts

@@ -31,14 +31,6 @@ export interface Subtitle {
 
 export type TransitionType = "fade" | "slide" | "zoom" | "wipe" | "none";
 
-export type AnimationType =
-  | "fade"
-  | "slide"
-  | "bounce"
-  | "zoom"
-  | "rotate"
-  | "none";
-
 export interface Position {
   x: number;
   y: number;
@@ -49,13 +41,6 @@ export interface Size {
   height: number;
 }
 
-export interface Animation {
-  type: AnimationType;
-  duration: number;
-  delay?: number;
-  easing?: "linear" | "ease-in" | "ease-out" | "ease-in-out";
-}
-
 export interface Transition {
   type: TransitionType;
   duration: number;
@@ -90,7 +75,6 @@ export interface TextLayer {
     | "900";
   color: string;
   textAlign: "left" | "center" | "right";
-  animation?: Animation;
 }
 
 export interface ImageLayer {
@@ -101,7 +85,6 @@ export interface ImageLayer {
   size: Size;
   rotation: number;
   opacity: number;
-  animation?: Animation;
 }
 
 export interface VideoLayer {
@@ -115,7 +98,6 @@ export interface VideoLayer {
   startTime: number;
   endTime: number;
   volume: number;
-  animation?: Animation;
 }
 
 export interface ShapeLayer {
@@ -129,7 +111,6 @@ export interface ShapeLayer {
   fillColor: string;
   borderColor?: string;
   borderWidth?: number;
-  animation?: Animation;
 }
 
 export type Layer = TextLayer | ImageLayer | VideoLayer | ShapeLayer;

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

@@ -20,11 +20,6 @@ class ImageLayerOperationsService extends BaseLayerOperationsService<ImageLayer>
       size: { width: 70, height: 40 },
       rotation: 0,
       opacity: layerData.opacity ?? 1,
-      animation: {
-        type: "fade",
-        duration: 500,
-        easing: "ease-in-out",
-      },
     };
   }
 

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

@@ -3,7 +3,7 @@
  * Orchestrator service that delegates to specialized layer operation services
  */
 
-import type { Scene, Animation } from "../../domain/entities/video-project.types";
+import type { Scene } from "../../domain/entities/video-project.types";
 import type { LayerOperationResult, LayerOrderAction } from "../../domain/entities/video-project.types";
 import { layerDeleteService } from "./layer-operations/layer-delete.service";
 import { layerOrderService } from "./layer-operations/layer-order.service";
@@ -72,20 +72,6 @@ class LayerManipulationService {
       height,
     );
   }
-
-  updateLayerAnimation(
-    scenes: Scene[],
-    sceneIndex: number,
-    layerId: string,
-    animation: Animation | undefined,
-  ): LayerOperationResult {
-    return layerTransformService.updateLayerAnimation(
-      scenes,
-      sceneIndex,
-      layerId,
-      animation,
-    );
-  }
 }
 
 export const layerManipulationService = new LayerManipulationService();

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

@@ -1,9 +1,9 @@
 /**
  * Layer Transform Service
- * Single Responsibility: Handle layer position, size, and animation updates
+ * Single Responsibility: Handle layer position and size updates
  */
 
-import type { Scene, Animation } from "../../../domain/entities/video-project.types";
+import type { Scene } from "../../../domain/entities/video-project.types";
 import type { LayerOperationResult } from "../../../domain/entities/video-project.types";
 
 class LayerTransformService {
@@ -114,56 +114,6 @@ class LayerTransformService {
       };
     }
   }
-
-  /**
-   * Update layer animation
-   */
-  updateLayerAnimation(
-    scenes: Scene[],
-    sceneIndex: number,
-    layerId: string,
-    animation: Animation | undefined,
-  ): 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",
-        };
-      }
-
-      const existingLayer = updatedScenes[sceneIndex].layers[layerIndex];
-      updatedScenes[sceneIndex].layers[layerIndex] = {
-        ...existingLayer,
-        animation,
-      };
-
-      return { success: true, updatedScenes };
-    } catch (error) {
-      return {
-        success: false,
-        updatedScenes: scenes,
-        error:
-          error instanceof Error
-            ? error.message
-            : "Failed to update layer animation",
-      };
-    }
-  }
 }
 
 export const layerTransformService = new LayerTransformService();

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

@@ -7,7 +7,7 @@ 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 "../../domain/entities/video-project.types";
+import type { Scene, TextLayer, ImageLayer } from "../../domain/entities/video-project.types";
 import type {
   LayerOperationResult,
   LayerOrderAction,
@@ -176,23 +176,6 @@ class LayerOperationsService {
       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/shape-layer-operations.service.ts

@@ -27,11 +27,6 @@ class ShapeLayerOperationsService extends BaseLayerOperationsService<ShapeLayer>
       fillColor: layerData.fillColor ?? defaultColor,
       borderColor: layerData.borderColor,
       borderWidth: layerData.borderWidth,
-      animation: {
-        type: "fade",
-        duration: 500,
-        easing: "ease-in-out",
-      },
     };
   }
 

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

@@ -29,11 +29,6 @@ class TextLayerOperationsService extends BaseLayerOperationsService<TextLayer> {
       fontWeight: (layerData.fontWeight as TextLayer["fontWeight"]) || "bold",
       color: layerData.color || defaultColor,
       textAlign: layerData.textAlign || "center",
-      animation: {
-        type: "fade",
-        duration: 500,
-        easing: "ease-in-out",
-      },
     };
   }
 

package/src/presentation/components/LayerActionsMenu.tsx

@@ -13,7 +13,6 @@ interface LayerActionsMenuProps {
   layer: Layer;
   onEditText: () => void;
   onEditImage: () => void;
-  onAnimate: () => void;
   onDuplicate: () => void;
   onMoveFront: () => void;
   onMoveUp: () => void;
@@ -26,7 +25,6 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
   layer,
   onEditText,
   onEditImage,
-  onAnimate,
   onDuplicate,
   onMoveFront,
   onMoveUp,
@@ -59,13 +57,6 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
 
     // Common actions
     items.push(
-      {
-        id: "animate",
-        label: layer.animation
-          ? (t("editor.layers.actions.editAnimation") || "Edit Animation")
-          : (t("editor.layers.actions.addAnimation") || "Add Animation"),
-        icon: "sparkles-outline",
-      },
       {
         id: "duplicate",
         label: t("editor.layers.actions.duplicate") || "Duplicate",
@@ -111,9 +102,6 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
       case "edit-image":
         onEditImage();
         break;
-      case "animate":
-        onAnimate();
-        break;
       case "duplicate":
         onDuplicate();
         break;
@@ -133,7 +121,7 @@ export const LayerActionsMenu: React.FC<LayerActionsMenuProps> = ({
         onDelete();
         break;
     }
-  }, [onEditText, onEditImage, onAnimate, onDuplicate, onMoveFront, onMoveUp, onMoveDown, onMoveBack, onDelete]);
+  }, [onEditText, onEditImage, onDuplicate, onMoveFront, onMoveUp, onMoveDown, onMoveBack, onDelete]);
 
   return <ActionMenu actions={menuItems} onSelect={handleSelect} testID="layer-actions-menu" />;
 };

package/src/presentation/components/text-layer/EditorActions.tsx

@@ -14,6 +14,8 @@ interface EditorActionsProps {
   onSave: () => void;
   saveLabel: string;
   isValid: boolean;
+  onRemove?: () => void;
+  removeLabel?: string;
 }
 
 export const EditorActions: React.FC<EditorActionsProps> = ({
@@ -21,6 +23,8 @@ export const EditorActions: React.FC<EditorActionsProps> = ({
   onSave,
   saveLabel,
   isValid,
+  onRemove,
+  removeLabel,
 }) => {
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
@@ -29,6 +33,24 @@ export const EditorActions: React.FC<EditorActionsProps> = ({
     <View
       style={[styles.actions, { borderTopColor: tokens.colors.borderLight }]}
     >
+      {onRemove && (
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            styles.removeButton,
+            { borderColor: tokens.colors.error },
+          ]}
+          onPress={onRemove}
+        >
+          <AtomicText
+            type="bodyMedium"
+            style={{ color: tokens.colors.error }}
+          >
+            {removeLabel || t("common.buttons.remove")}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+
       <TouchableOpacity
         style={[
           styles.actionButton,
@@ -83,6 +105,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  removeButton: {
+    borderWidth: 1,
+  },
   cancelButton: {
     borderWidth: 1,
   },

package/src/presentation/hooks/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Presentation Hooks
+ * All hooks for the video editor presentation layer
+ */
+
+export { useAudioLayerForm } from "./useAudioLayerForm";
+export { useCollageEditor } from "./useCollageEditor";
+export { useDraggableLayerGestures } from "./useDraggableLayerGestures";
+export { useEditorActions } from "./useEditorActions";
+export { useEditorBottomSheet } from "./useEditorBottomSheet";
+export { useEditorHistory } from "./useEditorHistory";
+export { useEditorLayers } from "./useEditorLayers";
+export { useEditorPlayback } from "./useEditorPlayback";
+export { useEditorScenes } from "./useEditorScenes";
+export { useExport } from "./useExport";
+export { useExportActions } from "./useExportActions";
+export { useExportForm } from "./useExportForm";
+export { useImageLayerForm } from "./useImageLayerForm";
+export { useImageLayerOperations } from "./useImageLayerOperations";
+export { useLayerActions } from "./useLayerActions";
+export { useLayerManipulation } from "./useLayerManipulation";
+export { useMenuActions } from "./useMenuActions";
+export { useSceneActions } from "./useSceneActions";
+export { useShapeLayerForm } from "./useShapeLayerForm";
+export { useShapeLayerOperations } from "./useShapeLayerOperations";
+export { useSubtitleEditor } from "./useSubtitleEditor";
+export { useTextLayerForm } from "./useTextLayerForm";
+export { useTextLayerOperations } from "./useTextLayerOperations";

package/src/presentation/hooks/useEditorActions.tsx

@@ -29,7 +29,6 @@ interface UseEditorActionsReturn {
   handleEditImageLayer: (layerId: string) => void;
   handleAddShape: () => void;
   handleAudio: () => void;
-  handleAnimate: (layerId: string) => void;
   handleLayerActionsPress: (layer: Layer) => void;
   handleSceneLongPress: (index: number) => void;
   handleExport: () => void;
@@ -63,7 +62,6 @@ export function useEditorActions({
     bottomSheet,
     handleEditLayer: layerActions.handleEditLayer,
     handleEditImageLayer: layerActions.handleEditImageLayer,
-    handleAnimate: layerActions.handleAnimate,
   });
 
   const exportActions = useExportActions({
@@ -84,7 +82,6 @@ export function useEditorActions({
     handleEditImageLayer: layerActions.handleEditImageLayer,
     handleAddShape: layerActions.handleAddShape,
     handleAudio: sceneActions.handleAudio,
-    handleAnimate: layerActions.handleAnimate,
     handleLayerActionsPress: menuActions.handleLayerActionsPress,
     handleSceneLongPress,
     handleExport: exportActions.handleExport,

package/src/presentation/hooks/useEditorLayers.ts

@@ -14,7 +14,7 @@ import type {
   LayerOrderAction,
   Scene,
 } from "../../domain/entities/video-project.types";
-import type { TextLayer, ImageLayer, Animation } from "../../domain/entities/video-project.types";
+import type { TextLayer, ImageLayer } from "../../domain/entities/video-project.types";
 
 interface UseEditorLayersParams {
   projectId: string;
@@ -37,10 +37,6 @@ export interface UseEditorLayersReturn {
   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({
@@ -93,6 +89,5 @@ export function useEditorLayers({
     duplicateLayer: layerManipulation.duplicateLayer,
     updateLayerPosition: layerManipulation.updateLayerPosition,
     updateLayerSize: layerManipulation.updateLayerSize,
-    updateLayerAnimation: layerManipulation.updateLayerAnimation,
   };
 }

package/src/presentation/hooks/useLayerActions.tsx

@@ -1,6 +1,6 @@
 /**
  * useLayerActions Hook
- * Single Responsibility: Layer action handlers (add, edit, animate)
+ * Single Responsibility: Layer action handlers (add, edit)
  */
 
 import { useCallback } from "react";
@@ -8,7 +8,6 @@ import { useLocalization } from "@umituz/react-native-settings";
 import { TextLayerEditor } from "../components/TextLayerEditor";
 import { ImageLayerEditor } from "../components/ImageLayerEditor";
 import { ShapeLayerEditor } from "../components/ShapeLayerEditor";
-import { AnimationEditor } from "../components/AnimationEditor";
 import type { Scene, Layer } from "../../domain/entities/video-project.types";
 import type { UseEditorLayersReturn } from "./useEditorLayers";
 import type { UseEditorBottomSheetReturn } from "./useEditorBottomSheet";
@@ -26,7 +25,6 @@ interface UseLayerActionsReturn {
   handleAddImage: () => void;
   handleEditImageLayer: (layerId: string) => void;
   handleAddShape: () => void;
-  handleAnimate: (layerId: string) => void;
 }
 
 export function useLayerActions({
@@ -120,47 +118,11 @@ export function useLayerActions({
     });
   }, [layers.addShapeLayer, openBottomSheet, closeBottomSheet, t]);
 
-  const handleAnimate = useCallback(
-    (layerId: string) => {
-      if (!currentScene) return;
-      const layer = currentScene.layers.find((l: Layer) => l.id === layerId);
-      if (!layer) return;
-
-      openBottomSheet({
-        title: layer.animation
-          ? t("editor.layers.animation.edit")
-          : t("editor.layers.animation.add"),
-        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,
-      t,
-    ],
-  );
-
   return {
     handleAddText,
     handleEditLayer,
     handleAddImage,
     handleEditImageLayer,
     handleAddShape,
-    handleAnimate,
   };
 }

package/src/presentation/hooks/useLayerManipulation.ts

@@ -1,13 +1,13 @@
 /**
  * useLayerManipulation Hook
- * Single Responsibility: Layer manipulation operations (delete, order, duplicate, position, size, animation)
+ * Single Responsibility: Layer manipulation operations (delete, order, duplicate, position, size)
  */
 
 import { useCallback } from "react";
 import { Alert } from "react-native";
 import { useLocalization } from "@umituz/react-native-settings";
 import { layerOperationsService } from "../../infrastructure/services/layer-operations.service";
-import type { Scene, LayerOrderAction, Animation } from "../../domain/entities/video-project.types";
+import type { Scene, LayerOrderAction } from "../../domain/entities/video-project.types";
 
 interface UseLayerManipulationParams {
   scenes: Scene[];
@@ -23,10 +23,6 @@ interface UseLayerManipulationReturn {
   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({
@@ -136,36 +132,11 @@ export function useLayerManipulation({
     [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(
-          t("editor.layers.animation.success"),
-          t(animation
-            ? "editor.layers.animation.applied"
-            : "editor.layers.animation.removed"),
-        );
-      } else {
-        Alert.alert(t("editor.layers.animation.error"));
-      }
-    },
-    [scenes, sceneIndex, onUpdateScenes, onCloseBottomSheet, t],
-  );
-
   return {
     deleteLayer,
     changeLayerOrder,
     duplicateLayer,
     updateLayerPosition,
     updateLayerSize,
-    updateLayerAnimation,
   };
 }

package/src/presentation/hooks/useMenuActions.tsx

@@ -15,7 +15,6 @@ interface UseMenuActionsParams {
   bottomSheet: UseEditorBottomSheetReturn;
   handleEditLayer: () => void;
   handleEditImageLayer: (layerId: string) => void;
-  handleAnimate: (layerId: string) => void;
 }
 
 interface UseMenuActionsReturn {
@@ -27,7 +26,6 @@ export function useMenuActions({
   bottomSheet,
   handleEditLayer,
   handleEditImageLayer,
-  handleAnimate,
 }: UseMenuActionsParams): UseMenuActionsReturn {
   const { openBottomSheet, closeBottomSheet } = bottomSheet;
 
@@ -59,11 +57,6 @@ export function useMenuActions({
               const timer = setTimeout(() => handleEditImageLayer(layer.id), 300);
               timersRef.current.push(timer);
             }}
-            onAnimate={() => {
-              closeBottomSheet();
-              const timer = setTimeout(() => handleAnimate(layer.id), 300);
-              timersRef.current.push(timer);
-            }}
             onDuplicate={() => {
               closeBottomSheet();
               layers.duplicateLayer(layer.id);
@@ -96,7 +89,6 @@ export function useMenuActions({
       layers,
       handleEditLayer,
       handleEditImageLayer,
-      handleAnimate,
       openBottomSheet,
       closeBottomSheet,
     ],