stormcloud-video-player 0.8.34 → 0.8.36

package/lib/index.d.cts

@@ -2,6 +2,25 @@ import React, { CSSProperties, lazy as lazy$1 } from 'react';
 import * as csstype from 'csstype';
 import Hls from 'hls.js';
 
+declare const MQTT_CA_CERT_FILE = "src/certs/emqxsl-ca.crt";
+type MQTTConfig = {
+    enabled: boolean;
+    brokerAddress: string;
+    brokerPort: number;
+    wsPort: number;
+    username: string;
+    password: string;
+    topicPrefix: string;
+    qos: 0 | 1 | 2;
+    brokerUrl?: string;
+};
+declare const DEFAULT_MQTT_CONFIG: MQTTConfig;
+declare const mqttConfig: MQTTConfig;
+declare function applyMQTTConfig(overrides: Partial<MQTTConfig>): void;
+declare function isMQTTEnabled(): boolean;
+declare function buildMQTTBrokerUrl(): string;
+declare function buildPlayerTopic(licenseKey: string, channel: "metrics" | "impressions" | "heartbeat"): string;
+
 type LateJoinPolicy = "play_remaining" | "skip_to_content";
 interface AdBreak {
     id?: string;
@@ -21,6 +40,7 @@ interface StormcloudVideoPlayerConfig {
     allowNativeHls?: boolean;
     lowLatencyMode?: boolean;
     isLiveStream?: boolean;
+    pauseContentDuringAds?: boolean;
     driftToleranceMs?: number;
     immediateManifestAds?: boolean;
     debugAdTiming?: boolean;
@@ -3943,25 +3963,6 @@ declare function sendAdLoadedTracking(licenseKey: string | undefined, adLoadedIn
 declare function sendAdImpressionTracking(licenseKey: string | undefined, adImpressionInfo: AdImpressionInfo, context?: PlayerAnalyticsContext): Promise<void>;
 declare function sendHeartbeat(licenseKey?: string, context?: PlayerAnalyticsContext, flags?: PlayerMetricFlags): Promise<void>;
 
-declare const MQTT_CA_CERT_FILE = "src/certs/emqxsl-ca.crt";
-type MQTTConfig = {
-    enabled: boolean;
-    brokerAddress: string;
-    brokerPort: number;
-    wsPort: number;
-    username: string;
-    password: string;
-    topicPrefix: string;
-    qos: 0 | 1 | 2;
-    brokerUrl?: string;
-};
-declare const DEFAULT_MQTT_CONFIG: MQTTConfig;
-declare const mqttConfig: MQTTConfig;
-declare function applyMQTTConfig(overrides: Partial<MQTTConfig>): void;
-declare function isMQTTEnabled(): boolean;
-declare function buildMQTTBrokerUrl(): string;
-declare function buildPlayerTopic(licenseKey: string, channel: "metrics" | "impressions" | "heartbeat"): string;
-
 type MQTTStatus = "disconnected" | "connecting" | "connected" | "error";
 declare function getMQTTStatus(): MQTTStatus;
 declare function isMQTTConnected(): boolean;
@@ -4002,6 +4003,7 @@ interface BrowserInfo {
 declare function detectBrowser(): BrowserInfo;
 declare function getBrowserConfigOverrides(): {
     allowNativeHls?: boolean;
+    pauseContentDuringAds?: boolean;
 };
 declare function supportsModernJS(): boolean;
 declare function logBrowserInfo(debug?: boolean): void;

package/lib/index.d.ts

@@ -2,6 +2,25 @@ import React, { CSSProperties, lazy as lazy$1 } from 'react';
 import * as csstype from 'csstype';
 import Hls from 'hls.js';
 
+declare const MQTT_CA_CERT_FILE = "src/certs/emqxsl-ca.crt";
+type MQTTConfig = {
+    enabled: boolean;
+    brokerAddress: string;
+    brokerPort: number;
+    wsPort: number;
+    username: string;
+    password: string;
+    topicPrefix: string;
+    qos: 0 | 1 | 2;
+    brokerUrl?: string;
+};
+declare const DEFAULT_MQTT_CONFIG: MQTTConfig;
+declare const mqttConfig: MQTTConfig;
+declare function applyMQTTConfig(overrides: Partial<MQTTConfig>): void;
+declare function isMQTTEnabled(): boolean;
+declare function buildMQTTBrokerUrl(): string;
+declare function buildPlayerTopic(licenseKey: string, channel: "metrics" | "impressions" | "heartbeat"): string;
+
 type LateJoinPolicy = "play_remaining" | "skip_to_content";
 interface AdBreak {
     id?: string;
@@ -21,6 +40,7 @@ interface StormcloudVideoPlayerConfig {
     allowNativeHls?: boolean;
     lowLatencyMode?: boolean;
     isLiveStream?: boolean;
+    pauseContentDuringAds?: boolean;
     driftToleranceMs?: number;
     immediateManifestAds?: boolean;
     debugAdTiming?: boolean;
@@ -3943,25 +3963,6 @@ declare function sendAdLoadedTracking(licenseKey: string | undefined, adLoadedIn
 declare function sendAdImpressionTracking(licenseKey: string | undefined, adImpressionInfo: AdImpressionInfo, context?: PlayerAnalyticsContext): Promise<void>;
 declare function sendHeartbeat(licenseKey?: string, context?: PlayerAnalyticsContext, flags?: PlayerMetricFlags): Promise<void>;
 
-declare const MQTT_CA_CERT_FILE = "src/certs/emqxsl-ca.crt";
-type MQTTConfig = {
-    enabled: boolean;
-    brokerAddress: string;
-    brokerPort: number;
-    wsPort: number;
-    username: string;
-    password: string;
-    topicPrefix: string;
-    qos: 0 | 1 | 2;
-    brokerUrl?: string;
-};
-declare const DEFAULT_MQTT_CONFIG: MQTTConfig;
-declare const mqttConfig: MQTTConfig;
-declare function applyMQTTConfig(overrides: Partial<MQTTConfig>): void;
-declare function isMQTTEnabled(): boolean;
-declare function buildMQTTBrokerUrl(): string;
-declare function buildPlayerTopic(licenseKey: string, channel: "metrics" | "impressions" | "heartbeat"): string;
-
 type MQTTStatus = "disconnected" | "connecting" | "connected" | "error";
 declare function getMQTTStatus(): MQTTStatus;
 declare function isMQTTConnected(): boolean;
@@ -4002,6 +4003,7 @@ interface BrowserInfo {
 declare function detectBrowser(): BrowserInfo;
 declare function getBrowserConfigOverrides(): {
     allowNativeHls?: boolean;
+    pauseContentDuringAds?: boolean;
 };
 declare function supportsModernJS(): boolean;
 declare function logBrowserInfo(debug?: boolean): void;

package/lib/index.js

@@ -389,6 +389,11 @@ function createHlsAdPlayer(contentVideo, options) {
     var preloadingAds = /* @__PURE__ */ new Map();
     var destroyed = false;
     var pendingTimeouts = [];
+    var STALL_TIMEOUT_MS = 4e3;
+    var STALL_CHECK_INTERVAL_MS = 1e3;
+    var stallWatchdogId;
+    var lastAdProgressTime = 0;
+    var lastAdProgressPosition = 0;
     var trackingFired = {
         impression: false,
         start: false,
@@ -1021,6 +1026,7 @@ function createHlsAdPlayer(contentVideo, options) {
         if (!adVideoElement || !currentAd) return;
         adVideoElement.addEventListener("timeupdate", function() {
             if (!currentAd || !adVideoElement) return;
+            noteAdProgress();
             var progress = adVideoElement.currentTime / currentAd.duration;
             if (progress >= 0.25 && !trackingFired.firstQuartile) {
                 trackingFired.firstQuartile = true;
@@ -1036,6 +1042,7 @@ function createHlsAdPlayer(contentVideo, options) {
             }
         });
         adVideoElement.addEventListener("playing", function() {
+            startStallWatchdog();
             if (!currentAd || trackingFired.start) return;
             trackingFired.start = true;
             fireTrackingPixels(currentAd.trackingUrls.start);
@@ -1176,8 +1183,52 @@ function createHlsAdPlayer(contentVideo, options) {
             return false;
         }
     }
+    function clearStallWatchdog() {
+        if (stallWatchdogId != null) {
+            clearInterval(stallWatchdogId);
+            stallWatchdogId = void 0;
+        }
+    }
+    function noteAdProgress() {
+        lastAdProgressTime = Date.now();
+        if (adVideoElement) {
+            lastAdProgressPosition = adVideoElement.currentTime;
+        }
+    }
+    function handleAdStall() {
+        console.warn("[HlsAdPlayer] Ad playback stalled (no progress) - recovering to avoid a blank frame");
+        clearStallWatchdog();
+        if (currentAd) {
+            fireTrackingPixels(currentAd.trackingUrls.error);
+        }
+        if (podIndex < podAds.length - 1 && advanceToNextPodAd()) {
+            return;
+        }
+        handleAdError();
+    }
+    function startStallWatchdog() {
+        clearStallWatchdog();
+        noteAdProgress();
+        stallWatchdogId = window.setInterval(function() {
+            if (!adPlaying || !adVideoElement) {
+                return;
+            }
+            if (adVideoElement.currentTime > lastAdProgressPosition + 0.05) {
+                noteAdProgress();
+                return;
+            }
+            if (adVideoElement.paused) {
+                noteAdProgress();
+                return;
+            }
+            if (Date.now() - lastAdProgressTime >= STALL_TIMEOUT_MS) {
+                handleAdStall();
+            }
+        }, STALL_CHECK_INTERVAL_MS);
+    }
     function handleAdComplete() {
         console.log("[HlsAdPlayer] Handling ad completion");
+        clearStallWatchdog();
         adPlaying = false;
         setAdPlayingFlag(false);
         contentVideo.muted = true;
@@ -1185,6 +1236,10 @@ function createHlsAdPlayer(contentVideo, options) {
             adContainerEl.style.display = "none";
             adContainerEl.style.pointerEvents = "none";
         }
+        if (!(options === null || options === void 0 ? void 0 : options.continueLiveStreamDuringAds)) {
+            contentVideo.style.visibility = "visible";
+            contentVideo.style.opacity = "1";
+        }
         if (options === null || options === void 0 ? void 0 : options.continueLiveStreamDuringAds) {
             if (contentVideo.paused) {
                 console.log("[HlsAdPlayer] Content video paused in live mode, resuming playback");
@@ -1197,6 +1252,7 @@ function createHlsAdPlayer(contentVideo, options) {
     }
     function handleAdError() {
         console.log("[HlsAdPlayer] Handling ad error");
+        clearStallWatchdog();
         adPlaying = false;
         setAdPlayingFlag(false);
         contentVideo.muted = true;
@@ -1204,6 +1260,10 @@ function createHlsAdPlayer(contentVideo, options) {
             adContainerEl.style.display = "none";
             adContainerEl.style.pointerEvents = "none";
         }
+        if (!(options === null || options === void 0 ? void 0 : options.continueLiveStreamDuringAds)) {
+            contentVideo.style.visibility = "visible";
+            contentVideo.style.opacity = "1";
+        }
         emit("ad_error");
     }
     return {
@@ -1401,6 +1461,7 @@ function createHlsAdPlayer(contentVideo, options) {
                 var previousMutedState;
                 return _ts_generator(this, function(_state) {
                     console.log("[HlsAdPlayer] Stopping ad");
+                    clearStallWatchdog();
                     adPlaying = false;
                     setAdPlayingFlag(false);
                     previousMutedState = contentVideo.muted;
@@ -1439,6 +1500,7 @@ function createHlsAdPlayer(contentVideo, options) {
         destroy: function destroy() {
             console.log("[HlsAdPlayer] Destroying");
             destroyed = true;
+            clearStallWatchdog();
             var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
             try {
                 for(var _iterator = pendingTimeouts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
@@ -3856,6 +3918,7 @@ function getBrowserConfigOverrides() {
     var overrides = {};
     if (browser.isSmartTV) {
         overrides.allowNativeHls = true;
+        overrides.pauseContentDuringAds = true;
     }
     return overrides;
 }
@@ -5036,6 +5099,7 @@ var AdConfigManager = /*#__PURE__*/ function() {
                                 ];
                             case 4:
                                 data = _state.sent();
+                                this.applyMqttConfigFromResponse(data);
                                 imaPayload = (_data_response = data.response) === null || _data_response === void 0 ? void 0 : (_data_response_ima = _data_response.ima) === null || _data_response_ima === void 0 ? void 0 : (_data_response_ima_publisherdeskima = _data_response_ima["publisherdesk.ima"]) === null || _data_response_ima_publisherdeskima === void 0 ? void 0 : _data_response_ima_publisherdeskima.payload;
                                 if (imaPayload) {
                                     decodedPayload = imaPayload;
@@ -5069,6 +5133,20 @@ var AdConfigManager = /*#__PURE__*/ function() {
                 }).call(this);
             }
         },
+        {
+            key: "applyMqttConfigFromResponse",
+            value: function applyMqttConfigFromResponse(data) {
+                var _data_response;
+                var mqttConfig2 = (_data_response = data.response) === null || _data_response === void 0 ? void 0 : _data_response.mqtt_config;
+                if (!mqttConfig2 || (typeof mqttConfig2 === "undefined" ? "undefined" : _type_of(mqttConfig2)) !== "object") {
+                    return;
+                }
+                applyMQTTConfig(mqttConfig2);
+                if (this.debug) {
+                    console.log("[StormcloudVideoPlayer] Applied MQTT config from /ads/web:", mqttConfig2);
+                }
+            }
+        },
         {
             key: "fetchAndParseVmap",
             value: function fetchAndParseVmap(vmapUrl) {
@@ -6768,12 +6846,7 @@ var AdBreakOrchestrator = /*#__PURE__*/ function() {
             // ───────────────────────────────────────────────────────────────
             //  IMA event listeners
             // ───────────────────────────────────────────────────────────────
-            /**
-   * Produces the next pod ad-request URL for the current break. Every request
-   * (initial and continuous-fetch top-up) carries pod macros (pmad/pmnd/pmxd,
-   * no ppos); pmxd tracks the remaining break time so top-up pods only ask for
-   * what still fits.
-   */ key: "nextAdRequestUrl",
+            key: "nextAdRequestUrl",
             value: function nextAdRequestUrl(baseVastUrl) {
                 var remaining = Math.min(this.timing.getWallClockRemainingAdMs(), this.timing.getDurationBudgetRemainingMs());
                 var breakDurationMs = remaining > 0 ? remaining : void 0;
@@ -7902,7 +7975,9 @@ var AdBreakOrchestrator = /*#__PURE__*/ function() {
                 if (Math.abs(this.host.video.volume - restoredVolume) > 0.01) {
                     this.host.video.volume = restoredVolume;
                 }
-                if (this.host.shouldContinueLiveStreamDuringAds()) {
+                this.host.video.style.visibility = "visible";
+                this.host.video.style.opacity = "1";
+                if (this.host.isLiveStream()) {
                     var liveSyncPos = this.host.getLiveSyncPosition();
                     if (liveSyncPos != null && liveSyncPos > this.host.video.currentTime) {
                         if (this.debug) {
@@ -7910,16 +7985,39 @@ var AdBreakOrchestrator = /*#__PURE__*/ function() {
                         }
                         this.host.video.currentTime = liveSyncPos;
                     }
-                    if (this.host.video.paused) {
-                        var _this_host_video_play;
-                        if (this.debug) console.log("[StormcloudVideoPlayer] Content video paused in live mode after ads, resuming playback");
-                        (_this_host_video_play = this.host.video.play()) === null || _this_host_video_play === void 0 ? void 0 : _this_host_video_play.catch(function() {});
-                    } else {
-                        if (this.debug) console.log("[StormcloudVideoPlayer] Content video already playing in live mode after ads");
+                }
+                this.resumeContentPlayback();
+            }
+        },
+        {
+            key: "resumeContentPlayback",
+            value: function resumeContentPlayback() {
+                var _this = this;
+                var attempt = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
+                var maxAttempts = 3;
+                if (!this.host.video.paused) {
+                    if (this.debug && attempt === 0) {
+                        console.log("[StormcloudVideoPlayer] Content video already playing after ads");
                     }
-                } else if (this.host.video.paused) {
-                    var _this_host_video_play1;
-                    (_this_host_video_play1 = this.host.video.play()) === null || _this_host_video_play1 === void 0 ? void 0 : _this_host_video_play1.catch(function() {});
+                    return;
+                }
+                if (this.debug) {
+                    console.log("[StormcloudVideoPlayer] Resuming content playback after ads (attempt ".concat(attempt + 1, "/").concat(maxAttempts, ")"));
+                }
+                var playResult = this.host.video.play();
+                if (playResult && typeof playResult.catch === "function") {
+                    playResult.catch(function(error) {
+                        if (attempt + 1 >= maxAttempts) {
+                            if (_this.debug) {
+                                console.warn("[StormcloudVideoPlayer] Failed to resume content playback after ads:", error);
+                            }
+                            return;
+                        }
+                        var backoffMs = 250 * (attempt + 1);
+                        window.setTimeout(function() {
+                            _this.resumeContentPlayback(attempt + 1);
+                        }, backoffMs);
+                    });
                 }
             }
         },
@@ -8034,6 +8132,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             shouldContinueLiveStreamDuringAds: function shouldContinueLiveStreamDuringAds() {
                 return _this.shouldContinueLiveStreamDuringAds();
             },
+            isLiveStream: function isLiveStream() {
+                return _this.hlsEngine.isLiveStream;
+            },
             getLiveSyncPosition: function getLiveSyncPosition() {
                 return _this.hlsEngine.getLiveSyncPosition();
             },
@@ -8256,6 +8357,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "shouldContinueLiveStreamDuringAds",
             value: function shouldContinueLiveStreamDuringAds() {
+                if (this.config.pauseContentDuringAds) {
+                    return false;
+                }
                 if (this.hlsEngine.isLiveStream) {
                     return true;
                 }