stormcloud-video-player 0.2.17 → 0.2.18

package/lib/index.js

@@ -198,6 +198,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;
@@ -440,7 +447,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";
@@ -493,11 +505,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";
@@ -513,6 +527,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";
@@ -536,6 +551,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";
@@ -566,6 +582,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";
@@ -595,7 +612,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";
@@ -647,12 +669,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(() => {
           });
@@ -664,6 +694,7 @@ function createImaController(video, options) {
       var _a;
       adPlaying = false;
       video.muted = originalMutedState;
+      setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
         adContainerEl.style.display = "none";
@@ -687,6 +718,7 @@ function createImaController(video, options) {
       destroyAdsManager();
       adPlaying = false;
       video.muted = originalMutedState;
+      setAdPlayingFlag(false);
       if (adContainerEl) {
         adContainerEl.style.pointerEvents = "none";
         adContainerEl.style.display = "none";
@@ -729,6 +761,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() {
@@ -785,7 +820,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
+        );
       }
     }
   }
@@ -848,7 +886,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);
@@ -884,7 +924,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");
@@ -900,17 +943,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");
@@ -924,12 +973,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");
         }
@@ -992,6 +1045,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() {
@@ -1051,10 +1108,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";
@@ -1072,7 +1141,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";
@@ -1109,7 +1183,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 {
@@ -1120,14 +1196,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();
@@ -1139,7 +1221,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");
@@ -1157,6 +1241,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)");
@@ -1165,6 +1250,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";
@@ -1217,6 +1311,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";
@@ -1239,6 +1334,7 @@ function createHlsAdPlayer(contentVideo, options) {
     destroy() {
       console.log("[HlsAdPlayer] Destroying");
       adPlaying = false;
+      setAdPlayingFlag(false);
       contentVideo.muted = originalMutedState;
       if (adHls) {
         adHls.destroy();
@@ -1280,6 +1376,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() {
@@ -1772,6 +1871,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 };
@@ -1858,14 +1960,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(Hls2.Events.MEDIA_ATTACHED, () => {
       var _a2;
       (_a2 = this.hls) == null ? void 0 : _a2.loadSource(this.config.src);
     });
     this.hls.on(Hls2.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;
@@ -1883,9 +1993,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(Hls2.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(Hls2.Events.FRAG_PARSING_METADATA, (_evt, data) => {
@@ -1981,6 +2133,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(
@@ -2765,7 +2918,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);
@@ -2820,11 +2989,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) {
@@ -2916,6 +3086,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);
       }
@@ -2960,11 +3131,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;
   }
@@ -3052,10 +3259,12 @@ var StormcloudVideoPlayerComponent = React.memo(
       vastMode,
       vastTagUrl,
       adPlayerType,
+      minSegmentsBeforePlay,
       ...restVideoAttrs
     } = props;
     const videoRef = useRef(null);
     const playerRef = useRef(null);
+    const bufferingTimeoutRef = useRef(null);
     const [adStatus, setAdStatus] = React.useState({ showAds: false, currentIndex: 0, totalAds: 0 });
     const [shouldShowNativeControls, setShouldShowNativeControls] = React.useState(true);
     const [isMuted, setIsMuted] = React.useState(false);
@@ -3177,6 +3386,9 @@ var StormcloudVideoPlayerComponent = React.memo(
         return;
       }
       setShowLicenseWarning(false);
+      if (debugAdTiming) {
+        console.log("[StormcloudUI] Initializing player, isLoading=true");
+      }
       if (playerRef.current) {
         try {
           playerRef.current.destroy();
@@ -3207,17 +3419,25 @@ var StormcloudVideoPlayerComponent = React.memo(
       if (vastMode !== void 0) cfg.vastMode = vastMode;
       if (vastTagUrl !== void 0) cfg.vastTagUrl = vastTagUrl;
       if (adPlayerType !== void 0) cfg.adPlayerType = adPlayerType;
+      if (minSegmentsBeforePlay !== void 0)
+        cfg.minSegmentsBeforePlay = minSegmentsBeforePlay;
       const player = new StormcloudVideoPlayer(cfg);
       playerRef.current = player;
       player.load().then(() => {
         const showNative = player.shouldShowNativeControls();
         setShouldShowNativeControls(showNative);
+        if (debugAdTiming) {
+          console.log(
+            "[StormcloudUI] Player loaded successfully, waiting for video ready"
+          );
+        }
         onReady == null ? void 0 : onReady(player);
       }).catch((error) => {
         console.error(
           "StormcloudVideoPlayer: Failed to load player:",
           error
         );
+        setIsLoading(false);
         onReady == null ? void 0 : onReady(player);
       });
       return () => {
@@ -3234,8 +3454,8 @@ var StormcloudVideoPlayerComponent = React.memo(
         if (autoplay !== void 0 && playerRef.current.videoElement) {
           playerRef.current.videoElement.autoplay = autoplay;
         }
-        if (muted !== void 0 && playerRef.current.videoElement) {
-          playerRef.current.videoElement.muted = muted;
+        if (muted !== void 0) {
+          playerRef.current.setMuted(muted);
         }
       } catch (error) {
         console.warn("Failed to update player properties:", error);
@@ -3316,26 +3536,108 @@ var StormcloudVideoPlayerComponent = React.memo(
     useEffect(() => {
       if (!videoRef.current) return;
       const handleLoadedMetadata = () => {
+        var _a;
         if (videoRef.current) {
           const video2 = videoRef.current;
           void video2.offsetHeight;
         }
+        if (debugAdTiming) {
+          console.log(
+            "[StormcloudUI] Video event: loadedmetadata, readyState:",
+            (_a = videoRef.current) == null ? void 0 : _a.readyState
+          );
+        }
+      };
+      const handleLoadedData = () => {
+        var _a;
+        if (debugAdTiming) {
+          console.log(
+            "[StormcloudUI] Video event: loadeddata, readyState:",
+            (_a = videoRef.current) == null ? void 0 : _a.readyState
+          );
+        }
       };
       const handleLoadStart = () => {
-        setIsLoading(true);
-        setIsBuffering(false);
+        var _a;
+        if (debugAdTiming) {
+          console.log(
+            "[StormcloudUI] Video event: loadstart, readyState:",
+            (_a = videoRef.current) == null ? void 0 : _a.readyState
+          );
+        }
       };
       const handleCanPlay = () => {
+        var _a;
         setIsLoading(false);
+        if (bufferingTimeoutRef.current) {
+          clearTimeout(bufferingTimeoutRef.current);
+          bufferingTimeoutRef.current = null;
+        }
         setIsBuffering(false);
+        if (debugAdTiming) {
+          console.log(
+            "[StormcloudUI] Video event: canplay, readyState:",
+            (_a = videoRef.current) == null ? void 0 : _a.readyState,
+            "- clearing loading state, isLoading=false"
+          );
+        }
+      };
+      const handleCanPlayThrough = () => {
+        var _a;
+        setIsLoading(false);
+        if (bufferingTimeoutRef.current) {
+          clearTimeout(bufferingTimeoutRef.current);
+          bufferingTimeoutRef.current = null;
+        }
+        setIsBuffering(false);
+        if (debugAdTiming) {
+          console.log(
+            "[StormcloudUI] Video event: canplaythrough, readyState:",
+            (_a = videoRef.current) == null ? void 0 : _a.readyState,
+            "- clearing loading state, isLoading=false"
+          );
+        }
       };
       const handleWaiting = () => {
-        setIsBuffering(true);
+        var _a;
+        if (bufferingTimeoutRef.current) {
+          clearTimeout(bufferingTimeoutRef.current);
+        }
+        bufferingTimeoutRef.current = window.setTimeout(() => {
+          var _a2;
+          setIsBuffering(true);
+          if (debugAdTiming) {
+            console.log(
+              "[StormcloudUI] Video buffering detected (after 300ms delay), readyState:",
+              (_a2 = videoRef.current) == null ? void 0 : _a2.readyState,
+              "- showing spinner, isBuffering=true"
+            );
+          }
+        }, 300);
+        if (debugAdTiming) {
+          console.log(
+            "[StormcloudUI] Video event: waiting, readyState:",
+            (_a = videoRef.current) == null ? void 0 : _a.readyState,
+            "- buffering delay started (300ms)"
+          );
+        }
       };
       const handlePlaying = () => {
+        var _a;
         setIsLoading(false);
+        if (bufferingTimeoutRef.current) {
+          clearTimeout(bufferingTimeoutRef.current);
+          bufferingTimeoutRef.current = null;
+        }
         setIsBuffering(false);
         setShowCenterPlay(false);
+        if (debugAdTiming) {
+          console.log(
+            "[StormcloudUI] Video event: playing, readyState:",
+            (_a = videoRef.current) == null ? void 0 : _a.readyState,
+            "- playback started, isLoading=false, isBuffering=false"
+          );
+        }
       };
       const handlePause = () => {
         if (playerRef.current && !playerRef.current.isShowingAds()) {
@@ -3350,8 +3652,9 @@ var StormcloudVideoPlayerComponent = React.memo(
       const video = videoRef.current;
       video.addEventListener("loadstart", handleLoadStart);
       video.addEventListener("loadedmetadata", handleLoadedMetadata);
-      video.addEventListener("loadeddata", handleLoadedMetadata);
+      video.addEventListener("loadeddata", handleLoadedData);
       video.addEventListener("canplay", handleCanPlay);
+      video.addEventListener("canplaythrough", handleCanPlayThrough);
       video.addEventListener("waiting", handleWaiting);
       video.addEventListener("playing", handlePlaying);
       video.addEventListener("pause", handlePause);
@@ -3360,16 +3663,21 @@ var StormcloudVideoPlayerComponent = React.memo(
         setShowCenterPlay(true);
       }
       return () => {
+        if (bufferingTimeoutRef.current) {
+          clearTimeout(bufferingTimeoutRef.current);
+          bufferingTimeoutRef.current = null;
+        }
         video.removeEventListener("loadstart", handleLoadStart);
         video.removeEventListener("loadedmetadata", handleLoadedMetadata);
-        video.removeEventListener("loadeddata", handleLoadedMetadata);
+        video.removeEventListener("loadeddata", handleLoadedData);
         video.removeEventListener("canplay", handleCanPlay);
+        video.removeEventListener("canplaythrough", handleCanPlayThrough);
         video.removeEventListener("waiting", handleWaiting);
         video.removeEventListener("playing", handlePlaying);
         video.removeEventListener("pause", handlePause);
         video.removeEventListener("ended", handleEnded);
       };
-    }, []);
+    }, [debugAdTiming]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("style", { children: `
               @keyframes spin {
@@ -3476,35 +3784,18 @@ var StormcloudVideoPlayerComponent = React.memo(
               }
             ),
             (isLoading || isBuffering) && /* @__PURE__ */ jsx(
-              "div",
+              FaSpinner,
               {
+                size: 42,
+                color: "white",
                 style: {
                   position: "absolute",
-                  top: "50%",
-                  left: "50%",
-                  transform: "translate(-50%, -50%)",
+                  top: "calc(50% - 21px)",
+                  left: "calc(50% - 21px)",
                   zIndex: 20,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  background: "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.6) 100%)",
-                  width: "80px",
-                  height: "80px",
-                  borderRadius: "50%",
-                  backdropFilter: "blur(20px)",
-                  boxShadow: "0 12px 40px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1)"
-                },
-                children: /* @__PURE__ */ jsx(
-                  FaSpinner,
-                  {
-                    size: 28,
-                    color: "white",
-                    style: {
-                      animation: "spin 1s linear infinite",
-                      filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8))"
-                    }
-                  }
-                )
+                  animation: "spin 1s linear infinite",
+                  filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8))"
+                }
               }
             ),
             showLicenseWarning && /* @__PURE__ */ jsxs(
@@ -4617,6 +4908,7 @@ var defaultProps = {
   showCustomControls: false,
   licenseKey: "",
   adFailsafeTimeoutMs: 1e4,
+  minSegmentsBeforePlay: 2,
   onStart: noop,
   onPlay: noop,
   onPause: noop,
@@ -4790,6 +5082,8 @@ var HlsPlayer = class extends 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();
@@ -5396,6 +5690,7 @@ var SUPPORTED_PROPS = [
   "showCustomControls",
   "licenseKey",
   "adFailsafeTimeoutMs",
+  "minSegmentsBeforePlay",
   "onReady",
   "onStart",
   "onPlay",