@umituz/react-native-video-editor 1.1.45 → 1.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.45",
+  "version": "1.1.46",
   "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/infrastructure/services/player-control.service.ts

@@ -5,29 +5,18 @@
 
 import type { VideoPlayer } from "expo-video";
 
-declare const __DEV__: boolean;
-
 /**
  * Safely play video with error handling
  */
 export const safePlay = (player: VideoPlayer | null): boolean => {
-  if (__DEV__) {
-    console.log("[safePlay] called, player:", !!player);
-  }
   if (!player) return false;
 
   try {
-    if (__DEV__) {
-      console.log("[safePlay] calling player.play()");
-    }
     player.play();
-    if (__DEV__) {
-      console.log("[safePlay] player.play() called successfully");
-    }
     return true;
   } catch (error) {
-    if (__DEV__) {
-      console.log("[safePlay] Play error:", error);
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[VideoPlayer] Play error:", error);
     }
     return false;
   }
@@ -44,8 +33,7 @@ export const safePause = (player: VideoPlayer | null): boolean => {
     return true;
   } catch (error) {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
-       
-      console.log("[VideoPlayer] Pause error ignored:", error);
+      console.log("[VideoPlayer] Pause error:", error);
     }
     return false;
   }
@@ -96,8 +84,7 @@ export const configurePlayer = (
     }
   } catch (error) {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
-
-      console.log("[VideoPlayer] Configure error ignored:", error);
+      console.log("[VideoPlayer] Configure error:", error);
     }
   }
 };
@@ -113,7 +100,7 @@ export const safeSeekTo = (player: VideoPlayer | null, seconds: number): boolean
     return true;
   } catch (error) {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[VideoPlayer] SeekTo error ignored:", error);
+      console.log("[VideoPlayer] SeekTo error:", error);
     }
     return false;
   }
@@ -130,7 +117,7 @@ export const safeMute = (player: VideoPlayer | null, muted: boolean): boolean =>
     return true;
   } catch (error) {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[VideoPlayer] Mute error ignored:", error);
+      console.log("[VideoPlayer] Mute error:", error);
     }
     return false;
   }
@@ -148,7 +135,7 @@ export const safeReplay = (player: VideoPlayer | null): boolean => {
     return true;
   } catch (error) {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[VideoPlayer] Replay error ignored:", error);
+      console.log("[VideoPlayer] Replay error:", error);
     }
     return false;
   }

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

@@ -36,6 +36,7 @@ export const FullScreenVideoPlayer: React.FC<FullScreenVideoPlayerProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
+  // Only cache/play when modal is visible
   const { localUri, isDownloading, downloadProgress, error } = useVideoCaching(
     visible ? source : null,
   );
