@umituz/react-native-ai-generation-content 1.20.32 → 1.20.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.20.32",
+  "version": "1.20.34",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -48,7 +48,8 @@
     "firebase": ">=10.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.74.0",
-    "react-native-safe-area-context": ">=4.0.0"
+    "react-native-safe-area-context": ">=4.0.0",
+    "expo-video": ">=1.0.0"
   },
   "devDependencies": {
     "@expo/vector-icons": "^15.0.3",

package/src/presentation/components/flows/AIGenerateWizardFlow.tsx

@@ -17,6 +17,23 @@ import { AIGenerationResult } from "../display/AIGenerationResult";
 import { AIGenerateStep } from "../../hooks/generation/useAIGenerateState";
 import { useAIGenerateWizardFlow } from "./useAIGenerateWizardFlow";
 import { AIGenerateWizardFlowProps } from "./AIGenerateWizardFlow.types";
+import { useVideoPlayer, VideoView } from "expo-video";
+
+const VideoResultPlayer = ({ uri }: { uri: string }) => {
+  const player = useVideoPlayer(uri, player => {
+    player.loop = true;
+    player.play();
+  });
+
+  return (
+    <VideoView
+      style={{ width: "100%", aspectRatio: 2 / 3, borderRadius: 16 }}
+      player={player}
+      contentFit="cover"
+      nativeControls
+    />
+  );
+};
 
 export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
   featureType,
@@ -114,16 +131,8 @@ export const AIGenerateWizardFlow: React.FC<AIGenerateWizardFlowProps> = ({
               icon: "refresh",
             }}
           >
-            {isVideo ? (
-               // TODO: Use correct video player component if available in design system, 
-               // for now rendering Image with play icon overlay or similar approach is standard if no player passed.
-               // However, ideally we should use <Video> generic component.
-               // Assuming standard <Image> for now but we should address this.
-               // Let's use a conditional or comment.
-               <View style={{ width: "100%", aspectRatio: 2 / 3, borderRadius: 16, backgroundColor: "#000", justifyContent: 'center', alignItems: 'center' }}>
-                  <AtomicText style={{ color: "white" }}>Video Result: {result ? "Ready" : "Error"}</AtomicText>
-                  {/* Real implementation should use expo-video or similar */}
-               </View>
+            {isVideo && result ? (
+               <VideoResultPlayer uri={result} />
             ) : (
               <Image source={{ uri: result || "" }} style={{ width: "100%", aspectRatio: 2 / 3, borderRadius: 16 }} resizeMode="cover" />
             )}

package/src/presentation/components/flows/useAIGenerateWizardFlow.ts

@@ -82,8 +82,10 @@ export function useAIGenerateWizardFlow({
         duration: selectedDuration,
         images,
       });
-      setResult(output);
-      setCurrentStep(AIGenerateStep.RESULT);
+      if (output) {
+        setResult(output);
+        setCurrentStep(AIGenerateStep.RESULT);
+      }
     } catch (error) {
       console.error("Generation failed", error);
       setCurrentStep(AIGenerateStep.CONFIG);