@umituz/react-native-ai-generation-content 1.26.55 → 1.26.57

package/package.json

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

package/src/domains/generation/wizard/infrastructure/utils/media-url-extractor.ts

@@ -0,0 +1,35 @@
+export interface MediaUrlResult {
+  readonly url: string;
+  readonly isVideo: boolean;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function findStringValue(obj: Record<string, unknown>, keys: string[]): string | undefined {
+  for (const key of keys) {
+    const value = obj[key];
+    if (typeof value === "string" && value.length > 0) return value;
+  }
+  return undefined;
+}
+
+export function extractMediaUrl(result: unknown): MediaUrlResult | null {
+  if (!isRecord(result)) return null;
+
+  const output = isRecord(result.output) ? result.output : undefined;
+  const sources = output ? [output, result] : [result];
+
+  for (const source of sources) {
+    const videoUrl = findStringValue(source, ["videoUrl", "video_url"]);
+    if (videoUrl) return { url: videoUrl, isVideo: true };
+  }
+
+  for (const source of sources) {
+    const imageUrl = findStringValue(source, ["imageUrl", "image_url", "uri"]);
+    if (imageUrl) return { url: imageUrl, isVideo: false };
+  }
+
+  return null;
+}

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

@@ -1,38 +1,15 @@
-/**
- * Wizard Step Renderer Component
- * Renders the appropriate screen based on current step type
- */
-
 import React from "react";
-import { StepType, type StepDefinition } from "../../../../../domain/entities/flow-config.types";
-import type { WizardStepConfig } from "../../domain/entities/wizard-config.types";
-import type { WizardScenarioData } from "../hooks/useWizardGeneration";
-import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
+import { getMediaTypeFromUrl } from "@umituz/react-native-design-system";
+import { StepType } from "../../../../../domain/entities/flow-config.types";
 import { GenericPhotoUploadScreen } from "../screens/GenericPhotoUploadScreen";
 import { GeneratingScreen } from "../screens/GeneratingScreen";
 import { ScenarioPreviewScreen } from "../../../../scenarios/presentation/screens/ScenarioPreviewScreen";
-import type { ScenarioData } from "../../../../scenarios/domain/scenario.types";
 import { ResultPreviewScreen } from "../../../../result-preview/presentation/components/ResultPreviewScreen";
+import { extractMediaUrl } from "../../infrastructure/utils/media-url-extractor";
+import { getWizardStepConfig, getUploadedImage } from "./WizardStepRenderer.utils";
+import type { WizardStepRendererProps } from "./WizardStepRenderer.types";
 
-export interface WizardStepRendererProps {
-  readonly step: StepDefinition | undefined;
-  readonly scenario?: WizardScenarioData;
-  readonly customData: Record<string, unknown>;
-  readonly generationProgress: number;
-  readonly generationResult: unknown;
-  readonly isSaving: boolean;
-  readonly isSharing: boolean;
-  readonly onNext: () => void;
-  readonly onBack: () => void;
-  readonly onPhotoContinue: (stepId: string, image: UploadedImage) => void;
-  readonly onDownload: () => void;
-  readonly onShare: () => void;
-  readonly onTryAgain?: () => void;
-  readonly t: (key: string) => string;
-  readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
-  readonly renderGenerating?: (progress: number) => React.ReactElement | null;
-  readonly renderResult?: (result: unknown) => React.ReactElement | null;
-}
+export type { WizardStepRendererProps } from "./WizardStepRenderer.types";
 
 export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
   step,
@@ -62,13 +39,11 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
 
   switch (step.type) {
     case StepType.SCENARIO_PREVIEW: {
-      if (renderPreview) {
-        return renderPreview(onNext);
-      }
+      if (renderPreview) return renderPreview(onNext);
       if (!scenario) return null;
       return (
         <ScenarioPreviewScreen
-          scenario={scenario as unknown as ScenarioData}
+          scenario={scenario}
           translations={{
             continueButton: t("common.continue"),
             whatToExpect: t("scenarioPreview.whatToExpect"),
@@ -81,35 +56,30 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
     }
 
     case StepType.GENERATING: {
-      if (renderGenerating) {
-        return renderGenerating(generationProgress);
-      }
+      if (renderGenerating) return renderGenerating(generationProgress);
       return (
-        <GeneratingScreen
-          progress={generationProgress}
-          scenario={scenario}
-          t={t}
-        />
+        <GeneratingScreen progress={generationProgress} scenario={scenario} t={t} />
       );
     }
 
     case StepType.RESULT_PREVIEW: {
-      if (renderResult) {
-        return renderResult(generationResult);
-      }
-      const creation = generationResult as Record<string, unknown>;
-      const output = creation?.output as Record<string, unknown> | undefined;
-      const imageUrl = output?.imageUrl || creation?.uri || creation?.imageUrl || "";
-      if (!imageUrl || typeof imageUrl !== "string") return null;
+      if (renderResult) return renderResult(generationResult);
+      const media = extractMediaUrl(generationResult);
+      if (!media) return null;
+
+      const isVideo = media.isVideo || getMediaTypeFromUrl(media.url) === "video";
+      const handleTryAgain = onTryAgain ?? onBack;
+
       return (
         <ResultPreviewScreen
-          imageUrl={imageUrl}
+          imageUrl={isVideo ? undefined : media.url}
+          videoUrl={isVideo ? media.url : undefined}
           isSaving={isSaving}
           isSharing={isSharing}
           onDownload={onDownload}
           onShare={onShare}
-          onTryAgain={onTryAgain || onBack}
-          onNavigateBack={onTryAgain || onBack}
+          onTryAgain={handleTryAgain}
+          onNavigateBack={handleTryAgain}
           translations={{
             title: t("generation.result.title"),
             yourResult: t("generation.result.yourResult"),
@@ -124,10 +94,10 @@ export const WizardStepRenderer: React.FC<WizardStepRendererProps> = ({
     }
 
     case StepType.PARTNER_UPLOAD: {
-      const wizardConfig = step.config as WizardStepConfig;
-      const titleKey = wizardConfig?.titleKey || `wizard.steps.${step.id}.title`;
-      const subtitleKey = wizardConfig?.subtitleKey || `wizard.steps.${step.id}.subtitle`;
-      const existingPhoto = customData[step.id] as UploadedImage | undefined;
+      const wizardConfig = getWizardStepConfig(step.config);
+      const titleKey = wizardConfig?.titleKey ?? `wizard.steps.${step.id}.title`;
+      const subtitleKey = wizardConfig?.subtitleKey ?? `wizard.steps.${step.id}.subtitle`;
+      const existingPhoto = getUploadedImage(customData[step.id]);
 
       return (
         <GenericPhotoUploadScreen

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

@@ -0,0 +1,23 @@
+import type { StepDefinition } from "../../../../../domain/entities/flow-config.types";
+import type { WizardScenarioData } from "../hooks/useWizardGeneration";
+import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
+
+export interface WizardStepRendererProps {
+  readonly step: StepDefinition | undefined;
+  readonly scenario?: WizardScenarioData;
+  readonly customData: Record<string, unknown>;
+  readonly generationProgress: number;
+  readonly generationResult: unknown;
+  readonly isSaving: boolean;
+  readonly isSharing: boolean;
+  readonly onNext: () => void;
+  readonly onBack: () => void;
+  readonly onPhotoContinue: (stepId: string, image: UploadedImage) => void;
+  readonly onDownload: () => void;
+  readonly onShare: () => void;
+  readonly onTryAgain?: () => void;
+  readonly t: (key: string) => string;
+  readonly renderPreview?: (onContinue: () => void) => React.ReactElement | null;
+  readonly renderGenerating?: (progress: number) => React.ReactElement | null;
+  readonly renderResult?: (result: unknown) => React.ReactElement | null;
+}

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

@@ -0,0 +1,25 @@
+import type { WizardStepConfig } from "../../domain/entities/wizard-config.types";
+import type { UploadedImage } from "../../../../../presentation/hooks/generation/useAIGenerateState";
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function isWizardStepConfig(value: unknown): value is WizardStepConfig {
+  return isRecord(value);
+}
+
+function isUploadedImage(value: unknown): value is UploadedImage {
+  if (!isRecord(value)) return false;
+  return typeof value.uri === "string";
+}
+
+export function getWizardStepConfig(config: unknown): WizardStepConfig | undefined {
+  if (isWizardStepConfig(config)) return config;
+  return undefined;
+}
+
+export function getUploadedImage(data: unknown): UploadedImage | undefined {
+  if (isUploadedImage(data)) return data;
+  return undefined;
+}

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

@@ -1,8 +1,3 @@
-/**
- * ResultPreviewScreen Component
- * Displays AI generation result with actions
- */
-
 import React, { useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import {
@@ -14,10 +9,13 @@ import {
 import { ResultImageCard } from "./ResultImageCard";
 import { ResultActionBar } from "./ResultActionBar";
 import { RecentCreationsSection } from "./RecentCreationsSection";
+import { VideoResultPlayer } from "../../../../presentation/components/display/VideoResultPlayer";
 import type { ResultPreviewScreenProps } from "../types/result-preview.types";
+import { formatMediaUrl, shouldShowRecentCreations } from "./ResultPreviewScreen.utils";
 
 export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
   imageUrl,
+  videoUrl,
   isSaving,
   isSharing,
   onDownload,
@@ -36,17 +34,17 @@ export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
   showRating = false,
 }) => {
   const tokens = useAppDesignTokens();
+  const isVideo = Boolean(videoUrl);
+  const displayMediaUrl = useMemo(
+    () => formatMediaUrl(videoUrl, imageUrl, isVideo),
+    [imageUrl, videoUrl, isVideo]
+  );
 
   const styles = useMemo(
     () =>
       StyleSheet.create({
-        container: {
-          flex: 1,
-          paddingHorizontal: tokens.spacing.lg,
-        },
-        resultContainer: {
-          marginTop: tokens.spacing.lg,
-        },
+        container: { flex: 1, paddingHorizontal: tokens.spacing.lg },
+        resultContainer: { marginTop: tokens.spacing.lg },
         title: {
           fontSize: 18,
           fontWeight: "700",
@@ -54,28 +52,20 @@ export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
           marginBottom: tokens.spacing.md,
         },
       }),
-    [tokens],
+    [tokens]
   );
 
-  const displayImageUrl = useMemo(() => {
-    if (!imageUrl) return null;
-    if (!imageUrl.startsWith("http") && !imageUrl.startsWith("data:image")) {
-      return `data:image/jpeg;base64,${imageUrl}`;
-    }
-    return imageUrl;
-  }, [imageUrl]);
+  if (!displayMediaUrl) return null;
 
-  if (!displayImageUrl) return null;
+  const showRecent = shouldShowRecentCreations(recentCreations, translations);
 
   return (
     <ScreenLayout scrollable edges={["left", "right"]} backgroundColor={tokens.colors.backgroundPrimary}>
       <NavigationHeader title={translations.title} onBackPress={onNavigateBack} />
       <View style={[styles.container, style]}>
         <View style={styles.resultContainer}>
-          {!hideLabel && (
-            <AtomicText style={styles.title}>{translations.yourResult}</AtomicText>
-          )}
-          <ResultImageCard imageUrl={displayImageUrl} />
+          {!hideLabel && <AtomicText style={styles.title}>{translations.yourResult}</AtomicText>}
+          {isVideo ? <VideoResultPlayer uri={displayMediaUrl} /> : <ResultImageCard imageUrl={displayMediaUrl} />}
           <ResultActionBar
             isSaving={isSaving}
             isSharing={isSharing}
@@ -91,13 +81,13 @@ export const ResultPreviewScreen: React.FC<ResultPreviewScreenProps> = ({
             showRating={showRating}
           />
         </View>
-        {recentCreations && recentCreations.length > 0 && translations.recentCreations && translations.viewAll && (
+        {showRecent && (
           <RecentCreationsSection
-            recentCreations={recentCreations}
+            recentCreations={recentCreations!}
             onViewAll={onViewAll}
             onCreationPress={onCreationPress}
-            title={translations.recentCreations}
-            viewAllLabel={translations.viewAll}
+            title={translations.recentCreations!}
+            viewAllLabel={translations.viewAll!}
           />
         )}
       </View>

package/src/domains/result-preview/presentation/components/ResultPreviewScreen.utils.ts

@@ -0,0 +1,27 @@
+import type { RecentCreation, ResultPreviewTranslations } from "../types/result-preview.types";
+
+export function formatMediaUrl(
+  videoUrl: string | undefined,
+  imageUrl: string | undefined,
+  isVideo: boolean
+): string | null {
+  const url = videoUrl ?? imageUrl;
+  if (!url) return null;
+
+  if (!isVideo && !url.startsWith("http") && !url.startsWith("data:image")) {
+    return `data:image/jpeg;base64,${url}`;
+  }
+  return url;
+}
+
+export function shouldShowRecentCreations(
+  recentCreations: readonly RecentCreation[] | undefined,
+  translations: ResultPreviewTranslations
+): boolean {
+  return Boolean(
+    recentCreations &&
+    recentCreations.length > 0 &&
+    translations.recentCreations &&
+    translations.viewAll
+  );
+}

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

@@ -94,8 +94,10 @@ export interface RecentCreation {
  * Result preview screen props
  */
 export interface ResultPreviewScreenProps {
-  /** Result data to display */
-  imageUrl: string;
+  /** Image URL to display */
+  imageUrl?: string;
+  /** Video URL to display */
+  videoUrl?: string;
   /** Result display state */
   isSaving: boolean;
   isSharing: boolean;
@@ -157,6 +159,8 @@ export interface ResultPreviewTranslations {
 export interface UseResultActionsOptions {
   /** Image URL to save/share */
   imageUrl?: string;
+  /** Video URL to save/share */
+  videoUrl?: string;
   /** Callback on save success */
   onSaveSuccess?: () => void;
   /** Callback on save error */