@guardvideo/player-sdk 2.0.0 → 2.1.0

package/dist/index.js

@@ -35,23 +35,12 @@ const DEFAULT_SECURITY = {
 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 || '',
@@ -71,6 +60,7 @@ class GuardVideoPlayer {
             onError: config.onError || (() => { }),
             onQualityChange: config.onQualityChange || (() => { }),
             onStateChange: config.onStateChange || (() => { }),
+            onWatermark: config.onWatermark || (() => { }),
         };
         this.log('Initializing GuardVideo Player', { videoId, config });
         if (!this.checkAllowedDomain())
@@ -80,17 +70,17 @@ class GuardVideoPlayer {
     }
     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() {
@@ -98,11 +88,11 @@ class GuardVideoPlayer {
         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;
@@ -111,294 +101,24 @@ class GuardVideoPlayer {
     }
     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() {
@@ -423,38 +143,38 @@ class GuardVideoPlayer {
             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,
@@ -506,14 +226,11 @@ class GuardVideoPlayer {
         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];
@@ -522,10 +239,10 @@ class GuardVideoPlayer {
                 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) => {
@@ -541,40 +258,28 @@ class GuardVideoPlayer {
                         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,
                 });
@@ -595,21 +300,11 @@ class GuardVideoPlayer {
             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));
     }
@@ -621,34 +316,20 @@ class GuardVideoPlayer {
             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;
@@ -735,6 +416,10 @@ function injectStyles() {
   -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:
@@ -1048,6 +733,7 @@ function injectStyles() {
   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;
@@ -1065,6 +751,12 @@ function injectStyles() {
   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;
@@ -1072,9 +764,16 @@ function injectStyles() {
   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;
@@ -1348,6 +1047,81 @@ function injectStyles() {
   .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');
@@ -1365,6 +1139,12 @@ class PlayerUI {
         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();
@@ -1512,11 +1292,13 @@ class PlayerUI {
         };
         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('#', '');
@@ -1565,6 +1347,7 @@ class PlayerUI {
                 this._onStateChange(state);
                 config.onStateChange?.(state);
             },
+            onWatermark: (text) => this._renderWatermark(text),
         });
         video.addEventListener('timeupdate', () => {
             config.onTimeUpdate?.(video.currentTime);
@@ -1600,6 +1383,7 @@ class PlayerUI {
         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();
@@ -1717,6 +1501,14 @@ class PlayerUI {
         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;
@@ -1727,6 +1519,7 @@ class PlayerUI {
         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;
@@ -1913,6 +1706,9 @@ class PlayerUI {
         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');
@@ -1921,6 +1717,40 @@ class PlayerUI {
             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();
@@ -1968,6 +1798,120 @@ class PlayerUI {
                 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); }
@@ -1991,6 +1935,10 @@ class PlayerUI {
         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();
     }