@umituz/react-native-ai-generation-content 1.17.21 → 1.17.22

package/src/features/image-to-video/presentation/hooks/useFormState.ts

@@ -0,0 +1,116 @@
+/**
+ * Form State Hook for Image-to-Video
+ * Manages form state with actions
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type {
+  ImageToVideoFormState,
+  ImageToVideoFormActions,
+  ImageToVideoFormDefaults,
+  AnimationStyleId,
+  MusicMoodId,
+  VideoDuration,
+} from "../../domain/types";
+import {
+  DEFAULT_ANIMATION_STYLE_ID,
+  DEFAULT_MUSIC_MOOD_ID,
+  DEFAULT_VIDEO_DURATION,
+} from "../../domain/constants";
+
+export interface UseFormStateOptions {
+  defaults?: ImageToVideoFormDefaults;
+}
+
+export interface UseFormStateReturn {
+  state: ImageToVideoFormState;
+  actions: ImageToVideoFormActions;
+}
+
+function createInitialState(defaults?: ImageToVideoFormDefaults): ImageToVideoFormState {
+  return {
+    selectedImages: [],
+    animationStyle: defaults?.animationStyle ?? DEFAULT_ANIMATION_STYLE_ID,
+    duration: defaults?.duration ?? DEFAULT_VIDEO_DURATION,
+    musicMood: defaults?.musicMood ?? DEFAULT_MUSIC_MOOD_ID,
+    customAudioUri: null,
+    motionPrompt: "",
+  };
+}
+
+export function useFormState(options?: UseFormStateOptions): UseFormStateReturn {
+  const { defaults } = options ?? {};
+
+  const [state, setState] = useState<ImageToVideoFormState>(() =>
+    createInitialState(defaults)
+  );
+
+  const setSelectedImages = useCallback((images: string[]) => {
+    setState((prev) => ({ ...prev, selectedImages: images }));
+  }, []);
+
+  const addImages = useCallback((images: string[]) => {
+    setState((prev) => ({
+      ...prev,
+      selectedImages: [...prev.selectedImages, ...images],
+    }));
+  }, []);
+
+  const removeImage = useCallback((index: number) => {
+    setState((prev) => ({
+      ...prev,
+      selectedImages: prev.selectedImages.filter((_, i) => i !== index),
+    }));
+  }, []);
+
+  const setAnimationStyle = useCallback((style: AnimationStyleId) => {
+    setState((prev) => ({ ...prev, animationStyle: style }));
+  }, []);
+
+  const setDuration = useCallback((duration: VideoDuration) => {
+    setState((prev) => ({ ...prev, duration }));
+  }, []);
+
+  const setMusicMood = useCallback((mood: MusicMoodId) => {
+    setState((prev) => ({ ...prev, musicMood: mood }));
+  }, []);
+
+  const setCustomAudioUri = useCallback((uri: string | null) => {
+    setState((prev) => ({ ...prev, customAudioUri: uri }));
+  }, []);
+
+  const setMotionPrompt = useCallback((prompt: string) => {
+    setState((prev) => ({ ...prev, motionPrompt: prompt }));
+  }, []);
+
+  const reset = useCallback(() => {
+    setState(createInitialState(defaults));
+  }, [defaults]);
+
+  const actions = useMemo<ImageToVideoFormActions>(
+    () => ({
+      setSelectedImages,
+      addImages,
+      removeImage,
+      setAnimationStyle,
+      setDuration,
+      setMusicMood,
+      setCustomAudioUri,
+      setMotionPrompt,
+      reset,
+    }),
+    [
+      setSelectedImages,
+      addImages,
+      removeImage,
+      setAnimationStyle,
+      setDuration,
+      setMusicMood,
+      setCustomAudioUri,
+      setMotionPrompt,
+      reset,
+    ]
+  );
+
+  return { state, actions };
+}

package/src/features/image-to-video/presentation/hooks/useGeneration.ts

@@ -0,0 +1,85 @@
+/**
+ * Generation Hook for Image-to-Video
+ * Manages generation state and execution
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import type {
+  ImageToVideoFormState,
+  ImageToVideoGenerationState,
+  ImageToVideoCallbacks,
+} from "../../domain/types";
+
+export interface UseGenerationOptions {
+  formState: ImageToVideoFormState;
+  callbacks: ImageToVideoCallbacks;
+}
+
+export interface UseGenerationReturn {
+  generationState: ImageToVideoGenerationState;
+  handleGenerate: () => Promise<void>;
+  setProgress: (progress: number) => void;
+  setError: (error: string | null) => void;
+  isReady: boolean;
+}
+
+const INITIAL_GENERATION_STATE: ImageToVideoGenerationState = {
+  isGenerating: false,
+  progress: 0,
+  error: null,
+};
+
+export function useGeneration(options: UseGenerationOptions): UseGenerationReturn {
+  const { formState, callbacks } = options;
+
+  const [generationState, setGenerationState] = useState<ImageToVideoGenerationState>(
+    INITIAL_GENERATION_STATE
+  );
+
+  const setProgress = useCallback((progress: number) => {
+    setGenerationState((prev) => ({ ...prev, progress }));
+  }, []);
+
+  const setError = useCallback((error: string | null) => {
+    setGenerationState((prev) => ({ ...prev, error, isGenerating: false }));
+  }, []);
+
+  const handleGenerate = useCallback(async () => {
+    if (formState.selectedImages.length === 0) {
+      callbacks.onError?.("No images selected");
+      return;
+    }
+
+    setGenerationState({
+      isGenerating: true,
+      progress: 0,
+      error: null,
+    });
+
+    try {
+      await callbacks.onGenerate(formState);
+      setGenerationState((prev) => ({ ...prev, isGenerating: false, progress: 100 }));
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      setGenerationState({
+        isGenerating: false,
+        progress: 0,
+        error: errorMessage,
+      });
+      callbacks.onError?.(errorMessage);
+    }
+  }, [formState, callbacks]);
+
+  const isReady = useMemo(
+    () => formState.selectedImages.length > 0 && !generationState.isGenerating,
+    [formState.selectedImages.length, generationState.isGenerating]
+  );
+
+  return {
+    generationState,
+    handleGenerate,
+    setProgress,
+    setError,
+    isReady,
+  };
+}

package/src/features/image-to-video/presentation/hooks/useImageToVideoForm.ts

@@ -0,0 +1,93 @@
+/**
+ * Image-to-Video Form Hook
+ * Composes form state and generation for complete form management
+ */
+
+import { useMemo, useCallback } from "react";
+import { useFormState, type UseFormStateOptions } from "./useFormState";
+import { useGeneration } from "./useGeneration";
+import type {
+  ImageToVideoFormState,
+  ImageToVideoFormActions,
+  ImageToVideoGenerationState,
+  ImageToVideoCallbacks,
+  MusicMoodId,
+} from "../../domain/types";
+
+export interface UseImageToVideoFormOptions extends UseFormStateOptions {
+  callbacks: ImageToVideoCallbacks;
+}
+
+export interface UseImageToVideoFormReturn {
+  state: ImageToVideoFormState;
+  actions: ImageToVideoFormActions;
+  generationState: ImageToVideoGenerationState;
+  handleGenerate: () => Promise<void>;
+  handleMusicSelect: (moodId: MusicMoodId) => void;
+  handleSelectImages: () => Promise<void>;
+  isReady: boolean;
+}
+
+export function useImageToVideoForm(
+  options: UseImageToVideoFormOptions
+): UseImageToVideoFormReturn {
+  const { callbacks, defaults } = options;
+
+  const { state, actions } = useFormState({ defaults });
+
+  const { generationState, handleGenerate, isReady } = useGeneration({
+    formState: state,
+    callbacks,
+  });
+
+  const handleMusicSelect = useCallback(
+    (moodId: MusicMoodId) => {
+      if (moodId === "custom" && callbacks.onSelectCustomAudio) {
+        callbacks.onSelectCustomAudio().then((uri) => {
+          if (uri) {
+            actions.setCustomAudioUri(uri);
+            actions.setMusicMood("custom");
+          }
+        });
+      } else {
+        actions.setMusicMood(moodId);
+        if (moodId !== "custom") {
+          actions.setCustomAudioUri(null);
+        }
+      }
+    },
+    [callbacks, actions]
+  );
+
+  const handleSelectImages = useCallback(async () => {
+    if (callbacks.onSelectImages) {
+      const images = await callbacks.onSelectImages();
+      if (images.length > 0) {
+        actions.addImages(images);
+      }
+    }
+  }, [callbacks, actions]);
+
+  const formReturn = useMemo<UseImageToVideoFormReturn>(
+    () => ({
+      state,
+      actions,
+      generationState,
+      handleGenerate,
+      handleMusicSelect,
+      handleSelectImages,
+      isReady,
+    }),
+    [
+      state,
+      actions,
+      generationState,
+      handleGenerate,
+      handleMusicSelect,
+      handleSelectImages,
+      isReady,
+    ]
+  );
+
+  return formReturn;
+}

