stormcloud-video-player 0.2.27 → 0.2.29

package/lib/index.cjs

@@ -265,11 +265,13 @@ function supportsFeature(feature) {
 // src/sdk/ima.ts
 function createImaController(video, options) {
   let adPlaying = false;
+  let contentVideoHidden = false;
   let originalMutedState = false;
   let originalVolume = typeof video.volume === "number" && !Number.isNaN(video.volume) ? Math.max(0, Math.min(1, video.volume)) : 1;
   const listeners = /* @__PURE__ */ new Map();
   const preloadedVast = /* @__PURE__ */ new Map();
   const preloadingVast = /* @__PURE__ */ new Map();
+  let adVideoElement;
   function setAdPlayingFlag(isPlaying) {
     if (isPlaying) {
       video.dataset.stormcloudAdPlaying = "true";
@@ -277,6 +279,53 @@ function createImaController(video, options) {
       delete video.dataset.stormcloudAdPlaying;
     }
   }
+  function hideContentVideo() {
+    if (!contentVideoHidden) {
+      video.style.visibility = "hidden";
+      video.muted = true;
+      video.volume = 0;
+      contentVideoHidden = true;
+      console.log("[IMA] Content video hidden and muted");
+    }
+  }
+  function showContentVideo() {
+    if (contentVideoHidden) {
+      video.style.visibility = "visible";
+      video.muted = originalMutedState;
+      video.volume = originalVolume;
+      contentVideoHidden = false;
+      console.log(
+        `[IMA] Content video restored (muted: ${originalMutedState}, volume: ${originalVolume})`
+      );
+    }
+  }
+  function createAdVideoElement() {
+    const adVideo = document.createElement("video");
+    adVideo.style.position = "absolute";
+    adVideo.style.top = "0";
+    adVideo.style.left = "0";
+    adVideo.style.width = "100%";
+    adVideo.style.height = "100%";
+    adVideo.style.objectFit = "contain";
+    adVideo.style.backgroundColor = "transparent";
+    adVideo.style.zIndex = "15";
+    adVideo.playsInline = true;
+    adVideo.muted = false;
+    adVideo.volume = originalMutedState ? 0 : originalVolume;
+    adVideo.style.opacity = "0";
+    adVideo.addEventListener(
+      "canplay",
+      () => {
+        adVideo.style.opacity = "1";
+        console.log("[IMA] Ad video ready to play");
+      },
+      { once: true }
+    );
+    console.log(
+      `[IMA] Created dedicated ad video element with volume: ${adVideo.volume}, muted: ${adVideo.muted}`
+    );
+    return adVideo;
+  }
   function emit(event, payload) {
     const set = listeners.get(event);
     if (!set) return;
@@ -435,6 +484,9 @@ function createImaController(video, options) {
       }
       adsManager = void 0;
     }
+    if (adVideoElement) {
+      adVideoElement.style.opacity = "0";
+    }
   }
   return {
     initialize() {
@@ -443,12 +495,22 @@ function createImaController(video, options) {
         const google = window.google;
         ensurePlaceholderContainer();
         if (!adDisplayContainer && adContainerEl) {
+          if (!adVideoElement) {
+            adVideoElement = createAdVideoElement();
+            adContainerEl.appendChild(adVideoElement);
+            console.log(
+              "[IMA] Dedicated ad video element added to container"
+            );
+          }
           adDisplayContainer = new google.ima.AdDisplayContainer(
             adContainerEl,
-            video
+            adVideoElement
           );
           try {
             (_a = adDisplayContainer.initialize) == null ? void 0 : _a.call(adDisplayContainer);
+            console.log(
+              "[IMA] AdDisplayContainer initialized with dedicated ad video"
+            );
           } catch {
           }
         }
@@ -517,13 +579,22 @@ function createImaController(video, options) {
           }
           video.parentElement.appendChild(container);
           adContainerEl = container;
+          if (!adVideoElement) {
+            adVideoElement = createAdVideoElement();
+            adContainerEl.appendChild(adVideoElement);
+            console.log(
+              "[IMA] Dedicated ad video element created and added to container"
+            );
+          }
           adDisplayContainer = new google.ima.AdDisplayContainer(
             container,
-            video
+            adVideoElement
           );
           try {
             adDisplayContainer.initialize();
-            console.log("[IMA] Ad display container initialized");
+            console.log(
+              "[IMA] Ad display container initialized with dedicated ad video"
+            );
           } catch (error) {
             console.warn(
               "[IMA] Failed to initialize ad display container:",
@@ -566,12 +637,8 @@ function createImaController(video, options) {
                     console.error("[IMA] Ad error:", errorEvent.getError());
                     destroyAdsManager();
                     adPlaying = false;
-                    const previousMutedState = video.muted;
-                    video.muted = originalMutedState;
+                    showContentVideo();
                     setAdPlayingFlag(false);
-                    console.log(
-                      `[IMA] Restored mute state after ad error: ${previousMutedState} -> ${originalMutedState}`
-                    );
                     if (adContainerEl) {
                       adContainerEl.style.pointerEvents = "none";
                       adContainerEl.style.display = "none";
@@ -613,37 +680,35 @@ function createImaController(video, options) {
                 adsManager.addEventListener(
                   AdEvent.CONTENT_PAUSE_REQUESTED,
                   () => {
-                    console.log(
-                      "[IMA] Content pause requested - FORCE MUTING main video"
-                    );
+                    console.log("[IMA] Content pause requested");
                     if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
                       video.pause();
-                      console.log("[IMA] Video paused (VOD mode)");
+                      console.log("[IMA] Content video paused (VOD mode)");
                     } else {
                       console.log(
-                        "[IMA] Video continues playing but muted (Live mode)"
+                        "[IMA] Content video continues in background (Live mode)"
                       );
                     }
-                    video.muted = true;
-                    video.volume = 0;
                     adPlaying = true;
                     setAdPlayingFlag(true);
                     emit("content_pause");
                   }
                 );
                 adsManager.addEventListener(AdEvent.STARTED, () => {
-                  console.log(
-                    "[IMA] Ad started playing - FORCE MUTING main video"
-                  );
+                  console.log("[IMA] Ad started - showing ad video");
                   setAdPlayingFlag(true);
-                  video.muted = true;
-                  video.volume = 0;
+                  hideContentVideo();
+                  if (adVideoElement) {
+                    adVideoElement.volume = originalMutedState ? 0 : originalVolume;
+                    adVideoElement.muted = originalMutedState;
+                    console.log(
+                      `[IMA] Ad video volume: ${adVideoElement.volume}, muted: ${adVideoElement.muted}`
+                    );
+                  }
                   if (adContainerEl) {
                     adContainerEl.style.pointerEvents = "auto";
                     adContainerEl.style.display = "flex";
-                    console.log(
-                      "[IMA] Ad container visibility set to flex with pointer events enabled"
-                    );
+                    console.log("[IMA] Ad container now visible");
                   }
                 });
                 adsManager.addEventListener(
@@ -652,17 +717,19 @@ function createImaController(video, options) {
                     console.log("[IMA] Content resume requested");
                     adPlaying = false;
                     setAdPlayingFlag(false);
+                    showContentVideo();
                     emit("content_resume");
                     setTimeout(() => {
                       const stillInPod = video.dataset.stormcloudAdPlaying === "true";
                       if (stillInPod) {
                         console.log(
-                          "[IMA] Still in ad pod - keeping ad container visible (black screen)"
+                          "[IMA] Still in ad pod - keeping ad container visible"
                         );
                         if (adContainerEl) {
                           adContainerEl.style.display = "flex";
                           adContainerEl.style.pointerEvents = "auto";
                         }
+                        hideContentVideo();
                       }
                     }, 50);
                   }
@@ -682,7 +749,7 @@ function createImaController(video, options) {
               } catch (e) {
                 console.error("[IMA] Error setting up ads manager:", e);
                 adPlaying = false;
-                video.muted = originalMutedState;
+                showContentVideo();
                 setAdPlayingFlag(false);
                 if (adContainerEl) {
                   adContainerEl.style.pointerEvents = "none";
@@ -713,12 +780,8 @@ function createImaController(video, options) {
             (adErrorEvent) => {
               console.error("[IMA] Ads loader error:", adErrorEvent.getError());
               adPlaying = false;
-              const previousMutedState = video.muted;
-              video.muted = originalMutedState;
+              showContentVideo();
               setAdPlayingFlag(false);
-              console.log(
-                `[IMA] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
-              );
               if (adContainerEl) {
                 adContainerEl.style.pointerEvents = "none";
                 adContainerEl.style.display = "none";
@@ -797,11 +860,18 @@ function createImaController(video, options) {
         adsManager.init(width, height, window.google.ima.ViewMode.NORMAL);
         adPlaying = true;
         const adVolume = originalMutedState ? 0 : originalVolume;
+        if (adVideoElement) {
+          adVideoElement.volume = adVolume;
+          adVideoElement.muted = originalMutedState;
+          console.log(
+            `[IMA] Set dedicated ad video volume to ${adVolume}, muted: ${originalMutedState}`
+          );
+        }
         try {
           adsManager.setVolume(adVolume);
-          console.log(`[IMA] Set ad volume to ${adVolume}`);
+          console.log(`[IMA] Set IMA manager volume to ${adVolume}`);
         } catch (error) {
-          console.warn("[IMA] Failed to set ad volume:", error);
+          console.warn("[IMA] Failed to set IMA manager volume:", error);
         }
         console.log("[IMA] Starting ad playback");
         adsManager.start();
@@ -822,6 +892,7 @@ function createImaController(video, options) {
       console.log("[IMA] Stopping ad playback");
       adPlaying = false;
       setAdPlayingFlag(false);
+      showContentVideo();
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
         adContainerEl.style.display = "none";
@@ -837,8 +908,7 @@ function createImaController(video, options) {
       var _a;
       destroyAdsManager();
       adPlaying = false;
-      video.muted = originalMutedState;
-      video.volume = originalVolume;
+      showContentVideo();
       setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
@@ -854,6 +924,8 @@ function createImaController(video, options) {
       adContainerEl = void 0;
       adDisplayContainer = void 0;
       adsLoader = void 0;
+      adVideoElement = void 0;
+      contentVideoHidden = false;
       preloadedVast.clear();
       preloadingVast.clear();
     },
@@ -898,15 +970,26 @@ function createImaController(video, options) {
       return originalVolume;
     },
     setAdVolume(volume) {
+      const clampedVolume = Math.max(0, Math.min(1, volume));
+      if (adVideoElement && adPlaying) {
+        adVideoElement.volume = clampedVolume;
+        adVideoElement.muted = clampedVolume === 0;
+        console.log(
+          `[IMA] Set dedicated ad video volume to ${clampedVolume}, muted: ${clampedVolume === 0}`
+        );
+      }
       if (adsManager && adPlaying) {
         try {
-          adsManager.setVolume(Math.max(0, Math.min(1, volume)));
+          adsManager.setVolume(clampedVolume);
         } catch (error) {
-          console.warn("[IMA] Failed to set ad volume:", error);
+          console.warn("[IMA] Failed to set IMA manager volume:", error);
         }
       }
     },
     getAdVolume() {
+      if (adVideoElement && adPlaying) {
+        return adVideoElement.volume;
+      }
       if (adsManager && adPlaying) {
         try {
           return adsManager.getVolume();
@@ -3523,11 +3606,6 @@ var StormcloudVideoPlayer = class {
       }
       return false;
     }
-    if (this.config.debugAdTiming) {
-      console.log(
-        `[StormcloudVideoPlayer] isMuted() no ad playing: video.muted=${this.video.muted}`
-      );
-    }
     return this.video.muted;
   }
   setMuted(muted) {