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

package/package.json

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