@umituz/react-native-ai-generation-content 1.17.180 → 1.17.182

package/package.json

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

package/src/features/ai-hug/presentation/components/AIHugFeature.tsx

@@ -10,6 +10,7 @@ import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
+import { GenerationProgressModal } from "../../../../presentation/components/GenerationProgressModal";
 import { useAIHugFeature } from "../hooks";
 import type {
   AIHugTranslations,
@@ -93,6 +94,21 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
     );
   }
 
+  const defaultModal = (
+    <GenerationProgressModal
+      visible={feature.isProcessing}
+      progress={feature.progress}
+      icon="sparkles"
+      title={translations.modalTitle || "Creating your video"}
+      message={translations.modalMessage || "AI is working its magic..."}
+      hint={translations.modalHint || "This may take a moment"}
+      backgroundHint={translations.modalBackgroundHint || "Continue in background"}
+      onClose={() => {
+        // Allow continuing in background - just close modal
+      }}
+    />
+  );
+
   return (
     <>
       <ScrollView
@@ -123,7 +139,9 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
         </AIGenerationForm>
       </ScrollView>
 
-      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
+      {renderProcessingModal
+        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
+        : defaultModal}
     </>
   );
 };

package/src/features/ai-kiss/presentation/components/AIKissFeature.tsx

@@ -10,6 +10,7 @@ import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
 import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
 import { AIGenerationResult } from "../../../../presentation/components/display/AIGenerationResult";
+import { GenerationProgressModal } from "../../../../presentation/components/GenerationProgressModal";
 import { useAIKissFeature } from "../hooks";
 import type {
   AIKissTranslations,
@@ -87,6 +88,21 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
     );
   }
 
+  const defaultModal = (
+    <GenerationProgressModal
+      visible={feature.isProcessing}
+      progress={feature.progress}
+      icon="sparkles"
+      title={translations.modalTitle || "Creating your video"}
+      message={translations.modalMessage || "AI is working its magic..."}
+      hint={translations.modalHint || "This may take a moment"}
+      backgroundHint={translations.modalBackgroundHint || "Continue in background"}
+      onClose={() => {
+        // Allow continuing in background - just close modal
+      }}
+    />
+  );
+
   return (
     <>
       <ScrollView
@@ -117,7 +133,9 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
         </AIGenerationForm>
       </ScrollView>
 
-      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
+      {renderProcessingModal
+        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
+        : defaultModal}
     </>
   );
 };

package/src/features/shared/dual-image-video/domain/types/dual-image-video.types.ts

@@ -59,6 +59,14 @@ export interface DualImageVideoTranslations {
   successText: string;
   saveButtonText: string;
   tryAnotherText: string;
+  /** Modal title shown during processing */
+  modalTitle?: string;
+  /** Modal message shown during processing */
+  modalMessage?: string;
+  /** Modal hint/tip shown during processing */
+  modalHint?: string;
+  /** "Continue in background" text */
+  modalBackgroundHint?: string;
 }
 
 export interface UseDualImageVideoFeatureProps {

package/src/infrastructure/services/video-feature-executor.service.ts

@@ -96,6 +96,7 @@ function defaultExtractVideoResult(result: unknown): string | undefined {
 
 /**
  * Execute any video feature using the active provider
+ * Uses subscribe for video features to handle long-running generation with progress updates
  */
 export async function executeVideoFeature(
   featureType: VideoFeatureType,
@@ -117,12 +118,11 @@ export async function executeVideoFeature(
   const model = provider.getVideoFeatureModel(featureType);
 
   if (__DEV__) {
-     
     console.log(`[Video:${featureType}] Provider: ${provider.providerId}, Model: ${model}`);
   }
 
   try {
-    onProgress?.(10);
+    onProgress?.(5);
 
     const inputData: VideoFeatureInputData = {
       sourceImageBase64: cleanBase64(request.sourceImageBase64),
@@ -131,13 +131,27 @@ export async function executeVideoFeature(
       options: request.options,
     };
 
-    onProgress?.(30);
+    onProgress?.(10);
 
     const input = provider.buildVideoFeatureInput(featureType, inputData);
 
-    onProgress?.(40);
-
-    const result = await provider.run(model, input);
+    onProgress?.(15);
+
+    // Use subscribe for video features - provides queue updates and handles long-running tasks
+    const result = await provider.subscribe(model, input, {
+      timeoutMs: 300000, // 5 minutes timeout for video generation
+      onQueueUpdate: (status) => {
+        if (__DEV__) {
+          console.log(`[Video:${featureType}] Queue update:`, status.status);
+        }
+        // Map queue status to progress percentage
+        if (status.status === "IN_QUEUE") {
+          onProgress?.(20);
+        } else if (status.status === "IN_PROGRESS") {
+          onProgress?.(50);
+        }
+      },
+    });
 
     onProgress?.(90);
 
@@ -147,6 +161,9 @@ export async function executeVideoFeature(
     onProgress?.(100);
 
     if (!videoUrl) {
+      if (__DEV__) {
+        console.log(`[Video:${featureType}] No video URL found in result:`, JSON.stringify(result, null, 2));
+      }
       return { success: false, error: "No video in response" };
     }
 
@@ -156,10 +173,21 @@ export async function executeVideoFeature(
       requestId: (result as { requestId?: string })?.requestId,
     };
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
+    // Extract detailed error message from FAL API errors
+    let message = "Processing failed";
+    if (error instanceof Error) {
+      message = error.message;
+    } else if (typeof error === "object" && error !== null) {
+      const errObj = error as Record<string, unknown>;
+      if (errObj.detail) {
+        message = JSON.stringify(errObj.detail);
+      } else if (errObj.message) {
+        message = String(errObj.message);
+      }
+    }
+
     if (__DEV__) {
-       
-      console.error(`[Video:${featureType}] Error:`, message);
+      console.error(`[Video:${featureType}] Error:`, message, error);
     }
     return { success: false, error: message };
   }