stormcloud-video-player 0.2.28 → 0.2.29

package/lib/player/StormcloudVideoPlayer.cjs

@@ -198,6 +198,7 @@ function getBrowserConfigOverrides() {
 // 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();
@@ -211,6 +212,26 @@ 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";
@@ -219,11 +240,20 @@ function createImaController(video, options) {
     adVideo.style.width = "100%";
     adVideo.style.height = "100%";
     adVideo.style.objectFit = "contain";
-    adVideo.style.backgroundColor = "#000";
+    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}`
     );
@@ -387,6 +417,9 @@ function createImaController(video, options) {
       }
       adsManager = void 0;
     }
+    if (adVideoElement) {
+      adVideoElement.style.opacity = "0";
+    }
   }
   return {
     initialize() {
@@ -537,11 +570,8 @@ function createImaController(video, options) {
                     console.error("[IMA] Ad error:", errorEvent.getError());
                     destroyAdsManager();
                     adPlaying = false;
-                    video.style.visibility = "visible";
+                    showContentVideo();
                     setAdPlayingFlag(false);
-                    console.log(
-                      "[IMA] Restored main video visibility after ad error"
-                    );
                     if (adContainerEl) {
                       adContainerEl.style.pointerEvents = "none";
                       adContainerEl.style.display = "none";
@@ -583,29 +613,24 @@ function createImaController(video, options) {
                 adsManager.addEventListener(
                   AdEvent.CONTENT_PAUSE_REQUESTED,
                   () => {
-                    console.log(
-                      "[IMA] Content pause requested - hiding main video, showing ad video"
-                    );
+                    console.log("[IMA] Content pause requested");
                     if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
                       video.pause();
                       console.log("[IMA] Content video paused (VOD mode)");
                     } else {
                       console.log(
-                        "[IMA] Content video continues playing in background (Live mode)"
+                        "[IMA] Content video continues in background (Live mode)"
                       );
                     }
-                    video.style.visibility = "hidden";
                     adPlaying = true;
                     setAdPlayingFlag(true);
                     emit("content_pause");
                   }
                 );
                 adsManager.addEventListener(AdEvent.STARTED, () => {
-                  console.log(
-                    "[IMA] Ad started playing - showing dedicated ad video"
-                  );
+                  console.log("[IMA] Ad started - showing ad video");
                   setAdPlayingFlag(true);
-                  video.style.visibility = "hidden";
+                  hideContentVideo();
                   if (adVideoElement) {
                     adVideoElement.volume = originalMutedState ? 0 : originalVolume;
                     adVideoElement.muted = originalMutedState;
@@ -616,32 +641,28 @@ function createImaController(video, options) {
                   if (adContainerEl) {
                     adContainerEl.style.pointerEvents = "auto";
                     adContainerEl.style.display = "flex";
-                    console.log(
-                      "[IMA] Ad container visible with dedicated ad video"
-                    );
+                    console.log("[IMA] Ad container now visible");
                   }
                 });
                 adsManager.addEventListener(
                   AdEvent.CONTENT_RESUME_REQUESTED,
                   () => {
-                    console.log(
-                      "[IMA] Content resume requested - showing main video"
-                    );
+                    console.log("[IMA] Content resume requested");
                     adPlaying = false;
                     setAdPlayingFlag(false);
-                    video.style.visibility = "visible";
+                    showContentVideo();
                     emit("content_resume");
                     setTimeout(() => {
                       const stillInPod = video.dataset.stormcloudAdPlaying === "true";
                       if (stillInPod) {
                         console.log(
-                          "[IMA] Still in ad pod - keeping ad video visible"
+                          "[IMA] Still in ad pod - keeping ad container visible"
                         );
                         if (adContainerEl) {
                           adContainerEl.style.display = "flex";
                           adContainerEl.style.pointerEvents = "auto";
                         }
-                        video.style.visibility = "hidden";
+                        hideContentVideo();
                       }
                     }, 50);
                   }
@@ -661,7 +682,7 @@ function createImaController(video, options) {
               } catch (e) {
                 console.error("[IMA] Error setting up ads manager:", e);
                 adPlaying = false;
-                video.style.visibility = "visible";
+                showContentVideo();
                 setAdPlayingFlag(false);
                 if (adContainerEl) {
                   adContainerEl.style.pointerEvents = "none";
@@ -692,11 +713,8 @@ function createImaController(video, options) {
             (adErrorEvent) => {
               console.error("[IMA] Ads loader error:", adErrorEvent.getError());
               adPlaying = false;
-              video.style.visibility = "visible";
+              showContentVideo();
               setAdPlayingFlag(false);
-              console.log(
-                "[IMA] Restored main video visibility after loader error"
-              );
               if (adContainerEl) {
                 adContainerEl.style.pointerEvents = "none";
                 adContainerEl.style.display = "none";
@@ -807,7 +825,7 @@ function createImaController(video, options) {
       console.log("[IMA] Stopping ad playback");
       adPlaying = false;
       setAdPlayingFlag(false);
-      video.style.visibility = "visible";
+      showContentVideo();
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
         adContainerEl.style.display = "none";
@@ -823,7 +841,7 @@ function createImaController(video, options) {
       var _a;
       destroyAdsManager();
       adPlaying = false;
-      video.style.visibility = "visible";
+      showContentVideo();
       setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
@@ -840,6 +858,7 @@ function createImaController(video, options) {
       adDisplayContainer = void 0;
       adsLoader = void 0;
       adVideoElement = void 0;
+      contentVideoHidden = false;
       preloadedVast.clear();
       preloadingVast.clear();
     },