@umituz/react-native-video-editor 1.1.63 → 1.1.65

package/src/presentation/hooks/generic/useForm.ts

@@ -0,0 +1,99 @@
+/**
+ * Generic Form Hook
+ * Replaces: useImageLayerForm, useTextLayerForm, useShapeLayerForm, useAudioLayerForm, useAnimationLayerForm
+ */
+
+import { useState, useCallback, useMemo } from "react";
+
+export interface FormValidator<T = unknown> {
+  required?: boolean;
+  validate?: (value: T) => string | undefined;
+}
+
+export interface FormConfig<T extends Record<string, unknown>> {
+  initialValues: T;
+  validators?: Partial<Record<keyof T, FormValidator>>;
+  onSubmit: (values: T) => void | Promise<void>;
+}
+
+export interface FormReturn<T extends Record<string, unknown>> {
+  values: T;
+  errors: Partial<Record<keyof T, string>>;
+  touched: Partial<Record<keyof T, boolean>>;
+  isValid: boolean;
+  isSubmitting: boolean;
+  setValue: <K extends keyof T>(field: K, value: T[K]) => void;
+  setError: <K extends keyof T>(field: K, error: string | undefined) => void;
+  setTouched: <K extends keyof T>(field: K, touched: boolean) => void;
+  handleSubmit: () => Promise<void>;
+  resetForm: () => void;
+}
+
+export function useForm<T extends Record<string, unknown>>({ initialValues, validators = {}, onSubmit }: FormConfig<T>): FormReturn<T> {
+  const [values, setValues] = useState<T>(initialValues);
+  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
+  const [touched, setTouched] = useState<Partial<Record<keyof T, boolean>>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const validateField = useCallback(<K extends keyof T>(field: K, value: T[K]): string | undefined => {
+    const validator = validators[field];
+    if (!validator) return undefined;
+    if (validator.required && (value === undefined || value === null || value === "")) return "This field is required";
+    if (validator.validate) return validator.validate(value);
+    return undefined;
+  }, [validators]);
+
+  const validateForm = useCallback((): boolean => {
+    const newErrors: Partial<Record<keyof T, string>> = {};
+    let isValid = true;
+    (Object.keys(validators) as Array<keyof T>).forEach((field) => {
+      const error = validateField(field, values[field]);
+      if (error) { newErrors[field] = error; isValid = false; }
+    });
+    setErrors(newErrors);
+    return isValid;
+  }, [validators, values, validateField]);
+
+  const setValue = useCallback(<K extends keyof T>(field: K, value: T[K]) => {
+    setValues((prev) => ({ ...prev, [field]: value }));
+    if (touched[field]) {
+      const error = validateField(field, value);
+      setErrors((prev) => ({ ...prev, [field]: error }));
+    }
+  }, [touched, validateField]);
+
+  const setError = useCallback(<K extends keyof T>(field: K, error: string | undefined) => {
+    setErrors((prev) => ({ ...prev, [field]: error }));
+  }, []);
+
+  const setFieldTouched = useCallback(<K extends keyof T>(field: K, touchedValue: boolean) => {
+    setTouched((prev) => ({ ...prev, [field]: touchedValue }));
+    if (touchedValue) {
+      const error = validateField(field, values[field]);
+      setErrors((prev) => ({ ...prev, [field]: error }));
+    }
+  }, [values, validateField]);
+
+  const isValid = useMemo(() => Object.keys(validators).every((field) => !errors[field as keyof T]), [errors, validators]);
+
+  const handleSubmit = useCallback(async () => {
+    const allTouched = Object.keys(validators).reduce((acc, field) => ({ ...acc, [field]: true }), {} as Partial<Record<keyof T, boolean>>);
+    setTouched(allTouched);
+    const valid = validateForm();
+    if (!valid) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(values);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [values, validators, onSubmit, validateForm]);
+
+  const resetForm = useCallback(() => {
+    setValues(initialValues);
+    setErrors({});
+    setTouched({});
+  }, [initialValues]);
+
+  return { values, errors, touched, isValid, isSubmitting, setValue, setError, setTouched: setFieldTouched, handleSubmit, resetForm };
+}

package/src/presentation/hooks/generic/useList.ts

@@ -0,0 +1,117 @@
+/**
+ * Generic List Hook
+ * Replaces: SubtitleListPanel, LayerList, SceneList patterns
+ */
+
+import { useState, useCallback, useMemo } from "react";
+
+export interface ListConfig<T> {
+  items: T[];
+  keyExtractor: (item: T) => string;
+  initialSelection?: string[];
+  multiSelect?: boolean;
+}
+
+export interface ListReturn<T> {
+  selectedIds: Set<string>;
+  selectedItems: T[];
+  isSelected: (id: string) => boolean;
+  toggleSelection: (id: string) => void;
+  selectAll: () => void;
+  clearSelection: () => void;
+  filteredItems: T[];
+  filter: (predicate: (item: T) => boolean) => void;
+  clearFilter: () => void;
+}
+
+export function useList<T>({ items, keyExtractor, initialSelection = [], multiSelect = false }: ListConfig<T>): ListReturn<T> {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set(initialSelection));
+  const [filterPredicate, setFilterPredicate] = useState<((item: T) => boolean) | null>(null);
+
+  const selectedItems = useMemo(() => items.filter((item) => selectedIds.has(keyExtractor(item))), [items, selectedIds, keyExtractor]);
+  const filteredItems = useMemo(() => filterPredicate ? items.filter(filterPredicate) : items, [items, filterPredicate]);
+
+  const isSelected = useCallback((id: string) => selectedIds.has(id), [selectedIds]);
+
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const newSet = new Set(prev);
+      if (multiSelect) {
+        if (newSet.has(id)) {
+          newSet.delete(id);
+        } else {
+          newSet.add(id);
+        }
+      } else {
+        newSet.clear();
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  }, [multiSelect]);
+
+  const selectAll = useCallback(() => setSelectedIds(new Set(items.map(keyExtractor))), [items, keyExtractor]);
+  const clearSelection = useCallback(() => setSelectedIds(new Set()), []);
+  const filter = useCallback((predicate: (item: T) => boolean) => setFilterPredicate(() => predicate), []);
+  const clearFilter = useCallback(() => setFilterPredicate(null), []);
+
+  return { selectedIds, selectedItems, isSelected, toggleSelection, selectAll, clearSelection, filteredItems, filter, clearFilter };
+}
+
+export interface UseSelectionConfig {
+  multiSelect?: boolean;
+  maxSelections?: number;
+}
+
+export interface UseSelectionReturn {
+  selectedIds: Set<string>;
+  isSelected: (id: string) => boolean;
+  toggleSelection: (id: string) => void;
+  select: (id: string) => void;
+  deselect: (id: string) => void;
+  clearSelection: () => void;
+  selectionCount: number;
+}
+
+export function useSelection({ multiSelect = false, maxSelections }: UseSelectionConfig = {}): UseSelectionReturn {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+
+  const isSelected = useCallback((id: string) => selectedIds.has(id), [selectedIds]);
+  const selectionCount = selectedIds.size;
+
+  const select = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      if (!multiSelect) return new Set([id]);
+      if (maxSelections && prev.size >= maxSelections && !prev.has(id)) return prev;
+      const newSet = new Set(prev);
+      newSet.add(id);
+      return newSet;
+    });
+  }, [multiSelect, maxSelections]);
+
+  const deselect = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(id);
+      return newSet;
+    });
+  }, []);
+
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      if (!multiSelect) return new Set([id]);
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        if (maxSelections && newSet.size >= maxSelections) return prev;
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  }, [multiSelect, maxSelections]);
+
+  const clearSelection = useCallback(() => setSelectedIds(new Set()), []);
+
+  return { selectedIds, isSelected, toggleSelection, select, deselect, clearSelection, selectionCount };
+}

