@umituz/react-native-ai-generation-content 1.17.110 → 1.17.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.110",
+  "version": "1.17.113",
   "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

@@ -12,6 +12,11 @@ export class CreationsWriter {
     constructor(private readonly pathResolver: FirestorePathResolver) { }
 
     async create(userId: string, creation: Creation): Promise<void> {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+            // eslint-disable-next-line no-console
+            console.log("[CreationsWriter] create() start", { userId, creationId: creation.id });
+        }
+
         const docRef = this.pathResolver.getDocRef(userId, creation.id);
         if (!docRef) throw new Error("Firestore not initialized");
 
@@ -23,9 +28,23 @@ export class CreationsWriter {
             metadata: creation.metadata || {},
             isShared: creation.isShared || false,
             isFavorite: creation.isFavorite || false,
+            status: creation.status,
+            output: creation.output,
         };
 
-        await setDoc(docRef, data);
+        try {
+            await setDoc(docRef, data);
+            if (typeof __DEV__ !== "undefined" && __DEV__) {
+                // eslint-disable-next-line no-console
+                console.log("[CreationsWriter] create() success", { creationId: creation.id });
+            }
+        } catch (error) {
+            if (typeof __DEV__ !== "undefined" && __DEV__) {
+                // eslint-disable-next-line no-console
+                console.error("[CreationsWriter] create() error", error);
+            }
+            throw error;
+        }
     }
 
     async update(
@@ -59,6 +78,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/CreationVideoPreview.tsx

@@ -40,7 +40,7 @@ function isVideoUrl(url?: string | null): boolean {
 
 export function CreationVideoPreview({
   thumbnailUrl,
-  videoUrl,
+  videoUrl: _videoUrl,
   status = "completed",
   aspectRatio = 16 / 9,
   height,

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/infrastructure/services/text-to-video-executor.ts

@@ -49,13 +49,26 @@ export async function executeTextToVideo(
   request: TextToVideoRequest,
   options: ExecuteTextToVideoOptions,
 ): Promise<TextToVideoResult> {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    // eslint-disable-next-line no-console
+    console.log("[TextToVideoExecutor] executeTextToVideo() called");
+  }
+
   const provider = providerRegistry.getActiveProvider();
 
   if (!provider) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.error("[TextToVideoExecutor] No AI provider configured");
+    }
     return { success: false, error: "No AI provider configured" };
   }
 
   if (!provider.isInitialized()) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.error("[TextToVideoExecutor] AI provider not initialized");
+    }
     return { success: false, error: "AI provider not initialized" };
   }
 
@@ -65,27 +78,44 @@ export async function executeTextToVideo(
 
   const { model, buildInput, extractResult, onProgress } = options;
 
-  if (__DEV__) {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
     // eslint-disable-next-line no-console
-    console.log(`[TextToVideo] Provider: ${provider.providerId}, Model: ${model}`);
+    console.log(`[TextToVideoExecutor] Provider: ${provider.providerId}, Model: ${model}`);
   }
 
   try {
     onProgress?.(5);
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[TextToVideoExecutor] Starting provider.run()...");
+    }
 
     const input = buildInput(request.prompt, request.options);
 
     const result = await provider.run(model, input, {
       onProgress: (progress) => {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          // eslint-disable-next-line no-console
+          console.log("[TextToVideoExecutor] Progress:", progress);
+        }
         onProgress?.(progress);
       },
     });
 
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[TextToVideoExecutor] provider.run() completed", result);
+    }
+
     const extractor = extractResult || defaultExtractResult;
     const extracted = extractor(result);
     onProgress?.(100);
 
     if (!extracted?.videoUrl) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        // eslint-disable-next-line no-console
+        console.error("[TextToVideoExecutor] No video URL in response");
+      }
       return { success: false, error: "No video in response" };
     }
 
@@ -96,9 +126,9 @@ export async function executeTextToVideo(
     };
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
-    if (__DEV__) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
       // eslint-disable-next-line no-console
-      console.error("[TextToVideo] Error:", message);
+      console.error("[TextToVideoExecutor] Error:", message);
     }
     return { success: false, error: message };
   }

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,59 +136,95 @@ 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);
       }
 
-      const result = await executeTextToVideo(
-        { prompt, userId, options },
-        {
-          model: config.model,
-          buildInput,
-          extractResult,
-          onProgress: (progress) => {
-            setState((prev) => ({ ...prev, progress }));
-            callbacks.onProgress?.(progress);
-          },
-        },
-      );
+      // Create "processing" creation at start (fire-and-forget to not block generation)
+      if (callbacks.onGenerationStart) {
+        callbacks.onGenerationStart({
+          creationId,
+          type: "text-to-video",
+          prompt,
+          metadata: options as Record<string, unknown> | undefined,
+        }).catch((err) => {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            // eslint-disable-next-line no-console
+            console.warn("[TextToVideoFeature] onGenerationStart failed:", err);
+          }
+        });
+      }
 
