stormcloud-video-player 0.2.24 → 0.2.25

package/lib/index.d.cts

@@ -39,6 +39,8 @@ interface StormcloudVideoPlayerConfig {
 interface ImaController {
     initialize: () => void;
     requestAds: (vastTagUrl: string) => Promise<void>;
+    preloadAds: (vastTagUrl: string) => Promise<void>;
+    hasPreloadedAd: (vastTagUrl: string) => boolean;
     play: () => Promise<void>;
     stop: () => Promise<void>;
     destroy: () => void;
@@ -50,6 +52,8 @@ interface ImaController {
     getOriginalMutedState: () => boolean;
     setAdVolume: (volume: number) => void;
     getAdVolume: () => number;
+    showPlaceholder: () => void;
+    hidePlaceholder: () => void;
 }
 interface ImaControllerOptions {
     maxRetries?: number;
@@ -122,6 +126,8 @@ declare class StormcloudVideoPlayer {
     private bufferedSegmentsCount;
     private shouldAutoplayAfterBuffering;
     private hasInitialBufferCompleted;
+    private adPodAllUrls;
+    private preloadingAdUrls;
     constructor(config: StormcloudVideoPlayerConfig);
     private createAdPlayer;
     load(): Promise<void>;
@@ -164,6 +170,10 @@ declare class StormcloudVideoPlayer {
     private startAdFailsafeTimer;
     private clearAdFailsafeTimer;
     private selectVastTagsForBreak;
+    private logQueuedAdUrls;
+    private enforceAdHoldState;
+    private releaseAdHoldState;
+    private preloadUpcomingAds;
     private getRemainingAdMs;
     private findBreakForTime;
     toggleMute(): void;

package/lib/index.d.ts

@@ -39,6 +39,8 @@ interface StormcloudVideoPlayerConfig {
 interface ImaController {
     initialize: () => void;
     requestAds: (vastTagUrl: string) => Promise<void>;
+    preloadAds: (vastTagUrl: string) => Promise<void>;
+    hasPreloadedAd: (vastTagUrl: string) => boolean;
     play: () => Promise<void>;
     stop: () => Promise<void>;
     destroy: () => void;
@@ -50,6 +52,8 @@ interface ImaController {
     getOriginalMutedState: () => boolean;
     setAdVolume: (volume: number) => void;
     getAdVolume: () => number;
+    showPlaceholder: () => void;
+    hidePlaceholder: () => void;
 }
 interface ImaControllerOptions {
     maxRetries?: number;
@@ -122,6 +126,8 @@ declare class StormcloudVideoPlayer {
     private bufferedSegmentsCount;
     private shouldAutoplayAfterBuffering;
     private hasInitialBufferCompleted;
+    private adPodAllUrls;
+    private preloadingAdUrls;
     constructor(config: StormcloudVideoPlayerConfig);
     private createAdPlayer;
     load(): Promise<void>;
@@ -164,6 +170,10 @@ declare class StormcloudVideoPlayer {
     private startAdFailsafeTimer;
     private clearAdFailsafeTimer;
     private selectVastTagsForBreak;
+    private logQueuedAdUrls;
+    private enforceAdHoldState;
+    private releaseAdHoldState;
+    private preloadUpcomingAds;
     private getRemainingAdMs;
     private findBreakForTime;
     toggleMute(): void;

package/lib/index.js

@@ -198,6 +198,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";
@@ -288,7 +290,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;
@@ -298,6 +308,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) {
@@ -313,29 +353,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 {
           }
         }
@@ -639,6 +666,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) {
@@ -714,6 +767,8 @@ function createImaController(video, options) {
       adContainerEl = void 0;
       adDisplayContainer = void 0;
       adsLoader = void 0;
+      preloadedVast.clear();
+      preloadingVast.clear();
     },
     isAdPlaying() {
       return adPlaying;
@@ -769,6 +824,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";
+      }
     }
   };
 }
@@ -786,6 +854,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,
@@ -1015,6 +1085,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";
@@ -1166,17 +1249,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");
@@ -1195,6 +1278,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(
@@ -1325,6 +1439,8 @@ function createHlsAdPlayer(contentVideo, options) {
       adContainerEl = void 0;
       currentAd = void 0;
       listeners.clear();
+      preloadedAds.clear();
+      preloadingAds.clear();
     },
     isAdPlaying() {
       return adPlaying;
@@ -1367,6 +1483,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";
+      }
     }
   };
 }
@@ -1847,6 +1992,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 };
@@ -2147,6 +2294,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) {
@@ -2171,9 +2319,7 @@ 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}) - IMMEDIATELY starting next ad`
@@ -2785,11 +2931,16 @@ var StormcloudVideoPlayer = class {
       return;
     }
     if (vastTagUrls.length > 0) {
+      this.adPodAllUrls = [...vastTagUrls];
+      this.preloadingAdUrls.clear();
+      this.logQueuedAdUrls(this.adPodAllUrls);
       this.inAdBreak = true;
       this.showAds = true;
       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`
@@ -2860,6 +3011,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;
@@ -2973,6 +3125,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(
@@ -2993,12 +3151,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(
@@ -3028,6 +3188,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;
@@ -3035,6 +3197,7 @@ var StormcloudVideoPlayer = class {
     this.clearAdStopTimer();
     this.clearAdFailsafeTimer();
     this.adPodQueue = [];
+    this.adPodAllUrls = [];
     this.showAds = false;
     this.currentAdIndex = 0;
     this.totalAdsInBreak = 0;
@@ -3115,6 +3278,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;
@@ -3266,6 +3487,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 = [];
   }
 };