stormcloud-video-player 0.5.21 → 0.5.23

package/lib/player/StormcloudVideoPlayer.d.cts

@@ -50,15 +50,18 @@ declare class StormcloudVideoPlayer {
     private readonly backoffBaseMs;
     private readonly maxBackoffMs;
     private readonly adTransitionGapMs;
-    private placeholderContainer;
+    private fillerVideo;
+    private fillerBreakTimerId;
     constructor(config: StormcloudVideoPlayerConfig);
     private adRequest;
     load(): Promise<void>;
     private getAdSource;
     private attachAdLayerEventListeners;
-    private ensurePlaceholderContainer;
+    private ensureFillerVideo;
     private showPlaceholderLayer;
     private hidePlaceholderLayer;
+    private startFillerBreakTimer;
+    private stopFillerBreakTimer;
     private attach;
     private shouldUseNativeHls;
     private onId3Tag;

package/lib/players/HlsPlayer.cjs

@@ -918,6 +918,106 @@ function createEmptyTrackingState() {
         complete: false
     };
 }
+function firePixelWithRetry(url) {
+    var retries = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 2, delayMs = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 500, logPrefix = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "[VastParser]";
+    return _async_to_generator(function() {
+        var _loop, attempt, _ret;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _loop = function(attempt) {
+                        var unused;
+                        return _ts_generator(this, function(_state) {
+                            switch(_state.label){
+                                case 0:
+                                    _state.trys.push([
+                                        0,
+                                        2,
+                                        ,
+                                        6
+                                    ]);
+                                    return [
+                                        4,
+                                        fetch(url, {
+                                            method: "GET",
+                                            mode: "no-cors",
+                                            cache: "no-cache",
+                                            keepalive: true
+                                        })
+                                    ];
+                                case 1:
+                                    _state.sent();
+                                    return [
+                                        2,
+                                        {
+                                            v: void void 0
+                                        }
+                                    ];
+                                case 2:
+                                    unused = _state.sent();
+                                    if (!(attempt < retries)) return [
+                                        3,
+                                        4
+                                    ];
+                                    return [
+                                        4,
+                                        new Promise(function(r) {
+                                            return setTimeout(r, delayMs * Math.pow(2, attempt));
+                                        })
+                                    ];
+                                case 3:
+                                    _state.sent();
+                                    return [
+                                        3,
+                                        5
+                                    ];
+                                case 4:
+                                    console.warn("".concat(logPrefix, " Tracking pixel failed after ").concat(retries + 1, " attempts: ").concat(url));
+                                    _state.label = 5;
+                                case 5:
+                                    return [
+                                        3,
+                                        6
+                                    ];
+                                case 6:
+                                    return [
+                                        2
+                                    ];
+                            }
+                        });
+                    };
+                    attempt = 0;
+                    _state.label = 1;
+                case 1:
+                    if (!(attempt <= retries)) return [
+                        3,
+                        4
+                    ];
+                    return [
+                        5,
+                        _ts_values(_loop(attempt))
+                    ];
+                case 2:
+                    _ret = _state.sent();
+                    if (_type_of(_ret) === "object") return [
+                        2,
+                        _ret.v
+                    ];
+                    _state.label = 3;
+                case 3:
+                    attempt++;
+                    return [
+                        3,
+                        1
+                    ];
+                case 4:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
 function fireTrackingPixels(urls, sessionId) {
     var logPrefix = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "[VastParser]";
     if (!urls || urls.length === 0) return;
@@ -927,9 +1027,13 @@ function fireTrackingPixels(urls, sessionId) {
             if (sessionId) {
                 trackingUrl = "".concat(trackingUrl).concat(trackingUrl.includes("?") ? "&" : "?", "session_id=").concat(sessionId);
             }
-            var img = new Image(1, 1);
-            img.onerror = function() {};
-            img.src = trackingUrl;
+            if (typeof fetch !== "undefined") {
+                firePixelWithRetry(trackingUrl, 2, 500, logPrefix).catch(function() {});
+            } else {
+                var img = new Image(1, 1);
+                img.onerror = function() {};
+                img.src = trackingUrl;
+            }
             console.log("".concat(logPrefix, " Fired tracking pixel: ").concat(trackingUrl));
         } catch (error) {
             console.warn("".concat(logPrefix, " Error firing tracking pixel:"), error);
@@ -3070,13 +3174,11 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         }
                     }
                     _this.adLayer.setAdVolume(_this.adLayer.getOriginalMutedState() ? 1 : _this.adLayer.getOriginalVolume());
-                    if (_this.isShowingPlaceholder) {
-                        if (_this.config.debugAdTiming) {
-                            console.log("[StormcloudVideoPlayer] Hiding placeholder - new ads starting");
-                        }
-                        _this.hidePlaceholderLayer();
-                        _this.adLayer.hidePlaceholder();
-                        _this.isShowingPlaceholder = false;
+                    _this.stopFillerBreakTimer();
+                    _this.hidePlaceholderLayer();
+                    _this.isShowingPlaceholder = false;
+                    if (_this.config.debugAdTiming) {
+                        console.log("[StormcloudVideoPlayer] Hiding placeholder - new ads starting");
                     }
                 });
                 this.adLayer.on("content_resume", function() {
@@ -3127,90 +3229,80 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             }
         },
         {
-            key: "ensurePlaceholderContainer",
-            value: function ensurePlaceholderContainer() {
-                if (this.placeholderContainer) {
-                    return;
-                }
-                var container = document.createElement("div");
-                container.style.position = "absolute";
-                container.style.left = "0";
-                container.style.top = "0";
-                container.style.right = "0";
-                container.style.bottom = "0";
-                container.style.display = "none";
-                container.style.alignItems = "center";
-                container.style.justifyContent = "center";
-                container.style.pointerEvents = "none";
-                container.style.zIndex = "5";
-                container.style.backgroundColor = "#000";
-                container.style.transition = "opacity 0.3s ease-in-out";
-                container.style.opacity = "0";
-                if (!this.video.parentElement) {
-                    if (this.config.debugAdTiming) {
-                        console.warn("[StormcloudVideoPlayer] Video element has no parent for placeholder container");
-                    }
-                    return;
-                }
-                this.video.parentElement.appendChild(container);
-                this.placeholderContainer = container;
+            key: "ensureFillerVideo",
+            value: function ensureFillerVideo() {
+                if (this.fillerVideo) return;
+                if (!this.video.parentElement) return;
+                var filler = document.createElement("video");
+                filler.src = "https://f000.backblazeb2.com/file/AdStormAds/384/Sonifi_Filler.mp4";
+                filler.loop = true;
+                filler.muted = false;
+                filler.playsInline = true;
+                filler.style.position = "absolute";
+                filler.style.left = "0";
+                filler.style.top = "0";
+                filler.style.width = "100%";
+                filler.style.height = "100%";
+                filler.style.objectFit = "cover";
+                filler.style.zIndex = "20";
+                filler.style.display = "none";
+                filler.preload = "auto";
+                this.video.parentElement.appendChild(filler);
+                this.fillerVideo = filler;
             }
         },
         {
             key: "showPlaceholderLayer",
             value: function showPlaceholderLayer() {
                 var _this = this;
-                this.ensurePlaceholderContainer();
-                if (!this.placeholderContainer) {
-                    return;
-                }
+                this.ensureFillerVideo();
+                if (!this.fillerVideo) return;
                 if (!this.video.muted) {
                     this.video.muted = true;
                     this.video.volume = 0;
-                    if (this.config.debugAdTiming) {
-                        console.log("[StormcloudVideoPlayer] Muted video when showing placeholder");
-                    }
-                }
-                var wasHidden = this.placeholderContainer.style.display === "none" || this.placeholderContainer.style.opacity === "0";
-                if (wasHidden) {
-                    this.placeholderContainer.style.transition = "none";
-                } else {
-                    this.placeholderContainer.style.transition = "opacity 0.3s ease-in-out";
-                }
-                this.placeholderContainer.style.backgroundColor = "#000";
-                this.placeholderContainer.style.display = "flex";
-                this.placeholderContainer.offsetHeight;
-                this.placeholderContainer.style.opacity = "1";
-                this.placeholderContainer.style.pointerEvents = "auto";
-                if (wasHidden) {
-                    requestAnimationFrame(function() {
-                        if (_this.placeholderContainer) {
-                            _this.placeholderContainer.style.transition = "opacity 0.3s ease-in-out";
-                        }
-                    });
                 }
+                this.fillerVideo.style.display = "block";
+                this.fillerVideo.play().catch(function() {
+                    if (_this.fillerVideo) {
+                        _this.fillerVideo.style.display = "none";
+                    }
+                });
                 if (this.config.debugAdTiming) {
-                    console.log("[StormcloudVideoPlayer] Showing placeholder layer");
+                    console.log("[StormcloudVideoPlayer] Showing filler video layer");
                 }
             }
         },
         {
             key: "hidePlaceholderLayer",
             value: function hidePlaceholderLayer() {
-                var _this = this;
-                if (!this.placeholderContainer) {
-                    return;
-                }
-                this.placeholderContainer.style.opacity = "0";
-                setTimeout(function() {
-                    if (_this.placeholderContainer) {
-                        _this.placeholderContainer.style.display = "none";
-                        _this.placeholderContainer.style.pointerEvents = "none";
-                        _this.placeholderContainer.style.backgroundColor = "#000";
-                    }
-                }, 300);
+                if (!this.fillerVideo) return;
+                this.fillerVideo.style.display = "none";
+                this.fillerVideo.pause();
+                this.fillerVideo.currentTime = 0;
                 if (this.config.debugAdTiming) {
-                    console.log("[StormcloudVideoPlayer] Hiding placeholder layer");
+                    console.log("[StormcloudVideoPlayer] Hiding filler video layer");
+                }
+            }
+        },
+        {
+            key: "startFillerBreakTimer",
+            value: function startFillerBreakTimer(durationMs) {
+                var _this = this;
+                this.stopFillerBreakTimer();
+                this.showPlaceholderLayer();
+                this.fillerBreakTimerId = setTimeout(function() {
+                    _this.fillerBreakTimerId = void 0;
+                    _this.hidePlaceholderLayer();
+                    if (_this.inAdBreak) _this.handleAdPodComplete();
+                }, durationMs);
+            }
+        },
+        {
+            key: "stopFillerBreakTimer",
+            value: function stopFillerBreakTimer() {
+                if (this.fillerBreakTimerId !== void 0) {
+                    clearTimeout(this.fillerBreakTimerId);
+                    this.fillerBreakTimerId = void 0;
                 }
             }
         },
@@ -3223,6 +3315,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 this.video.autoplay = !!this.config.autoplay;
                 this.video.muted = !!this.config.muted;
                 this.adLayer.initialize();
+                this.ensureFillerVideo();
                 this.adLayer.updateOriginalMutedState(this.video.muted, this.video.volume);
                 this.attachAdLayerEventListeners();
                 this.timeUpdateHandler = function() {
@@ -4142,7 +4235,11 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 this.totalAdsInBreak = 1;
                                 this.adPodQueue = [];
                                 this.showAds = true;
-                                this.showPlaceholderLayer();
+                                if (adBreakDurationMs != null) {
+                                    this.startFillerBreakTimer(adBreakDurationMs);
+                                } else {
+                                    this.showPlaceholderLayer();
+                                }
                                 this.adLayer.showPlaceholder();
                                 if (this.expectedAdBreakDurationMs == null && adBreakDurationMs != null) {
                                     this.expectedAdBreakDurationMs = adBreakDurationMs;
@@ -4244,7 +4341,6 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "stopContinuousFetching",
             value: function stopContinuousFetching() {
                 this.continuousFetchingActive = false;
-                this.hidePlaceholderLayer();
                 if (this.config.debugAdTiming) {
                     console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Stopping continuous ad fetching");
                 }
@@ -4435,13 +4531,23 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "showPlaceholderAndWaitForAds",
             value: function showPlaceholderAndWaitForAds() {
                 return _async_to_generator(function() {
-                    var remaining, waitTime, checkInterval, maxChecks, i, bids, unused;
+                    var remaining, waitTime, stillRemaining2, checkInterval, maxChecks, i, bids, unused, stillRemaining;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
                                 remaining = this.getRemainingAdMs();
                                 waitTime = Math.min(this.maxPlaceholderDurationMs, remaining);
                                 if (this.consecutiveFailures >= this.maxConsecutiveFailures) {
+                                    stillRemaining2 = this.getRemainingAdMs();
+                                    if (stillRemaining2 >= 1e3) {
+                                        if (this.config.debugAdTiming) {
+                                            console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Max failures reached but break still active — resetting and continuing filler");
+                                        }
+                                        this.consecutiveFailures = 0;
+                                        return [
+                                            2
+                                        ];
+                                    }
                                     if (this.config.debugAdTiming) {
                                         console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Skipping placeholder - too many consecutive failures");
                                     }
@@ -4460,6 +4566,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     console.log("[CONTINUOUS-FETCH] ⬛ Showing placeholder for ".concat(waitTime, "ms while waiting for ad response"));
                                 }
                                 this.isShowingPlaceholder = true;
+                                this.showPlaceholderLayer();
                                 this.adLayer.showPlaceholder();
                                 checkInterval = 300;
                                 maxChecks = Math.floor(waitTime / checkInterval);
@@ -4483,8 +4590,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                                 if (this.consecutiveFailures >= this.maxConsecutiveFailures) {
                                     if (this.config.debugAdTiming) {
-                                        console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Too many failures during placeholder wait");
+                                        console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Too many failures during placeholder wait — resetting and continuing filler");
                                     }
+                                    this.consecutiveFailures = 0;
                                     return [
                                         3,
                                         10
@@ -4551,6 +4659,18 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     1
                                 ];
                             case 10:
+                                stillRemaining = this.getRemainingAdMs();
+                                if (stillRemaining >= 1e3) {
+                                    if (this.config.debugAdTiming) {
+                                        console.log("[CONTINUOUS-FETCH] ⏰ Placeholder slot expired, ".concat(stillRemaining, "ms still remaining — continuing filler"));
+                                    }
+                                    this.isShowingPlaceholder = false;
+                                    this.adLayer.hidePlaceholder();
+                                    this.consecutiveFailures = 0;
+                                    return [
+                                        2
+                                    ];
+                                }
                                 if (this.config.debugAdTiming) {
                                     console.log("[CONTINUOUS-FETCH] \u23F0 Placeholder timeout, ending ad break");
                                 }
@@ -4674,6 +4794,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 this.activeAdRequestToken = null;
                 this.isInAdTransition = false;
                 this.stopContinuousFetching();
+                this.stopFillerBreakTimer();
+                this.hidePlaceholderLayer();
                 this.clearPendingAdBreak();
                 this.pendingNextAdBids = null;
                 if (this.isShowingPlaceholder) {
@@ -5082,16 +5204,18 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             value: function destroy() {
                 var _this_hls, _this_adLayer;
                 this.stopContinuousFetching();
+                this.stopFillerBreakTimer();
                 this.clearAdStartTimer();
                 this.clearAdStopTimer();
                 this.clearAdFailsafeTimer();
                 this.clearAdRequestWatchdog();
                 this.clearPendingAdBreak();
-                if (this.placeholderContainer) {
-                    if (this.placeholderContainer.parentElement) {
-                        this.placeholderContainer.parentElement.removeChild(this.placeholderContainer);
+                if (this.fillerVideo) {
+                    this.fillerVideo.pause();
+                    if (this.fillerVideo.parentElement) {
+                        this.fillerVideo.parentElement.removeChild(this.fillerVideo);
                     }
-                    this.placeholderContainer = void 0;
+                    this.fillerVideo = void 0;
                 }
                 if (this.timeUpdateHandler) {
                     this.video.removeEventListener("timeupdate", this.timeUpdateHandler);