@umituz/react-native-video-editor 1.1.62 → 1.1.64

package/src/presentation/components/subtitle/SubtitleListHeader.tsx

@@ -0,0 +1,58 @@
+/**
+ * SubtitleListHeader Component
+ * Header component for subtitle list panel
+ */
+
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+interface SubtitleListHeaderProps {
+  count: number;
+  onAdd: () => void;
+  title?: string;
+}
+
+export const SubtitleListHeader: React.FC<SubtitleListHeaderProps> = ({
+  count,
+  onAdd,
+  title,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = {
+    header: {
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      justifyContent: "space-between" as const,
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      borderBottomWidth: 1,
+      borderBottomColor: tokens.colors.border,
+    },
+    addBtn: {
+      width: 34,
+      height: 34,
+      borderRadius: 17,
+      backgroundColor: tokens.colors.primary,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+    },
+  };
+
+  return (
+    <View style={styles.header}>
+      <AtomicText fontWeight="semibold" color="textPrimary">
+        {title || "Subtitles"} ({count})
+      </AtomicText>
+      <TouchableOpacity
+        style={styles.addBtn}
+        onPress={onAdd}
+        accessibilityRole="button"
+      >
+        <AtomicIcon name="add" size="sm" color="onPrimary" />
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/presentation/components/subtitle/SubtitleListItem.tsx

@@ -0,0 +1,96 @@
+/**
+ * SubtitleListItem Component
+ * Individual subtitle item in the list
+ */
+
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { formatTimeDetailed } from "../../../infrastructure/utils/srt.utils";
+import type { Subtitle } from "../../../domain/entities/video-project.types";
+
+interface SubtitleListItemProps {
+  subtitle: Subtitle;
+  isActive: boolean;
+  onEdit: (subtitle: Subtitle) => void;
+  onSeek: (time: number) => void;
+}
+
+export const SubtitleListItem: React.FC<SubtitleListItemProps> = ({
+  subtitle,
+  isActive,
+  onEdit,
+  onSeek,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = {
+    item: {
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      borderRadius: tokens.borders.radius.md,
+      marginHorizontal: tokens.spacing.md,
+      marginBottom: tokens.spacing.sm,
+      borderWidth: 1,
+      borderColor: isActive ? tokens.colors.primary : tokens.colors.border,
+      backgroundColor: isActive ? tokens.colors.primaryContainer : tokens.colors.surface,
+      overflow: "hidden" as const,
+    },
+    itemBar: {
+      width: 4,
+      alignSelf: "stretch" as const,
+      backgroundColor: isActive ? tokens.colors.primary : tokens.colors.surfaceVariant,
+    },
+    itemContent: {
+      flex: 1,
+      padding: tokens.spacing.sm,
+    },
+    itemTimeRow: {
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      gap: tokens.spacing.xs,
+      marginBottom: 2,
+    },
+    itemEditBtn: {
+      width: 40,
+      height: 40,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+    },
+  };
+
+  return (
+    <View style={styles.item}>
+      <View style={styles.itemBar} />
+      <TouchableOpacity
+        style={styles.itemContent}
+        onPress={() => onSeek(subtitle.startTime)}
+        activeOpacity={0.7}
+      >
+        <View style={styles.itemTimeRow}>
+          <AtomicText color="textSecondary">
+            {formatTimeDetailed(subtitle.startTime)}
+          </AtomicText>
+          <AtomicText color="textSecondary">
+            →
+          </AtomicText>
+          <AtomicText color="textSecondary">
+            {formatTimeDetailed(subtitle.endTime)}
+          </AtomicText>
+        </View>
+        <AtomicText color="textPrimary" numberOfLines={2}>
+          {subtitle.text}
+        </AtomicText>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.itemEditBtn}
+        onPress={() => onEdit(subtitle)}
+        accessibilityRole="button"
+        accessibilityLabel="Edit subtitle"
+      >
+        <AtomicIcon name="edit" size="sm" color="textSecondary" />
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/presentation/components/subtitle/SubtitleModal.tsx

@@ -0,0 +1,162 @@
+/**
+ * SubtitleModal Component
+ * Modal for adding/editing subtitles
+ */
+
+import React from "react";
+import { View, Modal, TextInput, TouchableOpacity, ScrollView } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { SubtitleTimeInput } from "../SubtitleTimeInput";
+import { SubtitleStylePicker } from "../SubtitleStylePicker";
+import type { SubtitleStyle } from "../../../domain/entities/video-project.types";
+
+interface SubtitleModalProps {
+  visible: boolean;
+  editing: boolean;
+  text: string;
+  startTime: number;
+  endTime: number;
+  style: SubtitleStyle;
+  onChangeText: (text: string) => void;
+  onChangeStartTime: (time: number) => void;
+  onChangeEndTime: (time: number) => void;
+  onChangeStyle: (style: SubtitleStyle) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export const SubtitleModal: React.FC<SubtitleModalProps> = ({
+  visible,
+  editing,
+  text,
+  startTime,
+  endTime,
+  style,
+  onChangeText,
+  onChangeStartTime,
+  onChangeEndTime,
+  onChangeStyle,
+  onSave,
+  onCancel,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = {
+    overlay: {
+      flex: 1,
+      backgroundColor: "rgba(0,0,0,0.5)",
+      justifyContent: "flex-end" as const,
+    },
+    modal: {
+      backgroundColor: tokens.colors.surface,
+      borderTopLeftRadius: tokens.borders.radius.xl,
+      borderTopRightRadius: tokens.borders.radius.xl,
+      paddingHorizontal: tokens.spacing.md,
+      paddingTop: tokens.spacing.md,
+      paddingBottom: tokens.spacing.xl,
+      maxHeight: "90%" as const,
+    },
+    handle: {
+      width: 36,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: tokens.colors.border,
+      alignSelf: "center" as const,
+      marginBottom: tokens.spacing.md,
+    },
+    textInput: {
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderRadius: tokens.borders.radius.md,
+      padding: tokens.spacing.md,
+      color: tokens.colors.textPrimary,
+      fontSize: 16,
+      minHeight: 80,
+      textAlignVertical: "top" as const,
+      marginBottom: tokens.spacing.md,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+    },
+    timeRow: {
+      flexDirection: "row" as const,
+      gap: tokens.spacing.md,
+      marginBottom: tokens.spacing.md,
+    },
+    actionRow: {
+      flexDirection: "row" as const,
+      gap: tokens.spacing.md,
+      marginTop: tokens.spacing.md,
+    },
+    cancelBtn: {
+      flex: 1,
+      paddingVertical: tokens.spacing.md,
+      borderRadius: tokens.borders.radius.md,
+      backgroundColor: tokens.colors.surfaceVariant,
+      alignItems: "center" as const,
+    },
+    saveBtn: {
+      flex: 1,
+      paddingVertical: tokens.spacing.md,
+      borderRadius: tokens.borders.radius.md,
+      backgroundColor: tokens.colors.primary,
+      alignItems: "center" as const,
+    },
+    saveBtnDisabled: { opacity: 0.4 },
+  };
+
+  const isValid = text.trim().length > 0 && endTime > startTime;
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onCancel}>
+      <View style={styles.overlay}>
+        <View style={styles.modal}>
+          <View style={styles.handle} />
+
+          <ScrollView>
+            <TextInput
+              style={styles.textInput}
+              placeholder="Enter subtitle text..."
+              placeholderTextColor={tokens.colors.textSecondary}
+              value={text}
+              onChangeText={onChangeText}
+              multiline
+              autoFocus
+            />
+
+            <View style={styles.timeRow}>
+              <SubtitleTimeInput
+                label="Start"
+                value={startTime}
+                onChange={onChangeStartTime}
+              />
+              <SubtitleTimeInput
+                label="End"
+                value={endTime}
+                onChange={onChangeEndTime}
+              />
+            </View>
+
+            <SubtitleStylePicker style={style} previewText={text} onChange={onChangeStyle} t={(key) => key} />
+
+            <View style={styles.actionRow}>
+              <TouchableOpacity style={styles.cancelBtn} onPress={onCancel}>
+                <AtomicText fontWeight="medium" color="textPrimary">
+                  Cancel
+                </AtomicText>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.saveBtn, !isValid && styles.saveBtnDisabled]}
+                onPress={onSave}
+                disabled={!isValid}
+              >
+                <AtomicText fontWeight="semibold" color="onPrimary">
+                  {editing ? "Update" : "Add"}
+                </AtomicText>
+              </TouchableOpacity>
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+};

package/src/presentation/components/subtitle/useSubtitleForm.ts

@@ -0,0 +1,95 @@
+/**
+ * useSubtitleForm Hook
+ * Manages subtitle form state and operations
+ */
+
+import { useState, useCallback } from "react";
+import { DEFAULT_SUBTITLE_STYLE } from "../../../infrastructure/constants/subtitle.constants";
+import type { Subtitle, SubtitleStyle } from "../../../domain/entities/video-project.types";
+
+interface UseSubtitleFormReturn {
+  text: string;
+  startTime: number;
+  endTime: number;
+  style: SubtitleStyle;
+  editing: Subtitle | null;
+  showModal: boolean;
+  openAdd: (currentTime: number) => void;
+  openEdit: (subtitle: Subtitle) => void;
+  close: () => void;
+  save: (onAdd: (text: string, start: number, end: number, style: SubtitleStyle) => void, onUpdate: (id: string, patch: Partial<Omit<Subtitle, "id">>) => void) => void;
+  setText: (text: string) => void;
+  setStartTime: (time: number) => void;
+  setEndTime: (time: number) => void;
+  setStyle: (style: SubtitleStyle) => void;
+}
+
+export function useSubtitleForm(): UseSubtitleFormReturn {
+  const [editing, setEditing] = useState<Subtitle | null>(null);
+  const [showModal, setShowModal] = useState(false);
+  const [text, setText] = useState("");
+  const [startTime, setStartTime] = useState(0);
+  const [endTime, setEndTime] = useState(3);
+  const [style, setStyle] = useState<SubtitleStyle>({ ...DEFAULT_SUBTITLE_STYLE });
+
+  const openAdd = useCallback((currentTime: number) => {
+    setEditing(null);
+    setText("");
+    setStartTime(Math.floor(currentTime));
+    setEndTime(Math.floor(currentTime) + 3);
+    setStyle({ ...DEFAULT_SUBTITLE_STYLE });
+    setShowModal(true);
+  }, []);
+
+  const openEdit = useCallback((subtitle: Subtitle) => {
+    setEditing(subtitle);
+    setText(subtitle.text);
+    setStartTime(subtitle.startTime);
+    setEndTime(subtitle.endTime);
+    setStyle({ ...subtitle.style });
+    setShowModal(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setShowModal(false);
+  }, []);
+
+  const save = useCallback((
+    onAdd: (text: string, start: number, end: number, style: SubtitleStyle) => void,
+    onUpdate: (id: string, patch: Partial<Omit<Subtitle, "id">>) => void,
+  ) => {
+    if (!text.trim()) return;
+
+    const resolvedEnd = Math.max(endTime, startTime + 0.5);
+
+    if (editing) {
+      onUpdate(editing.id, {
+        text: text.trim(),
+        startTime,
+        endTime: resolvedEnd,
+        style,
+      });
+    } else {
+      onAdd(text.trim(), startTime, resolvedEnd, style);
+    }
+
+    close();
+  }, [text, editing, startTime, endTime, style, close]);
+
+  return {
+    text,
+    startTime,
+    endTime,
+    style,
+    editing,
+    showModal,
+    openAdd,
+    openEdit,
+    close,
+    save,
+    setText,
+    setStartTime,
+    setEndTime,
+    setStyle,
+  };
+}

package/src/presentation/hooks/generic/use-layer-form.hook.ts

@@ -0,0 +1,124 @@
+/**
+ * Generic Layer Form Hook
+ * Type-safe form management for layer editors
+ * Eliminates code duplication across layer form hooks
+ */
+
+import { useState, useCallback } from "react";
+import type { Layer, ImageLayer, TextLayer } from "../../../domain/entities/video-project.types";
+
+/**
+ * Form field validator function type
+ */
+export type ValidatorFn<T, K extends keyof T = keyof T> = (value: T[K]) => string | null;
+
+/**
+ * Layer form configuration
+ */
+export interface UseLayerFormConfig<T extends Record<string, unknown>> {
+  initialValues: Partial<T>;
+  validators?: Record<string, (value: unknown) => string | null>;
+  buildData: (formState: T) => Partial<Layer> | Partial<ImageLayer> | Partial<TextLayer>;
+}
+
+/**
+ * Layer form return type
+ */
+export interface UseLayerFormReturn<T extends Record<string, unknown>, R = Partial<Layer>> {
+  formState: T;
+  updateField: <K extends keyof T>(field: K, value: T[K]) => void;
+  setFormState: (state: T | ((prev: T) => T)) => void;
+  buildLayerData: () => R;
+  isValid: boolean;
+  errors: Partial<Record<keyof T, string | null>>;
+  validateField: <K extends keyof T>(field: K) => string | null;
+  validateAll: () => boolean;
+}
+
+/**
+ * Generic hook for managing layer form state
+ * Provides type-safe form management with validation support
+ */
+export function useLayerForm<T extends Record<string, unknown>, R = Partial<Layer>>(
+  config: UseLayerFormConfig<T>,
+): UseLayerFormReturn<T, R> {
+  const { initialValues, validators = {}, buildData } = config;
+
+  const [formState, setFormState] = useState<T>(
+    initialValues as T,
+  );
+
+  const [errors, setErrors] = useState<Partial<Record<keyof T, string | null>>>(
+    {},
+  );
+
+  const updateField = useCallback(
+    <K extends keyof T>(field: K, value: T[K]) => {
+      setFormState((prev) => ({
+        ...prev,
+        [field]: value,
+      }));
+
+      // Clear error for this field
+      if (errors[field as keyof typeof errors]) {
+        setErrors((prev) => ({
+          ...prev,
+          [field]: null,
+        }));
+      }
+    },
+    [errors],
+  );
+
+  const validateField = useCallback(
+    <K extends keyof T>(field: K): string | null => {
+      const validator = validators[String(field)];
+      if (!validator) return null;
+
+      const error = validator(formState[field]);
+      setErrors((prev) => ({
+        ...prev,
+        [field]: error,
+      }));
+
+      return error;
+    },
+    [formState, validators],
+  );
+
+  const validateAll = useCallback((): boolean => {
+    let hasError = false;
+    const newErrors: Partial<Record<keyof T, string | null>> = {};
+
+    for (const field in validators) {
+      const validator = validators[field];
+      if (validator) {
+        const error = validator(formState[field as keyof T]);
+        if (error) {
+          newErrors[field as keyof T] = error;
+          hasError = true;
+        }
+      }
+    }
+
+    setErrors(newErrors);
+    return !hasError;
+  }, [formState, validators]);
+
+  const buildLayerData = useCallback((): R => {
+    return buildData(formState) as R;
+  }, [formState, buildData]);
+
+  const isValid = Object.values(errors).every((error) => error === null);
+
+  return {
+    formState,
+    updateField,
+    setFormState,
+    buildLayerData,
+    isValid,
+    errors,
+    validateField,
+    validateAll,
+  };
+}

package/src/presentation/hooks/useImageLayerForm.ts

@@ -3,12 +3,13 @@
  * Manages form state for image layer editor
  */
 
-import { useState, useCallback } from "react";
 import type { ImageLayer } from "../../domain/entities/video-project.types";
+import { useLayerForm, type UseLayerFormConfig } from "./generic/use-layer-form.hook";
 
 interface ImageLayerFormState {
   imageUri: string;
   opacity: number;
+  [key: string]: unknown;
 }
 
 interface UseImageLayerFormReturn {
@@ -25,33 +26,35 @@ interface UseImageLayerFormReturn {
 export function useImageLayerForm(
   initialLayer?: ImageLayer,
 ): UseImageLayerFormReturn {
-  const [formState, setFormState] = useState<ImageLayerFormState>({
-    imageUri: initialLayer?.uri || "",
-    opacity: initialLayer?.opacity || 1,
-  });
-
-  const setImageUri = useCallback((uri: string) => {
-    setFormState((prev) => ({ ...prev, imageUri: uri }));
-  }, []);
-
-  const setOpacity = useCallback((opacity: number) => {
-    setFormState((prev) => ({ ...prev, opacity }));
-  }, []);
-
-  const buildLayerData = useCallback((): Partial<ImageLayer> => {
-    return {
+  const config: UseLayerFormConfig<ImageLayerFormState> = {
+    initialValues: {
+      imageUri: initialLayer?.uri || "",
+      opacity: initialLayer?.opacity || 1,
+    },
+    validators: {
+      imageUri: (value: unknown) => {
+        if (!value || (typeof value === "string" && value.trim().length === 0)) {
+          return "Image URI is required";
+        }
+        return null;
+      },
+    },
+    buildData: (formState) => ({
       uri: formState.imageUri,
       opacity: formState.opacity,
-    };
-  }, [formState]);
+    } as Partial<ImageLayer>),
+  };
+
+  const form = useLayerForm<ImageLayerFormState, Partial<ImageLayer>>(config);
 
-  const isValid = formState.imageUri.length > 0;
+  const setImageUri = (uri: string) => form.updateField("imageUri", uri);
+  const setOpacity = (opacity: number) => form.updateField("opacity", opacity);
 
   return {
-    formState,
+    formState: form.formState,
     setImageUri,
     setOpacity,
-    buildLayerData,
-    isValid,
+    buildLayerData: form.buildLayerData,
+    isValid: form.isValid,
   };
 }