stormcloud-video-player 0.3.55 → 0.3.57

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -692,7 +692,7 @@ function createImaController(video, options) {
         adVideo.style.height = "100%";
         adVideo.style.objectFit = "contain";
         adVideo.style.backgroundColor = "transparent";
-        adVideo.style.zIndex = "15";
+        adVideo.style.zIndex = "2";
         adVideo.playsInline = true;
         adVideo.volume = originalVolume;
         adVideo.muted = originalMutedState;
@@ -985,7 +985,7 @@ function createImaController(video, options) {
         container.style.alignItems = "center";
         container.style.justifyContent = "center";
         container.style.pointerEvents = "none";
-        container.style.zIndex = "10";
+        container.style.zIndex = "30";
         container.style.backgroundColor = "#000";
         container.style.transition = "opacity 0.3s ease-in-out";
         container.style.opacity = "0";
@@ -1100,7 +1100,7 @@ function createImaController(video, options) {
                                 container.style.alignItems = "center";
                                 container.style.justifyContent = "center";
                                 container.style.pointerEvents = "none";
-                                container.style.zIndex = "10";
+                                container.style.zIndex = "30";
                                 container.style.backgroundColor = "transparent";
                                 container.style.transition = "opacity 0.3s ease-in-out, background-color 0.3s ease-in-out";
                                 container.style.opacity = "0";
@@ -2015,7 +2015,7 @@ function createHlsAdPlayer(contentVideo, options) {
                 container.style.alignItems = "center";
                 container.style.justifyContent = "center";
                 container.style.pointerEvents = "none";
-                container.style.zIndex = "10";
+                container.style.zIndex = "30";
                 container.style.backgroundColor = "#000";
                 (_contentVideo_parentElement = contentVideo.parentElement) === null || _contentVideo_parentElement === void 0 ? void 0 : _contentVideo_parentElement.appendChild(container);
                 adContainerEl = container;
@@ -3239,6 +3239,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         this.inAdBreak = false;
         this.ptsDriftEmaMs = 0;
         this.adPodQueue = [];
+        this.vmapBreaks = [];
+        this.consumedVmapBreakIds = /* @__PURE__ */ new Set();
         this.lastHeartbeatTime = 0;
         this.currentAdIndex = 0;
         this.totalAdsInBreak = 0;
@@ -3793,13 +3795,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     _this.activeAdRequestToken = null;
                     _this.showAds = true;
                     _this.resetGamNoFillCounter();
-                    if (_this.inAdBreak && _this.expectedAdBreakDurationMs != null) {
-                        if (_this.adStopTimerId == null) {
-                            _this.currentAdBreakStartWallClockMs = Date.now();
-                            _this.scheduleAdStopCountdown(_this.expectedAdBreakDurationMs);
-                            if (_this.config.debugAdTiming) {
-                                console.log("[StormcloudVideoPlayer] Starting ad break timer on content_pause (first ad starting)");
-                            }
+                    if (_this.inAdBreak && _this.expectedAdBreakDurationMs != null && _this.adStopTimerId == null) {
+                        _this.scheduleAdStopCountdown(_this.getRemainingAdMs());
+                        if (_this.config.debugAdTiming) {
+                            console.log("[StormcloudVideoPlayer] Starting ad break timer on content_pause (first ad starting)");
                         }
                     }
                     var currentMuted = _this.video.muted;
@@ -3862,6 +3861,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     this.ima.showPlaceholder();
                     this.isShowingPlaceholder = true;
                 }
+                var preservedMutedState = this.ima.getOriginalMutedState();
+                var preservedVolumeState = this.ima.getOriginalVolume();
                 if (this.ima) {
                     try {
                         this.ima.destroy();
@@ -3876,7 +3877,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 var continueLiveStreamDuringAds = this.shouldContinueLiveStreamDuringAds();
                 this.ima = this.createAdPlayer(continueLiveStreamDuringAds);
                 this.ima.initialize();
-                this.ima.updateOriginalMutedState(this.video.muted, this.video.volume);
+                this.ima.updateOriginalMutedState(preservedMutedState, preservedVolumeState);
                 this.attachImaEventListeners();
                 if (shouldShowPlaceholder) {
                     this.showPlaceholderLayer();
@@ -4192,12 +4193,17 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         }
                     }
                     if (this.inAdBreak) {
-                        if (this.expectedAdBreakDurationMs == null && marker.durationSeconds != null) {
-                            this.expectedAdBreakDurationMs = marker.durationSeconds * 1e3;
-                            if (this.config.debugAdTiming) {
-                                console.log("[StormcloudVideoPlayer] Updated ad break duration from subsequent marker: ".concat(this.expectedAdBreakDurationMs, "ms"));
+                        if (marker.durationSeconds != null) {
+                            var newDurationMs = marker.durationSeconds * 1e3;
+                            if (this.expectedAdBreakDurationMs == null || newDurationMs > this.expectedAdBreakDurationMs) {
+                                this.expectedAdBreakDurationMs = newDurationMs;
+                                var elapsedMs = this.currentAdBreakStartWallClockMs != null ? Date.now() - this.currentAdBreakStartWallClockMs : 0;
+                                var remainingMs = Math.max(0, newDurationMs - elapsedMs);
+                                this.scheduleAdStopCountdown(remainingMs);
+                                if (this.config.debugAdTiming) {
+                                    console.log("[StormcloudVideoPlayer] Updated ad break duration from subsequent marker: ".concat(newDurationMs, "ms, remaining: ").concat(remainingMs, "ms"));
+                                }
                             }
-                            this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
                         }
                         return;
                     }
@@ -4273,9 +4279,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         this.expectedAdBreakDurationMs = marker.durationSeconds * 1e3;
                     }
                     if (this.expectedAdBreakDurationMs != null && this.currentAdBreakStartWallClockMs != null) {
-                        var elapsedMs = Date.now() - this.currentAdBreakStartWallClockMs;
-                        var remainingMs = Math.max(0, this.expectedAdBreakDurationMs - elapsedMs);
-                        this.scheduleAdStopCountdown(remainingMs);
+                        var elapsedMs1 = Date.now() - this.currentAdBreakStartWallClockMs;
+                        var remainingMs1 = Math.max(0, this.expectedAdBreakDurationMs - elapsedMs1);
+                        this.scheduleAdStopCountdown(remainingMs1);
                     }
                     if (!this.ima.isAdPlaying() && this.activeAdRequestToken === null && this.adRequestQueue.length > 0) {
                         this.tryNextAvailableAdWithRateLimit();
@@ -4567,6 +4573,18 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
+                                if (!this.config.vmapUrl) return [
+                                    3,
+                                    2
+                                ];
+                                return [
+                                    4,
+                                    this.fetchAndParseVmap(this.config.vmapUrl)
+                                ];
+                            case 1:
+                                _state.sent();
+                                _state.label = 2;
+                            case 2:
                                 vastMode = this.config.vastMode || "default";
                                 if (this.config.debugAdTiming) {
                                     console.log("[StormcloudVideoPlayer] VAST mode:", vastMode);
@@ -4612,7 +4630,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                         headers: headers
                                     })
                                 ];
-                            case 1:
+                            case 3:
                                 response = _state.sent();
                                 if (!response.ok) {
                                     if (this.config.debugAdTiming) {
@@ -4626,7 +4644,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     4,
                                     response.json()
                                 ];
-                            case 2:
+                            case 4:
                                 data = _state.sent();
                                 imaPayload = (_data_response = data.response) === null || _data_response === void 0 ? void 0 : (_data_response_ima = _data_response.ima) === null || _data_response_ima === void 0 ? void 0 : (_data_response_ima_publisherdeskima = _data_response_ima["publisherdesk.ima"]) === null || _data_response_ima_publisherdeskima === void 0 ? void 0 : _data_response_ima_publisherdeskima.payload;
                                 if (imaPayload) {
@@ -4654,6 +4672,171 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }).call(this);
             }
         },
+        {
+            key: "fetchAndParseVmap",
+            value: function fetchAndParseVmap(vmapUrl) {
+                return _async_to_generator(function() {
+                    var response, vmapXml, error;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                if (!vmapUrl.trim()) {
+                                    return [
+                                        2
+                                    ];
+                                }
+                                _state.label = 1;
+                            case 1:
+                                _state.trys.push([
+                                    1,
+                                    4,
+                                    ,
+                                    5
+                                ]);
+                                return [
+                                    4,
+                                    fetch(vmapUrl)
+                                ];
+                            case 2:
+                                response = _state.sent();
+                                if (!response.ok) {
+                                    throw new Error("Failed to fetch VMAP (".concat(response.status, ")"));
+                                }
+                                return [
+                                    4,
+                                    response.text()
+                                ];
+                            case 3:
+                                vmapXml = _state.sent();
+                                this.vmapBreaks = this.parseVmapToBreaks(vmapXml);
+                                this.consumedVmapBreakIds.clear();
+                                if (this.config.debugAdTiming) {
+                                    console.log("[StormcloudVideoPlayer] Loaded ".concat(this.vmapBreaks.length, " VMAP ad break(s) from:"), vmapUrl);
+                                }
+                                return [
+                                    3,
+                                    5
+                                ];
+                            case 4:
+                                error = _state.sent();
+                                this.vmapBreaks = [];
+                                this.consumedVmapBreakIds.clear();
+                                if (this.config.debugAdTiming) {
+                                    console.warn("[StormcloudVideoPlayer] Failed to load VMAP:", error);
+                                }
+                                return [
+                                    3,
+                                    5
+                                ];
+                            case 5:
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                }).call(this);
+            }
+        },
+        {
+            key: "parseVmapToBreaks",
+            value: function parseVmapToBreaks(vmapXml) {
+                var _this = this;
+                if (typeof DOMParser === "undefined") {
+                    return [];
+                }
+                var doc = new DOMParser().parseFromString(vmapXml, "application/xml");
+                if (doc.querySelector("parsererror")) {
+                    if (this.config.debugAdTiming) {
+                        console.warn("[StormcloudVideoPlayer] Invalid VMAP XML received");
+                    }
+                    return [];
+                }
+                var adBreakNodes = Array.from(doc.querySelectorAll("AdBreak, vmap\\:AdBreak"));
+                var parsed = [];
+                adBreakNodes.forEach(function(node, index) {
+                    var timeOffsetRaw = (node.getAttribute("timeOffset") || "").trim();
+                    var startTimeMs = _this.parseVmapTimeOffsetToMs(timeOffsetRaw);
+                    if (startTimeMs == null) {
+                        return;
+                    }
+                    var adTagNode = node.querySelector("AdTagURI, vmap\\:AdTagURI");
+                    var adTagUrl = ((adTagNode === null || adTagNode === void 0 ? void 0 : adTagNode.textContent) || "").trim();
+                    if (!adTagUrl) {
+                        return;
+                    }
+                    var breakId = node.getAttribute("breakId") || "vmap-break-".concat(index, "-").concat(timeOffsetRaw || "unknown");
+                    parsed.push({
+                        id: breakId,
+                        startTimeMs: startTimeMs,
+                        vastTagUrl: adTagUrl
+                    });
+                });
+                parsed.sort(function(a, b) {
+                    var aStart = a.startTimeMs < 0 ? Number.MAX_SAFE_INTEGER : a.startTimeMs;
+                    var bStart = b.startTimeMs < 0 ? Number.MAX_SAFE_INTEGER : b.startTimeMs;
+                    return aStart - bStart;
+                });
+                return parsed;
+            }
+        },
+        {
+            key: "parseVmapTimeOffsetToMs",
+            value: function parseVmapTimeOffsetToMs(timeOffset) {
+                if (!timeOffset) {
+                    return void 0;
+                }
+                var normalized = timeOffset.trim().toLowerCase();
+                if (normalized === "start") {
+                    return 0;
+                }
+                if (normalized === "end") {
+                    return -1;
+                }
+                var hms = timeOffset.match(/^(\d{1,2}):(\d{2}):(\d{2})(?:\.(\d{1,3}))?$/);
+                if (hms) {
+                    var _hms = _sliced_to_array(hms, 5), hh = _hms[1], mm = _hms[2], ss = _hms[3], tmp = _hms[4], ms = tmp === void 0 ? "0" : tmp;
+                    var hours = Number(hh);
+                    var minutes = Number(mm);
+                    var seconds = Number(ss);
+                    var millis = Number(ms.padEnd(3, "0").slice(0, 3));
+                    return (hours * 3600 + minutes * 60 + seconds) * 1e3 + millis;
+                }
+                var percent = timeOffset.match(/^(\d+(?:\.\d+)?)%$/);
+                if (percent) {
+                    var ratio = Number(percent[1]) / 100;
+                    var durationSec = this.video.duration;
+                    if (Number.isFinite(durationSec) && durationSec > 0) {
+                        return Math.floor(durationSec * 1e3 * ratio);
+                    }
+                    return void 0;
+                }
+                return void 0;
+            }
+        },
+        {
+            key: "getAdBreakKey",
+            value: function getAdBreakKey(adBreak) {
+                if (adBreak.id) {
+                    return adBreak.id;
+                }
+                return "".concat(adBreak.startTimeMs, "-").concat(adBreak.vastTagUrl || "");
+            }
+        },
+        {
+            key: "resolveBreakStartMs",
+            value: function resolveBreakStartMs(adBreak) {
+                if (adBreak.startTimeMs >= 0) {
+                    return adBreak.startTimeMs;
+                }
+                if (adBreak.startTimeMs === -1) {
+                    var durationSec = this.video.duration;
+                    if (Number.isFinite(durationSec) && durationSec > 0) {
+                        return Math.floor(durationSec * 1e3);
+                    }
+                }
+                return void 0;
+            }
+        },
         {
             key: "getCurrentAdIndex",
             value: function getCurrentAdIndex() {
@@ -4666,6 +4849,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 return this.totalAdsInBreak;
             }
         },
+        {
+            key: "getAdRemainingMs",
+            value: function getAdRemainingMs() {
+                return this.getRemainingAdMs();
+            }
+        },
         {
             key: "generateVastUrlsWithCorrelators",
             value: function generateVastUrlsWithCorrelators(baseUrl, count) {
@@ -4744,10 +4933,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 var scheduled = this.findCurrentOrNextBreak(this.video.currentTime * 1e3);
                 var tags = this.selectVastTagsForBreak(scheduled);
                 var baseVastUrl;
-                if (this.apiVastTagUrl) {
-                    baseVastUrl = this.apiVastTagUrl;
-                } else if (tags && tags.length > 0 && tags[0]) {
+                if (tags && tags.length > 0 && tags[0]) {
                     baseVastUrl = tags[0];
+                } else if (this.apiVastTagUrl) {
+                    baseVastUrl = this.apiVastTagUrl;
                 } else {
                     if (this.config.debugAdTiming) {
                         console.warn("[StormcloudVideoPlayer] No VAST URL available for prefetch");
@@ -5197,11 +5386,14 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         switch(_state.label){
                             case 0:
                                 scheduled = this.findCurrentOrNextBreak(this.video.currentTime * 1e3);
+                                if (scheduled) {
+                                    this.consumedVmapBreakIds.add(this.getAdBreakKey(scheduled));
+                                }
                                 tags = this.selectVastTagsForBreak(scheduled);
-                                if (this.apiVastTagUrl) {
-                                    baseVastUrl = this.apiVastTagUrl;
-                                } else if (tags && tags.length > 0 && tags[0]) {
+                                if (tags && tags.length > 0 && tags[0]) {
                                     baseVastUrl = tags[0];
+                                } else if (this.apiVastTagUrl) {
+                                    baseVastUrl = this.apiVastTagUrl;
                                 } else {
                                     this.clearPendingAdBreak();
                                     return [
@@ -5315,9 +5507,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 2:
                                 _state.sent();
-                                if (this.expectedAdBreakDurationMs != null) {
-                                    this.currentAdBreakStartWallClockMs = Date.now();
-                                    this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
+                                if (this.expectedAdBreakDurationMs != null && this.adStopTimerId == null) {
+                                    this.scheduleAdStopCountdown(this.getRemainingAdMs());
                                 }
                                 adVolume = currentMuted ? 0 : currentVolume;
                                 this.ima.setAdVolume(adVolume);
@@ -5358,9 +5549,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 6:
                                 _state.sent();
-                                if (this.expectedAdBreakDurationMs != null) {
-                                    this.currentAdBreakStartWallClockMs = Date.now();
-                                    this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
+                                if (this.expectedAdBreakDurationMs != null && this.adStopTimerId == null) {
+                                    this.scheduleAdStopCountdown(this.getRemainingAdMs());
                                 }
                                 adVolume1 = currentMuted ? 0 : currentVolume;
                                 this.ima.setAdVolume(adVolume1);
@@ -5414,9 +5604,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 10:
                                 _state.sent();
-                                if (this.expectedAdBreakDurationMs != null) {
-                                    this.currentAdBreakStartWallClockMs = Date.now();
-                                    this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
+                                if (this.expectedAdBreakDurationMs != null && this.adStopTimerId == null) {
+                                    this.scheduleAdStopCountdown(this.getRemainingAdMs());
                                 }
                                 adVolume2 = currentMuted ? 0 : currentVolume;
                                 this.ima.setAdVolume(adVolume2);
@@ -5767,8 +5956,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 2:
                                 _state.sent();
                                 if (this.expectedAdBreakDurationMs != null && this.adStopTimerId == null) {
-                                    this.currentAdBreakStartWallClockMs = Date.now();
-                                    this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
+                                    this.scheduleAdStopCountdown(this.getRemainingAdMs());
                                 }
                                 currentMuted = this.video.muted;
                                 currentVolume = this.video.volume;
@@ -6080,15 +6268,22 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "findCurrentOrNextBreak",
             value: function findCurrentOrNextBreak(nowMs) {
-                var schedule = [];
+                var schedule = this.vmapBreaks;
                 var candidate;
                 var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                 try {
                     for(var _iterator = schedule[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                         var b = _step.value;
-                        var _this_config_driftToleranceMs;
+                        var _this_config_driftToleranceMs, _this_resolveBreakStartMs;
+                        if (this.consumedVmapBreakIds.has(this.getAdBreakKey(b))) {
+                            continue;
+                        }
+                        var breakStartMs = this.resolveBreakStartMs(b);
+                        if (breakStartMs == null) {
+                            continue;
+                        }
                         var tol = (_this_config_driftToleranceMs = this.config.driftToleranceMs) !== null && _this_config_driftToleranceMs !== void 0 ? _this_config_driftToleranceMs : 1e3;
-                        if (b.startTimeMs <= nowMs + tol && (candidate == null || b.startTimeMs > (candidate.startTimeMs || 0))) {
+                        if (breakStartMs <= nowMs + tol && (candidate == null || breakStartMs > ((_this_resolveBreakStartMs = this.resolveBreakStartMs(candidate)) !== null && _this_resolveBreakStartMs !== void 0 ? _this_resolveBreakStartMs : 0))) {
                             candidate = b;
                         }
                     }
@@ -6112,11 +6307,16 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "onTimeUpdate",
             value: function onTimeUpdate(currentTimeSec) {
-                if (this.ima.isAdPlaying()) return;
+                var _this = this;
+                if (this.ima.isAdPlaying() || this.inAdBreak) return;
                 var nowMs = currentTimeSec * 1e3;
                 var breakToPlay = this.findBreakForTime(nowMs);
                 if (breakToPlay) {
-                    this.handleMidAdJoin(breakToPlay, nowMs);
+                    void this.handleMidAdJoin(breakToPlay, nowMs).catch(function(error) {
+                        if (_this.config.debugAdTiming) {
+                            console.warn("[StormcloudVideoPlayer] Mid-roll VMAP join failed gracefully:", error);
+                        }
+                    });
                 }
             }
         },
@@ -6124,40 +6324,76 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "handleMidAdJoin",
             value: function handleMidAdJoin(adBreak, nowMs) {
                 return _async_to_generator(function() {
-                    var _adBreak_durationMs, durationMs, endMs, remainingMs, tags, first, rest;
+                    var _adBreak_durationMs, _this_config_driftToleranceMs, key, breakStartMs, durationMs, endMs, tol, inWindow, remainingMs, tags, first, rest, error;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
+                                key = this.getAdBreakKey(adBreak);
+                                if (this.consumedVmapBreakIds.has(key)) {
+                                    return [
+                                        2
+                                    ];
+                                }
+                                breakStartMs = this.resolveBreakStartMs(adBreak);
+                                if (breakStartMs == null) {
+                                    return [
+                                        2
+                                    ];
+                                }
                                 durationMs = (_adBreak_durationMs = adBreak.durationMs) !== null && _adBreak_durationMs !== void 0 ? _adBreak_durationMs : 0;
-                                endMs = adBreak.startTimeMs + durationMs;
-                                if (!(durationMs > 0 && nowMs > adBreak.startTimeMs && nowMs < endMs)) return [
+                                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;
+                                if (!inWindow) return [
                                     3,
-                                    2
+                                    4
                                 ];
-                                remainingMs = endMs - nowMs;
+                                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,
-                                    2
+                                    4
                                 ];
                                 first = tags[0];
                                 rest = tags.slice(1);
                                 this.adPodQueue = rest;
                                 this.ima.updateOriginalMutedState(this.video.muted, this.video.volume);
+                                _state.label = 1;
+                            case 1:
+                                _state.trys.push([
+                                    1,
+                                    3,
+                                    ,
+                                    4
+                                ]);
                                 return [
                                     4,
                                     this.playSingleAd(first)
                                 ];
-                            case 1:
+                            case 2:
                                 _state.sent();
                                 this.inAdBreak = true;
                                 this.expectedAdBreakDurationMs = remainingMs;
                                 this.currentAdBreakStartWallClockMs = Date.now();
                                 this.scheduleAdStopCountdown(remainingMs);
-                                _state.label = 2;
-                            case 2:
+                                return [
+                                    3,
+                                    4
+                                ];
+                            case 3:
+                                error = _state.sent();
+                                this.adPodQueue = [];
+                                if (this.config.debugAdTiming) {
+                                    console.warn("[StormcloudVideoPlayer] Mid-roll VMAP ad request failed:", error);
+                                }
+                                return [
+                                    3,
+                                    4
+                                ];
+                            case 4:
                                 return [
                                     2
                                 ];
@@ -6473,8 +6709,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 5:
                                 _state.sent();
                                 if (this.expectedAdBreakDurationMs != null && this.adStopTimerId == null) {
-                                    this.currentAdBreakStartWallClockMs = Date.now();
-                                    this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
+                                    this.scheduleAdStopCountdown(this.getRemainingAdMs());
                                 }
                                 currentMuted = this.video.muted;
                                 currentVolume = this.video.volume;
@@ -6524,8 +6759,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 8:
                                 _state.sent();
                                 if (this.expectedAdBreakDurationMs != null && this.adStopTimerId == null) {
-                                    this.currentAdBreakStartWallClockMs = Date.now();
-                                    this.scheduleAdStopCountdown(this.expectedAdBreakDurationMs);
+                                    this.scheduleAdStopCountdown(this.getRemainingAdMs());
                                 }
                                 currentMuted1 = this.video.muted;
                                 currentVolume1 = this.video.volume;
@@ -6863,13 +7097,22 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "findBreakForTime",
             value: function findBreakForTime(nowMs) {
-                var schedule = [];
+                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){
                         var b = _step.value;
-                        var end = (b.startTimeMs || 0) + (b.durationMs || 0);
-                        if (nowMs >= (b.startTimeMs || 0) && (b.durationMs ? nowMs < end : true)) {
+                        if (this.consumedVmapBreakIds.has(this.getAdBreakKey(b))) {
+                            continue;
+                        }
+                        var breakStartMs = this.resolveBreakStartMs(b);
+                        if (breakStartMs == null) {
+                            continue;
+                        }
+                        var end = breakStartMs + (b.durationMs || 0);
+                        if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + tol)) {
                             return b;
                         }
                     }
@@ -7101,13 +7344,15 @@ var CRITICAL_PROPS = [
     "src",
     "allowNativeHls",
     "licenseKey",
+    "vmapUrl",
     "lowLatencyMode",
     "driftToleranceMs",
     "vastMode"
 ];
 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, 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, 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, [
         "src",
         "autoplay",
         "muted",
@@ -7134,6 +7379,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         "licenseKey",
         "vastMode",
         "vastTagUrl",
+        "vmapUrl",
         "adPlayerType",
         "minSegmentsBeforePlay"
     ]);
@@ -7145,7 +7391,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     var _import_react_default_useState = _sliced_to_array(import_react.default.useState({
         showAds: false,
         currentIndex: 0,
-        totalAds: 0
+        totalAds: 0,
+        remainingSeconds: 0
     }), 2), adStatus = _import_react_default_useState[0], setAdStatus = _import_react_default_useState[1];
     var _import_react_default_useState1 = _sliced_to_array(import_react.default.useState(true), 2), shouldShowNativeControls = _import_react_default_useState1[0], setShouldShowNativeControls = _import_react_default_useState1[1];
     var _import_react_default_useState2 = _sliced_to_array(import_react.default.useState(false), 2), isMuted = _import_react_default_useState2[0], setIsMuted = _import_react_default_useState2[1];
@@ -7164,6 +7411,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     var _import_react_default_useState15 = _sliced_to_array(import_react.default.useState(true), 2), controlsVisible = _import_react_default_useState15[0], setControlsVisible = _import_react_default_useState15[1];
     var _import_react_default_useState16 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react_default_useState16[0], setViewportWidth = _import_react_default_useState16[1];
     var _import_react_default_useState17 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react_default_useState17[0], setIsPortrait = _import_react_default_useState17[1];
+    var _import_react_default_useState18 = _sliced_to_array(import_react.default.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _import_react_default_useState18[0], setPlayerAspectRatio = _import_react_default_useState18[1];
     var getResponsiveScale = function getResponsiveScale() {
         if (viewportWidth < 480) return 0.7;
         if (viewportWidth < 768) return 0.8;
@@ -7273,6 +7521,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         src,
         allowNativeHls,
         licenseKey,
+        vmapUrl,
         lowLatencyMode,
         driftToleranceMs,
         vastMode
@@ -7315,6 +7564,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 (vmapUrl !== void 0) cfg.vmapUrl = vmapUrl;
         if (adPlayerType !== void 0) cfg.adPlayerType = adPlayerType;
         if (minSegmentsBeforePlay !== void 0) cfg.minSegmentsBeforePlay = minSegmentsBeforePlay;
         var player = new StormcloudVideoPlayer(cfg);
@@ -7366,15 +7616,18 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 var showAds = showAdsFromMethod || showAdsFromAttribute;
                 var currentIndex = playerRef.current.getCurrentAdIndex();
                 var totalAds = playerRef.current.getTotalAdsInBreak();
+                var remainingMs = playerRef.current.getAdRemainingMs();
+                var remainingSeconds = showAds ? Math.max(0, Math.ceil(remainingMs / 1e3)) : 0;
                 setAdStatus(function(prev) {
-                    if (prev.showAds !== showAds || prev.currentIndex !== currentIndex || prev.totalAds !== totalAds) {
+                    if (prev.showAds !== showAds || prev.currentIndex !== currentIndex || prev.totalAds !== totalAds || prev.remainingSeconds !== remainingSeconds) {
                         if (showAds && !prev.showAds) {
                             setShowCenterPlay(false);
                         }
                         return {
                             showAds: showAds,
                             currentIndex: currentIndex,
-                            totalAds: totalAds
+                            totalAds: totalAds,
+                            remainingSeconds: remainingSeconds
                         };
                     }
                     return prev;
@@ -7432,8 +7685,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     (0, import_react.useEffect)(function() {
         if (!videoRef.current) return;
         var handleLoadedMetadata = function handleLoadedMetadata() {
-            if (videoRef.current) {
-                var video2 = videoRef.current;
+            var video2 = videoRef.current;
+            if (video2) {
+                if (video2.videoWidth > 0 && video2.videoHeight > 0) {
+                    setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
+                }
                 void video2.offsetHeight;
             }
             if (debugAdTiming) {
@@ -7549,6 +7805,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, [
         debugAdTiming
     ]);
+    (0, import_react.useEffect)(function() {
+        setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
+    }, [
+        src
+    ]);
     (0, import_react.useEffect)(function() {
         return function() {
             if (controlsTimerRef.current) {
@@ -7561,7 +7822,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
-                children: "\n              @keyframes sc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n              }\n              @keyframes sc-pulse {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0.6; }\n              }\n              @keyframes sc-fade-in {\n                from { opacity: 0; transform: translateY(8px); }\n                to { opacity: 1; transform: translateY(0); }\n              }\n              .sc-wrapper:fullscreen,\n              .sc-wrapper:has(*:fullscreen) {\n                border-radius: 0 !important;\n                box-shadow: none !important;\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n                display: flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n              }\n              .sc-ctrl-btn {\n                background: none;\n                border: none;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 50%;\n                padding: 8px;\n                transition: background 0.15s ease, opacity 0.15s ease;\n                opacity: 0.9;\n              }\n              .sc-ctrl-btn:hover {\n                opacity: 1;\n                background: rgba(255, 255, 255, 0.1);\n              }\n              .sc-ctrl-btn:active {\n                opacity: 0.7;\n              }\n              .sc-controls-bar {\n                transition: opacity 0.35s ease, transform 0.35s ease;\n              }\n              .sc-progress-track:hover .sc-progress-thumb {\n                transform: translate(-50%, -50%) scale(1) !important;\n              }\n              .sc-loading-hidden .sc-loading-indicator {\n                display: none !important;\n              }\n            "
+                children: "\n              @keyframes sc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n              }\n              @keyframes sc-loading-glow {\n                0%, 100% { opacity: 0.85; transform: scale(1); }\n                50% { opacity: 1; transform: scale(1.05); }\n              }\n              @keyframes sc-pulse {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0.6; }\n              }\n              @keyframes sc-fade-in {\n                from { opacity: 0; transform: translateY(8px); }\n                to { opacity: 1; transform: translateY(0); }\n              }\n              .sc-wrapper:fullscreen,\n              .sc-wrapper:has(*:fullscreen) {\n                border-radius: 0 !important;\n                box-shadow: none !important;\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n                display: flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n              }\n              .sc-ctrl-btn {\n                background: none;\n                border: none;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 50%;\n                padding: 8px;\n                transition: background 0.15s ease, opacity 0.15s ease;\n                opacity: 0.9;\n              }\n              .sc-ctrl-btn:hover {\n                opacity: 1;\n                background: rgba(255, 255, 255, 0.1);\n              }\n              .sc-ctrl-btn:active {\n                opacity: 0.7;\n              }\n              .sc-controls-bar {\n                transition: opacity 0.35s ease, transform 0.35s ease;\n              }\n              .sc-progress-track:hover .sc-progress-thumb {\n                transform: translate(-50%, -50%) scale(1) !important;\n              }\n              .sc-loading-hidden .sc-loading-indicator {\n                display: none !important;\n              }\n            "
             }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                 ref: wrapperRef,
@@ -7579,6 +7840,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                     width: isFullscreen ? "100vw" : "100%",
                     height: isFullscreen ? "100vh" : "auto",
                     minHeight: isFullscreen ? "100vh" : "auto",
+                    aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
                     maxWidth: isFullscreen ? "100vw" : "100%",
                     maxHeight: isFullscreen ? "100vh" : "none",
                     zIndex: isFullscreen ? 999999 : void 0,
@@ -7593,7 +7855,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                         style: _object_spread({
                             display: "block",
                             width: "100%",
-                            height: isFullscreen ? "100%" : "auto",
+                            height: "100%",
                             maxWidth: "100%",
                             maxHeight: isFullscreen ? "100%" : "none",
                             objectFit: isFullscreen ? "cover" : "contain",
@@ -7607,18 +7869,44 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                     }, restVideoAttrs), {
                         children: children
                     })),
-                    (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaSpinner, {
+                    (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                         className: "sc-loading-indicator",
-                        size: 40,
-                        color: "rgba(255, 255, 255, 0.85)",
                         style: {
                             position: "absolute",
-                            top: "calc(50% - 20px)",
-                            left: "calc(50% - 20px)",
+                            top: "50%",
+                            left: "50%",
+                            transform: "translate(-50%, -50%)",
                             zIndex: 20,
-                            animation: "sc-spin 0.9s linear infinite",
-                            filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
-                        }
+                            width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
+                            height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            animation: "sc-loading-glow 1.4s ease-in-out infinite",
+                            filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                style: {
+                                    position: "absolute",
+                                    inset: 0,
+                                    borderRadius: "50%",
+                                    border: "3px solid rgba(255, 255, 255, 0.25)",
+                                    borderTopColor: "#ff0000",
+                                    borderRightColor: "rgba(255, 255, 255, 0.85)",
+                                    animation: "sc-spin 0.8s linear infinite"
+                                }
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                style: {
+                                    width: "7px",
+                                    height: "7px",
+                                    borderRadius: "50%",
+                                    background: "#ff0000",
+                                    boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
+                                }
+                            })
+                        ]
                     }),
                     showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                         style: {
@@ -7662,6 +7950,48 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             })
                         ]
                     }),
+                    adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                        style: {
+                            position: "absolute",
+                            top: "".concat(12 * responsiveScale, "px"),
+                            left: "".concat(12 * responsiveScale, "px"),
+                            zIndex: 50,
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            pointerEvents: "none",
+                            animation: "sc-fade-in 0.3s ease"
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                style: {
+                                    background: "rgba(234, 179, 8, 0.95)",
+                                    color: "#111",
+                                    padding: "".concat(4 * responsiveScale, "px ").concat(12 * responsiveScale, "px"),
+                                    borderRadius: "6px",
+                                    fontSize: "".concat(11 * responsiveScale, "px"),
+                                    fontWeight: 700,
+                                    letterSpacing: "0.08em",
+                                    textTransform: "uppercase",
+                                    boxShadow: "0 2px 12px rgba(234, 179, 8, 0.35)"
+                                },
+                                children: "Ad"
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                style: {
+                                    background: "rgba(0, 0, 0, 0.58)",
+                                    color: "rgba(255, 255, 255, 0.92)",
+                                    padding: "".concat(4 * responsiveScale, "px ").concat(10 * responsiveScale, "px"),
+                                    borderRadius: "6px",
+                                    fontSize: "".concat(11 * responsiveScale, "px"),
+                                    fontWeight: 600,
+                                    border: "1px solid rgba(255, 255, 255, 0.1)",
+                                    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.25)"
+                                },
+                                children: "".concat(Math.max(1, adStatus.currentIndex), " of ").concat(Math.max(Math.max(1, adStatus.currentIndex), adStatus.totalAds))
+                            })
+                        ]
+                    }),
                     showCenterPlay && !isLoading && !isBuffering && !showLicenseWarning && !adStatus.showAds && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                         onClick: handleCenterPlayClick,
                         style: {
@@ -7801,7 +8131,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                                 style: {
                                                     display: "flex",
-                                                    alignItems: "center"
+                                                    alignItems: "center",
+                                                    paddingRight: "".concat(6 * responsiveScale, "px")
                                                 },
                                                 onMouseEnter: function onMouseEnter() {
                                                     return setShowVolumeSlider(true);
@@ -7830,13 +8161,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                                     }),
                                                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                                         style: {
-                                                            width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
+                                                            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 ? "2px" : "0",
-                                                            paddingRight: showVolumeSlider ? "4px" : "0"
+                                                            paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
+                                                            paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
                                                         },
                                                         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                                             style: {
@@ -8083,7 +8414,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                     alignItems: "center",
                                     background: "rgba(0, 0, 0, 0.6)",
                                     borderRadius: "".concat(18 * responsiveScale, "px"),
-                                    padding: "2px"
+                                    padding: "2px",
+                                    paddingRight: "".concat(8 * responsiveScale, "px")
                                 },
                                 onMouseEnter: function onMouseEnter() {
                                     return setShowVolumeSlider(true);
@@ -8112,13 +8444,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                     }),
                                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                         style: {
-                                            width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
+                                            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 ? "2px" : "0",
-                                            paddingRight: showVolumeSlider ? "6px" : "0"
+                                            paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
+                                            paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
                                         },
                                         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                             style: {