@guardvideo/player-sdk 2.1.1 → 3.1.0

package/dist/vanilla/guardvideo-player.js

@@ -36636,6 +36636,365 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       PlayerState["ERROR"] = "error";
   })(exports.PlayerState || (exports.PlayerState = {}));
 
+  const MAX_CHUNK_SECONDS = 30;
+  class WatchChunkAccumulator {
+      constructor() {
+          this.chunkStart = null;
+          this.lastPosition = 0;
+          this.pendingChunks = [];
+      }
+      startChunk(positionSeconds) {
+          if (this.chunkStart === null) {
+              this.chunkStart = positionSeconds;
+              this.lastPosition = positionSeconds;
+          }
+      }
+      tick(positionSeconds) {
+          if (this.chunkStart === null)
+              return;
+          this.lastPosition = positionSeconds;
+          const elapsed = positionSeconds - this.chunkStart;
+          if (elapsed >= MAX_CHUNK_SECONDS) {
+              this.finalizeChunk();
+              this.chunkStart = positionSeconds;
+          }
+      }
+      finalizeChunk() {
+          if (this.chunkStart === null)
+              return null;
+          const duration = this.lastPosition - this.chunkStart;
+          if (duration < 0.5) {
+              this.chunkStart = null;
+              return null;
+          }
+          const chunk = {
+              event_type: 'watch_chunk',
+              event_at: new Date().toISOString(),
+              position_seconds: this.lastPosition,
+              payload: {
+                  start_seconds: this.chunkStart,
+                  duration_seconds: Math.round(duration * 100) / 100,
+              },
+          };
+          this.pendingChunks.push(chunk);
+          this.chunkStart = null;
+          return chunk;
+      }
+      drain() {
+          const chunks = [...this.pendingChunks];
+          this.pendingChunks = [];
+          return chunks;
+      }
+      reset() {
+          this.chunkStart = null;
+          this.lastPosition = 0;
+          this.pendingChunks = [];
+      }
+  }
+
+  const MAX_BATCH_SIZE = 25;
+  const DEFAULT_FLUSH_INTERVAL = 5000;
+  class EventTracker {
+      constructor(config) {
+          this.buffer = [];
+          this.flushTimer = null;
+          this.accumulator = new WatchChunkAccumulator();
+          this.destroyed = false;
+          this._onBeforeUnload = null;
+          this.config = {
+              endpoint: config.endpoint,
+              tokenId: config.tokenId,
+              sessionId: config.sessionId || '',
+              eventsSecret: config.eventsSecret,
+              identityHash: config.identityHash || '',
+              flushIntervalMs: config.flushIntervalMs || DEFAULT_FLUSH_INTERVAL,
+              debug: config.debug || false,
+          };
+          this.startAutoFlush();
+          this.hookPageUnload();
+      }
+      track(type, positionSeconds, payload) {
+          if (this.destroyed)
+              return;
+          this.buffer.push({
+              event_type: type,
+              event_at: new Date().toISOString(),
+              position_seconds: positionSeconds,
+              payload,
+          });
+          if (this.buffer.length >= MAX_BATCH_SIZE) {
+              this.flush();
+          }
+      }
+      startChunk(position) {
+          this.accumulator.startChunk(position);
+      }
+      tickChunk(position) {
+          this.accumulator.tick(position);
+      }
+      endChunk() {
+          this.accumulator.finalizeChunk();
+      }
+      setSessionId(sessionId) {
+          this.config.sessionId = sessionId;
+      }
+      async flush() {
+          if (this.destroyed)
+              return;
+          const chunks = this.accumulator.drain();
+          for (const c of chunks) {
+              this.buffer.push(c);
+          }
+          if (this.buffer.length === 0)
+              return;
+          const batch = this.buffer.splice(0, MAX_BATCH_SIZE);
+          await this.sendBatch(batch);
+      }
+      destroy() {
+          this.destroyed = true;
+          this.accumulator.finalizeChunk();
+          this.flush();
+          if (this.flushTimer)
+              clearInterval(this.flushTimer);
+          if (this._onBeforeUnload) {
+              window.removeEventListener('beforeunload', this._onBeforeUnload);
+          }
+      }
+      startAutoFlush() {
+          this.flushTimer = setInterval(() => this.flush(), this.config.flushIntervalMs);
+      }
+      hookPageUnload() {
+          if (typeof window === 'undefined')
+              return;
+          this._onBeforeUnload = () => {
+              this.accumulator.finalizeChunk();
+              const chunks = this.accumulator.drain();
+              const allEvents = [...this.buffer, ...chunks];
+              if (allEvents.length === 0)
+                  return;
+              const body = JSON.stringify({
+                  tokenId: this.config.tokenId,
+                  sessionId: this.config.sessionId || undefined,
+                  identityHash: this.config.identityHash || undefined,
+                  events: allEvents.slice(0, MAX_BATCH_SIZE),
+              });
+              try {
+                  navigator.sendBeacon(this.config.endpoint, new Blob([body], { type: 'application/json' }));
+              }
+              catch {
+              }
+          };
+          window.addEventListener('beforeunload', this._onBeforeUnload);
+      }
+      async sendBatch(events) {
+          const body = JSON.stringify({
+              tokenId: this.config.tokenId,
+              sessionId: this.config.sessionId || undefined,
+              identityHash: this.config.identityHash || undefined,
+              events,
+          });
+          const nonce = this.randomNonce();
+          const timestamp = String(Date.now());
+          const signature = await this.sign(nonce, timestamp, body);
+          try {
+              const resp = await fetch(this.config.endpoint, {
+                  method: 'POST',
+                  headers: {
+                      'Content-Type': 'application/json',
+                      'X-GV-Nonce': nonce,
+                      'X-GV-Timestamp': timestamp,
+                      'X-GV-Signature': signature,
+                  },
+                  body,
+                  credentials: 'omit',
+              });
+              if (!resp.ok && this.config.debug) {
+                  console.warn('[GuardVideo EventTracker] Flush failed:', resp.status);
+              }
+          }
+          catch (err) {
+              if (this.config.debug) {
+                  console.warn('[GuardVideo EventTracker] Flush error:', err);
+              }
+              this.buffer.unshift(...events);
+          }
+      }
+      randomNonce() {
+          const arr = new Uint8Array(8);
+          crypto.getRandomValues(arr);
+          return Array.from(arr)
+              .map((b) => b.toString(16).padStart(2, '0'))
+              .join('');
+      }
+      async sign(nonce, timestamp, body) {
+          const enc = new TextEncoder();
+          const key = await crypto.subtle.importKey('raw', enc.encode(this.config.eventsSecret), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
+          const message = `${nonce}.${timestamp}.${body}`;
+          const sig = await crypto.subtle.sign('HMAC', key, enc.encode(message));
+          return Array.from(new Uint8Array(sig))
+              .map((b) => b.toString(16).padStart(2, '0'))
+              .join('');
+      }
+  }
+
+  async function shortHash(input) {
+      const buf = new TextEncoder().encode(input);
+      const digest = await crypto.subtle.digest('SHA-256', buf);
+      return Array.from(new Uint8Array(digest))
+          .map((b) => b.toString(16).padStart(2, '0'))
+          .join('')
+          .substring(0, 16);
+  }
+  async function longHash(input) {
+      const buf = new TextEncoder().encode(input);
+      const digest = await crypto.subtle.digest('SHA-256', buf);
+      return Array.from(new Uint8Array(digest))
+          .map((b) => b.toString(16).padStart(2, '0'))
+          .join('')
+          .substring(0, 32);
+  }
+  function collectCanvas() {
+      try {
+          const c = document.createElement('canvas');
+          c.width = 200;
+          c.height = 50;
+          const ctx = c.getContext('2d');
+          if (!ctx)
+              return 'no-canvas';
+          ctx.textBaseline = 'top';
+          ctx.font = '14px Arial';
+          ctx.fillStyle = '#f60';
+          ctx.fillRect(125, 1, 62, 20);
+          ctx.fillStyle = '#069';
+          ctx.fillText('GuardVideo<canvas>', 2, 15);
+          ctx.fillStyle = 'rgba(102,204,0,0.7)';
+          ctx.fillText('fingerprint', 4, 35);
+          return c.toDataURL();
+      }
+      catch {
+          return 'canvas-error';
+      }
+  }
+  async function collectAudio() {
+      try {
+          const ctx = new (window.OfflineAudioContext ||
+              window.webkitOfflineAudioContext)(1, 44100, 44100);
+          const osc = ctx.createOscillator();
+          osc.type = 'triangle';
+          osc.frequency.setValueAtTime(10000, ctx.currentTime);
+          const comp = ctx.createDynamicsCompressor();
+          comp.threshold.setValueAtTime(-50, ctx.currentTime);
+          comp.knee.setValueAtTime(40, ctx.currentTime);
+          comp.ratio.setValueAtTime(12, ctx.currentTime);
+          comp.attack.setValueAtTime(0, ctx.currentTime);
+          comp.release.setValueAtTime(0.25, ctx.currentTime);
+          osc.connect(comp);
+          comp.connect(ctx.destination);
+          osc.start(0);
+          const rendered = await ctx.startRendering();
+          const data = rendered.getChannelData(0);
+          let sum = 0;
+          for (let i = 4500; i < 5000; i++)
+              sum += Math.abs(data[i]);
+          return sum.toString();
+      }
+      catch {
+          return 'audio-error';
+      }
+  }
+  function collectNav() {
+      const n = navigator;
+      return [
+          n.hardwareConcurrency || 0,
+          n.deviceMemory || 0,
+          n.maxTouchPoints || 0,
+          n.platform || '',
+          n.userAgentData?.platform || '',
+          n.userAgentData?.mobile ? '1' : '0',
+      ].join('|');
+  }
+  function collectFonts() {
+      try {
+          const baseFonts = ['monospace', 'sans-serif', 'serif'];
+          const testFonts = [
+              'Arial', 'Courier New', 'Georgia', 'Times New Roman',
+              'Verdana', 'Trebuchet MS', 'Palatino', 'Impact', 'Comic Sans MS',
+          ];
+          const span = document.createElement('span');
+          span.style.cssText = 'position:absolute;left:-9999px;font-size:72px;visibility:hidden';
+          span.textContent = 'mmmmmmmmmmlli';
+          document.body.appendChild(span);
+          const baseSizes = {};
+          for (const bf of baseFonts) {
+              span.style.fontFamily = bf;
+              baseSizes[bf] = span.offsetWidth;
+          }
+          const detected = [];
+          for (const tf of testFonts) {
+              for (const bf of baseFonts) {
+                  span.style.fontFamily = `'${tf}', ${bf}`;
+                  if (span.offsetWidth !== baseSizes[bf]) {
+                      detected.push(tf);
+                      break;
+                  }
+              }
+          }
+          document.body.removeChild(span);
+          return detected.join(',');
+      }
+      catch {
+          return 'font-error';
+      }
+  }
+  function collectMedia() {
+      const v = document.createElement('video');
+      const types = [
+          'video/mp4; codecs="avc1.42E01E"',
+          'video/webm; codecs="vp8"',
+          'video/webm; codecs="vp9"',
+          'video/ogg; codecs="theora"',
+          'audio/mp4; codecs="mp4a.40.2"',
+          'audio/webm; codecs="opus"',
+      ];
+      return types.map((t) => v.canPlayType(t) || '').join('|');
+  }
+  function collectScreen() {
+      const s = window.screen;
+      return [s.width, s.height, s.colorDepth, window.devicePixelRatio || 1].join('x');
+  }
+  async function collectFingerprint() {
+      const [canvasRaw, audioRaw] = await Promise.all([
+          Promise.resolve(collectCanvas()),
+          collectAudio(),
+      ]);
+      const navRaw = collectNav();
+      const fontRaw = collectFonts();
+      const mediaRaw = collectMedia();
+      const screenRaw = collectScreen();
+      const tzCode = Intl.DateTimeFormat().resolvedOptions().timeZone || 'unknown';
+      const langTag = navigator.language || 'unknown';
+      const [canvas_hash, audio_hash, nav_hash, font_hash, media_hash, screen_hash] = await Promise.all([
+          shortHash(canvasRaw),
+          shortHash(audioRaw),
+          shortHash(navRaw).then((h) => h.substring(0, 8)),
+          shortHash(fontRaw),
+          shortHash(mediaRaw),
+          shortHash(screenRaw),
+      ]);
+      const combined = await longHash([canvas_hash, audio_hash, nav_hash, font_hash, media_hash, screen_hash, tzCode, langTag].join('.'));
+      return {
+          canvas_hash,
+          audio_hash,
+          nav_hash,
+          font_hash,
+          media_hash,
+          screen_hash,
+          tz_code: tzCode,
+          lang_tag: langTag,
+          combined,
+      };
+  }
+
   const DEFAULT_BRANDING = {
       name: 'GuardVideo',
       url: 'https://guardvid.com',
@@ -36661,6 +37020,9 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.state = exports.PlayerState.IDLE;
           this.embedToken = null;
           this.currentQuality = null;
+          this.eventTracker = null;
+          this.sdkFingerprint = null;
+          this._onSecurityEvent = null;
           this._onRateChange = this.enforceMaxRate.bind(this);
           this.videoElement = videoElement;
           this.config = {
@@ -36678,6 +37040,9 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               viewerName: config.viewerName || '',
               viewerEmail: config.viewerEmail || '',
               forensicWatermark: config.forensicWatermark !== false,
+              trackViewerEvents: config.trackViewerEvents !== false,
+              viewerEventsFlushIntervalMs: config.viewerEventsFlushIntervalMs || 5000,
+              collectViewerFingerprint: config.collectViewerFingerprint !== false,
               onReady: config.onReady || (() => { }),
               onError: config.onError || (() => { }),
               onQualityChange: config.onQualityChange || (() => { }),
@@ -36688,6 +37053,14 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           if (!this.checkAllowedDomain())
               return;
           this.applySecurity();
+          if (this.config.collectViewerFingerprint) {
+              collectFingerprint().then(fp => {
+                  this.sdkFingerprint = fp;
+                  this.log('Fingerprint collected', fp.combined);
+              }).catch(() => {
+                  this.log('Fingerprint collection failed (non-fatal)');
+              });
+          }
           this.initialize();
       }
       log(message, data) {
@@ -36782,6 +37155,9 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               if (cfg.enableWatermark && cfg.watermarkText) {
                   this.config.onWatermark?.(cfg.watermarkText);
               }
+              if (this.config.trackViewerEvents && cfg.eventsSecret) {
+                  this.initEventTracker(cfg.eventsSecret, cfg.sessionId ?? undefined);
+              }
           }
           catch (err) {
               this.log('fetchAndApplyWatermark error (non-fatal):', err);
@@ -36791,6 +37167,42 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               }
           }
       }
