stormcloud-video-player 0.5.21 → 0.5.22

package/lib/index.d.cts

@@ -144,15 +144,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/index.d.ts

@@ -144,15 +144,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/index.js

@@ -3125,90 +3125,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;
                 }
             }
         },
@@ -3221,6 +3211,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() {
@@ -4140,7 +4131,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;
@@ -4242,7 +4237,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");
                 }
@@ -4433,13 +4427,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");
                                     }
@@ -4458,6 +4462,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);
@@ -4481,8 +4486,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
@@ -4549,6 +4555,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");
                                 }
@@ -4672,6 +4690,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) {
@@ -5080,16 +5100,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);