@umituz/react-native-ai-generation-content 1.17.124 → 1.17.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.124",
+  "version": "1.17.127",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -44,7 +44,8 @@
     "@umituz/react-native-offline": "latest",
     "@umituz/react-native-tanstack": "latest",
     "@umituz/react-native-timezone": "latest",
-    "@umituz/react-native-uuid": "latest"
+    "@umituz/react-native-uuid": "latest",
+    "@umituz/react-native-video-editor": "latest"
   },
   "peerDependencies": {
     "@react-navigation/native": ">=6.0.0",
@@ -77,6 +78,7 @@
     "@umituz/react-native-tanstack": "latest",
     "@umituz/react-native-timezone": "latest",
     "@umituz/react-native-uuid": "latest",
+    "@umituz/react-native-video-editor": "latest",
     "eslint": "^9.0.0",
     "expo-application": "^7.0.8",
     "expo-clipboard": "^8.0.8",

package/src/domains/creations/presentation/components/CreationDetail/DetailVideo.tsx

@@ -3,11 +3,9 @@
  * Video player with thumbnail and play controls for creation detail view
  */
 
-import React, { useState, useCallback } from "react";
-import { View, StyleSheet, TouchableOpacity, useWindowDimensions } from "react-native";
-import { useAppDesignTokens, AtomicIcon } from "@umituz/react-native-design-system";
-import { Image } from "expo-image";
-import { useVideoPlayer, VideoView, type VideoPlayer } from "expo-video";
+import React from "react";
+import { View, StyleSheet, useWindowDimensions } from "react-native";
+import { VideoPlayer } from "@umituz/react-native-video-editor";
 
 interface DetailVideoProps {
   readonly videoUrl: string;
@@ -15,60 +13,24 @@ interface DetailVideoProps {
 }
 
 const HORIZONTAL_PADDING = 16;
-const ASPECT_RATIO = 16 / 9;
 
 export const DetailVideo: React.FC<DetailVideoProps> = ({
   videoUrl,
   thumbnailUrl,
 }) => {
-  const tokens = useAppDesignTokens();
   const { width } = useWindowDimensions();
   const videoWidth = width - (HORIZONTAL_PADDING * 2);
-  const videoHeight = videoWidth / ASPECT_RATIO;
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  const player = useVideoPlayer(videoUrl, (p: VideoPlayer) => {
-    p.loop = true;
-  });
-
-  const handlePlay = useCallback(() => {
-    setIsPlaying(true);
-    player.play();
-  }, [player]);
 
   return (
     <View style={styles.container}>
-      <View style={[styles.frame, { width: videoWidth, height: videoHeight, backgroundColor: tokens.colors.surface }]}>
-        {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, { backgroundColor: tokens.colors.surfaceSecondary }]} />
-            )}
-            <View style={styles.playButtonContainer}>
-              <View style={[styles.playButton, { backgroundColor: tokens.colors.primary }]}>
-                <AtomicIcon name="play" customSize={32} color="onPrimary" />
-              </View>
-            </View>
-          </TouchableOpacity>
-        )}
-      </View>
+      <VideoPlayer
+        source={videoUrl}
+        thumbnailUrl={thumbnailUrl}
+        loop
+        nativeControls
+        contentFit="cover"
+        style={{ width: videoWidth }}
+      />
     </View>
   );
 };
@@ -78,39 +40,4 @@ const styles = StyleSheet.create({
     paddingHorizontal: HORIZONTAL_PADDING,
     marginVertical: 16,
   },
-  frame: {
-    borderRadius: 16,
-    overflow: "hidden",
-  },
-  video: {
-    width: "100%",
-    height: "100%",
-  },
-  thumbnailContainer: {
-    width: "100%",
-    height: "100%",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  thumbnail: {
-    width: "100%",
-    height: "100%",
-  },
-  placeholder: {
-    width: "100%",
-    height: "100%",
-  },
-  playButtonContainer: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  playButton: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    justifyContent: "center",
-    alignItems: "center",
-    paddingLeft: 4,
-  },
 });

package/src/features/meme-generator/infrastructure/services/MemeGenerationService.ts

@@ -1,4 +1,5 @@
-import { providerRegistry } from "../../../../infrastructure/services/provider.registry";
+import { providerRegistry } from "../../../../infrastructure/services";
+
 
 export interface MemeGenerationParams {
   prompt: string;
@@ -19,7 +20,7 @@ export class MemeGenerationService {
       const systemPrompt = `You are an AI art director. Take the user's simple meme idea and transform it into a visually rich, detailed, and funny image generation prompt. Your response should be only the new prompt, no explanations. Idea: "${prompt}"`;
 
       // Use provided modelId or try to find a default text-to-text model
-      const model = modelId || "fal-ai/llama-3-8cl-instruct";
+      const model = modelId || "fal-ai/llama-3-8b-instruct";
 
       const result = await provider.run<{ text?: string, data?: { text: string } }>(
         model,
@@ -40,6 +41,8 @@ export class MemeGenerationService {
 
   /**
    * Generate a meme image
+   * @param prompt The final prompt to use (should already be enhanced if desired)
+   * @param modelId Optional Fal model ID
    */
   async generateMeme(prompt: string, modelId?: string): Promise<string> {
     try {
@@ -48,13 +51,10 @@ export class MemeGenerationService {
         throw new Error("AI provider not available");
       }
 
-      const enhancedPrompt = await this.enhancePrompt(prompt, modelId);
-      const finalPrompt = `High-quality, funny meme: ${enhancedPrompt}. Cinematic, vibrant, clean subject, NO TEXT in image.`;
+      const finalPrompt = `High-quality, funny meme: ${prompt}. Cinematic, vibrant, clean subject, NO TEXT in image.`;
 
       const model = modelId || "fal-ai/flux/schnell";
 
-      // For Fal, we usually use subscribe or run
-      // provider.run should be enough for quick models like flux/schnell
       const result = await provider.run<{ images: { url: string }[] }>(
         model,
         { 

package/src/types/globals.d.ts

@@ -0,0 +1,2 @@
+declare const __DEV__: boolean;
+declare const console: any;