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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.2.0",
+  "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",

package/src/presentation/components/AnimationEditor.tsx

@@ -0,0 +1,273 @@
+/**
+ * AnimationEditor Component
+ * Main component for editing layer animations
+ */
+
+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 { useAnimationForm } from "../hooks/useAnimationForm";
+import { EditorActions } from "./text-layer/EditorActions";
+
+interface AnimationEditorProps {
+  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,
+    setDuration,
+    setDelay,
+    setEasing,
+    buildAnimationData,
+    isValid,
+  } = useAnimationForm(animation);
+
+  const handleSave = useCallback(() => {
+    if (!isValid) return;
+    onSave(buildAnimationData());
+  }, [isValid, buildAnimationData, onSave]);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {/* 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>
+
+        {/* Duration Selector */}
+        {formState.type !== "none" && (
+          <>
+            <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>
+
+            {/* 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>
+
+            {/* 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>
+
+      <EditorActions
+        onCancel={onCancel}
+        onSave={handleSave}
+        saveLabel={animation ? "Update Animation" : "Add Animation"}
+        isValid={isValid}
+        onRemove={onRemove}
+        removeLabel="Remove Animation"
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    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,
+  };
+}