@umituz/react-native-ai-generation-content 1.17.214 → 1.17.215

package/package.json

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

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

@@ -3,10 +3,10 @@
  * Video player with thumbnail and play controls for creation detail view
  */
 
-import React, { useMemo } from "react";
-import { View } from "react-native";
+import React, { useMemo, useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { VideoView, useVideoPlayer } from "expo-video";
 import { useResponsive } from "@umituz/react-native-design-system";
-import { VideoPlayer } from "@umituz/react-native-video-editor";
 
 interface DetailVideoProps {
   readonly videoUrl: string;
@@ -20,20 +20,28 @@ export const DetailVideo: React.FC<DetailVideoProps> = ({
   const { width, horizontalPadding, spacingMultiplier } = useResponsive();
   const videoWidth = width - (horizontalPadding * 2);
 
+  const player = useVideoPlayer(videoUrl, (player) => {
+    player.loop = true;
+  });
+
   const containerStyle = useMemo(() => ({
     paddingHorizontal: horizontalPadding,
     marginVertical: 16 * spacingMultiplier,
   }), [horizontalPadding, spacingMultiplier]);
 
+  const videoStyle = useMemo(() => ({
+    width: videoWidth,
+    height: (videoWidth * 9) / 16, // 16:9 aspect ratio
+  }), [videoWidth]);
+
   return (
     <View style={containerStyle}>
-      <VideoPlayer
-        source={videoUrl}
-        thumbnailUrl={thumbnailUrl}
-        loop
+      <VideoView
+        style={videoStyle}
+        player={player}
+        allowsFullscreen
+        allowsPictureInPicture
         nativeControls
-        contentFit="cover"
-        style={{ width: videoWidth }}
       />
     </View>
   );