stormcloud-video-player 0.3.54 → 0.3.56

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -2647,9 +2647,6 @@ function sendInitialTracking(licenseKey) {
                     headers = {
                         "Content-Type": "application/json"
                     };
-                    if (licenseKey) {
-                        headers["Authorization"] = "Bearer ".concat(licenseKey);
-                    }
                     return [
                         4,
                         fetch("https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/track", {
@@ -2755,6 +2752,234 @@ function sendHeartbeat(licenseKey) {
         });
     })();
 }
+var TRACK_API_URL = "https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/track";
+function mapToAdTrackingSource(source, adPlayerType) {
+    if (source === "prebid" || source === "ima" || source === "hls") {
+        return source;
+    }
+    if (source === "preload" || source === "ssp") {
+        return source === "ssp" ? "prebid" : "ima";
+    }
+    return adPlayerType === "hls" ? "hls" : "ima";
+}
+function postAdTracking(licenseKey, body) {
+    return _async_to_generator(function() {
+        var headers, response;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    headers = {
+                        "Content-Type": "application/json"
+                    };
+                    if (licenseKey) {
+                        headers["Authorization"] = "Bearer ".concat(licenseKey);
+                    }
+                    return [
+                        4,
+                        fetch(TRACK_API_URL, {
+                            method: "POST",
+                            headers: headers,
+                            body: JSON.stringify(body)
+                        })
+                    ];
+                case 1:
+                    response = _state.sent();
+                    if (!response.ok) {
+                        throw new Error("HTTP error! status: ".concat(response.status));
+                    }
+                    return [
+                        4,
+                        response.json()
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function sendAdDetectTracking(licenseKey, payload) {
+    return _async_to_generator(function() {
+        var _payload_source, _payload_timestamp, clientInfo, browserId, adDetectInfo, body, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _state.trys.push([
+                        0,
+                        3,
+                        ,
+                        4
+                    ]);
+                    clientInfo = getClientInfo();
+                    return [
+                        4,
+                        getBrowserID(clientInfo)
+                    ];
+                case 1:
+                    browserId = _state.sent();
+                    adDetectInfo = _object_spread({
+                        source: (_payload_source = payload.source) !== null && _payload_source !== void 0 ? _payload_source : "scte35",
+                        timestamp: (_payload_timestamp = payload.timestamp) !== null && _payload_timestamp !== void 0 ? _payload_timestamp : /* @__PURE__ */ new Date().toISOString()
+                    }, payload.durationSeconds != null && {
+                        durationSeconds: payload.durationSeconds
+                    }, payload.ptsSeconds != null && {
+                        ptsSeconds: payload.ptsSeconds
+                    }, payload.detectedAtFragmentSn != null && {
+                        detectedAtFragmentSn: payload.detectedAtFragmentSn
+                    });
+                    body = _object_spread_props(_object_spread({
+                        browserId: browserId
+                    }, clientInfo, licenseKey && {
+                        licenseKey: licenseKey
+                    }), {
+                        adDetectInfo: adDetectInfo
+                    });
+                    return [
+                        4,
+                        postAdTracking(licenseKey, body)
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        3,
+                        4
+                    ];
+                case 3:
+                    error = _state.sent();
+                    console.error("[StormcloudVideoPlayer] Error sending ad-detect tracking:", error);
+                    return [
+                        3,
+                        4
+                    ];
+                case 4:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function sendAdLoadedTracking(licenseKey, payload, adPlayerType) {
+    return _async_to_generator(function() {
+        var clientInfo, browserId, source, adLoadedInfo, body, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _state.trys.push([
+                        0,
+                        3,
+                        ,
+                        4
+                    ]);
+                    clientInfo = getClientInfo();
+                    return [
+                        4,
+                        getBrowserID(clientInfo)
+                    ];
+                case 1:
+                    browserId = _state.sent();
+                    source = mapToAdTrackingSource(payload.source, adPlayerType);
+                    adLoadedInfo = _object_spread({
+                        source: source,
+                        timestamp: /* @__PURE__ */ new Date().toISOString()
+                    }, payload.vastUrl != null && {
+                        vastUrl: payload.vastUrl
+                    }, payload.durationSeconds != null && {
+                        durationSeconds: payload.durationSeconds
+                    });
+                    body = _object_spread_props(_object_spread({
+                        browserId: browserId
+                    }, clientInfo, licenseKey && {
+                        licenseKey: licenseKey
+                    }), {
+                        adLoadedInfo: adLoadedInfo
+                    });
+                    return [
+                        4,
+                        postAdTracking(licenseKey, body)
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        3,
+                        4
+                    ];
+                case 3:
+                    error = _state.sent();
+                    console.error("[StormcloudVideoPlayer] Error sending ad-loaded tracking:", error);
+                    return [
+                        3,
+                        4
+                    ];
+                case 4:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
+function sendAdImpressionTracking(licenseKey, payload, adPlayerType) {
+    return _async_to_generator(function() {
+        var clientInfo, browserId, source, adImpressionInfo, body, error;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    _state.trys.push([
+                        0,
+                        3,
+                        ,
+                        4
+                    ]);
+                    clientInfo = getClientInfo();
+                    return [
+                        4,
+                        getBrowserID(clientInfo)
+                    ];
+                case 1:
+                    browserId = _state.sent();
+                    source = mapToAdTrackingSource(payload.source, adPlayerType);
+                    adImpressionInfo = _object_spread({
+                        source: source,
+                        adIndex: payload.adIndex,
+                        timestamp: /* @__PURE__ */ new Date().toISOString()
+                    }, payload.durationSeconds != null && {
+                        durationSeconds: payload.durationSeconds
+                    });
+                    body = _object_spread_props(_object_spread({
+                        browserId: browserId
+                    }, clientInfo, licenseKey && {
+                        licenseKey: licenseKey
+                    }), {
+                        adImpressionInfo: adImpressionInfo
+                    });
+                    return [
+                        4,
+                        postAdTracking(licenseKey, body)
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        3,
+                        4
+                    ];
+                case 3:
+                    error = _state.sent();
+                    console.error("[StormcloudVideoPlayer] Error sending ad-impression tracking:", error);
+                    return [
+                        3,
+                        4
+                    ];
+                case 4:
+                    return [
+                        2
+                    ];
+            }
+        });
+    })();
+}
 // src/utils/polyfills.ts
 function polyfillURLSearchParams() {
     if (typeof URLSearchParams !== "undefined") {
@@ -3014,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;
@@ -3055,6 +3282,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         this.maxPreloadPoolSize = 2;
         this.preloadPoolActive = false;
         this.preloadPoolLoopRunning = false;
+        this.adDetectSentForCurrentBreak = false;
         this.continuousFetchLoopRunning = false;
         initializePolyfills();
         var browserOverrides = getBrowserConfigOverrides();
@@ -3524,6 +3752,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             value: function attachImaEventListeners() {
                 var _this = this;
                 this.ima.on("all_ads_completed", function() {
+                    sendAdImpressionTracking(_this.config.licenseKey, {
+                        adIndex: _this.currentAdIndex
+                    }, _this.config.adPlayerType).catch(function() {});
                     var remaining = _this.getRemainingAdMs();
                     _this.consecutiveFailures = 0;
                     if (_this.config.debugAdTiming) {
@@ -3586,6 +3817,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     }
                 });
                 this.ima.on("content_resume", function() {
+                    sendAdImpressionTracking(_this.config.licenseKey, {
+                        adIndex: _this.currentAdIndex
+                    }, _this.config.adPlayerType).catch(function() {});
                     if (!_this.video.muted) {
                         _this.video.muted = true;
                         _this.video.volume = 0;
@@ -3969,6 +4203,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         }
                         return;
                     }
+                    if (!this.adDetectSentForCurrentBreak) {
+                        this.adDetectSentForCurrentBreak = true;
+                        var detectPayload = {};
+                        if (marker.durationSeconds != null) detectPayload.durationSeconds = marker.durationSeconds;
+                        if (marker.ptsSeconds != null) detectPayload.ptsSeconds = marker.ptsSeconds;
+                        sendAdDetectTracking(this.config.licenseKey, detectPayload).catch(function() {});
+                    }
                     var hasPrefetchedAds = this.pendingAdBreak && this.pendingAdBreak.vastUrls.length > 0;
                     this.inAdBreak = true;
                     var durationMs = marker.durationSeconds != null ? marker.durationSeconds * 1e3 : ((_this_pendingAdBreak = this.pendingAdBreak) === null || _this_pendingAdBreak === void 0 ? void 0 : _this_pendingAdBreak.marker.durationSeconds) != null ? this.pendingAdBreak.marker.durationSeconds * 1e3 : void 0;
@@ -4328,6 +4569,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);
@@ -4373,7 +4626,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                         headers: headers
                                     })
                                 ];
-                            case 1:
+                            case 3:
                                 response = _state.sent();
                                 if (!response.ok) {
                                     if (this.config.debugAdTiming) {
@@ -4387,7 +4640,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) {
@@ -4416,35 +4669,200 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             }
         },
         {
-            key: "getCurrentAdIndex",
-            value: function getCurrentAdIndex() {
-                return this.currentAdIndex;
+            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: "getTotalAdsInBreak",
-            value: function getTotalAdsInBreak() {
-                return this.totalAdsInBreak;
+            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: "generateVastUrlsWithCorrelators",
-            value: function generateVastUrlsWithCorrelators(baseUrl, count) {
-                var urls = [];
-                var baseTimestamp = Date.now();
-                for(var i = 0; i < count; i++){
-                    var timestamp = baseTimestamp + i;
-                    var random = Math.floor(Math.random() * 1e12);
-                    var uniqueCorrelator = "".concat(timestamp, "_").concat(random, "_").concat(i);
-                    var urlWithCorrelator = void 0;
-                    var correlatorRegex = /([?&])correlator=([^&]*)/;
-                    if (correlatorRegex.test(baseUrl)) {
-                        urlWithCorrelator = baseUrl.replace(correlatorRegex, "$1correlator=".concat(uniqueCorrelator));
-                    } else if (baseUrl.includes("?")) {
-                        urlWithCorrelator = "".concat(baseUrl, "&correlator=").concat(uniqueCorrelator);
-                    } else {
-                        urlWithCorrelator = "".concat(baseUrl, "?correlator=").concat(uniqueCorrelator);
-                    }
+            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() {
+                return this.currentAdIndex;
+            }
+        },
+        {
+            key: "getTotalAdsInBreak",
+            value: function getTotalAdsInBreak() {
+                return this.totalAdsInBreak;
+            }
+        },
+        {
+            key: "generateVastUrlsWithCorrelators",
+            value: function generateVastUrlsWithCorrelators(baseUrl, count) {
+                var urls = [];
+                var baseTimestamp = Date.now();
+                for(var i = 0; i < count; i++){
+                    var timestamp = baseTimestamp + i;
+                    var random = Math.floor(Math.random() * 1e12);
+                    var uniqueCorrelator = "".concat(timestamp, "_").concat(random, "_").concat(i);
+                    var urlWithCorrelator = void 0;
+                    var correlatorRegex = /([?&])correlator=([^&]*)/;
+                    if (correlatorRegex.test(baseUrl)) {
+                        urlWithCorrelator = baseUrl.replace(correlatorRegex, "$1correlator=".concat(uniqueCorrelator));
+                    } else if (baseUrl.includes("?")) {
+                        urlWithCorrelator = "".concat(baseUrl, "&correlator=").concat(uniqueCorrelator);
+                    } else {
+                        urlWithCorrelator = "".concat(baseUrl, "?correlator=").concat(uniqueCorrelator);
+                    }
                     urls.push(urlWithCorrelator);
                 }
                 return urls;
@@ -4505,10 +4923,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");
@@ -4526,6 +4944,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     isFetching: false,
                     fetchStartTime: Date.now()
                 });
+                this.adDetectSentForCurrentBreak = true;
+                var detectPayload = {};
+                if (marker.durationSeconds != null) detectPayload.durationSeconds = marker.durationSeconds;
+                if (marker.ptsSeconds != null) detectPayload.ptsSeconds = marker.ptsSeconds;
+                if (fragmentSn !== void 0) detectPayload.detectedAtFragmentSn = fragmentSn;
+                sendAdDetectTracking(this.config.licenseKey, detectPayload).catch(function() {});
                 if (this.config.debugAdTiming) {
                     console.log("[PREFETCH] \uD83D\uDD04 Starting ad prefetch for upcoming ad break");
                     console.log("[PREFETCH] \uD83D\uDCCB Pre-generated ".concat(generatedUrls.length, " VAST URLs"));
@@ -4952,11 +5376,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 [
@@ -5001,6 +5428,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     firstAdUrl = preloaded.vastUrl;
                                     preloadedController = preloaded.imaController;
                                     usePreloadedAd = true;
+                                    sendAdLoadedTracking(this.config.licenseKey, {
+                                        source: "preload",
+                                        vastUrl: firstAdUrl
+                                    }, this.config.adPlayerType).catch(function() {});
                                     if (this.config.debugAdTiming) {
                                         console.log("[CONTINUOUS-FETCH] \uD83D\uDE80 Using preloaded ad from pool (preloaded in advance, ready immediately!)");
                                         console.log("[CONTINUOUS-FETCH] Pool still has ".concat(this.preloadPool.length, " preloaded ads ready"));
@@ -5090,6 +5521,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 5:
                                 _state.sent();
+                                sendAdLoadedTracking(this.config.licenseKey, {
+                                    source: "ssp",
+                                    vastUrl: firstAdUrl
+                                }, this.config.adPlayerType).catch(function() {});
                                 if (this.config.debugAdTiming) {
                                     console.log("[CONTINUOUS-FETCH] \u2705 First ad request successful, starting playback");
                                 }
@@ -5486,6 +5921,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 if (this.config.debugAdTiming) {
                                     console.log("[CONTINUOUS-FETCH] \uD83C\uDFAF Using preloaded ad from pool (".concat(this.preloadPool.length, " remaining in pool)"));
                                 }
+                                sendAdLoadedTracking(this.config.licenseKey, {
+                                    source: "preload",
+                                    vastUrl: preloaded.vastUrl
+                                }, this.config.adPlayerType).catch(function() {});
                                 _state.label = 1;
                             case 1:
                                 _state.trys.push([
@@ -5823,15 +6262,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;
                         }
                     }
@@ -5855,11 +6301,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);
+                        }
+                    });
                 }
             }
         },
@@ -5867,40 +6318,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
                                 ];
@@ -6190,6 +6677,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 3:
                                 _state.sent();
+                                sendAdLoadedTracking(this.config.licenseKey, {
+                                    source: "ssp",
+                                    vastUrl: vastTagUrl
+                                }, this.config.adPlayerType).catch(function() {});
                                 this.clearAdRequestWatchdog();
                                 if (this.activeAdRequestToken !== requestToken) {
                                     return [
@@ -6404,6 +6895,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }
                 this.adRequestQueue = [];
                 this.inAdBreak = false;
+                this.adDetectSentForCurrentBreak = false;
                 this.expectedAdBreakDurationMs = void 0;
                 this.currentAdBreakStartWallClockMs = void 0;
                 this.clearAdStartTimer();
@@ -6601,13 +7093,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;
                         }
                     }
@@ -6839,12 +7340,14 @@ var CRITICAL_PROPS = [
     "src",
     "allowNativeHls",
     "licenseKey",
+    "vmapUrl",
     "lowLatencyMode",
     "driftToleranceMs",
     "vastMode"
 ];
+var CONTROLS_HIDE_DELAY = 3e3;
 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",
@@ -6871,12 +7374,15 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         "licenseKey",
         "vastMode",
         "vastTagUrl",
+        "vmapUrl",
         "adPlayerType",
         "minSegmentsBeforePlay"
     ]);
     var videoRef = (0, import_react.useRef)(null);
     var playerRef = (0, import_react.useRef)(null);
     var bufferingTimeoutRef = (0, import_react.useRef)(null);
+    var controlsTimerRef = (0, import_react.useRef)(null);
+    var wrapperRef = (0, import_react.useRef)(null);
     var _import_react_default_useState = _sliced_to_array(import_react.default.useState({
         showAds: false,
         currentIndex: 0,
@@ -6896,8 +7402,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     var _import_react_default_useState12 = _sliced_to_array(import_react.default.useState(false), 2), isBuffering = _import_react_default_useState12[0], setIsBuffering = _import_react_default_useState12[1];
     var _import_react_default_useState13 = _sliced_to_array(import_react.default.useState(false), 2), showCenterPlay = _import_react_default_useState13[0], setShowCenterPlay = _import_react_default_useState13[1];
     var _import_react_default_useState14 = _sliced_to_array(import_react.default.useState(false), 2), showLicenseWarning = _import_react_default_useState14[0], setShowLicenseWarning = _import_react_default_useState14[1];
-    var _import_react_default_useState15 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react_default_useState15[0], setViewportWidth = _import_react_default_useState15[1];
-    var _import_react_default_useState16 = _sliced_to_array(import_react.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react_default_useState16[0], setIsPortrait = _import_react_default_useState16[1];
+    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 getResponsiveScale = function getResponsiveScale() {
         if (viewportWidth < 480) return 0.7;
         if (viewportWidth < 768) return 0.8;
@@ -6905,6 +7412,33 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         return 1;
     };
     var responsiveScale = getResponsiveScale();
+    var resetControlsTimer = (0, import_react.useCallback)(function() {
+        if (controlsTimerRef.current) {
+            clearTimeout(controlsTimerRef.current);
+        }
+        setControlsVisible(true);
+        controlsTimerRef.current = window.setTimeout(function() {
+            if (!showVolumeSlider && !showSpeedMenu) {
+                setControlsVisible(false);
+            }
+        }, CONTROLS_HIDE_DELAY);
+    }, [
+        showVolumeSlider,
+        showSpeedMenu
+    ]);
+    var handleWrapperMouseMove = (0, import_react.useCallback)(function() {
+        resetControlsTimer();
+    }, [
+        resetControlsTimer
+    ]);
+    var handleWrapperMouseLeave = (0, import_react.useCallback)(function() {
+        if (!showVolumeSlider && !showSpeedMenu) {
+            setControlsVisible(false);
+        }
+    }, [
+        showVolumeSlider,
+        showSpeedMenu
+    ]);
     var formatTime = function formatTime(seconds) {
         if (!isFinite(seconds)) return "0:00:00";
         var hours = Math.floor(seconds / 3600);
@@ -6930,6 +7464,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 setShowCenterPlay(true);
             }
         }
+        resetControlsTimer();
     };
     var handleCenterPlayClick = function handleCenterPlayClick() {
         if (videoRef.current && videoRef.current.paused) {
@@ -6955,6 +7490,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 videoRef.current.currentTime = newTime;
             }
         }
+        resetControlsTimer();
     };
     var handleVolumeChange = function handleVolumeChange(newVolume) {
         if (playerRef.current && isFinite(newVolume)) {
@@ -6978,6 +7514,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         src,
         allowNativeHls,
         licenseKey,
+        vmapUrl,
         lowLatencyMode,
         driftToleranceMs,
         vastMode
@@ -7020,6 +7557,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);
@@ -7110,7 +7648,6 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     (0, import_react.useEffect)(function() {
         if (!playerRef.current || !videoRef.current) return;
         var updateStates = function updateStates() {
-            var _videoRef_current;
             if (playerRef.current && videoRef.current) {
                 setIsMuted(playerRef.current.isMuted());
                 setIsPlaying(!videoRef.current.paused);
@@ -7123,12 +7660,11 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 var rateValue = videoRef.current.playbackRate;
                 setPlaybackRate(isFinite(rateValue) && rateValue > 0 ? rateValue : 1);
             }
-            setIsFullscreen(document.fullscreenElement === ((_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.parentElement));
+            setIsFullscreen(document.fullscreenElement === wrapperRef.current);
         };
         var interval = setInterval(updateStates, 200);
         var handleFullscreenChange = function handleFullscreenChange() {
-            var _videoRef_current;
-            setIsFullscreen(document.fullscreenElement === ((_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.parentElement));
+            setIsFullscreen(document.fullscreenElement === wrapperRef.current);
         };
         document.addEventListener("fullscreenchange", handleFullscreenChange);
         return function() {
@@ -7256,13 +7792,25 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, [
         debugAdTiming
     ]);
+    (0, import_react.useEffect)(function() {
+        return function() {
+            if (controlsTimerRef.current) {
+                clearTimeout(controlsTimerRef.current);
+            }
+        };
+    }, []);
+    var progressPercent = duration > 0 ? currentTime / duration * 100 : 0;
+    var VolumeIcon = isMuted || volume === 0 ? import_fa.FaVolumeMute : volume < 0.5 ? import_fa.FaVolumeDown : import_fa.FaVolumeUp;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
-                children: "\n              @keyframes spin {\n                from {\n                  transform: rotate(0deg);\n                }\n                to {\n                  transform: rotate(360deg);\n                }\n              }\n              \n              .stormcloud-loading-hidden .stormcloud-loading-indicator {\n                display: none !important;\n              }\n              \n              .stormcloud-video-wrapper: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              \n              .stormcloud-video-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              \n              *:fullscreen {\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              }\n            "
+                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            "
             }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                className: "stormcloud-video-wrapper ".concat(wrapperClassName || ""),
+                ref: wrapperRef,
+                className: "sc-wrapper ".concat(wrapperClassName || ""),
+                onMouseMove: handleWrapperMouseMove,
+                onMouseLeave: handleWrapperMouseLeave,
                 style: _object_spread({
                     display: "flex",
                     alignItems: "center",
@@ -7277,7 +7825,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                     maxWidth: isFullscreen ? "100vw" : "100%",
                     maxHeight: isFullscreen ? "100vh" : "none",
                     zIndex: isFullscreen ? 999999 : void 0,
-                    backgroundColor: isFullscreen ? "#000" : void 0,
+                    backgroundColor: "#000",
                     borderRadius: isFullscreen ? 0 : void 0,
                     boxShadow: isFullscreen ? "none" : void 0
                 }, wrapperStyle),
@@ -7303,16 +7851,16 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                         children: children
                     })),
                     (isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaSpinner, {
-                        className: "stormcloud-loading-indicator",
-                        size: 42,
-                        color: "white",
+                        className: "sc-loading-indicator",
+                        size: 40,
+                        color: "rgba(255, 255, 255, 0.85)",
                         style: {
                             position: "absolute",
-                            top: "calc(50% - 21px)",
-                            left: "calc(50% - 21px)",
+                            top: "calc(50% - 20px)",
+                            left: "calc(50% - 20px)",
                             zIndex: 20,
-                            animation: "spin 1s linear infinite",
-                            filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8))"
+                            animation: "sc-spin 0.9s linear infinite",
+                            filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
                         }
                     }),
                     showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -7322,13 +7870,13 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             left: "50%",
                             transform: "translate(-50%, -50%)",
                             zIndex: 25,
-                            background: "linear-gradient(135deg, rgba(220, 38, 38, 0.95) 0%, rgba(185, 28, 28, 0.9) 100%)",
+                            background: "rgba(220, 38, 38, 0.92)",
+                            backdropFilter: "blur(24px)",
                             color: "white",
-                            padding: "24px 32px",
-                            borderRadius: "16px",
-                            backdropFilter: "blur(20px)",
-                            border: "2px solid rgba(255, 255, 255, 0.2)",
-                            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.2)",
+                            padding: "28px 36px",
+                            borderRadius: "14px",
+                            border: "1px solid rgba(255, 255, 255, 0.15)",
+                            boxShadow: "0 24px 64px rgba(0, 0, 0, 0.5)",
                             textAlign: "center",
                             maxWidth: "400px",
                             margin: "0 16px"
@@ -7336,20 +7884,18 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                         children: [
                             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                 style: {
-                                    fontSize: "20px",
-                                    fontWeight: "bold",
-                                    marginBottom: "12px",
-                                    color: "#ffffff",
-                                    textShadow: "0 2px 4px rgba(0, 0, 0, 0.5)"
+                                    fontSize: "18px",
+                                    fontWeight: "700",
+                                    marginBottom: "10px",
+                                    letterSpacing: "-0.02em"
                                 },
                                 children: "License Key Required"
                             }),
                             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                 style: {
-                                    fontSize: "14px",
-                                    lineHeight: "1.5",
-                                    color: "rgba(255, 255, 255, 0.9)",
-                                    textShadow: "0 1px 2px rgba(0, 0, 0, 0.3)"
+                                    fontSize: "13px",
+                                    lineHeight: "1.6",
+                                    color: "rgba(255, 255, 255, 0.85)"
                                 },
                                 children: [
                                     "Please provide a valid license key to use the Stormcloud Video Player.",
@@ -7368,573 +7914,419 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                             transform: "translate(-50%, -50%)",
                             zIndex: 15,
                             cursor: "pointer",
-                            background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)",
+                            background: "rgba(0, 0, 0, 0.55)",
+                            backdropFilter: "blur(8px)",
                             borderRadius: "50%",
-                            width: "100px",
-                            height: "100px",
+                            width: "".concat(92 * responsiveScale, "px"),
+                            height: "".concat(92 * responsiveScale, "px"),
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
-                            backdropFilter: "blur(20px)",
-                            border: "3px solid rgba(255, 255, 255, 0.8)",
-                            boxShadow: "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)",
-                            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+                            transition: "background 0.2s ease, transform 0.2s ease",
+                            animation: "sc-fade-in 0.2s ease"
                         },
                         onMouseEnter: function onMouseEnter(e) {
-                            var target = e.currentTarget;
-                            target.style.transform = "translate(-50%, -50%)";
-                            target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(40, 40, 40, 0.9) 100%)";
-                            target.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
-                            target.style.borderColor = "rgba(255, 255, 255, 0.9)";
+                            e.currentTarget.style.background = "rgba(0, 0, 0, 0.72)";
+                            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1.06)";
                         },
                         onMouseLeave: function onMouseLeave(e) {
-                            var target = e.currentTarget;
-                            target.style.transform = "translate(-50%, -50%)";
-                            target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.8) 100%)";
-                            target.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.3)";
-                            target.style.borderColor = "rgba(255, 255, 255, 0.8)";
+                            e.currentTarget.style.background = "rgba(0, 0, 0, 0.55)";
+                            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1)";
                         },
                         title: "Play",
                         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPlay, {
-                            size: 36,
+                            size: Math.max(24, 32 * responsiveScale),
                             color: "white",
                             style: {
-                                marginLeft: "6px",
-                                filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))"
+                                marginLeft: "4px"
                             }
                         })
                     }),