package/src/features/image-to-video/presentation/index.ts

@@ -1 +1,5 @@
+// Hooks
 export * from "./hooks";
+
+// Components
+export * from "./components";

package/src/features/text-to-video/domain/types/callback.types.ts

@@ -0,0 +1,50 @@
+/**
+ * Text-to-Video Callback Types
+ * Single Responsibility: Define callback function signatures
+ */
+
+import type { TextToVideoResult } from "./request.types";
+
+export interface ModerationResult {
+  isAllowed: boolean;
+  warnings: string[];
+}
+
+export interface ProjectData {
+  videoUrl: string;
+  thumbnailUrl?: string;
+  prompt: string;
+  aspectRatio: string;
+  duration: number;
+  style: string;
+}
+
+export interface TextToVideoCallbacks {
+  onCreditCheck?: (cost: number) => boolean;
+  onAuthCheck?: () => boolean;
+  onModeration?: (prompt: string) => Promise<ModerationResult>;
+  onProjectCreate?: (data: ProjectData) => Promise<void>;
+  onGenerate?: (result: TextToVideoResult) => void;
+  onError?: (error: string) => void;
+  onProgress?: (progress: number) => void;
+  onPromptChange?: (prompt: string) => void;
+  onStyleChange?: (style: string) => void;
+  onTabChange?: (tab: string) => void;
+  onShowPaywall?: (cost: number) => void;
+  onShowModerationWarning?: (
+    warnings: string[],
+    onCancel: () => void,
+    onProceed: () => void,
+  ) => void;
+  onNavigateToProjects?: () => void;
+  onNavigateToEditor?: (videoUrl: string) => void;
+}
+
+export interface TextToVideoTranslations {
+  promptPlaceholder: string;
+  generateButtonText: string;
+  processingText: string;
+  successText: string;
+  missingPromptTitle: string;
+  missingPromptMessage: string;
+}

