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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-video-editor",
-  "version": "1.1.44",
+  "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/index.ts

@@ -125,6 +125,12 @@ export type {
   VideoVisibilityConfig,
   VideoPlayerProps,
   VideoPlayerType,
+  PlaybackProgressState,
+  ControlsAutoHideConfig,
+  ControlsAutoHideResult,
+  VideoProgressBarProps,
+  VideoPlayerOverlayProps,
+  FullScreenVideoPlayerProps,
 } from "./player";
 
 export {
@@ -133,7 +139,15 @@ export {
   safeToggle,
   isPlayerReady,
   configurePlayer,
+  safeSeekTo,
+  safeMute,
+  safeReplay,
   useVideoPlayerControl,
   useVideoVisibility,
+  useVideoPlaybackProgress,
+  useControlsAutoHide,
   VideoPlayer,
+  VideoProgressBar,
+  VideoPlayerOverlay,
+  FullScreenVideoPlayer,
 } from "./player";

package/src/player/index.ts

@@ -15,6 +15,12 @@ export type {
   VideoDownloadProgressCallback,
   VideoCacheResult,
   VideoCachingState,
+  PlaybackProgressState,
+  ControlsAutoHideConfig,
+  ControlsAutoHideResult,
+  VideoProgressBarProps,
+  VideoPlayerOverlayProps,
+  FullScreenVideoPlayerProps,
 } from "./types";
 
 // Services
@@ -24,6 +30,9 @@ export {
   safeToggle,
   isPlayerReady,
   configurePlayer,
+  safeSeekTo,
+  safeMute,
+  safeReplay,
 } from "./infrastructure/services/player-control.service";
 
 export {
@@ -39,6 +48,11 @@ export {
 export { useVideoPlayerControl } from "./presentation/hooks/useVideoPlayerControl";
 export { useVideoVisibility } from "./presentation/hooks/useVideoVisibility";
 export { useVideoCaching } from "./presentation/hooks/useVideoCaching";
+export { useVideoPlaybackProgress } from "./presentation/hooks/useVideoPlaybackProgress";
+export { useControlsAutoHide } from "./presentation/hooks/useControlsAutoHide";
 
 // Components
 export { VideoPlayer } from "./presentation/components/VideoPlayer";
+export { VideoProgressBar } from "./presentation/components/VideoProgressBar";
+export { VideoPlayerOverlay } from "./presentation/components/VideoPlayerOverlay";
+export { FullScreenVideoPlayer } from "./presentation/components/FullScreenVideoPlayer";

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,59 @@ export const configurePlayer = (
     }
   } catch (error) {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
-       
-      console.log("[VideoPlayer] Configure error ignored:", error);
+      console.log("[VideoPlayer] Configure error:", error);
     }
   }
 };
+
+/**
+ * Safely seek to a specific time position (in seconds)
+ */
+export const safeSeekTo = (player: VideoPlayer | null, seconds: number): boolean => {
+  if (!player) return false;
+
+  try {
+    player.currentTime = Math.max(0, seconds);
+    return true;
+  } catch (error) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[VideoPlayer] SeekTo error:", error);
+    }
+    return false;
+  }
+};
+
+/**
+ * Safely set muted state
+ */
+export const safeMute = (player: VideoPlayer | null, muted: boolean): boolean => {
+  if (!player) return false;
+
+  try {
+    player.muted = muted;
+    return true;
+  } catch (error) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[VideoPlayer] Mute error:", error);
+    }
+    return false;
+  }
+};
+
+/**
+ * Safely replay video from beginning
+ */
+export const safeReplay = (player: VideoPlayer | null): boolean => {
+  if (!player) return false;
+
+  try {
+    player.currentTime = 0;
+    player.play();
+    return true;
+  } catch (error) {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[VideoPlayer] Replay error:", error);
+    }
+    return false;
+  }
+};

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