-                    shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                            style: {
-                                position: "absolute",
-                                bottom: 0,
-                                left: 0,
-                                right: 0,
-                                background: "linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%)",
-                                padding: "20px 16px 16px",
-                                zIndex: 10
-                            },
-                            children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                    style: {
-                                        width: "100%",
-                                        height: "8px",
-                                        background: "linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%)",
-                                        borderRadius: "8px",
-                                        marginBottom: "16px",
-                                        cursor: "pointer",
-                                        position: "relative",
-                                        backdropFilter: "blur(5px)",
-                                        border: "1px solid rgba(255, 255, 255, 0.1)",
-                                        boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.2)"
-                                    },
-                                    onClick: handleTimelineSeek,
-                                    children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                            style: {
-                                                height: "100%",
-                                                background: "linear-gradient(90deg, rgba(139, 92, 246, 0.9) 0%, rgba(59, 130, 246, 0.8) 50%, rgba(34, 197, 94, 0.9) 100%)",
-                                                borderRadius: "8px",
-                                                width: "".concat(duration > 0 ? currentTime / duration * 100 : 0, "%"),
-                                                transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                boxShadow: "0 2px 8px rgba(139, 92, 246, 0.4)"
-                                            }
-                                        }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                            style: {
-                                                position: "absolute",
-                                                top: "-6px",
-                                                right: "".concat(duration > 0 ? 100 - currentTime / duration * 100 : 100, "%"),
-                                                width: "20px",
-                                                height: "20px",
-                                                background: "linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 240, 0.9) 100%)",
-                                                borderRadius: "50%",
-                                                border: "3px solid rgba(139, 92, 246, 0.8)",
-                                                boxShadow: "0 4px 16px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
-                                                transform: "translateX(50%)",
-                                                transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
-                                            }
-                                        })
-                                    ]
-                                }),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                    style: {
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "space-between",
-                                        color: "white",
-                                        flexWrap: viewportWidth < 768 ? "wrap" : "nowrap",
-                                        gap: "".concat(8 * responsiveScale, "px")
-                                    },
-                                    children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                            style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "".concat(12 * responsiveScale, "px"),
-                                                flexWrap: viewportWidth < 480 ? "wrap" : "nowrap"
-                                            },
-                                            children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                                    onClick: handlePlayPause,
+                    shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                        className: "sc-controls-bar",
+                        style: {
+                            position: "absolute",
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            background: "linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%)",
+                            padding: "".concat(20 * responsiveScale, "px ").concat(12 * responsiveScale, "px ").concat(8 * responsiveScale, "px"),
+                            zIndex: 10,
+                            opacity: controlsVisible || adStatus.showAds ? 1 : 0,
+                            transform: controlsVisible || adStatus.showAds ? "translateY(0)" : "translateY(6px)",
+                            pointerEvents: controlsVisible || adStatus.showAds ? "auto" : "none"
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                className: "sc-progress-track",
+                                style: {
+                                    width: "100%",
+                                    height: "3px",
+                                    background: "rgba(255, 255, 255, 0.2)",
+                                    borderRadius: "1.5px",
+                                    marginBottom: "".concat(8 * responsiveScale, "px"),
+                                    cursor: "pointer",
+                                    position: "relative",
+                                    transition: "height 0.1s ease"
+                                },
+                                onClick: handleTimelineSeek,
+                                onMouseEnter: function onMouseEnter(e) {
+                                    e.currentTarget.style.height = "5px";
+                                },
+                                onMouseLeave: function onMouseLeave(e) {
+                                    e.currentTarget.style.height = "3px";
+                                },
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        style: {
+                                            position: "absolute",
+                                            top: 0,
+                                            left: 0,
+                                            bottom: 0,
+                                            background: adStatus.showAds ? "#f5c518" : "#ff0000",
+                                            borderRadius: "1.5px",
+                                            width: "".concat(progressPercent, "%"),
+                                            transition: "width 0.15s linear"
+                                        }
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        className: "sc-progress-thumb",
+                                        style: {
+                                            position: "absolute",
+                                            top: "50%",
+                                            left: "".concat(progressPercent, "%"),
+                                            transform: "translate(-50%, -50%) scale(0)",
+                                            width: "13px",
+                                            height: "13px",
+                                            background: adStatus.showAds ? "#f5c518" : "#ff0000",
+                                            borderRadius: "50%",
+                                            boxShadow: "0 0 4px rgba(0, 0, 0, 0.3)",
+                                            transition: "transform 0.1s ease, left 0.15s linear"
+                                        }
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    color: "white",
+                                    gap: "".concat(8 * responsiveScale, "px")
+                                },
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                        style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "".concat(8 * responsiveScale, "px")
+                                        },
+                                        children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                                className: "sc-ctrl-btn",
+                                                onClick: handlePlayPause,
+                                                style: {
+                                                    padding: "".concat(8 * responsiveScale, "px"),
+                                                    borderRadius: "50%",
+                                                    minWidth: "".concat(36 * responsiveScale, "px"),
+                                                    minHeight: "".concat(36 * responsiveScale, "px")
+                                                },
+                                                title: isPlaying ? "Pause" : "Play",
+                                                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPause, {
+                                                    size: Math.max(14, 18 * responsiveScale)
+                                                }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPlay, {
+                                                    size: Math.max(14, 18 * responsiveScale),
                                                     style: {
-                                                        background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
-                                                        backdropFilter: "blur(12px)",
-                                                        border: "".concat(2 * responsiveScale, "px solid rgba(255, 255, 255, 0.3)"),
-                                                        color: "#ffffff",
-                                                        cursor: "pointer",
-                                                        padding: "".concat(10 * responsiveScale, "px"),
-                                                        borderRadius: "".concat(16 * responsiveScale, "px"),
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                                                        minWidth: "".concat(48 * responsiveScale, "px"),
-                                                        minHeight: "".concat(48 * responsiveScale, "px")
-                                                    },
-                                                    onMouseEnter: function onMouseEnter(e) {
-                                                        var target = e.target;
-                                                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
-                                                        target.style.boxShadow = "0 12px 48px rgba(0, 0, 0, 0.6), 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
-                                                    },
-                                                    onMouseLeave: function onMouseLeave(e) {
-                                                        var target = e.target;
-                                                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
-                                                        target.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
-                                                    },
-                                                    title: isPlaying ? "Pause" : "Play",
-                                                    children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPause, {
-                                                        size: Math.max(16, 20 * responsiveScale),
+                                                        marginLeft: "2px"
+                                                    }
+                                                })
+                                            }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                                style: {
+                                                    display: "flex",
+                                                    alignItems: "center"
+                                                },
+                                                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: {
-                                                            filter: "drop-shadow(0 0 0 transparent)"
-                                                        }
-                                                    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaPlay, {
-                                                        size: Math.max(16, 20 * responsiveScale),
+                                                            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: {
-                                                            filter: "drop-shadow(0 0 0 transparent)"
-                                                        }
-                                                    })
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                                    style: {
-                                                        position: "relative",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        padding: "8px",
-                                                        margin: "-8px"
-                                                    },
-                                                    onMouseEnter: function onMouseEnter() {
-                                                        return setShowVolumeSlider(true);
-                                                    },
-                                                    onMouseLeave: function onMouseLeave() {
-                                                        return setShowVolumeSlider(false);
-                                                    },
-                                                    children: [
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                                            onClick: function onClick() {
-                                                                if (playerRef.current) {
-                                                                    playerRef.current.toggleMute();
-                                                                }
-                                                                if (onVolumeToggle) {
-                                                                    onVolumeToggle();
-                                                                }
-                                                            },
+                                                            width: showVolumeSlider ? "".concat(62 * 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"
+                                                        },
+                                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                                             style: {
-                                                                background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
-                                                                backdropFilter: "blur(10px)",
-                                                                border: "".concat(2 * responsiveScale, "px solid rgba(255, 255, 255, 0.3)"),
-                                                                color: "#ffffff",
+                                                                position: "relative",
+                                                                width: "".concat(56 * responsiveScale, "px"),
+                                                                height: "3px",
                                                                 cursor: "pointer",
-                                                                padding: "".concat(8 * responsiveScale, "px"),
-                                                                borderRadius: "".concat(16 * responsiveScale, "px"),
-                                                                display: "flex",
-                                                                alignItems: "center",
-                                                                justifyContent: "center",
-                                                                transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                                boxShadow: "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
-                                                                minWidth: "".concat(44 * responsiveScale, "px"),
-                                                                minHeight: "".concat(44 * responsiveScale, "px")
+                                                                borderRadius: "1.5px"
                                                             },
-                                                            onMouseEnter: function onMouseEnter(e) {
-                                                                var target = e.target;
-                                                                target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
-                                                                target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 5px 16px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35)";
+                                                            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)));
                                                             },
