stormcloud-video-player 0.3.17 → 0.3.18

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -286,6 +286,20 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
+function _ts_values(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function() {
+            if (o && i >= o.length) o = void 0;
+            return {
+                value: o && o[i++],
+                done: !o
+            };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+}
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1276,6 +1290,7 @@ function createImaController(video, options) {
         },
         showPlaceholder: function showPlaceholder() {
             ensurePlaceholderContainer();
+            hideContentVideo();
             if (adContainerEl) {
                 adContainerEl.style.display = "flex";
                 adContainerEl.style.backgroundColor = "#000";
@@ -1295,6 +1310,9 @@ function createImaController(video, options) {
                     }
                 }, 300);
             }
+            if (!adPlaying) {
+                showContentVideo();
+            }
         }
     };
 }
@@ -2069,6 +2087,8 @@ function createHlsAdPlayer(contentVideo, options) {
             return 1;
         },
         showPlaceholder: function showPlaceholder() {
+            contentVideo.style.opacity = "0";
+            contentVideo.style.visibility = "hidden";
             if (!adContainerEl) {
                 var _contentVideo_parentElement;
                 var container = document.createElement("div");
@@ -2096,6 +2116,10 @@ function createHlsAdPlayer(contentVideo, options) {
                 adContainerEl.style.display = "none";
                 adContainerEl.style.pointerEvents = "none";
             }
+            if (!adPlaying) {
+                contentVideo.style.visibility = "visible";
+                contentVideo.style.opacity = "1";
+            }
         }
     };
 }
@@ -2750,6 +2774,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         this.maxPlaceholderDurationMs = 5e3;
         this.placeholderStartTimeMs = null;
         this.isShowingPlaceholder = false;
+        this.consecutiveEmptyResponses = 0;
+        this.totalAdRequestsInBreak = 0;
+        this.lastEmptyResponseTimeMs = 0;
+        this.maxTotalAdRequestsPerBreak = 20;
+        this.maxConsecutiveEmptyResponses = 5;
+        this.baseEmptyResponseDelayMs = 2e3;
+        this.maxEmptyResponseDelayMs = 3e4;
         initializePolyfills();
         var browserOverrides = getBrowserConfigOverrides();
         this.config = _object_spread({}, config, browserOverrides);
@@ -2939,6 +2970,87 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                         });
                                     }).call(_this);
                                 });
