@umituz/react-native-video-editor 1.1.71 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.71",
+  "version": "1.2.1",
   "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",
@@ -43,7 +43,6 @@
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.0.0",
     "zustand": ">=4.0.0"
   },
   "peerDependenciesMeta": {
@@ -71,7 +70,6 @@
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.30.0",
-    "react-native-reanimated": "^3.16.0",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/index.ts

@@ -15,13 +15,11 @@ export type {
   ImageLayer,
   VideoLayer,
   ShapeLayer,
-  Animation,
   Audio,
   ExportSettings,
   AspectRatio,
   LayerType,
   TransitionType,
-  AnimationType,
   Position,
   Size,
   Transition,
@@ -73,7 +71,6 @@ export { SceneActionsMenu } from "./presentation/components/SceneActionsMenu";
 export { TextLayerEditor } from "./presentation/components/TextLayerEditor";
 export { AudioEditor } from "./presentation/components/AudioEditor";
 export { ShapeLayerEditor } from "./presentation/components/ShapeLayerEditor";
-export { AnimationEditor } from "./presentation/components/AnimationEditor";
 export { DraggableLayer } from "./presentation/components/DraggableLayer";
 export { ImageLayerEditor } from "./presentation/components/ImageLayerEditor";
 export { ExportDialog } from "./presentation/components/ExportDialog";
@@ -94,7 +91,6 @@ export { useEditorActions } from "./presentation/hooks/useEditorActions";
 export { useTextLayerForm } from "./presentation/hooks/useTextLayerForm";
 export { useImageLayerForm } from "./presentation/hooks/useImageLayerForm";
 export { useShapeLayerForm } from "./presentation/hooks/useShapeLayerForm";
-export { useAnimationLayerForm } from "./presentation/hooks/useAnimationLayerForm";
 export { useAudioLayerForm } from "./presentation/hooks/useAudioLayerForm";
 export { useTextLayerOperations } from "./presentation/hooks/useTextLayerOperations";
 export { useImageLayerOperations } from "./presentation/hooks/useImageLayerOperations";

package/src/presentation/components/AnimationEditor.tsx

@@ -1,38 +1,48 @@
 /**
  * AnimationEditor Component
- * Main component for editing animation layers
+ * Main component for editing layer animations
  */
 
-import React from "react";
+import React, { useCallback } from "react";
 import { View, ScrollView, StyleSheet } from "react-native";
-
+import { useLocalization } from "@umituz/react-native-settings";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import type { Animation } from "../../domain/entities/video-project.types";
-import { useAnimationLayerForm } from "../hooks/useAnimationLayerForm";
-import {
-  DURATIONS,
-  DELAYS,
-  EASINGS,
-  type Easing,
-} from "../../infrastructure/constants/animation-layer.constants";
-import { ValueSelector } from "./shape-layer/ValueSelector";
-import { OptionSelector } from "./text-layer/OptionSelector";
-import { AnimationTypeSelector } from "./animation-layer/AnimationTypeSelector";
-import { AnimationEditorActions } from "./animation-layer/AnimationEditorActions";
-import { AnimationInfoBanner } from "./animation-layer/AnimationInfoBanner";
+import { useAnimationForm } from "../hooks/useAnimationForm";
+import { EditorActions } from "./text-layer/EditorActions";
 
 interface AnimationEditorProps {
-  animation?: Animation;
-  onSave: (animation: Animation) => void;
-  onRemove?: () => void;
-  onCancel: () => void;
+  readonly animation?: Animation;
+  readonly onSave: (animation: Animation) => void;
+  readonly onRemove?: () => void;
+  readonly onCancel: () => void;
 }
 
+const ANIMATION_TYPES = [
+  { label: "None", value: "none" as const },
+  { label: "Fade", value: "fade" as const },
+  { label: "Slide", value: "slide" as const },
+  { label: "Bounce", value: "bounce" as const },
+  { label: "Zoom", value: "zoom" as const },
+  { label: "Rotate", value: "rotate" as const },
+] as const;
+
+const EASING_OPTIONS = [
+  { label: "Linear", value: "linear" as const },
+  { label: "Ease In", value: "ease-in" as const },
+  { label: "Ease Out", value: "ease-out" as const },
+  { label: "Ease In Out", value: "ease-in-out" as const },
+] as const;
+
 export const AnimationEditor: React.FC<AnimationEditorProps> = ({
   animation,
   onSave,
   onRemove,
   onCancel,
 }) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
   const {
     formState,
     setAnimationType,
@@ -40,55 +50,183 @@ export const AnimationEditor: React.FC<AnimationEditorProps> = ({
     setDelay,
     setEasing,
     buildAnimationData,
-  } = useAnimationLayerForm(animation);
+    isValid,
+  } = useAnimationForm(animation);
 
-  const handleSave = () => {
+  const handleSave = useCallback(() => {
+    if (!isValid) return;
     onSave(buildAnimationData());
-  };
+  }, [isValid, buildAnimationData, onSave]);
 
   return (
     <View style={styles.container}>
       <ScrollView showsVerticalScrollIndicator={false}>
-        <AnimationTypeSelector
-          selectedType={formState.animationType}
-          onTypeChange={setAnimationType}
-        />
+        {/* Animation Type Selector */}
+        <View style={styles.section}>
+          <AtomicText
+            type="labelMedium"
+            color="textSecondary"
+            style={{ marginBottom: tokens.spacing.sm }}
+          >
+            {t("editor.properties.animation_type") || "Animation Type"}
+          </AtomicText>
+          <View style={styles.optionsContainer}>
+            {ANIMATION_TYPES.map((option) => (
+              <View
+                key={option.value}
+                style={[
+                  styles.optionButton,
+                  formState.type === option.value && {
+                    backgroundColor: tokens.colors.primary,
+                  },
+                ]}
+              >
+                <AtomicText
+                  fontWeight="medium"
+                  color={
+                    formState.type === option.value
+                      ? "onPrimary"
+                      : "textPrimary"
+                  }
+                  onPress={() => setAnimationType(option.value)}
+                >
+                  {option.label}
+                </AtomicText>
+              </View>
+            ))}
+          </View>
+        </View>
 
-        {formState.animationType !== "none" && (
+        {/* Duration Selector */}
+        {formState.type !== "none" && (
           <>
-            <ValueSelector
-              title="Duration"
-              value={formState.duration}
-              options={DURATIONS}
-              formatValue={(val) => `${val}ms`}
-              onValueChange={setDuration}
-            />
+            <View style={styles.section}>
+              <AtomicText
+                type="labelMedium"
+                color="textSecondary"
+                style={{ marginBottom: tokens.spacing.sm }}
+              >
+                {t("editor.properties.duration") || "Duration"}
+              </AtomicText>
+              <View style={styles.sliderContainer}>
+                <AtomicText type="bodySmall" color="textSecondary">
+                  {formState.duration}ms
+                </AtomicText>
+              </View>
+              <View style={styles.valueButtons}>
+                {[300, 500, 1000, 1500, 2000].map((value) => (
+                  <View
+                    key={value}
+                    style={[
+                      styles.valueButton,
+                      formState.duration === value && {
+                        backgroundColor: tokens.colors.primary,
+                      },
+                    ]}
+                  >
+                    <AtomicText
+                      type="labelSmall"
+                      color={
+                        formState.duration === value
+                          ? "onPrimary"
+                          : "textPrimary"
+                      }
+                      onPress={() => setDuration(value)}
+                    >
+                      {value}ms
+                    </AtomicText>
+                  </View>
+                ))}
+              </View>
+            </View>
 
-            <ValueSelector
-              title="Delay"
-              value={formState.delay}
-              options={DELAYS}
-              formatValue={(val) => `${val}ms`}
-              onValueChange={setDelay}
-            />
+            {/* Delay Selector */}
+            <View style={styles.section}>
+              <AtomicText
+                type="labelMedium"
+                color="textSecondary"
+                style={{ marginBottom: tokens.spacing.sm }}
+              >
+                {t("editor.properties.delay") || "Delay"}
+              </AtomicText>
+              <View style={styles.sliderContainer}>
+                <AtomicText type="bodySmall" color="textSecondary">
+                  {formState.delay || 0}ms
+                </AtomicText>
+              </View>
+              <View style={styles.valueButtons}>
+                {[0, 100, 200, 500, 1000].map((value) => (
+                  <View
+                    key={value}
+                    style={[
+                      styles.valueButton,
+                      (formState.delay || 0) === value && {
+                        backgroundColor: tokens.colors.primary,
+                      },
+                    ]}
+                  >
+                    <AtomicText
+                      type="labelSmall"
+                      color={
+                        (formState.delay || 0) === value
+                          ? "onPrimary"
+                          : "textPrimary"
+                      }
+                      onPress={() => setDelay(value)}
+                    >
+                      {value}ms
+                    </AtomicText>
+                  </View>
+                ))}
+              </View>
+            </View>
 
-            <OptionSelector
-              title="Easing"
-              options={EASINGS}
-              selectedValue={formState.easing}
-              onValueChange={(value) => setEasing(value as Easing)}
-            />
-
-            <AnimationInfoBanner />
+            {/* Easing Selector */}
+            <View style={styles.section}>
+              <AtomicText
+                type="labelMedium"
+                color="textSecondary"
+                style={{ marginBottom: tokens.spacing.sm }}
+              >
+                {t("editor.properties.easing") || "Easing"}
+              </AtomicText>
+              <View style={styles.optionsContainer}>
+                {EASING_OPTIONS.map((option) => (
+                  <View
+                    key={option.value}
+                    style={[
+                      styles.optionButton,
+                      formState.easing === option.value && {
+                        backgroundColor: tokens.colors.primary,
+                      },
+                    ]}
+                  >
+                    <AtomicText
+                      fontWeight="medium"
+                      color={
+                        formState.easing === option.value
+                          ? "onPrimary"
+                          : "textPrimary"
+                      }
+                      onPress={() => setEasing(option.value)}
+                    >
+                      {option.label}
+                    </AtomicText>
+                  </View>
+                ))}
+              </View>
+            </View>
           </>
         )}
       </ScrollView>
 
-      <AnimationEditorActions
-        hasAnimation={!!animation}
-        onRemove={onRemove}
+      <EditorActions
         onCancel={onCancel}
         onSave={handleSave}
+        saveLabel={animation ? "Update Animation" : "Add Animation"}
+        isValid={isValid}
+        onRemove={onRemove}
+        removeLabel="Remove Animation"
       />
     </View>
   );
@@ -96,6 +234,40 @@ export const AnimationEditor: React.FC<AnimationEditorProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 16,
+    maxHeight: "80%",
+  },
+  section: {
+    marginBottom: 20,
+  },
+  optionsContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+  },
+  optionButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    minWidth: 80,
+    alignItems: "center",
+  },
+  sliderContainer: {
+    marginBottom: 12,
+  },
+  valueButtons: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+  },
+  valueButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    minWidth: 60,
+    alignItems: "center",
   },
 });

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,29 @@
+/**
+ * Presentation Hooks
+ * All hooks for the video editor presentation layer
+ */
+
+export { useAnimationForm } from "./useAnimationForm";
+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/useAnimationForm.tsx

