@guardvideo/player-sdk 2.0.0 → 2.1.0

package/dist/vanilla/guardvideo-player.js

@@ -36657,23 +36657,12 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
   let GuardVideoPlayer$1 = class GuardVideoPlayer {
       constructor(videoElement, videoId, config) {
           this.videoId = videoId;
-          this.container = null;
           this.hls = null;
           this.state = exports.PlayerState.IDLE;
           this.embedToken = null;
           this.currentQuality = null;
-          this.ctxMenu = null;
-          this.ctxStyleTag = null;
-          this.watermarkEl = null;
-          this.watermarkObserver = null;
-          this._onCtx = this.handleContextMenu.bind(this);
-          this._onDocClick = this.hideContextMenu.bind(this);
-          this._onKeyDown = this.handleKeyDown.bind(this);
           this._onRateChange = this.enforceMaxRate.bind(this);
-          this._onSelectStart = (e) => e.preventDefault();
-          this._onDragStart = (e) => e.preventDefault();
           this.videoElement = videoElement;
-          this.container = videoElement.parentElement;
           this.config = {
               embedTokenEndpoint: config.embedTokenEndpoint,
               apiBaseUrl: config.apiBaseUrl || '',
@@ -36693,6 +36682,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               onError: config.onError || (() => { }),
               onQualityChange: config.onQualityChange || (() => { }),
               onStateChange: config.onStateChange || (() => { }),
+              onWatermark: config.onWatermark || (() => { }),
           };
           this.log('Initializing GuardVideo Player', { videoId, config });
           if (!this.checkAllowedDomain())
@@ -36702,17 +36692,17 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       }
       log(message, data) {
           if (this.config.debug) {
-              console.log(`[GuardVideoPlayer] ${message}`, data || '');
+              console.log('[GuardVideoPlayer] ' + message, data || '');
           }
       }
       error(message, data) {
-          console.error(`[GuardVideoPlayer] ${message}`, data || '');
+          console.error('[GuardVideoPlayer] ' + message, data || '');
       }
       setState(newState) {
           if (this.state !== newState) {
               this.state = newState;
               this.config.onStateChange(newState);
-              this.log(`State changed to: ${newState}`);
+              this.log('State changed to: ' + newState);
           }
       }
       checkAllowedDomain() {
@@ -36720,11 +36710,11 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           if (!domains || domains.length === 0)
               return true;
           const currentOrigin = typeof window !== 'undefined' ? window.location.origin : '';
-          const allowed = domains.some((d) => currentOrigin === d || currentOrigin.endsWith(`.${d.replace(/^https?:\/\//, '')}`));
+          const allowed = domains.some((d) => currentOrigin === d || currentOrigin.endsWith('.' + d.replace(/^https?:\/\//, '')));
           if (!allowed) {
               this.handleError({
                   code: 'DOMAIN_NOT_ALLOWED',
-                  message: `This player is not authorized to run on ${currentOrigin}`,
+                  message: 'This player is not authorized to run on ' + currentOrigin,
                   fatal: true,
               });
               return false;
@@ -36733,294 +36723,24 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       }
       applySecurity() {
           const sec = this.config.security;
-          const target = this.container || this.videoElement;
-          target.addEventListener('contextmenu', this._onCtx);
-          document.addEventListener('click', this._onDocClick);
-          if (sec.disableSelection) {
-              target.addEventListener('selectstart', this._onSelectStart);
-              target.style.userSelect = 'none';
-              target.style.webkitUserSelect = 'none';
-          }
-          if (sec.disableDrag) {
-              this.videoElement.addEventListener('dragstart', this._onDragStart);
-              this.videoElement.draggable = false;
-          }
           if (sec.disablePiP) {
               this.videoElement.disablePictureInPicture = true;
           }
           if (sec.disableScreenCapture) {
-              if ('mediaKeys' in this.videoElement && typeof navigator.requestMediaKeySystemAccess === 'function') {
+              if ('mediaKeys' in this.videoElement &&
+                  typeof navigator.requestMediaKeySystemAccess === 'function') {
                   this.log('Screen-capture protection: EME hint applied');
               }
-              target.style.setProperty('-webkit-app-region', 'no-drag');
-          }
-          if (sec.blockDevTools) {
-              document.addEventListener('keydown', this._onKeyDown);
           }
           if (sec.maxPlaybackRate) {
               this.videoElement.addEventListener('ratechange', this._onRateChange);
           }
-          if (sec.enableWatermark && sec.watermarkText && this.container) {
-              this.createWatermark(sec.watermarkText);
-          }
-          this.injectProtectiveStyles();
-      }
-      handleContextMenu(e) {
-          e.preventDefault();
-          e.stopPropagation();
-          const sec = this.config.security;
-          if (sec.disableRightClick)
-              return;
-          const me = e;
-          this.showContextMenu(me.clientX, me.clientY);
-      }
-      showContextMenu(x, y) {
-          this.hideContextMenu();
-          const branding = this.config.branding;
-          const extraItems = this.config.contextMenuItems;
-          const menu = document.createElement('div');
-          menu.className = 'gv-ctx-menu';
-          menu.setAttribute('role', 'menu');
-          const header = document.createElement('a');
-          header.className = 'gv-ctx-header';
-          header.href = branding.url;
-          header.target = '_blank';
-          header.rel = 'noopener noreferrer';
-          header.setAttribute('role', 'menuitem');
-          if (branding.logoUrl) {
-              const logo = document.createElement('img');
-              logo.src = branding.logoUrl;
-              logo.alt = branding.name;
-              logo.className = 'gv-ctx-logo';
-              logo.width = 20;
-              logo.height = 20;
-              header.appendChild(logo);
-          }
-          else {
-              const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-              svg.setAttribute('width', '18');
-              svg.setAttribute('height', '18');
-              svg.setAttribute('viewBox', '0 0 24 24');
-              svg.setAttribute('fill', 'none');
-              svg.setAttribute('stroke', branding.accentColor);
-              svg.setAttribute('stroke-width', '2');
-              svg.setAttribute('stroke-linecap', 'round');
-              svg.setAttribute('stroke-linejoin', 'round');
-              svg.innerHTML = '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>';
-              header.appendChild(svg);
-          }
-          const nameSpan = document.createElement('span');
-          nameSpan.className = 'gv-ctx-brand-name';
-          nameSpan.textContent = branding.name;
-          header.appendChild(nameSpan);
-          const tagSpan = document.createElement('span');
-          tagSpan.className = 'gv-ctx-tag';
-          tagSpan.textContent = 'Secure Video Player';
-          header.appendChild(tagSpan);
-          menu.appendChild(header);
-          if (extraItems.length > 0) {
-              extraItems.forEach((item) => {
-                  if (item.separator) {
-                      const sep = document.createElement('div');
-                      sep.className = 'gv-ctx-sep';
-                      menu.appendChild(sep);
-                  }
-                  const row = document.createElement('div');
-                  row.className = 'gv-ctx-item';
-                  row.setAttribute('role', 'menuitem');
-                  row.tabIndex = 0;
-                  if (item.icon) {
-                      const ico = document.createElement('img');
-                      ico.src = item.icon;
-                      ico.width = 14;
-                      ico.height = 14;
-                      ico.className = 'gv-ctx-item-icon';
-                      row.appendChild(ico);
-                  }
-                  const label = document.createElement('span');
-                  label.textContent = item.label;
-                  row.appendChild(label);
-                  row.addEventListener('click', (ev) => {
-                      ev.stopPropagation();
-                      this.hideContextMenu();
-                      if (item.onClick) {
-                          item.onClick();
-                      }
-                      else if (item.href) {
-                          window.open(item.href, '_blank', 'noopener,noreferrer');
-                      }
-                  });
-                  menu.appendChild(row);
-              });
-          }
-          const sep = document.createElement('div');
-          sep.className = 'gv-ctx-sep';
-          menu.appendChild(sep);
-          const version = document.createElement('div');
-          version.className = 'gv-ctx-version';
-          version.textContent = `${branding.name} Player v1.0`;
-          menu.appendChild(version);
-          document.body.appendChild(menu);
-          const rect = menu.getBoundingClientRect();
-          const vw = window.innerWidth;
-          const vh = window.innerHeight;
-          menu.style.left = `${x + rect.width > vw ? vw - rect.width - 8 : x}px`;
-          menu.style.top = `${y + rect.height > vh ? vh - rect.height - 8 : y}px`;
-          this.ctxMenu = menu;
-      }
-      hideContextMenu() {
-          if (this.ctxMenu) {
-              this.ctxMenu.remove();
-              this.ctxMenu = null;
-          }
-      }
-      injectProtectiveStyles() {
-          if (this.ctxStyleTag)
-              return;
-          const branding = this.config.branding;
-          const accent = branding.accentColor;
-          const css = `
-/* GuardVideo branded context menu */
-.gv-ctx-menu {
-  position: fixed;
-  z-index: 2147483647;
-  min-width: 220px;
-  background: rgba(18, 18, 22, 0.96);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 10px;
-  padding: 6px 0;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #e4e4e7;
-  user-select: none;
-  animation: gv-ctx-in 0.12s ease-out;
-}
-@keyframes gv-ctx-in {
-  from { opacity: 0; transform: scale(0.96); }
-  to   { opacity: 1; transform: scale(1); }
-}
-
-.gv-ctx-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 14px 8px 12px;
-  text-decoration: none;
-  color: inherit;
-  transition: background 0.15s;
-  border-radius: 6px 6px 0 0;
-}
-.gv-ctx-header:hover { background: rgba(255,255,255,0.06); }
-
-.gv-ctx-logo { border-radius: 4px; }
-
-.gv-ctx-brand-name {
-  font-weight: 600;
-  color: ${accent};
-  white-space: nowrap;
-}
-
-.gv-ctx-tag {
-  margin-left: auto;
-  font-size: 10px;
-  color: rgba(255,255,255,0.35);
-  white-space: nowrap;
-}
-
-.gv-ctx-sep {
-  height: 1px;
-  margin: 4px 10px;
-  background: rgba(255,255,255,0.07);
-}
-
-.gv-ctx-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 14px 7px 12px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-.gv-ctx-item:hover { background: rgba(255,255,255,0.06); }
-.gv-ctx-item-icon { border-radius: 2px; }
-
-.gv-ctx-version {
-  padding: 4px 14px 6px 12px;
-  font-size: 10px;
-  color: rgba(255,255,255,0.25);
-}
-
-/* Watermark overlay */
-.gv-watermark {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  overflow: hidden;
-  z-index: 10;
-}
-.gv-watermark-text {
-  position: absolute;
-  white-space: nowrap;
-  font-size: 14px;
-  font-family: monospace;
-  color: rgba(255,255,255,0.07);
-  transform: rotate(-30deg);
-  user-select: none;
-  pointer-events: none;
-}
-`;
-          const tag = document.createElement('style');
-          tag.setAttribute('data-guardvideo', 'player-styles');
-          tag.textContent = css;
-          document.head.appendChild(tag);
-          this.ctxStyleTag = tag;
-      }
-      createWatermark(text) {
-          if (!this.container)
-              return;
-          const overlay = document.createElement('div');
-          overlay.className = 'gv-watermark';
-          for (let row = 0; row < 5; row++) {
-              for (let col = 0; col < 4; col++) {
-                  const span = document.createElement('span');
-                  span.className = 'gv-watermark-text';
-                  span.textContent = text;
-                  span.style.left = `${col * 28 + (row % 2) * 14}%`;
-                  span.style.top = `${row * 22}%`;
-                  overlay.appendChild(span);
-              }
-          }
-          this.container.style.position = 'relative';
-          this.container.appendChild(overlay);
-          this.watermarkEl = overlay;
-          this.watermarkObserver = new MutationObserver(() => {
-              if (this.container && this.watermarkEl && !this.container.contains(this.watermarkEl)) {
-                  this.container.appendChild(this.watermarkEl);
-              }
-          });
-          this.watermarkObserver.observe(this.container, { childList: true, subtree: false });
-      }
-      handleKeyDown(e) {
-          if (e.key === 'F12') {
-              e.preventDefault();
-              return;
-          }
-          if (e.ctrlKey && e.shiftKey && ['I', 'J', 'C'].includes(e.key.toUpperCase())) {
-              e.preventDefault();
-              return;
-          }
-          if (e.ctrlKey && e.key.toUpperCase() === 'U') {
-              e.preventDefault();
-          }
       }
       enforceMaxRate() {
           const max = this.config.security.maxPlaybackRate;
           if (this.videoElement.playbackRate > max) {
               this.videoElement.playbackRate = max;
-              this.log(`Playback rate clamped to ${max}`);
+              this.log('Playback rate clamped to ' + max);
           }
       }
       async initialize() {
@@ -37045,38 +36765,38 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               return;
           try {
               const tokenId = this.embedToken.tokenId;
-              const url = `${this.config.apiBaseUrl}/videos/stream/${this.videoId}/viewer-config?token=${encodeURIComponent(tokenId)}`;
+              const url = this.config.apiBaseUrl +
+                  '/videos/stream/' + this.videoId +
+                  '/viewer-config?token=' + encodeURIComponent(tokenId);
               const resp = await fetch(url, { credentials: 'omit' });
               if (!resp.ok) {
                   this.log('viewer-config fetch failed, falling back to SDK config', resp.status);
                   const sec = this.config.security;
-                  if (sec.enableWatermark && sec.watermarkText && this.container) {
-                      this.createWatermark(sec.watermarkText);
+                  if (sec.enableWatermark && sec.watermarkText) {
+                      this.config.onWatermark?.(sec.watermarkText);
                   }
                   return;
               }
               const cfg = await resp.json();
               this.log('Watermark config from server:', cfg);
-              if (cfg.enableWatermark && cfg.watermarkText && this.container) {
-                  this.createWatermark(cfg.watermarkText);
+              if (cfg.enableWatermark && cfg.watermarkText) {
+                  this.config.onWatermark?.(cfg.watermarkText);
               }
           }
           catch (err) {
               this.log('fetchAndApplyWatermark error (non-fatal):', err);
               const sec = this.config.security;
-              if (sec.enableWatermark && sec.watermarkText && this.container) {
-                  this.createWatermark(sec.watermarkText);
+              if (sec.enableWatermark && sec.watermarkText) {
+                  this.config.onWatermark?.(sec.watermarkText);
               }
           }
       }
       async fetchEmbedToken() {
-          const url = `${this.config.embedTokenEndpoint}/${this.videoId}`;
+          const url = this.config.embedTokenEndpoint + '/' + this.videoId;
           this.log('Fetching embed token from', url);
           const response = await fetch(url, {
               method: 'POST',
-              headers: {
-                  'Content-Type': 'application/json',
-              },
+              headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({
                   allowedDomain: window.location.origin,
                   expiresInMinutes: 120,
@@ -37128,14 +36848,11 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.hls.loadSource(playerUrl);
           this.hls.attachMedia(this.videoElement);
           this.hls.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
-              this.log('HLS manifest parsed', {
-                  levels: data.levels.map((l) => `${l.height}p`),
-              });
+              this.log('HLS manifest parsed', { levels: data.levels.map((l) => l.height + 'p') });
               this.setState(exports.PlayerState.READY);
               this.config.onReady();
-              if (this.config.autoplay) {
+              if (this.config.autoplay)
                   this.play();
-              }
           });
           this.hls.on(Hls.Events.LEVEL_SWITCHED, (_event, data) => {
               const level = this.hls.levels[data.level];
@@ -37144,10 +36861,10 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                   height: level.height,
                   width: level.width,
                   bitrate: level.bitrate,
-                  name: `${level.height}p`,
+                  name: level.height + 'p',
               };
               this.currentQuality = quality;
-              this.log(`Quality switched to ${quality.name}`);
+              this.log('Quality switched to ' + quality.name);
               this.config.onQualityChange(quality.name);
           });
           this.hls.on(Hls.Events.ERROR, (_event, data) => {
@@ -37163,40 +36880,28 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                           this.hls?.recoverMediaError();
                           break;
                       default:
-                          this.handleError({
-                              code: data.type,
-                              message: data.details,
-                              fatal: true,
-                              details: data,
-                          });
-                          break;
+                          this.handleError({ code: data.type, message: data.details, fatal: true, details: data });
                   }
               }
           });
           this.setupVideoEventListeners();
       }
       setupVideoEventListeners() {
-          this.videoElement.addEventListener('playing', () => {
-              this.setState(exports.PlayerState.PLAYING);
-          });
-          this.videoElement.addEventListener('pause', () => {
-              this.setState(exports.PlayerState.PAUSED);
-          });
-          this.videoElement.addEventListener('waiting', () => {
-              this.setState(exports.PlayerState.BUFFERING);
-          });
+          this.videoElement.addEventListener('playing', () => this.setState(exports.PlayerState.PLAYING));
+          this.videoElement.addEventListener('pause', () => this.setState(exports.PlayerState.PAUSED));
+          this.videoElement.addEventListener('waiting', () => this.setState(exports.PlayerState.BUFFERING));
           this.videoElement.addEventListener('error', () => {
               const error = this.videoElement.error;
               if (error) {
-                  const errorMessages = {
+                  const msgs = {
                       1: 'Video loading aborted',
                       2: 'Network error',
                       3: 'Video decoding failed',
                       4: 'Video format not supported',
                   };
                   this.handleError({
-                      code: `MEDIA_ERROR_${error.code}`,
-                      message: errorMessages[error.code] || 'Unknown media error',
+                      code: 'MEDIA_ERROR_' + error.code,
+                      message: msgs[error.code] || 'Unknown media error',
                       fatal: true,
                       details: error,
                   });
@@ -37217,21 +36922,11 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               throw err;
           }
       }
-      pause() {
-          this.videoElement.pause();
-      }
-      getCurrentTime() {
-          return this.videoElement.currentTime;
-      }
-      seek(time) {
-          this.videoElement.currentTime = time;
-      }
-      getDuration() {
-          return this.videoElement.duration || 0;
-      }
-      getVolume() {
-          return this.videoElement.volume;
-      }
+      pause() { this.videoElement.pause(); }
+      getCurrentTime() { return this.videoElement.currentTime; }
+      seek(time) { this.videoElement.currentTime = time; }
+      getDuration() { return this.videoElement.duration || 0; }
+      getVolume() { return this.videoElement.volume; }
       setVolume(volume) {
           this.videoElement.volume = Math.max(0, Math.min(1, volume));
       }
@@ -37243,34 +36938,20 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               height: level.height,
               width: level.width,
               bitrate: level.bitrate,
-              name: `${level.height}p`,
+              name: level.height + 'p',
           }));
       }
-      getCurrentQuality() {
-          return this.currentQuality;
-      }
+      getCurrentQuality() { return this.currentQuality; }
       setQuality(levelIndex) {
           if (this.hls) {
               this.hls.currentLevel = levelIndex;
-              this.log(`Quality set to level ${levelIndex}`);
+              this.log('Quality set to level ' + levelIndex);
           }
       }
-      getState() {
-          return this.state;
-      }
+      getState() { return this.state; }
       destroy() {
           this.log('Destroying player');
-          const target = this.container || this.videoElement;
-          target.removeEventListener('contextmenu', this._onCtx);
-          target.removeEventListener('selectstart', this._onSelectStart);
-          this.videoElement.removeEventListener('dragstart', this._onDragStart);
           this.videoElement.removeEventListener('ratechange', this._onRateChange);
-          document.removeEventListener('click', this._onDocClick);
-          document.removeEventListener('keydown', this._onKeyDown);
-          this.hideContextMenu();
-          this.watermarkObserver?.disconnect();
-          this.watermarkEl?.remove();
-          this.ctxStyleTag?.remove();
           if (this.hls) {
               this.hls.destroy();
               this.hls = null;
@@ -37357,6 +37038,10 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
   -ms-user-select: none;
   user-select: none;
   outline: none;
+  /* Reserve space at the bottom so the video is never covered by the controls bar.
+     Controls bar ≈ 10px top padding + seek(~20px) + btn row(~34px) + 14px bottom = ~88px.
+     We add this as padding-bottom so the video shrinks up rather than sitting behind the bar. */
+  padding-bottom: 90px;
 
   /* Subtle inner vignette for cinema depth */
   box-shadow:
@@ -37670,6 +37355,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
   width: 0;
   max-width: 72px;
   height: 3px;
+  /* Default background — overridden by JS inline style for the fill gradient */
   background: rgba(255,255,255,0.18);
   border-radius: 99px;
   outline: none;
@@ -37687,6 +37373,12 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
   width: 72px;
   opacity: 1;
 }
+/* WebKit runnable track — gradient is set via inline style by JS */
+.gvp-volume-slider::-webkit-slider-runnable-track {
+  height: 3px;
+  border-radius: 99px;
+  background: inherit; /* picks up the JS inline style gradient */
+}
 /* WebKit thumb */
 .gvp-volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
@@ -37694,9 +37386,16 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
   border-radius: 50%;
   background: #fff;
   cursor: pointer;
+  margin-top: -4.5px; /* vertically centre over the 3px track */
   -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.4);
           box-shadow: 0 1px 4px rgba(0,0,0,0.4);
 }
+/* Firefox — native filled track */
+.gvp-volume-slider::-moz-range-progress {
+  background: var(--gvp-accent);
+  border-radius: 99px;
+  height: 3px;
+}
 /* Firefox thumb */
 .gvp-volume-slider::-moz-range-thumb {
   width: 12px; height: 12px;
@@ -37970,6 +37669,81 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
   .gvp-time { font-size: 11px; }
   .gvp-controls-inner { padding: 8px 10px; }
 }
+
+/* ── Branded context menu ─────────────────────────────────────── */
+.gvp-ctx-menu {
+  position: fixed;
+  z-index: 2147483647;
+  min-width: 220px;
+  background: rgba(12,12,18,0.96);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+          backdrop-filter: blur(16px) saturate(180%);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 12px;
+  padding: 6px 0;
+  -webkit-box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.04);
+          box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.04);
+  font-family: var(--gvp-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: 13px;
+  color: rgba(255,255,255,0.9);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-animation: gvp-ctx-in 0.12s cubic-bezier(0.22,1,0.36,1);
+          animation: gvp-ctx-in 0.12s cubic-bezier(0.22,1,0.36,1);
+}
+@-webkit-keyframes gvp-ctx-in {
+  from { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); }
+  to   { opacity: 1; -webkit-transform: none;        transform: none; }
+}
+@keyframes gvp-ctx-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: none; }
+}
+.gvp-ctx-header {
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 8px;
+  padding: 8px 14px 8px 12px;
+  text-decoration: none;
+  color: inherit;
+  -webkit-transition: background 0.15s; transition: background 0.15s;
+  border-radius: 8px 8px 0 0;
+}
+.gvp-ctx-header:hover { background: rgba(255,255,255,0.06); }
+.gvp-ctx-logo { border-radius: 4px; }
+.gvp-ctx-brand-name {
+  font-weight: 600;
+  color: var(--gvp-accent);
+  white-space: nowrap;
+}
+.gvp-ctx-tag {
+  margin-left: auto;
+  font-size: 10px;
+  color: rgba(255,255,255,0.3);
+  white-space: nowrap;
+}
+.gvp-ctx-sep {
+  height: 1px;
+  margin: 4px 10px;
+  background: rgba(255,255,255,0.07);
+}
+.gvp-ctx-item {
+  display: -webkit-box; display: -ms-flexbox; display: flex;
+  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
+  gap: 8px;
+  padding: 7px 14px 7px 12px;
+  cursor: pointer;
+  -webkit-transition: background 0.15s; transition: background 0.15s;
+}
+.gvp-ctx-item:hover { background: rgba(255,255,255,0.06); }
+.gvp-ctx-item-icon { border-radius: 2px; }
+.gvp-ctx-version {
+  padding: 4px 14px 6px 12px;
+  font-size: 10px;
+  color: rgba(255,255,255,0.25);
+}
 `;
       const tag = document.createElement('style');
       tag.setAttribute('data-guardvideo', 'player-ui-styles-v2');
@@ -37987,6 +37761,12 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.openMenu = null;
           this.hideTimer = null;
           this.seekDragging = false;
+          this._ctxMenu = null;
+          this._ctxDocClickBound = () => { };
+          this._ctxTargetBound = () => { };
+          this._ctxKeyDownBound = () => { };
+          this._watermarkObserver = null;
+          this._watermarkText = '';
           const accent = config.branding?.accentColor ?? '#00e5a0';
           const brandName = config.branding?.name ?? 'GuardVideo';
           injectStyles();
@@ -38134,11 +37914,13 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           };
           this._seekTouchEndBound = () => this._endSeekDrag();
           this._wireEvents(videoId, config);
+          requestAnimationFrame(() => this._updateVolSliderFill(1));
           if (config.forensicWatermark !== false) {
               const wmText = config.viewerEmail || config.viewerName || '';
               if (wmText)
                   this._renderWatermark(wmText);
           }
+          this._applySecurity(config);
       }
       _hexToRgba(hex, alpha) {
           const clean = hex.replace('#', '');
@@ -38187,6 +37969,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                   this._onStateChange(state);
                   config.onStateChange?.(state);
               },
+              onWatermark: (text) => this._renderWatermark(text),
           });
           video.addEventListener('timeupdate', () => {
               config.onTimeUpdate?.(video.currentTime);
@@ -38222,6 +38005,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.volSlider.addEventListener('input', () => {
               video.volume = parseFloat(this.volSlider.value);
               video.muted = video.volume === 0;
+              this._updateVolSliderFill(video.volume);
           });
           this.seekWrap.addEventListener('mousedown', (e) => {
               e.preventDefault();
@@ -38339,6 +38123,14 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.playBtn.title = `${label} (k)`;
       }
       _toggleMute() { this.videoEl.muted = !this.videoEl.muted; }
+      _updateVolSliderFill(vol) {
+          const accent = getComputedStyle(this.root).getPropertyValue('--gvp-accent').trim() || '#00e5a0';
+          const pct = Math.round(vol * 100);
+          this.volSlider.style.background =
+              `linear-gradient(to right,` +
+                  ` ${accent} 0%, ${accent} ${pct}%,` +
+                  ` rgba(255,255,255,0.18) ${pct}%, rgba(255,255,255,0.18) 100%)`;
+      }
       _onVolumeChange() {
           const v = this.videoEl;
           const vol = v.muted ? 0 : v.volume;
@@ -38349,6 +38141,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.volBtn.setAttribute('aria-label', muted ? 'Unmute' : 'Mute');
           this.volBtn.title = muted ? 'Unmute (m)' : 'Mute (m)';
           this.volSlider.value = String(vol);
+          this._updateVolSliderFill(vol);
       }
       _startSeekDrag() {
           this.seekDragging = true;
@@ -38535,6 +38328,9 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.controls.classList.add('gvp-hidden');
       }
       _renderWatermark(text) {
+          if (!text)
+              return;
+          this._watermarkText = text;
           this.watermarkDiv.innerHTML = '';
           for (let i = 0; i < 20; i++) {
               const span = el('span', 'gvp-watermark-text');
@@ -38543,6 +38339,40 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               span.style.top = `${Math.floor(i / 4) * 22}%`;
               this.watermarkDiv.appendChild(span);
           }
+          this._mountWatermarkObserver();
+      }
+      _mountWatermarkObserver() {
+          this._watermarkObserver?.disconnect();
+          this._watermarkObserver = new MutationObserver((mutations) => {
+              for (const m of mutations) {
+                  if (m.type === 'childList' && m.target === this.root) {
+                      if (!this.root.contains(this.watermarkDiv)) {
+                          this.root.appendChild(this.watermarkDiv);
+                      }
+                  }
+                  if (m.type === 'attributes' && m.target === this.watermarkDiv) {
+                      this.watermarkDiv.removeAttribute('style');
+                      this.watermarkDiv.className = 'gvp-watermark';
+                      this.watermarkDiv.setAttribute('aria-hidden', 'true');
+                  }
+                  if (m.type === 'childList' && m.target === this.watermarkDiv) {
+                      if (this.watermarkDiv.childElementCount < 20) {
+                          this._refillWatermark();
+                      }
+                  }
+              }
+          });
+          this._watermarkObserver.observe(this.root, { childList: true });
+          this._watermarkObserver.observe(this.watermarkDiv, { attributes: true, childList: true });
+      }
+      _refillWatermark() {
+          for (let i = this.watermarkDiv.childElementCount; 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();
@@ -38590,6 +38420,120 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                   break;
           }
       }
+      _applySecurity(config) {
+          const sec = config.security;
+          this.root.style.userSelect = 'none';
+          this.root.style.webkitUserSelect = 'none';
+          this.root.style.msUserSelect = 'none';
+          if (sec?.disableDrag !== false) {
+              this.videoEl.draggable = false;
+              this.videoEl.addEventListener('dragstart', (e) => e.preventDefault());
+          }
+          if (sec?.blockDevTools) {
+              this._ctxKeyDownBound = (e) => {
+                  if (e.key === 'F12') {
+                      e.preventDefault();
+                      return;
+                  }
+                  if (e.ctrlKey && e.shiftKey && ['I', 'J', 'C'].includes(e.key.toUpperCase())) {
+                      e.preventDefault();
+                      return;
+                  }
+                  if (e.ctrlKey && e.key.toUpperCase() === 'U')
+                      e.preventDefault();
+              };
+              document.addEventListener('keydown', this._ctxKeyDownBound);
+          }
+          this._ctxDocClickBound = () => this._hideContextMenu();
+          document.addEventListener('click', this._ctxDocClickBound);
+          this._ctxTargetBound = (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (sec?.disableRightClick)
+                  return;
+              const me = e;
+              this._showContextMenu(me.clientX, me.clientY, config);
+          };
+          this.root.addEventListener('contextmenu', this._ctxTargetBound);
+      }
+      _showContextMenu(x, y, config) {
+          this._hideContextMenu();
+          const br = config.branding;
+          const name = br?.name ?? 'GuardVideo';
+          const url = br?.url ?? 'https://guardvid.com';
+          const logoUrl = br?.logoUrl ?? '';
+          const accent = br?.accentColor ?? '#00e5a0';
+          const extras = config.contextMenuItems ?? [];
+          const menu = el('div', 'gvp-ctx-menu');
+          menu.setAttribute('role', 'menu');
+          menu.style.setProperty('--gvp-accent', accent);
+          const header = document.createElement('a');
+          header.className = 'gvp-ctx-header';
+          header.href = url;
+          header.target = '_blank';
+          header.rel = 'noopener noreferrer';
+          header.setAttribute('role', 'menuitem');
+          if (logoUrl) {
+              const logo = el('img', 'gvp-ctx-logo');
+              logo.src = logoUrl;
+              logo.alt = name;
+              logo.width = 20;
+              logo.height = 20;
+              header.appendChild(logo);
+          }
+          else {
+              header.appendChild(svgEl(ICON.shield, 18, 18));
+          }
+          const nameSpan = el('span', 'gvp-ctx-brand-name');
+          nameSpan.textContent = name;
+          const tagSpan = el('span', 'gvp-ctx-tag');
+          tagSpan.textContent = 'Secure Video Player';
+          header.append(nameSpan, tagSpan);
+          menu.appendChild(header);
+          extras.forEach((item) => {
+              if (item.separator) {
+                  menu.appendChild(el('div', 'gvp-ctx-sep'));
+                  return;
+              }
+              const row = el('div', 'gvp-ctx-item');
+              row.setAttribute('role', 'menuitem');
+              row.setAttribute('tabindex', '0');
+              if (item.icon) {
+                  const ico = el('img', 'gvp-ctx-item-icon');
+                  ico.src = item.icon;
+                  ico.width = 14;
+                  ico.height = 14;
+                  row.appendChild(ico);
+              }
+              const lbl = el('span');
+              lbl.textContent = item.label;
+              row.appendChild(lbl);
+              row.addEventListener('click', (ev) => {
+                  ev.stopPropagation();
+                  this._hideContextMenu();
+                  if (item.onClick)
+                      item.onClick();
+                  else if (item.href)
+                      window.open(item.href, '_blank', 'noopener,noreferrer');
+              });
+              menu.appendChild(row);
+          });
+          menu.appendChild(el('div', 'gvp-ctx-sep'));
+          const ver = el('div', 'gvp-ctx-version');
+          ver.textContent = `${name} Player v1.0`;
+          menu.appendChild(ver);
+          document.body.appendChild(menu);
+          const rect = menu.getBoundingClientRect();
+          menu.style.left = `${x + rect.width > window.innerWidth ? window.innerWidth - rect.width - 8 : x}px`;
+          menu.style.top = `${y + rect.height > window.innerHeight ? window.innerHeight - rect.height - 8 : y}px`;
+          this._ctxMenu = menu;
+      }
+      _hideContextMenu() {
+          if (this._ctxMenu) {
+              this._ctxMenu.remove();
+              this._ctxMenu = null;
+          }
+      }
       play() { return this.corePlayer.play(); }
       pause() { return this.corePlayer.pause(); }
       seek(t) { return this.corePlayer.seek(t); }
@@ -38613,6 +38557,10 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           window.removeEventListener('mouseup', this._seekMouseUpBound);
           window.removeEventListener('touchmove', this._seekTouchMoveBound);
           window.removeEventListener('touchend', this._seekTouchEndBound);
+          document.removeEventListener('click', this._ctxDocClickBound);
+          document.removeEventListener('keydown', this._ctxKeyDownBound);
+          this._hideContextMenu();
+          this._watermarkObserver?.disconnect();
           this.corePlayer.destroy();
           this.root.remove();
       }