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

package/src/features/image-to-video/domain/types/animation.types.ts

@@ -0,0 +1,20 @@
+/**
+ * Animation Types for Image-to-Video
+ * Defines animation style options
+ */
+
+export interface AnimationStyle {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+}
+
+export type AnimationStyleId =
+  | "ken_burns"
+  | "zoom_in"
+  | "zoom_out"
+  | "slide_left"
+  | "slide_right"
+  | "parallax"
+  | string;

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

@@ -0,0 +1,56 @@
+/**
+ * Config Types for Image-to-Video
+ * Defines callbacks and configuration options
+ */
+
+import type { ImageToVideoResult } from "./image-to-video.types";
+import type { ImageToVideoFormState } from "./form.types";
+
+export interface ImageToVideoCallbacks {
+  onGenerate: (formState: ImageToVideoFormState) => Promise<void>;
+  onSelectImages?: () => Promise<string[]>;
+  onSelectCustomAudio?: () => Promise<string | null>;
+  onCreditCheck?: (cost: number) => boolean;
+  onShowPaywall?: (cost: number) => void;
+  onSuccess?: (result: ImageToVideoResult) => void;
+  onError?: (error: string) => void;
+}
+
+export interface ImageToVideoFormConfig {
+  maxImages?: number;
+  creditCost?: number;
+  enableCustomAudio?: boolean;
+  enableMotionPrompt?: boolean;
+}
+
+export interface ImageToVideoTranslationsExtended {
+  sectionTitles: {
+    selectedImages: string;
+    animationStyle: string;
+    durationPerImage: string;
+    addMusic: string;
+  };
+  imageSelection: {
+    selectImages: string;
+    chooseUpTo: string;
+    addMore: string;
+  };
+  duration: {
+    totalVideo: string;
+  };
+  music: {
+    customAudioSelected: string;
+  };
+  hero: {
+    title: string;
+    subtitle: string;
+  };
+  generate: {
+    buttonText: string;
+    generatingText: string;
+  };
+  errors: {
+    noImages: string;
+    noImagesMessage: string;
+  };
+}

package/src/features/image-to-video/domain/types/duration.types.ts

@@ -0,0 +1,11 @@
+/**
+ * Duration Types for Image-to-Video
+ * Defines video duration options
+ */
+
+export type VideoDuration = 4 | 8 | number;
+
+export interface DurationOption {
+  value: VideoDuration;
+  label?: string;
+}

package/src/features/image-to-video/domain/types/form.types.ts

@@ -0,0 +1,35 @@
+/**
+ * Form Types for Image-to-Video
+ * Defines form state and actions
+ */
+
+import type { AnimationStyleId } from "./animation.types";
+import type { MusicMoodId } from "./music.types";
+import type { VideoDuration } from "./duration.types";
+
+export interface ImageToVideoFormState {
+  selectedImages: string[];
+  animationStyle: AnimationStyleId;
+  duration: VideoDuration;
+  musicMood: MusicMoodId;
+  customAudioUri: string | null;
+  motionPrompt: string;
+}
+
+export interface ImageToVideoFormActions {
+  setSelectedImages: (images: string[]) => void;
+  addImages: (images: string[]) => void;
+  removeImage: (index: number) => void;
+  setAnimationStyle: (style: AnimationStyleId) => void;
+  setDuration: (duration: VideoDuration) => void;
+  setMusicMood: (mood: MusicMoodId) => void;
+  setCustomAudioUri: (uri: string | null) => void;
+  setMotionPrompt: (prompt: string) => void;
+  reset: () => void;
+}
+
+export interface ImageToVideoFormDefaults {
+  animationStyle?: AnimationStyleId;
+  duration?: VideoDuration;
+  musicMood?: MusicMoodId;
+}

package/src/features/image-to-video/domain/types/image-to-video.types.ts

