@guardvideo/player-sdk 1.0.0 → 1.0.2

package/dist/vanilla/guardvideo-player.min.js

@@ -36636,14 +36636,44 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       PlayerState["ERROR"] = "error";
   })(exports.PlayerState || (exports.PlayerState = {}));
 
+  const DEFAULT_BRANDING = {
+      name: 'GuardVideo',
+      url: 'https://guardvid.com',
+      logoUrl: '',
+      accentColor: '#44c09b',
+  };
+  const DEFAULT_SECURITY = {
+      disableRightClick: false,
+      disableSelection: true,
+      disableDrag: true,
+      enableWatermark: false,
+      watermarkText: '',
+      disablePiP: false,
+      disableScreenCapture: false,
+      blockDevTools: false,
+      maxPlaybackRate: 2,
+      allowedDomains: [],
+  };
   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 || '',
@@ -36653,12 +36683,21 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               className: config.className || '',
               style: config.style || {},
               hlsConfig: config.hlsConfig || {},
+              branding: { ...DEFAULT_BRANDING, ...config.branding },
+              contextMenuItems: config.contextMenuItems || [],
+              security: { ...DEFAULT_SECURITY, ...config.security },
+              viewerName: config.viewerName || '',
+              viewerEmail: config.viewerEmail || '',
+              forensicWatermark: config.forensicWatermark || false,
               onReady: config.onReady || (() => { }),
               onError: config.onError || (() => { }),
               onQualityChange: config.onQualityChange || (() => { }),
               onStateChange: config.onStateChange || (() => { }),
           };
           this.log('Initializing GuardVideo Player', { videoId, config });
+          if (!this.checkAllowedDomain())
+              return;
+          this.applySecurity();
           this.initialize();
       }
       log(message, data) {
@@ -36676,12 +36715,321 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               this.log(`State changed to: ${newState}`);
           }
       }
+      checkAllowedDomain() {
+          const domains = this.config.security.allowedDomains;
+          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?:\/\//, '')}`));
+          if (!allowed) {
+              this.handleError({
+                  code: 'DOMAIN_NOT_ALLOWED',
+                  message: `This player is not authorized to run on ${currentOrigin}`,
+                  fatal: true,
+              });
+              return false;
+          }
+          return true;
+      }
+      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') {
+                  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}`);
+          }
+      }
       async initialize() {
           try {
               this.setState(exports.PlayerState.LOADING);
               this.embedToken = await this.fetchEmbedToken();
               this.log('Embed token received', this.embedToken);
               await this.initializePlayer();
+              await this.fetchAndApplyWatermark();
           }
           catch (err) {
               this.handleError({
@@ -36692,6 +37040,35 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               });
           }
       }
+      async fetchAndApplyWatermark() {
+          if (!this.embedToken || !this.config.apiBaseUrl)
+              return;
+          try {
+              const tokenId = this.embedToken.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);
+                  }
+                  return;
+              }
+              const cfg = await resp.json();
+              this.log('Watermark config from server:', cfg);
+              if (cfg.enableWatermark && cfg.watermarkText && this.container) {
+                  this.createWatermark(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);
+              }
+          }
+      }
       async fetchEmbedToken() {
           const url = `${this.config.embedTokenEndpoint}/${this.videoId}`;
           this.log('Fetching embed token from', url);
@@ -36704,6 +37081,9 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                   allowedDomain: window.location.origin,
                   expiresInMinutes: 120,
                   maxViews: null,
+                  ...(this.config.viewerName ? { viewerName: this.config.viewerName } : {}),
+                  ...(this.config.viewerEmail ? { viewerEmail: this.config.viewerEmail } : {}),
+                  ...(this.config.forensicWatermark ? { forensicWatermark: this.config.forensicWatermark } : {}),
               }),
           });
           if (!response.ok) {
@@ -36880,6 +37260,17 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       }
       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;