@@ -0,0 +1,170 @@
+/**
+ * FullScreenVideoPlayer Component
+ * Modal-based fullscreen video player with custom overlay controls
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View, Modal, StyleSheet, StatusBar } from "react-native";
+import { Image } from "expo-image";
+// expo-video is optional — lazy require
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let VideoView: React.ComponentType<any> = () => null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  VideoView = require("expo-video").VideoView;
+} catch {
+  // expo-video not installed
+}
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+import type { FullScreenVideoPlayerProps } from "../../types";
+import { useVideoPlayerControl } from "../hooks/useVideoPlayerControl";
+import { useVideoCaching } from "../hooks/useVideoCaching";
+import { useControlsAutoHide } from "../hooks/useControlsAutoHide";
+import { VideoPlayerOverlay } from "./VideoPlayerOverlay";
+
+export const FullScreenVideoPlayer: React.FC<FullScreenVideoPlayerProps> = ({
+  visible,
+  source,
+  title,
+  subtitle,
+  thumbnailUrl,
+  onClose,
+  loop = true,
+  autoPlay = true,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Only cache/play when modal is visible
+  const { localUri, isDownloading, downloadProgress, error } = useVideoCaching(
+    visible ? source : null,
+  );
+
+  const { player, state, controls } = useVideoPlayerControl({
+    source: visible ? localUri : null,
+    loop,
+    muted: false,
+    autoPlay,
+  });
+
+  const { visible: controlsVisible, toggle: toggleControls } = useControlsAutoHide({
+    isPlaying: state.isPlaying,
+    autoHideDelay: 3000,
+  });
+
+  const handleClose = useCallback(() => {
+    controls.pause();
+    onClose();
+  }, [controls, onClose]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          backgroundColor: "#000000",
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        video: {
+          width: "100%",
+          height: "100%",
+        },
+        centerContent: {
+          ...StyleSheet.absoluteFillObject,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "rgba(0,0,0,0.5)",
+        },
+        progressText: {
+          color: "#FFFFFF",
+          fontSize: 18,
+          fontWeight: "600",
+        },
+        errorText: {
+          color: tokens.colors.error,
+          fontSize: 16,
+          textAlign: "center",
+          padding: 24,
+        },
+        thumbnail: {
+          ...StyleSheet.absoluteFillObject,
+        },
+      }),
+    [tokens.colors.error],
+  );
+
+  const renderContent = () => {
+    if (error) {
+      return (
+        <View style={styles.container}>
+          <AtomicText style={styles.errorText}>{error}</AtomicText>
+        </View>
+      );
+    }
+
+    if (isDownloading) {
+      return (
+        <View style={styles.container}>
+          {thumbnailUrl && (
+            <Image source={{ uri: thumbnailUrl }} style={styles.thumbnail} contentFit="cover" />
+          )}
+          <View style={styles.centerContent}>
+            <AtomicText style={styles.progressText}>
+              {Math.round(downloadProgress * 100)}%
+            </AtomicText>
+          </View>
+        </View>
+      );
+    }
+
+    if (state.isPlayerValid && player) {
+      return (
+        <View style={styles.container}>
+          <VideoView
+            player={player}
+            style={styles.video}
+            contentFit="contain"
+            nativeControls={false}
+          />
+          <VideoPlayerOverlay
+            visible={controlsVisible}
+            isPlaying={state.isPlaying}
+            isMuted={state.isMuted}
+            currentTime={state.currentTime}
+            duration={state.duration}
+            title={title}
+            subtitle={subtitle}
+            onTogglePlay={controls.toggle}
+            onToggleMute={controls.toggleMute}
+            onSeek={controls.seekTo}
+            onBack={handleClose}
+            onTap={toggleControls}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.container}>
+        {thumbnailUrl && (
+          <Image source={{ uri: thumbnailUrl }} style={styles.thumbnail} contentFit="cover" />
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="fade"
+      presentationStyle="fullScreen"
+      supportedOrientations={["portrait", "landscape"]}
+      onRequestClose={handleClose}
+    >
+      <StatusBar hidden={visible} />
+      {renderContent()}
+    </Modal>
+  );
+};

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

@@ -1,9 +1,9 @@
 /**
  * VideoPlayer Component
- * Reusable video player with caching, thumbnail and controls
+ * Reusable video player with caching, thumbnail, controls, and optional custom overlay
  */
 
