@guardvideo/player-sdk 3.5.0 → 3.7.0

package/dist/vanilla/guardvideo-player.js

@@ -37077,6 +37077,10 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.MAX_BACKOFF = 30000;
           this.rateLimitCooldownUntil = 0;
           this.nonceRefreshPromise = null;
+          this.destroyed = false;
+          this.networkRetryCount = 0;
+          this.MAX_NETWORK_RETRIES = 6;
+          this.pendingRetryTimer = null;
           this._onRateChange = this.enforceMaxRate.bind(this);
           this.videoElement = videoElement;
           this.config = {
@@ -37353,6 +37357,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               const data = await resp.json();
               this.log('Playlist nonce acquired, expires in ' + data.expiresIn + 's');
               this.retryBackoff = 1000;
+              this.networkRetryCount = 0;
               this.scheduleNonceRefresh(data.expiresIn);
               return data.nonce;
           }
@@ -37366,6 +37371,8 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               clearTimeout(this.nonceRefreshTimer);
           const refreshMs = Math.max(5000, expiresInSeconds * 750);
           this.nonceRefreshTimer = setTimeout(() => {
+              if (this.destroyed)
+                  return;
               this.refreshNonce().catch(() => {
                   this.log('Proactive nonce refresh failed');
               });
@@ -37394,6 +37401,24 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.rateLimitCooldownUntil = Date.now() + this.retryBackoff;
           this.retryBackoff = Math.min(this.retryBackoff * 2, this.MAX_BACKOFF);
       }
+      scheduleRetry(fn, delayMs) {
+          if (this.pendingRetryTimer)
+              clearTimeout(this.pendingRetryTimer);
+          this.pendingRetryTimer = setTimeout(() => {
+              this.pendingRetryTimer = null;
+              if (!this.destroyed && this.hls)
+                  fn();
+          }, delayMs);
+      }
+      stopLoading() {
+          if (this.pendingRetryTimer) {
+              clearTimeout(this.pendingRetryTimer);
+              this.pendingRetryTimer = null;
+          }
+          this.hls?.stopLoad();
+          this.networkRetryCount = 0;
+          this.retryBackoff = 1000;
+      }
       async initializePlayer() {
           if (!this.embedToken) {
               throw new Error('No embed token available');
@@ -37457,6 +37482,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               this.setState(exports.PlayerState.READY);
               this.config.onReady();
               this.retryBackoff = 1000;
+              this.networkRetryCount = 0;
               if (this.config.autoplay)
                   this.play();
           });
@@ -37485,12 +37511,14 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                   details: data.details,
                   fatal: data.fatal,
               });
+              if (this.destroyed)
+                  return;
               if (Date.now() < this.rateLimitCooldownUntil) {
                   this.log('Suppressing retry — rate limit cooldown active (' +
                       Math.ceil((this.rateLimitCooldownUntil - Date.now()) / 1000) + 's remaining)');
                   if (data.fatal) {
                       const delay = this.rateLimitCooldownUntil - Date.now() + 500;
-                      setTimeout(() => this.hls?.startLoad(), delay);
+                      this.scheduleRetry(() => this.hls?.startLoad(), delay);
                   }
                   return;
               }