-                                                            onMouseLeave: function onMouseLeave(e) {
-                                                                var target = e.target;
-                                                                target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
-                                                                target.style.boxShadow = "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)";
+                                                            onClick: function onClick(e) {
+                                                                e.stopPropagation();
+                                                                var r = e.currentTarget.getBoundingClientRect();
+                                                                handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
                                                             },
-                                                            title: isMuted ? "Unmute" : "Mute",
-                                                            children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeMute, {
-                                                                size: Math.max(14, 16 * responsiveScale),
-                                                                style: {
-                                                                    filter: "drop-shadow(0 0 0 transparent)"
-                                                                }
-                                                            }) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeDown, {
-                                                                size: Math.max(14, 16 * responsiveScale),
-                                                                style: {
-                                                                    filter: "drop-shadow(0 0 0 transparent)"
-                                                                }
-                                                            }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeUp, {
-                                                                size: Math.max(14, 16 * responsiveScale),
-                                                                style: {
-                                                                    filter: "drop-shadow(0 0 0 transparent)"
-                                                                }
-                                                            })
-                                                        }),
-                                                        showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
                                                             children: [
                                                                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                                                     style: {
                                                                         position: "absolute",
-                                                                        bottom: "100%",
-                                                                        left: "50%",
-                                                                        transform: "translateX(-50%)",
-                                                                        width: "60px",
-                                                                        height: "20px",
-                                                                        marginBottom: "-16px",
-                                                                        zIndex: 9
-                                                                    },
-                                                                    onMouseEnter: function onMouseEnter() {
-                                                                        return setShowVolumeSlider(true);
-                                                                    },
-                                                                    onMouseLeave: function onMouseLeave() {
-                                                                        return setShowVolumeSlider(false);
+                                                                        inset: 0,
+                                                                        background: "rgba(255, 255, 255, 0.2)",
+                                                                        borderRadius: "1.5px"
                                                                     }
                                                                 }),
                                                                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
                                                                     style: {
                                                                         position: "absolute",
-                                                                        bottom: "100%",
-                                                                        left: "50%",
-                                                                        transform: "translateX(-50%)",
-                                                                        marginBottom: "4px",
-                                                                        background: "linear-gradient(135deg, rgba(0, 0, 0, 0.88) 0%, rgba(20, 20, 20, 0.92) 100%)",
-                                                                        backdropFilter: "blur(15px)",
-                                                                        padding: "10px 14px",
-                                                                        borderRadius: "14px",
-                                                                        border: "1px solid rgba(255, 255, 255, 0.15)",
-                                                                        display: "flex",
-                                                                        flexDirection: "column",
-                                                                        alignItems: "center",
-                                                                        justifyContent: "center",
-                                                                        height: "128px",
-                                                                        boxShadow: "0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)",
-                                                                        zIndex: 10,
-                                                                        transition: "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out"
-                                                                    },
-                                                                    onMouseEnter: function onMouseEnter(e) {
-                                                                        setShowVolumeSlider(true);
-                                                                        e.currentTarget.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px rgba(59, 130, 246, 0.3)";
-                                                                        e.currentTarget.style.borderColor = "rgba(59, 130, 246, 0.4)";
-                                                                    },
-                                                                    onMouseLeave: function onMouseLeave(e) {
-                                                                        setShowVolumeSlider(false);
-                                                                        e.currentTarget.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
-                                                                        e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.15)";
-                                                                    },
-                                                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                                                        style: {
-                                                                            position: "relative",
-                                                                            width: "8px",
-                                                                            height: "104px",
-                                                                            cursor: "pointer",
-                                                                            transition: "transform 0.2s ease-in-out"
-                                                                        },
-                                                                        onMouseEnter: function onMouseEnter(e) {},
-                                                                        onMouseLeave: function onMouseLeave(e) {},
-                                                                        onMouseDown: function onMouseDown(e) {
-                                                                            e.preventDefault();
-                                                                            var sliderElement = e.currentTarget;
-                                                                            var handleMouseMove = function handleMouseMove(moveEvent) {
-                                                                                if (!sliderElement) return;
-                                                                                var rect2 = sliderElement.getBoundingClientRect();
-                                                                                var y2 = moveEvent.clientY - rect2.top;
-                                                                                var percentage2 = 1 - Math.max(0, Math.min(1, y2 / rect2.height));
-                                                                                handleVolumeChange(percentage2);
-                                                                            };
-                                                                            var handleMouseUp = function handleMouseUp1() {
-                                                                                document.removeEventListener("mousemove", handleMouseMove);
-                                                                                document.removeEventListener("mouseup", handleMouseUp);
-                                                                            };
-                                                                            document.addEventListener("mousemove", handleMouseMove);
-                                                                            document.addEventListener("mouseup", handleMouseUp);
-                                                                            var rect = sliderElement.getBoundingClientRect();
-                                                                            var y = e.clientY - rect.top;
-                                                                            var percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
-                                                                            handleVolumeChange(percentage);
-                                                                        },
-                                                                        onClick: function onClick(e) {
-                                                                            e.stopPropagation();
-                                                                            var rect = e.currentTarget.getBoundingClientRect();
-                                                                            var y = e.clientY - rect.top;
-                                                                            var percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
-                                                                            handleVolumeChange(percentage);
-                                                                        },
-                                                                        children: [
-                                                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                                                style: {
-                                                                                    position: "absolute",
-                                                                                    bottom: "0",
-                                                                                    left: "0",
-                                                                                    width: "100%",
-                                                                                    height: "100%",
-                                                                                    background: "linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 100%)",
-                                                                                    borderRadius: "4px",
-                                                                                    boxShadow: "inset 0 1px 3px rgba(0, 0, 0, 0.2)"
-                                                                                }
-                                                                            }),
-                                                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                                                style: {
-                                                                                    position: "absolute",
-                                                                                    bottom: "0",
-                                                                                    left: "0",
-                                                                                    width: "100%",
-                                                                                    height: "".concat((isMuted ? 0 : volume) * 100, "%"),
-                                                                                    background: "linear-gradient(180deg, rgba(96, 165, 250, 1) 0%, rgba(59, 130, 246, 0.95) 50%, rgba(37, 99, 235, 0.9) 100%)",
-                                                                                    borderRadius: "4px",
-                                                                                    transition: "height 0.15s ease-out, box-shadow 0.2s ease-in-out",
-                                                                                    boxShadow: "0 0 8px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3)"
-                                                                                }
-                                                                            }),
-                                                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                                                style: {
-                                                                                    position: "absolute",
-                                                                                    bottom: "calc(".concat((isMuted ? 0 : volume) * 100, "% - 7px)"),
-                                                                                    left: "50%",
-                                                                                    transform: "translateX(-50%)",
-                                                                                    width: "14px",
-                                                                                    height: "14px",
-                                                                                    background: "linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)",
-                                                                                    borderRadius: "50%",
-                                                                                    boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(59, 130, 246, 0.3), 0 0 12px rgba(59, 130, 246, 0.4)",
-                                                                                    transition: "bottom 0.15s ease-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out",
-                                                                                    cursor: "grab"
-                                                                                },
-                                                                                onMouseEnter: function onMouseEnter(e) {
-                                                                                    e.currentTarget.style.boxShadow = "0 3px 10px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.6)";
-                                                                                    e.currentTarget.style.cursor = "grab";
-                                                                                },
-                                                                                onMouseLeave: function onMouseLeave(e) {
-                                                                                    e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(59, 130, 246, 0.3), 0 0 12px rgba(59, 130, 246, 0.4)";
-                                                                                },
-                                                                                onMouseDown: function onMouseDown(e) {
-                                                                                    e.currentTarget.style.cursor = "grabbing";
-                                                                                },
-                                                                                onMouseUp: function onMouseUp(e) {
-                                                                                    e.currentTarget.style.cursor = "grab";
-                                                                                }
-                                                                            })
-                                                                        ]
-                                                                    })
+                                                                        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.jsxs)("div", {
-                                                    style: {
-                                                        fontSize: "".concat(14 * responsiveScale, "px"),
-                                                        fontFamily: "monospace",
-                                                        color: "rgba(255, 255, 255, 0.9)",
-                                                        display: viewportWidth < 480 ? "none" : "block"
-                                                    },
-                                                    children: [
-                                                        formatTime(currentTime),
-                                                        " / ",
-                                                        formatTime(duration)
-                                                    ]
-                                                })
-                                            ]
-                                        }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                            style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "".concat(12 * responsiveScale, "px")
-                                            },
-                                            children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                                    style: {
-                                                        position: "relative",
-                                                        display: viewportWidth < 600 ? "none" : "block"
-                                                    },
-                                                    children: [
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-                                                            onClick: function onClick() {
-                                                                return setShowSpeedMenu(!showSpeedMenu);
-                                                            },
-                                                            style: {
-                                                                background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
-                                                                backdropFilter: "blur(10px)",
-                                                                border: "".concat(2 * responsiveScale, "px solid rgba(255, 255, 255, 0.3)"),
-                                                                color: "#ffffff",
-                                                                cursor: "pointer",
-                                                                padding: "".concat(8 * responsiveScale, "px ").concat(14 * responsiveScale, "px"),
-                                                                borderRadius: "".concat(14 * responsiveScale, "px"),
-                                                                fontSize: "".concat(14 * responsiveScale, "px"),
-                                                                fontFamily: "monospace",
-                                                                fontWeight: "700",
-                                                                transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                                boxShadow: "0 6px 24px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
-                                                                minWidth: "".concat(56 * responsiveScale, "px"),
-                                                                minHeight: "".concat(40 * responsiveScale, "px")
-                                                            },
-                                                            onMouseEnter: function onMouseEnter(e) {
-                                                                var target = e.target;
-                                                                target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
-                                                                target.style.boxShadow = "0 10px 32px rgba(0, 0, 0, 0.6), 0 5px 16px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35)";
-                                                            },
-                                                            onMouseLeave: function onMouseLeave(e) {
-                                                                var target = e.target;
-                                                                target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
-                                                                target.style.boxShadow = "0 6px 24px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)";
-                                                            },
-                                                            title: "Playback Speed",
-                                                            children: [
-                                                                playbackRate,
-                                                                "x"
-                                                            ]
-                                                        }),
-                                                        showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                            style: {
-                                                                position: "absolute",
-                                                                bottom: "100%",
-                                                                right: 0,
-                                                                marginBottom: "12px",
-                                                                background: "linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%)",
-                                                                backdropFilter: "blur(20px)",
-                                                                borderRadius: "12px",
-                                                                border: "1px solid rgba(255, 255, 255, 0.1)",
-                                                                overflow: "hidden",
-                                                                minWidth: "90px",
-                                                                boxShadow: "0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
-                                                            },
-                                                            children: [
-                                                                0.25,
-                                                                0.5,
-                                                                0.75,
-                                                                1,
-                                                                1.25,
-                                                                1.5,
-                                                                1.75,
-                                                                2
-                                                            ].map(function(speed) {
-                                                                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-                                                                    onClick: function onClick() {
-                                                                        return handlePlaybackRateChange(speed);
-                                                                    },
-                                                                    style: {
-                                                                        display: "block",
-                                                                        width: "100%",
-                                                                        padding: "10px 16px",
-                                                                        background: playbackRate === speed ? "linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.6) 100%)" : "transparent",
-                                                                        border: "none",
-                                                                        color: "white",
-                                                                        cursor: "pointer",
-                                                                        fontSize: "13px",
-                                                                        fontFamily: "monospace",
-                                                                        fontWeight: "600",
-                                                                        textAlign: "center",
-                                                                        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                                        borderBottom: speed !== 2 ? "1px solid rgba(255, 255, 255, 0.05)" : "none"
-                                                                    },
-                                                                    onMouseEnter: function onMouseEnter(e) {
-                                                                        if (playbackRate !== speed) {
-                                                                            e.target.style.background = "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
-                                                                        }
-                                                                    },
-                                                                    onMouseLeave: function onMouseLeave(e) {
-                                                                        if (playbackRate !== speed) {
-                                                                            e.target.style.background = "transparent";
-                                                                        }
-                                                                    },
-                                                                    children: [
-                                                                        speed,
-                                                                        "x"
-                                                                    ]
-                                                                }, speed);
-                                                            })
-                                                        })
-                                                    ]
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                                    onClick: function onClick() {
-                                                        if (onFullscreenToggle) {
-                                                            onFullscreenToggle();
-                                                        } else if (playerRef.current) {
-                                                            playerRef.current.toggleFullscreen().catch(function(err) {
-                                                                console.error("Fullscreen error:", err);
-                                                            });
-                                                        }
-                                                    },
-                                                    style: {
-                                                        background: "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)",
-                                                        backdropFilter: "blur(10px)",
-                                                        border: "".concat(2 * responsiveScale, "px solid rgba(255, 255, 255, 0.3)"),
-                                                        color: "#ffffff",
-                                                        cursor: "pointer",
-                                                        padding: "".concat(8 * responsiveScale, "px"),
-                                                        borderRadius: "".concat(16 * responsiveScale, "px"),
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                                                        boxShadow: "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
-                                                        minWidth: "".concat(44 * responsiveScale, "px"),
-                                                        minHeight: "".concat(44 * responsiveScale, "px")
-                                                    },
-                                                    onMouseEnter: function onMouseEnter(e) {
-                                                        var target = e.target;
-                                                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%)";
-                                                        target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 5px 16px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35)";
-                                                    },
-                                                    onMouseLeave: function onMouseLeave(e) {
-                                                        var target = e.target;
-                                                        target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 100%)";
-                                                        target.style.boxShadow = "0 6px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25)";
-                                                    },
-                                                    title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
-                                                    children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
-                                                        size: Math.max(14, 16 * responsiveScale),
+                                                    })
+                                                ]
+                                            }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                                style: {
+                                                    fontSize: "".concat(13 * responsiveScale, "px"),
+                                                    fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
+                                                    color: "rgba(255, 255, 255, 0.9)",
+                                                    display: viewportWidth < 480 ? "none" : "block",
+                                                    fontVariantNumeric: "tabular-nums",
+                                                    userSelect: "none",
+                                                    marginLeft: "".concat(4 * responsiveScale, "px")
+                                                },
+                                                children: [
+                                                    formatTime(currentTime),
+                                                    " ",
+                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
                                                         style: {
-                                                            filter: "drop-shadow(0 0 0 transparent)"
-                                                        }
-                                                    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
-                                                        size: Math.max(14, 16 * responsiveScale),
+                                                            color: "rgba(255,255,255,0.5)"
+                                                        },
+                                                        children: "/"
+                                                    }),
+                                                    " ",
+                                                    formatTime(duration)
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                        style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "".concat(8 * responsiveScale, "px")
+                                        },
+                                        children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                                style: {
+                                                    position: "relative",
+                                                    display: viewportWidth < 600 ? "none" : "block"
+                                                },
+                                                children: [
+                                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+                                                        className: "sc-ctrl-btn",
+                                                        onClick: function onClick() {
+                                                            setShowSpeedMenu(!showSpeedMenu);
+                                                            resetControlsTimer();
+                                                        },
                                                         style: {
-                                                            filter: "drop-shadow(0 0 0 transparent)"
-                                                        }
+                                                            padding: "".concat(6 * responsiveScale, "px ").concat(10 * responsiveScale, "px"),
+                                                            borderRadius: "".concat(6 * responsiveScale, "px"),
+                                                            fontSize: "".concat(13 * responsiveScale, "px"),
+                                                            fontFamily: "'SF Mono', 'Cascadia Code', monospace",
+                                                            fontWeight: "600",
+                                                            minHeight: "".concat(32 * responsiveScale, "px")
+                                                        },
+                                                        title: "Playback Speed",
+                                                        children: [
+                                                            playbackRate,
+                                                            "x"
+                                                        ]
+                                                    }),
+                                                    showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                        style: {
+                                                            position: "absolute",
+                                                            bottom: "100%",
+                                                            right: 0,
+                                                            marginBottom: "8px",
+                                                            background: "rgba(0, 0, 0, 0.8)",
+                                                            backdropFilter: "blur(24px)",
+                                                            WebkitBackdropFilter: "blur(24px)",
+                                                            borderRadius: "10px",
+                                                            border: "1px solid rgba(255, 255, 255, 0.1)",
+                                                            overflow: "hidden",
+                                                            minWidth: "80px",
+                                                            boxShadow: "0 12px 40px rgba(0, 0, 0, 0.5)",
+                                                            animation: "sc-fade-in 0.15s ease"
+                                                        },
+                                                        children: [
+                                                            0.25,
+                                                            0.5,
+                                                            0.75,
+                                                            1,
+                                                            1.25,
+                                                            1.5,
+                                                            1.75,
+                                                            2
+                                                        ].map(function(speed) {
+                                                            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+                                                                onClick: function onClick() {
+                                                                    return handlePlaybackRateChange(speed);
+                                                                },
+                                                                style: {
+                                                                    display: "block",
+                                                                    width: "100%",
+                                                                    padding: "".concat(8 * responsiveScale, "px ").concat(14 * responsiveScale, "px"),
+                                                                    background: playbackRate === speed ? "rgba(255, 255, 255, 0.12)" : "transparent",
+                                                                    border: "none",
+                                                                    color: playbackRate === speed ? "#fff" : "rgba(255, 255, 255, 0.7)",
+                                                                    cursor: "pointer",
+                                                                    fontSize: "".concat(12 * responsiveScale, "px"),
+                                                                    fontFamily: "'SF Mono', monospace",
+                                                                    fontWeight: playbackRate === speed ? "700" : "500",
+                                                                    textAlign: "center",
+                                                                    transition: "background 0.15s ease, color 0.15s ease"
+                                                                },
+                                                                onMouseEnter: function onMouseEnter(e) {
+                                                                    if (playbackRate !== speed) {
+                                                                        e.target.style.background = "rgba(255, 255, 255, 0.08)";
+                                                                        e.target.style.color = "#fff";
+                                                                    }
+                                                                },
+                                                                onMouseLeave: function onMouseLeave(e) {
+                                                                    if (playbackRate !== speed) {
+                                                                        e.target.style.background = "transparent";
+                                                                        e.target.style.color = "rgba(255, 255, 255, 0.7)";
+                                                                    }
+                                                                },
+                                                                children: [
+                                                                    speed,
+                                                                    "x"
+                                                                ]
+                                                            }, speed);
+                                                        })
                                                     })
