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

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>
+  );
+}

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

@@ -0,0 +1,135 @@
+/**
+ * Animation Style Selector Component
+ * Generic component for animation style selection
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { AnimationStyle, AnimationStyleId } from "../../domain/types";
+
+export interface AnimationStyleSelectorProps {
+  styles: AnimationStyle[];
+  selectedStyle: AnimationStyleId;
+  onStyleSelect: (styleId: AnimationStyleId) => void;
+  label: string;
+}
+
+export const AnimationStyleSelector: React.FC<AnimationStyleSelectorProps> = ({
+  styles,
+  selectedStyle,
+  onStyleSelect,
+  label,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[componentStyles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      {styles.map((style) => {
+        const isSelected = selectedStyle === style.id;
+        return (
+          <TouchableOpacity
+            key={style.id}
+            style={[
+              componentStyles.card,
+              {
+                backgroundColor: isSelected
+                  ? tokens.colors.primary + "20"
+                  : tokens.colors.surface,
+                borderColor: isSelected
+                  ? tokens.colors.primary
+                  : tokens.colors.borderLight,
+              },
+            ]}
+            onPress={() => onStyleSelect(style.id)}
+            activeOpacity={0.7}
+          >
+            <View style={componentStyles.cardContent}>
+              <View
+                style={[
+                  componentStyles.iconContainer,
+                  {
+                    backgroundColor: isSelected
+                      ? tokens.colors.primary
+                      : tokens.colors.primary + "20",
+                  },
+                ]}
+              >
+                <AtomicIcon
+                  name={style.icon as never}
+                  size="md"
+                  color={isSelected ? "onSurface" : "primary"}
+                />
+              </View>
+              <View style={componentStyles.textContainer}>
+                <AtomicText
+                  type="bodyMedium"
+                  style={[
+                    componentStyles.styleName,
+                    { color: tokens.colors.textPrimary },
+                  ]}
+                >
+                  {style.name}
+                </AtomicText>
+                <AtomicText
+                  type="labelSmall"
+                  style={{ color: tokens.colors.textSecondary }}
+                >
+                  {style.description}
+                </AtomicText>
+              </View>
+              {isSelected && (
+                <AtomicIcon name="checkmark-outline" size="md" color="primary" />
+              )}
+            </View>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  card: {
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 2,
+    marginBottom: 12,
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  textContainer: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  styleName: {
+    fontWeight: "600",
+  },
+});

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

@@ -0,0 +1,110 @@
+/**
+ * Duration Selector Component
+ * Generic component for video duration selection
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { VideoDuration, DurationOption } from "../../domain/types";
+
+export interface DurationSelectorProps {
+  options: DurationOption[];
+  selectedDuration: VideoDuration;
+  onDurationSelect: (duration: VideoDuration) => void;
+  label: string;
+  imageCount: number;
+  totalVideoLabel: string;
+}
+
+export const DurationSelector: React.FC<DurationSelectorProps> = ({
+  options,
+  selectedDuration,
+  onDurationSelect,
+  label,
+  imageCount,
+  totalVideoLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={componentStyles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[componentStyles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {label}
+      </AtomicText>
+      <View style={componentStyles.grid}>
+        {options.map((option) => {
+          const isSelected = selectedDuration === option.value;
+          return (
+            <TouchableOpacity
+              key={option.value}
+              style={[
+                componentStyles.button,
+                {
+                  backgroundColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.surface,
+                  borderColor: isSelected
+                    ? tokens.colors.primary
+                    : tokens.colors.borderLight,
+                },
+              ]}
+              onPress={() => onDurationSelect(option.value)}
+              activeOpacity={0.7}
+            >
+              <AtomicText
+                type="bodyMedium"
+                style={{
+                  color: isSelected
+                    ? tokens.colors.textInverse
+                    : tokens.colors.textPrimary,
+                  fontWeight: isSelected ? "600" : "400",
+                }}
+              >
+                {option.label ?? `${option.value}s`}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+      <AtomicText
+        type="labelSmall"
+        style={[componentStyles.hint, { color: tokens.colors.textSecondary }]}
+      >
+        {totalVideoLabel.replace("{duration}", String(imageCount * selectedDuration))}
+      </AtomicText>
+    </View>
+  );
+};
+
+const componentStyles = StyleSheet.create({
+  section: {
+    padding: 16,
+    marginBottom: 8,
+  },
+  label: {
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  grid: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  hint: {
+    marginTop: 8,
+  },
+});

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

@@ -0,0 +1,69 @@
+/**
+ * EmptyGridState Component
+ * Displays empty state when no images are selected
+ */
+
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ImageSelectionGridStyles } from "./ImageSelectionGrid.styles";
+import type { ImageSelectionGridTranslations } from "./ImageSelectionGrid.types";
+
+interface EmptyGridStateProps {
+  styles: ImageSelectionGridStyles;
+  maxImages: number;
+  translations: ImageSelectionGridTranslations;
+  onSelectImages: () => void;
+}
+
+export function EmptyGridState({
+  styles,
+  maxImages,
+  translations,
+  onSelectImages,
+}: EmptyGridStateProps) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.section}>
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, { color: tokens.colors.textPrimary }]}
+      >
+        {translations.selectedImages} (0/{maxImages})
+      </AtomicText>
+      <TouchableOpacity
+        style={[
+          styles.uploadBox,
+          {
+            backgroundColor: tokens.colors.surface,
+            borderColor: tokens.colors.borderLight,
+          },
+        ]}
+        onPress={onSelectImages}
+        activeOpacity={0.7}
+      >
+        <AtomicIcon name="cloud-upload-outline" size="xl" color="primary" />
+        <AtomicText
+          type="bodyMedium"
+          style={[
+            styles.uploadText,
+            { color: tokens.colors.primary },
+          ]}
+        >
+          {translations.selectImages}
+        </AtomicText>
+        <AtomicText
+          type="labelSmall"
+          style={{ color: tokens.colors.textSecondary }}
+        >
+          {translations.chooseUpTo.replace("{max}", String(maxImages))}
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+}

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

