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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.63",
+  "version": "1.1.64",
   "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/infrastructure/services/image-layer-operations.service.ts

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-design-system/uuid";
-import type { ImageLayer } from "../../domain/entities/video-project.types";
+import type { ImageLayer, Scene } from "../../domain/entities/video-project.types";
 import type { LayerOperationResult, AddImageLayerData } from "../../domain/entities/video-project.types";
 import { BaseLayerOperationsService } from "./base/base-layer-operations.service";
 

package/src/infrastructure/services/shape-layer-operations.service.ts

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-design-system/uuid";
-import type { ShapeLayer } from "../../domain/entities/video-project.types";
+import type { ShapeLayer, Scene } from "../../domain/entities/video-project.types";
 import type { LayerOperationResult, AddShapeLayerData } from "../../domain/entities/video-project.types";
 import { BaseLayerOperationsService } from "./base/base-layer-operations.service";
 

package/src/infrastructure/services/text-layer-operations.service.ts

@@ -4,7 +4,7 @@
  */
 
 import { generateUUID } from "@umituz/react-native-design-system/uuid";
-import type { TextLayer } from "../../domain/entities/video-project.types";
+import type { TextLayer, Scene } from "../../domain/entities/video-project.types";
 import type { LayerOperationResult, AddTextLayerData } from "../../domain/entities/video-project.types";
 import { BaseLayerOperationsService } from "./base/base-layer-operations.service";
 

package/src/presentation/components/SubtitleListPanel.tsx

@@ -28,7 +28,7 @@ export const SubtitleListPanel: React.FC<SubtitleListPanelProps> = ({
   currentTime,
   onAdd,
   onUpdate,
-  onDelete,
+  onDelete: _onDelete,
   onSeek,
   t,
 }) => {

package/src/presentation/components/collage/CollageCanvas.tsx

@@ -44,8 +44,8 @@ export const CollageCanvas: React.FC<CollageCanvasProps> = ({
       overflow: "hidden" as const,
     },
     cellImage: {
-      width: "100%",
-      height: "100%",
+      width: "100%" as const,
+      height: "100%" as const,
     },
     cellEmpty: {
       flex: 1,

package/src/presentation/components/collage/CollageLayoutSelector.tsx

@@ -5,7 +5,6 @@
 
 import React from "react";
 import { View, ScrollView, TouchableOpacity } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { COLLAGE_LAYOUTS } from "../../../infrastructure/constants/collage.constants";
 import type { CollageLayout } from "../../../infrastructure/constants/collage.constants";
@@ -93,9 +92,6 @@ export const CollageLayoutSelector: React.FC<CollageLayoutSelectorProps> = ({
                 );
               })}
             </View>
-            <AtomicText type="caption" color="textSecondary">
-              {layout.name}
-            </AtomicText>
           </TouchableOpacity>
         ))}
       </ScrollView>

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