@@ -0,0 +1,122 @@
+/**
+ * Image-to-Video Feature Types
+ * Request, Result, Config types for image-to-video generation
+ */
+
+import type { AnimationStyleId } from "./animation.types";
+import type { MusicMoodId } from "./music.types";
+import type { VideoDuration } from "./duration.types";
+
+export interface ImageToVideoOptions {
+  duration?: number;
+  motionStrength?: number;
+  aspectRatio?: "16:9" | "9:16" | "1:1";
+  fps?: number;
+  animationStyle?: AnimationStyleId;
+  musicMood?: MusicMoodId;
+}
+
+export interface ImageToVideoGenerateParams extends ImageToVideoOptions {
+  imageUri?: string;
+  motionPrompt?: string;
+}
+
+export interface ImageToVideoRequest {
+  imageUri: string;
+  imageBase64?: string;
+  userId: string;
+  motionPrompt?: string;
+  options?: ImageToVideoOptions;
+  allImages?: string[];
+  customAudioUri?: string | null;
+  animationStyle?: AnimationStyleId;
+  duration?: VideoDuration;
+  musicMood?: MusicMoodId;
+  model?: string;
+}
+
+export interface ImageToVideoResult {
+  success: boolean;
+  videoUrl?: string;
+  thumbnailUrl?: string;
+  error?: string;
+  requestId?: string;
+}
+
+export interface ImageToVideoGenerationState {
+  isGenerating: boolean;
+  progress: number;
+  error: string | null;
+}
+
+export interface ImageToVideoFeatureState {
+  imageUri: string | null;
+  motionPrompt: string;
+  videoUrl: string | null;
+  thumbnailUrl: string | null;
+  isProcessing: boolean;
+  progress: number;
+  error: string | null;
+}
+
+export interface ImageToVideoTranslations {
+  uploadTitle: string;
+  uploadSubtitle: string;
+  motionPromptPlaceholder: string;
+  generateButtonText: string;
+  processingText: string;
+  successText: string;
+  saveButtonText: string;
+  tryAnotherText: string;
+}
+
+export type ImageToVideoInputBuilder = (
+  imageBase64: string,
+  motionPrompt?: string,
+  options?: ImageToVideoOptions,
+) => Record<string, unknown>;
+
+export type ImageToVideoResultExtractor = (
+  result: unknown,
+) => { videoUrl?: string; thumbnailUrl?: string } | undefined;
+
+export interface ImageToVideoFeatureCallbacks {
+  onCreditCheck?: (cost: number) => Promise<boolean>;
+  onCreditDeduct?: (cost: number) => Promise<void>;
+  onAuthCheck?: () => boolean;
+  onShowPaywall?: (creditCost: number) => void;
+  onGenerationStart?: (data: ImageToVideoGenerationStartData) => Promise<void>;
+  onCreationSave?: (data: ImageToVideoCreationData) => Promise<void>;
+  onGenerate?: (result: ImageToVideoResult) => void;
+  onProgress?: (progress: number) => void;
+  onError?: (error: string) => void;
+}
+
+export interface ImageToVideoGenerationStartData {
+  creationId: string;
+  type: string;
+  imageUri: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface ImageToVideoCreationData {
+  creationId: string;
+  type: string;
+  videoUrl: string;
+  thumbnailUrl?: string;
+  imageUri: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface ImageToVideoFeatureConfig {
+  providerId?: string;
+  creditCost?: number;
+  model: string;
+  buildInput: ImageToVideoInputBuilder;
+  extractResult?: ImageToVideoResultExtractor;
+  prepareImage: (imageUri: string) => Promise<string>;
+  onImageSelect?: (uri: string) => void;
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: ImageToVideoResult) => void;
+  onError?: (error: string) => void;
+}

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

@@ -0,0 +1,39 @@
+// Animation Types
+export type { AnimationStyle, AnimationStyleId } from "./animation.types";
+
+// Music Types
+export type { MusicMood, MusicMoodId } from "./music.types";
+
+// Duration Types
+export type { VideoDuration, DurationOption } from "./duration.types";
+
+// Form Types
+export type {
+  ImageToVideoFormState,
+  ImageToVideoFormActions,
+  ImageToVideoFormDefaults,
+} from "./form.types";
+
+// Config Types
+export type {
+  ImageToVideoCallbacks,
+  ImageToVideoFormConfig,
+  ImageToVideoTranslationsExtended,
+} from "./config.types";
+
+// Core Feature Types
+export type {
+  ImageToVideoOptions,
+  ImageToVideoGenerateParams,
+  ImageToVideoRequest,
+  ImageToVideoResult,
+  ImageToVideoGenerationState,
+  ImageToVideoFeatureState,
+  ImageToVideoTranslations,
+  ImageToVideoInputBuilder,
+  ImageToVideoResultExtractor,
+  ImageToVideoFeatureCallbacks,
+  ImageToVideoGenerationStartData,
+  ImageToVideoCreationData,
+  ImageToVideoFeatureConfig,
+} from "./image-to-video.types";

package/src/features/image-to-video/domain/types/music.types.ts

@@ -0,0 +1,21 @@
+/**
+ * Music Types for Image-to-Video
+ * Defines music mood options
+ */
+
+export interface MusicMood {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+}
+
+export type MusicMoodId =
+  | "none"
+  | "energetic"
+  | "calm"
+  | "happy"
+  | "emotional"
+  | "rhythmic"
+  | "custom"
+  | string;

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

@@ -0,0 +1,116 @@
+/**
+ * Image-to-Video Feature
+ * Provider-agnostic image-to-video generation feature
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Types
+// =============================================================================
+
+// Animation Types
+export type { AnimationStyle, AnimationStyleId } from "./domain";
+
+// Music Types
+export type { MusicMood, MusicMoodId } from "./domain";
+
+// Duration Types
+export type { VideoDuration, DurationOption } from "./domain";
+
+// Form Types
+export type {
+  ImageToVideoFormState,
+  ImageToVideoFormActions,
+  ImageToVideoFormDefaults,
+} from "./domain";
+
+// Config Types
+export type {
+  ImageToVideoCallbacks,
+  ImageToVideoFormConfig,
+  ImageToVideoTranslationsExtended,
+} from "./domain";
+
+// Core Feature Types
+export type {
+  ImageToVideoOptions,
+  ImageToVideoGenerateParams,
+  ImageToVideoRequest,
+  ImageToVideoResult,
+  ImageToVideoGenerationState,
+  ImageToVideoFeatureState,
+  ImageToVideoTranslations,
+  ImageToVideoInputBuilder,
+  ImageToVideoResultExtractor,
+  ImageToVideoFeatureCallbacks,
+  ImageToVideoGenerationStartData,
+  ImageToVideoCreationData,
+  ImageToVideoFeatureConfig,
+} from "./domain";
+
+// =============================================================================
+// DOMAIN LAYER - Constants
+// =============================================================================
+
+export {
+  DEFAULT_ANIMATION_STYLES as IMAGE_TO_VIDEO_ANIMATION_STYLES,
+  DEFAULT_ANIMATION_STYLE_ID as IMAGE_TO_VIDEO_DEFAULT_ANIMATION,
+  DEFAULT_MUSIC_MOODS as IMAGE_TO_VIDEO_MUSIC_MOODS,
+  DEFAULT_MUSIC_MOOD_ID as IMAGE_TO_VIDEO_DEFAULT_MUSIC,
+  DEFAULT_DURATION_OPTIONS as IMAGE_TO_VIDEO_DURATION_OPTIONS,
+  DEFAULT_VIDEO_DURATION as IMAGE_TO_VIDEO_DEFAULT_DURATION,
+  DEFAULT_FORM_VALUES as IMAGE_TO_VIDEO_FORM_DEFAULTS,
+  DEFAULT_FORM_CONFIG as IMAGE_TO_VIDEO_CONFIG,
+} from "./domain";
+
+// =============================================================================
+// INFRASTRUCTURE LAYER
+// =============================================================================
+
+export { executeImageToVideo, hasImageToVideoSupport } from "./infrastructure";
+export type { ExecuteImageToVideoOptions } from "./infrastructure";
+
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export {
+  useImageToVideoFormState,
+  useImageToVideoGeneration,
+  useImageToVideoForm,
+} from "./presentation";
+export type {
+  UseImageToVideoFormStateOptions,
+  UseImageToVideoFormStateReturn,
+  UseImageToVideoGenerationOptions,
+  UseImageToVideoGenerationReturn,
+  UseImageToVideoFormOptions,
+  UseImageToVideoFormReturn,
+} from "./presentation";
+
+// Provider-based Feature Hook
+export { useImageToVideoFeature } from "./presentation";
+export type {
+  UseImageToVideoFeatureProps,
+  UseImageToVideoFeatureReturn,
+} from "./presentation";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export {
+  ImageToVideoAnimationStyleSelector,
+  ImageToVideoDurationSelector,
+  ImageToVideoMusicMoodSelector,
+  ImageToVideoSelectionGrid,
+  ImageToVideoGenerateButton,
+} from "./presentation";
+
+export type {
+  ImageToVideoAnimationStyleSelectorProps,
+  ImageToVideoDurationSelectorProps,
+  ImageToVideoMusicMoodSelectorProps,
+  ImageToVideoSelectionGridProps,
+  ImageToVideoSelectionGridTranslations,
+  ImageToVideoGenerateButtonProps,
+} from "./presentation";

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

@@ -0,0 +1 @@
+export * from "./services";

package/src/features/image-to-video/infrastructure/services/image-to-video-executor.ts

@@ -0,0 +1,165 @@
+/**
+ * Image-to-Video Executor
+ * Provider-agnostic image-to-video execution using active AI provider
+ * Uses progress mapper for consistent progress reporting
+ */
+
+import { providerRegistry } from "../../../../infrastructure/services";
+
+/** Map job status to progress percentage */
+const getProgressFromJobStatus = (status: string): number => {
+  switch (status.toLowerCase()) {
+    case "queued": return 10;
+    case "in_queue": return 15;
+    case "processing": return 50;
+    case "in_progress": return 60;
+    case "completed": return 100;
+    default: return 30;
+  }
+};
+import type {
+  ImageToVideoRequest,
+  ImageToVideoResult,
+  ImageToVideoInputBuilder,
+  ImageToVideoResultExtractor,
+} from "../../domain/types";
+
+declare const __DEV__: boolean;
+
+export interface ExecuteImageToVideoOptions {
+  model: string;
+  buildInput: ImageToVideoInputBuilder;
+  extractResult?: ImageToVideoResultExtractor;
+  onProgress?: (progress: number) => void;
+}
+
+function defaultExtractResult(
+  result: unknown,
+): { videoUrl?: string; thumbnailUrl?: string } | undefined {
+  if (typeof result !== "object" || result === null) return undefined;
+
+  const r = result as Record<string, unknown>;
+
+  if (typeof r.video === "string") {
+    return { videoUrl: r.video };
+  }
+
+  if (r.video && typeof r.video === "object") {
+    const video = r.video as Record<string, unknown>;
+    if (typeof video.url === "string") {
+      return {
+        videoUrl: video.url,
+        thumbnailUrl:
+          typeof r.thumbnail === "string" ? r.thumbnail : undefined,
+      };
+    }
+  }
+
+  return undefined;
+}
+
+export async function executeImageToVideo(
+  request: ImageToVideoRequest,
+  options: ExecuteImageToVideoOptions,
+): Promise<ImageToVideoResult> {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+     
+    console.log("[ImageToVideoExecutor] executeImageToVideo() called");
+  }
+
+  const provider = providerRegistry.getActiveProvider();
+
+  if (!provider) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+       
+      console.error("[ImageToVideoExecutor] No AI provider configured");
+    }
+    return { success: false, error: "No AI provider configured" };
+  }
+
+  if (!provider.isInitialized()) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+       
+      console.error("[ImageToVideoExecutor] AI provider not initialized");
+    }
+    return { success: false, error: "AI provider not initialized" };
+  }
+
+  if (!request.imageBase64) {
+    return { success: false, error: "Image base64 is required" };
+  }
+
+  const { model, buildInput, extractResult, onProgress } = options;
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+     
+    console.log(`[ImageToVideoExecutor] Provider: ${provider.providerId}, Model: ${model}`);
+  }
+
+  try {
+    onProgress?.(5);
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+       
+      console.log("[ImageToVideoExecutor] Starting provider.subscribe()...");
+    }
+
+    // Build input directly - let buildInput handle base64 format
+    const input = buildInput(request.imageBase64, request.motionPrompt, request.options);
+
+    // Use subscribe for video generation (long-running operation with queue)
+    // subscribe provides progress updates unlike run()
+    const result = await provider.subscribe(model, input, {
+      onQueueUpdate: (status) => {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+           
+          console.log("[ImageToVideoExecutor] Queue status:", status.status, "position:", status.queuePosition);
+        }
+        // Map provider status to progress using centralized mapper
+        const progress = getProgressFromJobStatus(status.status);
+        onProgress?.(progress);
+      },
+      timeoutMs: 300000, // 5 minutes timeout for video generation
+    });
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+       
+      console.log("[ImageToVideoExecutor] Subscribe resolved, result keys:", result ? Object.keys(result as object) : "null");
+    }
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+       
+      console.log("[ImageToVideoExecutor] provider.subscribe() completed");
+    }
+
+    const extractor = extractResult || defaultExtractResult;
+    const extracted = extractor(result);
+    onProgress?.(100);
+
+    if (!extracted?.videoUrl) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+         
+        console.error("[ImageToVideoExecutor] No video URL in response");
+      }
+      return { success: false, error: "No video in response" };
+    }
+
+    return {
+      success: true,
+      videoUrl: extracted.videoUrl,
+      thumbnailUrl: extracted.thumbnailUrl,
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+       
+      console.error("[ImageToVideoExecutor] Error:", message);
+    }
+    return { success: false, error: message };
+  }
+}
+
+export function hasImageToVideoSupport(): boolean {
+  const provider = providerRegistry.getActiveProvider();
+  return provider !== null && provider.isInitialized();
+}

package/src/features/image-to-video/infrastructure/services/index.ts

@@ -0,0 +1,5 @@
+export {
+  executeImageToVideo,
+  hasImageToVideoSupport,
+} from "./image-to-video-executor";
+export type { ExecuteImageToVideoOptions } from "./image-to-video-executor";

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

@@ -0,0 +1,52 @@
+/**
+ * AddMoreCard Component
+ * Displays "Add More" button in the image grid
+ */
+
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import {
+  AtomicIcon,
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ImageSelectionGridStyles } from "./ImageSelectionGrid.styles";
+
+interface AddMoreCardProps {
+  styles: ImageSelectionGridStyles;
+  addMoreText: string;
+  onPress: () => void;
+}
+
+export function AddMoreCard({
+  styles,
+  addMoreText,
+  onPress,
+}: AddMoreCardProps) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.addMoreCard,
+        {
+          backgroundColor: tokens.colors.surface,
+          borderColor: tokens.colors.borderLight,
+        },
+      ]}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <AtomicIcon name="add" size="lg" color="primary" />
+      <AtomicText
+        type="labelSmall"
+        style={[
+          styles.addMoreText,
+          { color: tokens.colors.primary },
+        ]}
+      >
+        {addMoreText}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+}