@umituz/react-native-ai-generation-content 1.84.3 → 1.84.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.84.3",
+  "version": "1.84.5",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -84,6 +84,7 @@
     "expo-clipboard": "^8.0.8",
     "expo-crypto": "^15.0.8",
     "expo-device": "^8.0.10",
+    "expo-document-picker": "^14.0.8",
     "expo-file-system": "^19.0.21",
     "expo-font": "^14.0.10",
     "expo-haptics": "^15.0.8",

package/src/domain/entities/flow-step.types.ts

@@ -17,6 +17,7 @@ export enum StepType {
   PARTNER_UPLOAD = "partner_upload",
   TEXT_INPUT = "text_input",
   FEATURE_SELECTION = "feature_selection",
+  AUDIO_PICKER = "audio_picker",
   // Generation steps
   GENERATING = "generating",
   RESULT_PREVIEW = "result_preview",

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

@@ -27,6 +27,8 @@ interface GalleryResultPreviewProps {
   readonly onEdit?: (imageUrl: string) => void;
   /** Called when the user taps Edit on a video creation. */
   readonly onEditVideo?: (videoUrl: string) => void;
+  /** Called when the user taps Post to Feed. Omit to hide (apps without a feed). */
+  readonly onShareToFeed?: (creation: Creation) => void;
 }
 
 export function GalleryResultPreview({
@@ -43,6 +45,7 @@ export function GalleryResultPreview({
   onCloseRating,
   onEdit,
   onEditVideo,
+  onShareToFeed,
 }: GalleryResultPreviewProps) {
   const alert = useAlert();
 
@@ -69,6 +72,7 @@ export function GalleryResultPreview({
         onRate={onRate}
         onEdit={!videoUrl && imageUrl && onEdit ? () => onEdit(imageUrl) : undefined}
         onEditVideo={videoUrl && onEditVideo ? () => onEditVideo(videoUrl) : undefined}
+        onShareToFeed={onShareToFeed ? () => onShareToFeed(selectedCreation) : undefined}
         hideLabel
         iconOnly
         showTryAgain

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

@@ -189,6 +189,7 @@ export function CreationsGalleryScreen({
         onCloseRating={() => galleryState.setShowRatingPicker(false)}
         onEdit={onEdit}
         onEditVideo={onEditVideo}
+        onShareToFeed={onShareToFeed}
       />
     );
   }

package/src/domains/generation/wizard/configs/index.ts

@@ -6,3 +6,4 @@
 export { TEXT_TO_IMAGE_WIZARD_CONFIG } from "./text-to-image.config";
 export { TEXT_TO_VIDEO_WIZARD_CONFIG } from "./text-to-video.config";
 export { IMAGE_TO_VIDEO_WIZARD_CONFIG } from "./image-to-video.config";
+export { SOLO_VIDEO_WIZARD_CONFIG } from "./solo-video.config";

package/src/domains/generation/wizard/configs/solo-video.config.ts

@@ -0,0 +1,45 @@
+/**
+ * Solo Video Wizard Config
+ * Flow: Photo → Prompt (with info about two-step generation) → Audio (optional) → Generation
+ *
+ * Two-step generation:
+ * 1. Generate image from photo + prompt (nano-banana-2/edit)
+ * 2. Generate video from that image (I2V model)
+ */
+
+import type { WizardFeatureConfig } from "../domain/entities/wizard-feature.types";
+
+export const SOLO_VIDEO_WIZARD_CONFIG: WizardFeatureConfig = {
+  id: "solo-video",
+  name: "Solo Video",
+  steps: [
+    {
+      id: "photo_1",
+      type: "photo_upload",
+      titleKey: "soloVideo.selectPhoto",
+      subtitleKey: "soloVideo.selectPhotoHint",
+      showFaceDetection: false,
+      showPhotoTips: true,
+      required: true,
+    },
+    {
+      id: "video_prompt",
+      type: "text_input",
+      titleKey: "soloVideo.prompt",
+      subtitleKey: "soloVideo.promptInfo",
+      placeholderKey: "soloVideo.promptPlaceholder",
+      required: true,
+      minLength: 3,
+      maxLength: 500,
+      multiline: true,
+    },
+    {
+      id: "background_audio",
+      type: "audio_picker",
+      titleKey: "soloVideo.audioTitle",
+      subtitleKey: "soloVideo.audioSubtitle",
+      required: false,
+      maxFileSizeMB: 20,
+    },
+  ],
+};

package/src/domains/generation/wizard/domain/entities/wizard-step.types.ts

@@ -84,6 +84,17 @@ export interface CreditGateStepConfig extends BaseStepConfig {
   readonly messageKey?: string;
 }
 
+/**
+ * Audio Picker Step Configuration
+ */
+export interface AudioPickerStepConfig extends BaseStepConfig {
+  readonly type: "audio_picker";
+  /** Allowed MIME types (default: audio/mpeg, audio/mp4, audio/wav, audio/aac) */
+  readonly allowedTypes?: readonly string[];
+  /** Max file size in MB (default: 20) */
+  readonly maxFileSizeMB?: number;
+}
+
 /**
  * Union of all step config types
  */
@@ -94,4 +105,5 @@ export type WizardStepConfig =
   | TextInputStepConfig
   | SelectionStepConfig
   | PreviewStepConfig
+  | AudioPickerStepConfig
   | BaseStepConfig;

package/src/domains/generation/wizard/index.ts

@@ -13,6 +13,7 @@ export type {
   TextInputStepConfig,
   SelectionStepConfig,
   PreviewStepConfig,
+  AudioPickerStepConfig,
   WizardStepConfig,
 } from "./domain/entities/wizard-step.types";
 
@@ -70,11 +71,13 @@ export { GenericWizardFlow } from "./presentation/components";
 export type { GenericWizardFlowProps } from "./presentation/components";
 
 // Presentation - Screens
-export { GeneratingScreen, TextInputScreen } from "./presentation/screens";
+export { GeneratingScreen, TextInputScreen, AudioPickerScreen } from "./presentation/screens";
 export type {
   TextInputScreenTranslations,
   TextInputScreenConfig,
   TextInputScreenProps,
+  AudioPickerScreenTranslations,
+  AudioPickerScreenProps,
 } from "./presentation/screens";
 
 // Feature Configs
@@ -82,4 +85,5 @@ export {
   TEXT_TO_IMAGE_WIZARD_CONFIG,
   TEXT_TO_VIDEO_WIZARD_CONFIG,
   IMAGE_TO_VIDEO_WIZARD_CONFIG,
+  SOLO_VIDEO_WIZARD_CONFIG,
 } from "./configs";

package/src/domains/generation/wizard/infrastructure/builders/dynamic-step-builder.ts

@@ -20,6 +20,7 @@ const convertToFlowStep = (wizardStep: WizardStepConfig): StepDefinition => {
     text_input: StepType.TEXT_INPUT,
     selection: StepType.FEATURE_SELECTION,
     preview: StepType.SCENARIO_PREVIEW,
+    audio_picker: StepType.AUDIO_PICKER,
   };
 
   return {

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.tsx

@@ -12,6 +12,7 @@ import { renderPreviewStep } from "./step-renderers/renderPreviewStep";
 import { renderPhotoUploadStep } from "./step-renderers/renderPhotoUploadStep";
 import { renderTextInputStep } from "./step-renderers/renderTextInputStep";
 import { renderSelectionStep } from "./step-renderers/renderSelectionStep";
+import { renderAudioPickerStep } from "./step-renderers/renderAudioPickerStep";
 import type { WizardStepRendererProps } from "./WizardStepRenderer.types";
 
 export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
@@ -97,6 +98,9 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
     case StepType.FEATURE_SELECTION:
       return renderSelectionStep({ key: step.id, step, customData, onBack, onPhotoContinue, calculateCreditForSelection, t, creditCost });
 
+    case StepType.AUDIO_PICKER:
+      return renderAudioPickerStep({ key: step.id, step, onBack, onPhotoContinue, t, creditCost });
+
     default:
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.warn("[WizardStepRenderer] Unhandled step type", { stepType: step.type });

package/src/domains/generation/wizard/presentation/components/WizardStepRenderer.utils.ts

@@ -2,6 +2,7 @@ import type {
   WizardStepConfig,
   TextInputStepConfig,
   SelectionStepConfig,
+  AudioPickerStepConfig,
 } from "../../domain/entities/wizard-step.types";
 import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
 
@@ -51,3 +52,9 @@ export function getTextInputValue(data: unknown): string | undefined {
   if (isRecord(data) && "text" in data) return String(data.text);
   return undefined;
 }
+
+export function getAudioPickerConfig(config: unknown): AudioPickerStepConfig | undefined {
+  if (!isRecord(config)) return undefined;
+  if (config.type === "audio_picker") return config as unknown as AudioPickerStepConfig;
+  return undefined;
+}

package/src/domains/generation/wizard/presentation/components/step-renderers/renderAudioPickerStep.tsx

@@ -0,0 +1,56 @@
+/**
+ * Audio Picker Step Renderer
+ */
+
+import React from "react";
+import { AudioPickerScreen } from "../../screens/AudioPickerScreen";
+import { getAudioPickerConfig } from "../WizardStepRenderer.utils";
+import type { StepDefinition } from "../../../../../../domain/entities/flow-config.types";
+import type { UploadedImage } from "../../../../../../presentation/hooks/generation/useAIGenerateState";
+
+interface AudioPickerStepProps {
+  readonly key?: string;
+  readonly step: StepDefinition;
+  readonly onBack: () => void;
+  readonly onPhotoContinue: (stepId: string, image: UploadedImage) => void;
+  readonly t: (key: string) => string;
+  readonly creditCost?: number;
+}
+
+export function renderAudioPickerStep({
+  step,
+  onBack,
+  onPhotoContinue,
+  t,
+  creditCost,
+}: AudioPickerStepProps): React.ReactElement {
+  const audioConfig = getAudioPickerConfig(step.config);
+  const titleKey = audioConfig?.titleKey ?? `wizard.steps.${step.id}.title`;
+  const subtitleKey = audioConfig?.subtitleKey ?? `wizard.steps.${step.id}.subtitle`;
+  const isOptional = !(step.required ?? true);
+
+  return (
+    <AudioPickerScreen
+      key={step.id}
+      stepId={step.id}
+      translations={{
+        title: t(titleKey),
+        subtitle: subtitleKey ? t(subtitleKey) : undefined,
+        selectButton: t("audioPicker.selectFile"),
+        skipButton: t("audioPicker.skip"),
+        continueButton: t("common.continue"),
+        selectedLabel: t("audioPicker.selected"),
+        fileTooLarge: t("common.errors.file_too_large"),
+        unsupportedFormat: t("audioPicker.unsupportedFormat"),
+      }}
+      allowedTypes={audioConfig?.allowedTypes as string[] | undefined}
+      maxFileSizeMB={audioConfig?.maxFileSizeMB}
+      optional={isOptional}
+      creditCost={creditCost}
+      onBack={onBack}
+      onContinue={(audioUri) => {
+        onPhotoContinue(step.id, { uri: audioUri, previewUrl: "" } as UploadedImage);
+      }}
+    />
+  );
+}

package/src/domains/generation/wizard/presentation/screens/AudioPickerScreen.tsx

@@ -0,0 +1,222 @@
+/**
+ * AudioPickerScreen
+ * Allows users to pick an audio file (mp3, m4a, wav) for video generation.
+ * Supports optional skip. Uses expo-document-picker.
+ */
+
+import React, { useState, useCallback, useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import * as DocumentPicker from "expo-document-picker";
+import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
+import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
+import { NavigationHeader } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system/theme";
+import { WizardContinueButton } from "../components/WizardContinueButton";
+import type { AudioPickerScreenProps } from "./AudioPickerScreen.types";
+
+export type {
+  AudioPickerScreenTranslations,
+  AudioPickerScreenProps,
+} from "./AudioPickerScreen.types";
+
+const DEFAULT_AUDIO_TYPES = [
+  "audio/mpeg",
+  "audio/mp4",
+  "audio/wav",
+  "audio/aac",
+  "audio/x-m4a",
+];
+
+const DEFAULT_MAX_SIZE_MB = 20;
+
+export const AudioPickerScreen: React.FC<AudioPickerScreenProps> = ({
+  stepId: _stepId,
+  translations,
+  allowedTypes,
+  maxFileSizeMB,
+  optional = true,
+  creditCost,
+  onBack,
+  onContinue,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [selectedFile, setSelectedFile] = useState<{
+    uri: string;
+    name: string;
+    size?: number;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const maxSize = (maxFileSizeMB ?? DEFAULT_MAX_SIZE_MB) * 1024 * 1024;
+  const mimeTypes = allowedTypes ?? DEFAULT_AUDIO_TYPES;
+
+  const handlePick = useCallback(async () => {
+    try {
+      setError(null);
+      const result = await DocumentPicker.getDocumentAsync({
+        type: mimeTypes as string[],
+        copyToCacheDirectory: true,
+      });
+
+      if (result.canceled || !result.assets?.length) return;
+
+      const asset = result.assets[0];
+
+      if (asset.size && asset.size > maxSize) {
+        setError(
+          translations.fileTooLarge ??
+            `File too large. Max ${maxFileSizeMB ?? DEFAULT_MAX_SIZE_MB}MB.`
+        );
+        return;
+      }
+
+      setSelectedFile({
+        uri: asset.uri,
+        name: asset.name,
+        size: asset.size ?? undefined,
+      });
+    } catch {
+      if (__DEV__) {
+        console.warn("[AudioPickerScreen] Failed to pick document");
+      }
+    }
+  }, [mimeTypes, maxSize, maxFileSizeMB, translations]);
+
+  const handleContinue = useCallback(() => {
+    onContinue(selectedFile?.uri ?? "");
+  }, [selectedFile, onContinue]);
+
+  const handleSkip = useCallback(() => {
+    onContinue("");
+  }, [onContinue]);
+
+  const formatFileSize = useCallback((bytes?: number) => {
+    if (!bytes) return "";
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }, []);
+
+  const canContinue = !!selectedFile || optional;
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
+      <NavigationHeader
+        title=""
+        onBackPress={onBack}
+        rightElement={
+          <WizardContinueButton
+            label={translations.continueButton}
+            canContinue={canContinue}
+            onPress={handleContinue}
+            creditCost={creditCost}
+          />
+        }
+      />
+      <ScreenLayout
+        scrollable={true}
+        edges={["left", "right"]}
+        hideScrollIndicator={true}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <AtomicText type="headlineMedium" color="textPrimary" style={styles.title}>
+          {translations.title}
+        </AtomicText>
+
+        {translations.subtitle ? (
+          <AtomicText type="bodyMedium" color="textSecondary" style={styles.subtitle}>
+            {translations.subtitle}
+          </AtomicText>
+        ) : null}
+
+        {selectedFile ? (
+          <View style={styles.selectedContainer}>
+            <AtomicText type="labelLarge" color="textPrimary" style={styles.fileName}>
+              {selectedFile.name}
+            </AtomicText>
+            {selectedFile.size ? (
+              <AtomicText type="bodySmall" color="textTertiary">
+                {formatFileSize(selectedFile.size)}
+              </AtomicText>
+            ) : null}
+            <AtomicButton
+              variant="outline"
+              size="sm"
+              onPress={handlePick}
+              style={styles.changeButton}
+            >
+              {translations.selectButton}
+            </AtomicButton>
+          </View>
+        ) : (
+          <AtomicButton
+            variant="outline"
+            size="md"
+            onPress={handlePick}
+            style={styles.pickButton}
+          >
+            {translations.selectButton}
+          </AtomicButton>
+        )}
+
+        {error ? (
+          <AtomicText type="bodySmall" color="error" style={styles.error}>
+            {error}
+          </AtomicText>
+        ) : null}
+
+        {optional && !selectedFile ? (
+          <AtomicButton
+            variant="ghost"
+            size="sm"
+            onPress={handleSkip}
+            style={styles.skipButton}
+          >
+            {translations.skipButton}
+          </AtomicButton>
+        ) : null}
+      </ScreenLayout>
+    </View>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    scrollContent: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingBottom: 40,
+    },
+    title: {
+      marginBottom: tokens.spacing.sm,
+    },
+    subtitle: {
+      marginBottom: tokens.spacing.xl,
+    },
+    selectedContainer: {
+      backgroundColor: tokens.colors.backgroundSecondary,
+      borderRadius: tokens.borders.radius.md,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+      padding: tokens.spacing.lg,
+      alignItems: "center",
+      gap: tokens.spacing.sm,
+    },
+    fileName: {
+      textAlign: "center",
+    },
+    changeButton: {
+      marginTop: tokens.spacing.sm,
+    },
+    pickButton: {
+      marginTop: tokens.spacing.md,
+    },
+    error: {
+      marginTop: tokens.spacing.sm,
+      textAlign: "center",
+    },
+    skipButton: {
+      marginTop: tokens.spacing.lg,
+      alignSelf: "center",
+    },
+  });

package/src/domains/generation/wizard/presentation/screens/AudioPickerScreen.types.ts

@@ -0,0 +1,30 @@
+/**
+ * AudioPickerScreen Types
+ */
+
+export interface AudioPickerScreenTranslations {
+  readonly title: string;
+  readonly subtitle?: string;
+  readonly selectButton: string;
+  readonly skipButton: string;
+  readonly continueButton: string;
+  readonly selectedLabel: string;
+  readonly fileTooLarge?: string;
+  readonly unsupportedFormat?: string;
+}
+
+export interface AudioPickerScreenProps {
+  readonly stepId: string;
+  readonly translations: AudioPickerScreenTranslations;
+  /** Allowed MIME types */
+  readonly allowedTypes?: readonly string[];
+  /** Max file size in MB */
+  readonly maxFileSizeMB?: number;
+  /** Whether this step can be skipped */
+  readonly optional?: boolean;
+  /** Calculated credit cost from parent */
+  readonly creditCost?: number;
+  readonly onBack: () => void;
+  /** Called with audio URI, or empty string if skipped */
+  readonly onContinue: (audioUri: string) => void;
+}

package/src/domains/generation/wizard/presentation/screens/index.ts

@@ -5,3 +5,8 @@ export type {
   TextInputScreenConfig,
   TextInputScreenProps,
 } from "./TextInputScreen";
+export { AudioPickerScreen } from "./AudioPickerScreen";
+export type {
+  AudioPickerScreenTranslations,
+  AudioPickerScreenProps,
+} from "./AudioPickerScreen";

package/src/domains/result-preview/presentation/components/ResultActionBar.tsx

@@ -25,6 +25,7 @@ export const ResultActionBar: React.FC<ResultActionBarProps> = ({
   showRating = false,
   onEdit,
   onEditVideo,
+  onShareToFeed,
 }) => {
   const tokens = useAppDesignTokens();
   const { minTouchTarget } = useResponsive();
@@ -134,6 +135,15 @@ export const ResultActionBar: React.FC<ResultActionBarProps> = ({
             <AtomicIcon name="video" customSize={20} color="onPrimary" />
           </TouchableOpacity>
         )}
+        {onShareToFeed && (
+          <TouchableOpacity
+            style={styles.iconButton}
+            onPress={onShareToFeed}
+            activeOpacity={0.7}
+          >
+            <AtomicIcon name="send" customSize={20} color="onPrimary" />
+          </TouchableOpacity>
+        )}
       </View>
     );
   }

package/src/domains/result-preview/presentation/components/ResultPreviewScreen.tsx

@@ -23,6 +23,7 @@ export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
   onRate,
   onEdit,
   onEditVideo,
+  onShareToFeed,
   recentCreations,
   onViewAll,
   onCreationPress,
@@ -75,6 +76,7 @@ export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
             onRate={onRate}
             onEdit={onEdit}
             onEditVideo={onEditVideo}
+            onShareToFeed={onShareToFeed}
             saveButtonText={translations.saveButton}
             shareButtonText={translations.shareButton}
             tryAgainButtonText={translations.tryAnother}

package/src/domains/result-preview/presentation/types/result-components.types.ts

@@ -48,4 +48,6 @@ export interface ResultActionBarProps {
   onEdit?: () => void;
   /** Edit video button callback — only shown in iconOnly mode when provided */
   onEditVideo?: () => void;
+  /** Post to feed callback — when provided, shows a "send" button. Omit to hide (apps without a feed). */
+  onShareToFeed?: () => void;
 }

package/src/domains/result-preview/presentation/types/result-screen.types.ts

@@ -26,6 +26,8 @@ export interface ResultPreviewScreenProps {
   onEdit?: () => void;
   /** Edit video callback — opens video editor for the result video */
   onEditVideo?: () => void;
+  /** Post to feed callback — when provided, shows a send button. Omit to hide (apps without a feed). */
+  onShareToFeed?: () => void;
   /** Recent creations to display */
   recentCreations?: readonly RecentCreation[];
   /** Navigate to all creations */

package/src/index.ts

@@ -29,6 +29,7 @@ export {
   TEXT_TO_IMAGE_WIZARD_CONFIG,
   TEXT_TO_VIDEO_WIZARD_CONFIG,
   IMAGE_TO_VIDEO_WIZARD_CONFIG,
+  SOLO_VIDEO_WIZARD_CONFIG,
 } from "./domains/generation/wizard";
 export type { WizardScenarioData } from "./domains/generation/wizard";