@umituz/react-native-video-editor 1.0.1

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

@@ -0,0 +1,98 @@
+/**
+ * OptionSelector Component
+ * Reusable selector for font family, font weight, etc.
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface OptionSelectorProps {
+  title: string;
+  options: Option[];
+  selectedValue: string;
+  onValueChange: (value: string) => void;
+}
+
+export const OptionSelector: React.FC<OptionSelectorProps> = ({
+  title,
+  options,
+  selectedValue,
+  onValueChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 8,
+        }}
+      >
+        {title}
+      </AtomicText>
+      <View style={styles.optionsGrid}>
+        {options.map((option) => (
+          <TouchableOpacity
+            key={option.value}
+            style={[
+              styles.optionButton,
+              {
+                backgroundColor:
+                  selectedValue === option.value
+                    ? tokens.colors.primary + "20"
+                    : tokens.colors.surface,
+                borderColor:
+                  selectedValue === option.value
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onValueChange(option.value)}
+          >
+            <AtomicText
+              type="labelSmall"
+              style={{
+                color:
+                  selectedValue === option.value
+                    ? tokens.colors.primary
+                    : tokens.colors.textPrimary,
+                fontWeight: selectedValue === option.value ? "600" : "400",
+              }}
+            >
+              {option.label}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  optionsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+  },
+  optionButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+});

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

@@ -0,0 +1,87 @@
+/**
+ * TextAlignSelector Component
+ * Text alignment selector for text layer
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { TEXT_ALIGNS } from "../../../constants/text-layer.constants";
+
+interface TextAlignSelectorProps {
+  textAlign: "left" | "center" | "right";
+  onTextAlignChange: (align: "left" | "center" | "right") => void;
+}
+
+export const TextAlignSelector: React.FC<TextAlignSelectorProps> = ({
+  textAlign,
+  onTextAlignChange,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 8,
+        }}
+      >
+        {t("editor.properties.text_align")}
+      </AtomicText>
+      <View style={styles.alignButtons}>
+        {TEXT_ALIGNS.map((align) => (
+          <TouchableOpacity
+            key={align.value}
+            style={[
+              styles.alignButton,
+              {
+                backgroundColor:
+                  textAlign === align.value
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                borderColor:
+                  textAlign === align.value
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onTextAlignChange(align.value)}
+          >
+            <AtomicIcon
+              name={align.icon}
+              size="md"
+              color={textAlign === align.value ? "onSurface" : "secondary"}
+            />
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  alignButtons: {
+    flexDirection: "row",
+    gap: 8,
+  },
+  alignButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

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

@@ -0,0 +1,70 @@
+/**
+ * TextInputSection Component
+ * Text input for text layer editor
+ */
+
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface TextInputSectionProps {
+  text: string;
+  onChangeText: (text: string) => void;
+}
+
+export const TextInputSection: React.FC<TextInputSectionProps> = ({
+  text,
+  onChangeText,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 8,
+        }}
+      >
+        {t("editor.properties.text")}
+      </AtomicText>
+      <TextInput
+        style={[
+          styles.textInput,
+          {
+            backgroundColor: tokens.colors.surface,
+            color: tokens.colors.textPrimary,
+            borderColor: tokens.colors.borderLight,
+          },
+        ]}
+        placeholder="Enter your text..."
+        placeholderTextColor={tokens.colors.textSecondary}
+        value={text}
+        onChangeText={onChangeText}
+        multiline
+        autoFocus
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  textInput: {
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 16,
+    fontSize: 16,
+    minHeight: 100,
+    textAlignVertical: "top",
+  },
+});

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

@@ -0,0 +1,71 @@
+/**
+ * TextPreview Component
+ * Preview section for text layer
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { TextLayerFormState } from "../../../hooks/useTextLayerForm";
+
+interface TextPreviewProps {
+  formState: TextLayerFormState;
+}
+
+export const TextPreview: React.FC<TextPreviewProps> = ({ formState }) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={{
+          color: tokens.colors.textPrimary,
+          fontWeight: "600",
+          marginBottom: 8,
+        }}
+      >
+        Preview
+      </AtomicText>
+      <View
+        style={[
+          styles.preview,
+          {
+            backgroundColor: tokens.colors.surfaceSecondary,
+            borderColor: tokens.colors.borderLight,
+          },
+        ]}
+      >
+        <AtomicText
+          type="bodyMedium"
+          style={{
+            fontSize: formState.fontSize,
+            fontFamily: formState.fontFamily,
+            fontWeight: formState.fontWeight,
+            color: formState.color,
+            textAlign: formState.textAlign,
+          }}
+        >
+          {formState.text || "Enter text to preview..."}
+        </AtomicText>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    marginBottom: 24,
+  },
+  preview: {
+    padding: 24,
+    borderRadius: 12,
+    borderWidth: 1,
+    minHeight: 120,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/text-layer/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Text Layer Editor Components
+ * Barrel file for text layer editor components
+ */
+
+export { TextInputSection } from "./TextInputSection";
+export { FontSizeSelector } from "./FontSizeSelector";
+export { OptionSelector } from "./OptionSelector";
+export { TextAlignSelector } from "./TextAlignSelector";
+export { ColorPicker } from "./ColorPicker";
+export { TextPreview } from "./TextPreview";
+export { EditorActions } from "./EditorActions";

