@umituz/react-native-ai-generation-content 1.17.19 → 1.17.21

package/package.json

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

package/src/features/image-to-video/domain/constants/animation.constants.ts

@@ -0,0 +1,47 @@
+/**
+ * Animation Style Constants
+ * Default animation styles for image-to-video
+ */
+
+import type { AnimationStyle } from "../types";
+
+export const DEFAULT_ANIMATION_STYLES: AnimationStyle[] = [
+  {
+    id: "ken_burns",
+    name: "Ken Burns",
+    description: "Slow zoom and pan effect",
+    icon: "Maximize2",
+  },
+  {
+    id: "zoom_in",
+    name: "Zoom In",
+    description: "Gradual zoom in effect",
+    icon: "ZoomIn",
+  },
+  {
+    id: "zoom_out",
+    name: "Zoom Out",
+    description: "Gradual zoom out effect",
+    icon: "ZoomOut",
+  },
+  {
+    id: "slide_left",
+    name: "Slide Left",
+    description: "Pan from right to left",
+    icon: "ArrowLeft",
+  },
+  {
+    id: "slide_right",
+    name: "Slide Right",
+    description: "Pan from left to right",
+    icon: "ArrowRight",
+  },
+  {
+    id: "parallax",
+    name: "Parallax",
+    description: "3D depth effect",
+    icon: "Layers",
+  },
+];
+
+export const DEFAULT_ANIMATION_STYLE_ID = "ken_burns";

package/src/features/image-to-video/domain/constants/duration.constants.ts

@@ -0,0 +1,13 @@
+/**
+ * Duration Constants
+ * Default duration options for image-to-video
+ */
+
+import type { VideoDuration, DurationOption } from "../types";
+
+export const DEFAULT_DURATION_OPTIONS: DurationOption[] = [
+  { value: 4, label: "4s" },
+  { value: 8, label: "8s" },
+];
+
+export const DEFAULT_VIDEO_DURATION: VideoDuration = 4;

package/src/features/image-to-video/domain/constants/form.constants.ts

@@ -0,0 +1,22 @@
+/**
+ * Form Constants
+ * Default form values for image-to-video
+ */
+
+import type { ImageToVideoFormDefaults, ImageToVideoFormConfig } from "../types";
+import { DEFAULT_ANIMATION_STYLE_ID } from "./animation.constants";
+import { DEFAULT_MUSIC_MOOD_ID } from "./music.constants";
+import { DEFAULT_VIDEO_DURATION } from "./duration.constants";
+
+export const DEFAULT_FORM_VALUES: ImageToVideoFormDefaults = {
+  animationStyle: DEFAULT_ANIMATION_STYLE_ID,
+  duration: DEFAULT_VIDEO_DURATION,
+  musicMood: DEFAULT_MUSIC_MOOD_ID,
+};
+
+export const DEFAULT_FORM_CONFIG: ImageToVideoFormConfig = {
+  maxImages: 10,
+  creditCost: 1,
+  enableCustomAudio: true,
+  enableMotionPrompt: false,
+};

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

@@ -0,0 +1,23 @@
+/**
+ * Image-to-Video Constants Index
+ */
+
+export {
+  DEFAULT_ANIMATION_STYLES,
+  DEFAULT_ANIMATION_STYLE_ID,
+} from "./animation.constants";
+
+export {
+  DEFAULT_MUSIC_MOODS,
+  DEFAULT_MUSIC_MOOD_ID,
+} from "./music.constants";
+
+export {
+  DEFAULT_DURATION_OPTIONS,
+  DEFAULT_VIDEO_DURATION,
+} from "./duration.constants";
+
+export {
+  DEFAULT_FORM_VALUES,
+  DEFAULT_FORM_CONFIG,
+} from "./form.constants";

package/src/features/image-to-video/domain/constants/music.constants.ts