-import React, { useState, useCallback, useMemo } from "react";
+import React, { useState, useCallback, useMemo, useEffect } from "react";
 import { View, TouchableOpacity, StyleSheet, type ViewStyle } from "react-native";
 import { Image } from "expo-image";
 // expo-video is optional — lazy require so it is not auto-installed
@@ -22,17 +22,20 @@ import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import type { VideoPlayerProps } from "../../types";
 import { useVideoPlayerControl } from "../hooks/useVideoPlayerControl";
 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> = ({
@@ -41,22 +44,27 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   loop = true,
   muted = false,
   autoPlay = false,
+  showControls = false,
   nativeControls = true,
   contentFit = "cover",
   style,
   playbackRate = 1,
   filterOverlay,
+  title,
+  subtitle,
+  onBack,
+  onProgress,
 }) => {
-  // IMPORTANT: Call useResponsive BEFORE useAppDesignTokens to maintain hook order
   const { width: screenWidth, horizontalPadding } = useResponsive();
   const tokens = useAppDesignTokens();
   const [userTriggeredPlay, setUserTriggeredPlay] = useState(false);
   const showVideo = autoPlay || userTriggeredPlay;
 
-  // Cache the video first (downloads if needed)
+  // When showControls is true, disable native controls and show custom overlay
+  const useNativeControls = showControls ? false : nativeControls;
+
   const { localUri, isDownloading, downloadProgress, error } = useVideoCaching(source);
 
-  // Use cached local URI for player
   const { player, state, controls } = useVideoPlayerControl({
     source: localUri,
     loop,
@@ -65,31 +73,48 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     playbackRate,
   });
 
-  const handlePlay = useCallback(() => {
-    if (__DEV__) {
-      console.log("[VideoPlayer] handlePlay, localUri:", localUri);
+  const { visible: controlsVisible, toggle: toggleControls } = useControlsAutoHide({
+    isPlaying: state.isPlaying,
+    autoHideDelay: 3000,
+  });
+
+  // Notify parent of progress changes
+  useEffect(() => {
+    if (onProgress && state.duration > 0) {
+      onProgress(state.currentTime, state.duration);
     }
+  }, [onProgress, state.currentTime, state.duration]);
+
+  const handlePlay = useCallback(() => {
     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,
@@ -104,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]}>
@@ -118,7 +142,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     );
   }
 
-  // Show download progress
   if (isDownloading) {
     const progressPercent = Math.round(downloadProgress * 100);
     return (
@@ -137,18 +160,14 @@ 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
           player={player}
           style={styles.video}
           contentFit={contentFit}
-          nativeControls={nativeControls}
+          nativeControls={useNativeControls}
         />
         {filterOverlay && filterOverlay.opacity > 0 && (
           <View
@@ -159,11 +178,26 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
             pointerEvents="none"
           />
         )}
+        {showControls && (
+          <VideoPlayerOverlay
+            visible={controlsVisible}
+            isPlaying={state.isPlaying}
+            isMuted={state.isMuted}
+            currentTime={state.currentTime}
+            duration={state.duration}
+            title={title}
+            subtitle={subtitle}
+            onTogglePlay={controls.toggle}
+            onToggleMute={controls.toggleMute}
+            onSeek={controls.seekTo}
+            onBack={onBack}
+            onTap={toggleControls}
+          />
+        )}
       </View>
     );
   }
 
-  // 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

@@ -0,0 +1,159 @@
+/**
+ * VideoPlayerOverlay Component
+ * Custom overlay controls: top bar (title, back), center play/pause, bottom bar (progress, mute)
+ */
+
+import React, { useMemo } from "react";
+import { View, TouchableOpacity, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system/atoms";
+
+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,
+  isMuted,
+  currentTime,
+  duration,
+  title,
+  subtitle,
+  onTogglePlay,
+  onToggleMute,
+  onSeek,
+  onBack,
+  onTap,
+}) => {
+  const hasTopBar = Boolean(onBack || title || subtitle);
+
+  if (!visible) {
+    return (
+      <TouchableWithoutFeedback onPress={onTap}>
+        <View style={styles.overlay} />
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  return (
+    <TouchableWithoutFeedback onPress={onTap}>
+      <View style={styles.overlay}>
+        {/* 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}>
+          <TouchableOpacity style={styles.centerPlayButton} onPress={onTogglePlay} activeOpacity={0.7}>
+            <AtomicIcon
+              name={isPlaying ? "pause" : "play"}
+              customSize={36}
+              color="onPrimary"
+            />
+          </TouchableOpacity>
+        </View>
+
+        {/* Bottom Bar — progress + mute */}
+        <View style={styles.bottomBar}>
+          <VideoProgressBar
+            currentTime={currentTime}
+            duration={duration}
+            onSeek={onSeek}
+            showTimeLabels
+          />
+          <View style={styles.bottomControls}>
+            <TouchableOpacity style={styles.controlButton} onPress={onToggleMute} activeOpacity={0.7}>
+              <AtomicIcon
+                name={isMuted ? "volume-x" : "volume-2"}
+                customSize={18}
+                color="onPrimary"
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};

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

@@ -0,0 +1,76 @@
+/**
+ * VideoProgressBar Component
+ * Seekable progress bar with time labels for video playback
+ */
+
+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";
+
+import type { VideoProgressBarProps } from "../../types";
+import { formatTimeDisplay } from "../../../infrastructure/utils/srt.utils";
+
+const DEFAULT_HEIGHT = 4;
+
+export const VideoProgressBar: React.FC<VideoProgressBarProps> = ({
+  currentTime,
+  duration,
+  onSeek,
+  showTimeLabels = true,
+  height = DEFAULT_HEIGHT,
+  trackColor,
+  fillColor,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const progressPercent = duration > 0 ? Math.min(currentTime / duration, 1) * 100 : 0;
+  const barWidthRef = useRef(0);
+
+  const resolvedTrackColor = trackColor ?? "rgba(255,255,255,0.3)";
+  const resolvedFillColor = fillColor ?? tokens.colors.primary;
+
+  const handleLayout = useCallback((e: LayoutChangeEvent) => {
+    barWidthRef.current = e.nativeEvent.layout.width;
+  }, []);
+
+  const handleSeek = useCallback(
+    (e: { nativeEvent: { locationX: number } }) => {
+      if (!onSeek || duration <= 0 || barWidthRef.current <= 0) return;
+      const ratio = Math.max(0, Math.min(1, e.nativeEvent.locationX / barWidthRef.current));
+      onSeek(ratio * duration);
+    },
+    [onSeek, duration],
+  );
+
+  return (
+    <View style={[barStyles.container, style]}>
+      <View style={barStyles.row}>
+        {showTimeLabels && (
+          <AtomicText style={barStyles.timeText}>{formatTimeDisplay(currentTime)}</AtomicText>
+        )}
+        <View
+          style={[barStyles.barContainer, { height, borderRadius: height / 2, backgroundColor: resolvedTrackColor }]}
+          onLayout={handleLayout}
+          onStartShouldSetResponder={() => Boolean(onSeek)}
+          onResponderRelease={handleSeek}
+        >
+          <View style={[barStyles.barFill, { borderRadius: height / 2, backgroundColor: resolvedFillColor, width: `${progressPercent}%` }]} />
+        </View>
+        {showTimeLabels && (
+          <AtomicText style={[barStyles.timeText, { textAlign: "right" }]}>
+            {formatTimeDisplay(duration)}
+          </AtomicText>
+        )}
+      </View>
+    </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/useControlsAutoHide.ts

@@ -0,0 +1,66 @@
+/**
+ * useControlsAutoHide Hook
+ * Manages visibility of video player overlay controls with auto-hide timer
+ */
+
+import { useState, useEffect, useRef, useCallback } from "react";
+
+import type { ControlsAutoHideConfig, ControlsAutoHideResult } from "../../types";
+
+const DEFAULT_AUTO_HIDE_DELAY = 3000;
+
+export const useControlsAutoHide = (
+  config: ControlsAutoHideConfig,
+): ControlsAutoHideResult => {
+  const { autoHideDelay = DEFAULT_AUTO_HIDE_DELAY, isPlaying } = config;
+  const [visible, setVisible] = useState(true);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const startTimer = useCallback(() => {
+    clearTimer();
+    if (isPlaying) {
+      timerRef.current = setTimeout(() => {
+        setVisible(false);
+      }, autoHideDelay);
+    }
+  }, [clearTimer, isPlaying, autoHideDelay]);
+
+  const show = useCallback(() => {
+    setVisible(true);
+    startTimer();
+  }, [startTimer]);
+
+  const hide = useCallback(() => {
+    clearTimer();
+    setVisible(false);
+  }, [clearTimer]);
+
+  const toggle = useCallback(() => {
+    if (visible) {
+      hide();
+    } else {
+      show();
+    }
+  }, [visible, show, hide]);
+
+  // Auto-hide when playing starts, show when paused
+  useEffect(() => {
+    if (isPlaying) {
+      startTimer();
+    } else {
+      clearTimer();
+      setVisible(true);
+    }
+
+    return clearTimer;
+  }, [isPlaying, startTimer, clearTimer]);
+
+  return { visible, show, hide, toggle };
+};

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

@@ -0,0 +1,61 @@
+/**
+ * useVideoPlaybackProgress Hook
+ * 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";
+
+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 onPlayingStateChangedRef = useRef(onPlayingStateChanged);
+  onPlayingStateChangedRef.current = onPlayingStateChanged;
+
+  const pollPlayer = useCallback(() => {
+    if (!player || !isPlayerValid) return;
+
+    try {
+      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);
+
+      // 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, isPlaying]);
+
+  useEffect(() => {
+    // Poll once immediately to get initial state
+    pollPlayer();
+
+    if (isPlaying && isPlayerValid) {
+      const id = setInterval(pollPlayer, POLL_INTERVAL_MS);
+      return () => clearInterval(id);
+    }
+  }, [isPlaying, isPlayerValid, pollPlayer]);
+
+  const progress = duration > 0 ? Math.min(currentTime / duration, 1) : 0;
+
+  return { currentTime, duration, progress };
+};

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

@@ -26,9 +26,11 @@ import {
   safeToggle,
   isPlayerReady,
   configurePlayer,
+  safeSeekTo,
+  safeMute,
+  safeReplay,
 } from "../../infrastructure/services/player-control.service";
-
-declare const __DEV__: boolean;
+import { useVideoPlaybackProgress } from "./useVideoPlaybackProgress";
 
 /**
  * Hook for managing video player with safe operations
@@ -41,25 +43,16 @@ export const useVideoPlayerControl = (
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   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,
-        });
-      }
     }
   });
 
@@ -68,6 +61,19 @@ export const useVideoPlayerControl = (
     [player, source],
   );
 
+  // 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;
     const success = safePlay(player);
@@ -88,23 +94,52 @@ 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]);
 
+  const toggleMute = useCallback(() => {
+    if (!isPlayerValid) return;
+    const newMuted = !isMuted;
+    const success = safeMute(player, newMuted);
+    if (success) setIsMuted(newMuted);
+  }, [player, isPlayerValid, isMuted]);
+
+  const setMutedFn = useCallback((value: boolean) => {
+    if (!isPlayerValid) return;
+    const success = safeMute(player, value);
+    if (success) setIsMuted(value);
+  }, [player, isPlayerValid]);
+
+  const seekTo = useCallback((seconds: number) => {
+    if (!isPlayerValid) return;
+    safeSeekTo(player, seconds);
+  }, [player, isPlayerValid]);
+
+  const replay = useCallback(() => {
+    if (!isPlayerValid) return;
+    const success = safeReplay(player);
+    if (success) setIsPlaying(true);
+  }, [player, isPlayerValid]);
+
   const state: VideoPlayerState = useMemo(
     () => ({
       isPlaying,
       isPlayerValid,
       isLoading: isLoading && Boolean(source),
       playbackRate,
+      isMuted,
+      currentTime,
+      duration,
+      progress,
     }),
-    [isPlaying, isPlayerValid, isLoading, source, playbackRate],
+    [isPlaying, isPlayerValid, isLoading, source, playbackRate, isMuted, currentTime, duration, progress],
   );
 
   const controls: VideoPlayerControls = useMemo(
-    () => ({ play, pause, toggle, setPlaybackRate }),
-    [play, pause, toggle, setPlaybackRate],
+    () => ({ 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

@@ -25,6 +25,10 @@ export interface VideoPlayerState {
   readonly isPlayerValid: boolean;
   readonly isLoading: boolean;
   readonly playbackRate: number;
+  readonly isMuted: boolean;
+  readonly currentTime: number;
+  readonly duration: number;
+  readonly progress: number;
 }
 
 /**
@@ -35,6 +39,10 @@ export interface VideoPlayerControls {
   readonly pause: () => void;
   readonly toggle: () => void;
   readonly setPlaybackRate: (rate: number) => void;
+  readonly toggleMute: () => void;
+  readonly setMuted: (muted: boolean) => void;
+  readonly seekTo: (seconds: number) => void;
+  readonly replay: () => void;
 }
 
 /**
@@ -61,19 +69,95 @@ 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;
   readonly playbackRate?: number;
   readonly filterOverlay?: { overlay: string; opacity: number };
+  readonly title?: string;
+  readonly subtitle?: string;
+  readonly onBack?: () => void;
+  readonly onProgress?: (currentTime: number, duration: number) => void;
+}
+
+/**
+ * Playback progress state
+ */
+export interface PlaybackProgressState {
+  readonly currentTime: number;
+  readonly duration: number;
+  readonly progress: number;
+}
+
+/**
+ * Controls auto-hide configuration
+ */
+export interface ControlsAutoHideConfig {
+  readonly autoHideDelay?: number;
+  readonly isPlaying: boolean;
+}
+
+/**
+ * Controls auto-hide result
+ */
+export interface ControlsAutoHideResult {
+  readonly visible: boolean;
+  readonly show: () => void;
+  readonly hide: () => void;
+  readonly toggle: () => void;
+}
+
+/**
+ * Video progress bar props
+ */
+export interface VideoProgressBarProps {
+  readonly currentTime: number;
+  readonly duration: number;
+  readonly onSeek?: (seconds: number) => void;
+  readonly showTimeLabels?: boolean;
+  readonly height?: number;
+  readonly trackColor?: string;
+  readonly fillColor?: string;
+  readonly style?: ViewStyle;
+}
+
+/**
+ * Video player overlay props
+ */
+export interface VideoPlayerOverlayProps {
+  readonly visible: boolean;
+  readonly isPlaying: boolean;
+  readonly isMuted: boolean;
+  readonly currentTime: number;
+  readonly duration: number;
+  readonly title?: string;
+  readonly subtitle?: string;
+  readonly onTogglePlay: () => void;
+  readonly onToggleMute: () => void;
+  readonly onSeek: (seconds: number) => void;
+  readonly onBack?: () => void;
+  readonly onTap: () => void;
+}
+
+/**
+ * Full screen video player props
+ */
+export interface FullScreenVideoPlayerProps {
+  readonly visible: boolean;
+  readonly source: string | null;
+  readonly title?: string;
+  readonly subtitle?: string;
+  readonly thumbnailUrl?: string;
+  readonly onClose: () => void;
+  readonly loop?: boolean;
+  readonly autoPlay?: boolean;
 }
 
 export type { VideoPlayer } from "expo-video";