package/src/presentation/hooks/useAnimationLayerForm.ts

@@ -0,0 +1,72 @@
+/**
+ * useAnimationLayerForm Hook
+ * Manages form state for animation layer editor
+ */
+
+import { useState, useCallback } from "react";
+import type { Animation, AnimationType } from "@domains/video";
+import type { Easing } from "../constants/animation-layer.constants";
+
+export interface AnimationLayerFormState {
+  animationType: AnimationType;
+  duration: number;
+  delay: number;
+  easing: Easing;
+}
+
+export 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,
+  };
+}

package/src/presentation/hooks/useAudioLayerForm.ts

@@ -0,0 +1,76 @@
+/**
+ * useAudioLayerForm Hook
+ * Manages form state for audio layer editor
+ */
+
+import { useState, useCallback } from "react";
+import type { Audio } from "@domains/video";
+
+export interface AudioLayerFormState {
+  audioUri: string;
+  volume: number;
+  fadeIn: number;
+  fadeOut: number;
+}
+
+export interface UseAudioLayerFormReturn {
+  formState: AudioLayerFormState;
+  setAudioUri: (uri: string) => void;
+  setVolume: (volume: number) => void;
+  setFadeIn: (fadeIn: number) => void;
+  setFadeOut: (fadeOut: number) => void;
+  buildAudioData: () => Audio;
+  isValid: boolean;
+}
+
+/**
+ * Hook for managing audio layer form state
+ */
+export function useAudioLayerForm(
+  initialAudio?: Audio,
+): UseAudioLayerFormReturn {
+  const [formState, setFormState] = useState<AudioLayerFormState>({
+    audioUri: initialAudio?.uri || "",
+    volume: initialAudio?.volume ?? 0.7,
+    fadeIn: initialAudio?.fadeIn ?? 1000,
+    fadeOut: initialAudio?.fadeOut ?? 1000,
+  });
+
+  const setAudioUri = useCallback((uri: string) => {
+    setFormState((prev) => ({ ...prev, audioUri: uri }));
+  }, []);
+
+  const setVolume = useCallback((volume: number) => {
+    setFormState((prev) => ({ ...prev, volume }));
+  }, []);
+
+  const setFadeIn = useCallback((fadeIn: number) => {
+    setFormState((prev) => ({ ...prev, fadeIn }));
+  }, []);
+
+  const setFadeOut = useCallback((fadeOut: number) => {
+    setFormState((prev) => ({ ...prev, fadeOut }));
+  }, []);
+
+  const buildAudioData = useCallback((): Audio => {
+    return {
+      uri: formState.audioUri,
+      volume: formState.volume,
+      startTime: 0,
+      fadeIn: formState.fadeIn,
+      fadeOut: formState.fadeOut,
+    };
+  }, [formState]);
+
+  const isValid = formState.audioUri.length > 0;
+
+  return {
+    formState,
+    setAudioUri,
+    setVolume,
+    setFadeIn,
+    setFadeOut,
+    buildAudioData,
+    isValid,
+  };
+}

package/src/presentation/hooks/useDraggableLayerGestures.ts