@@ -37498,7 +37526,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               if (httpStatus === 429) {
                   this.enterRateLimitCooldown();
                   this.log('429 detected — entering cooldown for ' + this.retryBackoff + 'ms');
-                  setTimeout(() => {
+                  this.scheduleRetry(() => {
                       if (this.embedToken?.forensicWatermark) {
                           this.refreshNonce().then(() => this.hls?.startLoad()).catch(() => this.hls?.startLoad());
                       }
@@ -37511,11 +37539,17 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               if (data.type === Hls.ErrorTypes.NETWORK_ERROR &&
                   data.details === Hls.ErrorDetails.LEVEL_LOAD_ERROR &&
                   this.embedToken?.forensicWatermark) {
-                  this.log('Playlist load failed — refreshing nonce before retry');
+                  this.networkRetryCount++;
+                  if (this.networkRetryCount > this.MAX_NETWORK_RETRIES) {
+                      this.error('Max network retries exceeded for playlist load');
+                      this.handleError({ code: 'NETWORK_ERROR', message: 'Playlist load failed after multiple retries', fatal: true, details: data });
+                      return;
+                  }
+                  this.log('Playlist load failed — refreshing nonce before retry (' + this.networkRetryCount + '/' + this.MAX_NETWORK_RETRIES + ')');
                   this.refreshNonce().then(() => {
-                      setTimeout(() => this.hls?.startLoad(), this.retryBackoff);
+                      this.scheduleRetry(() => this.hls?.startLoad(), this.retryBackoff);
                   }).catch(() => {
-                      setTimeout(() => this.hls?.startLoad(), this.retryBackoff);
+                      this.scheduleRetry(() => this.hls?.startLoad(), this.retryBackoff);
                   });
                   this.retryBackoff = Math.min(this.retryBackoff * 1.5, this.MAX_BACKOFF);
                   return;
@@ -37523,11 +37557,17 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
               if (data.fatal) {
                   switch (data.type) {
                       case Hls.ErrorTypes.NETWORK_ERROR:
-                          this.error('Network error, attempting recovery...');
+                          this.networkRetryCount++;
+                          if (this.networkRetryCount > this.MAX_NETWORK_RETRIES) {
+                              this.error('Max network retries exceeded — giving up');
+                              this.handleError({ code: 'NETWORK_ERROR', message: 'Network error after multiple retries. Please check your connection.', fatal: true, details: data });
+                              return;
+                          }
+                          this.error('Network error, attempting recovery (' + this.networkRetryCount + '/' + this.MAX_NETWORK_RETRIES + ')...');
                           if (this.embedToken?.forensicWatermark) {
                               this.refreshNonce().catch(() => { });
                           }
-                          setTimeout(() => this.hls?.startLoad(), this.retryBackoff);
+                          this.scheduleRetry(() => this.hls?.startLoad(), this.retryBackoff);
                           this.retryBackoff = Math.min(this.retryBackoff * 1.5, this.MAX_BACKOFF);
                           break;
                       case Hls.ErrorTypes.MEDIA_ERROR:
@@ -37542,8 +37582,21 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this.setupVideoEventListeners();
       }
       setupVideoEventListeners() {
-          this.videoElement.addEventListener('playing', () => this.setState(exports.PlayerState.PLAYING));
-          this.videoElement.addEventListener('pause', () => this.setState(exports.PlayerState.PAUSED));
+          this.videoElement.addEventListener('playing', () => {
+              this.setState(exports.PlayerState.PLAYING);
+              if (this.hls)
+                  this.hls.startLoad(-1);
+          });
+          this.videoElement.addEventListener('pause', () => {
+              this.setState(exports.PlayerState.PAUSED);
+              if (this.hls && !this.videoElement.seeking) {
+                  this.hls.stopLoad();
+                  if (this.pendingRetryTimer) {
+                      clearTimeout(this.pendingRetryTimer);
+                      this.pendingRetryTimer = null;
+                  }
+              }
+          });
           this.videoElement.addEventListener('waiting', () => this.setState(exports.PlayerState.BUFFERING));
           this.videoElement.addEventListener('error', () => {
               const error = this.videoElement.error;
@@ -37570,6 +37623,8 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       }
       async play() {
           try {
+              this.networkRetryCount = 0;
+              this.retryBackoff = 1000;
               await this.videoElement.play();
           }
           catch (err) {
@@ -37606,6 +37661,11 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       getState() { return this.state; }
       destroy() {
           this.log('Destroying player');
+          this.destroyed = true;
+          if (this.pendingRetryTimer) {
+              clearTimeout(this.pendingRetryTimer);
+              this.pendingRetryTimer = null;
+          }
           if (this.nonceRefreshTimer) {
               clearTimeout(this.nonceRefreshTimer);
               this.nonceRefreshTimer = null;
@@ -38439,6 +38499,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this._ctxTargetBound = () => { };
           this._ctxKeyDownBound = () => { };
           this._watermarkObserver = null;
+          this._watermarkStylePollTimer = null;
           this._watermarkText = '';
           this._watermarkDriftTimer = null;
           const accent = config.branding?.accentColor ?? '#00e5a0';
@@ -39116,6 +39177,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                       tampered = true;
                   }
                   if (m.type === 'attributes' && m.target === this.watermarkCanvas) {
+                      this.watermarkCanvas.removeAttribute('style');
                       this.watermarkCanvas.className = 'gvp-watermark-canvas';
                       this.watermarkCanvas.setAttribute('aria-hidden', 'true');
                       this._renderCanvasWatermark(this._watermarkText);
@@ -39129,14 +39191,51 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
                   }
               }
               if (tampered) {
-                  this.root.dispatchEvent(new CustomEvent('gv:security', {
-                      bubbles: true,
-                      detail: { type: 'watermark_tamper', timestamp: Date.now() },
-                  }));
+                  this._onWatermarkTamper();
               }
           });
           this._watermarkObserver.observe(this.root, { childList: true });
           this._watermarkObserver.observe(this.watermarkDiv, { attributes: true, childList: true });
+          this._watermarkObserver.observe(this.watermarkCanvas, { attributes: true });
+          if (this._watermarkStylePollTimer)
+              clearInterval(this._watermarkStylePollTimer);
+          this._watermarkStylePollTimer = setInterval(() => {
+              if (!this._watermarkText)
+                  return;
+              const divHidden = this._isElementHidden(this.watermarkDiv);
+              const canvasHidden = this._isElementHidden(this.watermarkCanvas);
+              if (divHidden || canvasHidden) {
+                  this.watermarkDiv.removeAttribute('style');
+                  this.watermarkDiv.className = 'gvp-watermark';
+                  this.watermarkCanvas.removeAttribute('style');
+                  this.watermarkCanvas.className = 'gvp-watermark-canvas';
+                  this._purgeWatermarkOverrideStyles();
+                  this._onWatermarkTamper();
+              }
+          }, 500);
+      }
+      _isElementHidden(el) {
+          const cs = getComputedStyle(el);
+          return (cs.display === 'none' ||
+              cs.visibility === 'hidden' ||
+              parseFloat(cs.opacity) < 0.01 ||
+              (el.offsetWidth === 0 && el.offsetHeight === 0));
+      }
+      _purgeWatermarkOverrideStyles() {
+          const styles = this.root.querySelectorAll('style');
+          styles.forEach((s) => {
+              const text = s.textContent ?? '';
+              if (/gvp-watermark/i.test(text)) {
+                  s.remove();
+              }
+          });
+      }
+      _onWatermarkTamper() {
+          this.corePlayer.pause();
+          this.root.dispatchEvent(new CustomEvent('gv:security', {
+              bubbles: true,
+              detail: { type: 'watermark_tamper', timestamp: Date.now() },
+          }));
       }
       _refillWatermark() {
           const seed = this._hashCode(this._watermarkText);
@@ -39320,6 +39419,7 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
       }
       play() { return this.corePlayer.play(); }
       pause() { return this.corePlayer.pause(); }
+      stopLoading() { return this.corePlayer.stopLoading(); }
       seek(t) { return this.corePlayer.seek(t); }
       getCurrentTime() { return this.corePlayer.getCurrentTime(); }
       getDuration() { return this.corePlayer.getDuration(); }
@@ -39347,6 +39447,8 @@ Schedule: ${scheduleItems.map(seg => segmentToString(seg))} pos: ${this.timeline
           this._watermarkObserver?.disconnect();
           if (this._watermarkDriftTimer)
               clearInterval(this._watermarkDriftTimer);
+          if (this._watermarkStylePollTimer)
+              clearInterval(this._watermarkStylePollTimer);
           this.corePlayer.destroy();
           this.root.remove();
       }