@umituz/react-native-ai-generation-content 1.17.15 → 1.17.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.15",
+  "version": "1.17.16",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -84,6 +84,7 @@
     "expo-haptics": "^15.0.8",
     "expo-image": "^3.0.11",
     "expo-linear-gradient": "~15.0.7",
+    "expo-video": "^2.0.0",
     "expo-localization": "^17.0.8",
     "expo-sharing": "^14.0.8",
     "firebase": "^12.6.0",

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

@@ -82,7 +82,8 @@ export function CreationCard({
 }: CreationCardProps) {
   const tokens = useAppDesignTokens();
   // Support both output object and direct uri
-  const previewUrl = creation.uri || getPreviewUrl(creation.output);
+  // Prefer getPreviewUrl (which returns thumbnailUrl first) over direct uri
+  const previewUrl = getPreviewUrl(creation.output) || creation.uri;
   const title = getCreationTitle(creation.prompt, creation.type as CreationTypeId);
 
   // Format date

package/src/domains/creations/presentation/components/CreationDetail/DetailVideo.tsx

@@ -0,0 +1,123 @@
+/**
+ * DetailVideo Component
+ * Video player with thumbnail and play controls for creation detail view
+ */
+
+import React, { useState, useCallback } from "react";
+import { View, StyleSheet, Dimensions, TouchableOpacity } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicIcon,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { Image } from "expo-image";
+import { useVideoPlayer, VideoView } from "expo-video";
+
+interface DetailVideoProps {
+  readonly videoUrl: string;
+  readonly thumbnailUrl?: string;
+}
+
+const { width } = Dimensions.get("window");
+
+export const DetailVideo: React.FC<DetailVideoProps> = ({
+  videoUrl,
+  thumbnailUrl,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useStyles(tokens);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const player = useVideoPlayer(videoUrl, (p) => {
+    p.loop = true;
+  });
+
+  const handlePlay = useCallback(() => {
+    setIsPlaying(true);
+    player.play();
+  }, [player]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.frame}>
+        {isPlaying ? (
+          <VideoView
+            player={player}
+            style={styles.video}
+            contentFit="cover"
+            nativeControls
+          />
+        ) : (
+          <TouchableOpacity
+            style={styles.thumbnailContainer}
+            onPress={handlePlay}
+            activeOpacity={0.8}
+          >
+            {thumbnailUrl ? (
+              <Image
+                source={{ uri: thumbnailUrl }}
+                style={styles.thumbnail}
+                contentFit="cover"
+              />
+            ) : (
+              <View style={styles.placeholder} />
+            )}
+            <View style={styles.playButtonContainer}>
+              <View style={styles.playButton}>
+                <AtomicIcon name="play" customSize={32} color="onPrimary" />
+              </View>
+            </View>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const useStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      paddingHorizontal: tokens.spacing.lg,
+      marginVertical: tokens.spacing.lg,
+    },
+    frame: {
+      width: width - tokens.spacing.lg * 2,
+      height: width - tokens.spacing.lg * 2,
+      borderRadius: 24,
+      overflow: "hidden",
+      backgroundColor: tokens.colors.surface,
+    },
+    video: {
+      width: "100%",
+      height: "100%",
+    },
+    thumbnailContainer: {
+      width: "100%",
+      height: "100%",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    thumbnail: {
+      width: "100%",
+      height: "100%",
+    },
+    placeholder: {
+      width: "100%",
+      height: "100%",
+      backgroundColor: tokens.colors.surfaceSecondary,
+    },
+    playButtonContainer: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    playButton: {
+      width: 64,
+      height: 64,
+      borderRadius: 32,
+      backgroundColor: tokens.colors.primary,
+      justifyContent: "center",
+      alignItems: "center",
+      paddingLeft: 4,
+    },
+  });

package/src/domains/creations/presentation/components/CreationDetail/index.ts

@@ -1,4 +1,5 @@
 export * from './DetailHeader';
 export * from './DetailImage';
+export * from './DetailVideo';
 export * from './DetailStory';
 export * from './DetailActions';

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

@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { useAppDesignTokens, type DesignTokens, ScreenLayout } from "@umituz/react-native-design-system";
 import type { Creation } from '../../domain/entities/Creation';
+import { hasVideoContent, getPreviewUrl } from '../../domain/utils';
 import { DetailHeader } from '../components/CreationDetail/DetailHeader';
 import { DetailImage } from '../components/CreationDetail/DetailImage';
+import { DetailVideo } from '../components/CreationDetail/DetailVideo';
 import { DetailStory } from '../components/CreationDetail/DetailStory';
 import { DetailActions } from '../components/CreationDetail/DetailActions';
 
 import { useCreationsProvider } from '../components/CreationsProvider';
 
+/** Video creation types */
+const VIDEO_TYPES = ['text-to-video', 'image-to-video'] as const;
+
 interface CreationDetailScreenProps {
     readonly creation: Creation;
     readonly onClose: () => void;
@@ -45,8 +50,19 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
     const story = metadata.story || metadata.description || "";
     const date = metadata.date || new Date(creation.createdAt).toLocaleDateString();
 
+    // Detect if this is a video creation
+    const isVideo = useMemo(() => {
+        if (VIDEO_TYPES.includes(creation.type as typeof VIDEO_TYPES[number])) return true;
+        if (hasVideoContent(creation.output)) return true;
+        return false;
+    }, [creation.type, creation.output]);
+
     const styles = useStyles(tokens);
 
+    // Get video URL and thumbnail for video content
+    const videoUrl = creation.output?.videoUrl || creation.uri;
+    const thumbnailUrl = getPreviewUrl(creation.output) || undefined;
+
     return (
         <ScreenLayout
             scrollable={true}
@@ -61,7 +77,11 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
             }
             contentContainerStyle={styles.scrollContent}
         >
-            <DetailImage uri={creation.uri} />
+            {isVideo ? (
+                <DetailVideo videoUrl={videoUrl} thumbnailUrl={thumbnailUrl} />
+            ) : (
+                <DetailImage uri={creation.uri} />
+            )}
 
             {story ? (
                 <DetailStory story={story} />
@@ -70,8 +90,8 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
             <DetailActions
                 onShare={() => onShare(creation)}
                 onDelete={() => onDelete(creation)}
-                shareLabel={t("result.shareButton") || "Share"}
-                deleteLabel={t("common.delete") || "Delete"}
+                shareLabel={t("result.shareButton")}
+                deleteLabel={t("common.delete")}
             />
         </ScreenLayout>
     );

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

@@ -166,60 +166,63 @@ function CreationsGalleryScreenContent({
   }
 
   return (
-    <ScreenLayout
-      scrollable={false}
-      edges={["top"]}
-      backgroundColor={tokens.colors.background}
-      header={
-        (!creations || creations?.length === 0) && !isLoading ? null : (
-          <GalleryHeader
-            title={t(config.translations.title) || 'My Creations'}
-            count={filtered.length}
-            countLabel={t(config.translations.photoCount) || 'photos'}
-            isFiltered={isFiltered}
-            showFilter={showFilter}
-            filterLabel={t(config.translations.filterLabel) || 'Filter'}
-            onFilterPress={() => {
-              if (__DEV__) {
-                // eslint-disable-next-line no-console
-                console.log('[CreationsGallery] Filter button pressed');
-                // eslint-disable-next-line no-console
-                console.log('[CreationsGallery] filterSheetRef.current:', filterSheetRef.current);
-                // eslint-disable-next-line no-console
-                console.log('[CreationsGallery] allCategories:', allCategories);
-              }
-              filterSheetRef.current?.present();
-            }}
-          />
-        )
-      }
-    >
-      {/* Main Content Grid - handles empty/loading via ListEmptyComponent */}
-      <CreationsGrid
-        creations={filtered}
-        isLoading={isLoading}
-        onRefresh={() => void refetch()}
-        onPress={(creation) => handleView(creation as Creation)}
-        onShare={async (creation) => handleShare(creation as Creation)}
-        onDelete={(creation) => handleDelete(creation as Creation)}
-        onFavorite={(creation) => {
-          const c = creation as Creation;
-          handleFavorite(c, !c.isFavorite);
-        }}
-        contentContainerStyle={{ paddingBottom: tokens.spacing.xl }}
-        ListEmptyComponent={renderEmptyComponent}
-      />
-
-      <CreationImageViewer
-        creations={filtered}
-        visible={viewerVisible}
-        index={viewerIndex}
-        onDismiss={() => setViewerVisible(false)}
-        onIndexChange={setViewerIndex}
-        enableEditing={enableEditing}
-        onImageEdit={onImageEdit}
-      />
-
+    <>
+      <ScreenLayout
+        scrollable={false}
+        edges={["top"]}
+        backgroundColor={tokens.colors.background}
+        header={
+          (!creations || creations?.length === 0) && !isLoading ? null : (
+            <GalleryHeader
+              title={t(config.translations.title)}
+              count={filtered.length}
+              countLabel={t(config.translations.photoCount)}
+              isFiltered={isFiltered}
+              showFilter={showFilter}
+              filterLabel={t(config.translations.filterLabel)}
+              onFilterPress={() => {
+                if (__DEV__) {
+                  // eslint-disable-next-line no-console
+                  console.log('[CreationsGallery] Filter button pressed');
+                  // eslint-disable-next-line no-console
+                  console.log('[CreationsGallery] filterSheetRef.current:', filterSheetRef.current);
+                  // eslint-disable-next-line no-console
+                  console.log('[CreationsGallery] allCategories:', allCategories);
+                }
+                filterSheetRef.current?.present();
+              }}
+            />
+          )
+        }
+      >
+        {/* Main Content Grid - handles empty/loading via ListEmptyComponent */}
+        <CreationsGrid
+          creations={filtered}
+          isLoading={isLoading}
+          onRefresh={() => void refetch()}
+          onPress={(creation) => handleView(creation as Creation)}
+          onShare={async (creation) => handleShare(creation as Creation)}
+          onDelete={(creation) => handleDelete(creation as Creation)}
+          onFavorite={(creation) => {
+            const c = creation as Creation;
+            handleFavorite(c, !c.isFavorite);
+          }}
+          contentContainerStyle={{ paddingBottom: tokens.spacing.xl }}
+          ListEmptyComponent={renderEmptyComponent}
+        />
+
+        <CreationImageViewer
+          creations={filtered}
+          visible={viewerVisible}
+          index={viewerIndex}
+          onDismiss={() => setViewerVisible(false)}
+          onIndexChange={setViewerIndex}
+          enableEditing={enableEditing}
+          onImageEdit={onImageEdit}
+        />
+      </ScreenLayout>
+
+      {/* FilterBottomSheet must be outside ScreenLayout for proper portal rendering */}
       <FilterBottomSheet
         ref={filterSheetRef}
         categories={allCategories}
@@ -229,9 +232,9 @@ function CreationsGalleryScreenContent({
           toggleFilter(id, category?.multiSelect);
         }}
         onClearFilters={clearFilters}
-        title={t(config.translations.filterTitle) || t("common.filter")}
+        title={t(config.translations.filterTitle)}
       />
-    </ScreenLayout>
+    </>
   );
 }
 

package/src/features/text-to-image/domain/constants/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Text-to-Image Constants
+ * All constant exports for text-to-image feature
+ */
+
+export { DEFAULT_IMAGE_STYLES } from "./styles.constants";
+
+export {
+  DEFAULT_NUM_IMAGES_OPTIONS,
+  DEFAULT_ASPECT_RATIO_OPTIONS,
+  DEFAULT_SIZE_OPTIONS,
+  DEFAULT_OUTPUT_FORMAT_OPTIONS,
+  DEFAULT_FORM_VALUES,
+} from "./options.constants";

package/src/features/text-to-image/domain/constants/options.constants.ts

@@ -0,0 +1,42 @@
+/**
+ * Text-to-Image Options Constants
+ * Default option values for text-to-image generation
+ */
+
+import type {
+  AspectRatio,
+  ImageSize,
+  NumImages,
+  OutputFormat,
+  TextToImageFormDefaults,
+} from "../types/form.types";
+
+export const DEFAULT_NUM_IMAGES_OPTIONS: NumImages[] = [1, 2, 3, 4];
+
+export const DEFAULT_ASPECT_RATIO_OPTIONS: { value: AspectRatio; label: string }[] = [
+  { value: "9:16", label: "Portrait (9:16)" },
+  { value: "16:9", label: "Landscape (16:9)" },
+  { value: "1:1", label: "Square (1:1)" },
+];
+
+export const DEFAULT_SIZE_OPTIONS: { value: ImageSize; label: string }[] = [
+  { value: "512x512", label: "512×512" },
+  { value: "768x768", label: "768×768" },
+  { value: "1024x1024", label: "1024×1024" },
+  { value: "1024x1792", label: "1024×1792" },
+  { value: "1792x1024", label: "1792×1024" },
+];
+
+export const DEFAULT_OUTPUT_FORMAT_OPTIONS: { value: OutputFormat; label: string }[] = [
+  { value: "png", label: "PNG" },
+  { value: "jpeg", label: "JPEG" },
+];
+
+export const DEFAULT_FORM_VALUES: TextToImageFormDefaults = {
+  aspectRatio: "9:16",
+  size: "512x512",
+  numImages: 1,
+  guidanceScale: 7.5,
+  outputFormat: "png",
+  selectedStyle: "realistic",
+};

package/src/features/text-to-image/domain/constants/styles.constants.ts

@@ -0,0 +1,34 @@
+/**
+ * Default Image Styles
+ * Predefined style options for text-to-image generation
+ */
+
+import type { StyleOption } from "../types/form.types";
+
+export const DEFAULT_IMAGE_STYLES: StyleOption[] = [
+  {
+    id: "realistic",
+    name: "Realistic",
+    description: "Photorealistic images",
+  },
+  {
+    id: "artistic",
+    name: "Artistic",
+    description: "Creative and artistic style",
+  },
+  {
+    id: "anime",
+    name: "Anime",
+    description: "Japanese animation style",
+  },
+  {
+    id: "minimalist",
+    name: "Minimalist",
+    description: "Clean and simple design",
+  },
+  {
+    id: "vintage",
+    name: "Vintage",
+    description: "Retro and classic look",
+  },
+];

package/src/features/text-to-image/domain/index.ts

@@ -1 +1,7 @@
+/**
+ * Text-to-Image Domain Layer
+ * Types and constants exports
+ */
+
 export * from "./types";
+export * from "./constants";

package/src/features/text-to-image/domain/types/config.types.ts

@@ -0,0 +1,71 @@
+/**
+ * Text-to-Image Configuration Types
+ * Callback and configuration types for app integration
+ */
+
+import type {
+  AspectRatio,
+  ImageSize,
+  NumImages,
+  OutputFormat,
+  StyleOption,
+  TextToImageFormDefaults,
+} from "./form.types";
+
+export interface GenerationRequest {
+  prompt: string;
+  model?: string;
+  aspectRatio: AspectRatio;
+  size: ImageSize;
+  negativePrompt?: string;
+  guidanceScale: number;
+  numImages: NumImages;
+  style?: string;
+  outputFormat?: OutputFormat;
+}
+
+export interface GenerationResultSuccess {
+  success: true;
+  imageUrls: string[];
+}
+
+export interface GenerationResultError {
+  success: false;
+  error: string;
+}
+
+export type GenerationResult = GenerationResultSuccess | GenerationResultError;
+
+export interface TextToImageCallbacks {
+  executeGeneration: (request: GenerationRequest) => Promise<GenerationResult>;
+  calculateCost: (numImages: NumImages, model?: string | null) => number;
+  canAfford: (cost: number) => boolean;
+  isAuthenticated: () => boolean;
+  onAuthRequired?: () => void;
+  onCreditsRequired?: (cost: number) => void;
+  onSuccess?: (imageUrls: string[]) => void;
+  onError?: (error: string) => void;
+}
+
+export interface TextToImageFormConfig {
+  defaults?: TextToImageFormDefaults;
+  numImagesOptions?: NumImages[];
+  styleOptions?: StyleOption[];
+  aspectRatioOptions?: { value: AspectRatio; label: string }[];
+  sizeOptions?: { value: ImageSize; label: string }[];
+  outputFormatOptions?: { value: OutputFormat; label: string }[];
+}
+
+export interface TextToImageTranslations {
+  promptLabel: string;
+  promptPlaceholder: string;
+  promptCharacterCount?: string;
+  examplesLabel: string;
+  numImagesLabel: string;
+  styleLabel: string;
+  generateButton: string;
+  generateButtonMultiple?: string;
+  costLabel?: string;
+  settingsTitle?: string;
+  doneButton?: string;
+}

package/src/features/text-to-image/domain/types/form.types.ts

@@ -0,0 +1,58 @@
+/**
+ * Text-to-Image Form Types
+ * Generic form state types for text-to-image generation
+ */
+
+export type AspectRatio = "16:9" | "9:16" | "1:1";
+
+export type ImageSize =
+  | "512x512"
+  | "768x768"
+  | "1024x1024"
+  | "1024x1792"
+  | "1792x1024";
+
+export type OutputFormat = "png" | "jpeg";
+
+export type NumImages = 1 | 2 | 3 | 4;
+
+export interface StyleOption {
+  id: string;
+  name: string;
+  description?: string;
+  icon?: string;
+}
+
+export interface TextToImageFormState {
+  prompt: string;
+  aspectRatio: AspectRatio;
+  size: ImageSize;
+  numImages: NumImages;
+  negativePrompt: string;
+  guidanceScale: number;
+  selectedModel: string | null;
+  outputFormat: OutputFormat;
+  selectedStyle: string;
+}
+
+export interface TextToImageFormActions {
+  setPrompt: (prompt: string) => void;
+  setAspectRatio: (ratio: AspectRatio) => void;
+  setSize: (size: ImageSize) => void;
+  setNumImages: (num: NumImages) => void;
+  setNegativePrompt: (prompt: string) => void;
+  setGuidanceScale: (scale: number) => void;
+  setSelectedModel: (model: string | null) => void;
+  setOutputFormat: (format: OutputFormat) => void;
+  setSelectedStyle: (style: string) => void;
+  reset: () => void;
+}
+
+export interface TextToImageFormDefaults {
+  aspectRatio?: AspectRatio;
+  size?: ImageSize;
+  numImages?: NumImages;
+  guidanceScale?: number;
+  outputFormat?: OutputFormat;
+  selectedStyle?: string;
+}

package/src/features/text-to-image/domain/types/index.ts

@@ -1,9 +1,37 @@
+/**
+ * Text-to-Image Domain Types
+ * All type exports for text-to-image feature
+ */
+
+// Form types
+export type {
+  AspectRatio,
+  ImageSize,
+  OutputFormat,
+  NumImages,
+  StyleOption,
+  TextToImageFormState,
+  TextToImageFormActions,
+  TextToImageFormDefaults,
+} from "./form.types";
+
+// Config types
+export type {
+  GenerationRequest,
+  GenerationResult,
+  GenerationResultSuccess,
+  GenerationResultError,
+  TextToImageCallbacks,
+  TextToImageFormConfig,
+  TextToImageTranslations,
+} from "./config.types";
+
+// Provider types (existing)
 export type {
   TextToImageOptions,
   TextToImageRequest,
   TextToImageResult,
   TextToImageFeatureState,
-  TextToImageTranslations,
   TextToImageInputBuilder,
   TextToImageResultExtractor,
   TextToImageFeatureConfig,

package/src/features/text-to-image/domain/types/text-to-image.types.ts

@@ -35,14 +35,6 @@ export interface TextToImageFeatureState {
   error: string | null;
 }
 
-export interface TextToImageTranslations {
-  promptPlaceholder: string;
-  generateButtonText: string;
-  processingText: string;
-  successText: string;
-  saveButtonText: string;
-  tryAnotherText: string;
-}
 
 export type TextToImageInputBuilder = (
   prompt: string,