@@ -29,7 +29,6 @@ export const SubtitleListItem: React.FC<SubtitleListItemProps> = ({
     item: {
       flexDirection: "row" as const,
       alignItems: "center" as const,
-      backgroundColor: tokens.colors.surface,
       borderRadius: tokens.borders.radius.md,
       marginHorizontal: tokens.spacing.md,
       marginBottom: tokens.spacing.sm,
@@ -70,17 +69,17 @@ export const SubtitleListItem: React.FC<SubtitleListItemProps> = ({
         activeOpacity={0.7}
       >
         <View style={styles.itemTimeRow}>
-          <AtomicText variant="caption" color="textSecondary">
+          <AtomicText color="textSecondary">
             {formatTimeDetailed(subtitle.startTime)}
           </AtomicText>
-          <AtomicText variant="caption" color="textSecondary">
+          <AtomicText color="textSecondary">
             →
           </AtomicText>
-          <AtomicText variant="caption" color="textSecondary">
+          <AtomicText color="textSecondary">
             {formatTimeDetailed(subtitle.endTime)}
           </AtomicText>
         </View>
-        <AtomicText variant="body" color="textPrimary" numberOfLines={2}>
+        <AtomicText color="textPrimary" numberOfLines={2}>
           {subtitle.text}
         </AtomicText>
       </TouchableOpacity>

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

@@ -55,7 +55,7 @@ export const SubtitleModal: React.FC<SubtitleModalProps> = ({
       paddingHorizontal: tokens.spacing.md,
       paddingTop: tokens.spacing.md,
       paddingBottom: tokens.spacing.xl,
-      maxHeight: "90%",
+      maxHeight: "90%" as const,
     },
     handle: {
       width: 36,
@@ -136,7 +136,7 @@ export const SubtitleModal: React.FC<SubtitleModalProps> = ({
               />
             </View>
 
-            <SubtitleStylePicker value={style} onChange={onChangeStyle} />
+            <SubtitleStylePicker style={style} previewText={text} onChange={onChangeStyle} t={(key) => key} />
 
             <View style={styles.actionRow}>
               <TouchableOpacity style={styles.cancelBtn} onPress={onCancel}>

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

@@ -3,7 +3,7 @@
  * Manages subtitle form state and operations
  */
 
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback } from "react";
 import { DEFAULT_SUBTITLE_STYLE } from "../../../infrastructure/constants/subtitle.constants";
 import type { Subtitle, SubtitleStyle } from "../../../domain/entities/video-project.types";
 

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

@@ -5,30 +5,30 @@
  */
 
 import { useState, useCallback } from "react";
-import type { Layer } from "../../domain/entities/video-project.types";
+import type { Layer, ImageLayer, TextLayer } from "../../../domain/entities/video-project.types";
 
 /**
  * Form field validator function type
  */
-export type ValidatorFn<T> = (value: T[keyof T]) => string | null;
+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?: Partial<Record<keyof T, ValidatorFn<T>>>;
-  buildData: (formState: T) => Partial<Layer>;
+  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>> {
+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: () => Partial<Layer>;
+  buildLayerData: () => R;
   isValid: boolean;
   errors: Partial<Record<keyof T, string | null>>;
   validateField: <K extends keyof T>(field: K) => string | null;
@@ -39,9 +39,9 @@ export interface UseLayerFormReturn<T extends Record<string, unknown>> {
  * Generic hook for managing layer form state
  * Provides type-safe form management with validation support
  */
-export function useLayerForm<T extends Record<string, unknown>>(
+export function useLayerForm<T extends Record<string, unknown>, R = Partial<Layer>>(
   config: UseLayerFormConfig<T>,
-): UseLayerFormReturn<T> {
+): UseLayerFormReturn<T, R> {
   const { initialValues, validators = {}, buildData } = config;
 
   const [formState, setFormState] = useState<T>(
@@ -60,7 +60,7 @@ export function useLayerForm<T extends Record<string, unknown>>(
       }));
 
       // Clear error for this field
-      if (errors[field]) {
+      if (errors[field as keyof typeof errors]) {
         setErrors((prev) => ({
           ...prev,
           [field]: null,
@@ -72,7 +72,7 @@ export function useLayerForm<T extends Record<string, unknown>>(
 
   const validateField = useCallback(
     <K extends keyof T>(field: K): string | null => {
-      const validator = validators[field];
+      const validator = validators[String(field)];
       if (!validator) return null;
 
       const error = validator(formState[field]);
@@ -91,10 +91,13 @@ export function useLayerForm<T extends Record<string, unknown>>(
     const newErrors: Partial<Record<keyof T, string | null>> = {};
 
     for (const field in validators) {
-      const error = validators[field]!(formState[field]);
-      if (error) {
-        newErrors[field] = error;
-        hasError = true;
+      const validator = validators[field];
+      if (validator) {
+        const error = validator(formState[field as keyof T]);
+        if (error) {
+          newErrors[field as keyof T] = error;
+          hasError = true;
+        }
       }
     }
 
@@ -102,8 +105,8 @@ export function useLayerForm<T extends Record<string, unknown>>(
     return !hasError;
   }, [formState, validators]);
 
-  const buildLayerData = useCallback((): Partial<Layer> => {
-    return buildData(formState);
+  const buildLayerData = useCallback((): R => {
+    return buildData(formState) as R;
   }, [formState, buildData]);
 
   const isValid = Object.values(errors).every((error) => error === null);

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/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);