package/src/features/text-to-video/domain/types/component.types.ts

@@ -0,0 +1,106 @@
+/**
+ * Text-to-Video Component Prop Types
+ * Single Responsibility: Define component prop interfaces
+ */
+
+import type { ViewStyle } from "react-native";
+import type { FrameData } from "./state.types";
+import type { TabConfig, StyleOption, AspectRatioOption, DurationOption } from "./config.types";
+
+export interface GenerationTabsProps {
+  tabs: TabConfig[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  getLabel: (key: string) => string;
+  style?: ViewStyle;
+}
+
+export interface FrameSelectorProps {
+  frames: FrameData[];
+  onFrameChange: (index: number) => void;
+  onFrameDelete: (index: number) => void;
+  startLabel: string;
+  endLabel: string;
+  changeLabel: string;
+  deleteLabel: string;
+  style?: ViewStyle;
+}
+
+export interface OptionsPanelProps {
+  soundEnabled: boolean;
+  onSoundToggle: (value: boolean) => void;
+  professionalMode: boolean;
+  onProfessionalModeToggle: (value: boolean) => void;
+  duration: number;
+  soundLabel: string;
+  soundBadge?: string;
+  professionalLabel: string;
+  style?: ViewStyle;
+}
+
+export interface HeroSectionProps {
+  title: string;
+  subtitle: string;
+  icon?: string;
+  style?: ViewStyle;
+}
+
+export interface HintCarouselProps {
+  hints: HintItem[];
+  onHintSelect: (hint: HintItem) => void;
+  onRefresh?: () => void;
+  style?: ViewStyle;
+}
+
+export interface HintItem {
+  id: string;
+  imageUrl: string;
+  prompt?: string;
+}
+
+export interface StyleSelectorProps {
+  styles: StyleOption[];
+  selectedStyle: string;
+  onStyleSelect: (styleId: string) => void;
+  getLabel: (key: string) => string;
+  title: string;
+  style?: ViewStyle;
+}
+
+export interface AspectRatioSelectorProps {
+  ratios: AspectRatioOption[];
+  selectedRatio: string;
+  onRatioSelect: (ratioId: string) => void;
+  getLabel: (key: string) => string;
+  style?: ViewStyle;
+}
+
+export interface DurationSelectorProps {
+  durations: DurationOption[];
+  selectedDuration: number;
+  onDurationSelect: (duration: number) => void;
+  getLabel: (key: string) => string;
+  style?: ViewStyle;
+}
+
+export interface GenerateButtonProps {
+  isGenerating: boolean;
+  isDisabled: boolean;
+  onPress: () => void;
+  credits?: number;
+  label: string;
+  generatingLabel: string;
+  style?: ViewStyle;
+}
+
+export interface ExamplePromptsProps {
+  prompts: ExamplePrompt[];
+  onPromptSelect: (prompt: string) => void;
+  style?: ViewStyle;
+}
+
+export interface ExamplePrompt {
+  id: string;
+  text: string;
+  emoji?: string;
+}

package/src/features/text-to-video/domain/types/config.types.ts

@@ -0,0 +1,61 @@
+/**
+ * Text-to-Video Configuration Types
+ * Single Responsibility: Define configuration interfaces for flexibility
+ */
+
+export interface TabConfig {
+  id: string;
+  labelKey: string;
+}
+
+export interface VideoStyleOption {
+  id: string;
+  nameKey: string;
+  descriptionKey?: string;
+  thumbnail?: string;
+}
+
+export interface AspectRatioOption {
+  id: string;
+  value: string;
+  labelKey: string;
+  icon?: string;
+}
+
+export interface VideoDurationOption {
+  value: number;
+  labelKey: string;
+}
+
+export interface OptionToggleConfig {
+  id: string;
+  labelKey: string;
+  badgeKey?: string;
+  defaultValue?: boolean;
+}
+
+export interface TextToVideoConfig {
+  model: string;
+  creditCost: number;
+  maxPromptLength?: number;
+  enableFrames?: boolean;
+  enableHints?: boolean;
+  enableSound?: boolean;
+  enableProfessionalMode?: boolean;
+  tabs?: TabConfig[];
+  styles?: StyleOption[];
+  aspectRatios?: AspectRatioOption[];
+  durations?: DurationOption[];
+  options?: OptionToggleConfig[];
+}
+
+export interface HeroConfig {
+  titleKey: string;
+  subtitleKey: string;
+  icon?: string;
+}
+
+export interface ProgressConfig {
+  titleKey: string;
+  hintKey: string;
+}

package/src/features/text-to-video/domain/types/index.ts

@@ -1,10 +1,54 @@
+/**
+ * Text-to-Video Domain Types
+ * Single Responsibility: Export all domain types
+ */
+
 export type {
   TextToVideoOptions,
   TextToVideoRequest,
   TextToVideoResult,
-  TextToVideoFeatureState,
-  TextToVideoTranslations,
   TextToVideoInputBuilder,
   TextToVideoResultExtractor,
-  TextToVideoFeatureConfig,
-} from "./text-to-video.types";
+} from "./request.types";
+
+export type {
+  TextToVideoFeatureState,
+  TextToVideoFormState,
+  TextToVideoGenerationState,
+  FrameData,
+} from "./state.types";
+
+export { INITIAL_FORM_STATE, INITIAL_GENERATION_STATE } from "./state.types";
+
+export type {
+  TabConfig,
+  StyleOption,
+  AspectRatioOption,
+  DurationOption,
+  OptionToggleConfig,
+  TextToVideoConfig,
+  HeroConfig,
+  ProgressConfig,
+} from "./config.types";
+
+export type {
+  ModerationResult,
+  ProjectData,
+  TextToVideoCallbacks,
+  TextToVideoTranslations,
+} from "./callback.types";
+
+export type {
+  GenerationTabsProps,
+  FrameSelectorProps,
+  OptionsPanelProps,
+  HeroSectionProps,
+  HintCarouselProps,
+  HintItem,
+  StyleSelectorProps,
+  AspectRatioSelectorProps,
+  DurationSelectorProps,
+  GenerateButtonProps,
+  ExamplePromptsProps,
+  ExamplePrompt,
+} from "./component.types";

