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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.15",
+  "version": "1.17.17",
   "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

@@ -1,6 +1,8 @@
 declare const __DEV__: boolean;
 
 import React, { useMemo, useCallback, useState } from "react";
+import { View, FlatList, RefreshControl, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useAppDesignTokens,
   useAlert,
@@ -9,7 +11,7 @@ import {
   useSharing,
   FilterBottomSheet,
   type BottomSheetModalRef,
-  ScreenLayout,
+  type DesignTokens,
 } from "@umituz/react-native-design-system";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
@@ -17,7 +19,7 @@ import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useCreationsFilter } from "../hooks/useCreationsFilter";
 import {
   GalleryHeader,
-  CreationsGrid,
+  CreationCard,
   CreationImageViewer,
   GalleryEmptyStates,
 } from "../components";
@@ -26,6 +28,7 @@ import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
 import { CreationDetailScreen } from "./CreationDetailScreen";
+import { CreationsProvider } from "../components/CreationsProvider";
 
 interface CreationsGalleryScreenProps {
   readonly userId: string | null;
@@ -40,8 +43,6 @@ interface CreationsGalleryScreenProps {
   readonly showFilter?: boolean;
 }
 
-import { CreationsProvider } from "../components/CreationsProvider";
-
 export function CreationsGalleryScreen(props: CreationsGalleryScreenProps) {
   return (
     <CreationsProvider config={props.config} t={props.t}>
@@ -62,6 +63,7 @@ function CreationsGalleryScreenContent({
   emptyActionLabel,
   showFilter = config.showFilter ?? true,
 }: CreationsGalleryScreenProps) {
+  const insets = useSafeAreaInsets();
   const tokens = useAppDesignTokens();
   const { share } = useSharing();
   const alert = useAlert();
@@ -76,14 +78,12 @@ function CreationsGalleryScreenContent({
   const deleteMutation = useDeleteCreation({ userId, repository });
   const { filtered, selectedIds, toggleFilter, clearFilters, isFiltered } = useCreationsFilter({ creations });
 
-  // Refetch creations when screen comes into focus
   useFocusEffect(
     useCallback(() => {
       void refetch();
     }, [refetch])
   );
 
-  // Prepare data for UI using utils
   const allCategories = useMemo(
     () => getFilterCategoriesFromConfig(config, t),
     [config, t],
@@ -118,27 +118,62 @@ function CreationsGalleryScreenContent({
     );
   }, [alert, config, deleteMutation, t]);
 
-  // Handle viewing a creation - shows detail screen
   const handleView = useCallback((creation: Creation) => {
     setSelectedCreation(creation);
   }, []);
 
-  // Handle favorite toggle
   const handleFavorite = useCallback((creation: Creation, isFavorite: boolean) => {
     void (async () => {
       if (!userId) return;
-      const success = await repository.updateFavorite(
-        userId,
-        creation.id,
-        isFavorite,
-      );
+      const success = await repository.updateFavorite(userId, creation.id, isFavorite);
       if (success) {
         void refetch();
       }
     })();
   }, [userId, repository, refetch]);
 
-  const renderEmptyComponent = useMemo(() => (
+  const styles = useStyles(tokens, insets);
+
+  const renderItem = useCallback(
+    ({ item }: { item: Creation }) => (
+      <CreationCard
+        creation={item}
+        callbacks={{
+          onPress: () => handleView(item),
+          onShare: async () => handleShare(item),
+          onDelete: () => handleDelete(item),
+          onFavorite: () => handleFavorite(item, !item.isFavorite),
+        }}
+      />
+    ),
+    [handleView, handleShare, handleDelete, handleFavorite]
+  );
+
+  const renderHeader = useMemo(() => {
+    if ((!creations || creations.length === 0) && !isLoading) return null;
+
+    return (
+      <View style={styles.header}>
+        <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');
+            }
+            filterSheetRef.current?.present();
+          }}
+        />
+      </View>
+    );
+  }, [creations, isLoading, filtered.length, isFiltered, showFilter, t, config, styles.header]);
+
+  const renderEmpty = useMemo(() => (
     <GalleryEmptyStates
       isLoading={isLoading}
       creations={creations}
@@ -166,48 +201,25 @@ 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();
-            }}
+    <View style={[styles.container, { backgroundColor: tokens.colors.background }]}>
+      <FlatList
+        data={filtered}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        ListHeaderComponent={renderHeader}
+        ListEmptyComponent={renderEmpty}
+        contentContainerStyle={[
+          styles.listContent,
+          (!filtered || filtered.length === 0) && styles.emptyContent,
+        ]}
+        showsVerticalScrollIndicator={false}
+        refreshControl={
+          <RefreshControl
+            refreshing={isLoading}
+            onRefresh={() => void refetch()}
+            tintColor={tokens.colors.primary}
           />
-        )
-      }
-    >
-      {/* 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
@@ -229,9 +241,29 @@ function CreationsGalleryScreenContent({
           toggleFilter(id, category?.multiSelect);
         }}
         onClearFilters={clearFilters}
-        title={t(config.translations.filterTitle) || t("common.filter")}
+        title={t(config.translations.filterTitle)}
       />
-    </ScreenLayout>
+    </View>
   );
 }
 
+const useStyles = (tokens: DesignTokens, insets: { top: number; bottom: number }) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    header: {
+      paddingTop: insets.top + tokens.spacing.md,
+      backgroundColor: tokens.colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: tokens.colors.border,
+    },
+    listContent: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingTop: tokens.spacing.md,
+      paddingBottom: insets.bottom + 100,
+    },
+    emptyContent: {
+      flexGrow: 1,
+    },
+  });

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;
+}