stormcloud-video-player 0.2.35 → 0.3.0

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -631,19 +631,10 @@ function createImaController(video, options) {
                 adsManager.addEventListener(
                   AdEvent.CONTENT_PAUSE_REQUESTED,
                   () => {
-                    console.log("[DEBUG-FLOW] \u{1F3AF} CONTENT_PAUSE_REQUESTED - Ad starting");
+                    console.log("[DEBUG-FLOW] \u{1F3AF} CONTENT_PAUSE_REQUESTED - Ad request accepted");
                     if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
                       video.pause();
                     }
-                    hideContentVideo();
-                    if (adContainerEl) {
-                      adContainerEl.style.pointerEvents = "auto";
-                      adContainerEl.style.display = "flex";
-                      adContainerEl.style.backgroundColor = "#000";
-                      adContainerEl.offsetHeight;
-                      adContainerEl.style.opacity = "1";
-                      console.log("[DEBUG-LAYER] \u{1F7E1} Ad container VISIBLE");
-                    }
                     adPlaying = true;
                     setAdPlayingFlag(true);
                     emit("content_pause");
@@ -2171,6 +2162,9 @@ var StormcloudVideoPlayer = class {
     this.activeAdRequestToken = null;
     this.adRequestWatchdogToken = null;
     this.adFailsafeToken = null;
+    this.fetchedAdDurations = /* @__PURE__ */ new Map();
+    this.targetAdBreakDurationMs = null;
+    this.isAdaptiveMode = false;
     initializePolyfills();
     const browserOverrides = getBrowserConfigOverrides();
     this.config = { ...config, ...browserOverrides };
@@ -2476,7 +2470,7 @@ var StormcloudVideoPlayer = class {
       this.clearAdRequestWatchdog();
       this.activeAdRequestToken = null;
       this.showAds = true;
-      this.enforceAdHoldState();
+      console.log("[DEBUG-LAYER] \u{1F3AC} Layers: Main=hidden, Ad=visible, Placeholder=no");
     });
     this.ima.on("content_resume", () => {
       console.log(`[DEBUG-POD] \u23F8\uFE0F content_resume | ad ${this.currentAdIndex}/${this.totalAdsInBreak}, queue=${this.adPodQueue.length}, remaining=${this.getRemainingAdMs()}ms`);
@@ -2656,6 +2650,12 @@ var StormcloudVideoPlayer = class {
       });
     }
     if (marker.type === "start") {
+      if (this.inAdBreak) {
+        console.log(
+          `[DEBUG-POD] \u26A0\uFE0F SCTE-35 start marker ignored - already in ad break (currentTime: ${this.video.currentTime})`
+        );
+        return;
+      }
       this.inAdBreak = true;
       const durationMs = marker.durationSeconds != null ? marker.durationSeconds * 1e3 : void 0;
       this.expectedAdBreakDurationMs = durationMs;
@@ -2722,6 +2722,9 @@ var StormcloudVideoPlayer = class {
       return;
     }
     if (marker.type === "progress" && this.inAdBreak) {
+      console.log(
+        `[DEBUG-POD] \u{1F4CA} SCTE-35 progress marker (currentTime: ${this.video.currentTime})`
+      );
       if (marker.durationSeconds != null) {
         this.expectedAdBreakDurationMs = marker.durationSeconds * 1e3;
       }
@@ -2733,7 +2736,8 @@ var StormcloudVideoPlayer = class {
         );
         this.scheduleAdStopCountdown(remainingMs);
       }
-      if (!this.ima.isAdPlaying()) {
+      if (!this.ima.isAdPlaying() && this.activeAdRequestToken === null) {
+        console.log("[DEBUG-POD] \u{1F4CA} Progress marker: no ad playing, attempting to start");
         const scheduled = this.findCurrentOrNextBreak(
           this.video.currentTime * 1e3
         );
@@ -2742,25 +2746,31 @@ var StormcloudVideoPlayer = class {
           const first = tags[0];
           const rest = tags.slice(1);
           this.adPodQueue = rest;
-          if (!this.showAds) {
-            this.ima.updateOriginalMutedState(this.video.muted, this.video.volume);
-          }
           this.playSingleAd(first).catch(() => {
           });
         }
+      } else {
+        console.log(
+          `[DEBUG-POD] \u{1F4CA} Progress marker: ad playing or request active (playing=${this.ima.isAdPlaying()}, token=${this.activeAdRequestToken})`
+        );
       }
       return;
     }
     if (marker.type === "end") {
+      console.log(
+        `[DEBUG-POD] \u{1F3C1} SCTE-35 end marker received (currentTime: ${this.video.currentTime})`
+      );
       this.inAdBreak = false;
       this.expectedAdBreakDurationMs = void 0;
       this.currentAdBreakStartWallClockMs = void 0;
       this.clearAdStartTimer();
       this.clearAdStopTimer();
       if (this.ima.isAdPlaying()) {
+        console.log("[DEBUG-POD] \u{1F6D1} Stopping ad due to SCTE-35 end marker");
         this.ima.stop().catch(() => {
         });
       }
+      this.handleAdPodComplete();
       return;
     }
   }
@@ -2961,7 +2971,7 @@ var StormcloudVideoPlayer = class {
     }
   }
   async fetchAdConfiguration() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g;
     const vastMode = this.config.vastMode || "default";
     if (this.config.debugAdTiming) {
       console.log("[StormcloudVideoPlayer] VAST mode:", vastMode);
@@ -3032,6 +3042,16 @@ var StormcloudVideoPlayer = class {
         );
       }
     }