@@ -74,6 +75,7 @@ export const FullScreenVideoPlayer: React.FC<FullScreenVideoPlayerProps> = ({
           ...StyleSheet.absoluteFillObject,
           justifyContent: "center",
           alignItems: "center",
+          backgroundColor: "rgba(0,0,0,0.5)",
         },
         progressText: {
           color: "#FFFFFF",
@@ -90,7 +92,7 @@ export const FullScreenVideoPlayer: React.FC<FullScreenVideoPlayerProps> = ({
           ...StyleSheet.absoluteFillObject,
         },
       }),
-    [tokens],
+    [tokens.colors.error],
   );
 
   const renderContent = () => {
@@ -108,7 +110,7 @@ export const FullScreenVideoPlayer: React.FC<FullScreenVideoPlayerProps> = ({
           {thumbnailUrl && (
             <Image source={{ uri: thumbnailUrl }} style={styles.thumbnail} contentFit="cover" />
           )}
-          <View style={[styles.centerContent, { backgroundColor: "rgba(0,0,0,0.5)" }]}>
+          <View style={styles.centerContent}>
             <AtomicText style={styles.progressText}>
               {Math.round(downloadProgress * 100)}%
             </AtomicText>
@@ -144,7 +146,6 @@ export const FullScreenVideoPlayer: React.FC<FullScreenVideoPlayerProps> = ({
       );
     }
 
-    // Waiting for player
     return (
       <View style={styles.container}>
         {thumbnailUrl && (

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

@@ -25,16 +25,17 @@ import { useVideoCaching } from "../hooks/useVideoCaching";
 import { useControlsAutoHide } from "../hooks/useControlsAutoHide";
 import { VideoPlayerOverlay } from "./VideoPlayerOverlay";
 
-declare const __DEV__: boolean;
+const DEFAULT_ASPECT_RATIO = 16 / 9;
 
-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;
+/** Check if style provides its own sizing (width/height/aspectRatio/flex) */
+const hasCustomSizing = (style: ViewStyle | undefined): boolean => {
+  if (!style) return false;
+  return (
+    style.width !== undefined ||
+    style.height !== undefined ||
+    style.aspectRatio !== undefined ||
+    style.flex !== undefined
+  );
 };
 
 export const VideoPlayer: React.FC<VideoPlayerProps> = ({
@@ -54,7 +55,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   onBack,
   onProgress,
 }) => {
-  // IMPORTANT: Call useResponsive BEFORE useAppDesignTokens to maintain hook order
   const { width: screenWidth, horizontalPadding } = useResponsive();
   const tokens = useAppDesignTokens();
   const [userTriggeredPlay, setUserTriggeredPlay] = useState(false);
@@ -63,10 +63,8 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   // When showControls is true, disable native controls and show custom overlay
   const useNativeControls = showControls ? false : nativeControls;
 
-  // Cache the video first (downloads if needed)
   const { localUri, isDownloading, downloadProgress, error } = useVideoCaching(source);
 
-  // Use cached local URI for player
   const { player, state, controls } = useVideoPlayerControl({
     source: localUri,
     loop,
@@ -75,7 +73,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     playbackRate,
   });
 
-  // Auto-hide controls overlay
   const { visible: controlsVisible, toggle: toggleControls } = useControlsAutoHide({
     isPlaying: state.isPlaying,
     autoHideDelay: 3000,
@@ -89,30 +86,35 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   }, [onProgress, state.currentTime, state.duration]);
 
   const handlePlay = useCallback(() => {
-    if (__DEV__) {
-      console.log("[VideoPlayer] handlePlay, localUri:", localUri);
-    }
     setUserTriggeredPlay(true);
     controls.play();
-  }, [localUri, controls]);
+  }, [controls]);
 
-  // Calculate dimensions
-  const videoWidth = getWidthFromStyle(style as ViewStyle) ?? (screenWidth - horizontalPadding * 2);
-  const videoHeight = videoWidth / ASPECT_RATIO;
+  // Calculate fallback dimensions only when style doesn't provide sizing
+  const customSizing = hasCustomSizing(style as ViewStyle);
+  const videoWidth = customSizing ? undefined : (screenWidth - horizontalPadding * 2);
+  const videoHeight = videoWidth ? videoWidth / DEFAULT_ASPECT_RATIO : undefined;
 
   const containerStyle = useMemo(() => ({
-    width: videoWidth,
-    height: videoHeight,
+    ...(videoWidth !== undefined && { width: videoWidth }),
+    ...(videoHeight !== undefined && { height: videoHeight }),
     backgroundColor: tokens.colors.surface,
     borderRadius: 16,
     overflow: "hidden" as const,
   }), [tokens.colors.surface, videoWidth, videoHeight]);
 
   const styles = useMemo(() => StyleSheet.create({
-    video: { width: videoWidth, height: videoHeight },
+    video: videoWidth !== undefined
+      ? { width: videoWidth, height: videoHeight! }
+      : { width: "100%", height: "100%" },
     thumbnailContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
-    thumbnail: { width: videoWidth, height: videoHeight },
-    placeholder: { width: videoWidth, height: videoHeight, backgroundColor: tokens.colors.surfaceSecondary },
+    thumbnail: videoWidth !== undefined
+      ? { width: videoWidth, height: videoHeight! }
+      : { width: "100%", height: "100%" },
+    placeholder: {
+      ...(videoWidth !== undefined ? { width: videoWidth, height: videoHeight! } : { flex: 1, width: "100%" }),
+      backgroundColor: tokens.colors.surfaceSecondary,
+    },
     playButtonContainer: { ...StyleSheet.absoluteFillObject, justifyContent: "center", alignItems: "center" },
     playButton: {
       width: 64, height: 64, borderRadius: 32,
@@ -127,7 +129,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     errorText: { color: tokens.colors.error, fontSize: 14, textAlign: "center", padding: 16 },
   }), [tokens, videoWidth, videoHeight]);
 
-  // Show error state
   if (error) {
     return (
       <View style={[containerStyle, style]}>
@@ -141,7 +142,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     );
   }
 
-  // Show download progress
   if (isDownloading) {
     const progressPercent = Math.round(downloadProgress * 100);
     return (
@@ -160,11 +160,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     );
   }
 
-  // Show video player
   if (showVideo && state.isPlayerValid && player) {
-    if (__DEV__) {
-      console.log("[VideoPlayer] Rendering VideoView:", { videoWidth, videoHeight });
-    }
     return (
       <View style={[containerStyle, style]}>
         <VideoView
@@ -202,7 +198,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     );
   }
 
-  // Show thumbnail with play button
   return (
     <TouchableOpacity style={[containerStyle, style]} onPress={handlePlay} activeOpacity={0.8}>
       <View style={styles.thumbnailContainer}>

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

@@ -6,11 +6,80 @@
 import React, { useMemo } from "react";
 import { View, TouchableOpacity, StyleSheet, TouchableWithoutFeedback } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 
 import type { VideoPlayerOverlayProps } from "../../types";
 import { VideoProgressBar } from "./VideoProgressBar";
 
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "space-between",
+  },
+  topBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 8,
+    backgroundColor: "rgba(0,0,0,0.5)",
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "rgba(255,255,255,0.2)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  titleContainer: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  titleText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  subtitleText: {
+    color: "rgba(255,255,255,0.7)",
+    fontSize: 13,
+    marginTop: 2,
+  },
+  centerArea: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  centerPlayButton: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: "rgba(0,0,0,0.6)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  bottomBar: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    paddingTop: 8,
+    backgroundColor: "rgba(0,0,0,0.5)",
+  },
+  bottomControls: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    marginTop: 10,
+  },
+  controlButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: "rgba(255,255,255,0.2)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
 export const VideoPlayerOverlay: React.FC<VideoPlayerOverlayProps> = ({
   visible,
   isPlaying,
@@ -25,85 +94,9 @@ export const VideoPlayerOverlay: React.FC<VideoPlayerOverlayProps> = ({
   onBack,
   onTap,
 }) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        overlay: {
-          ...StyleSheet.absoluteFillObject,
-          justifyContent: "space-between",
-        },
-        topBar: {
-          flexDirection: "row",
-          alignItems: "center",
-          paddingHorizontal: 16,
-          paddingTop: 12,
-          paddingBottom: 8,
-          backgroundColor: "rgba(0,0,0,0.5)",
-        },
-        backButton: {
-          width: 40,
-          height: 40,
-          borderRadius: 20,
-          backgroundColor: "rgba(255,255,255,0.2)",
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        titleContainer: {
-          flex: 1,
-          marginLeft: 12,
-        },
-        titleText: {
-          color: "#FFFFFF",
-          fontSize: 16,
-          fontWeight: "600",
-        },
-        subtitleText: {
-          color: "rgba(255,255,255,0.7)",
-          fontSize: 13,
-          marginTop: 2,
-        },
-        centerArea: {
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        centerPlayButton: {
-          width: 72,
-          height: 72,
-          borderRadius: 36,
-          backgroundColor: "rgba(0,0,0,0.6)",
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        bottomBar: {
-          paddingHorizontal: 16,
-          paddingBottom: 16,
-          paddingTop: 8,
-          backgroundColor: "rgba(0,0,0,0.5)",
-        },
-        bottomControls: {
-          flexDirection: "row",
-          alignItems: "center",
-          marginTop: 10,
-          gap: 12,
-        },
-        controlButton: {
-          width: 36,
-          height: 36,
-          borderRadius: 18,
-          backgroundColor: "rgba(255,255,255,0.2)",
-          justifyContent: "center",
-          alignItems: "center",
-        },
-        spacer: { flex: 1 },
-      }),
-    [tokens],
-  );
+  const hasTopBar = Boolean(onBack || title || subtitle);
 
   if (!visible) {
-    // Invisible tap area to show controls
     return (
       <TouchableWithoutFeedback onPress={onTap}>
         <View style={styles.overlay} />
@@ -114,20 +107,22 @@ export const VideoPlayerOverlay: React.FC<VideoPlayerOverlayProps> = ({
   return (
     <TouchableWithoutFeedback onPress={onTap}>
       <View style={styles.overlay}>
-        {/* Top Bar */}
-        <View style={styles.topBar}>
-          {onBack && (
-            <TouchableOpacity style={styles.backButton} onPress={onBack} activeOpacity={0.7}>
-              <AtomicIcon name="chevron-back" customSize={22} color="onPrimary" />
-            </TouchableOpacity>
-          )}
-          {(title || subtitle) && (
-            <View style={styles.titleContainer}>
-              {title && <AtomicText style={styles.titleText} numberOfLines={1}>{title}</AtomicText>}
-              {subtitle && <AtomicText style={styles.subtitleText} numberOfLines={1}>{subtitle}</AtomicText>}
-            </View>
-          )}
-        </View>
+        {/* Top Bar — only render when there's content */}
+        {hasTopBar && (
+          <View style={styles.topBar}>
+            {onBack && (
+              <TouchableOpacity style={styles.backButton} onPress={onBack} activeOpacity={0.7}>
+                <AtomicIcon name="chevron-back" customSize={22} color="onPrimary" />
+              </TouchableOpacity>
+            )}
+            {(title || subtitle) && (
+              <View style={styles.titleContainer}>
+                {title && <AtomicText style={styles.titleText} numberOfLines={1}>{title}</AtomicText>}
+                {subtitle && <AtomicText style={styles.subtitleText} numberOfLines={1}>{subtitle}</AtomicText>}
+              </View>
+            )}
+          </View>
+        )}
 
         {/* Center Play/Pause */}
         <View style={styles.centerArea}>
@@ -140,7 +135,7 @@ export const VideoPlayerOverlay: React.FC<VideoPlayerOverlayProps> = ({
           </TouchableOpacity>
         </View>
 
-        {/* Bottom Bar */}
+        {/* Bottom Bar — progress + mute */}
         <View style={styles.bottomBar}>
           <VideoProgressBar
             currentTime={currentTime}
@@ -149,14 +144,6 @@ export const VideoPlayerOverlay: React.FC<VideoPlayerOverlayProps> = ({
             showTimeLabels
           />
           <View style={styles.bottomControls}>
-            <TouchableOpacity style={styles.controlButton} onPress={onTogglePlay} activeOpacity={0.7}>
-              <AtomicIcon
-                name={isPlaying ? "pause" : "play"}
-                customSize={18}
-                color="onPrimary"
-              />
-            </TouchableOpacity>
-            <View style={styles.spacer} />
             <TouchableOpacity style={styles.controlButton} onPress={onToggleMute} activeOpacity={0.7}>
               <AtomicIcon
                 name={isMuted ? "volume-x" : "volume-2"}

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

@@ -3,7 +3,7 @@
  * Seekable progress bar with time labels for video playback
  */
 
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useRef } from "react";
 import { View, StyleSheet, type LayoutChangeEvent } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -25,7 +25,7 @@ export const VideoProgressBar: React.FC<VideoProgressBarProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const progressPercent = duration > 0 ? Math.min(currentTime / duration, 1) * 100 : 0;
-  const barWidthRef = React.useRef(0);
+  const barWidthRef = useRef(0);
 
   const resolvedTrackColor = trackColor ?? "rgba(255,255,255,0.3)";
   const resolvedFillColor = fillColor ?? tokens.colors.primary;
@@ -43,44 +43,22 @@ export const VideoProgressBar: React.FC<VideoProgressBarProps> = ({
     [onSeek, duration],
   );
 
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: { width: "100%" },
-        row: { flexDirection: "row", alignItems: "center", gap: 8 },
-        timeText: { color: "#FFFFFF", fontSize: 12, fontWeight: "500", minWidth: 40 },
-        barContainer: {
-          flex: 1,
-          height,
-          borderRadius: height / 2,
-          backgroundColor: resolvedTrackColor,
-          overflow: "hidden",
-        },
-        barFill: {
-          height: "100%",
-          borderRadius: height / 2,
-          backgroundColor: resolvedFillColor,
-        },
-      }),
-    [height, resolvedTrackColor, resolvedFillColor],
-  );
-
   return (
-    <View style={[styles.container, style]}>
-      <View style={styles.row}>
+    <View style={[barStyles.container, style]}>
+      <View style={barStyles.row}>
         {showTimeLabels && (
-          <AtomicText style={styles.timeText}>{formatTimeDisplay(currentTime)}</AtomicText>
+          <AtomicText style={barStyles.timeText}>{formatTimeDisplay(currentTime)}</AtomicText>
         )}
         <View
-          style={styles.barContainer}
+          style={[barStyles.barContainer, { height, borderRadius: height / 2, backgroundColor: resolvedTrackColor }]}
           onLayout={handleLayout}
           onStartShouldSetResponder={() => Boolean(onSeek)}
           onResponderRelease={handleSeek}
         >
-          <View style={[styles.barFill, { width: `${progressPercent}%` }]} />
+          <View style={[barStyles.barFill, { borderRadius: height / 2, backgroundColor: resolvedFillColor, width: `${progressPercent}%` }]} />
         </View>
         {showTimeLabels && (
-          <AtomicText style={[styles.timeText, { textAlign: "right" }]}>
+          <AtomicText style={[barStyles.timeText, { textAlign: "right" }]}>
             {formatTimeDisplay(duration)}
           </AtomicText>
         )}
@@ -88,3 +66,11 @@ export const VideoProgressBar: React.FC<VideoProgressBarProps> = ({
     </View>
   );
 };
+
+const barStyles = StyleSheet.create({
+  container: { width: "100%" },
+  row: { flexDirection: "row", alignItems: "center", gap: 8 },
+  timeText: { color: "#FFFFFF", fontSize: 12, fontWeight: "500", minWidth: 40 },
+  barContainer: { flex: 1, overflow: "hidden" },
+  barFill: { height: "100%" },
+});

package/src/player/presentation/hooks/useVideoPlaybackProgress.ts

@@ -1,60 +1,58 @@
 /**
  * useVideoPlaybackProgress Hook
- * Tracks currentTime, duration, and progress by polling the expo-video player
+ * Tracks currentTime, duration, progress, and actual playing state by polling the expo-video player
  */
 
 import { useState, useEffect, useRef, useCallback } from "react";
 
 import type { PlaybackProgressState } from "../../types";
 
-declare const __DEV__: boolean;
-
 const POLL_INTERVAL_MS = 250;
 
 /**
  * Polls the player for currentTime/duration and returns progress (0-1)
+ * Also returns the player's actual playing state to detect out-of-sync conditions
  */
 export const useVideoPlaybackProgress = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   player: any,
   isPlayerValid: boolean,
   isPlaying: boolean,
+  onPlayingStateChanged?: (actuallyPlaying: boolean) => void,
 ): PlaybackProgressState => {
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const onPlayingStateChangedRef = useRef(onPlayingStateChanged);
+  onPlayingStateChangedRef.current = onPlayingStateChanged;
 
   const pollPlayer = useCallback(() => {
     if (!player || !isPlayerValid) return;
 
     try {
-      const ct = typeof player.currentTime === "number" ? player.currentTime : 0;
+      const ct = typeof player.currentTime === "number" ? Math.max(0, player.currentTime) : 0;
       const dur = typeof player.duration === "number" && isFinite(player.duration) ? player.duration : 0;
 
       setCurrentTime(ct);
       if (dur > 0) setDuration(dur);
-    } catch (error) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[useVideoPlaybackProgress] Poll error:", error);
+
+      // Sync actual playing state — detects when video ends or system pauses
+      const actuallyPlaying = Boolean(player.playing);
+      if (actuallyPlaying !== isPlaying) {
+        onPlayingStateChangedRef.current?.(actuallyPlaying);
       }
+    } catch {
+      // Player may be in an invalid state during transitions
     }
-  }, [player, isPlayerValid]);
+  }, [player, isPlayerValid, isPlaying]);
 
   useEffect(() => {
+    // Poll once immediately to get initial state
+    pollPlayer();
+
     if (isPlaying && isPlayerValid) {
-      pollPlayer();
-      intervalRef.current = setInterval(pollPlayer, POLL_INTERVAL_MS);
-    } else {
-      // Poll once when paused to get final position
-      pollPlayer();
+      const id = setInterval(pollPlayer, POLL_INTERVAL_MS);
+      return () => clearInterval(id);
     }
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
   }, [isPlaying, isPlayerValid, pollPlayer]);
 
   const progress = duration > 0 ? Math.min(currentTime / duration, 1) : 0;

package/src/player/presentation/hooks/useVideoPlayerControl.ts

@@ -32,8 +32,6 @@ import {
 } from "../../infrastructure/services/player-control.service";
 import { useVideoPlaybackProgress } from "./useVideoPlaybackProgress";
 
-declare const __DEV__: boolean;
-
 /**
  * Hook for managing video player with safe operations
  */
@@ -47,24 +45,14 @@ export const useVideoPlayerControl = (
   const [playbackRate, setPlaybackRateState] = useState(initialRate);
   const [isMuted, setIsMuted] = useState(muted);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const player = useExpoVideoPlayer(source || "", (p: any) => {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-      console.log("[useVideoPlayerControl] Player callback, source:", source, "player:", !!p);
-    }
     if (source && p) {
       configurePlayer(p, { loop, muted, autoPlay });
       setIsLoading(false);
       if (autoPlay) {
         setIsPlaying(true);
       }
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.log("[useVideoPlayerControl] Player configured:", {
-          status: p.status,
-          playing: p.playing,
-          muted: p.muted,
-          loop: p.loop,
-        });
-      }
     }
   });
 
@@ -73,8 +61,18 @@ export const useVideoPlayerControl = (
     [player, source],
   );
 
-  // Track playback progress
-  const { currentTime, duration, progress } = useVideoPlaybackProgress(player, isPlayerValid, isPlaying);
+  // Sync isPlaying with actual player state (handles video end, system pause, etc.)
+  const handlePlayingStateChanged = useCallback((actuallyPlaying: boolean) => {
+    setIsPlaying(actuallyPlaying);
+  }, []);
+
+  // Track playback progress + sync playing state
+  const { currentTime, duration, progress } = useVideoPlaybackProgress(
+    player,
+    isPlayerValid,
+    isPlaying,
+    handlePlayingStateChanged,
+  );
 
   const play = useCallback(() => {
     if (!isPlayerValid) return;
@@ -96,6 +94,7 @@ export const useVideoPlayerControl = (
 
   const setPlaybackRate = useCallback((rate: number) => {
     if (!isPlayerValid || !player) return;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (player as any).playbackRate = rate;
     setPlaybackRateState(rate);
   }, [player, isPlayerValid]);
@@ -107,7 +106,7 @@ export const useVideoPlayerControl = (
     if (success) setIsMuted(newMuted);
   }, [player, isPlayerValid, isMuted]);
 
-  const setMuted = useCallback((value: boolean) => {
+  const setMutedFn = useCallback((value: boolean) => {
     if (!isPlayerValid) return;
     const success = safeMute(player, value);
     if (success) setIsMuted(value);
@@ -139,8 +138,8 @@ export const useVideoPlayerControl = (
   );
 
   const controls: VideoPlayerControls = useMemo(
-    () => ({ play, pause, toggle, setPlaybackRate, toggleMute, setMuted, seekTo, replay }),
-    [play, pause, toggle, setPlaybackRate, toggleMute, setMuted, seekTo, replay],
+    () => ({ play, pause, toggle, setPlaybackRate, toggleMute, setMuted: setMutedFn, seekTo, replay }),
+    [play, pause, toggle, setPlaybackRate, toggleMute, setMutedFn, seekTo, replay],
   );
 
   return { player, state, controls };

package/src/player/types/index.ts

@@ -69,14 +69,13 @@ export interface VideoVisibilityConfig {
  */
 export interface VideoPlayerProps {
   readonly source: string | null;
-  readonly isVisible?: boolean;
   readonly loop?: boolean;
   readonly muted?: boolean;
   readonly autoPlay?: boolean;
+  /** When true, shows custom overlay controls and disables nativeControls */
   readonly showControls?: boolean;
+  /** Native video controls (ignored when showControls is true) */
   readonly nativeControls?: boolean;
-  readonly onPlayingChange?: (isPlaying: boolean) => void;
-  readonly onError?: (error: Error) => void;
   readonly style?: ViewStyle;
   readonly contentFit?: "contain" | "cover" | "fill";
   readonly thumbnailUrl?: string;