package/src/presentation/hooks/useDraggableLayerGestures.ts

@@ -1,10 +1,12 @@
 /**
  * useDraggableLayerGestures Hook
  * Manages gesture handling for draggable layers
+ * PERFORMANCE: Uses runOnJS for state updates to prevent UI thread blocking
  */
 
 import { useState, useRef, useCallback, useEffect } from "react";
 import { Gesture } from "react-native-gesture-handler";
+import { runOnJS } from "react-native-reanimated";
 
 interface UseDraggableLayerGesturesParams {
   initialX: number;
@@ -74,22 +76,23 @@ export function useDraggableLayerGestures({
   const gestureHandler = Gesture.Pan()
     .onStart(() => {
       startRef.current = { ...state, x: state.x, y: state.y };
-      onSelect();
+      runOnJS(onSelect)();
     })
     .onUpdate((event) => {
+      'worklet';
       const newX = startRef.current.x + event.translationX;
       const newY = startRef.current.y + event.translationY;
-      setState((prev) => ({ ...prev, x: newX, y: newY }));
+      // Use runOnJS for state updates to prevent blocking UI thread
+      runOnJS(setState)({ x: newX, y: newY, width: state.width, height: state.height });
     })
     .onEnd(() => {
-      setState((prev) => {
-        const clampedX = clamp(prev.x, 0, canvasWidth - prev.width);
-        const clampedY = clamp(prev.y, 0, canvasHeight - prev.height);
-        const newX = (clampedX / canvasWidth) * 100;
-        const newY = (clampedY / canvasHeight) * 100;
-        onPositionChange(newX, newY);
-        return { ...prev, x: clampedX, y: clampedY };
-      });
+      '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);
     });
 
   const createResizeHandler = (
@@ -98,10 +101,12 @@ export function useDraggableLayerGestures({
   ) => {
     return Gesture.Pan()
       .onStart(() => {
+        'worklet';
         startRef.current = { ...state };
-        onSelect();
+        runOnJS(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);
@@ -117,24 +122,22 @@ export function useDraggableLayerGestures({
           newY = Math.max(0, startRef.current.y + (startRef.current.height - clampedHeight));
         }
 
-        setState({ x: newX, y: newY, width: clampedWidth, height: clampedHeight });
+        runOnJS(setState)({ x: newX, y: newY, width: clampedWidth, height: clampedHeight });
       })
       .onEnd(() => {
-        setState((prev) => {
-          // Clamp position to canvas bounds
-          const clampedX = Math.max(0, Math.min(prev.x, canvasWidth - prev.width));
-          const clampedY = Math.max(0, Math.min(prev.y, canvasHeight - prev.height));
+        '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));
 
-          const newWidth = (prev.width / canvasWidth) * 100;
-          const newHeight = (prev.height / canvasHeight) * 100;
-          const newX = (clampedX / canvasWidth) * 100;
-          const newY = (clampedY / canvasHeight) * 100;
-
-          onSizeChange(newWidth, newHeight);
-          onPositionChange(newX, newY);
+        const newWidth = (state.width / canvasWidth) * 100;
+        const newHeight = (state.height / canvasHeight) * 100;
+        const newX = (clampedX / canvasWidth) * 100;
+        const newY = (clampedY / canvasHeight) * 100;
 
-          return { ...prev, x: clampedX, y: clampedY };
-        });
+        runOnJS(onSizeChange)(newWidth, newHeight);
+        runOnJS(onPositionChange)(newX, newY);
+        runOnJS(setState)({ x: clampedX, y: clampedY, width: state.width, height: state.height });
       });
   };
 

package/src/presentation/hooks/useEditorPlayback.ts

@@ -1,7 +1,7 @@
 /**
  * useEditorPlayback Hook
  * Single Responsibility: Playback control for editor
- * Optimized for performance with stable animation loop
+ * PERFORMANCE: Optimized with frame throttling (30fps target) and stable refs
  */
 
 import { useState, useEffect, useCallback, useRef } from "react";
@@ -12,6 +12,11 @@ import {
   isTimeAtEnd,
 } from "../../infrastructure/utils/time-calculations.utils";
 
+// PERFORMANCE: Target 30fps instead of 60fps to reduce CPU load
+// 60fps = 16.67ms, 30fps = 33.33ms between frames
+const TARGET_FPS = 30;
+const FRAME_INTERVAL = 1000 / TARGET_FPS;
+
 interface UseEditorPlaybackParams {
   currentScene: Scene | undefined;
 }
@@ -33,6 +38,7 @@ export function useEditorPlayback({
   // Use refs to avoid re-creating animation loop on every render
   const animationFrameRef = useRef<number | null>(null);
   const lastTimestampRef = useRef<number>(0);
+  const lastFrameTimeRef = useRef<number>(0); // Track frame time for throttling
   const isPlayingRef = useRef(isPlaying);
   const currentSceneRef = useRef(currentScene);
   const durationRef = useRef(0);
@@ -49,7 +55,7 @@ export function useEditorPlayback({
     }
   }, [currentScene]);
 
-  // Video playback animation loop - optimized with refs
+  // Video playback animation loop - optimized with refs and frame throttling
   useEffect(() => {
     if (!currentScene) return;
 
@@ -60,9 +66,19 @@ export function useEditorPlayback({
         return;
       }
 
+      // PERFORMANCE: Frame throttling - skip frames to maintain target FPS
+      if (lastFrameTimeRef.current > 0) {
+        const elapsed = timestamp - lastFrameTimeRef.current;
+        if (elapsed < FRAME_INTERVAL) {
+          animationFrameRef.current = requestAnimationFrame(animate);
+          return;
+        }
+      }
+
       if (lastTimestampRef.current === 0) {
         lastTimestampRef.current = timestamp;
       }
+      lastFrameTimeRef.current = timestamp;
 
       const deltaTime = calculateDelta(timestamp, lastTimestampRef.current);
       lastTimestampRef.current = timestamp;
@@ -87,6 +103,7 @@ export function useEditorPlayback({
 
     if (isPlaying) {
       lastTimestampRef.current = 0;
+      lastFrameTimeRef.current = 0;
       animationFrameRef.current = requestAnimationFrame(animate);
     }
 

package/src/presentation/hooks/useImageLayerForm.ts

@@ -4,11 +4,12 @@
  */
 
 import type { ImageLayer } from "../../domain/entities/video-project.types";
-import { useLayerForm } from "./generic/use-layer-form.hook";
+import { useLayerForm, type UseLayerFormConfig } from "./generic/use-layer-form.hook";
 
 interface ImageLayerFormState {
   imageUri: string;
   opacity: number;
+  [key: string]: unknown;
 }
 
 interface UseImageLayerFormReturn {
@@ -25,14 +26,14 @@ interface UseImageLayerFormReturn {
 export function useImageLayerForm(
   initialLayer?: ImageLayer,
 ): UseImageLayerFormReturn {
-  const form = useLayerForm<ImageLayerFormState>({
+  const config: UseLayerFormConfig<ImageLayerFormState> = {
     initialValues: {
       imageUri: initialLayer?.uri || "",
       opacity: initialLayer?.opacity || 1,
     },
     validators: {
-      imageUri: (value) => {
-        if (!value || value.trim().length === 0) {
+      imageUri: (value: unknown) => {
+        if (!value || (typeof value === "string" && value.trim().length === 0)) {
           return "Image URI is required";
         }
         return null;
@@ -41,8 +42,10 @@ export function useImageLayerForm(
     buildData: (formState) => ({
       uri: formState.imageUri,
       opacity: formState.opacity,
-    }),
-  });
+    } as Partial<ImageLayer>),
+  };
+
+  const form = useLayerForm<ImageLayerFormState, Partial<ImageLayer>>(config);
 
   const setImageUri = (uri: string) => form.updateField("imageUri", uri);
   const setOpacity = (opacity: number) => form.updateField("opacity", opacity);

package/src/presentation/hooks/useMenuActions.tsx

@@ -1,9 +1,10 @@
 /**
  * useMenuActions Hook
  * Single Responsibility: Menu action handlers (layer actions menu)
+ * MEMORY: Properly cleans up timers to prevent memory leaks
  */
 
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { LayerActionsMenu } from "../components/LayerActionsMenu";
 import type { Layer } from "../../domain/entities/video-project.types";
 import type { UseEditorLayersReturn } from "./useEditorLayers";
@@ -30,6 +31,17 @@ export function useMenuActions({
 }: UseMenuActionsParams): UseMenuActionsReturn {
   const { openBottomSheet, closeBottomSheet } = bottomSheet;
 
+  // MEMORY: Track all timers for cleanup
+  const timersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+  // MEMORY: Clean up all timers on unmount
+  useEffect(() => {
+    return () => {
+      timersRef.current.forEach((timer) => clearTimeout(timer));
+      timersRef.current = [];
+    };
+  }, []);
+
   const handleLayerActionsPress = useCallback(
     (layer: Layer) => {
       openBottomSheet({
@@ -39,15 +51,18 @@ export function useMenuActions({
             layer={layer}
             onEditText={() => {
               closeBottomSheet();
-              setTimeout(() => handleEditLayer(), 300);
+              const timer = setTimeout(() => handleEditLayer(), 300);
+              timersRef.current.push(timer);
             }}
             onEditImage={() => {
               closeBottomSheet();
-              setTimeout(() => handleEditImageLayer(layer.id), 300);
+              const timer = setTimeout(() => handleEditImageLayer(layer.id), 300);
+              timersRef.current.push(timer);
             }}
             onAnimate={() => {
               closeBottomSheet();
-              setTimeout(() => handleAnimate(layer.id), 300);
+              const timer = setTimeout(() => handleAnimate(layer.id), 300);
+              timersRef.current.push(timer);
             }}
             onDuplicate={() => {
               closeBottomSheet();

package/src/presentation/hooks/useTextLayerForm.ts

@@ -5,7 +5,7 @@
 
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import type { TextLayer } from "../../domain/entities/video-project.types";
-import { useLayerForm } from "./generic/use-layer-form.hook";
+import { useLayerForm, type UseLayerFormConfig } from "./generic/use-layer-form.hook";
 
 export interface TextLayerFormState {
   text: string;
@@ -14,6 +14,7 @@ export interface TextLayerFormState {
   fontWeight: "normal" | "bold" | "300" | "700";
   color: string;
   textAlign: "left" | "center" | "right";
+  [key: string]: unknown;
 }
 
 interface UseTextLayerFormReturn {
@@ -36,7 +37,7 @@ export function useTextLayerForm(
 ): UseTextLayerFormReturn {
   const tokens = useAppDesignTokens();
 
-  const form = useLayerForm<TextLayerFormState>({
+  const config: UseLayerFormConfig<TextLayerFormState> = {
     initialValues: {
       text: initialLayer?.content || "",
       fontSize: initialLayer?.fontSize || 48,
@@ -47,8 +48,8 @@ export function useTextLayerForm(
       textAlign: initialLayer?.textAlign || "center",
     },
     validators: {
-      text: (value) => {
-        if (!value || value.trim().length === 0) {
+      text: (value: unknown) => {
+        if (!value || (typeof value === "string" && value.trim().length === 0)) {
           return "Text content is required";
         }
         return null;
@@ -61,8 +62,10 @@ export function useTextLayerForm(
       fontWeight: formState.fontWeight,
       color: formState.color,
       textAlign: formState.textAlign,
-    }),
-  });
+    } as Partial<TextLayer>),
+  };
+
+  const form = useLayerForm<TextLayerFormState, Partial<TextLayer>>(config);
 
   const setText = (text: string) => form.updateField("text", text);
   const setFontSize = (size: number) => form.updateField("fontSize", size);