+                                this.hls.on(import_hls2.default.Events.LEVEL_LOADED, function(_evt, data) {
+                                    if (_this.inAdBreak) {
+                                        return;
+                                    }
+                                    var details = data === null || data === void 0 ? void 0 : data.details;
+                                    if (!details || !details.fragments || details.fragments.length === 0) {
+                                        return;
+                                    }
+                                    var fragmentsToScan = Math.min(5, details.fragments.length);
+                                    for(var i = 0; i < fragmentsToScan; i++){
+                                        var frag = details.fragments[i];
+                                        var tagList = frag === null || frag === void 0 ? void 0 : frag.tagList;
+                                        if (!Array.isArray(tagList)) continue;
+                                        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                                        try {
+                                            for(var _iterator = tagList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                                                var entry = _step.value;
+                                                var tag = "";
+                                                var value = "";
+                                                if (Array.isArray(entry)) {
+                                                    var _entry_;
+                                                    tag = String((_entry_ = entry[0]) !== null && _entry_ !== void 0 ? _entry_ : "");
+                                                    var _entry_1;
+                                                    value = String((_entry_1 = entry[1]) !== null && _entry_1 !== void 0 ? _entry_1 : "");
+                                                } else if (typeof entry === "string") {
+                                                    var idx = entry.indexOf(":");
+                                                    if (idx >= 0) {
+                                                        tag = entry.substring(0, idx);
+                                                        value = entry.substring(idx + 1);
+                                                    } else {
+                                                        tag = entry;
+                                                    }
+                                                }
+                                                if (!tag) continue;
+                                                if (tag.includes("EXT-X-CUE-OUT") || tag.includes("EXT-X-DATERANGE")) {
+                                                    var attrs = tag.includes("EXT-X-DATERANGE") ? _this.parseAttributeList(value) : {};
+                                                    var hasScteOut = tag.includes("EXT-X-CUE-OUT") || "SCTE35-OUT" in attrs || attrs["SCTE35-OUT"] !== void 0;
+                                                    if (hasScteOut) {
+                                                        if (_this.config.debugAdTiming) {
+                                                            console.log("[StormcloudVideoPlayer] \uD83C\uDFAF EARLY SCTE-35 DETECTION: Ad break marker found in fragment", i, "- triggering ad handling immediately");
+                                                        }
+                                                        var durationSeconds = _this.parseCueOutDuration(value);
+                                                        var marker = _object_spread_props(_object_spread({
+                                                            type: "start"
+                                                        }, durationSeconds !== void 0 ? {
+                                                            durationSeconds: durationSeconds
+                                                        } : {}), {
+                                                            raw: {
+                                                                tag: tag,
+                                                                value: value,
+                                                                earlyDetection: true
+                                                            }
+                                                        });
+                                                        _this.inAdBreak = true;
+                                                        _this.expectedAdBreakDurationMs = durationSeconds ? durationSeconds * 1e3 : void 0;
+                                                        _this.currentAdBreakStartWallClockMs = Date.now();
+                                                        _this.clearAdStartTimer();
+                                                        _this.handleAdStart(marker);
+                                                        if (_this.expectedAdBreakDurationMs != null) {
+                                                            _this.scheduleAdStopCountdown(_this.expectedAdBreakDurationMs);
+                                                        }
+                                                        return;
+                                                    }
+                                                }
+                                            }
+                                        } catch (err) {
+                                            _didIteratorError = true;
+                                            _iteratorError = err;
+                                        } finally{
+                                            try {
+                                                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                                                    _iterator.return();
+                                                }
+                                            } finally{
+                                                if (_didIteratorError) {
+                                                    throw _iteratorError;
+                                                }
+                                            }
+                                        }
+                                    }
+                                });
                                 this.hls.on(import_hls2.default.Events.FRAG_BUFFERED, function(_evt, data) {
                                     return _async_to_generator(function() {
                                         var _this, _this_config_minSegmentsBeforePlay, minSegments, _this_video_play;
@@ -3146,11 +3258,16 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 this.ima.initialize();
                 this.ima.updateOriginalMutedState(this.video.muted, this.video.volume);
                 this.ima.on("all_ads_completed", function() {
+                    var remaining = _this.getRemainingAdMs();
                     if (_this.config.debugAdTiming) {
-                        console.log("[StormcloudVideoPlayer] IMA all_ads_completed event received - ending ad break");
+                        console.log("[StormcloudVideoPlayer] IMA all_ads_completed event received - remaining=".concat(remaining, "ms, queued ads=").concat(_this.adRequestQueue.length));
                     }
                     if (_this.inAdBreak) {
-                        _this.handleAdPodComplete();
+                        if (remaining > 500) {
+                            _this.tryNextAvailableAd();
+                        } else {
+                            _this.handleAdPodComplete();
+                        }
                     }
                 });
                 this.ima.on("ad_error", function(errorPayload) {
@@ -3945,6 +4062,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 this.continuousFetchingActive = true;
                                 this.isShowingPlaceholder = false;
                                 this.placeholderStartTimeMs = null;
+                                this.consecutiveEmptyResponses = 0;
+                                this.totalAdRequestsInBreak = 0;
+                                this.lastEmptyResponseTimeMs = 0;
                                 currentMuted = this.video.muted;
                                 currentVolume = this.video.volume;
                                 this.ima.updateOriginalMutedState(currentMuted, currentVolume);
@@ -3952,6 +4072,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 this.currentAdIndex = 0;
                                 this.totalAdsInBreak = 1;
                                 this.adPodQueue = [];
+                                this.showAds = true;
+                                this.ima.showPlaceholder();
                                 if (this.expectedAdBreakDurationMs == null && adBreakDurationMs != null) {
                                     this.expectedAdBreakDurationMs = adBreakDurationMs;
                                     this.currentAdBreakStartWallClockMs = Date.now();
@@ -4038,158 +4160,200 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "continuousFetchLoop",
             value: function continuousFetchLoop(baseVastUrl) {
                 return _async_to_generator(function() {
-                    var remaining, maxQueueSize, newAdUrl, response, xmlText, parser, xmlDoc, mediaFiles, error;
+                    var _this, _loop, _ret;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
-                                if (!(this.continuousFetchingActive && this.inAdBreak)) return [
-                                    3,
-                                    14
-                                ];
-                                remaining = this.getRemainingAdMs();
-                                if (remaining <= 0) {
-                                    if (this.config.debugAdTiming) {
-                                        console.log("[CONTINUOUS-FETCH] \u23F9\uFE0F Ad break time expired, stopping fetch loop");
-                                    }
-                                    return [
-                                        3,
-                                        14
-                                    ];
-                                }
-                                maxQueueSize = 3;
-                                if (!(this.adRequestQueue.length >= maxQueueSize)) return [
-                                    3,
-                                    2
-                                ];
-                                if (this.config.debugAdTiming) {
-                                    console.log("[CONTINUOUS-FETCH] ⏸️ Queue full (".concat(this.adRequestQueue.length, "), pausing fetching..."));
-                                }
-                                return [
-                                    4,
-                                    new Promise(function(resolve) {
-                                        return setTimeout(resolve, 2e3);
-                                    })
-                                ];
+                                _loop = function() {
+                                    var remaining, maxQueueSize, newAdUrl, _this_ima_hasPreloadedAd, _this_ima, _this_ima_hasPreloadedAd1, hasPreloadedAd, backoffDelay, error, backoffDelay1;
+                                    return _ts_generator(this, function(_state) {
+                                        switch(_state.label){
+                                            case 0:
+                                                remaining = _this.getRemainingAdMs();
+                                                if (remaining <= 0) {
+                                                    if (_this.config.debugAdTiming) {
+                                                        console.log("[CONTINUOUS-FETCH] \u23F9\uFE0F Ad break time expired, stopping fetch loop");
+                                                    }
+                                                    return [
+                                                        2,
+                                                        "break"
+                                                    ];
+                                                }
+                                                if (_this.totalAdRequestsInBreak >= _this.maxTotalAdRequestsPerBreak) {
+                                                    if (_this.config.debugAdTiming) {
+                                                        console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Maximum ad requests reached (".concat(_this.maxTotalAdRequestsPerBreak, "), stopping fetch loop to prevent server blocks"));
+                                                    }
+                                                    return [
+                                                        2,
+                                                        "break"
+                                                    ];
+                                                }
+                                                if (_this.consecutiveEmptyResponses >= _this.maxConsecutiveEmptyResponses) {
+                                                    if (_this.config.debugAdTiming) {
+                                                        console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Too many consecutive empty responses (".concat(_this.maxConsecutiveEmptyResponses, "), stopping fetch loop"));
+                                                    }
+                                                    return [
+                                                        2,
+                                                        "break"
+                                                    ];
+                                                }
+                                                maxQueueSize = 3;
+                                                if (!(_this.adRequestQueue.length >= maxQueueSize)) return [
+                                                    3,
+                                                    2
+                                                ];
+                                                if (_this.config.debugAdTiming) {
+                                                    console.log("[CONTINUOUS-FETCH] ⏸️ Queue full (".concat(_this.adRequestQueue.length, "), pausing fetching..."));
+                                                }
+                                                return [
+                                                    4,
+                                                    new Promise(function(resolve) {
+                                                        return setTimeout(resolve, 2e3);
+                                                    })
+                                                ];
+                                            case 1:
+                                                _state.sent();
+                                                return [
+                                                    2,
+                                                    "continue"
+                                                ];
+                                            case 2:
+                                                newAdUrl = _this.generateVastUrlsWithCorrelators(baseVastUrl, 1)[0];
+                                                if (!(!newAdUrl || _this.failedVastUrls.has(newAdUrl))) return [
+                                                    3,
+                                                    4
+                                                ];
+                                                return [
+                                                    4,
+                                                    new Promise(function(resolve) {
+                                                        return setTimeout(resolve, 1e3);
+                                                    })
+                                                ];
+                                            case 3:
+                                                _state.sent();
+                                                return [
+                                                    2,
+                                                    "continue"
+                                                ];
+                                            case 4:
+                                                _this.totalAdRequestsInBreak++;
+                                                if (_this.config.debugAdTiming) {
+                                                    console.log("[CONTINUOUS-FETCH] \uD83D\uDCE1 Attempting to fetch ad (request ".concat(_this.totalAdRequestsInBreak, "/").concat(_this.maxTotalAdRequestsPerBreak, ", queue: ").concat(_this.adRequestQueue.length, ")..."));
+                                                }
+                                                _state.label = 5;
+                                            case 5:
+                                                _state.trys.push([
+                                                    5,
+                                                    11,
+                                                    ,
+                                                    13
+                                                ]);
+                                                if (!_this.ima.preloadAds) return [
+                                                    3,
+                                                    7
+                                                ];
+                                                return [
+                                                    4,
+                                                    _this.ima.preloadAds(newAdUrl)
+                                                ];
+                                            case 6:
+                                                _state.sent();
+                                                _state.label = 7;
+                                            case 7:
+                                                hasPreloadedAd = (_this_ima_hasPreloadedAd1 = (_this_ima_hasPreloadedAd = (_this_ima = _this.ima).hasPreloadedAd) === null || _this_ima_hasPreloadedAd === void 0 ? void 0 : _this_ima_hasPreloadedAd.call(_this_ima, newAdUrl)) !== null && _this_ima_hasPreloadedAd1 !== void 0 ? _this_ima_hasPreloadedAd1 : false;
+                                                if (!!hasPreloadedAd) return [
+                                                    3,
+                                                    9
+                                                ];
+                                                _this.consecutiveEmptyResponses++;
+                                                _this.lastEmptyResponseTimeMs = Date.now();
+                                                backoffDelay = Math.min(_this.baseEmptyResponseDelayMs * Math.pow(2, _this.consecutiveEmptyResponses - 1), _this.maxEmptyResponseDelayMs);
+                                                if (_this.config.debugAdTiming) {
+                                                    console.log("[CONTINUOUS-FETCH] ⚠️ Empty/invalid VAST response (".concat(_this.consecutiveEmptyResponses, "/").concat(_this.maxConsecutiveEmptyResponses, " consecutive), backing off for ").concat(backoffDelay, "ms"));
+                                                }
+                                                _this.failedVastUrls.add(newAdUrl);
+                                                return [
+                                                    4,
+                                                    new Promise(function(resolve) {
+                                                        return setTimeout(resolve, backoffDelay);
+                                                    })
+                                                ];
+                                            case 8:
+                                                _state.sent();
+                                                return [
+                                                    2,
+                                                    "continue"
+                                                ];
+                                            case 9:
+                                                _this.consecutiveEmptyResponses = 0;
+                                                if (_this.config.debugAdTiming) {
+                                                    console.log("[CONTINUOUS-FETCH] ✅ Successfully preloaded ad, adding to queue (queue size: ".concat(_this.adRequestQueue.length + 1, ")"));
+                                                }
+                                                _this.adRequestQueue.push(newAdUrl);
+                                                _this.totalAdsInBreak++;
+                                                return [
+                                                    4,
+                                                    new Promise(function(resolve) {
+                                                        return setTimeout(resolve, 500);
+                                                    })
+                                                ];
+                                            case 10:
+                                                _state.sent();
+                                                return [
+                                                    3,
+                                                    13
+                                                ];
+                                            case 11:
+                                                error = _state.sent();
+                                                if (_this.config.debugAdTiming) {
+                                                    console.log("[CONTINUOUS-FETCH] \u274C Ad preload failed:", error.message);
+                                                }
+                                                _this.failedVastUrls.add(newAdUrl);
+                                                _this.consecutiveEmptyResponses++;
+                                                backoffDelay1 = Math.min(_this.baseEmptyResponseDelayMs * Math.pow(2, _this.consecutiveEmptyResponses - 1), _this.maxEmptyResponseDelayMs);
+                                                return [
+                                                    4,
+                                                    new Promise(function(resolve) {
+                                                        return setTimeout(resolve, backoffDelay1);
+                                                    })
+                                                ];
+                                            case 12:
+                                                _state.sent();
+                                                return [
+                                                    3,
+                                                    13
+                                                ];
+                                            case 13:
+                                                return [
+                                                    2
+                                                ];
+                                        }
+                                    });
+                                };
+                                _state.label = 1;
                             case 1:
-                                _state.sent();
-                                return [
-                                    3,
-                                    0
-                                ];
-                            case 2:
-                                newAdUrl = this.generateVastUrlsWithCorrelators(baseVastUrl, 1)[0];
-                                if (!(!newAdUrl || this.failedVastUrls.has(newAdUrl))) return [
+                                if (!(this.continuousFetchingActive && this.inAdBreak)) return [
                                     3,
-                                    4
+                                    3
                                 ];
+                                _this = this;
                                 return [
-                                    4,
-                                    new Promise(function(resolve) {
-                                        return setTimeout(resolve, 1e3);
-                                    })
-                                ];
-                            case 3:
-                                _state.sent();
-                                return [
-                                    3,
-                                    0
-                                ];
-                            case 4:
-                                if (this.config.debugAdTiming) {
-                                    console.log("[CONTINUOUS-FETCH] \uD83D\uDCE1 Attempting to fetch ad (".concat(this.successfulAdRequests.length + this.adRequestQueue.length + 1, " total)..."));
-                                }
-                                _state.label = 5;
-                            case 5:
-                                _state.trys.push([
                                     5,
-                                    11,
-                                    ,
-                                    13
-                                ]);
-                                return [
-                                    4,
-                                    fetch(newAdUrl, {
-                                        mode: "cors"
-                                    })
-                                ];
-                            case 6:
-                                response = _state.sent();
-                                if (!response.ok) {
-                                    throw new Error("Failed to fetch VAST: ".concat(response.status));
-                                }
-                                return [
-                                    4,
-                                    response.text()
-                                ];
-                            case 7:
-                                xmlText = _state.sent();
-                                parser = new DOMParser();
-                                xmlDoc = parser.parseFromString(xmlText, "text/xml");
-                                mediaFiles = xmlDoc.querySelectorAll("MediaFile");
-                                if (!(mediaFiles.length === 0)) return [
-                                    3,
-                                    9
-                                ];
-                                if (this.config.debugAdTiming) {
-                                    console.log("[CONTINUOUS-FETCH] \u26A0\uFE0F VAST response has no media files, skipping");
-                                }
-                                this.failedVastUrls.add(newAdUrl);
-                                return [
-                                    4,
-                                    new Promise(function(resolve) {
-                                        return setTimeout(resolve, 1e3);
-                                    })
+                                    _ts_values(_loop())
                                 ];
-                            case 8:
-                                _state.sent();
-                                return [
-                                    3,
-                                    0
-                                ];
-                            case 9:
-                                if (this.config.debugAdTiming) {
-                                    console.log("[CONTINUOUS-FETCH] ✅ Successfully fetched ad, adding to queue (queue size: ".concat(this.adRequestQueue.length + 1, ")"));
-                                }
-                                this.adRequestQueue.push(newAdUrl);
-                                this.totalAdsInBreak++;
-                                return [
-                                    4,
-                                    new Promise(function(resolve) {
-                                        return setTimeout(resolve, 500);
-                                    })
-                                ];
-                            case 10:
-                                _state.sent();
-                                return [
-                                    3,
-                                    13
-                                ];
-                            case 11:
-                                error = _state.sent();
-                                if (this.config.debugAdTiming) {
-                                    console.log("[CONTINUOUS-FETCH] \u274C Ad fetch failed:", error.message);
-                                }
-                                this.failedVastUrls.add(newAdUrl);
-                                return [
-                                    4,
-                                    new Promise(function(resolve) {
-                                        return setTimeout(resolve, 2e3);
-                                    })
-                                ];
-                            case 12:
-                                _state.sent();
-                                return [
+                            case 2:
+                                _ret = _state.sent();
+                                if (_ret === "break") return [
                                     3,
-                                    13
+                                    3
                                 ];
-                            case 13:
                                 return [
                                     3,
-                                    0
+                                    1
                                 ];
-                            case 14:
+                            case 3:
                                 if (this.config.debugAdTiming) {
-                                    console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Continuous fetch loop ended");
+                                    console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Continuous fetch loop ended (total requests: ".concat(this.totalAdRequestsInBreak, ", empty responses: ").concat(this.consecutiveEmptyResponses, ")"));
                                 }
                                 return [
                                     2
@@ -5957,11 +6121,17 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         if (!playerRef.current) return;
         var checkAdStatus = function() {
             if (playerRef.current) {
-                var showAds = playerRef.current.isShowingAds();
+                var _videoRef_current_dataset, _videoRef_current;
+                var showAdsFromMethod = playerRef.current.isShowingAds();
+                var showAdsFromAttribute = ((_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : (_videoRef_current_dataset = _videoRef_current.dataset) === null || _videoRef_current_dataset === void 0 ? void 0 : _videoRef_current_dataset.stormcloudAdPlaying) === "true";
+                var showAds = showAdsFromMethod || showAdsFromAttribute;
                 var currentIndex = playerRef.current.getCurrentAdIndex();
                 var totalAds = playerRef.current.getTotalAdsInBreak();
                 setAdStatus(function(prev) {
                     if (prev.showAds !== showAds || prev.currentIndex !== currentIndex || prev.totalAds !== totalAds) {
+                        if (showAds && !prev.showAds) {
+                            setShowCenterPlay(false);
+                        }
                         return {
                             showAds: showAds,
                             currentIndex: currentIndex,
@@ -5972,7 +6142,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 });
             }
         };
-        var interval = setInterval(checkAdStatus, 100);
+        var interval = setInterval(checkAdStatus, 50);
         return function() {
             return clearInterval(interval);
         };
@@ -6100,7 +6270,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
             }
         };
         var handlePause = function() {
-            if (playerRef.current && !playerRef.current.isShowingAds()) {
+            var _playerRef_current, _videoRef_current_dataset, _videoRef_current;
+            var isAdActive = ((_playerRef_current = playerRef.current) === null || _playerRef_current === void 0 ? void 0 : _playerRef_current.isShowingAds()) || ((_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : (_videoRef_current_dataset = _videoRef_current.dataset) === null || _videoRef_current_dataset === void 0 ? void 0 : _videoRef_current_dataset.stormcloudAdPlaying) === "true";
+            if (playerRef.current && !isAdActive) {
                 setShowCenterPlay(true);
             } else {
                 setShowCenterPlay(false);