stormcloud-video-player 0.2.26 → 0.2.28

package/lib/index.d.cts

@@ -181,6 +181,7 @@ declare class StormcloudVideoPlayer {
     toggleFullscreen(): Promise<void>;
     isMuted(): boolean;
     setMuted(muted: boolean): void;
+    setVolume(volume: number): void;
     isFullscreen(): boolean;
     isLive(): boolean;
     get videoElement(): HTMLVideoElement;

package/lib/index.d.ts

@@ -181,6 +181,7 @@ declare class StormcloudVideoPlayer {
     toggleFullscreen(): Promise<void>;
     isMuted(): boolean;
     setMuted(muted: boolean): void;
+    setVolume(volume: number): void;
     isFullscreen(): boolean;
     isLive(): boolean;
     get videoElement(): HTMLVideoElement;

package/lib/index.js

@@ -201,6 +201,7 @@ function createImaController(video, options) {
   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";
@@ -208,6 +209,24 @@ function createImaController(video, options) {
       delete video.dataset.stormcloudAdPlaying;
     }
   }
+  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 = "#000";
+    adVideo.style.zIndex = "15";
+    adVideo.playsInline = true;
+    adVideo.muted = false;
+    adVideo.volume = originalMutedState ? 0 : originalVolume;
+    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;
@@ -374,12 +393,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 {
           }
         }
@@ -448,13 +477,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:",
@@ -497,11 +535,10 @@ function createImaController(video, options) {
                     console.error("[IMA] Ad error:", errorEvent.getError());
                     destroyAdsManager();
                     adPlaying = false;
-                    const previousMutedState = video.muted;
-                    video.muted = originalMutedState;
+                    video.style.visibility = "visible";
                     setAdPlayingFlag(false);
                     console.log(
-                      `[IMA] Restored mute state after ad error: ${previousMutedState} -> ${originalMutedState}`
+                      "[IMA] Restored main video visibility after ad error"
                     );
                     if (adContainerEl) {
                       adContainerEl.style.pointerEvents = "none";
@@ -545,18 +582,17 @@ function createImaController(video, options) {
                   AdEvent.CONTENT_PAUSE_REQUESTED,
                   () => {
                     console.log(
-                      "[IMA] Content pause requested - FORCE MUTING main video"
+                      "[IMA] Content pause requested - hiding main video, showing ad video"
                     );
                     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 playing in background (Live mode)"
                       );
                     }
-                    video.muted = true;
-                    video.volume = 0;
+                    video.style.visibility = "hidden";
                     adPlaying = true;
                     setAdPlayingFlag(true);
                     emit("content_pause");
@@ -564,36 +600,46 @@ function createImaController(video, options) {
                 );
                 adsManager.addEventListener(AdEvent.STARTED, () => {
                   console.log(
-                    "[IMA] Ad started playing - FORCE MUTING main video"
+                    "[IMA] Ad started playing - showing dedicated ad video"
                   );
                   setAdPlayingFlag(true);
-                  video.muted = true;
-                  video.volume = 0;
+                  video.style.visibility = "hidden";
+                  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"
+                      "[IMA] Ad container visible with dedicated ad video"
                     );
                   }
                 });
                 adsManager.addEventListener(
                   AdEvent.CONTENT_RESUME_REQUESTED,
                   () => {
-                    console.log("[IMA] Content resume requested");
+                    console.log(
+                      "[IMA] Content resume requested - showing main video"
+                    );
                     adPlaying = false;
                     setAdPlayingFlag(false);
+                    video.style.visibility = "visible";
                     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 video visible"
                         );
                         if (adContainerEl) {
                           adContainerEl.style.display = "flex";
                           adContainerEl.style.pointerEvents = "auto";
                         }
+                        video.style.visibility = "hidden";
                       }
                     }, 50);
                   }
@@ -613,7 +659,7 @@ function createImaController(video, options) {
               } catch (e) {
                 console.error("[IMA] Error setting up ads manager:", e);
                 adPlaying = false;
-                video.muted = originalMutedState;
+                video.style.visibility = "visible";
                 setAdPlayingFlag(false);
                 if (adContainerEl) {
                   adContainerEl.style.pointerEvents = "none";
@@ -644,11 +690,10 @@ function createImaController(video, options) {
             (adErrorEvent) => {
               console.error("[IMA] Ads loader error:", adErrorEvent.getError());
               adPlaying = false;
-              const previousMutedState = video.muted;
-              video.muted = originalMutedState;
+              video.style.visibility = "visible";
               setAdPlayingFlag(false);
               console.log(
-                `[IMA] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
+                "[IMA] Restored main video visibility after loader error"
               );
               if (adContainerEl) {
                 adContainerEl.style.pointerEvents = "none";
@@ -728,11 +773,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();
@@ -753,6 +805,7 @@ function createImaController(video, options) {
       console.log("[IMA] Stopping ad playback");
       adPlaying = false;
       setAdPlayingFlag(false);
+      video.style.visibility = "visible";
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
         adContainerEl.style.display = "none";
@@ -768,8 +821,7 @@ function createImaController(video, options) {
       var _a;
       destroyAdsManager();
       adPlaying = false;
-      video.muted = originalMutedState;
-      video.volume = originalVolume;
+      video.style.visibility = "visible";
       setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
@@ -785,6 +837,7 @@ function createImaController(video, options) {
       adContainerEl = void 0;
       adDisplayContainer = void 0;
       adsLoader = void 0;
+      adVideoElement = void 0;
       preloadedVast.clear();
       preloadingVast.clear();
     },
@@ -829,15 +882,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();
@@ -3454,11 +3518,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) {
@@ -3488,6 +3547,26 @@ var StormcloudVideoPlayer = class {
       console.log("[StormcloudVideoPlayer] setMuted called:", muted);
     }
   }
+  setVolume(volume) {
+    const clampedVolume = Math.max(0, Math.min(1, volume));
+    const adPlaying = this.ima.isAdPlaying();
+    if (adPlaying) {
+      this.ima.setAdVolume(clampedVolume);
+      this.ima.updateOriginalMutedState(clampedVolume === 0, clampedVolume);
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] setVolume applied during ad", {
+          volume: clampedVolume
+        });
+      }
+    } else {
+      this.video.volume = clampedVolume;
+      this.video.muted = clampedVolume === 0;
+      this.ima.updateOriginalMutedState(clampedVolume === 0, clampedVolume);
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] setVolume called:", clampedVolume);
+      }
+    }
+  }
   isFullscreen() {
     return !!document.fullscreenElement;
   }
@@ -3668,10 +3747,9 @@ var StormcloudVideoPlayerComponent = React.memo(
       }
     };
     const handleVolumeChange = (newVolume) => {
-      if (videoRef.current && isFinite(newVolume)) {
+      if (playerRef.current && isFinite(newVolume)) {
         const clampedVolume = Math.max(0, Math.min(1, newVolume));
-        videoRef.current.volume = clampedVolume;
-        videoRef.current.muted = clampedVolume === 0;
+        playerRef.current.setVolume(clampedVolume);
       }
     };
     const handlePlaybackRateChange = (rate) => {
@@ -3773,7 +3851,7 @@ var StormcloudVideoPlayerComponent = React.memo(
         if (autoplay !== void 0 && playerRef.current.videoElement) {
           playerRef.current.videoElement.autoplay = autoplay;
         }
-        if (muted !== void 0) {
+        if (muted !== void 0 && !playerRef.current.isShowingAds()) {
           playerRef.current.setMuted(muted);
         }
       } catch (error) {