@@ -0,0 +1,53 @@
+/**
+ * Music Mood Constants
+ * Default music moods for image-to-video
+ */
+
+import type { MusicMood } from "../types";
+
+export const DEFAULT_MUSIC_MOODS: MusicMood[] = [
+  {
+    id: "none",
+    name: "No Music",
+    description: "Silent video",
+    icon: "volume-mute-outline",
+  },
+  {
+    id: "energetic",
+    name: "Energetic",
+    description: "Upbeat and dynamic",
+    icon: "flash-outline",
+  },
+  {
+    id: "calm",
+    name: "Calm",
+    description: "Peaceful and relaxing",
+    icon: "leaf-outline",
+  },
+  {
+    id: "happy",
+    name: "Happy",
+    description: "Cheerful and joyful",
+    icon: "happy-outline",
+  },
+  {
+    id: "emotional",
+    name: "Emotional",
+    description: "Touching and heartfelt",
+    icon: "heart-outline",
+  },
+  {
+    id: "rhythmic",
+    name: "Rhythmic",
+    description: "Beat-driven and groovy",
+    icon: "musical-notes-outline",
+  },
+  {
+    id: "custom",
+    name: "Custom",
+    description: "Upload your own audio",
+    icon: "cloud-upload-outline",
+  },
+];
+
+export const DEFAULT_MUSIC_MOOD_ID = "none";

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

@@ -1 +1,5 @@
+// Types
 export * from "./types";
+
+// Constants
+export * from "./constants";

package/src/features/image-to-video/domain/types/animation.types.ts

@@ -0,0 +1,20 @@
+/**
+ * Animation Types for Image-to-Video
+ * Defines animation style options
+ */
+
+export interface AnimationStyle {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+}
+
+export type AnimationStyleId =
+  | "ken_burns"
+  | "zoom_in"
+  | "zoom_out"
+  | "slide_left"
+  | "slide_right"
+  | "parallax"
+  | string;

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

@@ -0,0 +1,56 @@
+/**
+ * Config Types for Image-to-Video
+ * Defines callbacks and configuration options
+ */
+
+import type { ImageToVideoResult } from "./image-to-video.types";
+import type { ImageToVideoFormState } from "./form.types";
+
+export interface ImageToVideoCallbacks {
+  onGenerate: (formState: ImageToVideoFormState) => Promise<void>;
+  onSelectImages?: () => Promise<string[]>;
+  onSelectCustomAudio?: () => Promise<string | null>;
+  onCreditCheck?: (cost: number) => boolean;
+  onShowPaywall?: (cost: number) => void;
+  onSuccess?: (result: ImageToVideoResult) => void;
+  onError?: (error: string) => void;
+}
+
+export interface ImageToVideoFormConfig {
+  maxImages?: number;
+  creditCost?: number;
+  enableCustomAudio?: boolean;
+  enableMotionPrompt?: boolean;
+}
+
+export interface ImageToVideoTranslationsExtended {
+  sectionTitles: {
+    selectedImages: string;
+    animationStyle: string;
+    durationPerImage: string;
+    addMusic: string;
+  };
+  imageSelection: {
+    selectImages: string;
+    chooseUpTo: string;
+    addMore: string;
+  };
+  duration: {
+    totalVideo: string;
+  };
+  music: {
+    customAudioSelected: string;
+  };
+  hero: {
+    title: string;
+    subtitle: string;
+  };
+  generate: {
+    buttonText: string;
+    generatingText: string;
+  };
+  errors: {
+    noImages: string;
+    noImagesMessage: string;
+  };
+}

package/src/features/image-to-video/domain/types/duration.types.ts

@@ -0,0 +1,11 @@
+/**
+ * Duration Types for Image-to-Video
+ * Defines video duration options
+ */
+
+export type VideoDuration = 4 | 8 | number;
+
+export interface DurationOption {
+  value: VideoDuration;
+  label?: string;
+}

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

