@umituz/react-native-ai-generation-content 1.37.27 → 1.37.29

package/package.json

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

package/src/domains/creations/domain/utils/preview-helpers.ts

@@ -3,6 +3,7 @@
  * Utility functions for creation preview/thumbnail extraction
  */
 
+import { isImageUrl } from "@umituz/react-native-design-system";
 import type { CreationOutput } from "../entities/Creation";
 
 // Re-export for convenience
@@ -82,3 +83,21 @@ export function getPrimaryMediaUrl(output?: CreationOutput): string | null {
     null
   );
 }
+
+/**
+ * Determine if thumbnail URL is valid and should be displayed
+ * - Must exist
+ * - Must be an image URL (not a video URL)
+ * - Content must not be in progress
+ */
+export function shouldShowThumbnail(
+  thumbnailUrl?: string | null,
+  inProgress?: boolean
+): boolean {
+  if (!thumbnailUrl || inProgress) {
+    return false;
+  }
+
+  // Thumbnail must be an image, not a video
+  return isImageUrl(thumbnailUrl);
+}

package/src/domains/creations/presentation/components/CreationCard.tsx

@@ -40,6 +40,11 @@ export function CreationCard({
       creationId: creation.id,
       hasOnPress: !!callbacks.onPress,
       callbacksKeys: Object.keys(callbacks),
+      status: creation.status,
+      type: creation.type,
+      output: creation.output,
+      hasThumbnailUrl: !!creation.output?.thumbnailUrl,
+      thumbnailUrl: creation.output?.thumbnailUrl,
     });
   }
 

package/src/domains/creations/presentation/components/CreationPreview.tsx

@@ -1,22 +1,15 @@
 /**
  * CreationPreview Component
  * Smart wrapper that delegates to CreationImagePreview or CreationVideoPreview
- * based on creation type
+ * based on output content type (not creation type)
  */
 
 import React from "react";
+import { isVideoUrl } from "@umituz/react-native-design-system";
 import type { CreationStatus, CreationTypeId } from "../../domain/types";
 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/thumbnail URL */
   readonly uri?: string | null;
@@ -43,11 +36,15 @@ export function CreationPreview({
   height,
   showLoadingIndicator = true,
 }: CreationPreviewProps) {
-  // For video types, use CreationVideoPreview
-  if (isVideoType(type)) {
+  // Determine preview type based on URI content, not creation type
+  // This handles scenario-based videos (solo_martial_artist, ski_resort, etc.)
+  const hasVideoContent = uri && isVideoUrl(uri);
+
+  // For video content, use CreationVideoPreview
+  if (hasVideoContent) {
     return (
       <CreationVideoPreview
-        thumbnailUrl={thumbnailUrl || uri}
+        thumbnailUrl={thumbnailUrl}
         videoUrl={uri}
         status={status}
         type={type as CreationTypeId}
@@ -58,7 +55,7 @@ export function CreationPreview({
     );
   }
 
-  // For image types, use CreationImagePreview
+  // For image content, use CreationImagePreview
   return (
     <CreationImagePreview
       uri={uri}

package/src/domains/creations/presentation/components/CreationVideoPreview.tsx

@@ -12,6 +12,7 @@ import {
 } from "@umituz/react-native-design-system";
 import type { CreationStatus, CreationTypeId } from "../../domain/types";
 import { isInProgress } from "../../domain/utils";
+import { shouldShowThumbnail } from "../../domain/utils/preview-helpers";
 
 export interface CreationVideoPreviewProps {
   /** Thumbnail image URL (optional) */
@@ -30,14 +31,6 @@ export interface CreationVideoPreviewProps {
   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: _videoUrl,
@@ -48,9 +41,20 @@ export function CreationVideoPreview({
 }: CreationVideoPreviewProps) {
   const tokens = useAppDesignTokens();
   const inProgress = isInProgress(status);
+  const hasThumbnail = shouldShowThumbnail(thumbnailUrl, inProgress);
 
-  // Only use thumbnail if it's a real image URL, not a video URL
-  const hasThumbnail = !!thumbnailUrl && !inProgress && !isVideoUrl(thumbnailUrl);
+  // Debug logging
+  if (__DEV__) {
+    console.log("[CreationVideoPreview]", {
+      thumbnailUrl,
+      status,
+      inProgress,
+      hasThumbnail,
+      willShowSpinner: inProgress && showLoadingIndicator,
+      willShowThumbnail: hasThumbnail,
+      willShowPlaceholder: !inProgress && !hasThumbnail,
+    });
+  }
 
   const styles = useMemo(
     () =>
@@ -119,7 +123,7 @@ export function CreationVideoPreview({
   }
 
   // Show thumbnail with play icon overlay
-  if (hasThumbnail) {
+  if (hasThumbnail && thumbnailUrl) {
     return (
       <View style={styles.container}>
         <Image

package/src/domains/creations/presentation/components/GalleryHeader.tsx

@@ -19,10 +19,6 @@ interface GalleryHeaderProps {
   readonly filterButtons?: FilterButtonConfig[];
   readonly showFilter?: boolean;
   readonly style?: ViewStyle;
-  /** Number of pending/processing jobs to show as badge */
-  readonly pendingCount?: number;
-  /** Label for pending badge tooltip */
-  readonly pendingLabel?: string;
 }
 
 export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
@@ -32,8 +28,6 @@ export const GalleryHeader: React.FC<GalleryHeaderProps> = ({
   filterButtons = [],
   showFilter = true,
   style,
-  pendingCount = 0,
-  pendingLabel,
 }) => {
   const tokens = useAppDesignTokens();
   const styles = useStyles(tokens);
@@ -102,18 +96,6 @@ const useStyles = (tokens: DesignTokens) =>
       fontWeight: "700",
       color: tokens.colors.textPrimary,
     },
-    pendingBadge: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: 4,
-      paddingHorizontal: 8,
-      paddingVertical: 4,
-      borderRadius: 12,
-    },
-    pendingBadgeText: {
-      fontSize: 12,
-      fontWeight: "600",
-    },
     subtitle: {
       fontSize: 14,
       color: tokens.colors.textSecondary,

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -120,8 +120,6 @@ export function CreationsGalleryScreen({
           countLabel={t(config.translations.photoCount)}
           showFilter={showFilter}
           filterButtons={filterButtons}
-          pendingCount={filters.processingCount}
-          pendingLabel={t("creations.processing")}
         />
       </View>
     );