+                                                ]
+                                            }),
+                                            /* @__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")
+                                                },
+                                                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)
                                                 })
-                                            ]
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
                     }) : 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"),
-                            transform: "none",
                             display: "flex",
                             flexDirection: isPortrait ? "column" : "row",
-                            gap: "".concat(10 * responsiveScale, "px"),
-                            zIndex: 10
+                            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: {
-                                    position: "relative",
                                     display: "flex",
                                     alignItems: "center",
-                                    padding: "8px",
-                                    margin: "-8px"
+                                    background: "rgba(0, 0, 0, 0.6)",
+                                    borderRadius: "".concat(18 * responsiveScale, "px"),
+                                    padding: "2px"
                                 },
                                 onMouseEnter: function onMouseEnter() {
                                     return setShowVolumeSlider(true);
@@ -7944,260 +8336,128 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                 },
                                 children: [
                                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                        className: "sc-ctrl-btn",
                                         onClick: function onClick() {
-                                            if (playerRef.current) {
-                                                playerRef.current.toggleMute();
-                                            }
-                                            if (onVolumeToggle) {
-                                                onVolumeToggle();
-                                            }
-                                        },
-                                        onMouseEnter: function onMouseEnter(e) {
-                                            var target = e.currentTarget;
-                                            target.style.boxShadow = "0 14px 48px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
-                                            target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
-                                        },
-                                        onMouseLeave: function onMouseLeave(e) {
-                                            var target = e.currentTarget;
-                                            target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
-                                            target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
+                                            if (playerRef.current) playerRef.current.toggleMute();
+                                            onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
+                                            resetControlsTimer();
                                         },
                                         style: {
-                                            background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
-                                            color: "#ffffff",
-                                            border: "none",
-                                            borderRadius: "".concat(18 * responsiveScale, "px"),
                                             padding: "".concat(8 * responsiveScale, "px"),
-                                            cursor: "pointer",
-                                            display: "flex",
-                                            alignItems: "center",
-                                            justifyContent: "center",
-                                            backdropFilter: "blur(20px)",
-                                            boxShadow: "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                                            transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-                                            minWidth: "".concat(46 * responsiveScale, "px"),
-                                            minHeight: "".concat(46 * responsiveScale, "px")
+                                            borderRadius: "50%",
+                                            minWidth: "".concat(36 * responsiveScale, "px"),
+                                            minHeight: "".concat(36 * responsiveScale, "px")
                                         },
                                         title: isMuted ? "Unmute" : "Mute",
-                                        children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeMute, {
-                                            size: Math.max(14, 16 * responsiveScale),
-                                            style: {
-                                                filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                                color: "#ffffff"
-                                            }
-                                        }) : volume < 0.5 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeDown, {
-                                            size: Math.max(14, 16 * responsiveScale),
-                                            style: {
-                                                filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                                color: "#ffffff"
-                                            }
-                                        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaVolumeUp, {
-                                            size: Math.max(14, 16 * responsiveScale),
-                                            style: {
-                                                filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                                color: "#ffffff"
-                                            }
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
+                                            size: Math.max(14, 18 * responsiveScale)
                                         })
                                     }),
-                                    showVolumeSlider && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-                                        children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                style: {
-                                                    position: "absolute",
-                                                    bottom: "100%",
-                                                    left: "50%",
-                                                    transform: "translateX(-50%)",
-                                                    width: "60px",
-                                                    height: "20px",
-                                                    marginBottom: "-16px",
-                                                    zIndex: 9
-                                                },
-                                                onMouseEnter: function onMouseEnter() {
-                                                    return setShowVolumeSlider(true);
-                                                },
-                                                onMouseLeave: function onMouseLeave() {
-                                                    return setShowVolumeSlider(false);
-                                                }
-                                            }),
-                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                style: {
-                                                    position: "absolute",
-                                                    bottom: "100%",
-                                                    left: "50%",
-                                                    transform: "translateX(-50%)",
-                                                    marginBottom: "4px",
-                                                    background: "linear-gradient(135deg, rgba(0, 0, 0, 0.96) 0%, rgba(20, 20, 20, 0.92) 100%)",
-                                                    backdropFilter: "blur(20px)",
-                                                    padding: "10px 14px",
-                                                    borderRadius: "14px",
-                                                    border: "2px solid rgba(255, 255, 255, 0.7)",
-                                                    display: "flex",
-                                                    flexDirection: "column",
-                                                    alignItems: "center",
-                                                    justifyContent: "center",
-                                                    height: "128px",
-                                                    boxShadow: "0 12px 40px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35)",
-                                                    zIndex: 10,
-                                                    transition: "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out"
-                                                },
-                                                onMouseEnter: function onMouseEnter(e) {
-                                                    setShowVolumeSlider(true);
-                                                    e.currentTarget.style.boxShadow = "0 16px 48px rgba(0, 0, 0, 0.9), 0 6px 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 24px rgba(96, 165, 250, 0.4)";
-                                                    e.currentTarget.style.borderColor = "rgba(96, 165, 250, 0.8)";
-                                                },
-                                                onMouseLeave: function onMouseLeave(e) {
-                                                    setShowVolumeSlider(false);
-                                                    e.currentTarget.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.85), 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35)";
-                                                    e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.7)";
-                                                },
-                                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        style: {
+                                            width: showVolumeSlider ? "".concat(62 * 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"
+                                        },
+                                        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: "relative",
-                                                        width: "8px",
-                                                        height: "104px",
-                                                        cursor: "pointer",
-                                                        transition: "transform 0.2s ease-in-out"
-                                                    },
-                                                    onMouseDown: function onMouseDown(e) {
-                                                        e.preventDefault();
-                                                        var sliderElement = e.currentTarget;
-                                                        var handleMouseMove = function handleMouseMove(moveEvent) {
-                                                            if (!sliderElement) return;
-                                                            var rect2 = sliderElement.getBoundingClientRect();
-                                                            var y2 = moveEvent.clientY - rect2.top;
-                                                            var percentage2 = 1 - Math.max(0, Math.min(1, y2 / rect2.height));
-                                                            handleVolumeChange(percentage2);
-                                                        };
-                                                        var handleMouseUp = function handleMouseUp1() {
-                                                            document.removeEventListener("mousemove", handleMouseMove);
-                                                            document.removeEventListener("mouseup", handleMouseUp);
-                                                        };
-                                                        document.addEventListener("mousemove", handleMouseMove);
-                                                        document.addEventListener("mouseup", handleMouseUp);
-                                                        var rect = sliderElement.getBoundingClientRect();
-                                                        var y = e.clientY - rect.top;
-                                                        var percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
-                                                        handleVolumeChange(percentage);
-                                                    },
-                                                    onClick: function onClick(e) {
-                                                        e.stopPropagation();
-                                                        var rect = e.currentTarget.getBoundingClientRect();
-                                                        var y = e.clientY - rect.top;
-                                                        var percentage = 1 - Math.max(0, Math.min(1, y / rect.height));
-                                                        handleVolumeChange(percentage);
-                                                    },
-                                                    children: [
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                            style: {
-                                                                position: "absolute",
-                                                                bottom: "0",
-                                                                left: "0",
-                                                                width: "100%",
-                                                                height: "100%",
-                                                                background: "linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 100%)",
-                                                                borderRadius: "4px",
-                                                                border: "1px solid rgba(255, 255, 255, 0.4)",
-                                                                boxShadow: "inset 0 1px 3px rgba(0, 0, 0, 0.3)"
-                                                            }
-                                                        }),
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                            style: {
-                                                                position: "absolute",
-                                                                bottom: "0",
-                                                                left: "0",
-                                                                width: "100%",
-                                                                height: "".concat((isMuted ? 0 : volume) * 100, "%"),
-                                                                background: "linear-gradient(180deg, rgba(125, 211, 252, 1) 0%, rgba(96, 165, 250, 0.98) 50%, rgba(59, 130, 246, 0.95) 100%)",
-                                                                borderRadius: "4px",
-                                                                transition: "height 0.15s ease-out, box-shadow 0.2s ease-in-out",
-                                                                boxShadow: "0 0 12px rgba(96, 165, 250, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4)"
-                                                            }
-                                                        }),
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                            style: {
-                                                                position: "absolute",
-                                                                bottom: "calc(".concat((isMuted ? 0 : volume) * 100, "% - 8px)"),
-                                                                left: "50%",
-                                                                transform: "translateX(-50%)",
-                                                                width: "16px",
-                                                                height: "16px",
-                                                                background: "linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)",
-                                                                borderRadius: "50%",
-                                                                border: "2px solid rgba(96, 165, 250, 0.9)",
-                                                                boxShadow: "0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(96, 165, 250, 0.4), 0 0 16px rgba(96, 165, 250, 0.5)",
-                                                                transition: "bottom 0.15s ease-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out",
-                                                                cursor: "grab"
-                                                            },
-                                                            onMouseEnter: function onMouseEnter(e) {
-                                                                e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(96, 165, 250, 0.6), 0 0 24px rgba(96, 165, 250, 0.7)";
-                                                                e.currentTarget.style.cursor = "grab";
-                                                            },
-                                                            onMouseLeave: function onMouseLeave(e) {
-                                                                e.currentTarget.style.boxShadow = "0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(96, 165, 250, 0.4), 0 0 16px rgba(96, 165, 250, 0.5)";
-                                                            },
-                                                            onMouseDown: function onMouseDown(e) {
-                                                                e.currentTarget.style.cursor = "grabbing";
-                                                            },
-                                                            onMouseUp: function onMouseUp(e) {
-                                                                e.currentTarget.style.cursor = "grab";
-                                                            }
-                                                        })
-                                                    ]
+                                                        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 (playerRef.current) {
-                                        playerRef.current.toggleFullscreen().catch(function(err) {
-                                            console.error("Fullscreen error:", err);
-                                        });
+                                    } else if (wrapperRef.current) {
+                                        if (!document.fullscreenElement) {
+                                            wrapperRef.current.requestFullscreen().catch(function() {});
+                                        } else {
+                                            document.exitFullscreen().catch(function() {});
+                                        }
                                     }
-                                },
-                                onMouseEnter: function onMouseEnter(e) {
-                                    var target = e.currentTarget;
-                                    target.style.boxShadow = "0 14px 48px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.4)";
-                                    target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%)";
-                                },
-                                onMouseLeave: function onMouseLeave(e) {
-                                    var target = e.currentTarget;
-                                    target.style.boxShadow = "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)";
-                                    target.style.background = "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)";
+                                    resetControlsTimer();
                                 },
                                 style: {
-                                    background: "linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 100%)",
-                                    color: "#ffffff",
-                                    border: "none",
-                                    borderRadius: "".concat(18 * responsiveScale, "px"),
                                     padding: "".concat(8 * responsiveScale, "px"),
-                                    cursor: "pointer",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    backdropFilter: "blur(20px)",
-                                    boxShadow: "0 10px 36px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
-                                    transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-                                    minWidth: "".concat(46 * responsiveScale, "px"),
-                                    minHeight: "".concat(46 * 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, 16 * responsiveScale),
-                                    style: {
-                                        filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                        color: "#ffffff"
-                                    }
+                                    size: Math.max(14, 18 * responsiveScale)
                                 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
-                                    size: Math.max(14, 16 * responsiveScale),
-                                    style: {
-                                        filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))",
-                                        color: "#ffffff"
-                                    }
+                                    size: Math.max(14, 18 * responsiveScale)
                                 })
                             })
                         ]