stormcloud-video-player 0.2.19 → 0.2.21

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -327,11 +327,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(
@@ -401,7 +402,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");
           }
@@ -528,53 +530,16 @@ function createImaController(video, options) {
                 adsManager.addEventListener(
                   AdEvent.CONTENT_RESUME_REQUESTED,
                   () => {
-                    var _a;
                     console.log("[IMA] Content resume requested");
                     adPlaying = false;
-                    video.muted = originalMutedState;
                     setAdPlayingFlag(false);
-                    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)"
-                      );
-                    }
                     emit("content_resume");
                   }
                 );
                 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");
@@ -697,8 +662,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";
@@ -710,13 +675,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;
@@ -1124,24 +1082,7 @@ function createHlsAdPlayer(contentVideo, options) {
     console.log("[HlsAdPlayer] Handling ad completion");
     adPlaying = false;
     setAdPlayingFlag(false);
-    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)");
-    }
     emit("content_resume");
-    emit("all_ads_completed");
   }
   function handleAdError() {
     console.log("[HlsAdPlayer] Handling ad error");
@@ -1179,7 +1120,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;
@@ -1317,7 +1258,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";
@@ -1330,10 +1270,6 @@ function createHlsAdPlayer(contentVideo, options) {
         adVideoElement.pause();
         adVideoElement.src = "";
       }
-      if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
-        contentVideo.play().catch(() => {
-        });
-      }
       currentAd = void 0;
     },
     destroy() {
@@ -2142,9 +2078,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) {
@@ -2180,29 +2119,46 @@ var StormcloudVideoPlayer = class {
     this.ima.on("content_resume", () => {
       if (this.config.debugAdTiming) {
         console.log(
-          "[StormcloudVideoPlayer] IMA content_resume event received"
+          "[StormcloudVideoPlayer] IMA content_resume event received",
+          {
+            inAdBreak: this.inAdBreak,
+            pendingAds: this.adPodQueue.length
+          }
         );
       }
       this.clearAdFailsafeTimer();
-      if (!this.inAdBreak) return;
+      if (!this.inAdBreak) {
+        if (this.config.debugAdTiming) {
+          console.log(
+            "[StormcloudVideoPlayer] Not in ad break - this shouldn't happen during pod"
+          );
+        }
+        return;
+      }
       const remaining = this.getRemainingAdMs();
       if (remaining > 500 && this.adPodQueue.length > 0) {
         const next = this.adPodQueue.shift();
         this.currentAdIndex++;
         if (this.config.debugAdTiming) {
           console.log(
-            `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak})`
+            `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - main video stays muted, ad layer stays visible`
           );
         }
         this.playSingleAd(next).catch(() => {
+          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.currentAdIndex = 0;
-        this.totalAdsInBreak = 0;
-        this.showAds = false;
+        this.handleAdPodComplete();
       }
     });
     this.video.addEventListener("timeupdate", () => {
@@ -2920,23 +2876,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();
@@ -3023,17 +2967,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"
       );
     }
     this.inAdBreak = false;
@@ -3046,34 +2984,41 @@ var StormcloudVideoPlayer = class {
     this.showAds = false;
     this.currentAdIndex = 0;
     this.totalAdsInBreak = 0;
-    const currentMutedState = this.video.muted;
     const originalMutedState = this.ima.getOriginalMutedState();
     this.video.muted = originalMutedState;
     if (this.config.debugAdTiming) {
       console.log(
-        `[StormcloudVideoPlayer] Restored mute state: ${currentMutedState} -> ${originalMutedState}`
+        `[StormcloudVideoPlayer] Restored main video mute state to: ${originalMutedState}`
       );
     }
-    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();