@umituz/react-native-ai-generation-content 1.90.2 → 1.90.4

package/src/domains/generation/wizard/presentation/hooks/photo-upload/usePhotoUploadStateLogic.ts

@@ -0,0 +1,142 @@
+/**
+ * Generic Photo Upload State Hook - Core Logic
+ */
+
+import { useCallback, useRef, useEffect } from "react";
+import { useMedia, MediaQuality, MediaValidationError, MEDIA_CONSTANTS } from "@umituz/react-native-design-system/media";
+import type { UploadedImage } from "../../../../presentation/hooks/generation/useAIGenerateState";
+import type { PhotoUploadConfig, PhotoUploadError, PhotoUploadTranslations } from "./types";
+
+export function usePhotoUploadStateLogic(
+  config: PhotoUploadConfig | undefined,
+  translations: PhotoUploadTranslations,
+  initialImage: UploadedImage | undefined,
+  stepId: string | undefined,
+  onError: ((error: PhotoUploadError) => void) | undefined,
+  setImage: (image: UploadedImage | null) => void,
+) {
+  const { pickImage, isLoading } = useMedia();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  // Use refs to avoid effect re-runs on callback changes
+  const onErrorRef = useRef(onError);
+  const translationsRef = useRef(translations);
+
+  useEffect(() => {
+    onErrorRef.current = onError;
+    translationsRef.current = translations;
+  }, [onError, translations]);
+
+  const maxFileSizeMB = config?.maxFileSizeMB ?? MEDIA_CONSTANTS.MAX_IMAGE_SIZE_MB;
+
+  useEffect(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[usePhotoUploadState] Step changed, resetting image", { stepId, hasInitialImage: !!initialImage });
+    }
+    setImage(initialImage || null);
+  }, [stepId, initialImage, setImage]);
+
+  useEffect(() => {
+    // Clear any existing timeout first
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = undefined;
+    }
+
+    if (isLoading) {
+      timeoutRef.current = setTimeout(() => {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.warn("[usePhotoUploadState] Image picker timeout - possible stuck state (DEV warning only)");
+        }
+        // NOTE: Do NOT call onError here — the picker may still complete successfully.
+        // Showing a modal alert while the picker is open blocks the UI.
+      }, 30000);
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+      }
+    };
+  }, [isLoading]);
+
+  const clearImage = useCallback(() => {
+    setImage(null);
+  }, [setImage]);
+
+  const handlePickImage = useCallback(async () => {
+    try {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[usePhotoUploadState] Starting image pick");
+      }
+
+      const result = await pickImage({
+        allowsEditing: true,
+        aspect: [1, 1],
+        quality: MediaQuality.MEDIUM,
+        maxFileSizeMB,
+      });
+
+      if (result.error) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[usePhotoUploadState] Validation error", result.error);
+        }
+
+        if (result.error === MediaValidationError.FILE_TOO_LARGE) {
+          onErrorRef.current?.({
+            title: translationsRef.current.fileTooLarge,
+            message: translationsRef.current.maxFileSize.replace("{size}", maxFileSizeMB.toString()),
+          });
+        } else if (result.error === MediaValidationError.PERMISSION_DENIED) {
+          onErrorRef.current?.({
+            title: translationsRef.current.error,
+            message: translationsRef.current.permissionDenied ?? "Permission to access media library is required",
+          });
+        }
+        return;
+      }
+
+      if (result.canceled || !result.assets || result.assets.length === 0) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log("[usePhotoUploadState] Image pick canceled");
+        }
+        return;
+      }
+
+      const selectedAsset = result.assets[0];
+      if (!selectedAsset) {
+        return;
+      }
+
+      const uploadedImage: UploadedImage = {
+        uri: selectedAsset.uri,
+        previewUrl: selectedAsset.uri,
+        width: selectedAsset.width,
+        height: selectedAsset.height,
+        fileSize: selectedAsset.fileSize,
+      };
+
+      setImage(uploadedImage);
+
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        const fileSizeMB = (selectedAsset.fileSize ?? 0) / (1024 * 1024);
+        console.log("[usePhotoUploadState] Image selected", {
+          width: uploadedImage.width,
+          height: uploadedImage.height,
+          fileSizeMB: fileSizeMB.toFixed(2),
+        });
+      }
+    } catch (error) {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.error("[usePhotoUploadState] Error picking image", error);
+      }
+      onErrorRef.current?.({
+        title: translationsRef.current.error,
+        message: translationsRef.current.uploadFailed,
+      });
+    }
+  }, [pickImage, maxFileSizeMB, setImage]);
+
+  return { handlePickImage, clearImage, isLoading };
+}

