@umituz/react-native-ai-generation-content 1.17.109 → 1.17.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.109",
+  "version": "1.17.112",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/creations/infrastructure/repositories/CreationsWriter.ts

@@ -23,6 +23,8 @@ export class CreationsWriter {
             metadata: creation.metadata || {},
             isShared: creation.isShared || false,
             isFavorite: creation.isFavorite || false,
+            status: creation.status,
+            output: creation.output,
         };
 
         await setDoc(docRef, data);
@@ -59,6 +61,12 @@ export class CreationsWriter {
             if (updates.prompt !== undefined) {
                 updateData.prompt = updates.prompt;
             }
+            if (updates.status !== undefined) {
+                updateData.status = updates.status;
+            }
+            if (updates.output !== undefined) {
+                updateData.output = updates.output;
+            }
 
             await updateDoc(docRef, updateData);
             return true;

package/src/domains/creations/presentation/components/CreationImagePreview.tsx

@@ -0,0 +1,124 @@
+/**
+ * CreationImagePreview Component
+ * Displays image preview with loading/placeholder states
+ */
+
+import React, { useMemo, useState } from "react";
+import { View, StyleSheet, Image, ImageErrorEventData, NativeSyntheticEvent } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicIcon,
+  AtomicSpinner,
+} from "@umituz/react-native-design-system";
+import type { CreationStatus, CreationTypeId } from "../../domain/types";
+import { isInProgress, getTypeIcon } from "../../domain/utils";
+
+export interface CreationImagePreviewProps {
+  /** Preview image URL */
+  readonly uri?: string | null;
+  /** Creation status */
+  readonly status?: CreationStatus;
+  /** Creation type for placeholder icon */
+  readonly type?: CreationTypeId;
+  /** Aspect ratio (default: 16/9) */
+  readonly aspectRatio?: number;
+  /** Custom height (overrides aspectRatio) */
+  readonly height?: number;
+  /** Show loading indicator when in progress */
+  readonly showLoadingIndicator?: boolean;
+}
+
+export function CreationImagePreview({
+  uri,
+  status = "completed",
+  type = "text-to-image",
+  aspectRatio = 16 / 9,
+  height,
+  showLoadingIndicator = true,
+}: CreationImagePreviewProps) {
+  const tokens = useAppDesignTokens();
+  const inProgress = isInProgress(status);
+  const typeIcon = getTypeIcon(type);
+  const [imageError, setImageError] = useState(false);
+
+  const hasPreview = !!uri && !inProgress && !imageError;
+
+  const handleImageError = (_error: NativeSyntheticEvent<ImageErrorEventData>) => {
+    setImageError(true);
+  };
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          width: "100%",
+          aspectRatio: height ? undefined : aspectRatio,
+          height: height,
+          backgroundColor: tokens.colors.backgroundSecondary,
+          position: "relative",
+          overflow: "hidden",
+        },
+        image: {
+          width: "100%",
+          height: "100%",
+        },
+        placeholder: {
+          width: "100%",
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        loadingContainer: {
+          width: "100%",
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        loadingIcon: {
+          width: 64,
+          height: 64,
+          borderRadius: 32,
+          backgroundColor: tokens.colors.primary + "20",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+      }),
+    [tokens, aspectRatio, height]
+  );
+
+  // Show loading state
+  if (inProgress && showLoadingIndicator) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.loadingContainer}>
+          <View style={styles.loadingIcon}>
+            <AtomicSpinner size="lg" color="primary" />
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  // Show image preview
+  if (hasPreview) {
+    return (
+      <View style={styles.container}>
+        <Image
+          source={{ uri }}
+          style={styles.image}
+          resizeMode="cover"
+          onError={handleImageError}
+        />
+      </View>
+    );
+  }
+
+  // Show placeholder
+  return (
+    <View style={styles.container}>
+      <View style={styles.placeholder}>
+        <AtomicIcon name={typeIcon} color="secondary" size="xl" />
+      </View>
+    </View>
+  );
+}

package/src/domains/creations/presentation/components/CreationPreview.tsx

@@ -1,26 +1,31 @@
 /**
  * CreationPreview Component
- * Displays creation preview image with loading/placeholder states
+ * Smart wrapper that delegates to CreationImagePreview or CreationVideoPreview
+ * based on creation type
  */
 
