@guardvideo/player-sdk 1.0.2 → 1.2.0

package/dist/vanilla/guardvideo-player.js

@@ -36688,7 +36688,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               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 || (() => { }),
@@ -37083,7 +37083,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                   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) {
@@ -37281,33 +37281,659 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       }
   };
 
-  class GuardVideoPlayer extends GuardVideoPlayer$1 {
-      static create(containerId, videoId, config) {
-          const container = document.getElementById(containerId);
-          if (!container) {
-              throw new Error(`Container element with id "${containerId}" not found`);
-          }
-          const videoElement = document.createElement('video');
-          videoElement.setAttribute('playsinline', '');
-          videoElement.setAttribute('preload', 'metadata');
-          videoElement.style.width = '100%';
-          videoElement.style.height = '100%';
-          videoElement.style.objectFit = 'contain';
+  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}`;
+  }
+  function el(tag, cls, attrs) {
+      const e = document.createElement(tag);
+      if (cls)
+          e.className = cls;
+      if (attrs)
+          Object.entries(attrs).forEach(([k, v]) => e.setAttribute(k, v));
+      return e;
+  }
+  function svg(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.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"/>',
+      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.5" stroke-linecap="round" stroke-linejoin="round" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
+  };
+  let _stylesInjected = false;
+  function injectStyles(accent) {
+      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 ${accent}66;}
+.gvp-video{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px;}
+
+/* Spinner */
+.gvp-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(0,0,0,.55);border-radius:10px;}
+.gvp-spinner-ring{width:48px;height:48px;border:3px solid rgba(255,255,255,.15);border-top-color:${accent};border-radius:50%;animation:gvp-spin .8s linear infinite;}
+@keyframes gvp-spin{to{transform:rotate(360deg);}}
+.gvp-spinner-hidden{display:none;}
+
+/* Centre play */
+.gvp-center-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,.3);transition:background .2s;border-radius:10px;z-index:3;}
+.gvp-center-play:hover{background:rgba(0,0,0,.45);}
+.gvp-center-play-btn{width:72px;height:72px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.25);transition:background .2s,transform .15s;color:#fff;}
+.gvp-center-play:hover .gvp-center-play-btn{background:${accent}cc;transform:scale(1.08);}
+.gvp-center-play-hidden{display:none;}
+
+/* Click overlay */
+.gvp-click-area{position:absolute;inset:0;cursor:pointer;z-index:1;}
+.gvp-click-area-hidden{display:none;}
+
+/* Ripple */
+.gvp-ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.25);animation:gvp-ripple-anim .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,.85) 0%,transparent 100%);padding:36px 14px 10px;transition:opacity .3s,transform .3s;border-radius:0 0 10px 10px;}
+.gvp-controls-hidden{opacity:0;transform:translateY(6px);pointer-events:none;}
+
+/* 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,.2);border-radius:4px;position:relative;overflow:hidden;transition:height .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,.35);border-radius:4px;pointer-events:none;}
+.gvp-seek-progress{position:absolute;left:0;top:0;height:100%;background:${accent};border-radius:4px;pointer-events:none;transition:width .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,.5);pointer-events:none;opacity:0;transition:opacity .15s;}
+.gvp-seek-wrap:hover .gvp-seek-thumb{opacity:1;}
+.gvp-seek-tooltip{position:absolute;bottom:24px;transform:translateX(-50%);background:rgba(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 .1s;}
+.gvp-seek-wrap:hover .gvp-seek-tooltip{opacity:1;}
+
+/* Button 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 .15s,color .15s;flex-shrink:0;}
+.gvp-btn:hover{background:rgba(255,255,255,.12);color:${accent};}
+.gvp-btn:active{background:rgba(255,255,255,.2);}
+
+/* Volume */
+.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,.25);border-radius:4px;outline:none;cursor:pointer;accent-color:${accent};}
+.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,.4);}
+.gvp-volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none;}
+
+/* Time */
+.gvp-time{font-size:12px;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em;}
+.gvp-spacer{flex:1;}
+
+/* Menus */
+.gvp-menu-wrap{position:relative;}
+.gvp-menu{position:absolute;bottom:calc(100% + 8px);right:0;background:rgba(18,18,22,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:8px;min-width:140px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:gvp-menu-in .1s ease-out;z-index:20;}
+.gvp-menu-hidden{display:none;}
+@keyframes gvp-menu-in{from{opacity:0;transform:scale(.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:.08em;color:rgba(255,255,255,.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,.85);cursor:pointer;transition:background .12s;gap:10px;}
+.gvp-menu-item:hover{background:rgba(255,255,255,.07);}
+.gvp-menu-item-active{color:${accent};font-weight:600;}
+.gvp-menu-check{font-size:14px;color:${accent};}
+.gvp-menu-sep{height:1px;background:rgba(255,255,255,.07);margin:3px 0;}
+
+/* Error */
+.gvp-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.8);color:#fff;gap:10px;padding:24px;border-radius:10px;text-align:center;}
+.gvp-error-hidden{display:none;}
+.gvp-error-icon{font-size:36px;}
+.gvp-error-code{font-size:11px;font-weight:700;letter-spacing:.1em;color:#f87171;text-transform:uppercase;}
+.gvp-error-msg{font-size:14px;color:rgba(255,255,255,.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,.55);backdrop-filter:blur(6px);border-radius:20px;padding:3px 9px 3px 7px;font-size:10px;font-weight:600;color:${accent};pointer-events:none;z-index:5;letter-spacing:.04em;transition:opacity .3s;}
+.gvp-badge-hidden{opacity:0;}
+
+/* Watermark */
+.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,.065);transform:rotate(-28deg);user-select:none;pointer-events:none;letter-spacing:.05em;}
+
+/* Speed */
+.gvp-rate-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.7);min-width:28px;text-align:center;cursor:pointer;padding:5px 4px;border-radius:4px;transition:background .12s;flex-shrink:0;}
+.gvp-rate-label:hover{background:rgba(255,255,255,.1);}
+`;
+      const tag = document.createElement('style');
+      tag.setAttribute('data-guardvideo', 'player-ui-styles');
+      tag.textContent = css;
+      document.head.appendChild(tag);
+  }
+  const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+  class VanillaPlayerUI {
+      constructor(container, videoId, config) {
+          this.playerState = exports.PlayerState.IDLE;
+          this.duration = 0;
+          this.bufferedEnd = 0;
+          this.qualityLevels = [];
+          this.currentQualityIdx = -1;
+          this.playbackRate = 1;
+          this.openMenu = null;
+          this.hideTimer = null;
+          this.watermarkText = null;
+          this.seekDragging = false;
+          this.accent = config.branding?.accentColor ?? '#44c09b';
+          this.brandName = config.branding?.name ?? 'GuardVideo';
+          const forensic = config.forensicWatermark !== false;
+          injectStyles(this.accent);
+          this.buildDOM(container, config.width ?? '100%', config.height ?? 'auto');
+          this.wireEvents(videoId, config, forensic);
+          if (forensic) {
+              const wtxt = config.viewerEmail || config.viewerName || '';
+              if (wtxt) {
+                  setTimeout(() => {
+                      this.watermarkText = wtxt;
+                      this.renderWatermark();
+                  }, 1500);
+              }
+          }
+      }
+      buildDOM(container, width, height) {
           container.innerHTML = '';
-          container.style.position = 'relative';
-          container.style.backgroundColor = '#000';
-          container.appendChild(videoElement);
-          return new GuardVideoPlayer(videoElement, videoId, config);
+          this.root = el('div', 'gvp-root');
+          this.root.style.width = width;
+          this.root.style.height = height;
+          this.root.setAttribute('tabindex', '0');
+          this.videoEl = el('video', 'gvp-video', { playsinline: '', preload: 'metadata' });
+          this.badge = el('div', 'gvp-badge');
+          const shieldSvg = svg(ICON.shield, 14, 14);
+          shieldSvg.style.color = this.accent;
+          this.badge.appendChild(shieldSvg);
+          this.badge.appendChild(document.createTextNode(this.brandName));
+          this.watermarkDiv = el('div', 'gvp-watermark');
+          this.spinner = el('div', 'gvp-spinner gvp-spinner-hidden');
+          this.spinner.appendChild(el('div', 'gvp-spinner-ring'));
+          this.errorOverlay = el('div', 'gvp-error gvp-error-hidden');
+          const errIcon = el('div', 'gvp-error-icon');
+          errIcon.textContent = '⚠️';
+          const errCode = el('div', 'gvp-error-code');
+          errCode.id = 'gvp-err-code';
+          const errMsg = el('div', 'gvp-error-msg');
+          errMsg.id = 'gvp-err-msg';
+          this.errorOverlay.append(errIcon, errCode, errMsg);
+          this.centerPlay = el('div', 'gvp-center-play');
+          this.centerPlayBtn = el('div', 'gvp-center-play-btn');
+          this.centerPlayBtn.appendChild(svg(ICON.play, 32, 32));
+          this.centerPlay.appendChild(this.centerPlayBtn);
+          this.clickArea = el('div', 'gvp-click-area gvp-click-area-hidden');
+          this.controls = el('div', 'gvp-controls');
+          const seekRow = el('div', 'gvp-seek-row');
+          this.seekWrap = el('div', 'gvp-seek-wrap');
+          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');
+          seekTrack.append(this.seekBuffered, this.seekProgress);
+          this.seekWrap.append(seekTrack, this.seekThumb, this.seekTooltip);
+          seekRow.appendChild(this.seekWrap);
+          this.controls.appendChild(seekRow);
+          const btnRow = el('div', 'gvp-btn-row');
+          this.playBtn = el('button', 'gvp-btn');
+          this.playBtn.title = 'Play (k)';
+          this.playBtn.appendChild(svg(ICON.play));
+          const volWrap = el('div', 'gvp-volume-wrap');
+          this.volBtn = el('button', 'gvp-btn');
+          this.volBtn.title = 'Mute (m)';
+          this.volBtn.appendChild(svg(ICON.volHigh, 18, 18));
+          this.volSlider = el('input', 'gvp-volume-slider');
+          this.volSlider.type = 'range';
+          this.volSlider.min = '0';
+          this.volSlider.max = '1';
+          this.volSlider.step = '0.02';
+          this.volSlider.value = '1';
+          this.volSlider.title = 'Volume';
+          volWrap.append(this.volBtn, this.volSlider);
+          this.timeEl = el('span', 'gvp-time');
+          this.timeEl.textContent = '0:00 / 0:00';
+          const spacer = el('div', 'gvp-spacer');
+          const speedWrap = el('div', 'gvp-menu-wrap');
+          this.speedLabel = el('span', 'gvp-rate-label');
+          this.speedLabel.textContent = '1×';
+          this.speedLabel.title = 'Playback speed';
+          this.speedMenu = el('div', 'gvp-menu gvp-menu-hidden');
+          const speedTitle = el('div', 'gvp-menu-title');
+          speedTitle.textContent = 'Speed';
+          this.speedMenu.appendChild(speedTitle);
+          SPEEDS.forEach(r => {
+              const item = el('div', `gvp-menu-item${r === 1 ? ' gvp-menu-item-active' : ''}`);
+              item.textContent = r === 1 ? 'Normal' : `${r}×`;
+              item.dataset['speed'] = String(r);
+              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.title = 'Quality settings';
+          this.settingsBtn.appendChild(svg(ICON.settings, 18, 18));
+          this.settingsBtn.style.display = 'none';
+          this.qualityMenu = el('div', 'gvp-menu gvp-menu-hidden');
+          qualWrap.append(this.settingsBtn, this.qualityMenu);
+          this.fsBtn = el('button', 'gvp-btn');
+          this.fsBtn.title = 'Fullscreen (f)';
+          this.fsBtn.appendChild(svg(ICON.fsEnter, 18, 18));
+          btnRow.append(this.playBtn, volWrap, this.timeEl, spacer, speedWrap, qualWrap, this.fsBtn);
+          this.controls.appendChild(btnRow);
+          this.root.append(this.videoEl, this.badge, this.watermarkDiv, this.spinner, this.errorOverlay, this.centerPlay, this.clickArea, this.controls);
+          container.appendChild(this.root);
+      }
+      wireEvents(videoId, config, forensicWatermark) {
+          const video = this.videoEl;
+          this.corePlayer = new GuardVideoPlayer$1(video, videoId, {
+              ...config,
+              controls: false,
+              forensicWatermark,
+              onReady: () => {
+                  config.onReady?.();
+                  setTimeout(() => {
+                      this.qualityLevels = this.corePlayer.getQualityLevels();
+                      this.buildQualityMenu();
+                  }, 100);
+              },
+              onError: (err) => {
+                  this.showError(err);
+                  config.onError?.(err);
+              },
+              onQualityChange: (quality) => {
+                  const idx = this.qualityLevels.findIndex(l => l.name === quality);
+                  this.currentQualityIdx = idx;
+                  this.refreshQualityMenu();
+                  config.onQualityChange?.(quality);
+              },
+              onStateChange: (state) => {
+                  this.onStateChange(state);
+                  config.onStateChange?.(state);
+              },
+          });
+          video.addEventListener('timeupdate', () => 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) {
+                  this.bufferedEnd = video.buffered.end(video.buffered.length - 1);
+                  this.updateSeekBar();
+              }
+          });
+          video.addEventListener('volumechange', () => this.onVolumeChange());
+          video.addEventListener('ended', () => {
+              this.showControls(true);
+              this.renderPlayBtn();
+          });
+          video.addEventListener('ratechange', () => {
+              this.playbackRate = video.playbackRate;
+              this.speedLabel.textContent = this.playbackRate === 1 ? '1×' : `${this.playbackRate}×`;
+          });
+          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('click', (e) => {
+              e.stopPropagation();
+              this.seekTo(e);
+              this.resetHideTimer();
+          });
+          this.seekWrap.addEventListener('mousemove', (e) => this.onSeekHover(e));
+          this.seekWrap.addEventListener('mouseleave', () => { this.seekTooltip.style.opacity = '0'; });
+          this.seekWrap.addEventListener('mousedown', (e) => {
+              this.seekDragging = true;
+              this.seekTo(e);
+              const onMove = (ev) => { if (this.seekDragging)
+                  this.seekTo(ev); };
+              const onUp = () => { this.seekDragging = false; window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+              window.addEventListener('mousemove', onMove);
+              window.addEventListener('mouseup', onUp);
+          });
+          this.speedLabel.addEventListener('click', (e) => {
+              e.stopPropagation();
+              this.toggleMenu('speed');
+          });
+          this.speedMenu.addEventListener('click', (e) => {
+              e.stopPropagation();
+              const item = e.target.closest('[data-speed]');
+              if (!item)
+                  return;
+              const r = parseFloat(item.dataset['speed']);
+              video.playbackRate = r;
+              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.onFsChange());
+          this.root.addEventListener('mousemove', () => this.resetHideTimer());
+          this.root.addEventListener('mouseleave', () => {
+              if (this.playerState === exports.PlayerState.PLAYING)
+                  this.showControls(false);
+          });
+          this.root.addEventListener('click', () => this.closeMenus());
+          this.root.addEventListener('keydown', (e) => {
+              switch (e.code) {
+                  case 'Space':
+                  case 'KeyK':
+                      e.preventDefault();
+                      this.togglePlay();
+                      break;
+                  case 'ArrowLeft':
+                      e.preventDefault();
+                      this.corePlayer.seek(Math.max(0, video.currentTime - 5));
+                      break;
+                  case 'ArrowRight':
+                      e.preventDefault();
+                      this.corePlayer.seek(Math.min(this.duration, video.currentTime + 5));
+                      break;
+                  case 'ArrowUp':
+                      e.preventDefault();
+                      video.volume = Math.min(1, video.volume + 0.1);
+                      break;
+                  case 'ArrowDown':
+                      e.preventDefault();
+                      video.volume = Math.max(0, video.volume - 0.1);
+                      break;
+                  case 'KeyM':
+                      e.preventDefault();
+                      this.toggleMute();
+                      break;
+                  case 'KeyF':
+                      e.preventDefault();
+                      this.toggleFullscreen();
+                      break;
+              }
+          });
+      }
+      onStateChange(state) {
+          this.playerState = state;
+          const loading = state === exports.PlayerState.LOADING || state === exports.PlayerState.BUFFERING;
+          const idle = state === exports.PlayerState.IDLE;
+          const ended = this.videoEl.ended;
+          this.spinner.classList.toggle('gvp-spinner-hidden', !loading);
+          const showCenter = (idle || ended) && !loading;
+          this.centerPlay.classList.toggle('gvp-center-play-hidden', !showCenter);
+          if (showCenter) {
+              this.centerPlayBtn.innerHTML = '';
+              this.centerPlayBtn.appendChild(svg(ended ? ICON.replay : ICON.play, 32, 32));
+          }
+          this.clickArea.classList.toggle('gvp-click-area-hidden', idle);
+          if (state !== exports.PlayerState.PLAYING) {
+              this.showControls(true);
+              if (this.hideTimer) {
+                  clearTimeout(this.hideTimer);
+                  this.hideTimer = null;
+              }
+          }
+          else {
+              this.resetHideTimer();
+          }
+          this.renderPlayBtn();
+      }
+      togglePlay() {
+          const video = this.videoEl;
+          if (video.paused || video.ended) {
+              this.corePlayer.play().catch(() => { });
+          }
+          else {
+              this.corePlayer.pause();
+          }
+          this.resetHideTimer();
+      }
+      renderPlayBtn() {
+          const video = this.videoEl;
+          const ended = video.ended;
+          const playing = this.playerState === exports.PlayerState.PLAYING;
+          this.playBtn.innerHTML = '';
+          this.playBtn.appendChild(svg(ended ? ICON.replay : playing ? ICON.pause : ICON.play));
+          this.playBtn.title = playing ? 'Pause (k)' : 'Play (k)';
+      }
+      toggleMute() {
+          this.videoEl.muted = !this.videoEl.muted;
+      }
+      onVolumeChange() {
+          const video = this.videoEl;
+          const muted = video.muted || video.volume === 0;
+          this.volBtn.innerHTML = '';
+          this.volBtn.appendChild(svg(muted ? ICON.volMute : ICON.volHigh, 18, 18));
+          this.volSlider.value = String(muted ? 0 : video.volume);
+      }
+      seekTo(e) {
+          if (!this.duration)
+              return;
+          const rect = this.seekWrap.getBoundingClientRect();
+          const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+          this.corePlayer.seek(pct * this.duration);
+      }
+      onSeekHover(e) {
+          if (!this.duration)
+              return;
+          const rect = this.seekWrap.getBoundingClientRect();
+          const pct = Math.max(0, Math.min(1, (e.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 video = this.videoEl;
+          const ct = video.currentTime;
+          this.timeEl.textContent = `${formatTime(ct)} / ${formatTime(this.duration)}`;
+          this.updateSeekBar();
+      }
+      updateSeekBar() {
+          const ct = this.videoEl.currentTime;
+          const dur = this.duration;
+          if (!dur)
+              return;
+          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.style.display = '';
+          this.qualityMenu.innerHTML = '';
+          const title = el('div', 'gvp-menu-title');
+          title.textContent = 'Quality';
+          const autoItem = el('div', 'gvp-menu-item gvp-menu-item-active');
+          autoItem.dataset['quality'] = '-1';
+          autoItem.textContent = 'Auto';
+          const check = el('span', 'gvp-menu-check');
+          check.textContent = '✓';
+          autoItem.appendChild(check);
+          const sep = el('div', 'gvp-menu-sep');
+          this.qualityMenu.append(title, autoItem, sep);
+          [...this.qualityLevels].reverse().forEach(q => {
+              const item = el('div', 'gvp-menu-item');
+              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 idx = parseInt(item.dataset['quality']);
+              const active = idx === this.currentQualityIdx;
+              item.className = `gvp-menu-item${active ? ' gvp-menu-item-active' : ''}`;
+              const existing = item.querySelector('.gvp-menu-check');
+              if (active && !existing) {
+                  const check = el('span', 'gvp-menu-check');
+                  check.textContent = '✓';
+                  item.appendChild(check);
+              }
+              else if (!active && existing) {
+                  existing.remove();
+              }
+          });
       }
-      static createFromElement(videoElement, videoId, config) {
-          const element = typeof videoElement === 'string'
-              ? document.getElementById(videoElement)
-              : videoElement;
-          if (!element || element.tagName !== 'VIDEO') {
-              throw new Error('Invalid video element provided');
+      refreshSpeedMenu() {
+          this.speedMenu.querySelectorAll('[data-speed]').forEach(item => {
+              const r = parseFloat(item.dataset['speed']);
+              item.className = `gvp-menu-item${r === this.playbackRate ? ' gvp-menu-item-active' : ''}`;
+          });
+      }
+      toggleMenu(which) {
+          const same = this.openMenu === which;
+          this.closeMenus();
+          if (!same) {
+              this.openMenu = which;
+              if (which === 'speed') {
+                  this.refreshSpeedMenu();
+                  this.speedMenu.classList.remove('gvp-menu-hidden');
+              }
+              else {
+                  this.refreshQualityMenu();
+                  this.qualityMenu.classList.remove('gvp-menu-hidden');
+              }
           }
-          return new GuardVideoPlayer(element, videoId, config);
       }
+      closeMenus() {
+          this.openMenu = null;
+          this.speedMenu.classList.add('gvp-menu-hidden');
+          this.qualityMenu.classList.add('gvp-menu-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 === exports.PlayerState.PLAYING)
+                  this.showControls(false);
+          }, 2800);
+      }
+      toggleFullscreen() {
+          if (document.fullscreenElement) {
+              document.exitFullscreen().catch(() => { });
+          }
+          else {
+              this.root.requestFullscreen().catch(() => { });
+          }
+      }
+      onFsChange() {
+          const fs = !!document.fullscreenElement;
+          this.fsBtn.innerHTML = '';
+          this.fsBtn.appendChild(svg(fs ? ICON.fsExit : ICON.fsEnter, 18, 18));
+          this.fsBtn.title = fs ? 'Exit fullscreen (f)' : 'Fullscreen (f)';
+      }
+      showError(err) {
+          const codeEl = this.root.querySelector('#gvp-err-code');
+          const msgEl = this.root.querySelector('#gvp-err-msg');
+          if (codeEl)
+              codeEl.textContent = err.code;
+          if (msgEl)
+              msgEl.textContent = err.message;
+          this.errorOverlay.classList.remove('gvp-error-hidden');
+          this.controls.style.display = 'none';
+      }
+      renderWatermark() {
+          if (!this.watermarkText)
+              return;
+          this.watermarkDiv.innerHTML = '';
+          for (let i = 0; i < 20; i++) {
+              const span = el('span', 'gvp-watermark-text');
+              span.textContent = this.watermarkText;
+              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`;
+          this.root.appendChild(d);
+          setTimeout(() => d.remove(), 600);
+      }
+      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);
+          this.corePlayer.destroy();
+          this.root.remove();
+      }
+  }
+  class GuardVideoPlayer {
+      constructor(ui) {
+          this.ui = ui;
+      }
+      static create(containerId, videoId, config) {
+          const container = document.getElementById(containerId);
+          if (!container)
+              throw new Error(`Container "#${containerId}" not found`);
+          return new GuardVideoPlayer(new VanillaPlayerUI(container, videoId, config));
+      }
+      static createInElement(container, videoId, config) {
+          return new GuardVideoPlayer(new VanillaPlayerUI(container, videoId, config));
+      }
+      play() { return this.ui.play(); }
+      pause() { return this.ui.pause(); }
+      seek(time) { return this.ui.seek(time); }
+      getCurrentTime() { return this.ui.getCurrentTime(); }
+      getDuration() { return this.ui.getDuration(); }
+      getVolume() { return this.ui.getVolume(); }
+      setVolume(volume) { return this.ui.setVolume(volume); }
+      getQualityLevels() { return this.ui.getQualityLevels(); }
+      getCurrentQuality() { return this.ui.getCurrentQuality(); }
+      setQuality(idx) { return this.ui.setQuality(idx); }
+      getState() { return this.ui.getState(); }
+      getVideoElement() { return this.ui.getVideoElement(); }
+      destroy() { return this.ui.destroy(); }
   }
   if (typeof window !== 'undefined') {
       window.GuardVideoPlayer = GuardVideoPlayer;