package/src/domains/generation/wizard/presentation/hooks/use-video-queue-utils.ts

@@ -0,0 +1,102 @@
+/**
+ * Video Queue Generation Hook - Utility Functions
+ */
+
+import type { GenerationUrls } from "./generation-result.utils";
+
+/**
+ * Clear polling interval
+ */
+export function createClearPolling(
+  pollingRef: React.MutableRefObject<ReturnType<typeof setInterval> | null>
+) {
+  return () => {
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current);
+      pollingRef.current = null;
+    }
+  };
+}
+
+/**
+ * Reset all refs to initial state
+ */
+export function createResetRefs(
+  clearPolling: () => void,
+  creationIdRef: React.MutableRefObject<string | null>,
+  requestIdRef: React.MutableRefObject<string | null>,
+  modelRef: React.MutableRefObject<string | null>,
+  isGeneratingRef: React.MutableRefObject<boolean>,
+  isPollingRef: React.MutableRefObject<boolean>,
+  consecutiveErrorsRef: React.MutableRefObject<number>,
+  pollStartTimeRef: React.MutableRefObject<number | null>,
+  setIsGenerating: (value: boolean) => void
+) {
+  return () => {
+    clearPolling();
+    creationIdRef.current = null;
+    requestIdRef.current = null;
+    modelRef.current = null;
+    isGeneratingRef.current = false;
+    isPollingRef.current = false;
+    consecutiveErrorsRef.current = 0;
+    pollStartTimeRef.current = null;
+    setIsGenerating(false);
+  };
+}
+
+/**
+ * Extract duration, resolution, and aspect ratio from input
+ */
+export function extractInputMetadata(input: unknown): {
+  duration?: number;
+  resolution?: string;
+  aspectRatio?: string;
+} {
+  const inputData = input as Record<string, unknown>;
+  return {
+    duration: typeof inputData?.duration === "number" ? inputData.duration : undefined,
+    resolution: typeof inputData?.resolution === "string" ? inputData.resolution : undefined,
+    aspectRatio: typeof inputData?.aspectRatio === "string" ? inputData.aspectRatio : undefined,
+  };
+}
+
+/**
+ * Validate completion data
+ */
+export function validateCompletionData(
+  creationId: string | null,
+  userId: string | null,
+  uri: string
+): boolean {
+  return !!(creationId && userId && uri && uri.trim() !== "");
+}
+
+/**
+ * Log completion data for debugging
+ */
+export function logCompletion(
+  creationId: string | null,
+  userId: string | null,
+  urls: GenerationUrls,
+  hasOnSuccess: boolean
+): void {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[VideoQueue] ✅ handleComplete called", {
+      creationId,
+      userId,
+      hasVideoUrl: !!urls.videoUrl,
+      hasImageUrl: !!urls.imageUrl,
+      hasOnSuccess,
+    });
+  }
+}
+
+/**
+ * Log error for debugging
+ */
+export function logError(message: string, data: Record<string, unknown>): void {
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.error("[VideoQueue] ❌", message, data);
+  }
+}

package/src/domains/generation/wizard/presentation/hooks/usePhotoBlockingGeneration.handlers.ts