@@ -0,0 +1,98 @@
+/**
+ * useAnimationForm Hook
+ * Manages form state for animation editing
+ */
+
+import { useCallback, useMemo } from "react";
+import type { Animation, AnimationType } from "../../domain/entities/video-project.types";
+
+interface AnimationFormState {
+  type: AnimationType;
+  duration: number;
+  delay?: number;
+  easing: "linear" | "ease-in" | "ease-out" | "ease-in-out";
+}
+
+interface UseAnimationFormParams {
+  animation?: Animation;
+}
+
+interface UseAnimationFormReturn {
+  formState: AnimationFormState;
+  setAnimationType: (type: AnimationType) => void;
+  setDuration: (duration: number) => void;
+  setDelay: (delay: number) => void;
+  setEasing: (easing: "linear" | "ease-in" | "ease-out" | "ease-in-out") => void;
+  buildAnimationData: () => Animation;
+  isValid: boolean;
+}
+
+const DEFAULT_ANIMATION: AnimationFormState = {
+  type: "none",
+  duration: 500,
+  delay: 0,
+  easing: "ease-in-out",
+};
+
+export function useAnimationForm({
+  animation,
+}: UseAnimationFormParams = {}): UseAnimationFormReturn {
+  const formState = useMemo<AnimationFormState>(() => {
+    if (!animation) {
+      return DEFAULT_ANIMATION;
+    }
+
+    return {
+      type: animation.type,
+      duration: animation.duration,
+      delay: animation.delay,
+      easing: animation.easing || "ease-in-out",
+    };
+  }, [animation]);
+
+  const setAnimationType = useCallback((type: AnimationType) => {
+    (formState as any).type = type;
+  }, [formState]);
+
+  const setDuration = useCallback((duration: number) => {
+    (formState as any).duration = duration;
+  }, [formState]);
+
+  const setDelay = useCallback((delay: number) => {
+    (formState as any).delay = delay;
+  }, [formState]);
+
+  const setEasing = useCallback((
+    easing: "linear" | "ease-in" | "ease-out" | "ease-in-out"
+  ) => {
+    (formState as any).easing = easing;
+  }, [formState]);
+
+  const buildAnimationData = useCallback((): Animation => {
+    const data: Animation = {
+      type: formState.type,
+      duration: formState.duration,
+      easing: formState.easing,
+    };
+
+    if (formState.delay && formState.delay > 0) {
+      data.delay = formState.delay;
+    }
+
+    return data;
+  }, [formState]);
+
+  const isValid = useMemo(() => {
+    return formState.type !== "none" && formState.duration > 0;
+  }, [formState]);
+
+  return {
+    formState,
+    setAnimationType,
+    setDuration,
+    setDelay,
+    setEasing,
+    buildAnimationData,
+    isValid,
+  };
+}

