@guardvideo/player-sdk 1.0.2 → 1.1.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import Hls from 'hls.js';
-import React, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
 
 var PlayerState;
 (function (PlayerState) {
@@ -64,7 +64,7 @@ class GuardVideoPlayer {
             security: { ...DEFAULT_SECURITY, ...config.security },
             viewerName: config.viewerName || '',
             viewerEmail: config.viewerEmail || '',
-            forensicWatermark: config.forensicWatermark || false,
+            forensicWatermark: config.forensicWatermark !== false,
             onReady: config.onReady || (() => { }),
             onError: config.onError || (() => { }),
             onQualityChange: config.onQualityChange || (() => { }),
@@ -459,7 +459,7 @@ class GuardVideoPlayer {
                 maxViews: null,
                 ...(this.config.viewerName ? { viewerName: this.config.viewerName } : {}),
                 ...(this.config.viewerEmail ? { viewerEmail: this.config.viewerEmail } : {}),
-                ...(this.config.forensicWatermark ? { forensicWatermark: this.config.forensicWatermark } : {}),
+                forensicWatermark: this.config.forensicWatermark,
             }),
         });
         if (!response.ok) {
@@ -657,12 +657,446 @@ class GuardVideoPlayer {
     }
 }
 
+function formatTime(seconds) {
+    if (!isFinite(seconds) || isNaN(seconds))
+        return '0:00';
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+    const mm = String(m).padStart(h > 0 ? 2 : 1, '0');
+    const ss = String(s).padStart(2, '0');
+    return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+const PlayIcon = () => (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("polygon", { points: "5,3 19,12 5,21" })));
+const PauseIcon = () => (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+    React.createElement("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })));
+const ReplayIcon = () => (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" })));
+const VolumeHighIcon = () => (React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" })));
+const VolumeMuteIcon = () => (React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" })));
+const FullscreenIcon = () => (React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" })));
+const ExitFullscreenIcon = () => (React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" })));
+const SettingsIcon = () => (React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" })));
+const ShieldIcon = ({ color }) => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" },
+    React.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })));
+let _stylesInjected = false;
+function injectPlayerStyles(accentColor) {
+    if (_stylesInjected)
+        return;
+    _stylesInjected = true;
+    const css = `
+/* ── GuardVideo Custom Player ─────────────────────────────── */
+.gvp-root {
+  position: relative;
+  background: #000;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  border-radius: 10px;
+  overflow: hidden;
+  -webkit-user-select: none;
+  user-select: none;
+  outline: none;
+}
+.gvp-root:focus-visible { box-shadow: 0 0 0 3px ${accentColor}66; }
+
+.gvp-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 10px;
+}
+
+/* ── Loading spinner ─────────────────────────────────────── */
+.gvp-spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: rgba(0,0,0,0.55);
+  border-radius: 10px;
+}
+.gvp-spinner-ring {
+  width: 48px;
+  height: 48px;
+  border: 3px solid rgba(255,255,255,0.15);
+  border-top-color: ${accentColor};
+  border-radius: 50%;
+  animation: gvp-spin 0.8s linear infinite;
+}
+@keyframes gvp-spin { to { transform: rotate(360deg); } }
+
+/* ── Big centre play button (initial state) ───────────────── */
+.gvp-center-play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: rgba(0,0,0,0.3);
+  transition: background 0.2s;
+  border-radius: 10px;
+}
+.gvp-center-play:hover { background: rgba(0,0,0,0.45); }
+.gvp-center-play-btn {
+  width: 72px;
+  height: 72px;
+  background: rgba(255,255,255,0.12);
+  backdrop-filter: blur(8px);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255,255,255,0.25);
+  transition: background 0.2s, transform 0.15s;
+  color: #fff;
+}
+.gvp-center-play:hover .gvp-center-play-btn {
+  background: ${accentColor}cc;
+  transform: scale(1.08);
+}
+
+/* ── Click-to-toggle overlay ─────────────────────────────── */
+.gvp-click-area {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+/* ── Ripple effect on click ──────────────────────────────── */
+.gvp-ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: rgba(255,255,255,0.25);
+  animation: gvp-ripple-anim 0.5s ease-out forwards;
+  pointer-events: none;
+  z-index: 2;
+}
+@keyframes gvp-ripple-anim { to { transform: scale(4); opacity: 0; } }
+
+/* ── Controls bar ────────────────────────────────────────── */
+.gvp-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
+  padding: 36px 14px 10px;
+  transition: opacity 0.3s, transform 0.3s;
+  border-radius: 0 0 10px 10px;
+}
+.gvp-controls-hidden {
+  opacity: 0;
+  transform: translateY(6px);
+  pointer-events: none;
+}
+
+/* ── Progress / seek bar ─────────────────────────────────── */
+.gvp-seek-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.gvp-seek-wrap {
+  flex: 1;
+  position: relative;
+  height: 4px;
+  cursor: pointer;
+  padding: 8px 0;
+  margin: -8px 0;
+  box-sizing: content-box;
+}
+.gvp-seek-track {
+  height: 4px;
+  background: rgba(255,255,255,0.2);
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+  transition: height 0.15s;
+}
+.gvp-seek-wrap:hover .gvp-seek-track { height: 6px; }
+.gvp-seek-buffered {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: rgba(255,255,255,0.35);
+  border-radius: 4px;
+  pointer-events: none;
+}
+.gvp-seek-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: ${accentColor};
+  border-radius: 4px;
+  pointer-events: none;
+  transition: width 0.1s linear;
+}
+.gvp-seek-thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 13px;
+  height: 13px;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.gvp-seek-wrap:hover .gvp-seek-thumb { opacity: 1; }
+
+/* ── Time tooltip ─────────────────────────────────────────── */
+.gvp-seek-tooltip {
+  position: absolute;
+  bottom: 24px;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.8);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 3px 7px;
+  border-radius: 4px;
+  pointer-events: none;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+.gvp-seek-wrap:hover .gvp-seek-tooltip { opacity: 1; }
+
+/* ── Bottom control row ───────────────────────────────────── */
+.gvp-btn-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.gvp-btn {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s;
+  flex-shrink: 0;
+}
+.gvp-btn:hover { background: rgba(255,255,255,0.12); color: ${accentColor}; }
+.gvp-btn:active { background: rgba(255,255,255,0.2); }
+
+/* ── Volume section ──────────────────────────────────────── */
+.gvp-volume-wrap {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.gvp-volume-slider {
+  -webkit-appearance: none;
+  width: 70px;
+  height: 4px;
+  background: rgba(255,255,255,0.25);
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+  accent-color: ${accentColor};
+  transition: width 0.2s;
+}
+.gvp-volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px; height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+}
+.gvp-volume-slider::-moz-range-thumb {
+  width: 12px; height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  border: none;
+}
+
+/* ── Time display ─────────────────────────────────────────── */
+.gvp-time {
+  font-size: 12px;
+  color: rgba(255,255,255,0.85);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+/* ── Spacer ──────────────────────────────────────────────── */
+.gvp-spacer { flex: 1; }
+
+/* ── Quality / Settings menu ──────────────────────────────── */
+.gvp-menu-wrap {
+  position: relative;
+}
+.gvp-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  background: rgba(18,18,22,0.95);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 8px;
+  min-width: 140px;
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+  animation: gvp-menu-in 0.1s ease-out;
+  z-index: 20;
+}
+@keyframes gvp-menu-in { from { opacity:0; transform: scale(0.95) translateY(4px); } to { opacity:1; transform: scale(1) translateY(0); } }
+.gvp-menu-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(255,255,255,0.4);
+  padding: 8px 12px 4px;
+}
+.gvp-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 12px;
+  font-size: 13px;
+  color: rgba(255,255,255,0.85);
+  cursor: pointer;
+  transition: background 0.12s;
+  gap: 10px;
+}
+.gvp-menu-item:hover { background: rgba(255,255,255,0.07); }
+.gvp-menu-item-active { color: ${accentColor}; font-weight: 600; }
+.gvp-menu-check { font-size: 14px; color: ${accentColor}; }
+.gvp-menu-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 3px 0; }
+
+/* ── Error overlay ────────────────────────────────────────── */
+.gvp-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.8);
+  color: #fff;
+  gap: 10px;
+  padding: 24px;
+  border-radius: 10px;
+  text-align: center;
+}
+.gvp-error-icon { font-size: 36px; }
+.gvp-error-code { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #f87171; text-transform: uppercase; }
+.gvp-error-msg { font-size: 14px; color: rgba(255,255,255,0.7); max-width: 320px; line-height: 1.5; }
+
+/* ── Secure badge ─────────────────────────────────────────── */
+.gvp-badge {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: rgba(0,0,0,0.55);
+  backdrop-filter: blur(6px);
+  border-radius: 20px;
+  padding: 3px 9px 3px 7px;
+  font-size: 10px;
+  font-weight: 600;
+  color: ${accentColor};
+  pointer-events: none;
+  z-index: 5;
+  letter-spacing: 0.04em;
+  transition: opacity 0.3s;
+}
+.gvp-badge-hidden { opacity: 0; }
+
+/* ── Forensic watermark strip ─────────────────────────────── */
+.gvp-watermark {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 6;
+}
+.gvp-watermark-text {
+  position: absolute;
+  white-space: nowrap;
+  font-size: 13px;
+  font-family: monospace;
+  color: rgba(255,255,255,0.065);
+  transform: rotate(-28deg);
+  user-select: none;
+  pointer-events: none;
+  letter-spacing: 0.05em;
+}
+
+/* ── Playback rate menu ────────────────────────────────────── */
+.gvp-rate-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: rgba(255,255,255,0.7);
+  min-width: 28px;
+  text-align: center;
+  cursor: pointer;
+  padding: 5px 4px;
+  border-radius: 4px;
+  transition: background 0.12s;
+  flex-shrink: 0;
+}
+.gvp-rate-label:hover { background: rgba(255,255,255,0.1); }
+`;
+    const tag = document.createElement('style');
+    tag.setAttribute('data-guardvideo', 'player-ui-styles');
+    tag.textContent = css;
+    document.head.appendChild(tag);
+}
 const GuardVideoPlayerComponent = forwardRef((props, ref) => {
-    const { videoId, width = '100%', height = 'auto', embedTokenEndpoint, apiBaseUrl, debug = false, autoplay = false, controls = true, className = '', style = {}, hlsConfig, branding, contextMenuItems, security, onReady, onError, onQualityChange, onStateChange, onTimeUpdate, onEnded, } = props;
+    const { videoId, width = '100%', height = 'auto', embedTokenEndpoint, apiBaseUrl, debug = false, autoplay = false, className = '', style = {}, hlsConfig, branding, contextMenuItems, security, viewerName, viewerEmail, forensicWatermark = true, onReady, onError, onQualityChange, onStateChange, onTimeUpdate: onTimeUpdateProp, onEnded, } = props;
+    const accentColor = branding?.accentColor ?? '#44c09b';
+    const brandName = branding?.name ?? 'GuardVideo';
+    const containerRef = useRef(null);
     const videoRef = useRef(null);
     const playerRef = useRef(null);
+    const seekRef = useRef(null);
+    const hideTimer = useRef(null);
+    const [playerState, setPlayerState] = useState(PlayerState.IDLE);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [buffered, setBuffered] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [muted, setMuted] = useState(false);
+    const [showControls, setShowControls] = useState(true);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [showMenu, setShowMenu] = useState(null);
+    const [qualityLevels, setQualityLevels] = useState([]);
+    const [currentQualityIdx, setCurrentQualityIdx] = useState(-1);
+    const [playbackRate, setPlaybackRate] = useState(1);
+    const [seekTooltip, setSeekTooltip] = useState(null);
     const [error, setError] = useState(null);
-    const [currentState, setCurrentState] = useState(PlayerState.IDLE);
+    const [watermarkText, setWatermarkText] = useState(null);
+    useEffect(() => { injectPlayerStyles(accentColor); }, [accentColor]);
     useEffect(() => {
         if (!videoRef.current || playerRef.current)
             return;
@@ -671,15 +1105,22 @@ const GuardVideoPlayerComponent = forwardRef((props, ref) => {
             apiBaseUrl,
             debug,
             autoplay,
-            controls,
-            className,
-            style,
+            controls: false,
+            className: '',
+            style: {},
             hlsConfig,
             branding,
             contextMenuItems,
             security,
+            viewerName,
+            viewerEmail,
+            forensicWatermark,
             onReady: () => {
                 onReady?.();
+                setTimeout(() => {
+                    const levels = player.getQualityLevels();
+                    setQualityLevels(levels);
+                }, 100);
             },
             onError: (err) => {
                 setError(err);
@@ -687,9 +1128,11 @@ const GuardVideoPlayerComponent = forwardRef((props, ref) => {
             },
             onQualityChange: (quality) => {
                 onQualityChange?.(quality);
+                const idx = player.getQualityLevels().findIndex(l => l.name === quality);
+                setCurrentQualityIdx(idx);
             },
             onStateChange: (state) => {
-                setCurrentState(state);
+                setPlayerState(state);
                 onStateChange?.(state);
             },
         });
@@ -703,75 +1146,274 @@ const GuardVideoPlayerComponent = forwardRef((props, ref) => {
         const video = videoRef.current;
         if (!video)
             return;
-        const handleTimeUpdate = () => {
-            if (onTimeUpdate) {
-                onTimeUpdate(video.currentTime);
+        const onTimeUpdate = () => {
+            setCurrentTime(video.currentTime);
+            onTimeUpdateProp?.(video.currentTime);
+        };
+        const onDuration = () => setDuration(video.duration || 0);
+        const onProgress = () => {
+            if (video.buffered.length > 0) {
+                setBuffered(video.buffered.end(video.buffered.length - 1));
             }
         };
-        const handleEnded = () => {
+        const onVolumeChange = () => {
+            setVolume(video.volume);
+            setMuted(video.muted);
+        };
+        const onEnded_ = () => {
             onEnded?.();
+            setShowControls(true);
         };
-        video.addEventListener('timeupdate', handleTimeUpdate);
-        video.addEventListener('ended', handleEnded);
+        const onRateChange = () => setPlaybackRate(video.playbackRate);
+        video.addEventListener('timeupdate', onTimeUpdate);
+        video.addEventListener('loadedmetadata', onDuration);
+        video.addEventListener('durationchange', onDuration);
+        video.addEventListener('progress', onProgress);
+        video.addEventListener('volumechange', onVolumeChange);
+        video.addEventListener('ended', onEnded_);
+        video.addEventListener('ratechange', onRateChange);
         return () => {
-            video.removeEventListener('timeupdate', handleTimeUpdate);
-            video.removeEventListener('ended', handleEnded);
+            video.removeEventListener('timeupdate', onTimeUpdate);
+            video.removeEventListener('loadedmetadata', onDuration);
+            video.removeEventListener('durationchange', onDuration);
+            video.removeEventListener('progress', onProgress);
+            video.removeEventListener('volumechange', onVolumeChange);
+            video.removeEventListener('ended', onEnded_);
+            video.removeEventListener('ratechange', onRateChange);
         };
-    }, [onTimeUpdate, onEnded]);
+    }, [onEnded, onTimeUpdateProp]);
+    useEffect(() => {
+        if (!forensicWatermark)
+            return;
+        const t = setTimeout(() => {
+            const email = viewerEmail || viewerName || '';
+            if (email)
+                setWatermarkText(email);
+        }, 1500);
+        return () => clearTimeout(t);
+    }, [forensicWatermark, viewerEmail, viewerName]);
+    const resetHideTimer = useCallback(() => {
+        setShowControls(true);
+        if (hideTimer.current)
+            clearTimeout(hideTimer.current);
+        hideTimer.current = setTimeout(() => {
+            if (playerState === PlayerState.PLAYING)
+                setShowControls(false);
+        }, 2800);
+    }, [playerState]);
+    useEffect(() => {
+        if (playerState !== PlayerState.PLAYING) {
+            setShowControls(true);
+            if (hideTimer.current)
+                clearTimeout(hideTimer.current);
+        }
+        else {
+            resetHideTimer();
+        }
+        return () => { if (hideTimer.current)
+            clearTimeout(hideTimer.current); };
+    }, [playerState, resetHideTimer]);
+    useEffect(() => {
+        const onFsChange = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener('fullscreenchange', onFsChange);
+        return () => document.removeEventListener('fullscreenchange', onFsChange);
+    }, []);
+    useEffect(() => {
+        const onKey = (e) => {
+            if (!containerRef.current?.contains(document.activeElement) &&
+                document.activeElement !== containerRef.current)
+                return;
+            switch (e.code) {
+                case 'Space':
+                case 'KeyK':
+                    e.preventDefault();
+                    togglePlay();
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    playerRef.current?.seek(Math.max(0, (videoRef.current?.currentTime || 0) - 5));
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    playerRef.current?.seek(Math.min(duration, (videoRef.current?.currentTime || 0) + 5));
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    setVolume_(Math.min(1, volume + 0.1));
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    setVolume_(Math.max(0, volume - 0.1));
+                    break;
+                case 'KeyM':
+                    e.preventDefault();
+                    toggleMute();
+                    break;
+                case 'KeyF':
+                    e.preventDefault();
+                    toggleFullscreen();
+                    break;
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [duration, volume]);
     useImperativeHandle(ref, () => ({
         play: () => playerRef.current?.play() || Promise.resolve(),
         pause: () => playerRef.current?.pause(),
         getCurrentTime: () => playerRef.current?.getCurrentTime() || 0,
-        seek: (time) => playerRef.current?.seek(time),
+        seek: (t) => playerRef.current?.seek(t),
         getDuration: () => playerRef.current?.getDuration() || 0,
         getVolume: () => playerRef.current?.getVolume() || 1,
-        setVolume: (volume) => playerRef.current?.setVolume(volume),
+        setVolume: (v) => playerRef.current?.setVolume(v),
         getQualityLevels: () => playerRef.current?.getQualityLevels() || [],
         getCurrentQuality: () => playerRef.current?.getCurrentQuality() || null,
-        setQuality: (levelIndex) => playerRef.current?.setQuality(levelIndex),
+        setQuality: (i) => playerRef.current?.setQuality(i),
         getState: () => playerRef.current?.getState() || PlayerState.IDLE,
         destroy: () => playerRef.current?.destroy(),
         getVideoElement: () => videoRef.current,
     }));
-    const containerStyle = {
-        width,
-        height,
-        position: 'relative',
-        backgroundColor: '#000',
-        ...style,
+    const togglePlay = useCallback(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        if (video.paused || video.ended) {
+            playerRef.current?.play().catch(() => { });
+        }
+        else {
+            playerRef.current?.pause();
+        }
+        resetHideTimer();
+    }, [resetHideTimer]);
+    const setVolume_ = useCallback((v) => {
+        if (!videoRef.current)
+            return;
+        videoRef.current.volume = v;
+        videoRef.current.muted = v === 0;
+    }, []);
+    const toggleMute = useCallback(() => {
+        if (!videoRef.current)
+            return;
+        videoRef.current.muted = !videoRef.current.muted;
+    }, []);
+    const toggleFullscreen = useCallback(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        if (document.fullscreenElement) {
+            document.exitFullscreen().catch(() => { });
+        }
+        else {
+            el.requestFullscreen().catch(() => { });
+        }
+    }, []);
+    const getSeekedTime = (e) => {
+        const rect = seekRef.current.getBoundingClientRect();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        return pct * duration;
+    };
+    const onSeekClick = (e) => {
+        const t = getSeekedTime(e);
+        playerRef.current?.seek(t);
+        resetHideTimer();
     };
-    const videoStyle = {
-        width: '100%',
-        height: '100%',
-        objectFit: 'contain',
+    const onSeekMouseMove = (e) => {
+        const rect = seekRef.current.getBoundingClientRect();
+        const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        setSeekTooltip({ pct, time: formatTime(pct * duration) });
+    };
+    const onSeekMouseLeave = () => setSeekTooltip(null);
+    const addRipple = (e) => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const d = document.createElement('div');
+        d.className = 'gvp-ripple';
+        const size = 60;
+        d.style.cssText = `width:${size}px;height:${size}px;left:${e.clientX - rect.left - size / 2}px;top:${e.clientY - rect.top - size / 2}px`;
+        el.appendChild(d);
+        setTimeout(() => d.remove(), 600);
     };
-    return (React.createElement("div", { style: containerStyle, className: className },
-        React.createElement("video", { ref: videoRef, style: videoStyle, playsInline: true, preload: "metadata" }, "Your browser does not support the video tag."),
-        currentState === PlayerState.LOADING && (React.createElement("div", { style: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                color: 'white',
-                fontSize: '14px',
-            } }, "Loading video...")),
-        error && (React.createElement("div", { style: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                color: 'white',
-                backgroundColor: 'rgba(255, 0, 0, 0.8)',
-                padding: '10px 20px',
-                borderRadius: '4px',
-                fontSize: '14px',
-                textAlign: 'center',
-                maxWidth: '80%',
-            } },
-            React.createElement("div", { style: { fontWeight: 'bold', marginBottom: '5px' } },
-                "Error: ",
-                error.code),
-            React.createElement("div", null, error.message)))));
+    const progressPct = duration > 0 ? (currentTime / duration) * 100 : 0;
+    const bufferedPct = duration > 0 ? (buffered / duration) * 100 : 0;
+    const isLoading = playerState === PlayerState.LOADING || playerState === PlayerState.BUFFERING;
+    const isIdle = playerState === PlayerState.IDLE;
+    const isPlaying = playerState === PlayerState.PLAYING;
+    const isEnded = videoRef.current?.ended ?? false;
+    const controlsVisible = showControls || !isPlaying;
+    const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+    return (React.createElement("div", { ref: containerRef, className: `gvp-root${className ? ` ${className}` : ''}`, style: { width, height, ...style }, tabIndex: 0, onMouseMove: resetHideTimer, onMouseLeave: () => isPlaying && setShowControls(false), onClick: () => setShowMenu(null) },
+        React.createElement("video", { ref: videoRef, className: "gvp-video", playsInline: true, preload: "metadata" }),
+        React.createElement("div", { className: `gvp-badge${controlsVisible ? '' : ' gvp-badge-hidden'}` },
+            React.createElement(ShieldIcon, { color: accentColor }),
+            brandName),
+        forensicWatermark && watermarkText && (React.createElement("div", { className: "gvp-watermark" }, Array.from({ length: 20 }).map((_, i) => (React.createElement("span", { key: i, className: "gvp-watermark-text", style: {
+                left: `${(i % 4) * 26 + ((Math.floor(i / 4)) % 2) * 13}%`,
+                top: `${Math.floor(i / 4) * 22}%`,
+            } }, watermarkText))))),
+        isLoading && (React.createElement("div", { className: "gvp-spinner" },
+            React.createElement("div", { className: "gvp-spinner-ring" }))),
+        error && (React.createElement("div", { className: "gvp-error" },
+            React.createElement("div", { className: "gvp-error-icon" }, "\u26A0\uFE0F"),
+            React.createElement("div", { className: "gvp-error-code" }, error.code),
+            React.createElement("div", { className: "gvp-error-msg" }, error.message))),
+        (isIdle || isEnded) && !error && !isLoading && (React.createElement("div", { className: "gvp-center-play", onClick: togglePlay },
+            React.createElement("div", { className: "gvp-center-play-btn" }, isEnded ? React.createElement(ReplayIcon, null) : React.createElement(PlayIcon, null)))),
+        !isIdle && !error && (React.createElement("div", { className: "gvp-click-area", onClick: (e) => { addRipple(e); togglePlay(); } })),
+        !error && (React.createElement("div", { className: `gvp-controls${controlsVisible ? '' : ' gvp-controls-hidden'}` },
+            React.createElement("div", { className: "gvp-seek-row" },
+                React.createElement("div", { ref: seekRef, className: "gvp-seek-wrap", onClick: onSeekClick, onMouseMove: onSeekMouseMove, onMouseLeave: onSeekMouseLeave },
+                    React.createElement("div", { className: "gvp-seek-track" },
+                        React.createElement("div", { className: "gvp-seek-buffered", style: { width: `${bufferedPct}%` } }),
+                        React.createElement("div", { className: "gvp-seek-progress", style: { width: `${progressPct}%` } })),
+                    React.createElement("div", { className: "gvp-seek-thumb", style: { left: `${progressPct}%` } }),
+                    seekTooltip && (React.createElement("div", { className: "gvp-seek-tooltip", style: { left: `${seekTooltip.pct * 100}%` } }, seekTooltip.time)))),
+            React.createElement("div", { className: "gvp-btn-row" },
+                React.createElement("button", { className: "gvp-btn", onClick: togglePlay, title: isPlaying ? 'Pause (k)' : 'Play (k)' }, isEnded ? React.createElement(ReplayIcon, null) : isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayIcon, null)),
+                React.createElement("div", { className: "gvp-volume-wrap" },
+                    React.createElement("button", { className: "gvp-btn", onClick: toggleMute, title: "Mute (m)" }, muted || volume === 0 ? React.createElement(VolumeMuteIcon, null) : React.createElement(VolumeHighIcon, null)),
+                    React.createElement("input", { type: "range", className: "gvp-volume-slider", min: 0, max: 1, step: 0.02, value: muted ? 0 : volume, onChange: (e) => setVolume_(parseFloat(e.target.value)), title: "Volume" })),
+                React.createElement("span", { className: "gvp-time" },
+                    formatTime(currentTime),
+                    "\u00A0",
+                    React.createElement("span", { style: { opacity: 0.45 } }, "/"),
+                    "\u00A0",
+                    formatTime(duration)),
+                React.createElement("div", { className: "gvp-spacer" }),
+                React.createElement("div", { className: "gvp-menu-wrap" },
+                    React.createElement("span", { className: "gvp-rate-label", title: "Playback speed", onClick: (e) => { e.stopPropagation(); setShowMenu(showMenu === 'speed' ? null : 'speed'); } }, playbackRate === 1 ? '1×' : `${playbackRate}×`),
+                    showMenu === 'speed' && (React.createElement("div", { className: "gvp-menu", onClick: (e) => e.stopPropagation() },
+                        React.createElement("div", { className: "gvp-menu-title" }, "Speed"),
+                        SPEEDS.map((r) => (React.createElement("div", { key: r, className: `gvp-menu-item${playbackRate === r ? ' gvp-menu-item-active' : ''}`, onClick: () => {
+                                if (videoRef.current)
+                                    videoRef.current.playbackRate = r;
+                                setShowMenu(null);
+                            } },
+                            r === 1 ? 'Normal' : `${r}×`,
+                            playbackRate === r && React.createElement("span", { className: "gvp-menu-check" }, "\u2713"))))))),
+                qualityLevels.length > 0 && (React.createElement("div", { className: "gvp-menu-wrap" },
+                    React.createElement("button", { className: "gvp-btn", title: "Quality settings", onClick: (e) => { e.stopPropagation(); setShowMenu(showMenu === 'quality' ? null : 'quality'); } },
+                        React.createElement(SettingsIcon, null)),
+                    showMenu === 'quality' && (React.createElement("div", { className: "gvp-menu", onClick: (e) => e.stopPropagation() },
+                        React.createElement("div", { className: "gvp-menu-title" }, "Quality"),
+                        React.createElement("div", { className: `gvp-menu-item${currentQualityIdx === -1 ? ' gvp-menu-item-active' : ''}`, onClick: () => {
+                                playerRef.current?.setQuality(-1);
+                                setCurrentQualityIdx(-1);
+                                setShowMenu(null);
+                            } },
+                            "Auto",
+                            currentQualityIdx === -1 && React.createElement("span", { className: "gvp-menu-check" }, "\u2713")),
+                        React.createElement("div", { className: "gvp-menu-sep" }),
+                        [...qualityLevels].reverse().map((q) => (React.createElement("div", { key: q.index, className: `gvp-menu-item${currentQualityIdx === q.index ? ' gvp-menu-item-active' : ''}`, onClick: () => {
+                                playerRef.current?.setQuality(q.index);
+                                setCurrentQualityIdx(q.index);
+                                setShowMenu(null);
+                            } },
+                            q.name,
+                            currentQualityIdx === q.index && React.createElement("span", { className: "gvp-menu-check" }, "\u2713")))))))),
+                React.createElement("button", { className: "gvp-btn", onClick: toggleFullscreen, title: "Fullscreen (f)" }, isFullscreen ? React.createElement(ExitFullscreenIcon, null) : React.createElement(FullscreenIcon, null)))))));
 });
 GuardVideoPlayerComponent.displayName = 'GuardVideoPlayer';