@@ -0,0 +1,97 @@
+/**
+ * usePhotoBlockingGeneration Handlers
+ * Success and error handlers for photo blocking generation
+ */
+
+import type { CreationPersistence } from "../../infrastructure/utils/creation-persistence.util";
+
+interface HandleSuccessProps {
+  readonly creationIdRef: React.MutableRefObject<string | null>;
+  readonly userId: string | undefined;
+  readonly persistence: CreationPersistence;
+  readonly deductCredits?: (cost: number) => Promise<boolean>;
+  readonly creditCost?: number;
+  readonly onSuccess?: (result: unknown) => void;
+  readonly onCreditsExhausted?: () => void;
+}
+
+interface HandleErrorProps {
+  readonly creationIdRef: React.MutableRefObject<string | null>;
+  readonly userId: string | undefined;
+  readonly persistence: CreationPersistence;
+  readonly onError?: (error: string) => void;
+}
+
+export function createSuccessHandler(props: HandleSuccessProps) {
+  const {
+    creationIdRef,
+    userId,
+    persistence,
+    deductCredits,
+    creditCost,
+    onSuccess,
+    onCreditsExhausted,
+  } = props;
+
+  return async (result: unknown) => {
+    const typedResult = result as { imageUrl?: string; videoUrl?: string; audioUrl?: string; logSessionId?: string };
+    const creationId = creationIdRef.current;
+    const resultUri = typedResult.imageUrl || typedResult.videoUrl || typedResult.audioUrl;
+
+    if (creationId && userId && resultUri) {
+      try {
+        await persistence.updateToCompleted(userId, creationId, {
+          uri: resultUri,
+          imageUrl: typedResult.imageUrl,
+          videoUrl: typedResult.videoUrl,
+          audioUrl: typedResult.audioUrl,
+          logSessionId: typedResult.logSessionId,
+        });
+      } catch (err) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.error("[PhotoBlockingGeneration] updateToCompleted error:", err);
+        }
+      }
+    }
+
+    creationIdRef.current = null;
+
+    // Deduct credits after successful generation
+    if (deductCredits && creditCost) {
+      try {
+        const deducted = await deductCredits(creditCost);
+        if (!deducted) {
+          onCreditsExhausted?.();
+        }
+      } catch (err) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.error("[PhotoBlockingGeneration] deductCredits error:", err);
+        }
+      }
+    }
+
+    onSuccess?.(result);
+  };
+}
+
+export function createErrorHandler(props: HandleErrorProps) {
+  const { creationIdRef, userId, persistence, onError } = props;
+
+  return async (err: { message: string; originalError?: Error & { logSessionId?: string } }) => {
+    const creationId = creationIdRef.current;
+    const logSessionId = err.originalError?.logSessionId;
+
+    if (creationId && userId) {
+      try {
+        await persistence.updateToFailed(userId, creationId, err.message, logSessionId);
+      } catch (updateErr) {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.error("[PhotoBlockingGeneration] updateToFailed error:", updateErr);
+        }
+      }
+    }
+
+    creationIdRef.current = null;
+    onError?.(err.message);
+  };
+}

package/src/domains/generation/wizard/presentation/hooks/usePhotoBlockingGeneration.saver.ts

@@ -0,0 +1,54 @@
+/**
+ * usePhotoBlockingGeneration Saver
+ * Handles saving creation to processing state
+ */
+
+import type { CreationPersistence } from "../../infrastructure/utils/creation-persistence.util";
+import type { WizardScenarioData } from "./wizard-generation.types";
+
+interface SaveCreationProps {
+  readonly userId: string | undefined;
+  readonly scenario: WizardScenarioData;
+  readonly persistence: CreationPersistence;
+  readonly creditCost?: number;
+  readonly creationIdRef: React.MutableRefObject<string | null>;
+}
+
+export async function saveCreationToProcessing(
+  props: SaveCreationProps,
+  input: unknown,
+  prompt: string,
+): Promise<void> {
+  const { userId, scenario, persistence, creditCost, creationIdRef } = props;
+
+  if (!userId || !prompt) return;
+
+  try {
+    // Extract generation parameters from input (for image generation, no duration/resolution)
+    const inputData = input as Record<string, unknown>;
+    const duration = typeof inputData?.duration === "number" ? inputData.duration : undefined;
+    const resolution = typeof inputData?.resolution === "string" ? inputData.resolution : undefined;
+    const aspectRatio = typeof inputData?.aspectRatio === "string" ? inputData.aspectRatio : undefined;
+
+    const result = await persistence.saveAsProcessing(userId, {
+      scenarioId: scenario.id,
+      scenarioTitle: scenario.title || scenario.id,
+      prompt,
+      duration,
+      resolution,
+      creditCost,
+      aspectRatio,
+      provider: scenario.providerId ?? "fal",
+      outputType: scenario.outputType,
+    });
+    creationIdRef.current = result.creationId;
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[PhotoBlockingGeneration] Saved as processing:", result.creationId);
+    }
+  } catch (err) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.error("[PhotoBlockingGeneration] saveAsProcessing error:", err);
+    }
+  }
+}

package/src/domains/generation/wizard/presentation/hooks/usePhotoBlockingGeneration.ts

