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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.109",
+  "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/presentation/components/AIGenerationForm.tsx

@@ -37,6 +37,7 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
   hideGenerateButton,
   progress,
   progressIcon,
+  onCloseProgressModal,
   generateButtonProps,
   showAdvanced,
   onAdvancedToggle,
@@ -163,6 +164,7 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
         icon={progressIcon || "sparkles-outline"}
         title={translations.progressTitle || translations.generatingButton}
         message={translations.progressMessage || translations.progressHint}
+        onClose={onCloseProgressModal}
       />
     </>
   );

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

@@ -57,6 +57,8 @@ 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?: {

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}