@guardvideo/player-sdk 1.2.0 → 2.0.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import Hls from 'hls.js';
-import React, { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import React, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useCallback } from 'react';
 
 var PlayerState;
 (function (PlayerState) {
@@ -657,763 +657,1383 @@ class GuardVideoPlayer {
     }
 }
 
-function formatTime(seconds) {
-    if (!isFinite(seconds) || isNaN(seconds))
+function formatTime(s) {
+    if (!isFinite(s) || isNaN(s))
         return '0:00';
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    const s = Math.floor(seconds % 60);
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const sc = Math.floor(s % 60);
     const mm = String(m).padStart(h > 0 ? 2 : 1, '0');
-    const ss = String(s).padStart(2, '0');
+    const ss = String(sc).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" })));
+function el(tag, cls, attrs) {
+    const e = document.createElement(tag);
+    if (cls)
+        e.className = cls;
+    if (attrs)
+        for (const [k, v] of Object.entries(attrs))
+            e.setAttribute(k, v);
+    return e;
+}
+function svgEl(path, w = 20, h = 20) {
+    const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    s.setAttribute('width', String(w));
+    s.setAttribute('height', String(h));
+    s.setAttribute('viewBox', '0 0 24 24');
+    s.setAttribute('fill', 'currentColor');
+    s.setAttribute('aria-hidden', 'true');
+    s.innerHTML = path;
+    return s;
+}
+const ICON = {
+    play: '<polygon points="5,3 19,12 5,21"/>',
+    pause: '<rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>',
+    replay: '<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"/>',
+    volHigh: '<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"/>',
+    volMid: '<path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>',
+    volLow: '<path d="M7 9v6h4l5 5V4l-5 5H7z"/>',
+    volMute: '<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"/>',
+    fsEnter: '<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>',
+    fsExit: '<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>',
+    settings: '<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.61l-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.41h-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.87C2.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.58c-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-.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54c0.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.96c0.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.94zM12,15.6c-1.98,0-3.6-1.62-3.6-3.6s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>',
+    shield: '<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'};
+const SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
 let _stylesInjected = false;
-function injectPlayerStyles(accentColor) {
+function injectStyles() {
     if (_stylesInjected)
         return;
     _stylesInjected = true;
     const css = `
-/* ── GuardVideo Custom Player ─────────────────────────────── */
+/* ── GuardVideo Player UI v2 ──────────────────────────────── */
+
+/* Google Font import — Outfit for labels, DM Mono for time */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
+
+/* ── Root ─────────────────────────────────────────────────── */
 .gvp-root {
+  --gvp-accent:      #00e5a0;
+  --gvp-accent-dim:  rgba(0, 229, 160, 0.18);
+  --gvp-accent-glow: rgba(0, 229, 160, 0.35);
+  --gvp-glass-bg:    rgba(8, 8, 14, 0.72);
+  --gvp-glass-bdr:   rgba(255,255,255,0.07);
+  --gvp-text:        rgba(255,255,255,0.92);
+  --gvp-text-dim:    rgba(255,255,255,0.45);
+  --gvp-radius:      12px;
+  --gvp-font:        'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --gvp-mono:        'DM Mono', 'SF Mono', 'Fira Mono', monospace;
+
   position: relative;
-  background: #000;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  border-radius: 10px;
+  background: #050508;
+  font-family: var(--gvp-font);
+  border-radius: var(--gvp-radius);
   overflow: hidden;
   -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
   outline: none;
+
+  /* Subtle inner vignette for cinema depth */
+  box-shadow:
+    inset 0 0 80px rgba(0,0,0,0.55),
+    0 24px 80px rgba(0,0,0,0.6);
+}
+
+.gvp-root:focus-visible {
+  outline: 2px solid var(--gvp-accent);
+  outline-offset: 2px;
 }
-.gvp-root:focus-visible { box-shadow: 0 0 0 3px ${accentColor}66; }
 
+/* ── Video ────────────────────────────────────────────────── */
 .gvp-video {
   display: block;
   width: 100%;
   height: 100%;
+  -o-object-fit: contain;
   object-fit: contain;
-  border-radius: 10px;
 }
 
-/* ── Loading spinner ─────────────────────────────────────── */
-.gvp-spinner {
+/* ── Utility ──────────────────────────────────────────────── */
+.gvp-hidden           { display: none !important; }
+.gvp-controls-hidden  { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); pointer-events: none; }
+
+/* ── Gradient overlay (top + bottom) ─────────────────────── */
+.gvp-root::before,
+.gvp-root::after {
+  content: '';
   position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  left: 0; right: 0;
   pointer-events: none;
-  background: rgba(0,0,0,0.55);
-  border-radius: 10px;
+  z-index: 2;
+}
+.gvp-root::before {
+  top: 0;
+  height: 90px;
+  background: -webkit-linear-gradient(bottom, transparent, rgba(0,0,0,0.55));
+  background:         linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
+  border-radius: var(--gvp-radius) var(--gvp-radius) 0 0;
+}
+.gvp-root::after {
+  bottom: 0;
+  height: 160px;
+  background: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.88));
+  background:         linear-gradient(to bottom, transparent, rgba(0,0,0,0.88));
+  border-radius: 0 0 var(--gvp-radius) var(--gvp-radius);
+}
+
+/* ── Spinner ──────────────────────────────────────────────── */
+.gvp-spinner {
+  position: absolute; inset: 0;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
+  pointer-events: none;
+  z-index: 8;
 }
 .gvp-spinner-ring {
-  width: 48px;
-  height: 48px;
-  border: 3px solid rgba(255,255,255,0.15);
-  border-top-color: ${accentColor};
+  width: 44px; height: 44px;
+  border: 2.5px solid rgba(255,255,255,0.08);
+  border-top-color: var(--gvp-accent);
   border-radius: 50%;
-  animation: gvp-spin 0.8s linear infinite;
+  -webkit-animation: gvp-spin 0.75s linear infinite;
+          animation: gvp-spin 0.75s linear infinite;
+  box-shadow: 0 0 16px var(--gvp-accent-glow);
 }
-@keyframes gvp-spin { to { transform: rotate(360deg); } }
+@-webkit-keyframes gvp-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes        gvp-spin  { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
 
-/* ── Big centre play button (initial state) ───────────────── */
+/* ── Centre play overlay ──────────────────────────────────── */
 .gvp-center-play {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: absolute; inset: 0; z-index: 6;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
   cursor: pointer;
-  background: rgba(0,0,0,0.3);
-  transition: background 0.2s;
-  border-radius: 10px;
+  background: transparent;
+  -webkit-transition: background 0.25s; transition: background 0.25s;
+  border-radius: var(--gvp-radius);
 }
-.gvp-center-play:hover { background: rgba(0,0,0,0.45); }
+.gvp-center-play:hover { background: rgba(0,0,0,0.22); }
+
 .gvp-center-play-btn {
-  width: 72px;
-  height: 72px;
-  background: rgba(255,255,255,0.12);
-  backdrop-filter: blur(8px);
+  position: relative;
+  width: 76px; height: 76px;
   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;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
   color: #fff;
+  /* Glass morphism */
+  background: rgba(255,255,255,0.10);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
+  border: 1px solid rgba(255,255,255,0.18);
+  -webkit-transition: background 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
+  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 0 0 0 var(--gvp-accent-glow);
+}
+/* Ripple ring on hover */
+.gvp-center-play-btn::after {
+  content: '';
+  position: absolute; inset: -4px;
+  border-radius: 50%;
+  border: 1.5px solid rgba(255,255,255,0.12);
+  -webkit-transition: border-color 0.2s, opacity 0.2s; transition: border-color 0.2s, opacity 0.2s;
+  opacity: 0;
+}
+.gvp-center-play:hover .gvp-center-play-btn::after {
+  opacity: 1;
+  border-color: var(--gvp-accent);
 }
 .gvp-center-play:hover .gvp-center-play-btn {
-  background: ${accentColor}cc;
-  transform: scale(1.08);
+  background: var(--gvp-accent-dim);
+  -webkit-transform: scale(1.07);
+          transform: scale(1.07);
+  box-shadow: 0 4px 40px rgba(0,0,0,0.55), 0 0 28px var(--gvp-accent-glow);
 }
 
 /* ── Click-to-toggle overlay ─────────────────────────────── */
 .gvp-click-area {
-  position: absolute;
-  inset: 0;
-  cursor: pointer;
-  z-index: 1;
+  position: absolute; inset: 0;
+  cursor: pointer; z-index: 4;
 }
 
-/* ── Ripple effect on click ──────────────────────────────── */
+/* ── Ripple animation ─────────────────────────────────────── */
 .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;
+  position: absolute; border-radius: 50%;
+  -webkit-transform: scale(0); transform: scale(0);
+  background: rgba(255,255,255,0.18);
+  -webkit-animation: gvp-ripple-anim 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
+          animation: gvp-ripple-anim 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
+  pointer-events: none; z-index: 5;
 }
-@keyframes gvp-ripple-anim { to { transform: scale(4); opacity: 0; } }
+@-webkit-keyframes gvp-ripple-anim { to { -webkit-transform: scale(5); transform: scale(5); opacity: 0; } }
+@keyframes        gvp-ripple-anim  { to { -webkit-transform: scale(5); transform: scale(5); opacity: 0; } }
 
-/* ── Controls bar ────────────────────────────────────────── */
+/* ── Controls bar ─────────────────────────────────────────── */
 .gvp-controls {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  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;
+  padding: 0 14px 14px;
+  -webkit-transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
+                      -webkit-transform 0.35s cubic-bezier(0.4,0,0.2,1);
+  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
+              transform 0.35s cubic-bezier(0.4,0,0.2,1);
+  border-radius: 0 0 var(--gvp-radius) var(--gvp-radius);
 }
-.gvp-controls-hidden {
-  opacity: 0;
-  transform: translateY(6px);
-  pointer-events: none;
+
+/* Inner glass pill that wraps all controls */
+.gvp-controls-inner {
+  background: var(--gvp-glass-bg);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+          backdrop-filter: blur(24px) saturate(160%);
+  border: 1px solid var(--gvp-glass-bdr);
+  border-radius: 10px;
+  padding: 10px 12px 10px;
+  -webkit-box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
+          box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
 }
 
-/* ── Progress / seek bar ─────────────────────────────────── */
+/* ── Seek row ─────────────────────────────────────────────── */
 .gvp-seek-row {
-  display: flex;
-  align-items: center;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
   gap: 8px;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
+
 .gvp-seek-wrap {
-  flex: 1;
+  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
   position: relative;
   height: 4px;
   cursor: pointer;
   padding: 8px 0;
   margin: -8px 0;
-  box-sizing: content-box;
+  -webkit-box-sizing: content-box; box-sizing: content-box;
+  touch-action: none;
 }
+
 .gvp-seek-track {
-  height: 4px;
-  background: rgba(255,255,255,0.2);
-  border-radius: 4px;
+  height: 3px;
+  background: rgba(255,255,255,0.12);
+  border-radius: 99px;
   position: relative;
-  overflow: hidden;
-  transition: height 0.15s;
+  overflow: visible;
+  -webkit-transition: height 0.15s; transition: height 0.15s;
+  pointer-events: none;
 }
-.gvp-seek-wrap:hover .gvp-seek-track { height: 6px; }
+.gvp-seek-wrap:hover .gvp-seek-track,
+.gvp-seek-wrap.gvp-dragging .gvp-seek-track { height: 5px; }
+
 .gvp-seek-buffered {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background: rgba(255,255,255,0.35);
-  border-radius: 4px;
+  position: absolute; left: 0; top: 0; height: 100%;
+  background: rgba(255,255,255,0.22);
+  border-radius: 99px;
   pointer-events: none;
+  -webkit-transition: width 0.3s; transition: width 0.3s;
 }
+
 .gvp-seek-progress {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background: ${accentColor};
-  border-radius: 4px;
+  position: absolute; left: 0; top: 0; height: 100%;
+  background: -webkit-linear-gradient(left, var(--gvp-accent), color-mix(in srgb, var(--gvp-accent) 80%, #fff 20%));
+  background:         linear-gradient(to right, var(--gvp-accent), color-mix(in srgb, var(--gvp-accent) 80%, #fff 20%));
+  border-radius: 99px;
   pointer-events: none;
-  transition: width 0.1s linear;
+  /* Glow on the progress fill */
+  -webkit-box-shadow: 0 0 8px var(--gvp-accent-glow);
+          box-shadow: 0 0 8px var(--gvp-accent-glow);
 }
+
+/* Thumb — visible on hover/drag */
 .gvp-seek-thumb {
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 13px;
-  height: 13px;
+  position: absolute; top: 50%;
+  -webkit-transform: translate(-50%, -50%) scale(0);
+          transform: translate(-50%, -50%) scale(0);
+  width: 14px; height: 14px;
   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;
+  -webkit-box-shadow: 0 0 0 3px var(--gvp-accent-dim), 0 2px 6px rgba(0,0,0,0.5);
+          box-shadow: 0 0 0 3px var(--gvp-accent-dim), 0 2px 6px rgba(0,0,0,0.5);
+  -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
+          transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
+}
+.gvp-seek-wrap:hover .gvp-seek-thumb,
+.gvp-seek-wrap.gvp-dragging .gvp-seek-thumb {
+  -webkit-transform: translate(-50%,-50%) scale(1);
+          transform: translate(-50%,-50%) scale(1);
 }
-.gvp-seek-wrap:hover .gvp-seek-thumb { opacity: 1; }
 
-/* ── Time tooltip ─────────────────────────────────────────── */
+/* Seek tooltip */
 .gvp-seek-tooltip {
   position: absolute;
-  bottom: 24px;
-  transform: translateX(-50%);
-  background: rgba(0,0,0,0.8);
-  color: #fff;
+  bottom: 26px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  background: rgba(10,10,14,0.92);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
+  border: 1px solid var(--gvp-glass-bdr);
+  color: var(--gvp-text);
+  font-family: var(--gvp-mono);
   font-size: 11px;
   font-weight: 500;
-  padding: 3px 7px;
-  border-radius: 4px;
+  padding: 3px 8px;
+  border-radius: 5px;
   pointer-events: none;
   white-space: nowrap;
   opacity: 0;
-  transition: opacity 0.1s;
+  -webkit-transition: opacity 0.12s; transition: opacity 0.12s;
+  -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.45); box-shadow: 0 4px 12px rgba(0,0,0,0.45);
 }
 .gvp-seek-wrap:hover .gvp-seek-tooltip { opacity: 1; }
 
-/* ── Bottom control row ───────────────────────────────────── */
+/* Caret below tooltip */
+.gvp-seek-tooltip::after {
+  content: '';
+  position: absolute; bottom: -5px; left: 50%;
+  -webkit-transform: translateX(-50%); transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(10,10,14,0.92);
+  border-bottom-width: 0;
+}
+
+/* ── Button row ─────────────────────────────────────────────  */
 .gvp-btn-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 2px;
 }
+
 .gvp-btn {
-  background: none;
-  border: none;
-  color: #fff;
+  background: none; border: none;
+  color: rgba(255,255,255,0.75);
   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;
+  padding: 6px;
+  border-radius: 7px;
+  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
+  -webkit-transition: background 0.14s, color 0.14s, -webkit-transform 0.12s;
+          transition: background 0.14s, color 0.14s, transform 0.12s;
+  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
+  line-height: 0;
+}
+.gvp-btn:hover {
+  background: rgba(255,255,255,0.09);
+  color: #fff;
+  -webkit-transform: scale(1.08); transform: scale(1.08);
+}
+.gvp-btn:active {
+  background: rgba(255,255,255,0.14);
+  -webkit-transform: scale(0.96); transform: scale(0.96);
 }
-.gvp-btn:hover { background: rgba(255,255,255,0.12); color: ${accentColor}; }
-.gvp-btn:active { background: rgba(255,255,255,0.2); }
+/* Accent highlight on play button */
+.gvp-btn-play:hover { background: var(--gvp-accent-dim); color: var(--gvp-accent); }
 
-/* ── Volume section ──────────────────────────────────────── */
+/* ── Volume group ─────────────────────────────────────────── */
 .gvp-volume-wrap {
-  display: flex;
-  align-items: center;
-  gap: 5px;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 2px;
 }
 .gvp-volume-slider {
   -webkit-appearance: none;
-  width: 70px;
-  height: 4px;
-  background: rgba(255,255,255,0.25);
-  border-radius: 4px;
+  -moz-appearance: none;
+  appearance: none;
+  width: 0;
+  max-width: 72px;
+  height: 3px;
+  background: rgba(255,255,255,0.18);
+  border-radius: 99px;
   outline: none;
   cursor: pointer;
-  accent-color: ${accentColor};
-  transition: width 0.2s;
+  overflow: visible;
+  -webkit-transition: width 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.22s;
+          transition: width 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.22s;
+  opacity: 0;
+  /* accent-color is supported in modern browsers */
+  accent-color: var(--gvp-accent);
 }
+/* Show slider when volume-wrap is hovered */
+.gvp-volume-wrap:hover .gvp-volume-slider,
+.gvp-volume-wrap:focus-within .gvp-volume-slider {
+  width: 72px;
+  opacity: 1;
+}
+/* WebKit thumb */
 .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);
+  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+          box-shadow: 0 1px 4px rgba(0,0,0,0.4);
 }
+/* Firefox thumb */
 .gvp-volume-slider::-moz-range-thumb {
   width: 12px; height: 12px;
   border-radius: 50%;
   background: #fff;
   cursor: pointer;
   border: none;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+}
+/* Firefox track */
+.gvp-volume-slider::-moz-range-track {
+  background: rgba(255,255,255,0.18);
+  border-radius: 99px;
+  height: 3px;
+}
+/* Edge/IE thumb */
+.gvp-volume-slider::-ms-thumb {
+  width: 12px; height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+  border: none;
 }
+.gvp-volume-slider::-ms-track {
+  background: rgba(255,255,255,0.18);
+  border-color: transparent;
+  color: transparent;
+  height: 3px;
+}
+.gvp-volume-slider::-ms-fill-lower { background: var(--gvp-accent); border-radius: 99px; }
 
-/* ── Time display ─────────────────────────────────────────── */
+/* ── Time display ──────────────────────────────────────────── */
 .gvp-time {
+  font-family: var(--gvp-mono);
   font-size: 12px;
-  color: rgba(255,255,255,0.85);
-  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  color: var(--gvp-text);
   white-space: nowrap;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.04em;
+  padding: 0 4px;
+  /* Tabular numerals so digits don't shift width */
+  font-variant-numeric: tabular-nums;
+  -moz-font-feature-settings: "tnum";
+  -webkit-font-feature-settings: "tnum";
+  font-feature-settings: "tnum";
 }
+.gvp-time-sep { color: var(--gvp-text-dim); margin: 0 2px; }
 
-/* ── Spacer ──────────────────────────────────────────────── */
-.gvp-spacer { flex: 1; }
+.gvp-spacer { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
 
-/* ── Quality / Settings menu ──────────────────────────────── */
-.gvp-menu-wrap {
-  position: relative;
+/* ── Speed button ─────────────────────────────────────────── */
+.gvp-rate-label {
+  font-family: var(--gvp-font);
+  font-size: 11px; font-weight: 700;
+  color: var(--gvp-text-dim);
+  min-width: 30px; text-align: center;
+  cursor: pointer;
+  padding: 5px 4px;
+  border-radius: 6px;
+  -webkit-transition: background 0.14s, color 0.14s; transition: background 0.14s, color 0.14s;
+  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
+  letter-spacing: 0.01em;
+  line-height: 1;
 }
+.gvp-rate-label:hover { background: rgba(255,255,255,0.09); color: #fff; }
+.gvp-rate-label-active { color: var(--gvp-accent); }
+
+/* ── Popup menus ──────────────────────────────────────────── */
+.gvp-menu-wrap { position: relative; }
+
 .gvp-menu {
   position: absolute;
-  bottom: calc(100% + 8px);
+  bottom: calc(100% + 10px);
   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;
+  background: rgba(12,12,18,0.96);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+          backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid var(--gvp-glass-bdr);
+  border-radius: 10px;
+  min-width: 148px;
   overflow: hidden;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
-  animation: gvp-menu-in 0.1s ease-out;
+  -webkit-box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 0 0.5px rgba(255,255,255,0.04);
+          box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 0 0.5px rgba(255,255,255,0.04);
+  -webkit-animation: gvp-menu-in 0.14s cubic-bezier(0.22,1,0.36,1);
+          animation: gvp-menu-in 0.14s cubic-bezier(0.22,1,0.36,1);
   z-index: 20;
 }
-@keyframes gvp-menu-in { from { opacity:0; transform: scale(0.95) translateY(4px); } to { opacity:1; transform: scale(1) translateY(0); } }
+@-webkit-keyframes gvp-menu-in {
+  from { opacity: 0; -webkit-transform: scale(0.92) translateY(6px); transform: scale(0.92) translateY(6px); }
+  to   { opacity: 1; -webkit-transform: none; transform: none; }
+}
+@keyframes gvp-menu-in {
+  from { opacity: 0; -webkit-transform: scale(0.92) translateY(6px); transform: scale(0.92) translateY(6px); }
+  to   { opacity: 1; -webkit-transform: none; transform: none; }
+}
+
 .gvp-menu-title {
-  font-size: 10px;
-  font-weight: 600;
+  font-family: var(--gvp-font);
+  font-size: 10px; font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: rgba(255,255,255,0.4);
-  padding: 8px 12px 4px;
+  letter-spacing: 0.12em;
+  color: var(--gvp-text-dim);
+  padding: 10px 13px 5px;
 }
+
 .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);
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
+  padding: 7px 13px;
+  font-family: var(--gvp-font);
+  font-size: 13px; font-weight: 500;
+  color: var(--gvp-text);
   cursor: pointer;
-  transition: background 0.12s;
-  gap: 10px;
+  -webkit-transition: background 0.1s; transition: background 0.1s;
+  gap: 12px;
+}
+.gvp-menu-item:hover { background: rgba(255,255,255,0.06); }
+.gvp-menu-item-active { color: var(--gvp-accent); }
+
+.gvp-menu-check {
+  font-size: 13px;
+  color: var(--gvp-accent);
+  line-height: 1;
+  /* Unicode checkmark — crisp on all platforms */
+}
+
+.gvp-menu-sep {
+  height: 1px;
+  background: rgba(255,255,255,0.06);
+  margin: 3px 0;
 }
-.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);
+  position: absolute; inset: 0; z-index: 15;
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-orient: vertical; -webkit-box-direction: normal;
+  -ms-flex-direction: column; flex-direction: column;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
+  background: rgba(6,6,10,0.88);
+  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
   color: #fff;
   gap: 10px;
-  padding: 24px;
-  border-radius: 10px;
+  padding: 28px;
+  border-radius: var(--gvp-radius);
   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; }
+.gvp-error-icon { font-size: 40px; line-height: 1; }
+.gvp-error-code {
+  font-family: var(--gvp-mono);
+  font-size: 10px; font-weight: 500;
+  letter-spacing: 0.14em;
+  color: #f87171;
+  text-transform: uppercase;
+  background: rgba(248,113,113,0.1);
+  border: 1px solid rgba(248,113,113,0.25);
+  padding: 3px 10px; border-radius: 4px;
+}
+.gvp-error-msg {
+  font-family: var(--gvp-font);
+  font-size: 14px; font-weight: 400;
+  color: rgba(255,255,255,0.6);
+  max-width: 320px; line-height: 1.6;
+}
 
 /* ── Secure badge ─────────────────────────────────────────── */
 .gvp-badge {
-  position: absolute;
-  top: 10px;
-  right: 12px;
-  display: flex;
-  align-items: center;
+  position: absolute; top: 12px; right: 14px; z-index: 5;
+  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
+  -webkit-box-align: center; -ms-flex-align: center; 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};
+  background: rgba(8,8,14,0.60);
+  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 99px;
+  padding: 4px 10px 4px 7px;
+  font-family: var(--gvp-font);
+  font-size: 10px; font-weight: 700;
+  color: var(--gvp-accent);
   pointer-events: none;
-  z-index: 5;
-  letter-spacing: 0.04em;
-  transition: opacity 0.3s;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  -webkit-transition: opacity 0.3s; transition: opacity 0.3s;
+  -webkit-box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.05);
+          box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.05);
 }
 .gvp-badge-hidden { opacity: 0; }
 
-/* ── Forensic watermark strip ─────────────────────────────── */
+/* ── Forensic watermark ───────────────────────────────────── */
 .gvp-watermark {
+  position: absolute; inset: 0;
+  pointer-events: none; overflow: hidden; z-index: 6;
+}
+.gvp-watermark-text {
   position: absolute;
-  inset: 0;
+  white-space: nowrap;
+  font-family: var(--gvp-mono);
+  font-size: 12px;
+  color: rgba(255,255,255,0.055);
+  -webkit-transform: rotate(-28deg); transform: rotate(-28deg);
+  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
   pointer-events: none;
-  overflow: hidden;
-  z-index: 6;
+  letter-spacing: 0.06em;
 }
-.gvp-watermark-text {
+
+/* ── Live dot (for live streams) ─────────────────────────── */
+.gvp-live-badge {
+  display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 5px;
+  font-family: var(--gvp-font);
+  font-size: 11px; font-weight: 700;
+  color: #f87171;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.gvp-live-dot {
+  width: 7px; height: 7px;
+  background: #f87171;
+  border-radius: 50%;
+  -webkit-animation: gvp-live-pulse 1.5s ease-in-out infinite;
+          animation: gvp-live-pulse 1.5s ease-in-out infinite;
+}
+@-webkit-keyframes gvp-live-pulse {
+  0%, 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
+  50%       { opacity: 0.5; -webkit-transform: scale(0.7); transform: scale(0.7); }
+}
+@keyframes gvp-live-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.5; transform: scale(0.7); }
+}
+
+/* ── Divider between button groups ───────────────────────── */
+.gvp-divider {
+  width: 1px; height: 18px;
+  background: rgba(255,255,255,0.1);
+  margin: 0 4px;
+  -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
+}
+
+/* ── Tooltip on buttons ───────────────────────────────────── */
+.gvp-btn[title]:hover::after {
+  content: attr(title);
   position: absolute;
+  bottom: calc(100% + 7px);
+  left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
+  background: rgba(10,10,14,0.95);
+  border: 1px solid var(--gvp-glass-bdr);
+  color: var(--gvp-text);
+  font-family: var(--gvp-font);
+  font-size: 11px; font-weight: 500;
+  padding: 3px 8px; border-radius: 5px;
   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;
+  z-index: 30;
 }
 
-/* ── 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;
+/* ── Focus ring (keyboard nav) ────────────────────────────── */
+.gvp-btn:focus-visible,
+.gvp-rate-label:focus-visible,
+.gvp-seek-wrap:focus-visible {
+  outline: 2px solid var(--gvp-accent);
+  outline-offset: 2px;
+}
+
+/* ── Responsive: hide volume slider text on tiny players ─── */
+@media (max-width: 380px) {
+  .gvp-volume-slider { display: none; }
+  .gvp-time { font-size: 11px; }
+  .gvp-controls-inner { padding: 8px 10px; }
 }
-.gvp-rate-label:hover { background: rgba(255,255,255,0.1); }
 `;
     const tag = document.createElement('style');
-    tag.setAttribute('data-guardvideo', 'player-ui-styles');
+    tag.setAttribute('data-guardvideo', 'player-ui-styles-v2');
     tag.textContent = css;
     document.head.appendChild(tag);
 }
-const GuardVideoPlayerComponent = forwardRef((props, ref) => {
-    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 [watermarkText, setWatermarkText] = useState(null);
-    useEffect(() => { injectPlayerStyles(accentColor); }, [accentColor]);
-    useEffect(() => {
-        if (!videoRef.current || playerRef.current)
-            return;
-        const player = new GuardVideoPlayer(videoRef.current, videoId, {
-            embedTokenEndpoint,
-            apiBaseUrl,
-            debug,
-            autoplay,
+class PlayerUI {
+    constructor(container, videoId, config) {
+        this.playerState = PlayerState.IDLE;
+        this.duration = 0;
+        this.bufferedEnd = 0;
+        this.qualityLevels = [];
+        this.currentQualityIdx = -1;
+        this.playbackRate = 1;
+        this.openMenu = null;
+        this.hideTimer = null;
+        this.seekDragging = false;
+        const accent = config.branding?.accentColor ?? '#00e5a0';
+        const brandName = config.branding?.name ?? 'GuardVideo';
+        injectStyles();
+        container.innerHTML = '';
+        this.root = el('div', 'gvp-root');
+        this.root.style.width = config.width ?? '100%';
+        this.root.style.height = config.height ?? 'auto';
+        this.root.style.setProperty('--gvp-accent', accent);
+        this.root.style.setProperty('--gvp-accent-dim', this._hexToRgba(accent, 0.18));
+        this.root.style.setProperty('--gvp-accent-glow', this._hexToRgba(accent, 0.35));
+        this.root.setAttribute('tabindex', '0');
+        this.root.setAttribute('role', 'region');
+        this.root.setAttribute('aria-label', `${brandName} video player`);
+        this.videoEl = el('video', 'gvp-video', { playsinline: '', preload: 'metadata' });
+        this.badge = el('div', 'gvp-badge');
+        this.badge.setAttribute('aria-hidden', 'true');
+        this.badge.appendChild(svgEl(ICON.shield, 13, 13));
+        this.badge.appendChild(document.createTextNode(brandName));
+        this.watermarkDiv = el('div', 'gvp-watermark');
+        this.watermarkDiv.setAttribute('aria-hidden', 'true');
+        this.spinner = el('div', 'gvp-spinner gvp-hidden');
+        this.spinner.setAttribute('aria-label', 'Loading');
+        this.spinner.setAttribute('role', 'status');
+        this.spinner.appendChild(el('div', 'gvp-spinner-ring'));
+        this.errorOverlay = el('div', 'gvp-error gvp-hidden');
+        this.errorOverlay.setAttribute('role', 'alert');
+        const errIcon = el('div', 'gvp-error-icon');
+        errIcon.textContent = '⚠️';
+        errIcon.setAttribute('aria-hidden', 'true');
+        const errCode = el('div', 'gvp-error-code');
+        const errMsg = el('div', 'gvp-error-msg');
+        this.errorOverlay.append(errIcon, errCode, errMsg);
+        this.centerPlay = el('div', 'gvp-center-play');
+        this.centerPlay.setAttribute('role', 'button');
+        this.centerPlay.setAttribute('aria-label', 'Play');
+        this.centerPlayBtn = el('div', 'gvp-center-play-btn');
+        this.centerPlayBtn.appendChild(svgEl(ICON.play, 30, 30));
+        this.centerPlay.appendChild(this.centerPlayBtn);
+        this.clickArea = el('div', 'gvp-click-area gvp-hidden');
+        this.clickArea.setAttribute('aria-hidden', 'true');
+        this.controls = el('div', 'gvp-controls');
+        const inner = el('div', 'gvp-controls-inner');
+        const seekRow = el('div', 'gvp-seek-row');
+        this.seekWrap = el('div', 'gvp-seek-wrap');
+        this.seekWrap.setAttribute('role', 'slider');
+        this.seekWrap.setAttribute('aria-label', 'Seek');
+        this.seekWrap.setAttribute('aria-valuemin', '0');
+        this.seekWrap.setAttribute('aria-valuemax', '100');
+        this.seekWrap.setAttribute('aria-valuenow', '0');
+        this.seekWrap.setAttribute('aria-valuetext', '0:00 of 0:00');
+        this.seekWrap.setAttribute('tabindex', '0');
+        const seekTrack = el('div', 'gvp-seek-track');
+        this.seekBuffered = el('div', 'gvp-seek-buffered');
+        this.seekProgress = el('div', 'gvp-seek-progress');
+        this.seekThumb = el('div', 'gvp-seek-thumb');
+        this.seekTooltip = el('div', 'gvp-seek-tooltip');
+        this.seekTooltip.setAttribute('aria-hidden', 'true');
+        seekTrack.append(this.seekBuffered, this.seekProgress);
+        this.seekWrap.append(seekTrack, this.seekThumb, this.seekTooltip);
+        seekRow.appendChild(this.seekWrap);
+        inner.appendChild(seekRow);
+        const btnRow = el('div', 'gvp-btn-row');
+        this.playBtn = el('button', 'gvp-btn gvp-btn-play');
+        this.playBtn.type = 'button';
+        this.playBtn.setAttribute('aria-label', 'Play');
+        this.playBtn.title = 'Play (k)';
+        this.playBtn.appendChild(svgEl(ICON.play));
+        const volWrap = el('div', 'gvp-volume-wrap');
+        this.volBtn = el('button', 'gvp-btn');
+        this.volBtn.type = 'button';
+        this.volBtn.setAttribute('aria-label', 'Mute');
+        this.volBtn.title = 'Mute (m)';
+        this.volBtn.appendChild(svgEl(ICON.volHigh, 18, 18));
+        this.volSlider = el('input', 'gvp-volume-slider');
+        Object.assign(this.volSlider, { type: 'range', min: '0', max: '1', step: '0.02', value: '1' });
+        this.volSlider.setAttribute('aria-label', 'Volume');
+        volWrap.append(this.volBtn, this.volSlider);
+        this.timeEl = el('span', 'gvp-time');
+        this.timeEl.setAttribute('aria-live', 'off');
+        this.timeEl.textContent = '0:00 / 0:00';
+        const spacer = el('div', 'gvp-spacer');
+        const divider = el('div', 'gvp-divider');
+        divider.setAttribute('aria-hidden', 'true');
+        const speedWrap = el('div', 'gvp-menu-wrap');
+        this.speedLabel = el('span', 'gvp-rate-label');
+        this.speedLabel.textContent = '1×';
+        this.speedLabel.setAttribute('role', 'button');
+        this.speedLabel.setAttribute('aria-label', 'Playback speed');
+        this.speedLabel.setAttribute('aria-haspopup', 'menu');
+        this.speedLabel.setAttribute('tabindex', '0');
+        this.speedMenu = el('div', 'gvp-menu gvp-hidden');
+        this.speedMenu.setAttribute('role', 'menu');
+        this.speedMenu.setAttribute('aria-label', 'Playback speed');
+        const speedTitle = el('div', 'gvp-menu-title');
+        speedTitle.setAttribute('aria-hidden', 'true');
+        speedTitle.textContent = 'Speed';
+        this.speedMenu.appendChild(speedTitle);
+        SPEEDS.forEach(r => {
+            const active = r === 1;
+            const item = el('div', active ? 'gvp-menu-item gvp-menu-item-active' : 'gvp-menu-item');
+            item.setAttribute('role', 'menuitemradio');
+            item.setAttribute('aria-checked', active ? 'true' : 'false');
+            item.dataset['speed'] = String(r);
+            item.textContent = r === 1 ? 'Normal' : `${r}×`;
+            if (active) {
+                const check = el('span', 'gvp-menu-check');
+                check.setAttribute('aria-hidden', 'true');
+                check.textContent = '✓';
+                item.appendChild(check);
+            }
+            this.speedMenu.appendChild(item);
+        });
+        speedWrap.append(this.speedLabel, this.speedMenu);
+        const qualWrap = el('div', 'gvp-menu-wrap');
+        this.settingsBtn = el('button', 'gvp-btn');
+        this.settingsBtn.type = 'button';
+        this.settingsBtn.setAttribute('aria-label', 'Quality settings');
+        this.settingsBtn.setAttribute('aria-haspopup', 'menu');
+        this.settingsBtn.title = 'Quality';
+        this.settingsBtn.appendChild(svgEl(ICON.settings, 18, 18));
+        this.settingsBtn.classList.add('gvp-hidden');
+        this.qualityMenu = el('div', 'gvp-menu gvp-hidden');
+        this.qualityMenu.setAttribute('role', 'menu');
+        this.qualityMenu.setAttribute('aria-label', 'Video quality');
+        qualWrap.append(this.settingsBtn, this.qualityMenu);
+        this.fsBtn = el('button', 'gvp-btn');
+        this.fsBtn.type = 'button';
+        this.fsBtn.setAttribute('aria-label', 'Enter fullscreen');
+        this.fsBtn.title = 'Fullscreen (f)';
+        this.fsBtn.appendChild(svgEl(ICON.fsEnter, 18, 18));
+        btnRow.append(this.playBtn, volWrap, this.timeEl, spacer, speedWrap, divider, qualWrap, this.fsBtn);
+        inner.appendChild(btnRow);
+        this.controls.appendChild(inner);
+        this.root.append(this.videoEl, this.badge, this.watermarkDiv, this.spinner, this.errorOverlay, this.centerPlay, this.clickArea, this.controls);
+        container.appendChild(this.root);
+        this._onFsChangeBound = () => this._onFsChange();
+        this._seekMouseMoveBound = (e) => { if (this.seekDragging)
+            this._seekTo(e.clientX); };
+        this._seekMouseUpBound = () => this._endSeekDrag();
+        this._seekTouchMoveBound = (e) => {
+            if (!this.seekDragging)
+                return;
+            e.preventDefault();
+            this._seekTo(e.touches[0].clientX);
+        };
+        this._seekTouchEndBound = () => this._endSeekDrag();
+        this._wireEvents(videoId, config);
+        if (config.forensicWatermark !== false) {
+            const wmText = config.viewerEmail || config.viewerName || '';
+            if (wmText)
+                this._renderWatermark(wmText);
+        }
+    }
+    _hexToRgba(hex, alpha) {
+        const clean = hex.replace('#', '');
+        const full = clean.length === 3
+            ? clean.split('').map(c => c + c).join('')
+            : clean;
+        const r = parseInt(full.substring(0, 2), 16);
+        const g = parseInt(full.substring(2, 4), 16);
+        const b = parseInt(full.substring(4, 6), 16);
+        if (isNaN(r) || isNaN(g) || isNaN(b))
+            return `rgba(0,229,160,${alpha})`;
+        return `rgba(${r},${g},${b},${alpha})`;
+    }
+    _wireEvents(videoId, config) {
+        const video = this.videoEl;
+        this.corePlayer = new GuardVideoPlayer(video, videoId, {
+            ...config,
             controls: false,
-            className: '',
-            style: {},
-            hlsConfig,
-            branding,
-            contextMenuItems,
-            security,
-            viewerName,
-            viewerEmail,
-            forensicWatermark,
+            forensicWatermark: config.forensicWatermark !== false,
             onReady: () => {
-                onReady?.();
-                setTimeout(() => {
-                    const levels = player.getQualityLevels();
-                    setQualityLevels(levels);
-                }, 100);
+                config.onReady?.();
+                const levels = this.corePlayer.getQualityLevels();
+                if (levels.length) {
+                    this.qualityLevels = levels;
+                    this._buildQualityMenu();
+                }
+                else {
+                    setTimeout(() => {
+                        this.qualityLevels = this.corePlayer.getQualityLevels();
+                        if (this.qualityLevels.length)
+                            this._buildQualityMenu();
+                    }, 100);
+                }
             },
             onError: (err) => {
-                setError(err);
-                onError?.(err);
+                this._showError(err);
+                config.onError?.(err);
             },
             onQualityChange: (quality) => {
-                onQualityChange?.(quality);
-                const idx = player.getQualityLevels().findIndex(l => l.name === quality);
-                setCurrentQualityIdx(idx);
+                const idx = this.qualityLevels.findIndex(l => l.name === quality);
+                this.currentQualityIdx = idx;
+                this._refreshQualityMenu();
+                config.onQualityChange?.(quality);
             },
             onStateChange: (state) => {
-                setPlayerState(state);
-                onStateChange?.(state);
+                this._onStateChange(state);
+                config.onStateChange?.(state);
             },
         });
-        playerRef.current = player;
-        return () => {
-            player.destroy();
-            playerRef.current = null;
-        };
-    }, [videoId, embedTokenEndpoint]);
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video)
-            return;
-        const onTimeUpdate = () => {
-            setCurrentTime(video.currentTime);
-            onTimeUpdateProp?.(video.currentTime);
-        };
-        const onDuration = () => setDuration(video.duration || 0);
-        const onProgress = () => {
+        video.addEventListener('timeupdate', () => {
+            config.onTimeUpdate?.(video.currentTime);
+            this._onTimeUpdate();
+        });
+        video.addEventListener('loadedmetadata', () => {
+            this.duration = video.duration || 0;
+            this._onTimeUpdate();
+        });
+        video.addEventListener('durationchange', () => {
+            this.duration = video.duration || 0;
+        });
+        video.addEventListener('progress', () => {
             if (video.buffered.length > 0) {
-                setBuffered(video.buffered.end(video.buffered.length - 1));
+                this.bufferedEnd = video.buffered.end(video.buffered.length - 1);
+                this._updateSeekBar();
+            }
+        });
+        video.addEventListener('volumechange', () => this._onVolumeChange());
+        video.addEventListener('ended', () => {
+            config.onEnded?.();
+            this._showControls(true);
+            this._renderPlayBtn();
+        });
+        video.addEventListener('ratechange', () => {
+            this.playbackRate = video.playbackRate;
+            const isNormal = this.playbackRate === 1;
+            this.speedLabel.textContent = isNormal ? '1×' : `${this.playbackRate}×`;
+            this.speedLabel.classList.toggle('gvp-rate-label-active', !isNormal);
+        });
+        this.playBtn.addEventListener('click', (e) => { e.stopPropagation(); this._togglePlay(); });
+        this.volBtn.addEventListener('click', (e) => { e.stopPropagation(); this._toggleMute(); });
+        this.volSlider.addEventListener('input', () => {
+            video.volume = parseFloat(this.volSlider.value);
+            video.muted = video.volume === 0;
+        });
+        this.seekWrap.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            this._startSeekDrag();
+            this._seekTo(e.clientX);
+            window.addEventListener('mousemove', this._seekMouseMoveBound);
+            window.addEventListener('mouseup', this._seekMouseUpBound);
+        });
+        this.seekWrap.addEventListener('mousemove', (e) => this._onSeekHover(e.clientX));
+        this.seekWrap.addEventListener('mouseleave', () => {
+            this.seekTooltip.style.opacity = '0';
+        });
+        this.seekWrap.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            this._startSeekDrag();
+            this._seekTo(e.touches[0].clientX);
+            window.addEventListener('touchmove', this._seekTouchMoveBound, { passive: false });
+            window.addEventListener('touchend', this._seekTouchEndBound);
+        }, { passive: false });
+        this.seekWrap.addEventListener('keydown', (e) => {
+            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+                return;
+            e.preventDefault();
+            const delta = e.key === 'ArrowLeft' ? -5 : 5;
+            this.corePlayer.seek(Math.max(0, Math.min(this.duration, video.currentTime + delta)));
+            this._resetHideTimer();
+        });
+        this.speedLabel.addEventListener('click', (e) => { e.stopPropagation(); this._toggleMenu('speed'); });
+        this.speedLabel.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._toggleMenu('speed');
+            }
+        });
+        this.speedMenu.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const item = e.target.closest('[data-speed]');
+            if (!item)
+                return;
+            video.playbackRate = parseFloat(item.dataset['speed']);
+            this._closeMenus();
+        });
+        this.settingsBtn.addEventListener('click', (e) => { e.stopPropagation(); this._toggleMenu('quality'); });
+        this.qualityMenu.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const item = e.target.closest('[data-quality]');
+            if (!item)
+                return;
+            const idx = parseInt(item.dataset['quality']);
+            this.corePlayer.setQuality(idx);
+            this.currentQualityIdx = idx;
+            this._refreshQualityMenu();
+            this._closeMenus();
+        });
+        this.clickArea.addEventListener('click', (e) => { this._addRipple(e); this._togglePlay(); });
+        this.centerPlay.addEventListener('click', (e) => { e.stopPropagation(); this._togglePlay(); });
+        this.fsBtn.addEventListener('click', (e) => { e.stopPropagation(); this._toggleFullscreen(); });
+        document.addEventListener('fullscreenchange', this._onFsChangeBound);
+        document.addEventListener('webkitfullscreenchange', this._onFsChangeBound);
+        document.addEventListener('mozfullscreenchange', this._onFsChangeBound);
+        document.addEventListener('MSFullscreenChange', this._onFsChangeBound);
+        this.root.addEventListener('mousemove', () => this._resetHideTimer());
+        this.root.addEventListener('touchstart', () => this._resetHideTimer(), { passive: true });
+        this.root.addEventListener('mouseleave', () => {
+            if (this.playerState === PlayerState.PLAYING)
+                this._showControls(false);
+        });
+        this.root.addEventListener('click', () => this._closeMenus());
+        this.root.addEventListener('keydown', (e) => this._onKeyDown(e));
+    }
+    _onStateChange(state) {
+        this.playerState = state;
+        const loading = state === PlayerState.LOADING || state === PlayerState.BUFFERING;
+        const idle = state === PlayerState.IDLE;
+        const ended = this.videoEl.ended;
+        this.spinner.classList.toggle('gvp-hidden', !loading);
+        const showCenter = (idle || ended) && !loading;
+        this.centerPlay.classList.toggle('gvp-hidden', !showCenter);
+        if (showCenter) {
+            this.centerPlayBtn.innerHTML = '';
+            this.centerPlayBtn.appendChild(svgEl(ended ? ICON.replay : ICON.play, 30, 30));
+            this.centerPlay.setAttribute('aria-label', ended ? 'Replay' : 'Play');
+        }
+        this.clickArea.classList.toggle('gvp-hidden', idle);
+        if (state !== PlayerState.PLAYING) {
+            this._showControls(true);
+            if (this.hideTimer) {
+                clearTimeout(this.hideTimer);
+                this.hideTimer = null;
             }
-        };
-        const onVolumeChange = () => {
-            setVolume(video.volume);
-            setMuted(video.muted);
-        };
-        const onEnded_ = () => {
-            onEnded?.();
-            setShowControls(true);
-        };
-        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', 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);
-        };
-    }, [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();
+            this._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: (t) => playerRef.current?.seek(t),
-        getDuration: () => playerRef.current?.getDuration() || 0,
-        getVolume: () => playerRef.current?.getVolume() || 1,
-        setVolume: (v) => playerRef.current?.setVolume(v),
-        getQualityLevels: () => playerRef.current?.getQualityLevels() || [],
-        getCurrentQuality: () => playerRef.current?.getCurrentQuality() || null,
-        setQuality: (i) => playerRef.current?.setQuality(i),
-        getState: () => playerRef.current?.getState() || PlayerState.IDLE,
-        destroy: () => playerRef.current?.destroy(),
-        getVideoElement: () => videoRef.current,
-    }));
-    const togglePlay = useCallback(() => {
-        const video = videoRef.current;
-        if (!video)
-            return;
-        if (video.paused || video.ended) {
-            playerRef.current?.play().catch(() => { });
+        this._renderPlayBtn();
+    }
+    _togglePlay() {
+        const v = this.videoEl;
+        if (v.paused || v.ended) {
+            this.corePlayer.play().catch(() => { });
         }
         else {
-            playerRef.current?.pause();
+            this.corePlayer.pause();
         }
-        resetHideTimer();
-    }, [resetHideTimer]);
-    const setVolume_ = useCallback((v) => {
-        if (!videoRef.current)
+        this._resetHideTimer();
+    }
+    _renderPlayBtn() {
+        const ended = this.videoEl.ended;
+        const playing = this.playerState === PlayerState.PLAYING;
+        const icon = ended ? ICON.replay : playing ? ICON.pause : ICON.play;
+        const label = playing ? 'Pause' : 'Play';
+        this.playBtn.innerHTML = '';
+        this.playBtn.appendChild(svgEl(icon));
+        this.playBtn.setAttribute('aria-label', label);
+        this.playBtn.title = `${label} (k)`;
+    }
+    _toggleMute() { this.videoEl.muted = !this.videoEl.muted; }
+    _onVolumeChange() {
+        const v = this.videoEl;
+        const vol = v.muted ? 0 : v.volume;
+        const muted = vol === 0;
+        const icon = muted ? ICON.volMute : vol < 0.4 ? ICON.volLow : vol < 0.75 ? ICON.volMid : ICON.volHigh;
+        this.volBtn.innerHTML = '';
+        this.volBtn.appendChild(svgEl(icon, 18, 18));
+        this.volBtn.setAttribute('aria-label', muted ? 'Unmute' : 'Mute');
+        this.volBtn.title = muted ? 'Unmute (m)' : 'Mute (m)';
+        this.volSlider.value = String(vol);
+    }
+    _startSeekDrag() {
+        this.seekDragging = true;
+        this.seekWrap.classList.add('gvp-dragging');
+    }
+    _endSeekDrag() {
+        this.seekDragging = false;
+        this.seekWrap.classList.remove('gvp-dragging');
+        window.removeEventListener('mousemove', this._seekMouseMoveBound);
+        window.removeEventListener('mouseup', this._seekMouseUpBound);
+        window.removeEventListener('touchmove', this._seekTouchMoveBound);
+        window.removeEventListener('touchend', this._seekTouchEndBound);
+        this._resetHideTimer();
+    }
+    _seekTo(clientX) {
+        if (!this.duration)
             return;
-        videoRef.current.volume = v;
-        videoRef.current.muted = v === 0;
-    }, []);
-    const toggleMute = useCallback(() => {
-        if (!videoRef.current)
+        const rect = this.seekWrap.getBoundingClientRect();
+        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        this.corePlayer.seek(pct * this.duration);
+    }
+    _onSeekHover(clientX) {
+        if (!this.duration)
             return;
-        videoRef.current.muted = !videoRef.current.muted;
-    }, []);
-    const toggleFullscreen = useCallback(() => {
-        const el = containerRef.current;
-        if (!el)
+        const rect = this.seekWrap.getBoundingClientRect();
+        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        this.seekTooltip.textContent = formatTime(pct * this.duration);
+        this.seekTooltip.style.left = `${pct * 100}%`;
+        this.seekTooltip.style.opacity = '1';
+    }
+    _onTimeUpdate() {
+        const ct = this.videoEl.currentTime;
+        const dur = this.duration;
+        this.timeEl.textContent = `${formatTime(ct)} / ${formatTime(dur)}`;
+        this._updateSeekBar();
+        const pct = dur > 0 ? Math.round((ct / dur) * 100) : 0;
+        this.seekWrap.setAttribute('aria-valuenow', String(pct));
+        this.seekWrap.setAttribute('aria-valuetext', `${formatTime(ct)} of ${formatTime(dur)}`);
+    }
+    _updateSeekBar() {
+        const ct = this.videoEl.currentTime;
+        const dur = this.duration;
+        if (!dur)
             return;
-        if (document.fullscreenElement) {
-            document.exitFullscreen().catch(() => { });
+        const pPct = (ct / dur) * 100;
+        const bPct = (this.bufferedEnd / dur) * 100;
+        this.seekProgress.style.width = `${pPct}%`;
+        this.seekBuffered.style.width = `${bPct}%`;
+        this.seekThumb.style.left = `${pPct}%`;
+    }
+    _buildQualityMenu() {
+        if (!this.qualityLevels.length)
+            return;
+        this.settingsBtn.classList.remove('gvp-hidden');
+        this.qualityMenu.innerHTML = '';
+        const title = el('div', 'gvp-menu-title');
+        title.setAttribute('aria-hidden', 'true');
+        title.textContent = 'Quality';
+        const autoItem = el('div', 'gvp-menu-item gvp-menu-item-active');
+        autoItem.setAttribute('role', 'menuitemradio');
+        autoItem.setAttribute('aria-checked', 'true');
+        autoItem.dataset['quality'] = '-1';
+        autoItem.textContent = 'Auto';
+        const checkEl = el('span', 'gvp-menu-check');
+        checkEl.setAttribute('aria-hidden', 'true');
+        checkEl.textContent = '✓';
+        autoItem.appendChild(checkEl);
+        this.qualityMenu.append(title, autoItem, el('div', 'gvp-menu-sep'));
+        [...this.qualityLevels].reverse().forEach(q => {
+            const item = el('div', 'gvp-menu-item');
+            item.setAttribute('role', 'menuitemradio');
+            item.setAttribute('aria-checked', 'false');
+            item.dataset['quality'] = String(q.index);
+            item.textContent = q.name;
+            this.qualityMenu.appendChild(item);
+        });
+        this.currentQualityIdx = -1;
+    }
+    _refreshQualityMenu() {
+        this.qualityMenu.querySelectorAll('[data-quality]').forEach(item => {
+            const active = parseInt(item.dataset['quality']) === this.currentQualityIdx;
+            item.className = active ? 'gvp-menu-item gvp-menu-item-active' : 'gvp-menu-item';
+            item.setAttribute('aria-checked', String(active));
+            const existing = item.querySelector('.gvp-menu-check');
+            if (active && !existing) {
+                const c = el('span', 'gvp-menu-check');
+                c.setAttribute('aria-hidden', 'true');
+                c.textContent = '✓';
+                item.appendChild(c);
+            }
+            else if (!active && existing) {
+                existing.remove();
+            }
+        });
+    }
+    _refreshSpeedMenu() {
+        this.speedMenu.querySelectorAll('[data-speed]').forEach(item => {
+            const active = parseFloat(item.dataset['speed']) === this.playbackRate;
+            item.className = active ? 'gvp-menu-item gvp-menu-item-active' : 'gvp-menu-item';
+            item.setAttribute('aria-checked', String(active));
+            const existing = item.querySelector('.gvp-menu-check');
+            if (active && !existing) {
+                const c = el('span', 'gvp-menu-check');
+                c.setAttribute('aria-hidden', 'true');
+                c.textContent = '✓';
+                item.appendChild(c);
+            }
+            else if (!active && existing) {
+                existing.remove();
+            }
+        });
+    }
+    _toggleMenu(which) {
+        const same = this.openMenu === which;
+        this._closeMenus();
+        if (!same) {
+            this.openMenu = which;
+            if (which === 'speed') {
+                this._refreshSpeedMenu();
+                this.speedMenu.classList.remove('gvp-hidden');
+            }
+            else {
+                this._refreshQualityMenu();
+                this.qualityMenu.classList.remove('gvp-hidden');
+            }
+        }
+    }
+    _closeMenus() {
+        this.openMenu = null;
+        this.speedMenu.classList.add('gvp-hidden');
+        this.qualityMenu.classList.add('gvp-hidden');
+    }
+    _showControls(visible) {
+        this.controls.classList.toggle('gvp-controls-hidden', !visible);
+        this.badge.classList.toggle('gvp-badge-hidden', !visible);
+    }
+    _resetHideTimer() {
+        this._showControls(true);
+        if (this.hideTimer)
+            clearTimeout(this.hideTimer);
+        this.hideTimer = setTimeout(() => {
+            if (this.playerState === PlayerState.PLAYING && !this.openMenu) {
+                this._showControls(false);
+            }
+        }, 2800);
+    }
+    _toggleFullscreen() {
+        const doc = document;
+        const root = this.root;
+        const isFs = !!(document.fullscreenElement ||
+            doc.webkitFullscreenElement ||
+            doc.mozFullScreenElement ||
+            doc.msFullscreenElement);
+        if (isFs) {
+            (document.exitFullscreen?.() ||
+                doc.webkitExitFullscreen?.() ||
+                doc.mozCancelFullScreen?.() ||
+                (doc.msExitFullscreen?.(), Promise.resolve()))
+                ?.catch?.(() => { });
         }
         else {
-            el.requestFullscreen().catch(() => { });
+            (root.requestFullscreen?.() ||
+                root.webkitRequestFullscreen?.() ||
+                root.mozRequestFullScreen?.() ||
+                (root.msRequestFullscreen?.(), Promise.resolve()))
+                ?.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 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();
+    }
+    _onFsChange() {
+        const doc = document;
+        const fs = !!(document.fullscreenElement ||
+            doc.webkitFullscreenElement ||
+            doc.mozFullScreenElement ||
+            doc.msFullscreenElement);
+        this.fsBtn.innerHTML = '';
+        this.fsBtn.appendChild(svgEl(fs ? ICON.fsExit : ICON.fsEnter, 18, 18));
+        this.fsBtn.setAttribute('aria-label', fs ? 'Exit fullscreen' : 'Enter fullscreen');
+        this.fsBtn.title = fs ? 'Exit fullscreen (f)' : 'Enter fullscreen (f)';
+    }
+    _showError(err) {
+        this.errorOverlay.children[1].textContent = err.code;
+        this.errorOverlay.children[2].textContent = err.message;
+        this.errorOverlay.classList.remove('gvp-hidden');
+        this.controls.classList.add('gvp-hidden');
+    }
+    _renderWatermark(text) {
+        this.watermarkDiv.innerHTML = '';
+        for (let i = 0; i < 20; i++) {
+            const span = el('span', 'gvp-watermark-text');
+            span.textContent = text;
+            span.style.left = `${(i % 4) * 26 + (Math.floor(i / 4) % 2) * 13}%`;
+            span.style.top = `${Math.floor(i / 4) * 22}%`;
+            this.watermarkDiv.appendChild(span);
+        }
+    }
+    _addRipple(e) {
+        const rect = this.root.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);
-    };
-    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)))))));
+        const sz = 60;
+        d.style.cssText = `width:${sz}px;height:${sz}px;left:${e.clientX - rect.left - sz / 2}px;top:${e.clientY - rect.top - sz / 2}px`;
+        this.root.appendChild(d);
+        setTimeout(() => d.remove(), 650);
+    }
+    _onKeyDown(e) {
+        switch (e.code) {
+            case 'Space':
+            case 'KeyK':
+                e.preventDefault();
+                this._togglePlay();
+                break;
+            case 'ArrowLeft':
+                if (document.activeElement !== this.seekWrap) {
+                    e.preventDefault();
+                    this.corePlayer.seek(Math.max(0, this.videoEl.currentTime - 5));
+                }
+                break;
+            case 'ArrowRight':
+                if (document.activeElement !== this.seekWrap) {
+                    e.preventDefault();
+                    this.corePlayer.seek(Math.min(this.duration, this.videoEl.currentTime + 5));
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.videoEl.volume = Math.min(1, this.videoEl.volume + 0.1);
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                this.videoEl.volume = Math.max(0, this.videoEl.volume - 0.1);
+                break;
+            case 'KeyM':
+                e.preventDefault();
+                this._toggleMute();
+                break;
+            case 'KeyF':
+                e.preventDefault();
+                this._toggleFullscreen();
+                break;
+        }
+    }
+    play() { return this.corePlayer.play(); }
+    pause() { return this.corePlayer.pause(); }
+    seek(t) { return this.corePlayer.seek(t); }
+    getCurrentTime() { return this.corePlayer.getCurrentTime(); }
+    getDuration() { return this.corePlayer.getDuration(); }
+    getVolume() { return this.corePlayer.getVolume(); }
+    setVolume(v) { return this.corePlayer.setVolume(v); }
+    getQualityLevels() { return this.corePlayer.getQualityLevels(); }
+    getCurrentQuality() { return this.corePlayer.getCurrentQuality(); }
+    setQuality(i) { return this.corePlayer.setQuality(i); }
+    getState() { return this.corePlayer.getState(); }
+    getVideoElement() { return this.videoEl; }
+    destroy() {
+        if (this.hideTimer)
+            clearTimeout(this.hideTimer);
+        document.removeEventListener('fullscreenchange', this._onFsChangeBound);
+        document.removeEventListener('webkitfullscreenchange', this._onFsChangeBound);
+        document.removeEventListener('mozfullscreenchange', this._onFsChangeBound);
+        document.removeEventListener('MSFullscreenChange', this._onFsChangeBound);
+        window.removeEventListener('mousemove', this._seekMouseMoveBound);
+        window.removeEventListener('mouseup', this._seekMouseUpBound);
+        window.removeEventListener('touchmove', this._seekTouchMoveBound);
+        window.removeEventListener('touchend', this._seekTouchEndBound);
+        this.corePlayer.destroy();
+        this.root.remove();
+    }
+}
+
+const GuardVideoPlayerComponent = forwardRef((props, ref) => {
+    const { videoId, width = '100%', height = 'auto', className = '', style = {}, onReady, onError, onQualityChange, onStateChange, onTimeUpdate, onEnded, ...playerConfig } = props;
+    const mountRef = useRef(null);
+    const uiRef = useRef(null);
+    const cbRef = useRef({ onReady, onError, onQualityChange, onStateChange, onTimeUpdate, onEnded });
+    cbRef.current = { onReady, onError, onQualityChange, onStateChange, onTimeUpdate, onEnded };
+    useEffect(() => {
+        if (!mountRef.current)
+            return;
+        const config = {
+            ...playerConfig,
+            width: String(width),
+            height: String(height),
+            onReady: () => cbRef.current.onReady?.(),
+            onError: (e) => cbRef.current.onError?.(e),
+            onQualityChange: (q) => cbRef.current.onQualityChange?.(q),
+            onStateChange: (s) => cbRef.current.onStateChange?.(s),
+            onTimeUpdate: (t) => cbRef.current.onTimeUpdate?.(t),
+            onEnded: () => cbRef.current.onEnded?.(),
+        };
+        const ui = new PlayerUI(mountRef.current, videoId, config);
+        uiRef.current = ui;
+        return () => { ui.destroy(); uiRef.current = null; };
+    }, [videoId, playerConfig.embedTokenEndpoint]);
+    useImperativeHandle(ref, () => ({
+        play: () => uiRef.current?.play() ?? Promise.resolve(),
+        pause: () => uiRef.current?.pause(),
+        seek: (t) => uiRef.current?.seek(t),
+        getCurrentTime: () => uiRef.current?.getCurrentTime() ?? 0,
+        getDuration: () => uiRef.current?.getDuration() ?? 0,
+        getVolume: () => uiRef.current?.getVolume() ?? 1,
+        setVolume: (v) => uiRef.current?.setVolume(v),
+        getQualityLevels: () => uiRef.current?.getQualityLevels() ?? [],
+        getCurrentQuality: () => uiRef.current?.getCurrentQuality() ?? null,
+        setQuality: (i) => uiRef.current?.setQuality(i),
+        getState: () => uiRef.current?.getState() ?? PlayerState.IDLE,
+        destroy: () => uiRef.current?.destroy(),
+        getVideoElement: () => uiRef.current?.getVideoElement() ?? null,
+    }));
+    return (React.createElement("div", { ref: mountRef, className: className, style: { width, height, ...style } }));
 });
 GuardVideoPlayerComponent.displayName = 'GuardVideoPlayer';