@@ -12,6 +12,8 @@ import type { CreationPersistence } from "../../infrastructure/utils/creation-pe
 import type { WizardStrategy } from "../../infrastructure/strategies/wizard-strategy.types";
 import type { WizardScenarioData } from "./wizard-generation.types";
 import type { AlertMessages } from "../../../../../presentation/hooks/generation/types";
+import { createSuccessHandler, createErrorHandler } from "./usePhotoBlockingGeneration.handlers";
+import { saveCreationToProcessing } from "./usePhotoBlockingGeneration.saver";
 
 
 interface UsePhotoBlockingGenerationProps {
@@ -51,66 +53,25 @@ export function usePhotoBlockingGeneration(
   const creationIdRef = useRef<string | null>(null);
 
   const handleSuccess = useCallback(
-    async (result: unknown) => {
-      const typedResult = result as { imageUrl?: string; videoUrl?: string; audioUrl?: string; logSessionId?: string };
-      const creationId = creationIdRef.current;
-      const resultUri = typedResult.imageUrl || typedResult.videoUrl || typedResult.audioUrl;
-
-      if (creationId && userId && resultUri) {
-        try {
-          await persistence.updateToCompleted(userId, creationId, {
-            uri: resultUri,
-            imageUrl: typedResult.imageUrl,
-            videoUrl: typedResult.videoUrl,
-            audioUrl: typedResult.audioUrl,
-            logSessionId: typedResult.logSessionId,
-          });
-        } catch (err) {
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.error("[PhotoBlockingGeneration] updateToCompleted error:", err);
-          }
-        }
-      }
-
-      creationIdRef.current = null;
-
-      // Deduct credits after successful generation
-      if (deductCredits && creditCost) {
-        try {
-          const deducted = await deductCredits(creditCost);
-          if (!deducted) {
-            onCreditsExhausted?.();
-          }
-        } catch (err) {
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.error("[PhotoBlockingGeneration] deductCredits error:", err);
-          }
-        }
-      }
-
-      onSuccess?.(result);
-    },
+    createSuccessHandler({
+      creationIdRef,
+      userId,
+      persistence,
+      deductCredits,
+      creditCost,
+      onSuccess,
+      onCreditsExhausted,
+    }),
     [userId, persistence, deductCredits, creditCost, onSuccess, onCreditsExhausted],
   );
 
   const handleError = useCallback(
-    async (err: { message: string; originalError?: Error & { logSessionId?: string } }) => {
-      const creationId = creationIdRef.current;
-      const logSessionId = err.originalError?.logSessionId;
-
-      if (creationId && userId) {
-        try {
-          await persistence.updateToFailed(userId, creationId, err.message, logSessionId);
-        } catch (updateErr) {
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.error("[PhotoBlockingGeneration] updateToFailed error:", updateErr);
-          }
-        }
-      }
-
-      creationIdRef.current = null;
-      onError?.(err.message);
-    },
+    createErrorHandler({
+      creationIdRef,
+      userId,
+      persistence,
+      onError,
+    }),
     [userId, persistence, onError],
   );
 
@@ -124,37 +85,11 @@ export function usePhotoBlockingGeneration(
   const startGeneration = useCallback(
     async (input: unknown, prompt: string) => {
       // Save to Firestore first
-      if (userId && prompt) {
-        try {
-          // Extract generation parameters from input (for image generation, no duration/resolution)
-          const inputData = input as Record<string, unknown>;
-          const duration = typeof inputData?.duration === "number" ? inputData.duration : undefined;
-          const resolution = typeof inputData?.resolution === "string" ? inputData.resolution : undefined;
-
-          const aspectRatio = typeof inputData?.aspectRatio === "string" ? inputData.aspectRatio : undefined;
-
-          const result = await persistence.saveAsProcessing(userId, {
-            scenarioId: scenario.id,
-            scenarioTitle: scenario.title || scenario.id,
-            prompt,
-            duration,
-            resolution,
-            creditCost,
-            aspectRatio,
-            provider: scenario.providerId ?? "fal",
-            outputType: scenario.outputType,
-          });
-          creationIdRef.current = result.creationId;
-
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.log("[PhotoBlockingGeneration] Saved as processing:", result.creationId);
-          }
-        } catch (err) {
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.error("[PhotoBlockingGeneration] saveAsProcessing error:", err);
-          }
-        }
-      }
+      await saveCreationToProcessing(
+        { userId, scenario, persistence, creditCost, creationIdRef },
+        input,
+        prompt,
+      );
 
       // Start blocking generation
       await generate(input);