@@ -0,0 +1,35 @@
+/**
+ * Form Types for Image-to-Video
+ * Defines form state and actions
+ */
+
+import type { AnimationStyleId } from "./animation.types";
+import type { MusicMoodId } from "./music.types";
+import type { VideoDuration } from "./duration.types";
+
+export interface ImageToVideoFormState {
+  selectedImages: string[];
+  animationStyle: AnimationStyleId;
+  duration: VideoDuration;
+  musicMood: MusicMoodId;
+  customAudioUri: string | null;
+  motionPrompt: string;
+}
+
+export interface ImageToVideoFormActions {
+  setSelectedImages: (images: string[]) => void;
+  addImages: (images: string[]) => void;
+  removeImage: (index: number) => void;
+  setAnimationStyle: (style: AnimationStyleId) => void;
+  setDuration: (duration: VideoDuration) => void;
+  setMusicMood: (mood: MusicMoodId) => void;
+  setCustomAudioUri: (uri: string | null) => void;
+  setMotionPrompt: (prompt: string) => void;
+  reset: () => void;
+}
+
+export interface ImageToVideoFormDefaults {
+  animationStyle?: AnimationStyleId;
+  duration?: VideoDuration;
+  musicMood?: MusicMoodId;
+}

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

@@ -3,11 +3,17 @@
  * Request, Result, Config types for image-to-video generation
  */
 