-import React, { useMemo } from "react";
-import { View, StyleSheet, Image } from "react-native";
-import {
-  useAppDesignTokens,
-  AtomicIcon,
-  AtomicSpinner,
-} from "@umituz/react-native-design-system";
+import React from "react";
 import type { CreationStatus, CreationTypeId } from "../../domain/types";
-import { isInProgress } from "../../domain/utils";
-import { getTypeIcon } from "../../domain/utils";
+import { CreationImagePreview } from "./CreationImagePreview";
+import { CreationVideoPreview } from "./CreationVideoPreview";
+
+/** Video creation types */
+const VIDEO_TYPES: CreationTypeId[] = ["text-to-video", "image-to-video"];
+
+/** Check if creation type is a video type */
+function isVideoType(type?: CreationTypeId | string): boolean {
+  return VIDEO_TYPES.includes(type as CreationTypeId);
+}
 
 interface CreationPreviewProps {
-  /** Preview image URL */
+  /** Preview image/thumbnail URL */
   readonly uri?: string | null;
+  /** Thumbnail URL for videos (optional, if different from uri) */
+  readonly thumbnailUrl?: string | null;
   /** Creation status */
   readonly status?: CreationStatus;
-  /** Creation type for placeholder icon */
-  readonly type?: CreationTypeId;
+  /** Creation type for determining preview type */
+  readonly type?: CreationTypeId | string;
   /** Aspect ratio (default: 16/9) */
   readonly aspectRatio?: number;
   /** Custom height (overrides aspectRatio) */
@@ -31,88 +36,37 @@ interface CreationPreviewProps {
 
 export function CreationPreview({
   uri,
+  thumbnailUrl,
   status = "completed",
   type = "text-to-image",
   aspectRatio = 16 / 9,
   height,
   showLoadingIndicator = true,
 }: CreationPreviewProps) {
-  const tokens = useAppDesignTokens();
-  const inProgress = isInProgress(status);
-  const typeIcon = getTypeIcon(type);
-  const hasPreview = !!uri && !inProgress;
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          width: "100%",
-          aspectRatio: height ? undefined : aspectRatio,
-          height: height,
-          backgroundColor: tokens.colors.backgroundSecondary,
-          position: "relative",
-          overflow: "hidden",
-        },
-        image: {
-          width: "100%",
-          height: "100%",
-        },
-        placeholder: {
-          width: "100%",
-          height: "100%",
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        loadingContainer: {
-          width: "100%",
-          height: "100%",
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        loadingIcon: {
-          width: 64,
-          height: 64,
-          borderRadius: 32,
-          backgroundColor: tokens.colors.primary + "20",
-          justifyContent: "center",
-          alignItems: "center",
-        },
-      }),
-    [tokens, aspectRatio, height]
-  );
-
-  // Show loading state
-  if (inProgress && showLoadingIndicator) {
-    return (
-      <View style={styles.container}>
-        <View style={styles.loadingContainer}>
-          <View style={styles.loadingIcon}>
-            <AtomicSpinner size="lg" color="primary" />
-          </View>
-        </View>
-      </View>
-    );
-  }
-
-  // Show image preview
-  if (hasPreview) {
+  // For video types, use CreationVideoPreview
+  if (isVideoType(type)) {
     return (
-      <View style={styles.container}>
-        <Image
-          source={{ uri }}
-          style={styles.image}
-          resizeMode="cover"
-        />
-      </View>
+      <CreationVideoPreview
+        thumbnailUrl={thumbnailUrl || uri}
+        videoUrl={uri}
+        status={status}
+        type={type as CreationTypeId}
+        aspectRatio={aspectRatio}
+        height={height}
+        showLoadingIndicator={showLoadingIndicator}
+      />
     );
   }
 
-  // Show placeholder
+  // For image types, use CreationImagePreview
   return (
-    <View style={styles.container}>
-      <View style={styles.placeholder}>
-        <AtomicIcon name={typeIcon} color="secondary" size="xl" />
-      </View>
-    </View>
+    <CreationImagePreview
+      uri={uri}
+      status={status}
+      type={type as CreationTypeId}
+      aspectRatio={aspectRatio}
+      height={height}
+      showLoadingIndicator={showLoadingIndicator}
+    />
   );
 }

package/src/domains/creations/presentation/components/CreationVideoPreview.tsx

@@ -0,0 +1,149 @@
+/**
+ * CreationVideoPreview Component
+ * Displays video preview with thumbnail and play icon overlay
+ */
+
+import React, { useMemo } from "react";
+import { View, StyleSheet, Image } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicIcon,
+  AtomicSpinner,
+} from "@umituz/react-native-design-system";
+import type { CreationStatus, CreationTypeId } from "../../domain/types";
+import { isInProgress } from "../../domain/utils";
+
+export interface CreationVideoPreviewProps {
+  /** Thumbnail image URL (optional) */
+  readonly thumbnailUrl?: string | null;
+  /** Video URL (for display purposes only) */
+  readonly videoUrl?: string | null;
+  /** Creation status */
+  readonly status?: CreationStatus;
+  /** Creation type for placeholder icon */
+  readonly type?: CreationTypeId;
+  /** Aspect ratio (default: 16/9) */
+  readonly aspectRatio?: number;
+  /** Custom height (overrides aspectRatio) */
+  readonly height?: number;
+  /** Show loading indicator when in progress */
+  readonly showLoadingIndicator?: boolean;
+}
+
+/** Check if URL is a video URL (mp4, mov, etc.) */
+function isVideoUrl(url?: string | null): boolean {
+  if (!url) return false;
+  const videoExtensions = [".mp4", ".mov", ".avi", ".webm", ".mkv"];
+  const lowerUrl = url.toLowerCase();
+  return videoExtensions.some((ext) => lowerUrl.includes(ext));
+}
+
+export function CreationVideoPreview({
+  thumbnailUrl,
+  videoUrl,
+  status = "completed",
+  aspectRatio = 16 / 9,
+  height,
+  showLoadingIndicator = true,
+}: CreationVideoPreviewProps) {
+  const tokens = useAppDesignTokens();
+  const inProgress = isInProgress(status);
+
+  // Only use thumbnail if it's a real image URL, not a video URL
+  const hasThumbnail = !!thumbnailUrl && !inProgress && !isVideoUrl(thumbnailUrl);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          width: "100%",
+          aspectRatio: height ? undefined : aspectRatio,
+          height: height,
+          backgroundColor: tokens.colors.backgroundSecondary,
+          position: "relative",
+          overflow: "hidden",
+        },
+        thumbnail: {
+          width: "100%",
+          height: "100%",
+        },
+        placeholder: {
+          width: "100%",
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        loadingContainer: {
+          width: "100%",
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        loadingIcon: {
+          width: 64,
+          height: 64,
+          borderRadius: 32,
+          backgroundColor: tokens.colors.primary + "20",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        playIconOverlay: {
+          ...StyleSheet.absoluteFillObject,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        playIconContainer: {
+          width: 56,
+          height: 56,
+          borderRadius: 28,
+          backgroundColor: tokens.colors.primary,
+          justifyContent: "center",
+          alignItems: "center",
+          paddingLeft: 4,
+        },
+      }),
+    [tokens, aspectRatio, height]
+  );
+
+  // Show loading state
+  if (inProgress && showLoadingIndicator) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.loadingContainer}>
+          <View style={styles.loadingIcon}>
+            <AtomicSpinner size="lg" color="primary" />
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  // Show thumbnail with play icon overlay
+  if (hasThumbnail) {
+    return (
+      <View style={styles.container}>
+        <Image
+          source={{ uri: thumbnailUrl }}
+          style={styles.thumbnail}
+          resizeMode="cover"
+        />
+        <View style={styles.playIconOverlay}>
+          <View style={styles.playIconContainer}>
+            <AtomicIcon name="play" customSize={24} color="onPrimary" />
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  // Show placeholder with play icon (no thumbnail available)
+  return (
+    <View style={styles.container}>
+      <View style={styles.placeholder}>
+        <View style={styles.playIconContainer}>
+          <AtomicIcon name="play" customSize={24} color="onPrimary" />
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/domains/creations/presentation/components/index.ts

@@ -4,6 +4,8 @@
 
 // Core Components
 export { CreationPreview } from "./CreationPreview";
+export { CreationImagePreview, type CreationImagePreviewProps } from "./CreationImagePreview";
+export { CreationVideoPreview, type CreationVideoPreviewProps } from "./CreationVideoPreview";
 export { CreationBadges } from "./CreationBadges";
 export { CreationActions, type CreationAction } from "./CreationActions";
 export {

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

@@ -27,12 +27,22 @@ export interface CreationData {
   metadata?: Record<string, unknown>;
 }
 
+export interface GenerationStartData {
+  creationId: string;
+  type: "text-to-video";
+  prompt: string;
+  metadata?: Record<string, unknown>;
+}
+
 export interface TextToVideoCallbacks {
   onCreditCheck?: (cost: number) => Promise<boolean>;
   onCreditDeduct?: (cost: number) => Promise<void>;
   onAuthCheck?: () => boolean;
   onModeration?: (prompt: string) => Promise<VideoModerationResult>;
-  onCreationSave?: (data: CreationData) => Promise<void>;
+  /** Called when generation starts - save a "processing" creation */
+  onGenerationStart?: (data: GenerationStartData) => Promise<void>;
+  /** Called when generation completes - update creation to "completed" */
+  onCreationSave?: (data: CreationData & { creationId: string }) => Promise<void>;
   onGenerate?: (result: TextToVideoResult) => void;
   onError?: (error: string) => void;
   onProgress?: (progress: number) => void;

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

@@ -35,6 +35,7 @@ export type {
   VideoModerationResult,
   ProjectData,
   CreationData,
+  GenerationStartData,
   TextToVideoCallbacks,
   TextToVideoTranslations,
 } from "./callback.types";

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

@@ -27,6 +27,7 @@ export type {
   VideoModerationResult,
   ProjectData,
   CreationData,
+  GenerationStartData,
   GenerationTabsProps,
   FrameSelectorProps,
   OptionsPanelProps,

package/src/features/text-to-video/presentation/hooks/useTextToVideoFeature.ts

@@ -124,6 +124,9 @@ export function useTextToVideoFeature(
 
   const executeGeneration = useCallback(
     async (prompt: string, options?: TextToVideoOptions): Promise<TextToVideoResult> => {
+      // Generate unique creation ID for tracking
+      const creationId = `text-to-video_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+
       setState((prev) => ({
         ...prev,
         isProcessing: true,
@@ -133,7 +136,17 @@ export function useTextToVideoFeature(
 
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         // eslint-disable-next-line no-console
-        console.log("[TextToVideoFeature] Starting generation with prompt:", prompt);
+        console.log("[TextToVideoFeature] Starting generation with prompt:", prompt, "creationId:", creationId);
+      }
+
+      // Create "processing" creation at start
+      if (callbacks.onGenerationStart) {
+        await callbacks.onGenerationStart({
+          creationId,
+          type: "text-to-video",
+          prompt,
+          metadata: options as Record<string, unknown> | undefined,
+        });
       }
 
       const result = await executeTextToVideo(
@@ -163,9 +176,10 @@ export function useTextToVideoFeature(
           await callbacks.onCreditDeduct(config.creditCost);
         }
 
-        // Save creation after successful generation
+        // Update creation to completed after successful generation
         if (callbacks.onCreationSave) {
           await callbacks.onCreationSave({
+            creationId,
             type: "text-to-video",
             videoUrl: result.videoUrl,
             thumbnailUrl: result.thumbnailUrl,

package/src/presentation/components/AIGenerationForm.tsx

@@ -37,6 +37,8 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   hideGenerateButton,
   progress,
   progressIcon,
+  isProgressModalVisible,
+  onCloseProgressModal,
   generateButtonProps,
   showAdvanced,
   onAdvancedToggle,
@@ -158,11 +160,13 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
 
       {/* MANDATORY: Progress Modal shows automatically when isGenerating */}
       <GenerationProgressModal
-        visible={isGenerating}
+        visible={isProgressModalVisible ?? isGenerating}
         progress={progress ?? 0}
         icon={progressIcon || "sparkles-outline"}
         title={translations.progressTitle || translations.generatingButton}
         message={translations.progressMessage || translations.progressHint}
+        onClose={onCloseProgressModal}
+        backgroundHint={onCloseProgressModal ? translations.progressBackgroundHint : undefined}
       />
     </>
   );

package/src/presentation/components/AIGenerationForm.types.ts

@@ -18,6 +18,8 @@ export interface AIGenerationFormTranslations {
   progressTitle?: string;
   progressMessage?: string;
   progressHint?: string;
+  /** Hint for background generation (e.g., "Continue in background") */
+  progressBackgroundHint?: string;
   presetsTitle?: string;
   showAdvancedLabel?: string;
   hideAdvancedLabel?: string;
@@ -57,6 +59,10 @@ export interface AIGenerationFormProps extends PropsWithChildren {
   // Optional: Generation Progress
   progress?: number;
   progressIcon?: string;
+  /** Override modal visibility (defaults to isGenerating) */
+  isProgressModalVisible?: boolean;
+  /** Callback when user closes the progress modal (for background generation) */
+  onCloseProgressModal?: () => void;
 
   // Custom Generate Button Props
   generateButtonProps?: {

package/src/presentation/components/GenerationProgressContent.tsx

@@ -21,6 +21,10 @@ export interface GenerationProgressContentProps {
   readonly hint?: string;
   readonly dismissLabel?: string;
   readonly onDismiss?: () => void;
+  /** Close button in top-right corner for background generation */
+  readonly onClose?: () => void;
+  /** Hint text shown near close button (e.g., "Continue in background") */
+  readonly backgroundHint?: string;
   readonly backgroundColor?: string;
   readonly textColor?: string;
   readonly hintColor?: string;
@@ -39,6 +43,8 @@ export const GenerationProgressContent: React.FC<
   hint,
   dismissLabel,
   onDismiss,
+  onClose,
+  backgroundHint,
   backgroundColor,
   textColor,
   hintColor,
@@ -62,6 +68,17 @@ export const GenerationProgressContent: React.FC<
         },
       ]}
     >
+      {/* Close button in top-right corner */}
+      {onClose && (
+        <TouchableOpacity
+          style={styles.closeButton}
+          onPress={onClose}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <AtomicIcon name="close" size="md" color="secondary" />
+        </TouchableOpacity>
+      )}
+
       {icon && (
         <View style={styles.iconContainer}>
           <AtomicIcon name={icon} size="xl" color="primary" />
@@ -102,6 +119,21 @@ export const GenerationProgressContent: React.FC<
         </AtomicText>
       )}
 
+      {/* Background hint - clickable to close and continue in background */}
+      {onClose && backgroundHint && (
+        <TouchableOpacity
+          style={styles.backgroundHintButton}
+          onPress={onClose}
+        >
+          <AtomicText
+            type="bodySmall"
+            style={[styles.backgroundHintText, { color: tokens.colors.primary }]}
+          >
+            {backgroundHint}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+
       {onDismiss && (
         <TouchableOpacity
           style={[
@@ -130,6 +162,18 @@ const styles = StyleSheet.create({
     padding: 32,
     borderWidth: 1,
     alignItems: "center",
+    position: "relative",
+  },
+  closeButton: {
+    position: "absolute",
+    top: 16,
+    right: 16,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1,
   },
   iconContainer: {
     marginBottom: 20,
@@ -149,6 +193,15 @@ const styles = StyleSheet.create({
     lineHeight: 18,
     paddingHorizontal: 8,
   },
+  backgroundHintButton: {
+    marginTop: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  backgroundHintText: {
+    textAlign: "center",
+    textDecorationLine: "underline",
+  },
   dismissButton: {
     marginTop: 16,
     paddingVertical: 14,

package/src/presentation/components/GenerationProgressModal.tsx

@@ -22,6 +22,7 @@ export interface GenerationProgressRenderProps {
   readonly message?: string;
   readonly hint?: string;
   readonly onDismiss?: () => void;
+  readonly onClose?: () => void;
 }
 
 export interface GenerationProgressModalProps
@@ -44,6 +45,8 @@ export const GenerationProgressModal: React.FC<
   hint,
   dismissLabel,
   onDismiss,
+  onClose,
+  backgroundHint,
   modalBackgroundColor,
   textColor,
   hintColor,
@@ -67,6 +70,7 @@ export const GenerationProgressModal: React.FC<
       message,
       hint,
       onDismiss,
+      onClose,
     })
   ) : (
     <GenerationProgressContent
@@ -77,6 +81,8 @@ export const GenerationProgressModal: React.FC<
       hint={hint}
       dismissLabel={dismissLabel}
       onDismiss={onDismiss}
+      onClose={onClose}
+      backgroundHint={backgroundHint}
       backgroundColor={modalBackgroundColor || tokens.colors.surface}
       textColor={textColor || tokens.colors.textPrimary}
       hintColor={hintColor || tokens.colors.textTertiary}