@guardvideo/player-sdk 3.5.0 → 3.7.0

package/dist/index.js

@@ -455,6 +455,10 @@ class GuardVideoPlayer {
         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 = {
@@ -731,6 +735,7 @@ class GuardVideoPlayer {
             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;
         }
@@ -744,6 +749,8 @@ class GuardVideoPlayer {
             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');
             });
@@ -772,6 +779,24 @@ class GuardVideoPlayer {
         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');
@@ -835,6 +860,7 @@ class GuardVideoPlayer {
             this.setState(exports.PlayerState.READY);
             this.config.onReady();
             this.retryBackoff = 1000;
+            this.networkRetryCount = 0;
             if (this.config.autoplay)
                 this.play();
         });
@@ -863,12 +889,14 @@ class GuardVideoPlayer {
                 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;
             }
@@ -876,7 +904,7 @@ class GuardVideoPlayer {
             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());
                     }
@@ -889,11 +917,17 @@ class GuardVideoPlayer {
             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;
@@ -901,11 +935,17 @@ class GuardVideoPlayer {
             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:
@@ -920,8 +960,21 @@ class GuardVideoPlayer {
         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;
@@ -948,6 +1001,8 @@ class GuardVideoPlayer {
     }
     async play() {
         try {
+            this.networkRetryCount = 0;
+            this.retryBackoff = 1000;
             await this.videoElement.play();
         }
         catch (err) {
@@ -984,6 +1039,11 @@ class GuardVideoPlayer {
     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;
@@ -1817,6 +1877,7 @@ class PlayerUI {
         this._ctxTargetBound = () => { };
         this._ctxKeyDownBound = () => { };
         this._watermarkObserver = null;
+        this._watermarkStylePollTimer = null;
         this._watermarkText = '';
         this._watermarkDriftTimer = null;
         const accent = config.branding?.accentColor ?? '#00e5a0';
@@ -2494,6 +2555,7 @@ class PlayerUI {
                     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);
@@ -2507,14 +2569,51 @@ class PlayerUI {
                 }
             }
             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);
@@ -2698,6 +2797,7 @@ class PlayerUI {
     }
     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(); }
@@ -2725,6 +2825,8 @@ class PlayerUI {
         this._watermarkObserver?.disconnect();
         if (this._watermarkDriftTimer)
             clearInterval(this._watermarkDriftTimer);
+        if (this._watermarkStylePollTimer)
+            clearInterval(this._watermarkStylePollTimer);
         this.corePlayer.destroy();
         this.root.remove();
     }
@@ -2757,6 +2859,7 @@ const GuardVideoPlayerComponent = React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         play: () => uiRef.current?.play() ?? Promise.resolve(),
         pause: () => uiRef.current?.pause(),
+        stopLoading: () => uiRef.current?.stopLoading(),
         seek: (t) => uiRef.current?.seek(t),
         getCurrentTime: () => uiRef.current?.getCurrentTime() ?? 0,
         getDuration: () => uiRef.current?.getDuration() ?? 0,