package/src/features/text-to-video/domain/types/request.types.ts

@@ -0,0 +1,36 @@
+/**
+ * Text-to-Video Request/Response Types
+ * Single Responsibility: Define API request and response structures
+ */
+
+export interface TextToVideoOptions {
+  duration?: number;
+  fps?: number;
+  guidanceScale?: number;
+  aspectRatio?: "16:9" | "9:16" | "1:1";
+  style?: string;
+  negativePrompt?: string;
+}
+
+export interface TextToVideoRequest {
+  prompt: string;
+  userId: string;
+  options?: TextToVideoOptions;
+}
+
+export interface TextToVideoResult {
+  success: boolean;
+  videoUrl?: string;
+  thumbnailUrl?: string;
+  error?: string;
+  requestId?: string;
+}
+
+export type TextToVideoInputBuilder = (
+  prompt: string,
+  options?: TextToVideoOptions,
+) => Record<string, unknown>;
+
+export type TextToVideoResultExtractor = (
+  result: unknown,
+) => { videoUrl?: string; thumbnailUrl?: string } | undefined;

package/src/features/text-to-video/domain/types/state.types.ts

@@ -0,0 +1,53 @@
+/**
+ * Text-to-Video Feature State Types
+ * Single Responsibility: Define internal state structures
+ */
+
+export interface TextToVideoFeatureState {
+  prompt: string;
+  videoUrl: string | null;
+  thumbnailUrl: string | null;
+  isProcessing: boolean;
+  progress: number;
+  error: string | null;
+}
+
+export interface TextToVideoFormState {
+  prompt: string;
+  style: string;
+  aspectRatio: string;
+  duration: number;
+  activeTab: string;
+  soundEnabled: boolean;
+  professionalMode: boolean;
+}
+
+export interface TextToVideoGenerationState {
+  isGenerating: boolean;
+  progress: number;
+  contentWarnings: string[];
+  error: string | null;
+}
+
+export interface FrameData {
+  id: string;
+  url: string;
+  order: number;
+}
+
+export const INITIAL_FORM_STATE: TextToVideoFormState = {
+  prompt: "",
+  style: "realistic",
+  aspectRatio: "16:9",
+  duration: 4,
+  activeTab: "text-to-video",
+  soundEnabled: false,
+  professionalMode: false,
+};
+
+export const INITIAL_GENERATION_STATE: TextToVideoGenerationState = {
+  isGenerating: false,
+  progress: 0,
+  contentWarnings: [],
+  error: null,
+};