stormcloud-video-player 0.3.61 → 0.3.63

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -3375,7 +3375,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "load",
             value: function load() {
                 return _async_to_generator(function() {
-                    var _this, error, _this_config_lowLatencyMode, _this_video_play;
+                    var _this, error, _this_config_isLiveStream, _this_config_lowLatencyMode, _this_video_play;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
@@ -3419,7 +3419,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 this.nativeHlsMode = true;
                                 this.videoSrcProtection = this.config.src;
                                 this.video.src = this.config.src;
-                                this.isLiveStream = (_this_config_lowLatencyMode = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode !== void 0 ? _this_config_lowLatencyMode : false;
+                                this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_this_config_lowLatencyMode = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode !== void 0 ? _this_config_lowLatencyMode : false;
                                 if (this.config.debugAdTiming) {
                                     console.log("[StormcloudVideoPlayer] Using native HLS playback - VOD mode:", {
                                         isLive: this.isLiveStream,
@@ -3470,19 +3470,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 });
                                 this.hls.on(import_hls2.default.Events.MANIFEST_PARSED, function(_, data) {
                                     return _async_to_generator(function() {
-                                        var _this_config_minSegmentsBeforePlay, _ref, _this_hls_levels, _this_hls, adBehavior, minSegments, _this_video_play;
+                                        var _this_config_isLiveStream, _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
                                         return _ts_generator(this, function(_state) {
                                             switch(_state.label){
                                                 case 0:
-                                                    if (this.config.allowNativeHls === false) {
-                                                        this.isLiveStream = true;
-                                                    } else {
-                                                        ;
-                                                        ;
-                                                        this.isLiveStream = (_ref = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : (_this_hls_levels = _this_hls.levels) === null || _this_hls_levels === void 0 ? void 0 : _this_hls_levels.some(function(level) {
-                                                            var _level_details, _level_details1;
-                                                            return (level === null || level === void 0 ? void 0 : (_level_details = level.details) === null || _level_details === void 0 ? void 0 : _level_details.live) === true || (level === null || level === void 0 ? void 0 : (_level_details1 = level.details) === null || _level_details1 === void 0 ? void 0 : _level_details1.type) === "LIVE";
-                                                        })) !== null && _ref !== void 0 ? _ref : false;
+                                                    this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_ref = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : (_this_hls_levels = _this_hls.levels) === null || _this_hls_levels === void 0 ? void 0 : _this_hls_levels.some(function(level) {
+                                                        var _level_details, _level_details1;
+                                                        return (level === null || level === void 0 ? void 0 : (_level_details = level.details) === null || _level_details === void 0 ? void 0 : _level_details.live) === true || (level === null || level === void 0 ? void 0 : (_level_details1 = level.details) === null || _level_details1 === void 0 ? void 0 : _level_details1.type) === "LIVE";
+                                                    })) !== null && _ref !== void 0 ? _ref : false;
+                                                    if (!this.isVmapEnabled() && !this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
+                                                        prerollKey = "synthetic-vod-preroll";
+                                                        if (!this.consumedVmapBreakIds.has(prerollKey)) {
+                                                            this.vmapBreaks = [
+                                                                {
+                                                                    id: prerollKey,
+                                                                    startTimeMs: 0,
+                                                                    vastTagUrl: this.apiVastTagUrl
+                                                                }
+                                                            ];
+                                                            if (this.config.debugAdTiming) {
+                                                                console.log("[StormcloudVideoPlayer] Injected synthetic VOD preroll from apiVastTagUrl");
+                                                            }
+                                                        }
                                                     }
                                                     if (this.config.debugAdTiming) {
                                                         adBehavior = this.shouldContinueLiveStreamDuringAds() ? "live (main video continues muted during ads)" : "vod (main video pauses during ads)";
@@ -4052,6 +4061,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     _this.onTimeUpdate(_this.video.currentTime);
                 };
                 this.video.addEventListener("timeupdate", this.timeUpdateHandler);
+                this.endedHandler = function() {
+                    _this.onVideoEnded();
+                };
+                this.video.addEventListener("ended", this.endedHandler);
                 this.emptiedHandler = function() {
                     if (_this.nativeHlsMode && _this.videoSrcProtection && !_this.ima.isAdPlaying()) {
                         if (_this.config.debugAdTiming) {
@@ -5363,6 +5376,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }
             }
         },
+        {
+            key: "isVmapEnabled",
+            value: function isVmapEnabled() {
+                var _this_config_vmapUrl;
+                return !!(this.config.isVmap && ((_this_config_vmapUrl = this.config.vmapUrl) === null || _this_config_vmapUrl === void 0 ? void 0 : _this_config_vmapUrl.trim()));
+            }
+        },
         {
             key: "fetchAdConfiguration",
             value: function fetchAdConfiguration() {
@@ -5371,7 +5391,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
-                                if (!this.config.vmapUrl) return [
+                                if (!this.isVmapEnabled()) return [
                                     3,
                                     2
                                 ];
@@ -5381,7 +5401,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 1:
                                 _state.sent();
-                                _state.label = 2;
+                                if (this.config.debugAdTiming) {
+                                    console.log("[StormcloudVideoPlayer] VMAP mode enabled");
+                                }
+                                return [
+                                    2
+                                ];
                             case 2:
                                 vastMode = this.config.vastMode || "default";
                                 if (this.config.debugAdTiming) {
@@ -5549,7 +5574,16 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     }
                     return [];
                 }
-                var adBreakNodes = Array.from(doc.querySelectorAll("AdBreak, vmap\\:AdBreak"));
+                var VMAP_NS = "http://www.iab.net/videosuite/vmap";
+                var adBreakNodes = Array.from(doc.getElementsByTagNameNS(VMAP_NS, "AdBreak"));
+                if (adBreakNodes.length === 0) {
+                    adBreakNodes = Array.from(doc.querySelectorAll("AdBreak, vmap\\:AdBreak"));
+                }
+                if (adBreakNodes.length === 0) {
+                    adBreakNodes = Array.from(doc.getElementsByTagName("*")).filter(function(el) {
+                        return el.localName === "AdBreak";
+                    });
+                }
                 var parsed = [];
                 adBreakNodes.forEach(function(node, index) {
                     var timeOffsetRaw = (node.getAttribute("timeOffset") || "").trim();
@@ -5557,8 +5591,17 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     if (startTimeMs == null) {
                         return;
                     }
-                    var adTagNode = node.querySelector("AdTagURI, vmap\\:AdTagURI");
-                    var adTagUrl = ((adTagNode === null || adTagNode === void 0 ? void 0 : adTagNode.textContent) || "").trim();
+                    var adTagNode = node.getElementsByTagNameNS(VMAP_NS, "AdTagURI")[0];
+                    if (!adTagNode) {
+                        var _node_querySelector;
+                        adTagNode = (_node_querySelector = node.querySelector("AdTagURI, vmap\\:AdTagURI")) !== null && _node_querySelector !== void 0 ? _node_querySelector : void 0;
+                    }
+                    if (!adTagNode) {
+                        adTagNode = Array.from(node.getElementsByTagName("*")).find(function(el) {
+                            return el.localName === "AdTagURI";
+                        });
+                    }
+                    var adTagUrl = _this.resolveVmapAdTagUrl(((adTagNode === null || adTagNode === void 0 ? void 0 : adTagNode.textContent) || "").trim());
                     if (!adTagUrl) {
                         return;
                     }
@@ -5577,6 +5620,15 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 return parsed;
             }
         },
+        {
+            key: "resolveVmapAdTagUrl",
+            value: function resolveVmapAdTagUrl(url) {
+                if (!url) {
+                    return "";
+                }
+                return url.replace(/\[timestamp\]/gi, String(Date.now())).replace(/\$\{GDPR\}/gi, "0").trim();
+            }
+        },
         {
             key: "parseVmapTimeOffsetToMs",
             value: function parseVmapTimeOffsetToMs(timeOffset) {
@@ -5599,6 +5651,14 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     var millis = Number(ms.padEnd(3, "0").slice(0, 3));
                     return (hours * 3600 + minutes * 60 + seconds) * 1e3 + millis;
                 }
+                var msOnly = timeOffset.match(/^(\d{1,2}):(\d{2})(?:\.(\d{1,3}))?$/);
+                if (msOnly) {
+                    var _msOnly = _sliced_to_array(msOnly, 4), mm1 = _msOnly[1], ss1 = _msOnly[2], tmp1 = _msOnly[3], ms1 = tmp1 === void 0 ? "0" : tmp1;
+                    var minutes1 = Number(mm1);
+                    var seconds1 = Number(ss1);
+                    var millis1 = Number(ms1.padEnd(3, "0").slice(0, 3));
+                    return (minutes1 * 60 + seconds1) * 1e3 + millis1;
+                }
                 var percent = timeOffset.match(/^(\d+(?:\.\d+)?)%$/);
                 if (percent) {
                     var ratio = Number(percent[1]) / 100;
@@ -7114,23 +7174,49 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "onTimeUpdate",
             value: function onTimeUpdate(currentTimeSec) {
                 var _this = this;
+                if (!this.isVmapEnabled() || this.vmapBreaks.length === 0) {
+                    return;
+                }
                 if (this.ima.isAdPlaying() || this.inAdBreak) return;
                 var nowMs = currentTimeSec * 1e3;
                 var breakToPlay = this.findBreakForTime(nowMs);
                 if (breakToPlay) {
-                    void this.handleMidAdJoin(breakToPlay, nowMs).catch(function(error) {
+                    void this.handleVmapAdBreak(breakToPlay, nowMs).catch(function(error) {
+                        if (_this.config.debugAdTiming) {
+                            console.warn("[StormcloudVideoPlayer] VMAP ad break failed gracefully:", error);
+                        }
+                    });
+                }
+            }
+        },
+        {
+            key: "onVideoEnded",
+            value: function onVideoEnded() {
+                var _this = this;
+                if (!this.isVmapEnabled() || this.vmapBreaks.length === 0) {
+                    return;
+                }
+                if (this.ima.isAdPlaying() || this.inAdBreak) {
+                    return;
+                }
+                var durationMs = Number.isFinite(this.video.duration) ? Math.floor(this.video.duration * 1e3) : 0;
+                var postroll = this.vmapBreaks.find(function(b) {
+                    return b.startTimeMs === -1 && !_this.consumedVmapBreakIds.has(_this.getAdBreakKey(b));
+                });
+                if (postroll) {
+                    void this.handleVmapAdBreak(postroll, durationMs).catch(function(error) {
                         if (_this.config.debugAdTiming) {
-                            console.warn("[StormcloudVideoPlayer] Mid-roll VMAP join failed gracefully:", error);
+                            console.warn("[StormcloudVideoPlayer] VMAP post-roll failed gracefully:", error);
                         }
                     });
                 }
             }
         },
         {
-            key: "handleMidAdJoin",
-            value: function handleMidAdJoin(adBreak, nowMs) {
+            key: "handleVmapAdBreak",
+            value: function handleVmapAdBreak(adBreak, nowMs) {
                 return _async_to_generator(function() {
-                    var _adBreak_durationMs, _this_config_driftToleranceMs, key, breakStartMs, durationMs, endMs, tol, inWindow, remainingMs, tags, first, rest, error;
+                    var _adBreak_durationMs, key, breakStartMs, durationMs, endMs, inWindow, tags, first, rest, error;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
@@ -7148,25 +7234,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 }
                                 durationMs = (_adBreak_durationMs = adBreak.durationMs) !== null && _adBreak_durationMs !== void 0 ? _adBreak_durationMs : 0;
                                 endMs = breakStartMs + durationMs;
-                                tol = (_this_config_driftToleranceMs = this.config.driftToleranceMs) !== null && _this_config_driftToleranceMs !== void 0 ? _this_config_driftToleranceMs : 1e3;
-                                inWindow = durationMs > 0 ? nowMs > breakStartMs && nowMs < endMs : nowMs + tol >= breakStartMs;
+                                inWindow = durationMs > 0 ? nowMs >= breakStartMs && nowMs < endMs : nowMs >= breakStartMs;
                                 if (!inWindow) return [
                                     3,
                                     4
                                 ];
                                 this.consumedVmapBreakIds.add(key);
-                                remainingMs = durationMs > 0 ? Math.max(0, endMs - nowMs) : 0;
-                                tags = this.selectVastTagsForBreak(adBreak) || (this.apiVastTagUrl ? [
-                                    this.apiVastTagUrl
-                                ] : void 0);
-                                if (!(tags && tags.length > 0)) return [
-                                    3,
-                                    4
-                                ];
+                                tags = this.selectVastTagsForBreak(adBreak);
+                                if (!tags || tags.length === 0) {
+                                    return [
+                                        2
+                                    ];
+                                }
                                 first = tags[0];
                                 rest = tags.slice(1);
                                 this.adPodQueue = rest;
                                 this.ima.updateOriginalMutedState(this.video.muted, this.video.volume);
+                                this.showAds = true;
+                                this.inAdBreak = true;
+                                this.currentAdBreakStartWallClockMs = Date.now();
+                                if (!this.video.paused) {
+                                    this.video.pause();
+                                }
                                 _state.label = 1;
                             case 1:
                                 _state.trys.push([
@@ -7181,10 +7270,6 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 2:
                                 _state.sent();
-                                this.inAdBreak = true;
-                                this.expectedAdBreakDurationMs = remainingMs;
-                                this.currentAdBreakStartWallClockMs = Date.now();
-                                this.scheduleAdStopCountdown(remainingMs);
                                 return [
                                     3,
                                     4
@@ -7192,8 +7277,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 3:
                                 error = _state.sent();
                                 this.adPodQueue = [];
+                                this.inAdBreak = false;
+                                this.showAds = false;
                                 if (this.config.debugAdTiming) {
-                                    console.warn("[StormcloudVideoPlayer] Mid-roll VMAP ad request failed:", error);
+                                    console.warn("[StormcloudVideoPlayer] VMAP ad request failed:", error);
                                 }
                                 return [
                                     3,
@@ -7864,16 +7951,18 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "selectVastTagsForBreak",
             value: function selectVastTagsForBreak(b) {
+                var _this = this;
                 if (!b || !b.vastTagUrl) return void 0;
-                if (b.vastTagUrl.includes(",")) {
-                    return b.vastTagUrl.split(",").map(function(s) {
-                        return s.trim();
+                var resolvedUrl = this.resolveVmapAdTagUrl(b.vastTagUrl);
+                if (resolvedUrl.includes(",")) {
+                    return resolvedUrl.split(",").map(function(s) {
+                        return _this.resolveVmapAdTagUrl(s.trim());
                     }).filter(function(s) {
                         return s.length > 0;
                     });
                 }
                 return [
-                    b.vastTagUrl
+                    resolvedUrl
                 ];
             }
         },
@@ -7905,9 +7994,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "findBreakForTime",
             value: function findBreakForTime(nowMs) {
-                var _this_config_driftToleranceMs;
                 var schedule = this.vmapBreaks;
-                var tol = (_this_config_driftToleranceMs = this.config.driftToleranceMs) !== null && _this_config_driftToleranceMs !== void 0 ? _this_config_driftToleranceMs : 1e3;
                 var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                 try {
                     for(var _iterator = schedule[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
@@ -7919,8 +8006,14 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         if (breakStartMs == null) {
                             continue;
                         }
-                        var end = breakStartMs + (b.durationMs || 0);
-                        if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + tol)) {
+                        if (b.durationMs) {
+                            var end = breakStartMs + b.durationMs;
+                            if (nowMs >= breakStartMs && nowMs < end) {
+                                return b;
+                            }
+                            continue;
+                        }
+                        if (nowMs >= breakStartMs) {
                             return b;
                         }
                     }
@@ -8128,6 +8221,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     this.video.removeEventListener("timeupdate", this.timeUpdateHandler);
                     delete this.timeUpdateHandler;
                 }
+                if (this.endedHandler) {
+                    this.video.removeEventListener("ended", this.endedHandler);
+                    delete this.endedHandler;
+                }
                 if (this.emptiedHandler) {
                     this.video.removeEventListener("emptied", this.emptiedHandler);
                     delete this.emptiedHandler;
@@ -8151,7 +8248,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var CRITICAL_PROPS = [
     "src",
     "allowNativeHls",
+    "isLiveStream",
     "licenseKey",
+    "isVmap",
     "vmapUrl",
     "lowLatencyMode",
     "driftToleranceMs",
@@ -8160,12 +8259,13 @@ var CRITICAL_PROPS = [
 var CONTROLS_HIDE_DELAY = 3e3;
 var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
 var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
-    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
+    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, isLiveStream = props.isLiveStream, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, isVmap = props.isVmap, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
         "src",
         "autoplay",
         "muted",
         "lowLatencyMode",
         "allowNativeHls",
+        "isLiveStream",
         "driftToleranceMs",
         "immediateManifestAds",
         "debugAdTiming",
@@ -8187,6 +8287,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         "licenseKey",
         "vastMode",
         "vastTagUrl",
+        "isVmap",
         "vmapUrl",
         "adPlayerType",
         "minSegmentsBeforePlay"
@@ -8320,7 +8421,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         setShowSpeedMenu(false);
     };
     var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
-    var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
+    var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
     var criticalPropsKey = (0, import_react.useMemo)(function() {
         return CRITICAL_PROPS.map(function(prop) {
             return "".concat(prop, ":").concat(props[prop]);
@@ -8328,7 +8429,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, [
         src,
         allowNativeHls,
+        isLiveStream,
         licenseKey,
+        isVmap,
         vmapUrl,
         lowLatencyMode,
         driftToleranceMs,
@@ -8362,6 +8465,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         if (muted !== void 0) cfg.muted = muted;
         if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
         if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
+        if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
         if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
         if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
         if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
@@ -8372,6 +8476,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         if (licenseKey !== void 0) cfg.licenseKey = licenseKey;
         if (vastMode !== void 0) cfg.vastMode = vastMode;
         if (vastTagUrl !== void 0) cfg.vastTagUrl = vastTagUrl;
+        if (isVmap !== void 0) cfg.isVmap = isVmap;
         if (vmapUrl !== void 0) cfg.vmapUrl = vmapUrl;
         if (adPlayerType !== void 0) cfg.adPlayerType = adPlayerType;
         if (minSegmentsBeforePlay !== void 0) cfg.minSegmentsBeforePlay = minSegmentsBeforePlay;
@@ -9201,161 +9306,202 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                 ]
                             })
                         ]
-                    }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                        className: "sc-controls-bar",
-                        style: {
-                            position: "absolute",
-                            bottom: "".concat(10 * responsiveScale, "px"),
-                            right: "".concat(10 * responsiveScale, "px"),
-                            display: "flex",
-                            flexDirection: isPortrait ? "column" : "row",
-                            gap: "".concat(8 * responsiveScale, "px"),
-                            zIndex: 10,
-                            opacity: controlsVisible ? 1 : 0,
-                            transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
-                            pointerEvents: controlsVisible ? "auto" : "none"
-                        },
+                    }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
                         children: [
                             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                 style: {
+                                    position: "absolute",
+                                    top: "".concat(10 * responsiveScale, "px"),
+                                    left: "".concat(10 * responsiveScale, "px"),
                                     display: "flex",
                                     alignItems: "center",
-                                    background: "rgba(0, 0, 0, 0.6)",
-                                    borderRadius: "".concat(18 * responsiveScale, "px"),
-                                    padding: "2px",
-                                    paddingRight: "".concat(8 * responsiveScale, "px")
-                                },
-                                onMouseEnter: function onMouseEnter() {
-                                    return setShowVolumeSlider(true);
+                                    gap: "6px",
+                                    zIndex: 10,
+                                    opacity: controlsVisible ? 1 : 0,
+                                    transition: "opacity 0.35s ease"
                                 },
-                                onMouseLeave: function onMouseLeave() {
-                                    return setShowVolumeSlider(false);
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        style: {
+                                            width: "8px",
+                                            height: "8px",
+                                            borderRadius: "50%",
+                                            background: "#ff3b30",
+                                            animation: "sc-pulse 1.5s ease-in-out infinite",
+                                            flexShrink: 0
+                                        }
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                                        style: {
+                                            fontSize: "".concat(12 * responsiveScale, "px"),
+                                            fontFamily: "'SF Pro Display', 'Segoe UI', Arial, sans-serif",
+                                            fontWeight: 700,
+                                            letterSpacing: "0.08em",
+                                            color: "#fff",
+                                            textShadow: "0 1px 3px rgba(0,0,0,0.6)",
+                                            userSelect: "none"
+                                        },
+                                        children: "LIVE"
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                className: "sc-controls-bar",
+                                style: {
+                                    position: "absolute",
+                                    bottom: "".concat(10 * responsiveScale, "px"),
+                                    right: "".concat(10 * responsiveScale, "px"),
+                                    display: "flex",
+                                    flexDirection: isPortrait ? "column" : "row",
+                                    gap: "".concat(8 * responsiveScale, "px"),
+                                    zIndex: 10,
+                                    opacity: controlsVisible ? 1 : 0,
+                                    transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
+                                    pointerEvents: controlsVisible ? "auto" : "none"
                                 },
                                 children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                        style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            background: "rgba(0, 0, 0, 0.6)",
+                                            borderRadius: "".concat(18 * responsiveScale, "px"),
+                                            padding: "2px",
+                                            paddingRight: "".concat(8 * responsiveScale, "px")
+                                        },
+                                        onMouseEnter: function onMouseEnter() {
+                                            return setShowVolumeSlider(true);
+                                        },
+                                        onMouseLeave: function onMouseLeave() {
+                                            return setShowVolumeSlider(false);
+                                        },
+                                        children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                                className: "sc-ctrl-btn",
+                                                onClick: function onClick() {
+                                                    if (playerRef.current) playerRef.current.toggleMute();
+                                                    onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
+                                                    resetControlsTimer();
+                                                },
+                                                style: {
+                                                    padding: "".concat(8 * responsiveScale, "px"),
+                                                    borderRadius: "50%",
+                                                    minWidth: "".concat(36 * responsiveScale, "px"),
+                                                    minHeight: "".concat(36 * responsiveScale, "px")
+                                                },
+                                                title: isMuted ? "Unmute" : "Mute",
+                                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
+                                                    size: Math.max(14, 18 * responsiveScale)
+                                                })
+                                            }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                style: {
+                                                    width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
+                                                    overflow: "hidden",
+                                                    transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
+                                                    paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
+                                                },
+                                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                                    style: {
+                                                        position: "relative",
+                                                        width: "".concat(56 * responsiveScale, "px"),
+                                                        height: "3px",
+                                                        cursor: "pointer",
+                                                        borderRadius: "1.5px"
+                                                    },
+                                                    onMouseDown: function onMouseDown(e) {
+                                                        e.preventDefault();
+                                                        var el = e.currentTarget;
+                                                        var move = function move(ev) {
+                                                            var r2 = el.getBoundingClientRect();
+                                                            handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
+                                                        };
+                                                        var up = function up1() {
+                                                            document.removeEventListener("mousemove", move);
+                                                            document.removeEventListener("mouseup", up);
+                                                        };
+                                                        document.addEventListener("mousemove", move);
+                                                        document.addEventListener("mouseup", up);
+                                                        var r = el.getBoundingClientRect();
+                                                        handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
+                                                    },
+                                                    onClick: function onClick(e) {
+                                                        e.stopPropagation();
+                                                        var r = e.currentTarget.getBoundingClientRect();
+                                                        handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
+                                                    },
+                                                    children: [
+                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                            style: {
+                                                                position: "absolute",
+                                                                inset: 0,
+                                                                background: "rgba(255, 255, 255, 0.2)",
+                                                                borderRadius: "1.5px"
+                                                            }
+                                                        }),
+                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                            style: {
+                                                                position: "absolute",
+                                                                top: 0,
+                                                                left: 0,
+                                                                bottom: 0,
+                                                                width: "".concat((isMuted ? 0 : volume) * 100, "%"),
+                                                                background: "#fff",
+                                                                borderRadius: "1.5px",
+                                                                transition: "width 0.1s ease-out"
+                                                            }
+                                                        }),
+                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                            style: {
+                                                                position: "absolute",
+                                                                top: "50%",
+                                                                left: "".concat((isMuted ? 0 : volume) * 100, "%"),
+                                                                transform: "translate(-50%, -50%)",
+                                                                width: "12px",
+                                                                height: "12px",
+                                                                background: "#fff",
+                                                                borderRadius: "50%",
+                                                                boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
+                                                                transition: "left 0.1s ease-out"
+                                                            }
+                                                        })
+                                                    ]
+                                                })
+                                            })
+                                        ]
+                                    }),
                                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
                                         className: "sc-ctrl-btn",
                                         onClick: function onClick() {
-                                            if (playerRef.current) playerRef.current.toggleMute();
-                                            onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
+                                            if (onFullscreenToggle) {
+                                                onFullscreenToggle();
+                                            } else if (wrapperRef.current) {
+                                                if (!document.fullscreenElement) {
+                                                    wrapperRef.current.requestFullscreen().catch(function() {});
+                                                } else {
+                                                    document.exitFullscreen().catch(function() {});
+                                                }
+                                            }
                                             resetControlsTimer();
                                         },
                                         style: {
                                             padding: "".concat(8 * responsiveScale, "px"),
                                             borderRadius: "50%",
                                             minWidth: "".concat(36 * responsiveScale, "px"),
-                                            minHeight: "".concat(36 * responsiveScale, "px")
+                                            minHeight: "".concat(36 * responsiveScale, "px"),
+                                            background: "rgba(0, 0, 0, 0.6)"
                                         },
-                                        title: isMuted ? "Unmute" : "Mute",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
+                                        title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
+                                        children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
+                                            size: Math.max(14, 18 * responsiveScale)
+                                        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
                                             size: Math.max(14, 18 * responsiveScale)
-                                        })
-                                    }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                        style: {
-                                            width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
-                                            overflow: "hidden",
-                                            transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                                            display: "flex",
-                                            alignItems: "center",
-                                            paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
-                                            paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
-                                        },
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                            style: {
-                                                position: "relative",
-                                                width: "".concat(56 * responsiveScale, "px"),
-                                                height: "3px",
-                                                cursor: "pointer",
-                                                borderRadius: "1.5px"
-                                            },
-                                            onMouseDown: function onMouseDown(e) {
-                                                e.preventDefault();
-                                                var el = e.currentTarget;
-                                                var move = function move(ev) {
-                                                    var r2 = el.getBoundingClientRect();
-                                                    handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
-                                                };
-                                                var up = function up1() {
-                                                    document.removeEventListener("mousemove", move);
-                                                    document.removeEventListener("mouseup", up);
-                                                };
-                                                document.addEventListener("mousemove", move);
-                                                document.addEventListener("mouseup", up);
-                                                var r = el.getBoundingClientRect();
-                                                handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
-                                            },
-                                            onClick: function onClick(e) {
-                                                e.stopPropagation();
-                                                var r = e.currentTarget.getBoundingClientRect();
-                                                handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
-                                            },
-                                            children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                    style: {
-                                                        position: "absolute",
-                                                        inset: 0,
-                                                        background: "rgba(255, 255, 255, 0.2)",
-                                                        borderRadius: "1.5px"
-                                                    }
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                    style: {
-                                                        position: "absolute",
-                                                        top: 0,
-                                                        left: 0,
-                                                        bottom: 0,
-                                                        width: "".concat((isMuted ? 0 : volume) * 100, "%"),
-                                                        background: "#fff",
-                                                        borderRadius: "1.5px",
-                                                        transition: "width 0.1s ease-out"
-                                                    }
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                    style: {
-                                                        position: "absolute",
-                                                        top: "50%",
-                                                        left: "".concat((isMuted ? 0 : volume) * 100, "%"),
-                                                        transform: "translate(-50%, -50%)",
-                                                        width: "12px",
-                                                        height: "12px",
-                                                        background: "#fff",
-                                                        borderRadius: "50%",
-                                                        boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
-                                                        transition: "left 0.1s ease-out"
-                                                    }
-                                                })
-                                            ]
                                         })
                                     })
                                 ]
-                            }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                className: "sc-ctrl-btn",
-                                onClick: function onClick() {
-                                    if (onFullscreenToggle) {
-                                        onFullscreenToggle();
-                                    } else if (wrapperRef.current) {
-                                        if (!document.fullscreenElement) {
-                                            wrapperRef.current.requestFullscreen().catch(function() {});
-                                        } else {
-                                            document.exitFullscreen().catch(function() {});
-                                        }
-                                    }
-                                    resetControlsTimer();
-                                },
-                                style: {
-                                    padding: "".concat(8 * responsiveScale, "px"),
-                                    borderRadius: "50%",
-                                    minWidth: "".concat(36 * responsiveScale, "px"),
-                                    minHeight: "".concat(36 * responsiveScale, "px"),
-                                    background: "rgba(0, 0, 0, 0.6)"
-                                },
-                                title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
-                                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
-                                    size: Math.max(14, 18 * responsiveScale)
-                                }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
-                                    size: Math.max(14, 18 * responsiveScale)
-                                })
                             })
                         ]
                     }),