@@ -0,0 +1,64 @@
+/**
+ * GridImageItem Component
+ * Displays a single image in the grid with remove button and badge
+ */
+
+import React from "react";
+import { View, TouchableOpacity, Image } from "react-native";
+import {
+  AtomicIcon,
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import type { ImageSelectionGridStyles } from "./ImageSelectionGrid.styles";
+
+interface GridImageItemProps {
+  styles: ImageSelectionGridStyles;
+  uri: string;
+  index: number;
+  onRemove: () => void;
+}
+
+export function GridImageItem({
+  styles,
+  uri,
+  index,
+  onRemove,
+}: GridImageItemProps) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.imageCard}>
+      <Image
+        source={{ uri }}
+        style={styles.imagePreview}
+        resizeMode="cover"
+      />
+      <TouchableOpacity
+        style={[
+          styles.removeButton,
+          { backgroundColor: tokens.colors.error },
+        ]}
+        onPress={onRemove}
+      >
+        <AtomicIcon name="close-circle" size="sm" color="onSurface" />
+      </TouchableOpacity>
+      <View
+        style={[
+          styles.imageBadge,
+          { backgroundColor: tokens.colors.primary },
+        ]}
+      >
+        <AtomicText
+          type="labelSmall"
+          style={[
+            styles.badgeText,
+            { color: tokens.colors.textInverse },
+          ]}
+        >
+          {index + 1}
+        </AtomicText>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,84 @@
+/**
+ * ImageSelectionGrid Styles
+ */
+
+import { StyleSheet } from "react-native";
+import type { DesignTokens } from "@umituz/react-native-design-system";
+
+export function createImageSelectionGridStyles(_tokens: DesignTokens) {
+  return StyleSheet.create({
+    section: {
+      padding: 16,
+      marginBottom: 8,
+    },
+    label: {
+      fontWeight: "600",
+      marginBottom: 12,
+    },
+    uploadBox: {
+      padding: 48,
+      borderRadius: 16,
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 2,
+      borderStyle: "dashed",
+    },
+    uploadText: {
+      fontWeight: "600",
+      marginTop: 12,
+    },
+    scroll: {
+      marginHorizontal: -16,
+      paddingHorizontal: 16,
+    },
+    imageCard: {
+      width: 120,
+      height: 120,
+      borderRadius: 12,
+      marginRight: 12,
+      position: "relative",
+    },
+    imagePreview: {
+      width: "100%",
+      height: "100%",
+      borderRadius: 12,
+    },
+    removeButton: {
+      position: "absolute",
+      top: 6,
+      right: 6,
+      width: 24,
+      height: 24,
+      borderRadius: 12,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    imageBadge: {
+      position: "absolute",
+      bottom: 6,
+      left: 6,
+      width: 24,
+      height: 24,
+      borderRadius: 12,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    badgeText: {
+      fontSize: 10,
+    },
+    addMoreCard: {
+      width: 120,
+      height: 120,
+      borderRadius: 12,
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 2,
+      borderStyle: "dashed",
+    },
+    addMoreText: {
+      marginTop: 4,
+    },
+  });
+}
+
+export type ImageSelectionGridStyles = ReturnType<typeof createImageSelectionGridStyles>;