+      initEventTracker(eventsSecret, sessionId) {
+          if (!this.embedToken || !this.config.apiBaseUrl)
+              return;
+          this.eventTracker = new EventTracker({
+              endpoint: this.config.apiBaseUrl + '/videos/viewer-events',
+              tokenId: this.embedToken.tokenId,
+              sessionId,
+              eventsSecret,
+              identityHash: this.sdkFingerprint?.combined,
+              flushIntervalMs: this.config.viewerEventsFlushIntervalMs,
+              debug: this.config.debug,
+          });
+          this.videoElement.addEventListener('play', () => {
+              this.eventTracker?.track('play', this.videoElement.currentTime);
+              this.eventTracker?.startChunk(this.videoElement.currentTime);
+          });
+          this.videoElement.addEventListener('pause', () => {
+              this.eventTracker?.track('pause', this.videoElement.currentTime);
+              this.eventTracker?.endChunk();
+          });
+          this.videoElement.addEventListener('seeked', () => {
+              this.eventTracker?.track('seek', this.videoElement.currentTime);
+          });
+          this.videoElement.addEventListener('ended', () => {
+              this.eventTracker?.track('ended', this.videoElement.currentTime);
+              this.eventTracker?.endChunk();
+          });
+          this.videoElement.addEventListener('timeupdate', () => {
+              this.eventTracker?.tickChunk(this.videoElement.currentTime);
+          });
+          this._onSecurityEvent = ((e) => {
+              this.eventTracker?.track('security_event', this.videoElement.currentTime, e.detail);
+          });
+          document.addEventListener('gv:security', this._onSecurityEvent);
+          this.log('EventTracker initialized');
+      }
       async fetchEmbedToken() {
           const url = this.config.embedTokenEndpoint + '/' + this.videoId;
           this.log('Fetching embed token from', url);
@@ -36804,6 +37216,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                   ...(this.config.viewerName ? { viewerName: this.config.viewerName } : {}),
                   ...(this.config.viewerEmail ? { viewerEmail: this.config.viewerEmail } : {}),
                   forensicWatermark: this.config.forensicWatermark,
+                  ...(this.sdkFingerprint ? { sdkFingerprint: this.sdkFingerprint } : {}),
               }),
           });
           if (!response.ok) {
@@ -36951,6 +37364,14 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       getState() { return this.state; }
       destroy() {
           this.log('Destroying player');
+          if (this.eventTracker) {
+              this.eventTracker.destroy();
+              this.eventTracker = null;
+          }
+          if (this._onSecurityEvent) {
+              document.removeEventListener('gv:security', this._onSecurityEvent);
+              this._onSecurityEvent = null;
+          }
           this.videoElement.removeEventListener('ratechange', this._onRateChange);
           if (this.hls) {
               this.hls.destroy();
@@ -37602,6 +38023,12 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
   pointer-events: none;
   letter-spacing: 0.06em;
 }
+/* ── Canvas watermark layer (Layer 2) ─────────────────────── */
+.gvp-watermark-canvas {
+  position: absolute; inset: 0;
+  pointer-events: none; z-index: 7;
+  width: 100%; height: 100%;
+}
 
 /* ── Live dot (for live streams) ─────────────────────────── */
 .gvp-live-badge {
@@ -37767,6 +38194,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this._ctxKeyDownBound = () => { };
           this._watermarkObserver = null;
           this._watermarkText = '';
+          this._watermarkDriftTimer = null;
           const accent = config.branding?.accentColor ?? '#00e5a0';
           const brandName = config.branding?.name ?? 'GuardVideo';
           injectStyles();
@@ -37787,6 +38215,9 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.badge.appendChild(document.createTextNode(brandName));
           this.watermarkDiv = el('div', 'gvp-watermark');
           this.watermarkDiv.setAttribute('aria-hidden', 'true');
+          this.watermarkCanvas = document.createElement('canvas');
+          this.watermarkCanvas.className = 'gvp-watermark-canvas';
+          this.watermarkCanvas.setAttribute('aria-hidden', 'true');
           this.spinner = el('div', 'gvp-spinner gvp-hidden');
           this.spinner.setAttribute('aria-label', 'Loading');
           this.spinner.setAttribute('role', 'status');
@@ -37900,7 +38331,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           btnRow.append(this.playBtn, volWrap, this.timeEl, spacer, speedWrap, divider, qualWrap, this.fsBtn);
           inner.appendChild(btnRow);
           this.controls.appendChild(inner);
-          this.root.append(this.videoEl, this.badge, this.watermarkDiv, this.spinner, this.errorOverlay, this.centerPlay, this.clickArea, this.controls);
+          this.root.append(this.videoEl, this.badge, this.watermarkDiv, this.watermarkCanvas, this.spinner, this.errorOverlay, this.centerPlay, this.clickArea, this.controls);
           container.appendChild(this.root);
           this._onFsChangeBound = () => this._onFsChange();
           this._seekMouseMoveBound = (e) => { if (this.seekDragging)
@@ -38332,45 +38763,152 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               return;
           this._watermarkText = text;
           this.watermarkDiv.innerHTML = '';
+          const seed = this._hashCode(text);
+          const prng = this._mulberry32(seed);
           for (let i = 0; i < 20; i++) {
               const span = el('span', 'gvp-watermark-text');
               span.textContent = text;
-              span.style.left = `${(i % 4) * 26 + (Math.floor(i / 4) % 2) * 13}%`;
-              span.style.top = `${Math.floor(i / 4) * 22}%`;
+              const baseLeft = (i % 4) * 26 + (Math.floor(i / 4) % 2) * 13;
+              const baseTop = Math.floor(i / 4) * 22;
+              const jitterX = (prng() - 0.5) * 16;
+              const jitterY = (prng() - 0.5) * 10;
+              span.style.left = `${Math.max(0, Math.min(90, baseLeft + jitterX))}%`;
+              span.style.top = `${Math.max(0, Math.min(90, baseTop + jitterY))}%`;
+              const rotJitter = -28 + (prng() - 0.5) * 8;
+              span.style.transform = `rotate(${rotJitter}deg)`;
+              span.style.webkitTransform = `rotate(${rotJitter}deg)`;
               this.watermarkDiv.appendChild(span);
           }
+          this._renderCanvasWatermark(text);
           this._mountWatermarkObserver();
+          this._startWatermarkDrift();
+      }
+      _renderCanvasWatermark(text) {
+          const canvas = this.watermarkCanvas;
+          const w = this.root.clientWidth || 640;
+          const h = this.root.clientHeight || 360;
+          canvas.width = w;
+          canvas.height = h;
+          const ctx = canvas.getContext('2d');
+          if (!ctx)
+              return;
+          ctx.clearRect(0, 0, w, h);
+          ctx.font = '12px monospace';
+          ctx.fillStyle = 'rgba(255,255,255,0.04)';
+          ctx.textBaseline = 'top';
+          const seed = this._hashCode(text);
+          const prng = this._mulberry32(seed);
+          for (let i = 0; i < 20; i++) {
+              const baseLeft = (i % 4) * 26 + (Math.floor(i / 4) % 2) * 13;
+              const baseTop = Math.floor(i / 4) * 22;
+              const jitterX = (prng() - 0.5) * 16;
+              const jitterY = (prng() - 0.5) * 10;
+              const x = Math.max(0, Math.min(90, baseLeft + jitterX)) / 100 * w;
+              const y = Math.max(0, Math.min(90, baseTop + jitterY)) / 100 * h;
+              const rot = (-28 + (prng() - 0.5) * 8) * Math.PI / 180;
+              ctx.save();
+              ctx.translate(x, y);
+              ctx.rotate(rot);
+              ctx.fillText(text, 0, 0);
+              ctx.restore();
+          }
+      }
+      _mulberry32(seed) {
+          let s = seed | 0;
+          return () => {
+              s = (s + 0x6d2b79f5) | 0;
+              let t = Math.imul(s ^ (s >>> 15), 1 | s);
+              t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+              return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+      }
+      _hashCode(s) {
+          let h = 5381;
+          for (let i = 0; i < s.length; i++) {
+              h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+          }
+          return h;
+      }
+      _startWatermarkDrift() {
+          if (this._watermarkDriftTimer)
+              clearInterval(this._watermarkDriftTimer);
+          const seed = this._hashCode(this._watermarkText);
+          const prng = this._mulberry32(seed + Date.now());
+          this._watermarkDriftTimer = setInterval(() => {
+              const spans = this.watermarkDiv.querySelectorAll('.gvp-watermark-text');
+              spans.forEach((span, i) => {
+                  const baseLeft = (i % 4) * 26 + (Math.floor(i / 4) % 2) * 13;
+                  const baseTop = Math.floor(i / 4) * 22;
+                  const jX = (prng() - 0.5) * 16;
+                  const jY = (prng() - 0.5) * 10;
+                  span.style.transition = 'left 5s ease, top 5s ease';
+                  span.style.left = `${Math.max(0, Math.min(90, baseLeft + jX))}%`;
+                  span.style.top = `${Math.max(0, Math.min(90, baseTop + jY))}%`;
+              });
+              this._renderCanvasWatermark(this._watermarkText);
+          }, 30000);
       }
       _mountWatermarkObserver() {
           this._watermarkObserver?.disconnect();
           this._watermarkObserver = new MutationObserver((mutations) => {
+              let tampered = false;
               for (const m of mutations) {
                   if (m.type === 'childList' && m.target === this.root) {
                       if (!this.root.contains(this.watermarkDiv)) {
                           this.root.appendChild(this.watermarkDiv);
+                          tampered = true;
+                      }
+                      if (!this.root.contains(this.watermarkCanvas)) {
+                          this.root.appendChild(this.watermarkCanvas);
+                          tampered = true;
                       }
                   }
                   if (m.type === 'attributes' && m.target === this.watermarkDiv) {
                       this.watermarkDiv.removeAttribute('style');
                       this.watermarkDiv.className = 'gvp-watermark';
                       this.watermarkDiv.setAttribute('aria-hidden', 'true');
+                      tampered = true;
+                  }
+                  if (m.type === 'attributes' && m.target === this.watermarkCanvas) {
+                      this.watermarkCanvas.className = 'gvp-watermark-canvas';
+                      this.watermarkCanvas.setAttribute('aria-hidden', 'true');
+                      this._renderCanvasWatermark(this._watermarkText);
+                      tampered = true;
                   }
                   if (m.type === 'childList' && m.target === this.watermarkDiv) {
                       if (this.watermarkDiv.childElementCount < 20) {
                           this._refillWatermark();
+                          tampered = true;
                       }
                   }
               }
+              if (tampered) {
+                  this.root.dispatchEvent(new CustomEvent('gv:security', {
+                      bubbles: true,
+                      detail: { type: 'watermark_tamper', timestamp: Date.now() },
+                  }));
+              }
           });
           this._watermarkObserver.observe(this.root, { childList: true });
           this._watermarkObserver.observe(this.watermarkDiv, { attributes: true, childList: true });
       }
       _refillWatermark() {
+          const seed = this._hashCode(this._watermarkText);
+          const prng = this._mulberry32(seed);
+          for (let j = 0; j < this.watermarkDiv.childElementCount * 3; j++)
+              prng();
           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}%`;
+              const baseLeft = (i % 4) * 26 + (Math.floor(i / 4) % 2) * 13;
+              const baseTop = Math.floor(i / 4) * 22;
+              const jX = (prng() - 0.5) * 16;
+              const jY = (prng() - 0.5) * 10;
+              span.style.left = `${Math.max(0, Math.min(90, baseLeft + jX))}%`;
+              span.style.top = `${Math.max(0, Math.min(90, baseTop + jY))}%`;
+              const rotJitter = -28 + (prng() - 0.5) * 8;
+              span.style.transform = `rotate(${rotJitter}deg)`;
+              span.style.webkitTransform = `rotate(${rotJitter}deg)`;
               this.watermarkDiv.appendChild(span);
           }
       }
@@ -38561,6 +39099,8 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           document.removeEventListener('keydown', this._ctxKeyDownBound);
           this._hideContextMenu();
           this._watermarkObserver?.disconnect();
+          if (this._watermarkDriftTimer)
+              clearInterval(this._watermarkDriftTimer);
           this.corePlayer.destroy();
           this.root.remove();
       }