stormcloud-video-player 0.2.8 → 0.2.10

package/lib/players/index.cjs

@@ -115,9 +115,22 @@ function createImaController(video, options) {
       'script[data-ima="true"]'
     );
     if (existing) {
-      return new Promise(
-        (resolve) => existing.addEventListener("load", () => resolve())
-      );
+      if (window.google?.ima) {
+        return Promise.resolve();
+      }
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          reject(new Error("IMA SDK load timeout"));
+        }, 1e4);
+        existing.addEventListener("load", () => {
+          clearTimeout(timeout);
+          resolve();
+        });
+        existing.addEventListener("error", () => {
+          clearTimeout(timeout);
+          reject(new Error("IMA SDK load failed"));
+        });
+      });
     }
     return new Promise((resolve, reject) => {
       const script = document.createElement("script");
@@ -146,6 +159,17 @@ function createImaController(video, options) {
     adsRequest.adTagUrl = vastTagUrl;
     adsLoader.requestAds(adsRequest);
   }
+  function destroyAdsManager() {
+    if (adsManager) {
+      try {
+        console.log("[IMA] Destroying existing ads manager");
+        adsManager.destroy();
+      } catch (error) {
+        console.warn("[IMA] Error destroying ads manager:", error);
+      }
+      adsManager = void 0;
+    }
+  }
   return {
     initialize() {
       ensureImaLoaded().then(() => {
@@ -178,9 +202,22 @@ function createImaController(video, options) {
     },
     async requestAds(vastTagUrl) {
       console.log("[IMA] Requesting ads:", vastTagUrl);
+      if (adPlaying) {
+        console.warn(
+          "[IMA] Cannot request new ads while an ad is playing. Call stop() first."
+        );
+        return Promise.reject(
+          new Error("Ad already playing - cannot request new ads")
+        );
+      }
+      destroyAdsManager();
+      adsLoadedReject = void 0;
+      adsLoadedResolve = void 0;
+      let currentReject;
       adsLoadedPromise = new Promise((resolve, reject) => {
         adsLoadedResolve = resolve;
         adsLoadedReject = reject;
+        currentReject = reject;
         setTimeout(() => {
           if (adsLoadedReject) {
             adsLoadedReject(new Error("Ad request timeout"));
@@ -202,7 +239,7 @@ 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";
@@ -242,14 +279,14 @@ function createImaController(video, options) {
                   AdErrorEvent.AD_ERROR,
                   (errorEvent) => {
                     console.error("[IMA] Ad error:", errorEvent.getError());
-                    try {
-                      adsManager?.destroy?.();
-                    } catch {
-                    }
+                    destroyAdsManager();
                     adPlaying = false;
                     video.muted = originalMutedState;
-                    if (adContainerEl)
+                    if (adContainerEl) {
                       adContainerEl.style.pointerEvents = "none";
+                      adContainerEl.style.display = "none";
+                      console.log("[IMA] Ad container hidden after error");
+                    }
                     if (adsLoadedReject) {
                       adsLoadedReject(new Error("Ad playback error"));
                       adsLoadedReject = void 0;
@@ -282,8 +319,6 @@ function createImaController(video, options) {
                   AdEvent.CONTENT_PAUSE_REQUESTED,
                   () => {
                     console.log("[IMA] Content pause requested");
-                    originalMutedState = video.muted;
-                    video.muted = true;
                     if (!options?.continueLiveStreamDuringAds) {
                       video.pause();
                       console.log("[IMA] Video paused (VOD mode)");
@@ -292,20 +327,34 @@ function createImaController(video, options) {
                         "[IMA] Video continues playing but muted (Live mode)"
                       );
                     }
+                    video.muted = true;
                     adPlaying = true;
-                    if (adContainerEl)
-                      adContainerEl.style.pointerEvents = "auto";
                     emit("content_pause");
                   }
                 );
+                adsManager.addEventListener(AdEvent.STARTED, () => {
+                  console.log("[IMA] Ad started playing");
+                  if (adContainerEl) {
+                    adContainerEl.style.pointerEvents = "auto";
+                    adContainerEl.style.display = "flex";
+                    console.log(
+                      "[IMA] Ad container visibility set to flex with pointer events enabled"
+                    );
+                  }
+                });
                 adsManager.addEventListener(
                   AdEvent.CONTENT_RESUME_REQUESTED,
                   () => {
                     console.log("[IMA] Content resume requested");
                     adPlaying = false;
                     video.muted = originalMutedState;
-                    if (adContainerEl)
+                    if (adContainerEl) {
                       adContainerEl.style.pointerEvents = "none";
+                      adContainerEl.style.display = "none";
+                      console.log(
+                        "[IMA] Ad container hidden - pointer events disabled"
+                      );
+                    }
                     if (!options?.continueLiveStreamDuringAds) {
                       video.play()?.catch(() => {
                       });
@@ -322,7 +371,13 @@ function createImaController(video, options) {
                   console.log("[IMA] All ads completed");
                   adPlaying = false;
                   video.muted = originalMutedState;
-                  if (adContainerEl) adContainerEl.style.pointerEvents = "none";
+                  if (adContainerEl) {
+                    adContainerEl.style.pointerEvents = "none";
+                    adContainerEl.style.display = "none";
+                    console.log(
+                      "[IMA] Ad container hidden after all ads completed"
+                    );
+                  }
                   if (!options?.continueLiveStreamDuringAds) {
                     video.play().catch(() => {
                     });
@@ -365,6 +420,13 @@ function createImaController(video, options) {
             google.ima.AdErrorEvent.Type.AD_ERROR,
             (adErrorEvent) => {
               console.error("[IMA] Ads loader error:", adErrorEvent.getError());
+              adPlaying = false;
+              video.muted = originalMutedState;
+              if (adContainerEl) adContainerEl.style.pointerEvents = "none";
+              if (!options?.continueLiveStreamDuringAds) {
+                video.play().catch(() => {
+                });
+              }
               if (adsLoadedReject) {
                 adsLoadedReject(new Error("Ads loader error"));
                 adsLoadedReject = void 0;
@@ -380,11 +442,9 @@ function createImaController(video, options) {
         return adsLoadedPromise;
       } catch (error) {
         console.error("[IMA] Failed to request ads:", error);
-        if (adsLoadedReject) {
-          adsLoadedReject(error);
-          adsLoadedReject = void 0;
-          adsLoadedResolve = void 0;
-        }
+        currentReject?.(error);
+        adsLoadedReject = void 0;
+        adsLoadedResolve = void 0;
         return Promise.reject(error);
       }
     },
@@ -404,14 +464,6 @@ function createImaController(video, options) {
         const height = video.clientHeight || 360;
         console.log(`[IMA] Initializing ads manager (${width}x${height})`);
         adsManager.init(width, height, window.google.ima.ViewMode.NORMAL);
-        if (!options?.continueLiveStreamDuringAds) {
-          console.log("[IMA] Pausing video for ad playback (VOD mode)");
-          video.pause();
-        } else {
-          console.log(
-            "[IMA] Keeping video playing but muted for ad playback (Live mode)"
-          );
-        }
         adPlaying = true;
         console.log("[IMA] Starting ad playback");
         adsManager.start();
@@ -429,10 +481,16 @@ function createImaController(video, options) {
     async stop() {
       adPlaying = false;
       video.muted = originalMutedState;
+      if (adContainerEl) {
+        adContainerEl.style.pointerEvents = "none";
+        adContainerEl.style.display = "none";
+        console.log("[IMA] Ad container hidden after stop");
+      }
       try {
         adsManager?.stop?.();
       } catch {
       }
+      destroyAdsManager();
       if (!options?.continueLiveStreamDuringAds) {
         video.play().catch(() => {
         });
@@ -442,12 +500,13 @@ function createImaController(video, options) {
       }
     },
     destroy() {
-      try {
-        adsManager?.destroy?.();
-      } catch {
-      }
+      destroyAdsManager();
       adPlaying = false;
       video.muted = originalMutedState;
+      if (adContainerEl) {
+        adContainerEl.style.pointerEvents = "none";
+        adContainerEl.style.display = "none";
+      }
       try {
         adsLoader?.destroy?.();
       } catch {
@@ -455,6 +514,9 @@ function createImaController(video, options) {
       if (adContainerEl?.parentElement) {
         adContainerEl.parentElement.removeChild(adContainerEl);
       }
+      adContainerEl = void 0;
+      adDisplayContainer = void 0;
+      adsLoader = void 0;
     },
     isAdPlaying() {
       return adPlaying;
@@ -510,6 +572,7 @@ function createImaController(video, options) {
 }
 
 // src/utils/tracking.ts
+var cachedBrowserId = null;
 function getClientInfo() {
   const ua = navigator.userAgent;
   const platform = navigator.platform;
@@ -652,6 +715,9 @@ function getClientInfo() {
   };
 }
 async function getBrowserID(clientInfo) {
+  if (cachedBrowserId) {
+    return cachedBrowserId;
+  }
   const fingerprintString = JSON.stringify(clientInfo);
   if (typeof crypto !== "undefined" && crypto.subtle && crypto.subtle.digest) {
     try {
@@ -662,6 +728,7 @@ async function getBrowserID(clientInfo) {
       );
       const hashArray = Array.from(new Uint8Array(hashBuffer));
       const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+      cachedBrowserId = hashHex;
       return hashHex;
     } catch (error) {
       console.warn(
@@ -678,7 +745,8 @@ async function getBrowserID(clientInfo) {
   const fallbackHash = Math.abs(hash).toString(16).padStart(8, "0");
   const timestamp = Date.now().toString(16).padStart(12, "0");
   const random = Math.random().toString(16).substring(2, 14).padStart(12, "0");
-  return (fallbackHash + timestamp + random).padEnd(64, "0");
+  cachedBrowserId = (fallbackHash + timestamp + random).padEnd(64, "0");
+  return cachedBrowserId;
 }
 async function sendInitialTracking(licenseKey) {
   try {
@@ -926,17 +994,8 @@ var StormcloudVideoPlayer = class {
     this.video.muted = !!this.config.muted;
     this.ima.initialize();
     this.ima.on("all_ads_completed", () => {
-      if (!this.inAdBreak) return;
-      const remaining = this.getRemainingAdMs();
-      if (remaining > 500 && this.adPodQueue.length > 0) {
-        const next = this.adPodQueue.shift();
-        this.currentAdIndex++;
-        this.playSingleAd(next).catch(() => {
-        });
-      } else {
-        this.currentAdIndex = 0;
-        this.totalAdsInBreak = 0;
-        this.showAds = false;
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] IMA all_ads_completed event received");
       }
     });
     this.ima.on("ad_error", () => {
@@ -967,6 +1026,26 @@ var StormcloudVideoPlayer = class {
         );
       }
       this.clearAdFailsafeTimer();
+      if (!this.inAdBreak) 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})`
+          );
+        }
+        this.playSingleAd(next).catch(() => {
+        });
+      } else {
+        if (this.config.debugAdTiming) {
+          console.log("[StormcloudVideoPlayer] Ad pod completed");
+        }
+        this.currentAdIndex = 0;
+        this.totalAdsInBreak = 0;
+        this.showAds = false;
+      }
     });
     this.video.addEventListener("timeupdate", () => {
       this.onTimeUpdate(this.video.currentTime);
@@ -1367,17 +1446,21 @@ var StormcloudVideoPlayer = class {
     return void 0;
   }
   initializeTracking() {
-    sendInitialTracking(this.config.licenseKey).catch((error) => {
+    sendInitialTracking(this.config.licenseKey).then(() => {
+      this.heartbeatInterval = window.setInterval(() => {
+        this.sendHeartbeatIfNeeded();
+      }, 5e3);
+    }).catch((error) => {
       if (this.config.debugAdTiming) {
         console.warn(
           "[StormcloudVideoPlayer] Failed to send initial tracking:",
           error
         );
       }
+      this.heartbeatInterval = window.setInterval(() => {
+        this.sendHeartbeatIfNeeded();
+      }, 5e3);
     });
-    this.heartbeatInterval = window.setInterval(() => {
-      this.sendHeartbeatIfNeeded();
-    }, 5e3);
   }
   sendHeartbeatIfNeeded() {
     const now = Date.now();
@@ -1612,9 +1695,21 @@ var StormcloudVideoPlayer = class {
     if (this.config.debugAdTiming) {
       console.log("[StormcloudVideoPlayer] Attempting to play ad:", vastTagUrl);
     }
+    if (this.ima.isAdPlaying()) {
+      if (this.config.debugAdTiming) {
+        console.warn(
+          "[StormcloudVideoPlayer] Ad already playing - skipping new ad request"
+        );
+      }
+      return;
+    }
+    this.ima.updateOriginalMutedState(this.video.muted);
     this.startAdFailsafeTimer();
     try {
       await this.ima.requestAds(vastTagUrl);
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] Ad request successful, starting playback");
+      }
       await this.ima.play();
       if (this.config.debugAdTiming) {
         console.log("[StormcloudVideoPlayer] Ad playback started successfully");
@@ -1642,6 +1737,13 @@ var StormcloudVideoPlayer = class {
     this.showAds = false;
     this.currentAdIndex = 0;
     this.totalAdsInBreak = 0;
+    const originalMutedState = this.ima.getOriginalMutedState();
+    this.video.muted = originalMutedState;
+    if (this.config.debugAdTiming) {
+      console.log(
+        `[StormcloudVideoPlayer] Restored mute state to: ${originalMutedState}`
+      );
+    }
     if (this.video.paused) {
       this.video.play()?.catch(() => {
         if (this.config.debugAdTiming) {