stormcloud-video-player 0.2.23 → 0.2.25

package/lib/index.cjs

@@ -267,6 +267,8 @@ function createImaController(video, options) {
   let adPlaying = false;
   let originalMutedState = false;
   const listeners = /* @__PURE__ */ new Map();
+  const preloadedVast = /* @__PURE__ */ new Map();
+  const preloadingVast = /* @__PURE__ */ new Map();
   function setAdPlayingFlag(isPlaying) {
     if (isPlaying) {
       video.dataset.stormcloudAdPlaying = "true";
@@ -357,7 +359,15 @@ function createImaController(video, options) {
   let adsLoadedReject;
   function makeAdsRequest(google, vastTagUrl) {
     const adsRequest = new google.ima.AdsRequest();
-    adsRequest.adTagUrl = vastTagUrl;
+    const preloadedResponse = preloadedVast.get(vastTagUrl);
+    if (preloadedResponse) {
+      adsRequest.adsResponse = preloadedResponse;
+      console.log(
+        "[IMA] Using preloaded VAST response for immediate ad request"
+      );
+    } else {
+      adsRequest.adTagUrl = vastTagUrl;
+    }
     const videoWidth = video.offsetWidth || video.clientWidth || 640;
     const videoHeight = video.offsetHeight || video.clientHeight || 360;
     adsRequest.linearAdSlotWidth = videoWidth;
@@ -367,6 +377,36 @@ function createImaController(video, options) {
     adsRequest.vastLoadTimeout = 5e3;
     console.log(`[IMA] Ads request dimensions: ${videoWidth}x${videoHeight}`);
     adsLoader.requestAds(adsRequest);
+    if (preloadedResponse) {
+      preloadedVast.delete(vastTagUrl);
+    }
+  }
+  function ensurePlaceholderContainer() {
+    var _a;
+    if (adContainerEl) {
+      return;
+    }
+    const container = document.createElement("div");
+    container.style.position = "absolute";
+    container.style.left = "0";
+    container.style.top = "0";
+    container.style.right = "0";
+    container.style.bottom = "0";
+    container.style.display = "none";
+    container.style.alignItems = "center";
+    container.style.justifyContent = "center";
+    container.style.pointerEvents = "none";
+    container.style.zIndex = "10";
+    container.style.backgroundColor = "#000";
+    (_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
+    adContainerEl = container;
+  }
+  async function fetchVastDocument(vastTagUrl) {
+    const response = await fetch(vastTagUrl, { mode: "cors" });
+    if (!response.ok) {
+      throw new Error(`Failed to preload VAST: ${response.status}`);
+    }
+    return response.text();
   }
   function destroyAdsManager() {
     if (adsManager) {
@@ -382,29 +422,16 @@ function createImaController(video, options) {
   return {
     initialize() {
       ensureImaLoaded().then(() => {
-        var _a, _b;
+        var _a;
         const google = window.google;
-        if (!adDisplayContainer) {
-          const container = document.createElement("div");
-          container.style.position = "absolute";
-          container.style.left = "0";
-          container.style.top = "0";
-          container.style.right = "0";
-          container.style.bottom = "0";
-          container.style.display = "none";
-          container.style.alignItems = "center";
-          container.style.justifyContent = "center";
-          container.style.pointerEvents = "none";
-          container.style.zIndex = "10";
-          container.style.backgroundColor = "#000";
-          (_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
-          adContainerEl = container;
+        ensurePlaceholderContainer();
+        if (!adDisplayContainer && adContainerEl) {
           adDisplayContainer = new google.ima.AdDisplayContainer(
-            container,
+            adContainerEl,
             video
           );
           try {
-            (_b = adDisplayContainer.initialize) == null ? void 0 : _b.call(adDisplayContainer);
+            (_a = adDisplayContainer.initialize) == null ? void 0 : _a.call(adDisplayContainer);
           } catch {
           }
         }
@@ -506,9 +533,13 @@ function createImaController(video, options) {
           adsLoader.addEventListener(
             google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
             (evt) => {
-              console.log("[IMA] Ads manager loaded");
+              console.log(
+                "[IMA] Ads manager loaded - enabling preloading for continuous playback"
+              );
               try {
-                adsManager = evt.getAdsManager(video);
+                const adsRenderingSettings = new google.ima.AdsRenderingSettings();
+                adsRenderingSettings.enablePreloading = true;
+                adsManager = evt.getAdsManager(video, adsRenderingSettings);
                 const AdEvent = google.ima.AdEvent.Type;
                 const AdErrorEvent = google.ima.AdErrorEvent.Type;
                 adsManager.addEventListener(
@@ -704,6 +735,32 @@ function createImaController(video, options) {
         return Promise.reject(error);
       }
     },
+    async preloadAds(vastTagUrl) {
+      if (!vastTagUrl || vastTagUrl.trim() === "") {
+        return Promise.resolve();
+      }
+      if (preloadedVast.has(vastTagUrl)) {
+        return Promise.resolve();
+      }
+      const inflight = preloadingVast.get(vastTagUrl);
+      if (inflight) {
+        return inflight;
+      }
+      const preloadPromise = fetchVastDocument(vastTagUrl).then((xml) => {
+        preloadedVast.set(vastTagUrl, xml);
+        console.log("[IMA] Cached VAST response for preloading:", vastTagUrl);
+      }).catch((error) => {
+        console.warn("[IMA] Failed to preload VAST response:", error);
+        preloadedVast.delete(vastTagUrl);
+      }).finally(() => {
+        preloadingVast.delete(vastTagUrl);
+      });
+      preloadingVast.set(vastTagUrl, preloadPromise);
+      return preloadPromise;
+    },
+    hasPreloadedAd(vastTagUrl) {
+      return preloadedVast.has(vastTagUrl);
+    },
     async play() {
       var _a, _b;
       if (!((_a = window.google) == null ? void 0 : _a.ima) || !adDisplayContainer) {
@@ -779,6 +836,8 @@ function createImaController(video, options) {
       adContainerEl = void 0;
       adDisplayContainer = void 0;
       adsLoader = void 0;
+      preloadedVast.clear();
+      preloadingVast.clear();
     },
     isAdPlaying() {
       return adPlaying;
@@ -834,6 +893,19 @@ function createImaController(video, options) {
         }
       }
       return 1;
+    },
+    showPlaceholder() {
+      ensurePlaceholderContainer();
+      if (adContainerEl) {
+        adContainerEl.style.display = "flex";
+        adContainerEl.style.pointerEvents = "auto";
+      }
+    },
+    hidePlaceholder() {
+      if (adContainerEl) {
+        adContainerEl.style.display = "none";
+        adContainerEl.style.pointerEvents = "none";
+      }
     }
   };
 }
@@ -851,6 +923,8 @@ function createHlsAdPlayer(contentVideo, options) {
   let adContainerEl;
   let currentAd;
   let sessionId;
+  const preloadedAds = /* @__PURE__ */ new Map();
+  const preloadingAds = /* @__PURE__ */ new Map();
   let trackingFired = {
     impression: false,
     start: false,
@@ -1080,6 +1154,19 @@ function createHlsAdPlayer(contentVideo, options) {
       return null;
     }
   }
+  async function fetchAndParseVastAd(vastTagUrl) {
+    const response = await fetch(vastTagUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch VAST: ${response.statusText}`);
+    }
+    const vastXml = await response.text();
+    console.log("[HlsAdPlayer] VAST XML received");
+    console.log(
+      "[HlsAdPlayer] VAST XML content (first 2000 chars):",
+      vastXml.substring(0, 2e3)
+    );
+    return parseVastXml(vastXml);
+  }
   function createAdVideoElement() {
     const video = document.createElement("video");
     video.style.position = "absolute";
@@ -1231,17 +1318,17 @@ function createHlsAdPlayer(contentVideo, options) {
       }
       try {
         sessionId = generateSessionId();
-        const response = await fetch(vastTagUrl);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch VAST: ${response.statusText}`);
+        let ad;
+        if (preloadedAds.has(vastTagUrl)) {
+          ad = preloadedAds.get(vastTagUrl);
+          preloadedAds.delete(vastTagUrl);
+          console.log(
+            "[HlsAdPlayer] Using preloaded VAST response:",
+            vastTagUrl
+          );
+        } else {
+          ad = await fetchAndParseVastAd(vastTagUrl);
         }
-        const vastXml = await response.text();
-        console.log("[HlsAdPlayer] VAST XML received");
-        console.log(
-          "[HlsAdPlayer] VAST XML content (first 2000 chars):",
-          vastXml.substring(0, 2e3)
-        );
-        const ad = parseVastXml(vastXml);
         if (!ad) {
           console.warn("[HlsAdPlayer] No ads available from VAST response");
           emit("ad_error");
@@ -1260,6 +1347,37 @@ function createHlsAdPlayer(contentVideo, options) {
         return Promise.reject(error);
       }
     },
+    async preloadAds(vastTagUrl) {
+      if (!vastTagUrl || vastTagUrl.trim() === "") {
+        return Promise.resolve();
+      }
+      if (preloadedAds.has(vastTagUrl)) {
+        return Promise.resolve();
+      }
+      const inflight = preloadingAds.get(vastTagUrl);
+      if (inflight) {
+        return inflight;
+      }
+      const preloadPromise = fetchAndParseVastAd(vastTagUrl).then((ad) => {
+        if (ad) {
+          preloadedAds.set(vastTagUrl, ad);
+          console.log(
+            "[HlsAdPlayer] Cached VAST response for preloading:",
+            vastTagUrl
+          );
+        }
+      }).catch((error) => {
+        console.warn("[HlsAdPlayer] Failed to preload VAST response:", error);
+        preloadedAds.delete(vastTagUrl);
+      }).finally(() => {
+        preloadingAds.delete(vastTagUrl);
+      });
+      preloadingAds.set(vastTagUrl, preloadPromise);
+      return preloadPromise;
+    },
+    hasPreloadedAd(vastTagUrl) {
+      return preloadedAds.has(vastTagUrl);
+    },
     async play() {
       if (!currentAd) {
         console.warn(
@@ -1390,6 +1508,8 @@ function createHlsAdPlayer(contentVideo, options) {
       adContainerEl = void 0;
       currentAd = void 0;
       listeners.clear();
+      preloadedAds.clear();
+      preloadingAds.clear();
     },
     isAdPlaying() {
       return adPlaying;
@@ -1432,6 +1552,35 @@ function createHlsAdPlayer(contentVideo, options) {
         return adVideoElement.volume;
       }
       return 1;
+    },
+    showPlaceholder() {
+      var _a;
+      if (!adContainerEl) {
+        const container = document.createElement("div");
+        container.style.position = "absolute";
+        container.style.left = "0";
+        container.style.top = "0";
+        container.style.right = "0";
+        container.style.bottom = "0";
+        container.style.display = "none";
+        container.style.alignItems = "center";
+        container.style.justifyContent = "center";
+        container.style.pointerEvents = "none";
+        container.style.zIndex = "10";
+        container.style.backgroundColor = "#000";
+        (_a = contentVideo.parentElement) == null ? void 0 : _a.appendChild(container);
+        adContainerEl = container;
+      }
+      if (adContainerEl) {
+        adContainerEl.style.display = "flex";
+        adContainerEl.style.pointerEvents = "auto";
+      }
+    },
+    hidePlaceholder() {
+      if (adContainerEl) {
+        adContainerEl.style.display = "none";
+        adContainerEl.style.pointerEvents = "none";
+      }
     }
   };
 }
@@ -1912,6 +2061,8 @@ var StormcloudVideoPlayer = class {
     this.bufferedSegmentsCount = 0;
     this.shouldAutoplayAfterBuffering = false;
     this.hasInitialBufferCompleted = false;
+    this.adPodAllUrls = [];
+    this.preloadingAdUrls = /* @__PURE__ */ new Set();
     initializePolyfills();
     const browserOverrides = getBrowserConfigOverrides();
     this.config = { ...config, ...browserOverrides };
@@ -2212,6 +2363,7 @@ var StormcloudVideoPlayer = class {
         console.log("[StormcloudVideoPlayer] IMA content_pause event received");
       }
       this.clearAdFailsafeTimer();
+      this.enforceAdHoldState();
     });
     this.ima.on("content_resume", () => {
       if (this.config.debugAdTiming) {
@@ -2236,12 +2388,10 @@ var StormcloudVideoPlayer = class {
       if (remaining > 500 && this.adPodQueue.length > 0) {
         const next = this.adPodQueue.shift();
         this.currentAdIndex++;
-        this.video.dataset.stormcloudAdPlaying = "true";
-        this.video.muted = true;
-        this.video.volume = 0;
+        this.enforceAdHoldState();
         if (this.config.debugAdTiming) {
           console.log(
-            `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - main video stays muted, ad layer stays visible`
+            `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - IMMEDIATELY starting next ad`
           );
         }
         this.playSingleAd(next).catch(() => {
@@ -2826,25 +2976,21 @@ var StormcloudVideoPlayer = class {
       this.video.currentTime * 1e3
     );
     const tags = this.selectVastTagsForBreak(scheduled);
-    let vastTagUrl;
+    let vastTagUrls = [];
     if (this.apiVastTagUrl) {
-      vastTagUrl = this.apiVastTagUrl;
-      this.adPodQueue = [];
-      this.currentAdIndex = 0;
-      this.totalAdsInBreak = 1;
+      vastTagUrls = [this.apiVastTagUrl];
       if (this.config.debugAdTiming) {
-        console.log("[StormcloudVideoPlayer] Using VAST endpoint:", vastTagUrl);
+        console.log(
+          "[StormcloudVideoPlayer] Using VAST endpoint:",
+          this.apiVastTagUrl
+        );
       }
     } else if (tags && tags.length > 0) {
-      vastTagUrl = tags[0];
-      const rest = tags.slice(1);
-      this.adPodQueue = rest;
-      this.currentAdIndex = 0;
-      this.totalAdsInBreak = tags.length;
+      vastTagUrls = tags;
       if (this.config.debugAdTiming) {
         console.log(
-          "[StormcloudVideoPlayer] Using scheduled VAST tag:",
-          vastTagUrl
+          "[StormcloudVideoPlayer] Using scheduled VAST tags (count: " + tags.length + "):",
+          tags
         );
       }
     } else {
@@ -2853,16 +2999,28 @@ var StormcloudVideoPlayer = class {
       }
       return;
     }
-    if (vastTagUrl) {
+    if (vastTagUrls.length > 0) {
+      this.adPodAllUrls = [...vastTagUrls];
+      this.preloadingAdUrls.clear();
+      this.logQueuedAdUrls(this.adPodAllUrls);
       this.inAdBreak = true;
       this.showAds = true;
-      this.currentAdIndex++;
+      this.currentAdIndex = 0;
+      this.totalAdsInBreak = vastTagUrls.length;
+      this.adPodQueue = [...vastTagUrls];
+      this.enforceAdHoldState();
+      this.preloadUpcomingAds();
+      if (this.config.debugAdTiming) {
+        console.log(
+          `[StormcloudVideoPlayer] Starting ad pod with ${vastTagUrls.length} ads - will play continuously`
+        );
+      }
       try {
-        await this.playSingleAd(vastTagUrl);
+        await this.playAdPod();
       } catch (error) {
         if (this.config.debugAdTiming) {
           console.error(
-            "[StormcloudVideoPlayer] Ad playback failed in handleAdStart:",
+            "[StormcloudVideoPlayer] Ad pod playback failed:",
             error
           );
         }
@@ -2875,6 +3033,22 @@ var StormcloudVideoPlayer = class {
       this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
     }
   }
+  async playAdPod() {
+    if (this.adPodQueue.length === 0) {
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] No ads in pod to play");
+      }
+      return;
+    }
+    const firstAd = this.adPodQueue.shift();
+    this.currentAdIndex++;
+    if (this.config.debugAdTiming) {
+      console.log(
+        `[StormcloudVideoPlayer] Playing ad ${this.currentAdIndex}/${this.totalAdsInBreak}`
+      );
+    }
+    await this.playSingleAd(firstAd);
+  }
   findCurrentOrNextBreak(nowMs) {
     var _a;
     const schedule = [];
@@ -2906,6 +3080,7 @@ var StormcloudVideoPlayer = class {
         const first = tags[0];
         const rest = tags.slice(1);
         this.adPodQueue = rest;
+        this.enforceAdHoldState();
         await this.playSingleAd(first);
         this.inAdBreak = true;
         this.expectedAdBreakDurationMs = remainingMs;
@@ -3019,6 +3194,12 @@ var StormcloudVideoPlayer = class {
       }
       return;
     }
+    const wasPreloaded = this.ima.hasPreloadedAd(vastTagUrl);
+    if (wasPreloaded && this.config.debugAdTiming) {
+      console.log(
+        `[StormcloudVideoPlayer] IMA SDK preloaded this ad already: ${vastTagUrl}`
+      );
+    }
     if (!this.showAds) {
       if (this.config.debugAdTiming) {
         console.log(
@@ -3039,12 +3220,14 @@ var StormcloudVideoPlayer = class {
     this.startAdFailsafeTimer();
     try {
       await this.ima.requestAds(vastTagUrl);
+      this.preloadUpcomingAds();
       try {
         if (this.config.debugAdTiming) {
           console.log(
             "[StormcloudVideoPlayer] Ad request completed, attempting playback"
           );
         }
+        this.enforceAdHoldState();
         await this.ima.play();
         if (this.config.debugAdTiming) {
           console.log(
@@ -3074,6 +3257,8 @@ var StormcloudVideoPlayer = class {
         "[StormcloudVideoPlayer] Handling ad pod completion - resuming content and hiding ad layer"
       );
     }
+    this.releaseAdHoldState();
+    this.preloadingAdUrls.clear();
     this.inAdBreak = false;
     this.expectedAdBreakDurationMs = void 0;
     this.currentAdBreakStartWallClockMs = void 0;
@@ -3081,6 +3266,7 @@ var StormcloudVideoPlayer = class {
     this.clearAdStopTimer();
     this.clearAdFailsafeTimer();
     this.adPodQueue = [];
+    this.adPodAllUrls = [];
     this.showAds = false;
     this.currentAdIndex = 0;
     this.totalAdsInBreak = 0;
@@ -3161,6 +3347,64 @@ var StormcloudVideoPlayer = class {
     }
     return [b.vastTagUrl];
   }
+  logQueuedAdUrls(urls) {
+    if (!this.config.debugAdTiming) {
+      return;
+    }
+    console.log("[StormcloudVideoPlayer] ALL ad URLs queued:", urls);
+  }
+  enforceAdHoldState() {
+    this.video.dataset.stormcloudAdPlaying = "true";
+    this.video.muted = true;
+    this.video.volume = 0;
+    if (typeof this.ima.showPlaceholder === "function") {
+      this.ima.showPlaceholder();
+    }
+  }
+  releaseAdHoldState() {
+    delete this.video.dataset.stormcloudAdPlaying;
+    if (typeof this.ima.hidePlaceholder === "function") {
+      this.ima.hidePlaceholder();
+    }
+  }
+  preloadUpcomingAds() {
+    if (!this.ima.preloadAds || this.adPodQueue.length === 0) {
+      return;
+    }
+    const upcoming = this.adPodQueue.slice(0, 2);
+    for (const url of upcoming) {
+      if (!url) continue;
+      if (this.ima.hasPreloadedAd(url)) {
+        this.preloadingAdUrls.delete(url);
+        continue;
+      }
+      if (this.preloadingAdUrls.has(url)) {
+        continue;
+      }
+      if (this.config.debugAdTiming) {
+        console.log(
+          `[StormcloudVideoPlayer] Scheduling IMA preload for upcoming ad: ${url}`
+        );
+      }
+      this.preloadingAdUrls.add(url);
+      this.ima.preloadAds(url).then(() => {
+        if (this.config.debugAdTiming) {
+          console.log(
+            `[StormcloudVideoPlayer] IMA preload complete for ad: ${url}`
+          );
+        }
+      }).catch((error) => {
+        if (this.config.debugAdTiming) {
+          console.warn(
+            `[StormcloudVideoPlayer] IMA preload failed for ad: ${url}`,
+            error
+          );
+        }
+      }).finally(() => {
+        this.preloadingAdUrls.delete(url);
+      });
+    }
+  }
   getRemainingAdMs() {
     if (this.expectedAdBreakDurationMs == null || this.currentAdBreakStartWallClockMs == null)
       return 0;
@@ -3312,6 +3556,9 @@ var StormcloudVideoPlayer = class {
     }
     (_a = this.hls) == null ? void 0 : _a.destroy();
     (_b = this.ima) == null ? void 0 : _b.destroy();
+    this.releaseAdHoldState();
+    this.preloadingAdUrls.clear();
+    this.adPodAllUrls = [];
   }
 };