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

package/package.json

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

@@ -96,8 +96,60 @@ export const configurePlayer = (
     }
   } catch (error) {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
-       
+
       console.log("[VideoPlayer] Configure error ignored:", 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 ignored:", 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 ignored:", 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 ignored:", error);
+    }
+    return false;
+  }
+};

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

@@ -0,0 +1,169 @@
+/**
+ * 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();
+
+  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",
+        },
+        progressText: {
+          color: "#FFFFFF",
+          fontSize: 18,
+          fontWeight: "600",
+        },
+        errorText: {
+          color: tokens.colors.error,
+          fontSize: 16,
+          textAlign: "center",
+          padding: 24,
+        },
+        thumbnail: {
+          ...StyleSheet.absoluteFillObject,
+        },
+      }),
+    [tokens],
+  );
+
+  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, { backgroundColor: "rgba(0,0,0,0.5)" }]}>
+            <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>
+      );
+    }
+
+    // Waiting for player
+    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,6 +22,8 @@ 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;
 
@@ -41,11 +43,16 @@ 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();
@@ -53,6 +60,9 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   const [userTriggeredPlay, setUserTriggeredPlay] = useState(false);
   const showVideo = autoPlay || userTriggeredPlay;
 
+  // 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);
 
@@ -65,6 +75,19 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     playbackRate,
   });
 
+  // Auto-hide controls overlay
+  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(() => {
     if (__DEV__) {
       console.log("[VideoPlayer] handlePlay, localUri:", localUri);
@@ -148,7 +171,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
           player={player}
           style={styles.video}
           contentFit={contentFit}
-          nativeControls={nativeControls}
+          nativeControls={useNativeControls}
         />
         {filterOverlay && filterOverlay.opacity > 0 && (
           <View
@@ -159,6 +182,22 @@ 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>
     );
   }

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

@@ -0,0 +1,172 @@
+/**
+ * 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 { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+import type { VideoPlayerOverlayProps } from "../../types";
+import { VideoProgressBar } from "./VideoProgressBar";
+
+export const VideoPlayerOverlay: React.FC<VideoPlayerOverlayProps> = ({
+  visible,
+  isPlaying,
+  isMuted,
+  currentTime,
+  duration,
+  title,
+  subtitle,
+  onTogglePlay,
+  onToggleMute,
+  onSeek,
+  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],
+  );
+
+  if (!visible) {
+    // Invisible tap area to show controls
+    return (
+      <TouchableWithoutFeedback onPress={onTap}>
+        <View style={styles.overlay} />
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  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>
+
+        {/* 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 */}
+        <View style={styles.bottomBar}>
+          <VideoProgressBar
+            currentTime={currentTime}
+            duration={duration}
+            onSeek={onSeek}
+            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"}
+                customSize={18}
+                color="onPrimary"
+              />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};

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

@@ -0,0 +1,90 @@
+/**
+ * VideoProgressBar Component
+ * Seekable progress bar with time labels for video playback
+ */
+
+import React, { useCallback, useMemo } 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 = React.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],
+  );
+
+  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}>
+        {showTimeLabels && (
+          <AtomicText style={styles.timeText}>{formatTimeDisplay(currentTime)}</AtomicText>
+        )}
+        <View
+          style={styles.barContainer}
+          onLayout={handleLayout}
+          onStartShouldSetResponder={() => Boolean(onSeek)}
+          onResponderRelease={handleSeek}
+        >
+          <View style={[styles.barFill, { width: `${progressPercent}%` }]} />
+        </View>
+        {showTimeLabels && (
+          <AtomicText style={[styles.timeText, { textAlign: "right" }]}>
+            {formatTimeDisplay(duration)}
+          </AtomicText>
+        )}
+      </View>
+    </View>
+  );
+};

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,63 @@
+/**
+ * useVideoPlaybackProgress Hook
+ * Tracks currentTime, duration, and progress 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)
+ */
+export const useVideoPlaybackProgress = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  player: any,
+  isPlayerValid: boolean,
+  isPlaying: boolean,
+): PlaybackProgressState => {
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const pollPlayer = useCallback(() => {
+    if (!player || !isPlayerValid) return;
+
+    try {
+      const ct = typeof player.currentTime === "number" ? 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);
+      }
+    }
+  }, [player, isPlayerValid]);
+
+  useEffect(() => {
+    if (isPlaying && isPlayerValid) {
+      pollPlayer();
+      intervalRef.current = setInterval(pollPlayer, POLL_INTERVAL_MS);
+    } else {
+      // Poll once when paused to get final position
+      pollPlayer();
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [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,7 +26,11 @@ import {
   safeToggle,
   isPlayerReady,
   configurePlayer,
+  safeSeekTo,
+  safeMute,
+  safeReplay,
 } from "../../infrastructure/services/player-control.service";
+import { useVideoPlaybackProgress } from "./useVideoPlaybackProgress";
 
 declare const __DEV__: boolean;
 
@@ -41,6 +45,7 @@ export const useVideoPlayerControl = (
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [playbackRate, setPlaybackRateState] = useState(initialRate);
+  const [isMuted, setIsMuted] = useState(muted);
 
   const player = useExpoVideoPlayer(source || "", (p: any) => {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
@@ -68,6 +73,9 @@ export const useVideoPlayerControl = (
     [player, source],
   );
 
+  // Track playback progress
+  const { currentTime, duration, progress } = useVideoPlaybackProgress(player, isPlayerValid, isPlaying);
+
   const play = useCallback(() => {
     if (!isPlayerValid) return;
     const success = safePlay(player);
@@ -92,19 +100,47 @@ export const useVideoPlayerControl = (
     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 setMuted = 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, seekTo, replay }),
+    [play, pause, toggle, setPlaybackRate, toggleMute, setMuted, 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;
 }
 
 /**
@@ -74,6 +82,83 @@ export interface VideoPlayerProps {
   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";