stormcloud-video-player 0.2.17 → 0.2.18

package/lib/player/StormcloudVideoPlayer.d.cts

@@ -1,4 +1,4 @@
-import { S as StormcloudVideoPlayerConfig } from '../types-mVgmKmzM.cjs';
+import { S as StormcloudVideoPlayerConfig } from '../types-J6-Dpcvw.cjs';
 
 declare class StormcloudVideoPlayer {
     private readonly video;
@@ -23,6 +23,9 @@ declare class StormcloudVideoPlayer {
     private isLiveStream;
     private nativeHlsMode;
     private videoSrcProtection;
+    private bufferedSegmentsCount;
+    private shouldAutoplayAfterBuffering;
+    private hasInitialBufferCompleted;
     constructor(config: StormcloudVideoPlayerConfig);
     private createAdPlayer;
     load(): Promise<void>;
@@ -68,6 +71,7 @@ declare class StormcloudVideoPlayer {
     toggleMute(): void;
     toggleFullscreen(): Promise<void>;
     isMuted(): boolean;
+    setMuted(muted: boolean): void;
     isFullscreen(): boolean;
     isLive(): boolean;
     get videoElement(): HTMLVideoElement;

package/lib/players/HlsPlayer.cjs

@@ -203,6 +203,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;
@@ -445,7 +452,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";
@@ -498,11 +510,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";
@@ -518,6 +532,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";
@@ -541,6 +556,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";
@@ -571,6 +587,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";
@@ -600,7 +617,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";
@@ -652,12 +674,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(() => {
           });
@@ -669,6 +699,7 @@ function createImaController(video, options) {
       var _a;
       adPlaying = false;
       video.muted = originalMutedState;
+      setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
         adContainerEl.style.display = "none";
@@ -692,6 +723,7 @@ function createImaController(video, options) {
       destroyAdsManager();
       adPlaying = false;
       video.muted = originalMutedState;
+      setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
         adContainerEl.style.display = "none";
@@ -734,6 +766,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() {
@@ -790,7 +825,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
+        );
       }
     }
   }
@@ -853,7 +891,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);
@@ -889,7 +929,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");
@@ -905,17 +948,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");
@@ -929,12 +978,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");
         }
@@ -997,6 +1050,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() {
@@ -1056,10 +1113,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";
@@ -1077,7 +1146,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";
@@ -1114,7 +1188,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 {
@@ -1125,14 +1201,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();
@@ -1144,7 +1226,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");
@@ -1162,6 +1246,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)");
@@ -1170,6 +1255,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";
@@ -1222,6 +1316,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";
@@ -1244,6 +1339,7 @@ function createHlsAdPlayer(contentVideo, options) {
     destroy() {
       console.log("[HlsAdPlayer] Destroying");
       adPlaying = false;
+      setAdPlayingFlag(false);
       contentVideo.muted = originalMutedState;
       if (adHls) {
         adHls.destroy();
@@ -1285,6 +1381,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() {
@@ -1777,6 +1876,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 };
@@ -1863,14 +1965,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;
@@ -1888,9 +1998,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) => {
@@ -1986,6 +2138,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(
@@ -2770,7 +2923,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);
@@ -2825,11 +2994,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) {
@@ -2921,6 +3091,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);
       }
@@ -2965,11 +3136,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;
   }
@@ -3080,6 +3287,8 @@ var HlsPlayer = class extends import_react.Component {
           config.licenseKey = this.props.licenseKey;
         if (this.props.adFailsafeTimeoutMs !== void 0)
           config.adFailsafeTimeoutMs = this.props.adFailsafeTimeoutMs;
+        if (this.props.minSegmentsBeforePlay !== void 0)
+          config.minSegmentsBeforePlay = this.props.minSegmentsBeforePlay;
         this.player = new StormcloudVideoPlayer(config);
         (_b = (_a = this.props).onMount) == null ? void 0 : _b.call(_a, this);
         await this.player.load();