@umituz/react-native-video-editor 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Professional video editor with layer-based timeline, text/image/shape/audio/animation layers, and export functionality",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/player/presentation/components/VideoPlayer.tsx

@@ -4,21 +4,30 @@
  */
 
 import React, { useState, useCallback, useMemo, useEffect } from "react";
-import {
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  useWindowDimensions,
-} from "react-native";
+import { View, TouchableOpacity, StyleSheet, type ViewStyle } from "react-native";
 import { Image } from "expo-image";
 import { VideoView } from "expo-video";
-import { useAppDesignTokens, AtomicIcon } from "@umituz/react-native-design-system";
+import {
+  useResponsive,
+  useAppDesignTokens,
+  AtomicIcon,
+} from "@umituz/react-native-design-system";
 
 import type { VideoPlayerProps } from "../../types";
 import { useVideoPlayerControl } from "../hooks/useVideoPlayerControl";
 
+declare const __DEV__: boolean;
+
 const ASPECT_RATIO = 16 / 9;
 
+/** Extract numeric width from style prop */
+const getWidthFromStyle = (style: ViewStyle | undefined): number | null => {
+  if (!style) return null;
+  const w = style.width;
+  if (typeof w === "number") return w;
+  return null;
+};
+
 export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   source,
   thumbnailUrl,
@@ -29,11 +38,12 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   contentFit = "cover",
   style,
 }) => {
+  // IMPORTANT: Call useResponsive BEFORE useAppDesignTokens to maintain consistent hook order
+  // useAppDesignTokens internally calls useResponsive, so order matters
+  const { width: screenWidth, horizontalPadding } = useResponsive();
   const tokens = useAppDesignTokens();
-  const { width } = useWindowDimensions();
   const [showVideo, setShowVideo] = useState(autoPlay);
 
-  // Always pass source to player - control visibility separately
   const { player, state, controls } = useVideoPlayerControl({
     source,
     loop,
@@ -41,47 +51,55 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     autoPlay: false,
   });
 
-  // Auto-play when user clicks play button
   useEffect(() => {
     if (showVideo && state.isPlayerValid && player) {
-      console.log("[VideoPlayer] Starting playback...");
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        // eslint-disable-next-line no-console
+        console.log("[VideoPlayer] Starting playback...");
+      }
       controls.play();
     }
   }, [showVideo, state.isPlayerValid, player, controls]);
 
   const handlePlay = useCallback(() => {
-    console.log("[VideoPlayer] handlePlay called, source:", source);
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[VideoPlayer] handlePlay called, source:", source);
+    }
     setShowVideo(true);
   }, [source]);
 
+  // Calculate absolute dimensions for VideoView (expo-video requires pixel values)
+  const videoWidth = getWidthFromStyle(style as ViewStyle) ?? (screenWidth - horizontalPadding * 2);
+  const videoHeight = videoWidth / ASPECT_RATIO;
+
   const containerStyle = useMemo(() => ({
-    width: "100%" as const,
-    aspectRatio: ASPECT_RATIO,
+    width: videoWidth,
+    height: videoHeight,
     backgroundColor: tokens.colors.surface,
     borderRadius: 16,
     overflow: "hidden" as const,
-  }), [tokens.colors.surface]);
+  }), [tokens.colors.surface, videoWidth, videoHeight]);
 
   const styles = useMemo(
     () =>
       StyleSheet.create({
         video: {
-          width: "100%",
-          height: "100%",
+          width: videoWidth,
+          height: videoHeight,
         },
         thumbnailContainer: {
-          width: "100%",
-          height: "100%",
+          flex: 1,
           justifyContent: "center",
           alignItems: "center",
         },
         thumbnail: {
-          width: "100%",
-          height: "100%",
+          width: videoWidth,
+          height: videoHeight,
         },
         placeholder: {
-          width: "100%",
-          height: "100%",
+          width: videoWidth,
+          height: videoHeight,
           backgroundColor: tokens.colors.surfaceSecondary,
         },
         playButtonContainer: {
@@ -99,20 +117,24 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
           paddingLeft: 4,
         },
       }),
-    [tokens]
+    [tokens, videoWidth, videoHeight]
   );
 
-  // Debug: Log player state
-  console.log("[VideoPlayer] state:", {
-    showVideo,
-    isPlayerValid: state.isPlayerValid,
-    hasPlayer: !!player,
-    source,
-  });
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    // eslint-disable-next-line no-console
+    console.log("[VideoPlayer] state:", {
+      showVideo,
+      isPlayerValid: state.isPlayerValid,
+      hasPlayer: !!player,
+      source,
+    });
+  }
 
-  // Show video player when playing
   if (showVideo && state.isPlayerValid && player) {
-    console.log("[VideoPlayer] Rendering VideoView");
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[VideoPlayer] Rendering VideoView");
+    }
     return (
       <View style={[containerStyle, style]}>
         <VideoView
@@ -125,7 +147,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     );
   }
 
-  // Show thumbnail with play button
   return (
     <TouchableOpacity
       style={[containerStyle, style]}