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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.70",
+  "version": "1.2.0",
   "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,15 +43,11 @@
     "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": {
     "react-native-gesture-handler": {
       "optional": true
-    },
-    "react-native-reanimated": {
-      "optional": true
     }
   },
   "devDependencies": {
@@ -74,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/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/AnimationEditor.tsx

@@ -1,101 +0,0 @@
-/**
- * AnimationEditor Component
- * Main component for editing animation layers
- */
-
-import React from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
-
-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";
-
-interface AnimationEditorProps {
-  animation?: Animation;
-  onSave: (animation: Animation) => void;
-  onRemove?: () => void;
-  onCancel: () => void;
-}
-
-export const AnimationEditor: React.FC<AnimationEditorProps> = ({
-  animation,
-  onSave,
-  onRemove,
-  onCancel,
-}) => {
-  const {
-    formState,
-    setAnimationType,
-    setDuration,
-    setDelay,
-    setEasing,
-    buildAnimationData,
-  } = useAnimationLayerForm(animation);
-
-  const handleSave = () => {
-    onSave(buildAnimationData());
-  };
-
-  return (
-    <View style={styles.container}>
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <AnimationTypeSelector
-          selectedType={formState.animationType}
-          onTypeChange={setAnimationType}
-        />
-
-        {formState.animationType !== "none" && (
-          <>
-            <ValueSelector
-              title="Duration"
-              value={formState.duration}
-              options={DURATIONS}
-              formatValue={(val) => `${val}ms`}
-              onValueChange={setDuration}
-            />
-
-            <ValueSelector
-              title="Delay"
-              value={formState.delay}
-              options={DELAYS}
-              formatValue={(val) => `${val}ms`}
-              onValueChange={setDelay}
-            />
-
-            <OptionSelector
-              title="Easing"
-              options={EASINGS}
-              selectedValue={formState.easing}
-              onValueChange={(value) => setEasing(value as Easing)}
-            />
-
-            <AnimationInfoBanner />
-          </>
-        )}
-      </ScrollView>
-
-      <AnimationEditorActions
-        hasAnimation={!!animation}
-        onRemove={onRemove}
-        onCancel={onCancel}
-        onSave={handleSave}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: 16,
-  },
-});

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,
-  };
-}