stormcloud-video-player 0.2.17 → 0.2.18

package/lib/player/StormcloudVideoPlayer.cjs

@@ -200,6 +200,13 @@ function createImaController(video, options) {
   let adPlaying = false;
   let originalMutedState = false;
   const listeners = /* @__PURE__ */ new Map();
+  function setAdPlayingFlag(isPlaying) {
+    if (isPlaying) {
+      video.dataset.stormcloudAdPlaying = "true";
+    } else {
+      delete video.dataset.stormcloudAdPlaying;
+    }
+  }
   function emit(event, payload) {
     const set = listeners.get(event);
     if (!set) return;
@@ -442,7 +449,12 @@ function createImaController(video, options) {
                     console.error("[IMA] Ad error:", errorEvent.getError());
                     destroyAdsManager();
                     adPlaying = false;
+                    const previousMutedState = video.muted;
                     video.muted = originalMutedState;
+                    setAdPlayingFlag(false);
+                    console.log(
+                      `[IMA] Restored mute state after ad error: ${previousMutedState} -> ${originalMutedState}`
+                    );
                     if (adContainerEl) {
                       adContainerEl.style.pointerEvents = "none";
                       adContainerEl.style.display = "none";
@@ -495,11 +507,13 @@ function createImaController(video, options) {
                     }
                     video.muted = true;
                     adPlaying = true;
+                    setAdPlayingFlag(true);
                     emit("content_pause");
                   }
                 );
                 adsManager.addEventListener(AdEvent.STARTED, () => {
                   console.log("[IMA] Ad started playing");
+                  setAdPlayingFlag(true);
                   if (adContainerEl) {
                     adContainerEl.style.pointerEvents = "auto";
                     adContainerEl.style.display = "flex";
@@ -515,6 +529,7 @@ function createImaController(video, options) {
                     console.log("[IMA] Content resume requested");
                     adPlaying = false;
                     video.muted = originalMutedState;
+                    setAdPlayingFlag(false);
                     if (adContainerEl) {
                       adContainerEl.style.pointerEvents = "none";
                       adContainerEl.style.display = "none";
@@ -538,6 +553,7 @@ function createImaController(video, options) {
                   console.log("[IMA] All ads completed");
                   adPlaying = false;
                   video.muted = originalMutedState;
+                  setAdPlayingFlag(false);
                   if (adContainerEl) {
                     adContainerEl.style.pointerEvents = "none";
                     adContainerEl.style.display = "none";
@@ -568,6 +584,7 @@ function createImaController(video, options) {
                 console.error("[IMA] Error setting up ads manager:", e);
                 adPlaying = false;
                 video.muted = originalMutedState;
+                setAdPlayingFlag(false);
                 if (adContainerEl) {
                   adContainerEl.style.pointerEvents = "none";
                   adContainerEl.style.display = "none";
@@ -597,7 +614,12 @@ function createImaController(video, options) {
             (adErrorEvent) => {
               console.error("[IMA] Ads loader error:", adErrorEvent.getError());
               adPlaying = false;
+              const previousMutedState = video.muted;
               video.muted = originalMutedState;
+              setAdPlayingFlag(false);
+              console.log(
+                `[IMA] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
+              );
               if (adContainerEl) {
                 adContainerEl.style.pointerEvents = "none";
                 adContainerEl.style.display = "none";
@@ -649,12 +671,20 @@ function createImaController(video, options) {
         console.log(`[IMA] Initializing ads manager (${width}x${height})`);
         adsManager.init(width, height, window.google.ima.ViewMode.NORMAL);
         adPlaying = true;
+        const adVolume = originalMutedState ? 0 : video.volume;
+        try {
+          adsManager.setVolume(adVolume);
+          console.log(`[IMA] Set ad volume to ${adVolume}`);
+        } catch (error) {
+          console.warn("[IMA] Failed to set ad volume:", error);
+        }
         console.log("[IMA] Starting ad playback");
         adsManager.start();
         return Promise.resolve();
       } catch (error) {
         console.error("[IMA] Error starting ad playback:", error);
         adPlaying = false;
+        setAdPlayingFlag(false);
         if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
           (_b = video.play()) == null ? void 0 : _b.catch(() => {
           });
@@ -666,6 +696,7 @@ function createImaController(video, options) {
       var _a;
       adPlaying = false;
       video.muted = originalMutedState;
+      setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
         adContainerEl.style.display = "none";
@@ -689,6 +720,7 @@ function createImaController(video, options) {
       destroyAdsManager();
       adPlaying = false;
       video.muted = originalMutedState;
+      setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
         adContainerEl.style.display = "none";
@@ -731,6 +763,9 @@ function createImaController(video, options) {
       (_a = listeners.get(event)) == null ? void 0 : _a.delete(listener);
     },
     updateOriginalMutedState(muted) {
+      console.log(
+        `[IMA] updateOriginalMutedState called: ${originalMutedState} -> ${muted}`
+      );
       originalMutedState = muted;
     },
     getOriginalMutedState() {
@@ -787,7 +822,10 @@ function createHlsAdPlayer(contentVideo, options) {
       try {
         fn(payload);
       } catch (error) {
-        console.warn(`[HlsAdPlayer] Error in event listener for ${event}:`, error);
+        console.warn(
+          `[HlsAdPlayer] Error in event listener for ${event}:`,
+          error
+        );
       }
     }
   }
@@ -850,7 +888,9 @@ function createHlsAdPlayer(contentVideo, options) {
     }
     const mainQuality = getMainStreamQuality();
     if (!mainQuality) {
-      console.log("[HlsAdPlayer] No main stream quality info, using first media file");
+      console.log(
+        "[HlsAdPlayer] No main stream quality info, using first media file"
+      );
       return firstFile;
     }
     console.log("[HlsAdPlayer] Main stream quality:", mainQuality);
@@ -886,7 +926,10 @@ function createHlsAdPlayer(contentVideo, options) {
       const xmlDoc = parser.parseFromString(xmlString, "text/xml");
       const parserError = xmlDoc.querySelector("parsererror");
       if (parserError) {
-        console.error("[HlsAdPlayer] XML parsing error (malformed VAST XML):", parserError.textContent);
+        console.error(
+          "[HlsAdPlayer] XML parsing error (malformed VAST XML):",
+          parserError.textContent
+        );
         return null;
       }
       const adElement = xmlDoc.querySelector("Ad");
@@ -902,17 +945,23 @@ function createHlsAdPlayer(contentVideo, options) {
       const duration = parseInt(durationParts[0] || "0", 10) * 3600 + parseInt(durationParts[1] || "0", 10) * 60 + parseInt(durationParts[2] || "0", 10);
       const mediaFileElements = xmlDoc.querySelectorAll("MediaFile");
       const mediaFiles = [];
-      console.log(`[HlsAdPlayer] Found ${mediaFileElements.length} MediaFile element(s) in VAST XML`);
+      console.log(
+        `[HlsAdPlayer] Found ${mediaFileElements.length} MediaFile element(s) in VAST XML`
+      );
       mediaFileElements.forEach((mf, index) => {
         var _a2;
         const type = mf.getAttribute("type") || "";
         const url = ((_a2 = mf.textContent) == null ? void 0 : _a2.trim()) || "";
         const width = mf.getAttribute("width") || "";
         const height = mf.getAttribute("height") || "";
-        console.log(`[HlsAdPlayer] MediaFile ${index}: type="${type}", url="${url}", width="${width}", height="${height}"`);
+        console.log(
+          `[HlsAdPlayer] MediaFile ${index}: type="${type}", url="${url}", width="${width}", height="${height}"`
+        );
         if (type === "application/x-mpegURL" || type.includes("m3u8")) {
           if (!url) {
-            console.warn(`[HlsAdPlayer] MediaFile ${index} has HLS type but empty URL`);
+            console.warn(
+              `[HlsAdPlayer] MediaFile ${index} has HLS type but empty URL`
+            );
             return;
           }
           const bitrateAttr = mf.getAttribute("bitrate");
@@ -926,12 +975,16 @@ function createHlsAdPlayer(contentVideo, options) {
           });
           console.log(`[HlsAdPlayer] Added HLS MediaFile: ${url}`);
         } else {
-          console.log(`[HlsAdPlayer] MediaFile ${index} ignored (type="${type}" is not HLS)`);
+          console.log(
+            `[HlsAdPlayer] MediaFile ${index} ignored (type="${type}" is not HLS)`
+          );
         }
       });
       if (mediaFiles.length === 0) {
         if (isNoAdAvailable) {
-          console.warn("[HlsAdPlayer] No ads available (VAST response indicates no ads)");
+          console.warn(
+            "[HlsAdPlayer] No ads available (VAST response indicates no ads)"
+          );
         } else {
           console.warn("[HlsAdPlayer] No HLS media files found in VAST XML");
         }
@@ -994,6 +1047,10 @@ function createHlsAdPlayer(contentVideo, options) {
     video.style.backgroundColor = "#000";
     video.playsInline = true;
     video.muted = false;
+    video.volume = 1;
+    console.log(
+      `[HlsAdPlayer] Created ad video element with volume ${video.volume}`
+    );
     return video;
   }
   function setupAdEventListeners() {
@@ -1053,10 +1110,22 @@ function createHlsAdPlayer(contentVideo, options) {
       }
     });
   }
+  function setAdPlayingFlag(isPlaying) {
+    if (isPlaying) {
+      contentVideo.dataset.stormcloudAdPlaying = "true";
+    } else {
+      delete contentVideo.dataset.stormcloudAdPlaying;
+    }
+  }
   function handleAdComplete() {
     console.log("[HlsAdPlayer] Handling ad completion");
     adPlaying = false;
+    setAdPlayingFlag(false);
+    const previousMutedState = contentVideo.muted;
     contentVideo.muted = originalMutedState;
+    console.log(
+      `[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
+    );
     if (adContainerEl) {
       adContainerEl.style.display = "none";
       adContainerEl.style.pointerEvents = "none";
@@ -1074,7 +1143,12 @@ function createHlsAdPlayer(contentVideo, options) {
   function handleAdError() {
     console.log("[HlsAdPlayer] Handling ad error");
     adPlaying = false;
+    setAdPlayingFlag(false);
+    const previousMutedState = contentVideo.muted;
     contentVideo.muted = originalMutedState;
+    console.log(
+      `[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
+    );
     if (adContainerEl) {
       adContainerEl.style.display = "none";
       adContainerEl.style.pointerEvents = "none";
@@ -1111,7 +1185,9 @@ function createHlsAdPlayer(contentVideo, options) {
     async requestAds(vastTagUrl) {
       console.log("[HlsAdPlayer] Requesting ads:", vastTagUrl);
       if (adPlaying) {
-        console.warn("[HlsAdPlayer] Cannot request new ads while an ad is playing");
+        console.warn(
+          "[HlsAdPlayer] Cannot request new ads while an ad is playing"
+        );
         return Promise.reject(new Error("Ad already playing"));
       }
       try {
@@ -1122,14 +1198,20 @@ function createHlsAdPlayer(contentVideo, options) {
         }
         const vastXml = await response.text();
         console.log("[HlsAdPlayer] VAST XML received");
-        console.log("[HlsAdPlayer] VAST XML content (first 2000 chars):", vastXml.substring(0, 2e3));
+        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");
           return Promise.resolve();
         }
         currentAd = ad;
-        console.log(`[HlsAdPlayer] Ad parsed: ${ad.title}, duration: ${ad.duration}s`);
+        console.log(
+          `[HlsAdPlayer] Ad parsed: ${ad.title}, duration: ${ad.duration}s`
+        );
         fireTrackingPixels(ad.trackingUrls.impression);
         trackingFired.impression = true;
         return Promise.resolve();
@@ -1141,7 +1223,9 @@ function createHlsAdPlayer(contentVideo, options) {
     },
     async play() {
       if (!currentAd) {
-        console.warn("[HlsAdPlayer] Cannot play: No ad loaded (no ads available)");
+        console.warn(
+          "[HlsAdPlayer] Cannot play: No ad loaded (no ads available)"
+        );
         return Promise.reject(new Error("No ad loaded"));
       }
       console.log("[HlsAdPlayer] Starting ad playback");
@@ -1159,6 +1243,7 @@ function createHlsAdPlayer(contentVideo, options) {
           thirdQuartile: false,
           complete: false
         };
+        const contentVolume = contentVideo.volume;
         if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
           contentVideo.pause();
           console.log("[HlsAdPlayer] Content paused (VOD mode)");
@@ -1167,6 +1252,15 @@ function createHlsAdPlayer(contentVideo, options) {
         }
         contentVideo.muted = true;
         adPlaying = true;
+        setAdPlayingFlag(true);
+        if (adVideoElement) {
+          const adVolume = originalMutedState ? 0 : contentVolume;
+          adVideoElement.volume = Math.max(0, Math.min(1, adVolume));
+          adVideoElement.muted = false;
+          console.log(
+            `[HlsAdPlayer] Set ad video volume to ${adVideoElement.volume}, muted: ${adVideoElement.muted}, originalMutedState: ${originalMutedState}, contentVolume: ${contentVolume}`
+          );
+        }
         if (adContainerEl) {
           adContainerEl.style.display = "flex";
           adContainerEl.style.pointerEvents = "auto";
@@ -1219,6 +1313,7 @@ function createHlsAdPlayer(contentVideo, options) {
     async stop() {
       console.log("[HlsAdPlayer] Stopping ad");
       adPlaying = false;
+      setAdPlayingFlag(false);
       contentVideo.muted = originalMutedState;
       if (adContainerEl) {
         adContainerEl.style.display = "none";
@@ -1241,6 +1336,7 @@ function createHlsAdPlayer(contentVideo, options) {
     destroy() {
       console.log("[HlsAdPlayer] Destroying");
       adPlaying = false;
+      setAdPlayingFlag(false);
       contentVideo.muted = originalMutedState;
       if (adHls) {
         adHls.destroy();
@@ -1282,6 +1378,9 @@ function createHlsAdPlayer(contentVideo, options) {
       (_a = listeners.get(event)) == null ? void 0 : _a.delete(listener);
     },
     updateOriginalMutedState(muted) {
+      console.log(
+        `[HlsAdPlayer] updateOriginalMutedState called: ${originalMutedState} -> ${muted}`
+      );
       originalMutedState = muted;
     },
     getOriginalMutedState() {
@@ -1774,6 +1873,9 @@ var StormcloudVideoPlayer = class {
     this.isLiveStream = false;
     this.nativeHlsMode = false;
     this.videoSrcProtection = null;
+    this.bufferedSegmentsCount = 0;
+    this.shouldAutoplayAfterBuffering = false;
+    this.hasInitialBufferCompleted = false;
     initializePolyfills();
     const browserOverrides = getBrowserConfigOverrides();
     this.config = { ...config, ...browserOverrides };
@@ -1860,14 +1962,22 @@ var StormcloudVideoPlayer = class {
       liveDurationInfinity: true,
       lowLatencyMode: !!this.config.lowLatencyMode,
       maxLiveSyncPlaybackRate: this.config.lowLatencyMode ? 1.5 : 1,
-      ...this.config.lowLatencyMode ? { liveSyncDuration: 2 } : {}
+      ...this.config.lowLatencyMode ? { liveSyncDuration: 2 } : {},
+      maxBufferLength: 30,
+      maxMaxBufferLength: 600,
+      maxBufferSize: 60 * 1e3 * 1e3,
+      maxBufferHole: 0.5,
+      highBufferWatchdogPeriod: 2,
+      nudgeOffset: 0.1,
+      nudgeMaxRetry: 3,
+      startPosition: -1
     });
     this.hls.on(import_hls2.default.Events.MEDIA_ATTACHED, () => {
       var _a2;
       (_a2 = this.hls) == null ? void 0 : _a2.loadSource(this.config.src);
     });
     this.hls.on(import_hls2.default.Events.MANIFEST_PARSED, async (_, data) => {
-      var _a2, _b2, _c, _d;
+      var _a2, _b2, _c, _d, _e;
       this.isLiveStream = (_c = (_b2 = (_a2 = this.hls) == null ? void 0 : _a2.levels) == null ? void 0 : _b2.some(
         (level) => {
           var _a3, _b3;
@@ -1885,9 +1995,51 @@ var StormcloudVideoPlayer = class {
       this.ima.destroy();
       this.ima = this.createAdPlayer(this.shouldContinueLiveStreamDuringAds());
       this.ima.initialize();
-      if (this.config.autoplay) {
-        await ((_d = this.video.play()) == null ? void 0 : _d.catch(() => {
-        }));
+      this.bufferedSegmentsCount = 0;
+      this.hasInitialBufferCompleted = false;
+      this.shouldAutoplayAfterBuffering = !!this.config.autoplay;
+      const minSegments = (_d = this.config.minSegmentsBeforePlay) != null ? _d : 2;
+      if (this.config.debugAdTiming) {
+        console.log(
+          "[StormcloudVideoPlayer] Waiting for",
+          minSegments,
+          "segments to buffer before playback"
+        );
+      }
+      if (minSegments === 0 || !this.config.autoplay) {
+        this.hasInitialBufferCompleted = true;
+        if (this.config.autoplay) {
+          await ((_e = this.video.play()) == null ? void 0 : _e.catch(() => {
+          }));
+        }
+      }
+    });
+    this.hls.on(import_hls2.default.Events.FRAG_BUFFERED, async (_evt, data) => {
+      var _a2, _b2;
+      if (this.hasInitialBufferCompleted) {
+        return;
+      }
+      this.bufferedSegmentsCount++;
+      const minSegments = (_a2 = this.config.minSegmentsBeforePlay) != null ? _a2 : 2;
+      if (this.config.debugAdTiming) {
+        console.log(
+          `[StormcloudVideoPlayer] Buffered segment ${this.bufferedSegmentsCount}/${minSegments}`
+        );
+      }
+      if (this.bufferedSegmentsCount >= minSegments) {
+        this.hasInitialBufferCompleted = true;
+        if (this.shouldAutoplayAfterBuffering) {
+          if (this.config.debugAdTiming) {
+            console.log(
+              `[StormcloudVideoPlayer] Initial buffer complete (${this.bufferedSegmentsCount} segments). Starting playback.`
+            );
+          }
+          await ((_b2 = this.video.play()) == null ? void 0 : _b2.catch((err) => {
+            if (this.config.debugAdTiming) {
+              console.warn("[StormcloudVideoPlayer] Autoplay failed:", err);
+            }
+          }));
+        }
       }
     });
     this.hls.on(import_hls2.default.Events.FRAG_PARSING_METADATA, (_evt, data) => {
@@ -1983,6 +2135,7 @@ var StormcloudVideoPlayer = class {
     this.video.autoplay = !!this.config.autoplay;
     this.video.muted = !!this.config.muted;
     this.ima.initialize();
+    this.ima.updateOriginalMutedState(this.video.muted);
     this.ima.on("all_ads_completed", () => {
       if (this.config.debugAdTiming) {
         console.log(
@@ -2767,7 +2920,23 @@ var StormcloudVideoPlayer = class {
       }
       return;
     }
-    this.ima.updateOriginalMutedState(this.video.muted);
+    if (!this.showAds) {
+      if (this.config.debugAdTiming) {
+        console.log(
+          `[StormcloudVideoPlayer] Capturing original state before ad request:`,
+          {
+            videoMuted: this.video.muted,
+            videoVolume: this.video.volume,
+            showAds: this.showAds
+          }
+        );
+      }
+      this.ima.updateOriginalMutedState(this.video.muted);
+    } else if (this.config.debugAdTiming) {
+      console.log(
+        `[StormcloudVideoPlayer] Keeping existing original mute state (currently showing ads)`
+      );
+    }
     this.startAdFailsafeTimer();
     try {
       await this.ima.requestAds(vastTagUrl);
@@ -2822,11 +2991,12 @@ var StormcloudVideoPlayer = class {
     this.showAds = false;
     this.currentAdIndex = 0;
     this.totalAdsInBreak = 0;
+    const currentMutedState = this.video.muted;
     const originalMutedState = this.ima.getOriginalMutedState();
     this.video.muted = originalMutedState;
     if (this.config.debugAdTiming) {
       console.log(
-        `[StormcloudVideoPlayer] Restored mute state to: ${originalMutedState}`
+        `[StormcloudVideoPlayer] Restored mute state: ${currentMutedState} -> ${originalMutedState}`
       );
     }
     if (this.video.paused) {
@@ -2918,6 +3088,7 @@ var StormcloudVideoPlayer = class {
       }
     } else {
       this.video.muted = !this.video.muted;
+      this.ima.updateOriginalMutedState(this.video.muted);
       if (this.config.debugAdTiming) {
         console.log("[StormcloudVideoPlayer] Muted:", this.video.muted);
       }
@@ -2962,11 +3133,47 @@ var StormcloudVideoPlayer = class {
   }
   isMuted() {
     if (this.ima.isAdPlaying()) {
-      const adVolume = this.ima.getAdVolume();
-      return adVolume === 0;
+      if (this.config.debugAdTiming) {
+        console.log(
+          "[StormcloudVideoPlayer] isMuted() override during ad playback -> false"
+        );
+      }
+      return false;
+    }
+    if (this.config.debugAdTiming) {
+      console.log(
+        `[StormcloudVideoPlayer] isMuted() no ad playing: video.muted=${this.video.muted}`
+      );
     }
     return this.video.muted;
   }
+  setMuted(muted) {
+    const adPlaying = this.ima.isAdPlaying();
+    if (adPlaying && muted === this.video.muted) {
+      if (this.config.debugAdTiming) {
+        console.log(
+          "[StormcloudVideoPlayer] setMuted reflective update during ad ignored",
+          { muted }
+        );
+      }
+      return;
+    }
+    this.video.muted = muted;
+    if (adPlaying) {
+      this.ima.updateOriginalMutedState(muted);
+      this.ima.setAdVolume(muted ? 0 : 1);
+      if (this.config.debugAdTiming) {
+        console.log("[StormcloudVideoPlayer] setMuted applied during ad", {
+          muted
+        });
+      }
+      return;
+    }
+    this.ima.updateOriginalMutedState(muted);
+    if (this.config.debugAdTiming) {
+      console.log("[StormcloudVideoPlayer] setMuted called:", muted);
+    }
+  }
   isFullscreen() {
     return !!document.fullscreenElement;
   }