@umituz/react-native-ai-generation-content 1.27.7 → 1.27.9

package/src/features/image-to-video/presentation/components/ImageSelectionGrid.tsx

@@ -0,0 +1,77 @@
+/**
+ * Image Selection Grid Component
+ * Generic component for image selection display
+ */
+
+import React, { useMemo } from "react";
+import { View, ScrollView } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { EmptyGridState } from "./EmptyGridState";
+import { GridImageItem } from "./GridImageItem";
+import { AddMoreCard } from "./AddMoreCard";
+import { createImageSelectionGridStyles } from "./ImageSelectionGrid.styles";
+import type { ImageSelectionGridProps } from "./ImageSelectionGrid.types";
+
+export const ImageSelectionGrid: React.FC<ImageSelectionGridProps> = ({
+  images,
+  maxImages,
+  onSelectImages,
+  onRemoveImage,
+  translations,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(
+    () => createImageSelectionGridStyles(tokens),
+    [tokens]
+  );
+
+  if (images.length === 0) {
+    return (
+      <EmptyGridState
+        styles={styles}
+        maxImages={maxImages}
+        translations={translations}
+        onSelectImages={onSelectImages}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {translations.selectedImages} ({images.length}/{maxImages})
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.scroll}
+      >
+        {images.map((uri, index) => (
+          <GridImageItem
+            key={index}
+            styles={styles}
+            uri={uri}
+            index={index}
+            onRemove={() => onRemoveImage(index)}
+          />
+        ))}
+
+        {images.length < maxImages && (
+          <AddMoreCard
+            styles={styles}
+            addMoreText={translations.addMore}
+            onPress={onSelectImages}
+          />
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+export type { ImageSelectionGridProps, ImageSelectionGridTranslations } from "./ImageSelectionGrid.types";

package/src/features/image-to-video/presentation/components/ImageSelectionGrid.types.ts

@@ -0,0 +1,18 @@
+/**
+ * ImageSelectionGrid Type Definitions
+ */
+
+export interface ImageSelectionGridTranslations {
+  selectedImages: string;
+  selectImages: string;
+  chooseUpTo: string;
+  addMore: string;
+}
+
+export interface ImageSelectionGridProps {
+  images: string[];
+  maxImages: number;
+  onSelectImages: () => void;
+  onRemoveImage: (index: number) => void;
+  translations: ImageSelectionGridTranslations;
+}

package/src/features/image-to-video/presentation/components/MusicMoodSelector.tsx

@@ -0,0 +1,181 @@
+/**
+ * Music Mood Selector Component
+ * Generic component for music mood selection
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { MusicMood, MusicMoodId } from "../../domain/types";
+
+export interface MusicMoodSelectorProps {
+  moods: MusicMood[];
+  selectedMood: MusicMoodId;
+  onMoodSelect: (moodId: MusicMoodId) => void;
+  label: string;
+  hasCustomAudio?: boolean;
+  customAudioLabel?: string;
+}
+
+export const MusicMoodSelector: React.FC<MusicMoodSelectorProps> = ({
+  moods,
+  selectedMood,
+  onMoodSelect,
+  label,
+  hasCustomAudio = false,
+  customAudioLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[componentStyles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={componentStyles.scroll}
+      >
+        {moods.map((mood) => {
+          const isSelected = selectedMood === mood.id;
+          return (
+            <TouchableOpacity
+              key={mood.id}
+              style={[
+                componentStyles.card,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onMoodSelect(mood.id)}
+              activeOpacity={0.7}
+            >
+              <View
+                style={[
+                  componentStyles.iconContainer,
+                  {
+                    backgroundColor: isSelected
+                      ? tokens.colors.modalOverlay
+                      : tokens.colors.surface,
+                  },
+                ]}
+              >
+                <AtomicIcon
+                  name={mood.icon as never}
+                  size="lg"
+                  color={isSelected ? "onSurface" : "primary"}
+                />
+              </View>
+              <AtomicText
+                type="bodySmall"
+                style={[
+                  componentStyles.moodName,
+                  {
+                    color: isSelected
+                      ? tokens.colors.textInverse
+                      : tokens.colors.textPrimary,
+                  },
+                ]}
+              >
+                {mood.name}
+              </AtomicText>
+              <AtomicText
+                type="labelSmall"
+                style={[
+                  componentStyles.moodDescription,
+                  {
+                    color: isSelected
+                      ? tokens.colors.textInverse
+                      : tokens.colors.textSecondary,
+                    opacity: isSelected ? 0.9 : 0.7,
+                  },
+                ]}
+              >
+                {mood.description}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+      {selectedMood === "custom" && hasCustomAudio && customAudioLabel && (
+        <View
+          style={[
+            componentStyles.customBadge,
+            { backgroundColor: tokens.colors.surfaceVariant },
+          ]}
+        >
+          <AtomicIcon name="checkmark-circle-outline" size="sm" color="primary" />
+          <AtomicText
+            type="labelSmall"
+            style={[componentStyles.customBadgeText, { color: tokens.colors.primary }]}
+          >
+            {customAudioLabel}
+          </AtomicText>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  scroll: {
+    marginHorizontal: -16,
+    paddingHorizontal: 16,
+  },
+  card: {
+    width: 140,
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 2,
+    marginRight: 12,
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  moodName: {
+    fontWeight: "600",
+    marginTop: 8,
+    textAlign: "center",
+  },
+  moodDescription: {
+    marginTop: 4,
+    textAlign: "center",
+  },
+  customBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 12,
+  },
+  customBadgeText: {
+    marginLeft: 8,
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,30 @@
+/**
+ * Image-to-Video Components Index
+ */
+
+// Animation Style Selector
+export { AnimationStyleSelector as ImageToVideoAnimationStyleSelector } from "./AnimationStyleSelector";
+export type { AnimationStyleSelectorProps as ImageToVideoAnimationStyleSelectorProps } from "./AnimationStyleSelector";
+
+// Duration Selector
+export { DurationSelector as ImageToVideoDurationSelector } from "./DurationSelector";
+export type { DurationSelectorProps as ImageToVideoDurationSelectorProps } from "./DurationSelector";
+
+// Music Mood Selector
+export { MusicMoodSelector as ImageToVideoMusicMoodSelector } from "./MusicMoodSelector";
+export type { MusicMoodSelectorProps as ImageToVideoMusicMoodSelectorProps } from "./MusicMoodSelector";
+
+// Image Selection Grid
+export { ImageSelectionGrid as ImageToVideoSelectionGrid } from "./ImageSelectionGrid";
+export type {
+  ImageSelectionGridProps as ImageToVideoSelectionGridProps,
+  ImageSelectionGridTranslations as ImageToVideoSelectionGridTranslations,
+} from "./ImageSelectionGrid";
+
+// Hero Section - Using AIGenerationHero from common components
+// export { HeroSection as ImageToVideoHeroSection } from "./HeroSection";
+// export type { HeroSectionProps as ImageToVideoHeroSectionProps } from "./HeroSection";
+
+// Action Components
+export { GenerateButton as ImageToVideoGenerateButton } from "../../../../presentation/components/buttons";
+export type { GenerateButtonProps as ImageToVideoGenerateButtonProps } from "../../../../presentation/components/buttons";

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

@@ -0,0 +1,27 @@
+// Form State Hook
+export { useFormState as useImageToVideoFormState } from "./useFormState";
+export type {
+  UseFormStateOptions as UseImageToVideoFormStateOptions,
+  UseFormStateReturn as UseImageToVideoFormStateReturn,
+} from "./useFormState";
+
+// Generation Hook
+export { useGeneration as useImageToVideoGeneration } from "./useGeneration";
+export type {
+  UseGenerationOptions as UseImageToVideoGenerationOptions,
+  UseGenerationReturn as UseImageToVideoGenerationReturn,
+} from "./useGeneration";
+
+// Combined Form Hook
+export { useImageToVideoForm } from "./useImageToVideoForm";
+export type {
+  UseImageToVideoFormOptions,
+  UseImageToVideoFormReturn,
+} from "./useImageToVideoForm";
+
+// Provider-based Feature Hook
+export { useImageToVideoFeature } from "./useImageToVideoFeature";
+export type {
+  UseImageToVideoFeatureProps,
+  UseImageToVideoFeatureReturn,
+} from "./useImageToVideoFeature";

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/useGenerationExecution.ts

@@ -0,0 +1,143 @@
+/**
+ * useGenerationExecution Hook
+ * Handles the core generation execution logic for image-to-video
+ */
+
+import { useCallback } from "react";
+import { executeImageToVideo } from "../../infrastructure/services";
+import type {
+  ImageToVideoFeatureConfig,
+  ImageToVideoFeatureCallbacks,
+  ImageToVideoResult,
+  ImageToVideoGenerateParams,
+  ImageToVideoFeatureState,
+} from "../../domain/types";
+
+declare const __DEV__: boolean;
+
+interface UseGenerationExecutionParams {
+  userId: string;
+  config: ImageToVideoFeatureConfig;
+  callbacks?: ImageToVideoFeatureCallbacks;
+  setState: React.Dispatch<React.SetStateAction<ImageToVideoFeatureState>>;
+}
+
+export function useGenerationExecution({
+  userId,
+  config,
+  callbacks,
+  setState,
+}: UseGenerationExecutionParams) {
+  return useCallback(
+    async (
+      imageUri: string,
+      motionPrompt: string,
+      options?: Omit<ImageToVideoGenerateParams, "imageUri" | "motionPrompt">,
+    ): Promise<ImageToVideoResult> => {
+      const creationId = `image-to-video_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+
+      setState((prev) => ({
+        ...prev,
+        imageUri,
+        isProcessing: true,
+        progress: 0,
+        error: null,
+      }));
+
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[ImageToVideoFeature] Starting generation, creationId:", creationId);
+      }
+
+      config.onProcessingStart?.();
+
+      if (callbacks?.onGenerationStart) {
+        callbacks.onGenerationStart({
+          creationId,
+          type: "image-to-video",
+          imageUri,
+          metadata: options as Record<string, unknown> | undefined,
+        }).catch((err) => {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.warn("[ImageToVideoFeature] onGenerationStart failed:", err);
+          }
+        });
+      }
+
+      try {
+        const imageBase64 = await config.prepareImage(imageUri);
+
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[ImageToVideoFeature] Image prepared, calling executeImageToVideo");
+        }
+
+        const result = await executeImageToVideo(
+          {
+            imageUri,
+            imageBase64,
+            userId,
+            motionPrompt: motionPrompt || undefined,
+            options,
+          },
+          {
+            model: config.model,
+            buildInput: config.buildInput,
+            extractResult: config.extractResult,
+            onProgress: (progress) => {
+              setState((prev) => ({ ...prev, progress }));
+              callbacks?.onProgress?.(progress);
+            },
+          },
+        );
+
+        if (result.success && result.videoUrl) {
+          setState((prev) => ({
+            ...prev,
+            videoUrl: result.videoUrl ?? null,
+            thumbnailUrl: result.thumbnailUrl ?? null,
+            isProcessing: false,
+            progress: 100,
+          }));
+
+          if (callbacks?.onCreditDeduct && config.creditCost) {
+            await callbacks.onCreditDeduct(config.creditCost);
+          }
+
+          if (callbacks?.onCreationSave) {
+            await callbacks.onCreationSave({
+              creationId,
+              type: "image-to-video",
+              videoUrl: result.videoUrl,
+              thumbnailUrl: result.thumbnailUrl,
+              imageUri,
+              metadata: options as Record<string, unknown> | undefined,
+            });
+          }
+
+          callbacks?.onGenerate?.(result);
+        } else {
+          const error = result.error || "Generation failed";
+          setState((prev) => ({ ...prev, isProcessing: false, error }));
+          config.onError?.(error);
+          callbacks?.onError?.(error);
+        }
+
+        config.onProcessingComplete?.(result);
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.error("[ImageToVideoFeature] Generation error:", errorMessage);
+        }
+        setState((prev) => ({
+          ...prev,
+          isProcessing: false,
+          error: errorMessage,
+        }));
+        config.onError?.(errorMessage);
+        callbacks?.onError?.(errorMessage);
+        return { success: false, error: errorMessage };
+      }
+    },
+    [userId, config, callbacks],
+  );
+}