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

package/package.json

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

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/index.ts

@@ -306,7 +306,6 @@ export {
   ImagePickerBox,
   DualImagePicker,
   // New Generic Sections
-  AIGenerationProgressInline,
   PromptInput,
   AIGenerationHero,
   ExamplePrompts,
@@ -361,7 +360,6 @@ export type {
   // Image Picker
   ImagePickerBoxProps,
   DualImagePickerProps,
-  AIGenerationProgressInlineProps,
   PromptInputProps,
   AIGenerationHeroProps,
   ExamplePromptsProps,

package/src/presentation/components/AIGenerationForm.tsx

@@ -13,8 +13,8 @@ import { AspectRatioSelector } from "./selectors/AspectRatioSelector";
 import { PromptInput } from "./PromptInput";
 import { GenerateButton } from "./buttons/GenerateButton";
 import { ExamplePrompts } from "./prompts/ExamplePrompts";
-import { AIGenerationProgressInline } from "./AIGenerationProgressInline";
 import { StylePresetsGrid } from "./StylePresetsGrid";
+import { GenerationProgressModal } from "./GenerationProgressModal";
 import type { AIGenerationFormProps } from "./AIGenerationForm.types";
 
 export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
@@ -36,6 +36,8 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   isGenerating,
   hideGenerateButton,
   progress,
+  progressIcon,
+  onCloseProgressModal,
   generateButtonProps,
   showAdvanced,
   onAdvancedToggle,
@@ -155,13 +157,15 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
         </>
       )}
 
-      {isGenerating && progress !== undefined && (
-        <AIGenerationProgressInline
-          progress={progress}
-          title={translations.progressTitle || translations.generatingButton}
-          hint={translations.progressHint}
-        />
-      )}
+      {/* MANDATORY: Progress Modal shows automatically when isGenerating */}
+      <GenerationProgressModal
+        visible={isGenerating}
+        progress={progress ?? 0}
+        icon={progressIcon || "sparkles-outline"}
+        title={translations.progressTitle || translations.generatingButton}
+        message={translations.progressMessage || translations.progressHint}
+        onClose={onCloseProgressModal}
+      />
     </>
   );
 };

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

@@ -14,7 +14,9 @@ export interface AIGenerationFormTranslations {
   examplePromptsTitle?: string;
   generateButton: string;
   generatingButton: string;
+  // Progress Modal (mandatory when isGenerating)
   progressTitle?: string;
+  progressMessage?: string;
   progressHint?: string;
   presetsTitle?: string;
   showAdvancedLabel?: string;
@@ -54,7 +56,10 @@ export interface AIGenerationFormProps extends PropsWithChildren {
   
   // Optional: Generation Progress
   progress?: number;
-  
+  progressIcon?: string;
+  /** Callback when user closes the progress modal (for background generation) */
+  onCloseProgressModal?: () => void;
+
   // Custom Generate Button Props
   generateButtonProps?: {
     costLabel?: string;

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;
+  /** Close button label (default: "Continue in background") */
+  readonly closeLabel?: string;
   readonly backgroundColor?: string;
   readonly textColor?: string;
   readonly hintColor?: string;
@@ -39,6 +43,8 @@ export const GenerationProgressContent: React.FC<
   hint,
   dismissLabel,
   onDismiss,
+  onClose,
+  closeLabel,
   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" />
@@ -130,6 +147,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,

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,
+  closeLabel,
   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}
+      closeLabel={closeLabel}
       backgroundColor={modalBackgroundColor || tokens.colors.surface}
       textColor={textColor || tokens.colors.textPrimary}
       hintColor={hintColor || tokens.colors.textTertiary}

package/src/presentation/components/index.ts

@@ -4,7 +4,6 @@ export { GenerationProgressBar } from "./GenerationProgressBar";
 export { PendingJobCard } from "./PendingJobCard";
 export { PendingJobProgressBar } from "./PendingJobProgressBar";
 export { PendingJobCardActions } from "./PendingJobCardActions";
-export { AIGenerationProgressInline } from "./AIGenerationProgressInline";
 export { PromptInput } from "./PromptInput";
 export { AIGenerationHero } from "./AIGenerationHero";
 export * from "./StylePresetsGrid";
@@ -26,7 +25,6 @@ export type {
 
 export type { PendingJobProgressBarProps } from "./PendingJobProgressBar";
 export type { PendingJobCardActionsProps } from "./PendingJobCardActions";
-export type { AIGenerationProgressInlineProps } from "./AIGenerationProgressInline";
 export type { PromptInputProps } from "./PromptInput";
 export type { AIGenerationHeroProps } from "./AIGenerationHero";
 

package/src/presentation/components/AIGenerationProgressInline.tsx

@@ -1,106 +0,0 @@
-/**
- * AIGenerationProgressInline Component
- * Generic inline generation progress display
- * Props-driven for 100+ apps compatibility
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-  AtomicProgress,
-  AtomicSpinner,
-} from "@umituz/react-native-design-system";
-
-export interface AIGenerationProgressInlineProps {
-  readonly progress: number;
-  readonly title?: string;
-  readonly message?: string;
-  readonly hint?: string;
-  readonly backgroundColor?: string;
-  readonly accentColor?: string;
-}
-
-export const AIGenerationProgressInline: React.FC<
-  AIGenerationProgressInlineProps
-> = ({
-  progress,
-  title,
-  message,
-  hint,
-  backgroundColor,
-  accentColor,
-}) => {
-  const tokens = useAppDesignTokens();
-  const primaryColor = accentColor || tokens.colors.primary;
-  const bgColor = backgroundColor || tokens.colors.surface;
-
-  const clampedProgress = Math.max(0, Math.min(100, progress));
-
-  return (
-    <View style={[styles.container, { backgroundColor: bgColor }]}>
-      <AtomicSpinner size="lg" color={primaryColor} />
-
-      {title && (
-        <AtomicText
-          type="bodyMedium"
-          style={[styles.title, { color: tokens.colors.textPrimary }]}
-        >
-          {title}
-        </AtomicText>
-      )}
-      
-      {message && (
-        <AtomicText
-          type="bodySmall"
-          style={[styles.message, { color: tokens.colors.textSecondary }]}
-        >
-          {message}
-        </AtomicText>
-      )}
-      
-      <View style={styles.progressBarWrapper}>
-        <AtomicProgress
-          value={clampedProgress}
-          height={8}
-          color={primaryColor}
-          backgroundColor={tokens.colors.surfaceVariant}
-          shape="rounded"
-          showPercentage={false}
-        />
-      </View>
-      
-      <AtomicText
-        type="labelSmall"
-        style={[styles.progressLabel, { color: tokens.colors.textSecondary }]}
-      >
-        {clampedProgress}%{hint ? ` • ${hint}` : ""}
-      </AtomicText>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    margin: 16,
-    padding: 24,
-    borderRadius: 16,
-    alignItems: "center",
-  },
-  title: {
-    marginTop: 16,
-    fontWeight: "600",
-  },
-  message: {
-    marginTop: 8,
-    textAlign: "center",
-  },
-  progressBarWrapper: {
-    width: "100%",
-    marginTop: 16,
-  },
-  progressLabel: {
-    marginTop: 8,
-  },
-});