+import type { AnimationStyleId } from "./animation.types";
+import type { MusicMoodId } from "./music.types";
+import type { VideoDuration } from "./duration.types";
+
 export interface ImageToVideoOptions {
   duration?: number;
   motionStrength?: number;
   aspectRatio?: "16:9" | "9:16" | "1:1";
   fps?: number;
+  animationStyle?: AnimationStyleId;
+  musicMood?: MusicMoodId;
 }
 
 export interface ImageToVideoRequest {
@@ -16,6 +22,12 @@ export interface ImageToVideoRequest {
   userId: string;
   motionPrompt?: string;
   options?: ImageToVideoOptions;
+  allImages?: string[];
+  customAudioUri?: string | null;
+  animationStyle?: AnimationStyleId;
+  duration?: VideoDuration;
+  musicMood?: MusicMoodId;
+  model?: string;
 }
 
 export interface ImageToVideoResult {
@@ -26,6 +38,12 @@ export interface ImageToVideoResult {
   requestId?: string;
 }
 
+export interface ImageToVideoGenerationState {
+  isGenerating: boolean;
+  progress: number;
+  error: string | null;
+}
+
 export interface ImageToVideoFeatureState {
   imageUri: string | null;
   motionPrompt: string;

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

@@ -1,7 +1,32 @@
+// Animation Types
+export type { AnimationStyle, AnimationStyleId } from "./animation.types";
+
+// Music Types
+export type { MusicMood, MusicMoodId } from "./music.types";
+
+// Duration Types
+export type { VideoDuration, DurationOption } from "./duration.types";
+
+// Form Types
+export type {
+  ImageToVideoFormState,
+  ImageToVideoFormActions,
+  ImageToVideoFormDefaults,
+} from "./form.types";
+
+// Config Types
+export type {
+  ImageToVideoCallbacks,
+  ImageToVideoFormConfig,
+  ImageToVideoTranslationsExtended,
+} from "./config.types";
+
+// Core Feature Types
 export type {
   ImageToVideoOptions,
   ImageToVideoRequest,
   ImageToVideoResult,
+  ImageToVideoGenerationState,
   ImageToVideoFeatureState,
   ImageToVideoTranslations,
   ImageToVideoInputBuilder,

package/src/features/image-to-video/domain/types/music.types.ts

@@ -0,0 +1,21 @@
+/**
+ * Music Types for Image-to-Video
+ * Defines music mood options
+ */
+
+export interface MusicMood {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+}
+
+export type MusicMoodId =
+  | "none"
+  | "energetic"
+  | "calm"
+  | "happy"
+  | "emotional"
+  | "rhythmic"
+  | "custom"
+  | string;

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

@@ -12,7 +12,7 @@ import type {
   TextToImageFormDefaults,
 } from "./form.types";
 
-export interface GenerationRequest {
+export interface TextToImageGenerationRequest {
   prompt: string;
   model?: string;
   aspectRatio: AspectRatio;
@@ -24,20 +24,24 @@ export interface GenerationRequest {
   outputFormat?: OutputFormat;
 }
 
-export interface GenerationResultSuccess {
+export interface TextToImageGenerationResultSuccess {
   success: true;
   imageUrls: string[];
 }
 
-export interface GenerationResultError {
+export interface TextToImageGenerationResultError {
   success: false;
   error: string;
 }
 
-export type GenerationResult = GenerationResultSuccess | GenerationResultError;
+export type TextToImageGenerationResult =
+  | TextToImageGenerationResultSuccess
+  | TextToImageGenerationResultError;
 
 export interface TextToImageCallbacks {
-  executeGeneration: (request: GenerationRequest) => Promise<GenerationResult>;
+  executeGeneration: (
+    request: TextToImageGenerationRequest,
+  ) => Promise<TextToImageGenerationResult>;
   calculateCost: (numImages: NumImages, model?: string | null) => number;
   canAfford: (cost: number) => boolean;
   isAuthenticated: () => boolean;

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

@@ -17,10 +17,10 @@ export type {
 
 // Config types
 export type {
-  GenerationRequest,
-  GenerationResult,
-  GenerationResultSuccess,
-  GenerationResultError,
+  TextToImageGenerationRequest,
+  TextToImageGenerationResult,
+  TextToImageGenerationResultSuccess,
+  TextToImageGenerationResultError,
   TextToImageCallbacks,
   TextToImageFormConfig,
   TextToImageTranslations,

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

@@ -21,10 +21,10 @@ export type {
 
 // Config Types
 export type {
-  GenerationRequest,
-  GenerationResult,
-  GenerationResultSuccess,
-  GenerationResultError,
+  TextToImageGenerationRequest,
+  TextToImageGenerationResult,
+  TextToImageGenerationResultSuccess,
+  TextToImageGenerationResultError,
   TextToImageCallbacks,
   TextToImageFormConfig,
   TextToImageTranslations,

package/src/features/text-to-image/presentation/hooks/useGeneration.ts

@@ -7,8 +7,8 @@ import { useState, useCallback } from "react";
 import type {
   TextToImageFormState,
   TextToImageCallbacks,
-  GenerationResult,
-  GenerationRequest,
+  TextToImageGenerationResult,
+  TextToImageGenerationRequest,
 } from "../../domain/types";
 
 export interface GenerationState {
@@ -26,7 +26,7 @@ export interface UseGenerationOptions {
 export interface UseGenerationReturn {
   generationState: GenerationState;
   totalCost: number;
-  handleGenerate: () => Promise<GenerationResult | null>;
+  handleGenerate: () => Promise<TextToImageGenerationResult | null>;
 }
 
 const initialState: GenerationState = {
@@ -41,7 +41,7 @@ export function useGeneration(options: UseGenerationOptions): UseGenerationRetur
 
   const totalCost = callbacks.calculateCost(formState.numImages, formState.selectedModel);
 
-  const handleGenerate = useCallback(async (): Promise<GenerationResult | null> => {
+  const handleGenerate = useCallback(async (): Promise<TextToImageGenerationResult | null> => {
     const trimmedPrompt = formState.prompt.trim();
 
     if (!trimmedPrompt) {
@@ -61,7 +61,7 @@ export function useGeneration(options: UseGenerationOptions): UseGenerationRetur
 
     setGenerationState({ isGenerating: true, progress: 0, error: null });
 
-    const request: GenerationRequest = {
+    const request: TextToImageGenerationRequest = {
       prompt: trimmedPrompt,
       model: formState.selectedModel ?? undefined,
       aspectRatio: formState.aspectRatio,

package/src/features/text-to-voice/index.ts

@@ -8,20 +8,48 @@ export type {
   TextToVoiceOptions,
   TextToVoiceRequest,
   TextToVoiceResult,
-  TextToVoiceFeatureState,
-  TextToVoiceTranslations,
+  TextToVoiceGenerationState,
+  VoiceGeneration,
+  TextToVoiceFormState,
+  TextToVoiceFormSetters,
+  TextToVoiceFormReturn,
+  TextToVoiceFormConfig,
+  TextToVoiceTextInputProps,
+  TextToVoiceOptionalInputProps,
+  TextToVoiceExamplePromptsProps,
+  TextToVoiceGenerateButtonProps,
+  TextToVoiceAudioPlayerProps,
+  TextToVoiceErrorMessageProps,
+  TextToVoiceHeaderProps,
+  TextToVoiceScreenConfig,
+  TextToVoiceTranslationKeys,
   TextToVoiceInputBuilder,
   TextToVoiceResultExtractor,
   TextToVoiceFeatureConfig,
+  TextToVoiceExecuteOptions,
 } from "./domain";
 
 // Infrastructure Services
 export { executeTextToVoice, hasTextToVoiceSupport } from "./infrastructure";
-export type { ExecuteTextToVoiceOptions } from "./infrastructure";
 
 // Presentation Hooks
-export { useTextToVoiceFeature } from "./presentation";
+export {
+  useTextToVoiceForm,
+  useTextToVoiceGeneration,
+} from "./presentation";
+
 export type {
-  UseTextToVoiceFeatureProps,
-  UseTextToVoiceFeatureReturn,
+  UseTextToVoiceGenerationProps,
+  UseTextToVoiceGenerationReturn,
+} from "./presentation";
+
+// Presentation Components
+export {
+  TextToVoiceTextInput,
+  TextToVoiceOptionalInput,
+  TextToVoiceExamplePrompts,
+  TextToVoiceGenerateButton,
+  TextToVoiceAudioPlayer,
+  TextToVoiceErrorMessage,
+  TextToVoiceHeader,
 } from "./presentation";

package/src/features/text-to-voice/presentation/components/TextToVoiceAudioPlayer.tsx

@@ -0,0 +1,81 @@
+/**
+ * TextToVoiceAudioPlayer Component
+ * Audio player with play button
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { TextToVoiceAudioPlayerProps } from "../../domain/types";
+
+export const TextToVoiceAudioPlayer: React.FC<TextToVoiceAudioPlayerProps> = ({
+  onPlay,
+  successTextKey,
+  playButtonTextKey,
+  style,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={[styles.card, { backgroundColor: tokens.colors.surface }, style]}
+    >
+      <View style={styles.header}>
+        <AtomicIcon name="checkmark-circle" size="md" color="success" />
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.successText, { color: tokens.colors.success }]}
+        >
+          {t(successTextKey)}
+        </AtomicText>
+      </View>
+      <TouchableOpacity
+        style={[styles.playButton, { backgroundColor: tokens.colors.primary }]}
+        onPress={onPlay}
+      >
+        <AtomicIcon name="play" size="md" color="onPrimary" />
+        <AtomicText
+          type="bodyMedium"
+          style={[styles.buttonText, { color: tokens.colors.onPrimary }]}
+        >
+          {t(playButtonTextKey)}
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 16,
+    marginTop: 0,
+    padding: 16,
+    borderRadius: 12,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  successText: {
+    fontWeight: "600",
+    marginLeft: 8,
+  },
+  playButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 12,
+    borderRadius: 8,
+  },
+  buttonText: {
+    fontWeight: "600",
+    marginLeft: 8,
+  },
+});