-      if (result.success && result.videoUrl) {
-        setState((prev) => ({
-          ...prev,
-          videoUrl: result.videoUrl ?? null,
-          thumbnailUrl: result.thumbnailUrl ?? null,
-          isProcessing: false,
-          progress: 100,
-        }));
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        // eslint-disable-next-line no-console
+        console.log("[TextToVideoFeature] Starting executeTextToVideo...");
+      }
 
-        // Deduct credits after successful generation
-        if (callbacks.onCreditDeduct) {
-          await callbacks.onCreditDeduct(config.creditCost);
+      try {
+        const result = await executeTextToVideo(
+          { prompt, userId, options },
+          {
+            model: config.model,
+            buildInput,
+            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,
+          }));
+
+          // Deduct credits after successful generation
+          if (callbacks.onCreditDeduct) {
+            await callbacks.onCreditDeduct(config.creditCost);
+          }
+
+          // Update creation to completed after successful generation
+          if (callbacks.onCreationSave) {
+            await callbacks.onCreationSave({
+              creationId,
+              type: "text-to-video",
+              videoUrl: result.videoUrl,
+              thumbnailUrl: result.thumbnailUrl,
+              prompt,
+              metadata: options as Record<string, unknown> | undefined,
+            });
+          }
+
+          callbacks.onGenerate?.(result);
+        } else {
+          const error = result.error || "Generation failed";
+          setState((prev) => ({
+            ...prev,
+            isProcessing: false,
+            error,
+          }));
+          callbacks.onError?.(error);
         }
 
-        // Save creation after successful generation
-        if (callbacks.onCreationSave) {
-          await callbacks.onCreationSave({
-            type: "text-to-video",
-            videoUrl: result.videoUrl,
-            thumbnailUrl: result.thumbnailUrl,
-            prompt,
-            metadata: options as Record<string, unknown> | undefined,
-          });
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : String(err);
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          // eslint-disable-next-line no-console
+          console.error("[TextToVideoFeature] Generation error:", errorMessage);
         }
-
-        callbacks.onGenerate?.(result);
-      } else {
-        const error = result.error || "Generation failed";
         setState((prev) => ({
           ...prev,
           isProcessing: false,
-          error,
+          error: errorMessage,
         }));
-        callbacks.onError?.(error);
+        callbacks.onError?.(errorMessage);
+        return { success: false, error: errorMessage };
       }
-
-      return result;
     },
     [userId, config.model, buildInput, extractResult, callbacks],
   );

package/src/presentation/components/AIGenerationForm.tsx

@@ -37,6 +37,7 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   hideGenerateButton,
   progress,
   progressIcon,
+  isProgressModalVisible,
   onCloseProgressModal,
   generateButtonProps,
   showAdvanced,
@@ -159,12 +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,8 @@ 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;
 

package/src/presentation/components/GenerationProgressContent.tsx

@@ -23,8 +23,8 @@ export interface GenerationProgressContentProps {
   readonly onDismiss?: () => void;
   /** Close button in top-right corner for background generation */
   readonly onClose?: () => void;
-  /** Close button label (default: "Continue in background") */
-  readonly closeLabel?: string;
+  /** Hint text shown near close button (e.g., "Continue in background") */
+  readonly backgroundHint?: string;
   readonly backgroundColor?: string;
   readonly textColor?: string;
   readonly hintColor?: string;
@@ -44,7 +44,7 @@ export const GenerationProgressContent: React.FC<
   dismissLabel,
   onDismiss,
   onClose,
-  closeLabel,
+  backgroundHint,
   backgroundColor,
   textColor,
   hintColor,
@@ -119,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={[
@@ -178,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

@@ -46,7 +46,7 @@ export const GenerationProgressModal: React.FC<
   dismissLabel,
   onDismiss,
   onClose,
-  closeLabel,
+  backgroundHint,
   modalBackgroundColor,
   textColor,
   hintColor,
@@ -82,7 +82,7 @@ export const GenerationProgressModal: React.FC<
       dismissLabel={dismissLabel}
       onDismiss={onDismiss}
       onClose={onClose}
-      closeLabel={closeLabel}
+      backgroundHint={backgroundHint}
       backgroundColor={modalBackgroundColor || tokens.colors.surface}
       textColor={textColor || tokens.colors.textPrimary}
       hintColor={hintColor || tokens.colors.textTertiary}