@@ -0,0 +1,166 @@
+/**
+ * useDraggableLayerGestures Hook
+ * Manages gesture handling for draggable layers
+ */
+
+import { useSharedValue } from "react-native-reanimated";
+import { Gesture } from "react-native-gesture-handler";
+import { withSpring, runOnJS } from "react-native-reanimated";
+
+interface UseDraggableLayerGesturesParams {
+  initialX: number;
+  initialY: number;
+  initialWidth: number;
+  initialHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  onSelect: () => void;
+  onPositionChange: (x: number, y: number) => void;
+  onSizeChange: (width: number, height: number) => void;
+}
+
+interface UseDraggableLayerGesturesReturn {
+  translateX: ReturnType<typeof useSharedValue<number>>;
+  translateY: ReturnType<typeof useSharedValue<number>>;
+  width: ReturnType<typeof useSharedValue<number>>;
+  height: ReturnType<typeof useSharedValue<number>>;
+  composedGesture: ReturnType<typeof Gesture.Race>;
+  topLeftResizeHandler: ReturnType<typeof Gesture.Pan>;
+  topRightResizeHandler: ReturnType<typeof Gesture.Pan>;
+  bottomLeftResizeHandler: ReturnType<typeof Gesture.Pan>;
+  bottomRightResizeHandler: ReturnType<typeof Gesture.Pan>;
+}
+
+const MIN_SIZE = 50;
+
+/**
+ * Hook for managing draggable layer gestures
+ */
+export function useDraggableLayerGestures({
+  initialX,
+  initialY,
+  initialWidth,
+  initialHeight,
+  canvasWidth,
+  canvasHeight,
+  onSelect,
+  onPositionChange,
+  onSizeChange,
+}: UseDraggableLayerGesturesParams): UseDraggableLayerGesturesReturn {
+  const translateX = useSharedValue(initialX);
+  const translateY = useSharedValue(initialY);
+  const width = useSharedValue(initialWidth);
+  const height = useSharedValue(initialHeight);
+
+  const startX = useSharedValue(initialX);
+  const startY = useSharedValue(initialY);
+  const startWidth = useSharedValue(initialWidth);
+  const startHeight = useSharedValue(initialHeight);
+
+  const gestureHandler = Gesture.Pan()
+    .onStart(() => {
+      startX.value = translateX.value;
+      startY.value = translateY.value;
+      runOnJS(onSelect)();
+    })
+    .onUpdate((event) => {
+      translateX.value = startX.value + event.translationX;
+      translateY.value = startY.value + event.translationY;
+    })
+    .onEnd(() => {
+      translateX.value = withSpring(
+        Math.max(0, Math.min(canvasWidth - width.value, translateX.value)),
+      );
+      translateY.value = withSpring(
+        Math.max(0, Math.min(canvasHeight - height.value, translateY.value)),
+      );
+
+      const newX = (translateX.value / canvasWidth) * 100;
+      const newY = (translateY.value / canvasHeight) * 100;
+      runOnJS(onPositionChange)(newX, newY);
+    });
+
+  const createResizeHandler = (
+    deltaX: (translationX: number) => number,
+    deltaY: (translationY: number) => number,
+  ) => {
+    return Gesture.Pan()
+      .onStart(() => {
+        startWidth.value = width.value;
+        startHeight.value = height.value;
+        startX.value = translateX.value;
+        startY.value = translateY.value;
+        runOnJS(onSelect)();
+      })
+      .onUpdate((event) => {
+        const newWidth = Math.max(
+          MIN_SIZE,
+          startWidth.value + deltaX(event.translationX),
+        );
+        const newHeight = Math.max(
+          MIN_SIZE,
+          startHeight.value + deltaY(event.translationY),
+        );
+        width.value = Math.min(newWidth, canvasWidth - startX.value);
+        height.value = Math.min(newHeight, canvasHeight - startY.value);
+
+        if (deltaX(event.translationX) < 0) {
+          translateX.value = Math.max(
+            0,
+            startX.value + (startWidth.value - width.value),
+          );
+        }
+        if (deltaY(event.translationY) < 0) {
+          translateY.value = Math.max(
+            0,
+            startY.value + (startHeight.value - height.value),
+          );
+        }
+      })
+      .onEnd(() => {
+        const newWidth = (width.value / canvasWidth) * 100;
+        const newHeight = (height.value / canvasHeight) * 100;
+        const newX = (translateX.value / canvasWidth) * 100;
+        const newY = (translateY.value / canvasHeight) * 100;
+        runOnJS(onSizeChange)(newWidth, newHeight);
+        runOnJS(onPositionChange)(newX, newY);
+      });
+  };
+
+  const topLeftResizeHandler = createResizeHandler(
+    (tx) => -tx,
+    (ty) => -ty,
+  );
+  const topRightResizeHandler = createResizeHandler(
+    (tx) => tx,
+    (ty) => -ty,
+  );
+  const bottomLeftResizeHandler = createResizeHandler(
+    (tx) => -tx,
+    (ty) => ty,
+  );
+  const bottomRightResizeHandler = createResizeHandler(
+    (tx) => tx,
+    (ty) => ty,
+  );
+
+  const composedGesture = Gesture.Race(
+    gestureHandler,
+    topLeftResizeHandler,
+    topRightResizeHandler,
+    bottomLeftResizeHandler,
+    bottomRightResizeHandler,
+  );
+
+  return {
+    translateX,
+    translateY,
+    width,
+    height,
+    composedGesture,
+    topLeftResizeHandler,
+    topRightResizeHandler,
+    bottomLeftResizeHandler,
+    bottomRightResizeHandler,
+  };
+}