package/src/presentation/hooks/useDraggableLayerGestures.ts

@@ -6,8 +6,6 @@
 
 import { useState, useRef, useCallback, useEffect } from "react";
 import { Gesture } from "react-native-gesture-handler";
-// @ts-ignore - react-native-reanimated is an optional peer dependency
-import { runOnJS } from "react-native-reanimated";
 
 interface UseDraggableLayerGesturesParams {
   initialX: number;
@@ -77,23 +75,20 @@ export function useDraggableLayerGestures({
   const gestureHandler = Gesture.Pan()
     .onStart(() => {
       startRef.current = { ...state, x: state.x, y: state.y };
-      runOnJS(onSelect)();
+      onSelect();
     })
     .onUpdate((event) => {
-      'worklet';
       const newX = startRef.current.x + event.translationX;
       const newY = startRef.current.y + event.translationY;
-      // Use runOnJS for state updates to prevent blocking UI thread
-      runOnJS(setState)({ x: newX, y: newY, width: state.width, height: state.height });
+      setState({ x: newX, y: newY, width: state.width, height: state.height });
     })
     .onEnd(() => {
-      'worklet';
       const clampedX = clamp(state.x, 0, canvasWidth - state.width);
       const clampedY = clamp(state.y, 0, canvasHeight - state.height);
       const newX = (clampedX / canvasWidth) * 100;
       const newY = (clampedY / canvasHeight) * 100;
-      runOnJS(setState)({ x: clampedX, y: clampedY, width: state.width, height: state.height });
-      runOnJS(onPositionChange)(newX, newY);
+      setState({ x: clampedX, y: clampedY, width: state.width, height: state.height });
+      onPositionChange(newX, newY);
     });
 
   const createResizeHandler = (
@@ -102,12 +97,10 @@ export function useDraggableLayerGestures({
   ) => {
     return Gesture.Pan()
       .onStart(() => {
-        'worklet';
         startRef.current = { ...state };
-        runOnJS(onSelect)();
+        onSelect();
       })
       .onUpdate((event) => {
-        'worklet';
         const newWidth = Math.max(MIN_SIZE, startRef.current.width + deltaX(event.translationX));
         const newHeight = Math.max(MIN_SIZE, startRef.current.height + deltaY(event.translationY));
         const clampedWidth = Math.min(newWidth, canvasWidth - startRef.current.x);
@@ -123,10 +116,9 @@ export function useDraggableLayerGestures({
           newY = Math.max(0, startRef.current.y + (startRef.current.height - clampedHeight));
         }
 
-        runOnJS(setState)({ x: newX, y: newY, width: clampedWidth, height: clampedHeight });
+        setState({ x: newX, y: newY, width: clampedWidth, height: clampedHeight });
       })
       .onEnd(() => {
-        'worklet';
         // Clamp position to canvas bounds
         const clampedX = Math.max(0, Math.min(state.x, canvasWidth - state.width));
         const clampedY = Math.max(0, Math.min(state.y, canvasHeight - state.height));
@@ -136,9 +128,9 @@ export function useDraggableLayerGestures({
         const newX = (clampedX / canvasWidth) * 100;
         const newY = (clampedY / canvasHeight) * 100;
 
-        runOnJS(onSizeChange)(newWidth, newHeight);
-        runOnJS(onPositionChange)(newX, newY);
-        runOnJS(setState)({ x: clampedX, y: clampedY, width: state.width, height: state.height });
+        onSizeChange(newWidth, newHeight);
+        onPositionChange(newX, newY);
+        setState({ x: clampedX, y: clampedY, width: state.width, height: state.height });
       });
   };
 

package/src/infrastructure/constants/animation-layer.constants.ts

@@ -1,32 +0,0 @@
-/**
- * Animation Layer Constants
- * Centralized constants for animation layer editor
- */
-
-import type { AnimationType } from "../../domain/entities/video-project.types";
-
-export type Easing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
-
-export const ANIMATION_TYPES: {
-  type: AnimationType;
-  label: string;
-  icon: string;
-}[] = [
-  { type: "none", label: "None", icon: "Ban" },
-  { type: "fade", label: "Fade", icon: "Eye" },
-  { type: "slide", label: "Slide", icon: "MoveRight" },
-  { type: "bounce", label: "Bounce", icon: "ArrowUp" },
-  { type: "zoom", label: "Zoom", icon: "Maximize2" },
-  { type: "rotate", label: "Rotate", icon: "RotateCw" },
-];
-
-export const DURATIONS = [300, 500, 800, 1000, 1500, 2000];
-
-export const DELAYS = [0, 200, 500, 1000];
-
-export const EASINGS: { value: Easing; label: string }[] = [
-  { value: "linear", label: "Linear" },
-  { value: "ease-in", label: "Ease In" },
-  { value: "ease-out", label: "Ease Out" },
-  { value: "ease-in-out", label: "Ease In-Out" },
-];

package/src/presentation/components/animation-layer/AnimationEditorActions.tsx

@@ -1,101 +0,0 @@
-/**
- * AnimationEditorActions Component
- * Action buttons for animation editor
- */
-
-import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-
-interface AnimationEditorActionsProps {
-  hasAnimation: boolean;
-  onRemove?: () => void;
-  onCancel: () => void;
-  onSave: () => void;
-}
-
-export const AnimationEditorActions: React.FC<AnimationEditorActionsProps> = ({
-  hasAnimation,
-  onRemove,
-  onCancel,
-  onSave,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.actions}>
-      {hasAnimation && onRemove && (
-        <TouchableOpacity
-          style={[
-            styles.actionButton,
-            styles.removeButton,
-            { borderColor: tokens.colors.error },
-          ]}
-          onPress={onRemove}
-        >
-          <AtomicIcon name="trash-outline" size="sm" color="error" />
-        </TouchableOpacity>
-      )}
-
-      <TouchableOpacity
-        style={[
-          styles.actionButton,
-          styles.cancelButton,
-          { borderColor: tokens.colors.borderLight },
-        ]}
-        onPress={onCancel}
-      >
-        <AtomicText
-          type="bodyMedium"
-          style={{ color: tokens.colors.textSecondary }}
-        >
-          Cancel
-        </AtomicText>
-      </TouchableOpacity>
-
-      <TouchableOpacity
-        style={[
-          styles.actionButton,
-          styles.saveButton,
-          { backgroundColor: tokens.colors.primary },
-        ]}
-        onPress={onSave}
-      >
-        <AtomicIcon name="checkmark-outline" size="sm" color="onSurface" />
-        <AtomicText
-          type="bodyMedium"
-          style={{ color: tokens.colors.onPrimary, fontWeight: "600", marginLeft: 6 }}
-        >
-          Apply
-        </AtomicText>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  actions: {
-    flexDirection: "row",
-    gap: 8,
-  },
-  actionButton: {
-    flex: 1,
-    flexDirection: "row",
-    paddingVertical: 12,
-    borderRadius: 12,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  removeButton: {
-    flex: 0,
-    paddingHorizontal: 16,
-    borderWidth: 1,
-  },
-  cancelButton: {
-    borderWidth: 1,
-  },
-  saveButton: {
-    // backgroundColor set dynamically
-  },
-});

package/src/presentation/components/animation-layer/AnimationInfoBanner.tsx

@@ -1,40 +0,0 @@
-/**
- * AnimationInfoBanner Component
- * Info banner for animation editor
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-
-export const AnimationInfoBanner: React.FC = () => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View
-      style={[
-        styles.infoBanner,
-        { backgroundColor: tokens.colors.primary + "20" },
-      ]}
-    >
-      <AtomicIcon name="information-circle-outline" size="sm" color="primary" />
-      <AtomicText
-        type="labelSmall"
-        style={{ color: tokens.colors.primary, marginLeft: 8, flex: 1 }}
-      >
-        Animation will play when the layer first appears in the scene
-      </AtomicText>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  infoBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 12,
-    borderRadius: 8,
-    marginBottom: 8,
-  },
-});

package/src/presentation/components/animation-layer/AnimationTypeSelector.tsx

@@ -1,102 +0,0 @@
-/**
- * AnimationTypeSelector Component
- * Animation type selector for animation layer
- */
-
-import React from "react";
-import { View, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { ANIMATION_TYPES } from "../../../infrastructure/constants/animation-layer.constants";
-import type { AnimationType } from "../../../domain/entities/video-project.types";
-
-interface AnimationTypeSelectorProps {
-  selectedType: AnimationType;
-  onTypeChange: (type: AnimationType) => void;
-}
-
-export const AnimationTypeSelector: React.FC<AnimationTypeSelectorProps> = ({
-  selectedType,
-  onTypeChange,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={styles.section}>
-      <AtomicText
-        type="bodyMedium"
-        style={{
-          color: tokens.colors.textPrimary,
-          fontWeight: "600",
-          marginBottom: 12,
-        }}
-      >
-        Animation Type
-      </AtomicText>
-
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        style={styles.animationTypesScroll}
-      >
-        {ANIMATION_TYPES.map((anim) => (
-          <TouchableOpacity
-            key={anim.type}
-            style={[
-              styles.animationTypeCard,
-              {
-                backgroundColor:
-                  selectedType === anim.type
-                    ? tokens.colors.primary
-                    : tokens.colors.surface,
-                borderColor:
-                  selectedType === anim.type
-                    ? tokens.colors.primary
-                    : tokens.colors.borderLight,
-              },
-            ]}
-            onPress={() => onTypeChange(anim.type)}
-          >
-            <AtomicIcon
-              name={anim.icon as "Ban" | "Eye" | "MoveRight" | "ArrowUp" | "Maximize2" | "RotateCw"}
-              size="md"
-              color={selectedType === anim.type ? "onSurface" : "primary"}
-            />
-            <AtomicText
-              type="labelSmall"
-              style={{
-                color:
-                  selectedType === anim.type
-                    ? tokens.colors.onPrimary
-                    : tokens.colors.textPrimary,
-                marginTop: 6,
-                fontWeight: selectedType === anim.type ? "600" : "400",
-              }}
-            >
-              {anim.label}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  section: {
-    marginBottom: 24,
-  },
-  animationTypesScroll: {
-    marginHorizontal: -16,
-    paddingHorizontal: 16,
-  },
-  animationTypeCard: {
-    width: 90,
-    padding: 12,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 12,
-  },
-});

package/src/presentation/hooks/useAnimationLayerForm.ts

@@ -1,72 +0,0 @@
-/**
- * useAnimationLayerForm Hook
- * Manages form state for animation layer editor
- */
-
-import { useState, useCallback } from "react";
-import type { Animation, AnimationType } from "../../domain/entities/video-project.types";
-import type { Easing } from "../../infrastructure/constants/animation-layer.constants";
-
-interface AnimationLayerFormState {
-  animationType: AnimationType;
-  duration: number;
-  delay: number;
-  easing: Easing;
-}
-
-interface UseAnimationLayerFormReturn {
-  formState: AnimationLayerFormState;
-  setAnimationType: (type: AnimationType) => void;
-  setDuration: (duration: number) => void;
-  setDelay: (delay: number) => void;
-  setEasing: (easing: Easing) => void;
-  buildAnimationData: () => Animation;
-}
-
-/**
- * Hook for managing animation layer form state
- */
-export function useAnimationLayerForm(
-  initialAnimation?: Animation,
-): UseAnimationLayerFormReturn {
-  const [formState, setFormState] = useState<AnimationLayerFormState>({
-    animationType: initialAnimation?.type || "fade",
-    duration: initialAnimation?.duration || 500,
-    delay: initialAnimation?.delay || 0,
-    easing: initialAnimation?.easing || "ease-in-out",
-  });
-
-  const setAnimationType = useCallback((type: AnimationType) => {
-    setFormState((prev) => ({ ...prev, animationType: type }));
-  }, []);
-
-  const setDuration = useCallback((duration: number) => {
-    setFormState((prev) => ({ ...prev, duration }));
-  }, []);
-
-  const setDelay = useCallback((delay: number) => {
-    setFormState((prev) => ({ ...prev, delay }));
-  }, []);
-
-  const setEasing = useCallback((easing: Easing) => {
-    setFormState((prev) => ({ ...prev, easing }));
-  }, []);
-
-  const buildAnimationData = useCallback((): Animation => {
-    return {
-      type: formState.animationType,
-      duration: formState.duration,
-      delay: formState.delay,
-      easing: formState.easing,
-    };
-  }, [formState]);
-
-  return {
-    formState,
-    setAnimationType,
-    setDuration,
-    setDelay,
-    setEasing,
-    buildAnimationData,
-  };
-}