+    const numberAds = (_g = (_f = (_e = (_d = data.response) == null ? void 0 : _d.options) == null ? void 0 : _e.vast) == null ? void 0 : _f.cue_tones) == null ? void 0 : _g.number_ads;
+    if (numberAds != null && numberAds > 0) {
+      this.apiNumberAds = numberAds;
+      if (this.config.debugAdTiming) {
+        console.log(
+          "[StormcloudVideoPlayer] Number of ads per break from API:",
+          this.apiNumberAds
+        );
+      }
+    }
   }
   getCurrentAdIndex() {
     return this.currentAdIndex;
@@ -3039,6 +3059,27 @@ var StormcloudVideoPlayer = class {
   getTotalAdsInBreak() {
     return this.totalAdsInBreak;
   }
+  generateVastUrlsWithCorrelators(baseUrl, count) {
+    const urls = [];
+    for (let i = 0; i < count; i++) {
+      try {
+        const url = new URL(baseUrl);
+        const timestamp = Date.now();
+        const random = Math.floor(Math.random() * 1e6);
+        const uniqueCorrelator = `${timestamp}${random}${i}`;
+        url.searchParams.set("correlator", uniqueCorrelator);
+        urls.push(url.toString());
+      } catch (error) {
+        console.warn(
+          "[StormcloudVideoPlayer] Failed to parse VAST URL:",
+          baseUrl,
+          error
+        );
+        urls.push(`${baseUrl}${baseUrl.includes("?") ? "&" : "?"}correlator=${Date.now()}${i}`);
+      }
+    }
+    return urls;
+  }
   isAdPlaying() {
     return this.inAdBreak && this.ima.isAdPlaying();
   }
@@ -3077,7 +3118,52 @@ var StormcloudVideoPlayer = class {
     const tags = this.selectVastTagsForBreak(scheduled);
     let vastTagUrls = [];
     if (this.apiVastTagUrl) {
-      vastTagUrls = [this.apiVastTagUrl];
+      let numberOfAds = 1;
+      if (this.isLiveStream) {
+        const adBreakDurationMs = _marker.durationSeconds != null ? _marker.durationSeconds * 1e3 : scheduled == null ? void 0 : scheduled.durationMs;
+        if (adBreakDurationMs != null && adBreakDurationMs > 0) {
+          this.isAdaptiveMode = true;
+          this.targetAdBreakDurationMs = adBreakDurationMs;
+          this.fetchedAdDurations.clear();
+          numberOfAds = 2;
+          if (this.config.debugAdTiming) {
+            console.log(
+              `[ADAPTIVE-POD] \u{1F4FA} LIVE MODE (ADAPTIVE): Target duration=${adBreakDurationMs}ms | Starting with ${numberOfAds} ads, will fetch actual durations and add more dynamically`
+            );
+          }
+        } else {
+          if (this.config.debugAdTiming) {
+            console.warn(
+              "[DEBUG-POD] \u26A0\uFE0F LIVE MODE: No duration available, defaulting to 1 ad"
+            );
+          }
+        }
+      } else {
+        this.isAdaptiveMode = false;
+        this.targetAdBreakDurationMs = null;
+        this.fetchedAdDurations.clear();
+        if (this.apiNumberAds && this.apiNumberAds > 1) {
+          numberOfAds = this.apiNumberAds;
+          if (this.config.debugAdTiming) {
+            console.log(
+              `[DEBUG-POD] \u{1F3AC} VOD MODE (FIXED): Using number_ads=${numberOfAds} from API`
+            );
+          }
+        }
+      }
+      if (numberOfAds > 1) {
+        vastTagUrls = this.generateVastUrlsWithCorrelators(
+          this.apiVastTagUrl,
+          numberOfAds
+        );
+        if (this.config.debugAdTiming) {
+          console.log(
+            `[DEBUG-POD] \u{1F504} Generated ${vastTagUrls.length} initial VAST URLs with unique correlators`
+          );
+        }
+      } else {
+        vastTagUrls = [this.apiVastTagUrl];
+      }
     } else if (tags && tags.length > 0) {
       vastTagUrls = tags;
     } else {
@@ -3091,10 +3177,12 @@ var StormcloudVideoPlayer = class {
       this.vastToMediaUrlMap.clear();
       this.preloadedMediaUrls.clear();
       this.preloadingMediaUrls.clear();
+      const currentMuted = this.video.muted;
+      const currentVolume = this.video.volume;
       console.log(
-        `[DEBUG-AUDIO] \u{1F4BE} Capturing original state | muted=${this.video.muted}, volume=${this.video.volume}`
+        `[DEBUG-AUDIO] \u{1F4BE} Capturing ORIGINAL state (once) | muted=${currentMuted}, volume=${currentVolume}`
       );
-      this.ima.updateOriginalMutedState(this.video.muted, this.video.volume);
+      this.ima.updateOriginalMutedState(currentMuted, currentVolume);
       this.inAdBreak = true;
       this.currentAdIndex = 0;
       this.totalAdsInBreak = vastTagUrls.length;
@@ -3308,7 +3396,6 @@ var StormcloudVideoPlayer = class {
     this.clearAdRequestWatchdog();
     this.clearAdFailsafeTimer();
     this.activeAdRequestToken = null;
-    this.releaseAdHoldState();
     this.preloadingAdUrls.clear();
     this.vastToMediaUrlMap.clear();
     this.preloadedMediaUrls.clear();
@@ -3325,13 +3412,18 @@ var StormcloudVideoPlayer = class {
     this.totalAdsInBreak = 0;
     this.ima.stop().catch(() => {
     });
-    const originalMutedState = this.ima.getOriginalMutedState();
-    const originalVolume = typeof this.ima.getOriginalVolume === "function" ? this.ima.getOriginalVolume() : this.video.volume;
-    this.video.muted = originalMutedState;
-    this.video.volume = originalVolume;
+    const restoredMuted = this.ima.getOriginalMutedState();
+    const restoredVolume = this.ima.getOriginalVolume();
     console.log(
-      `[DEBUG-AUDIO] \u{1F50A} Main video restored | muted=${originalMutedState}, volume=${originalVolume}`
+      `[DEBUG-AUDIO] \u{1F50A} Audio restored by IMA | muted=${restoredMuted}, volume=${restoredVolume}`
     );
+    console.log("[DEBUG-LAYER] \u{1F3AC} Layers: Main=visible, Ad=hidden, Placeholder=no");
+    if (this.video.muted !== restoredMuted) {
+      this.video.muted = restoredMuted;
+    }
+    if (Math.abs(this.video.volume - restoredVolume) > 0.01) {
+      this.video.volume = restoredVolume;
+    }
     if (!this.shouldContinueLiveStreamDuringAds() && this.video.paused) {
       console.log("[DEBUG-FLOW] \u25B6\uFE0F Resuming main video playback");
       (_a = this.video.play()) == null ? void 0 : _a.catch((error) => {
@@ -3340,20 +3432,20 @@ var StormcloudVideoPlayer = class {
     }
   }
   handleAdFailure() {
+    console.log("[DEBUG-POD] \u274C handleAdFailure - skipping to next ad or ending break");
     const remaining = this.getRemainingAdMs();
-    console.log(
-      `[DEBUG-POD] \u274C handleAdFailure | inBreak=${this.inAdBreak}, showAds=${this.showAds}, remaining=${remaining}ms`
-    );
-    if (remaining > 500 && this.inAdBreak) {
-      console.log(
-        `[DEBUG-POD] \u23F3 Ad failed but ${remaining}ms remaining - showing placeholder until duration expires`
-      );
-      this.showAds = true;
-      this.ima.showPlaceholder();
-      this.enforceAdHoldState();
-      return;
+    if (remaining > 500 && this.adPodQueue.length > 0) {
+      const nextPreloaded = this.findNextPreloadedAd();
+      if (nextPreloaded) {
+        this.currentAdIndex++;
+        console.log(`[DEBUG-POD] \u27A1\uFE0F Trying next ad after failure (${this.currentAdIndex}/${this.totalAdsInBreak})`);
+        this.playSingleAd(nextPreloaded).catch(() => {
+          this.handleAdPodComplete();
+        });
+        return;
+      }
     }
-    console.log("[DEBUG-POD] \u23F9\uFE0F No remaining time - ending ad break now");
+    console.log("[DEBUG-POD] \u23F9\uFE0F Ending ad break after failure");
     this.handleAdPodComplete();
   }
   startAdRequestWatchdog(token) {
@@ -3426,12 +3518,6 @@ var StormcloudVideoPlayer = class {
     }
     return [b.vastTagUrl];
   }
-  logQueuedAdUrls(urls) {
-    if (!this.config.debugAdTiming) {
-      return;
-    }
-    console.log("[StormcloudVideoPlayer] ALL ad URLs queued:", urls);
-  }
   logAdState(event, extra = {}) {
     if (!this.config.debugAdTiming) {
       return;
@@ -3446,22 +3532,6 @@ var StormcloudVideoPlayer = class {
       ...extra
     });
   }
-  enforceAdHoldState() {
-    this.video.dataset.stormcloudAdPlaying = "true";
-    this.video.muted = true;
-    this.video.volume = 0;
-    console.log("[DEBUG-LAYER] \u{1F512} Enforced ad hold state (main video muted)");
-    if (typeof this.ima.showPlaceholder === "function") {
-      this.ima.showPlaceholder();
-    }
-  }
-  releaseAdHoldState() {
-    delete this.video.dataset.stormcloudAdPlaying;
-    console.log("[DEBUG-LAYER] \u{1F513} Released ad hold state");
-    if (typeof this.ima.hidePlaceholder === "function") {
-      this.ima.hidePlaceholder();
-    }
-  }
   async fetchAndParseVastXml(vastTagUrl) {
     try {
       const response = await fetch(vastTagUrl, { mode: "cors" });
@@ -3512,6 +3582,99 @@ var StormcloudVideoPlayer = class {
     }
     return mediaUrls;
   }
+  async fetchVastDuration(vastTagUrl) {
+    var _a;
+    try {
+      const response = await fetch(vastTagUrl, { mode: "cors" });
+      if (!response.ok) {
+        if (this.config.debugAdTiming) {
+          console.warn(
+            `[ADAPTIVE-POD] Failed to fetch VAST: ${response.status}`
+          );
+        }
+        return null;
+      }
+      const xmlText = await response.text();
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(xmlText, "text/xml");
+      const durationText = (_a = xmlDoc.querySelector("Duration")) == null ? void 0 : _a.textContent;
+      if (!durationText) {
+        if (this.config.debugAdTiming) {
+          console.warn("[ADAPTIVE-POD] No Duration element found in VAST");
+        }
+        return null;
+      }
+      const durationParts = durationText.split(":");
+      const durationSeconds = parseInt(durationParts[0] || "0", 10) * 3600 + parseInt(durationParts[1] || "0", 10) * 60 + parseInt(durationParts[2] || "0", 10);
+      return durationSeconds;
+    } catch (error) {
+      if (this.config.debugAdTiming) {
+        console.warn(
+          `[ADAPTIVE-POD] Error fetching VAST duration from ${vastTagUrl}:`,
+          error
+        );
+      }
+      return null;
+    }
+  }
+  calculateAdditionalAdsNeeded() {
+    if (!this.isAdaptiveMode || this.targetAdBreakDurationMs === null) {
+      return 0;
+    }
+    let totalFetchedDurationMs = 0;
+    for (const duration of this.fetchedAdDurations.values()) {
+      totalFetchedDurationMs += duration * 1e3;
+    }
+    const remainingTimeMs = this.targetAdBreakDurationMs - totalFetchedDurationMs;
+    if (remainingTimeMs <= 0) {
+      if (this.config.debugAdTiming) {
+        console.log(
+          `[ADAPTIVE-POD] \u2705 Target duration reached: ${totalFetchedDurationMs}ms / ${this.targetAdBreakDurationMs}ms`
+        );
+      }
+      return 0;
+    }
+    const fetchedCount = this.fetchedAdDurations.size;
+    const averageDurationMs = fetchedCount > 0 ? totalFetchedDurationMs / fetchedCount : 30 * 1e3;
+    const additionalAds = Math.ceil(remainingTimeMs / averageDurationMs);
+    if (this.config.debugAdTiming) {
+      console.log(
+        `[ADAPTIVE-POD] \u{1F4CA} Need ${additionalAds} more ads | Fetched: ${totalFetchedDurationMs}ms / Target: ${this.targetAdBreakDurationMs}ms | Remaining: ${remainingTimeMs}ms | Avg duration: ${averageDurationMs}ms`
+      );
+    }
+    return additionalAds;
+  }
+  async addAdaptiveAdsToQueue() {
+    if (!this.isAdaptiveMode || !this.apiVastTagUrl) {
+      return;
+    }
+    const additionalAds = this.calculateAdditionalAdsNeeded();
+    if (additionalAds <= 0) {
+      return;
+    }
+    const newUrls = this.generateVastUrlsWithCorrelators(
+      this.apiVastTagUrl,
+      additionalAds
+    );
+    if (this.config.debugAdTiming) {
+      console.log(
+        `[ADAPTIVE-POD] \u{1F504} Adding ${newUrls.length} additional VAST URLs to queue`
+      );
+    }
+    this.adPodAllUrls.push(...newUrls);
+    this.adPodQueue.push(...newUrls);
+    this.totalAdsInBreak += newUrls.length;
+    for (const url of newUrls) {
+      this.preloadSingleAd(url).catch((error) => {
+        if (this.config.debugAdTiming) {
+          console.warn(
+            `[ADAPTIVE-POD] Failed to preload adaptive ad:`,
+            error
+          );
+        }
+      });
+    }
+  }
   async preloadMediaFile(mediaUrl) {
     if (this.preloadedMediaUrls.has(mediaUrl)) {
       return;
@@ -3581,6 +3744,18 @@ var StormcloudVideoPlayer = class {
   async preloadSingleAd(vastTagUrl) {
     if (!vastTagUrl) return;
     try {
+      if (this.isAdaptiveMode && !this.fetchedAdDurations.has(vastTagUrl)) {
+        const duration = await this.fetchVastDuration(vastTagUrl);
+        if (duration !== null) {
+          this.fetchedAdDurations.set(vastTagUrl, duration);
+          if (this.config.debugAdTiming) {
+            console.log(
+              `[ADAPTIVE-POD] \u2713 Fetched ad duration: ${duration}s (${this.fetchedAdDurations.size} ads fetched so far)`
+            );
+          }
+          await this.addAdaptiveAdsToQueue();
+        }
+      }
       if (this.ima.preloadAds && !this.ima.hasPreloadedAd(vastTagUrl)) {
         if (!this.preloadingAdUrls.has(vastTagUrl)) {
           if (this.config.debugAdTiming) {
@@ -3826,7 +4001,6 @@ 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.vastToMediaUrlMap.clear();
     this.preloadedMediaUrls.clear();