stormcloud-video-player 0.2.20 → 0.2.22

package/lib/index.cjs

@@ -391,11 +391,12 @@ function createImaController(video, options) {
           container.style.top = "0";
           container.style.right = "0";
           container.style.bottom = "0";
-          container.style.display = "flex";
+          container.style.display = "none";
           container.style.alignItems = "center";
           container.style.justifyContent = "center";
           container.style.pointerEvents = "none";
-          container.style.zIndex = "2";
+          container.style.zIndex = "10";
+          container.style.backgroundColor = "#000";
           (_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
           adContainerEl = container;
           adDisplayContainer = new google.ima.AdDisplayContainer(
@@ -465,7 +466,8 @@ function createImaController(video, options) {
           container.style.alignItems = "center";
           container.style.justifyContent = "center";
           container.style.pointerEvents = "none";
-          container.style.zIndex = "2";
+          container.style.zIndex = "10";
+          container.style.backgroundColor = "#000";
           if (!video.parentElement) {
             throw new Error("Video element has no parent for ad container");
           }
@@ -563,7 +565,9 @@ function createImaController(video, options) {
                 adsManager.addEventListener(
                   AdEvent.CONTENT_PAUSE_REQUESTED,
                   () => {
-                    console.log("[IMA] Content pause requested");
+                    console.log(
+                      "[IMA] Content pause requested - FORCE MUTING main video"
+                    );
                     if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
                       video.pause();
                       console.log("[IMA] Video paused (VOD mode)");
@@ -573,14 +577,19 @@ function createImaController(video, options) {
                       );
                     }
                     video.muted = true;
+                    video.volume = 0;
                     adPlaying = true;
                     setAdPlayingFlag(true);
                     emit("content_pause");
                   }
                 );
                 adsManager.addEventListener(AdEvent.STARTED, () => {
-                  console.log("[IMA] Ad started playing");
+                  console.log(
+                    "[IMA] Ad started playing - FORCE MUTING main video"
+                  );
                   setAdPlayingFlag(true);
+                  video.muted = true;
+                  video.volume = 0;
                   if (adContainerEl) {
                     adContainerEl.style.pointerEvents = "auto";
                     adContainerEl.style.display = "flex";
@@ -596,63 +605,12 @@ function createImaController(video, options) {
                     adPlaying = false;
                     setAdPlayingFlag(false);
                     emit("content_resume");
-                    setTimeout(() => {
-                      var _a;
-                      const stillInAdPod = video.dataset.stormcloudAdPlaying === "true";
-                      if (stillInAdPod) {
-                        console.log(
-                          "[IMA] Next ad started - keeping content muted/paused and ad container visible"
-                        );
-                        if (adContainerEl) {
-                          adContainerEl.style.display = "flex";
-                          adContainerEl.style.pointerEvents = "auto";
-                        }
-                        return;
-                      }
-                      console.log("[IMA] No next ad - resuming content");
-                      video.muted = originalMutedState;
-                      if (adContainerEl) {
-                        adContainerEl.style.pointerEvents = "none";
-                        adContainerEl.style.display = "none";
-                        console.log(
-                          "[IMA] Ad container hidden - pointer events disabled"
-                        );
-                      }
-                      if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
-                        (_a = video.play()) == null ? void 0 : _a.catch(() => {
-                        });
-                        console.log("[IMA] Video resumed (VOD mode)");
-                      } else {
-                        console.log(
-                          "[IMA] Video unmuted (Live mode - was never paused)"
-                        );
-                      }
-                    }, 100);
                   }
                 );
                 adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
-                  console.log("[IMA] All ads completed");
+                  console.log("[IMA] All ads completed - notifying parent");
                   adPlaying = false;
-                  video.muted = originalMutedState;
                   setAdPlayingFlag(false);
-                  if (adContainerEl) {
-                    adContainerEl.style.pointerEvents = "none";
-                    adContainerEl.style.display = "none";
-                    console.log(
-                      "[IMA] Ad container hidden after all ads completed"
-                    );
-                  }
-                  if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
-                    video.play().catch(() => {
-                    });
-                    console.log(
-                      "[IMA] Video resumed after all ads completed (VOD mode)"
-                    );
-                  } else {
-                    console.log(
-                      "[IMA] Video unmuted after all ads completed (Live mode)"
-                    );
-                  }
                   emit("all_ads_completed");
                 });
                 console.log("[IMA] Ads manager event listeners attached");
@@ -775,8 +733,8 @@ function createImaController(video, options) {
     },
     async stop() {
       var _a;
+      console.log("[IMA] Stopping ad playback");
       adPlaying = false;
-      video.muted = originalMutedState;
       setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
@@ -788,13 +746,6 @@ function createImaController(video, options) {
       } catch {
       }
       destroyAdsManager();
-      if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
-        video.play().catch(() => {
-        });
-        console.log("[IMA] Video resumed after stop (VOD mode)");
-      } else {
-        console.log("[IMA] Video unmuted after stop (Live mode)");
-      }
     },
     destroy() {
       var _a;
@@ -1203,37 +1154,6 @@ function createHlsAdPlayer(contentVideo, options) {
     adPlaying = false;
     setAdPlayingFlag(false);
     emit("content_resume");
-    emit("all_ads_completed");
-    setTimeout(() => {
-      const stillInAdPod = contentVideo.dataset.stormcloudAdPlaying === "true";
-      if (stillInAdPod) {
-        console.log(
-          "[HlsAdPlayer] Next ad started - keeping content muted/paused and ad container visible"
-        );
-        if (adContainerEl) {
-          adContainerEl.style.display = "flex";
-          adContainerEl.style.pointerEvents = "auto";
-        }
-        return;
-      }
-      console.log("[HlsAdPlayer] No next ad - resuming content");
-      const previousMutedState = contentVideo.muted;
-      contentVideo.muted = originalMutedState;
-      console.log(
-        `[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
-      );
-      if (adContainerEl) {
-        adContainerEl.style.display = "none";
-        adContainerEl.style.pointerEvents = "none";
-      }
-      if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
-        contentVideo.play().catch(() => {
-        });
-        console.log("[HlsAdPlayer] Content resumed (VOD mode)");
-      } else {
-        console.log("[HlsAdPlayer] Content unmuted (Live mode)");
-      }
-    }, 100);
   }
   function handleAdError() {
     console.log("[HlsAdPlayer] Handling ad error");
@@ -1271,7 +1191,7 @@ function createHlsAdPlayer(contentVideo, options) {
         container.style.alignItems = "center";
         container.style.justifyContent = "center";
         container.style.pointerEvents = "none";
-        container.style.zIndex = "2";
+        container.style.zIndex = "10";
         container.style.backgroundColor = "#000";
         (_a = contentVideo.parentElement) == null ? void 0 : _a.appendChild(container);
         adContainerEl = container;
@@ -1345,7 +1265,9 @@ function createHlsAdPlayer(contentVideo, options) {
         } else {
           console.log("[HlsAdPlayer] Content continues (Live mode)");
         }
+        console.log("[HlsAdPlayer] FORCE MUTING main video");
         contentVideo.muted = true;
+        contentVideo.volume = 0;
         adPlaying = true;
         setAdPlayingFlag(true);
         if (adVideoElement) {
@@ -1409,7 +1331,6 @@ function createHlsAdPlayer(contentVideo, options) {
       console.log("[HlsAdPlayer] Stopping ad");
       adPlaying = false;
       setAdPlayingFlag(false);
-      contentVideo.muted = originalMutedState;
       if (adContainerEl) {
         adContainerEl.style.display = "none";
         adContainerEl.style.pointerEvents = "none";
@@ -1422,10 +1343,6 @@ function createHlsAdPlayer(contentVideo, options) {
         adVideoElement.pause();
         adVideoElement.src = "";
       }
-      if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
-        contentVideo.play().catch(() => {
-        });
-      }
       currentAd = void 0;
     },
     destroy() {
@@ -1971,7 +1888,6 @@ var StormcloudVideoPlayer = class {
     this.bufferedSegmentsCount = 0;
     this.shouldAutoplayAfterBuffering = false;
     this.hasInitialBufferCompleted = false;
-    this.isTransitioningBetweenAds = false;
     initializePolyfills();
     const browserOverrides = getBrowserConfigOverrides();
     this.config = { ...config, ...browserOverrides };
@@ -2235,9 +2151,12 @@ var StormcloudVideoPlayer = class {
     this.ima.on("all_ads_completed", () => {
       if (this.config.debugAdTiming) {
         console.log(
-          "[StormcloudVideoPlayer] IMA all_ads_completed event received"
+          "[StormcloudVideoPlayer] IMA all_ads_completed event received - ending ad break"
         );
       }
+      if (this.inAdBreak) {
+        this.handleAdPodComplete();
+      }
     });
     this.ima.on("ad_error", () => {
       if (this.config.debugAdTiming) {
@@ -2276,57 +2195,43 @@ var StormcloudVideoPlayer = class {
           "[StormcloudVideoPlayer] IMA content_resume event received",
           {
             inAdBreak: this.inAdBreak,
-            isTransitioningBetweenAds: this.isTransitioningBetweenAds,
             pendingAds: this.adPodQueue.length
           }
         );
       }
       this.clearAdFailsafeTimer();
-      if (this.isTransitioningBetweenAds) {
-        if (this.config.debugAdTiming) {
-          console.log(
-            "[StormcloudVideoPlayer] Transitioning between ads - keeping content muted/paused"
-          );
-        }
-        return;
-      }
       if (!this.inAdBreak) {
         if (this.config.debugAdTiming) {
           console.log(
-            "[StormcloudVideoPlayer] Not in ad break, allowing normal content resume"
+            "[StormcloudVideoPlayer] Not in ad break - this shouldn't happen during pod"
           );
         }
         return;
       }
       const remaining = this.getRemainingAdMs();
       if (remaining > 500 && this.adPodQueue.length > 0) {
-        this.isTransitioningBetweenAds = true;
-        this.video.muted = true;
-        if (!this.shouldContinueLiveStreamDuringAds()) {
-          this.video.pause();
-        }
         const next = this.adPodQueue.shift();
         this.currentAdIndex++;
         if (this.config.debugAdTiming) {
           console.log(
-            `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - keeping content muted/paused`
+            `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - main video stays muted, ad layer stays visible`
           );
         }
         this.playSingleAd(next).catch(() => {
-        }).finally(() => {
-          this.isTransitioningBetweenAds = false;
+          if (this.config.debugAdTiming) {
+            console.error(
+              "[StormcloudVideoPlayer] Failed to play next ad in pod"
+            );
+          }
+          this.handleAdPodComplete();
         });
       } else {
         if (this.config.debugAdTiming) {
-          console.log("[StormcloudVideoPlayer] Ad pod completed");
+          console.log(
+            "[StormcloudVideoPlayer] No more ads in pod - completing ad break"
+          );
         }
-        this.inAdBreak = false;
-        this.expectedAdBreakDurationMs = void 0;
-        this.currentAdBreakStartWallClockMs = void 0;
-        this.currentAdIndex = 0;
-        this.totalAdsInBreak = 0;
-        this.showAds = false;
-        this.clearAdStopTimer();
+        this.handleAdPodComplete();
       }
     });
     this.video.addEventListener("timeupdate", () => {
@@ -3044,23 +2949,11 @@ var StormcloudVideoPlayer = class {
         maxExtensionMs
       });
     }
-    this.inAdBreak = false;
-    this.expectedAdBreakDurationMs = void 0;
-    this.currentAdBreakStartWallClockMs = void 0;
-    this.showAds = false;
-    this.adPodQueue = [];
-    this.currentAdIndex = 0;
-    this.totalAdsInBreak = 0;
-    this.clearAdFailsafeTimer();
     if (adPlaying) {
       this.ima.stop().catch(() => {
       });
-      return;
-    }
-    const originalMutedState = this.ima.getOriginalMutedState();
-    if (this.video.muted !== originalMutedState) {
-      this.video.muted = originalMutedState;
     }
+    this.handleAdPodComplete();
   }
   scheduleAdStartIn(delayMs) {
     this.clearAdStartTimer();
@@ -3147,17 +3040,11 @@ var StormcloudVideoPlayer = class {
       this.handleAdFailure();
     }
   }
-  handleAdFailure() {
+  handleAdPodComplete() {
     var _a;
     if (this.config.debugAdTiming) {
       console.log(
-        "[StormcloudVideoPlayer] Handling ad failure - resuming content",
-        {
-          inAdBreak: this.inAdBreak,
-          showAds: this.showAds,
-          videoPaused: this.video.paused,
-          adPlaying: this.ima.isAdPlaying()
-        }
+        "[StormcloudVideoPlayer] Handling ad pod completion - resuming content and hiding ad layer"
       );
     }
     this.inAdBreak = false;
@@ -3170,34 +3057,44 @@ var StormcloudVideoPlayer = class {
     this.showAds = false;
     this.currentAdIndex = 0;
     this.totalAdsInBreak = 0;
-    const currentMutedState = this.video.muted;
+    this.ima.stop().catch(() => {
+    });
     const originalMutedState = this.ima.getOriginalMutedState();
     this.video.muted = originalMutedState;
+    this.video.volume = originalMutedState ? 0 : 1;
     if (this.config.debugAdTiming) {
       console.log(
-        `[StormcloudVideoPlayer] Restored mute state: ${currentMutedState} -> ${originalMutedState}`
+        `[StormcloudVideoPlayer] Restored main video - muted: ${originalMutedState}, volume: ${this.video.volume}`
       );
     }
-    if (this.video.paused) {
+    if (!this.shouldContinueLiveStreamDuringAds() && this.video.paused) {
       if (this.config.debugAdTiming) {
         console.log("[StormcloudVideoPlayer] Resuming paused video");
       }
       (_a = this.video.play()) == null ? void 0 : _a.catch((error) => {
         if (this.config.debugAdTiming) {
           console.error(
-            "[StormcloudVideoPlayer] Failed to resume video after ad failure:",
+            "[StormcloudVideoPlayer] Failed to resume video:",
             error
           );
         }
       });
-    } else {
-      if (this.config.debugAdTiming) {
-        console.log(
-          "[StormcloudVideoPlayer] Video is already playing, no resume needed"
-        );
-      }
     }
   }
+  handleAdFailure() {
+    if (this.config.debugAdTiming) {
+      console.log(
+        "[StormcloudVideoPlayer] Handling ad failure - resuming content",
+        {
+          inAdBreak: this.inAdBreak,
+          showAds: this.showAds,
+          videoPaused: this.video.paused,
+          adPlaying: this.ima.isAdPlaying()
+        }
+      );
+    }
+    this.handleAdPodComplete();
+  }
   startAdFailsafeTimer() {
     var _a;
     this.clearAdFailsafeTimer();