stormcloud-video-player 0.3.53 → 0.3.55

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -152,12 +152,22 @@ function _object_spread_props(target, source) {
 }
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
-    var target = _object_without_properties_loose(source, excluded);
-    var key, i;
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
     if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
             if (excluded.indexOf(key) >= 0) continue;
             if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
             target[key] = source[key];
@@ -167,12 +177,11 @@ function _object_without_properties(source, excluded) {
 }
 function _object_without_properties_loose(source, excluded) {
     if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
     for(i = 0; i < sourceKeys.length; i++){
         key = sourceKeys[i];
         if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
         target[key] = source[key];
     }
     return target;
@@ -204,9 +213,17 @@ function _ts_generator(thisArg, body) {
         },
         trys: [],
         ops: []
-    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
-        return this;
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype), d = Object.defineProperty;
+    return d(g, "next", {
+        value: verb(0)
+    }), d(g, "throw", {
+        value: verb(1)
+    }), d(g, "return", {
+        value: verb(2)
+    }), typeof Symbol === "function" && d(g, Symbol.iterator, {
+        value: function() {
+            return this;
+        }
     }), g;
     function verb(n) {
         return function(v) {
@@ -306,20 +323,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = function(target, all) {
+var __export = function __export(target, all) {
     for(var name in all)__defProp(target, name, {
         get: all[name],
         enumerable: true
     });
 };
-var __copyProps = function(to, from, except, desc) {
+var __copyProps = function __copyProps(to, from, except, desc) {
     if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
         var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
         try {
             var _loop = function() {
                 var key = _step.value;
                 if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-                    get: function() {
+                    get: function get() {
                         return from[key];
                     },
                     enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
@@ -343,7 +360,7 @@ var __copyProps = function(to, from, except, desc) {
     }
     return to;
 };
-var __toESM = function(mod, isNodeMode, target) {
+var __toESM = function __toESM(mod, isNodeMode, target) {
     return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
     // file that has been converted to a CommonJS file using a Babel-
     // compatible transform (i.e. "__esModule" has not been set), then set
@@ -353,7 +370,7 @@ var __toESM = function(mod, isNodeMode, target) {
         enumerable: true
     }) : target, mod);
 };
-var __toCommonJS = function(mod) {
+var __toCommonJS = function __toCommonJS(mod) {
     return __copyProps(__defProp({}, "__esModule", {
         value: true
     }), mod);
@@ -361,7 +378,7 @@ var __toCommonJS = function(mod) {
 // src/ui/StormcloudVideoPlayer.tsx
 var StormcloudVideoPlayer_exports = {};
 __export(StormcloudVideoPlayer_exports, {
-    StormcloudVideoPlayerComponent: function() {
+    StormcloudVideoPlayerComponent: function StormcloudVideoPlayerComponent1() {
         return StormcloudVideoPlayerComponent;
     }
 });
@@ -696,7 +713,7 @@ function createImaController(video, options) {
                 var fn = _step.value;
                 try {
                     fn(payload);
-                } catch (e) {}
+                } catch (unused) {}
             }
         } catch (err) {
             _didIteratorError = true;
@@ -734,7 +751,7 @@ function createImaController(video, options) {
                     console.error("StormcloudVideoPlayer: The host page is inside a sandboxed iframe without 'allow-scripts'. Google IMA cannot run ads within sandboxed frames. Remove the sandbox attribute or include 'allow-scripts allow-same-origin'.");
                 }
             }
-        } catch (e) {}
+        } catch (unused) {}
         if (typeof window !== "undefined" && ((_window_google = window.google) === null || _window_google === void 0 ? void 0 : _window_google.ima)) return Promise.resolve();
         var existing = document.querySelector('script[data-ima="true"]');
         if (existing) {
@@ -776,9 +793,6 @@ function createImaController(video, options) {
     var adDisplayContainer;
     var adContainerEl;
     var lastAdTagUrl;
-    var retryAttempts = 0;
-    var maxRetries = 2;
-    var backoffBaseMs = 500;
     var adsLoadedPromise;
     var adsLoadedResolve;
     var adsLoadedReject;
@@ -982,7 +996,7 @@ function createImaController(video, options) {
         if (adsManager) {
             try {
                 adsManager.destroy();
-            } catch (e) {}
+            } catch (unused) {}
             adsManager = void 0;
         }
         if (adVideoElement) {
@@ -993,7 +1007,7 @@ function createImaController(video, options) {
         if (adsLoader) {
             try {
                 adsLoader.destroy();
-            } catch (e) {}
+            } catch (unused) {}
             adsLoader = void 0;
         }
     }
@@ -1011,7 +1025,7 @@ function createImaController(video, options) {
                     try {
                         var _adDisplayContainer_initialize;
                         (_adDisplayContainer_initialize = adDisplayContainer.initialize) === null || _adDisplayContainer_initialize === void 0 ? void 0 : _adDisplayContainer_initialize.call(adDisplayContainer);
-                    } catch (e) {}
+                    } catch (unused) {}
                 }
             }).catch(function() {});
         },
@@ -1075,7 +1089,6 @@ function createImaController(video, options) {
                             _state.sent();
                             google = window.google;
                             lastAdTagUrl = vastTagUrl;
-                            retryAttempts = 0;
                             if (!adDisplayContainer) {
                                 container = document.createElement("div");
                                 container.style.position = "absolute";
@@ -1159,32 +1172,23 @@ function createImaController(video, options) {
                                                     }
                                                 }, 300);
                                             }
-                                            hideContentVideo();
+                                            showContentVideo();
                                             if (adsLoadedReject) {
                                                 adsLoadedReject(new Error("Ad playback error"));
                                                 adsLoadedReject = void 0;
                                                 adsLoadedResolve = void 0;
                                             }
-                                            if (lastAdTagUrl && retryAttempts < maxRetries && !isNoFill) {
-                                                var delay = backoffBaseMs * Math.pow(2, retryAttempts++);
-                                                window.setTimeout(function() {
-                                                    try {
-                                                        makeAdsRequest(google, lastAdTagUrl);
-                                                    } catch (e) {}
-                                                }, delay);
-                                            } else {
-                                                emit("ad_error", {
-                                                    code: errorCode,
-                                                    vastErrorCode: vastErrorCode,
-                                                    message: errorMessage,
-                                                    cause: innerError,
-                                                    isNoFill: isNoFill
-                                                });
-                                                if (!(options === null || options === void 0 ? void 0 : options.continueLiveStreamDuringAds)) {
-                                                    if (video.paused) {
-                                                        var _video_play;
-                                                        (_video_play = video.play()) === null || _video_play === void 0 ? void 0 : _video_play.catch(function() {});
-                                                    }
+                                            emit("ad_error", {
+                                                code: errorCode,
+                                                vastErrorCode: vastErrorCode,
+                                                message: errorMessage,
+                                                cause: innerError,
+                                                isNoFill: isNoFill
+                                            });
+                                            if (!(options === null || options === void 0 ? void 0 : options.continueLiveStreamDuringAds)) {
+                                                if (video.paused) {
+                                                    var _video_play;
+                                                    (_video_play = video.play()) === null || _video_play === void 0 ? void 0 : _video_play.catch(function() {});
                                                 }
                                             }
                                         });
@@ -1202,7 +1206,7 @@ function createImaController(video, options) {
                                             if (adsManager) {
                                                 try {
                                                     adsManager.setVolume(adVolume);
-                                                } catch (e) {}
+                                                } catch (unused) {}
                                             }
                                             emit("content_pause");
                                         });
@@ -1216,7 +1220,7 @@ function createImaController(video, options) {
                                                 if (adsManager) {
                                                     try {
                                                         adsManager.setVolume(originalMutedState ? 0 : adVolume);
-                                                    } catch (e) {}
+                                                    } catch (unused) {}
                                                 }
                                             }
                                             if (adContainerEl) {
@@ -1230,7 +1234,7 @@ function createImaController(video, options) {
                                         adsManager.addEventListener(AdEvent.CONTENT_RESUME_REQUESTED, function() {
                                             adPlaying = false;
                                             setAdPlayingFlag(false);
-                                            hideContentVideo();
+                                            showContentVideo();
                                             emit("content_resume");
                                         });
                                         adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, function() {
@@ -1246,7 +1250,7 @@ function createImaController(video, options) {
                                                     }
                                                 }, 300);
                                             }
-                                            hideContentVideo();
+                                            showContentVideo();
                                             emit("all_ads_completed");
                                         });
                                         if (adsLoadedResolve) {
@@ -1268,7 +1272,7 @@ function createImaController(video, options) {
                                                 }
                                             }, 300);
                                         }
-                                        hideContentVideo();
+                                        showContentVideo();
                                         if (adsLoadedReject) {
                                             adsLoadedReject(new Error("Failed to setup ads manager"));
                                             adsLoadedReject = void 0;
@@ -1311,7 +1315,7 @@ function createImaController(video, options) {
                                             }
                                         }, 300);
                                     }
-                                    hideContentVideo();
+                                    showContentVideo();
                                     if (adsLoadedReject) {
                                         adsLoadedReject(new Error(isNoFill ? "No ads available" : "Ads loader error"));
                                         adsLoadedReject = void 0;
@@ -1377,7 +1381,7 @@ function createImaController(video, options) {
                         }
                         try {
                             adsManager.setVolume(originalMutedState ? 0 : adVolume);
-                        } catch (e) {}
+                        } catch (unused) {}
                         adsManager.start();
                         return [
                             2,
@@ -1459,7 +1463,7 @@ function createImaController(video, options) {
                     try {
                         ;
                         adsManager === null || adsManager === void 0 ? void 0 : (_adsManager_stop = adsManager.stop) === null || _adsManager_stop === void 0 ? void 0 : _adsManager_stop.call(adsManager);
-                    } catch (e) {}
+                    } catch (unused) {}
                     destroyAdsManager();
                     return [
                         2
@@ -1490,7 +1494,7 @@ function createImaController(video, options) {
             try {
                 var _adsLoader_destroy;
                 adsLoader === null || adsLoader === void 0 ? void 0 : (_adsLoader_destroy = adsLoader.destroy) === null || _adsLoader_destroy === void 0 ? void 0 : _adsLoader_destroy.call(adsLoader);
-            } catch (e) {}
+            } catch (unused) {}
             adDisplayContainer = void 0;
             adsLoader = void 0;
             contentVideoHidden = false;
@@ -1539,7 +1543,7 @@ function createImaController(video, options) {
             if (adsManager && adPlaying) {
                 try {
                     adsManager.setVolume(clampedVolume);
-                } catch (e) {}
+                } catch (unused) {}
             }
         },
         getAdVolume: function getAdVolume() {
@@ -2643,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", {
@@ -2751,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") {
@@ -3032,18 +3261,26 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         this.maxPlaceholderDurationMs = 5e3;
         this.isShowingPlaceholder = false;
         this.totalAdRequestsInBreak = 0;
-        this.maxTotalAdRequestsPerBreak = 20;
+        this.maxTotalAdRequestsPerBreak = 10;
         this.pendingAdBreak = null;
         this.consecutiveFailures = 0;
         this.maxConsecutiveFailures = 5;
         this.lastAdRequestTime = 0;
-        this.minAdRequestIntervalMs = 2500;
+        this.minAdRequestIntervalMs = 3e3;
         this.backoffBaseMs = 1e3;
         this.maxBackoffMs = 15e3;
+        this.globalConsecutiveNoFills = 0;
+        this.globalNoFillThreshold = 3;
+        this.globalNoFillCooldownUntil = 0;
+        this.globalNoFillBackoffBaseMs = 5e3;
+        this.globalNoFillBackoffMaxMs = 6e4;
+        this.globalLastGamRequestTime = 0;
+        this.globalMinGamIntervalMs = 3e3;
         this.preloadPool = [];
-        this.maxPreloadPoolSize = 3;
+        this.maxPreloadPoolSize = 2;
         this.preloadPoolActive = false;
         this.preloadPoolLoopRunning = false;
+        this.adDetectSentForCurrentBreak = false;
         this.continuousFetchLoopRunning = false;
         initializePolyfills();
         var browserOverrides = getBrowserConfigOverrides();
@@ -3184,7 +3421,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 });
                                 this.hls.on(import_hls2.default.Events.MANIFEST_PARSED, function(_, data) {
                                     return _async_to_generator(function() {
-                                        var _this_hls_levels, _this_hls, _this_hls_levels_some, adBehavior, _this_config_minSegmentsBeforePlay, minSegments, _this_video_play;
+                                        var _this_config_minSegmentsBeforePlay, _ref, _this_hls_levels, _this_hls, adBehavior, minSegments, _this_video_play;
                                         return _ts_generator(this, function(_state) {
                                             switch(_state.label){
                                                 case 0:
@@ -3193,10 +3430,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                     } else {
                                                         ;
                                                         ;
-                                                        this.isLiveStream = (_this_hls_levels_some = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : (_this_hls_levels = _this_hls.levels) === null || _this_hls_levels === void 0 ? void 0 : _this_hls_levels.some(function(level) {
+                                                        this.isLiveStream = (_ref = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : (_this_hls_levels = _this_hls.levels) === null || _this_hls_levels === void 0 ? void 0 : _this_hls_levels.some(function(level) {
                                                             var _level_details, _level_details1;
                                                             return (level === null || level === void 0 ? void 0 : (_level_details = level.details) === null || _level_details === void 0 ? void 0 : _level_details.live) === true || (level === null || level === void 0 ? void 0 : (_level_details1 = level.details) === null || _level_details1 === void 0 ? void 0 : _level_details1.type) === "LIVE";
-                                                        })) !== null && _this_hls_levels_some !== void 0 ? _this_hls_levels_some : false;
+                                                        })) !== null && _ref !== void 0 ? _ref : false;
                                                     }
                                                     if (this.config.debugAdTiming) {
                                                         adBehavior = this.shouldContinueLiveStreamDuringAds() ? "live (main video continues muted during ads)" : "vod (main video pauses during ads)";
@@ -3260,9 +3497,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                 var tag = "";
                                                 var value = "";
                                                 if (Array.isArray(entry)) {
-                                                    var _entry_;
+                                                    var _entry_, _entry_1;
                                                     tag = String((_entry_ = entry[0]) !== null && _entry_ !== void 0 ? _entry_ : "");
-                                                    var _entry_1;
                                                     value = String((_entry_1 = entry[1]) !== null && _entry_1 !== void 0 ? _entry_1 : "");
                                                 } else if (typeof entry === "string") {
                                                     var idx = entry.indexOf(":");
@@ -3385,9 +3621,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                             var tag = "";
                                             var value = "";
                                             if (Array.isArray(entry)) {
-                                                var _entry_;
+                                                var _entry_, _entry_1;
                                                 tag = String((_entry_ = entry[0]) !== null && _entry_ !== void 0 ? _entry_ : "");
-                                                var _entry_1;
                                                 value = String((_entry_1 = entry[1]) !== null && _entry_1 !== void 0 ? _entry_1 : "");
                                             } else if (typeof entry === "string") {
                                                 var idx = entry.indexOf(":");
@@ -3437,10 +3672,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                     }
                                                 });
                                             } else if (tag.includes("EXT-X-DATERANGE")) {
+                                                var _attrs_CLASS;
                                                 var attrs = _this.parseAttributeList(value);
                                                 var hasScteOut = "SCTE35-OUT" in attrs || attrs["SCTE35-OUT"] !== void 0;
                                                 var hasScteIn = "SCTE35-IN" in attrs || attrs["SCTE35-IN"] !== void 0;
-                                                var _attrs_CLASS;
                                                 var klass = String((_attrs_CLASS = attrs["CLASS"]) !== null && _attrs_CLASS !== void 0 ? _attrs_CLASS : "");
                                                 var duration = _this.toNumber(attrs["DURATION"]);
                                                 if (hasScteOut || /com\.apple\.hls\.cue/i.test(klass)) {
@@ -3515,6 +3750,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) {
@@ -3554,6 +3792,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     _this.clearAdRequestWatchdog();
                     _this.activeAdRequestToken = null;
                     _this.showAds = true;
+                    _this.resetGamNoFillCounter();
                     if (_this.inAdBreak && _this.expectedAdBreakDurationMs != null) {
                         if (_this.adStopTimerId == null) {
                             _this.currentAdBreakStartWallClockMs = Date.now();
@@ -3576,6 +3815,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;
@@ -3842,11 +4084,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }
                 var daterangeMatch = text.match(/EXT-X-DATERANGE:([^\r\n]*)/i);
                 if (daterangeMatch) {
-                    var _daterangeMatch_;
+                    var _daterangeMatch_, _attrs_CLASS;
                     var attrs = this.parseAttributeList((_daterangeMatch_ = daterangeMatch[1]) !== null && _daterangeMatch_ !== void 0 ? _daterangeMatch_ : "");
                     var hasScteOut = "SCTE35-OUT" in attrs || attrs["SCTE35-OUT"] !== void 0;
                     var hasScteIn = "SCTE35-IN" in attrs || attrs["SCTE35-IN"] !== void 0;
-                    var _attrs_CLASS;
                     var klass = String((_attrs_CLASS = attrs["CLASS"]) !== null && _attrs_CLASS !== void 0 ? _attrs_CLASS : "");
                     var duration = this.toNumber(attrs["DURATION"]);
                     if (hasScteOut || /com\.apple\.hls\.cue/i.test(klass)) {
@@ -3922,7 +4163,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     var out = "";
                     for(var i = 0; i < value.length; i++)out += String.fromCharCode(value[i]);
                     return out;
-                } catch (e) {
+                } catch (unused) {
                     return void 0;
                 }
             }
@@ -3941,6 +4182,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     });
                 }
                 if (marker.type === "start") {
+                    var _this_config_immediateManifestAds;
                     var _this_pendingAdBreak;
                     if (!this.video.muted) {
                         this.video.muted = true;
@@ -3959,13 +4201,19 @@ 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;
                     this.expectedAdBreakDurationMs = durationMs;
                     this.currentAdBreakStartWallClockMs = Date.now();
                     var isManifestMarker = this.isManifestBasedMarker(marker);
-                    var _this_config_immediateManifestAds;
                     var forceImmediate = (_this_config_immediateManifestAds = this.config.immediateManifestAds) !== null && _this_config_immediateManifestAds !== void 0 ? _this_config_immediateManifestAds : true;
                     if (this.config.debugAdTiming) {
                         console.log("[StormcloudVideoPlayer] Ad start decision:", {
@@ -4120,9 +4368,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 var regex = /([A-Z0-9-]+)=(("[^"]*")|([^",]*))(?:,|$)/gi;
                 var match;
                 while((match = regex.exec(value)) !== null){
-                    var _match_;
+                    var _match_, _ref, _match_1;
                     var key = (_match_ = match[1]) !== null && _match_ !== void 0 ? _match_ : "";
-                    var _match_1, _ref;
                     var rawVal = (_ref = (_match_1 = match[3]) !== null && _match_1 !== void 0 ? _match_1 : match[4]) !== null && _ref !== void 0 ? _ref : "";
                     if (rawVal.startsWith('"') && rawVal.endsWith('"')) {
                         rawVal = rawVal.slice(1, -1);
@@ -4467,13 +4714,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "shouldShowNativeControls",
             value: function shouldShowNativeControls() {
+                var _this_config_showCustomControls;
                 var streamType = this.getStreamType();
                 if (streamType === "other") {
-                    var _this_config_showCustomControls;
-                    return !((_this_config_showCustomControls = this.config.showCustomControls) !== null && _this_config_showCustomControls !== void 0 ? _this_config_showCustomControls : false);
+                    var _this_config_showCustomControls1;
+                    return !((_this_config_showCustomControls1 = this.config.showCustomControls) !== null && _this_config_showCustomControls1 !== void 0 ? _this_config_showCustomControls1 : false);
                 }
-                var _this_config_showCustomControls1;
-                return !!(this.config.allowNativeHls && !((_this_config_showCustomControls1 = this.config.showCustomControls) !== null && _this_config_showCustomControls1 !== void 0 ? _this_config_showCustomControls1 : false));
+                return !!(this.config.allowNativeHls && !((_this_config_showCustomControls = this.config.showCustomControls) !== null && _this_config_showCustomControls !== void 0 ? _this_config_showCustomControls : false));
             }
         },
         {
@@ -4518,6 +4765,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"));
@@ -4581,6 +4834,14 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     var _this, loadPromise;
                     return _ts_generator(this, function(_state) {
                         _this = this;
+                        if (this.isGamInCooldown()) {
+                            if (this.config.debugAdTiming) {
+                                console.log("[CIRCUIT-BREAKER] GAM in cooldown, skipping preload");
+                            }
+                            return [
+                                2
+                            ];
+                        }
                         if (this.preloadPool.some(function(entry) {
                             return entry.vastUrl === vastUrl;
                         }) || this.failedVastUrls.has(vastUrl) || this.isUrlInCooldown(vastUrl)) {
@@ -4610,26 +4871,32 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                         case 1:
                                             _state.trys.push([
                                                 1,
-                                                4,
+                                                5,
                                                 ,
-                                                5
+                                                6
                                             ]);
                                             continueLiveStreamDuringAds = this.shouldContinueLiveStreamDuringAds();
                                             preloadIma = this.createAdPlayer(continueLiveStreamDuringAds);
                                             preloadIma.initialize();
-                                            errorListener = function(payload) {
+                                            errorListener = function errorListener(payload) {
                                                 hasAdError = true;
                                                 adErrorPayload = payload;
                                             };
                                             preloadIma.on("ad_error", errorListener);
-                                            errorListenerCleanup = function() {
+                                            errorListenerCleanup = function errorListenerCleanup() {
                                                 return preloadIma.off("ad_error", errorListener);
                                             };
                                             return [
                                                 4,
-                                                preloadIma.requestAds(vastUrl)
+                                                this.enforceGlobalRateLimit()
                                             ];
                                         case 2:
+                                            _state.sent();
+                                            return [
+                                                4,
+                                                preloadIma.requestAds(vastUrl)
+                                            ];
+                                        case 3:
                                             _state.sent();
                                             preloadIma.pause();
                                             return [
@@ -4638,7 +4905,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                     return setTimeout(resolve, 1500);
                                                 })
                                             ];
-                                        case 3:
+                                        case 4:
                                             _state.sent();
                                             preloadIma.pause();
                                             if (hasAdError) {
@@ -4647,6 +4914,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                     errorListenerCleanup();
                                                 }
                                                 preloadIma.destroy();
+                                                this.recordGamNoFill();
                                                 if (isNoFill) {
                                                     if (this.config.debugAdTiming) {
                                                         console.log("[PRELOAD-POOL] ⚠️ Ad preload returned no-fill: ".concat(vastUrl));
@@ -4673,7 +4941,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                 isReady: true,
                                                 loadPromise: Promise.resolve()
                                             };
-                                            lateErrorListener = function(payload) {
+                                            lateErrorListener = function lateErrorListener(payload) {
                                                 var index = _this.preloadPool.findIndex(function(entry) {
                                                     return entry.vastUrl === vastUrl;
                                                 });
@@ -4684,7 +4952,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                     }
                                                     try {
                                                         preloadIma.destroy();
-                                                    } catch (e) {}
+                                                    } catch (unused) {}
                                                 }
                                             };
                                             preloadIma.on("ad_error", lateErrorListener);
@@ -4697,13 +4965,14 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                             }
                                             return [
                                                 3,
-                                                5
+                                                6
                                             ];
-                                        case 4:
+                                        case 5:
                                             error = _state.sent();
                                             if (errorListenerCleanup) {
                                                 errorListenerCleanup();
                                             }
+                                            this.recordGamNoFill();
                                             if (this.config.debugAdTiming) {
                                                 console.warn("[PRELOAD-POOL] ⚠️ Failed to preload ad: ".concat(vastUrl), error);
                                             }
@@ -4714,9 +4983,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                             }
                                             return [
                                                 3,
-                                                5
+                                                6
                                             ];
-                                        case 5:
+                                        case 6:
                                             return [
                                                 2
                                             ];
@@ -4755,6 +5024,15 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     3,
                                     10
                                 ];
+                                if (this.isGamInCooldown()) {
+                                    if (this.config.debugAdTiming) {
+                                        console.log("[CIRCUIT-BREAKER] GAM in cooldown, stopping preload pool loop");
+                                    }
+                                    return [
+                                        3,
+                                        10
+                                    ];
+                                }
                                 if (!(!this.inAdBreak && this.preloadPool.length >= this.maxPreloadPoolSize)) return [
                                     3,
                                     3
@@ -4787,7 +5065,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     3,
                                     8
                                 ];
-                                if (!this.preloadPoolActive) {
+                                if (!this.preloadPoolActive || this.isGamInCooldown()) {
                                     return [
                                         3,
                                         8
@@ -4968,6 +5246,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"));
@@ -5003,9 +5285,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 1:
                                 _state.trys.push([
                                     1,
-                                    7,
+                                    8,
                                     ,
-                                    13
+                                    14
                                 ]);
                                 if (!(usePreloadedAd && preloadedController)) return [
                                     3,
@@ -5041,16 +5323,26 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 this.ima.setAdVolume(adVolume);
                                 return [
                                     3,
-                                    6
+                                    7
                                 ];
                             case 3:
+                                return [
+                                    4,
+                                    this.enforceGlobalRateLimit()
+                                ];
+                            case 4:
+                                _state.sent();
                                 this.lastAdRequestTime = Date.now();
                                 return [
                                     4,
                                     this.ima.requestAds(firstAdUrl)
                                 ];
-                            case 4:
+                            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");
                                 }
@@ -5064,7 +5356,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     4,
                                     this.ima.play()
                                 ];
-                            case 5:
+                            case 6:
                                 _state.sent();
                                 if (this.expectedAdBreakDurationMs != null) {
                                     this.currentAdBreakStartWallClockMs = Date.now();
@@ -5072,36 +5364,36 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 }
                                 adVolume1 = currentMuted ? 0 : currentVolume;
                                 this.ima.setAdVolume(adVolume1);
-                                _state.label = 6;
-                            case 6:
+                                _state.label = 7;
+                            case 7:
                                 return [
                                     3,
-                                    13
+                                    14
                                 ];
-                            case 7:
+                            case 8:
                                 error = _state.sent();
                                 if (this.config.debugAdTiming) {
                                     console.warn("[CONTINUOUS-FETCH] \u26A0\uFE0F First ad request failed:", error);
                                 }
                                 if (!!usePreloadedAd) return [
                                     3,
-                                    11
+                                    12
                                 ];
                                 fallbackPreloaded = this.getPreloadedAd();
                                 if (!fallbackPreloaded) return [
                                     3,
-                                    11
+                                    12
                                 ];
                                 if (this.config.debugAdTiming) {
                                     console.log("[CONTINUOUS-FETCH] \uD83D\uDD04 First ad failed, using preloaded fallback");
                                 }
-                                _state.label = 8;
-                            case 8:
+                                _state.label = 9;
+                            case 9:
                                 _state.trys.push([
-                                    8,
-                                    10,
+                                    9,
+                                    11,
                                     ,
-                                    11
+                                    12
                                 ]);
                                 this.ima.destroy();
                                 this.video.muted = true;
@@ -5120,7 +5412,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     4,
                                     this.ima.play()
                                 ];
-                            case 9:
+                            case 10:
                                 _state.sent();
                                 if (this.expectedAdBreakDurationMs != null) {
                                     this.currentAdBreakStartWallClockMs = Date.now();
@@ -5131,16 +5423,16 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 return [
                                     2
                                 ];
-                            case 10:
+                            case 11:
                                 fallbackError = _state.sent();
                                 if (this.config.debugAdTiming) {
                                     console.warn("[CONTINUOUS-FETCH] \u26A0\uFE0F Preloaded fallback also failed:", fallbackError);
                                 }
                                 return [
                                     3,
-                                    11
+                                    12
                                 ];
-                            case 11:
+                            case 12:
                                 if (this.isTemporaryAdError(error)) {
                                     this.temporaryFailureUrls.set(firstAdUrl, Date.now());
                                     if (this.config.debugAdTiming) {
@@ -5158,13 +5450,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     4,
                                     this.tryNextAvailableAdWithRateLimit()
                                 ];
-                            case 12:
+                            case 13:
                                 _state.sent();
                                 return [
                                     3,
-                                    13
+                                    14
                                 ];
-                            case 13:
+                            case 14:
                                 return [
                                     2
                                 ];
@@ -5215,6 +5507,15 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                         "break"
                                                     ];
                                                 }
+                                                if (_this.isGamInCooldown()) {
+                                                    if (_this.config.debugAdTiming) {
+                                                        console.log("[CIRCUIT-BREAKER] GAM in cooldown, stopping URL generation");
+                                                    }
+                                                    return [
+                                                        2,
+                                                        "break"
+                                                    ];
+                                                }
                                                 if (_this.consecutiveFailures >= _this.maxConsecutiveFailures) {
                                                     if (_this.config.debugAdTiming) {
                                                         console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Too many consecutive failures (".concat(_this.consecutiveFailures, "), stopping URL generation"));
@@ -5411,16 +5712,25 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                         2
                                     ];
                                 }
-                                if (this.consecutiveFailures >= this.maxConsecutiveFailures) {
+                                if (this.isGamInCooldown()) {
                                     if (this.config.debugAdTiming) {
-                                        console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Too many consecutive failures (".concat(this.consecutiveFailures, "), ending ad break"));
+                                        console.log("[CIRCUIT-BREAKER] GAM in cooldown, ending ad break gracefully");
                                     }
                                     this.handleAdPodComplete();
                                     return [
                                         2
                                     ];
                                 }
-                                this.cleanupTemporaryFailures();
+                                if (this.consecutiveFailures >= this.maxConsecutiveFailures) {
+                                    if (this.config.debugAdTiming) {
+                                        console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Too many consecutive failures (".concat(this.consecutiveFailures, "), ending ad break"));
+                                    }
+                                    this.handleAdPodComplete();
+                                    return [
+                                        2
+                                    ];
+                                }
+                                this.cleanupTemporaryFailures();
                                 preloaded = this.getPreloadedAd();
                                 if (!preloaded) return [
                                     3,
@@ -5429,6 +5739,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([
@@ -5607,6 +5921,15 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 0:
                                 remaining = this.getRemainingAdMs();
                                 waitTime = Math.min(this.maxPlaceholderDurationMs, remaining);
+                                if (this.isGamInCooldown()) {
+                                    if (this.config.debugAdTiming) {
+                                        console.log("[CIRCUIT-BREAKER] GAM in cooldown, skipping placeholder wait");
+                                    }
+                                    this.handleAdPodComplete();
+                                    return [
+                                        2
+                                    ];
+                                }
                                 if (this.consecutiveFailures >= this.maxConsecutiveFailures) {
                                     if (this.config.debugAdTiming) {
                                         console.log("[CONTINUOUS-FETCH] \uD83D\uDED1 Skipping placeholder - too many consecutive failures");
@@ -5870,11 +6193,11 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "ensureAdStoppedByTimer",
             value: function ensureAdStoppedByTimer() {
+                var _this_config_adBreakCheckIntervalMs, _this_expectedAdBreakDurationMs;
                 if (!this.inAdBreak) return;
                 this.adStopTimerId = void 0;
                 var adPlaying = this.ima.isAdPlaying();
                 var pendingAds = this.adPodQueue.length > 0;
-                var _this_config_adBreakCheckIntervalMs;
                 var checkIntervalMs = Math.max(250, Math.floor((_this_config_adBreakCheckIntervalMs = this.config.adBreakCheckIntervalMs) !== null && _this_config_adBreakCheckIntervalMs !== void 0 ? _this_config_adBreakCheckIntervalMs : 1e3));
                 var maxExtensionMsConfig = this.config.maxAdBreakExtensionMs;
                 var maxExtensionMs = typeof maxExtensionMsConfig === "number" && maxExtensionMsConfig > 0 ? maxExtensionMsConfig : 6e4;
@@ -5882,7 +6205,6 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 if (this.currentAdBreakStartWallClockMs != null) {
                     elapsedSinceStartMs = Date.now() - this.currentAdBreakStartWallClockMs;
                 }
-                var _this_expectedAdBreakDurationMs;
                 var expectedDurationMs = (_this_expectedAdBreakDurationMs = this.expectedAdBreakDurationMs) !== null && _this_expectedAdBreakDurationMs !== void 0 ? _this_expectedAdBreakDurationMs : 0;
                 var overrunMs = Math.max(0, elapsedSinceStartMs - expectedDurationMs);
                 var shouldExtendAdBreak = (adPlaying || pendingAds || this.showAds) && overrunMs < maxExtensionMs;
@@ -5996,6 +6318,73 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }
             }
         },
+        {
+            key: "isGamInCooldown",
+            value: function isGamInCooldown() {
+                return Date.now() < this.globalNoFillCooldownUntil;
+            }
+        },
+        {
+            key: "recordGamNoFill",
+            value: function recordGamNoFill() {
+                this.globalConsecutiveNoFills++;
+                if (this.globalConsecutiveNoFills >= this.globalNoFillThreshold) {
+                    var exponent = this.globalConsecutiveNoFills - this.globalNoFillThreshold;
+                    var backoff = Math.min(this.globalNoFillBackoffBaseMs * Math.pow(2, exponent), this.globalNoFillBackoffMaxMs);
+                    this.globalNoFillCooldownUntil = Date.now() + backoff;
+                    if (this.config.debugAdTiming) {
+                        console.log("[CIRCUIT-BREAKER] GAM cooldown activated: ".concat(backoff, "ms (").concat(this.globalConsecutiveNoFills, " consecutive no-fills)"));
+                    }
+                }
+            }
+        },
+        {
+            key: "resetGamNoFillCounter",
+            value: function resetGamNoFillCounter() {
+                if (this.globalConsecutiveNoFills > 0 && this.config.debugAdTiming) {
+                    console.log("[CIRCUIT-BREAKER] Resetting no-fill counter (was ".concat(this.globalConsecutiveNoFills, ")"));
+                }
+                this.globalConsecutiveNoFills = 0;
+                this.globalNoFillCooldownUntil = 0;
+            }
+        },
+        {
+            key: "enforceGlobalRateLimit",
+            value: function enforceGlobalRateLimit() {
+                return _async_to_generator(function() {
+                    var now, elapsed, waitMs;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                now = Date.now();
+                                elapsed = now - this.globalLastGamRequestTime;
+                                if (!(elapsed < this.globalMinGamIntervalMs)) return [
+                                    3,
+                                    2
+                                ];
+                                waitMs = this.globalMinGamIntervalMs - elapsed;
+                                if (this.config.debugAdTiming) {
+                                    console.log("[RATE-LIMIT] Waiting ".concat(waitMs, "ms before next GAM request"));
+                                }
+                                return [
+                                    4,
+                                    new Promise(function(resolve) {
+                                        return setTimeout(resolve, waitMs);
+                                    })
+                                ];
+                            case 1:
+                                _state.sent();
+                                _state.label = 2;
+                            case 2:
+                                this.globalLastGamRequestTime = Date.now();
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                }).call(this);
+            }
+        },
         {
             key: "playSingleAd",
             value: function playSingleAd(vastTagUrl) {
@@ -6027,6 +6416,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     }
                                     throw new Error("Too many consecutive failures");
                                 }
+                                if (this.isGamInCooldown()) {
+                                    if (this.config.debugAdTiming) {
+                                        console.warn("[CIRCUIT-BREAKER] GAM in cooldown, skipping ad request");
+                                    }
+                                    throw new Error("GAM in cooldown");
+                                }
                                 this.recreateImaController();
                                 requestToken = ++this.adRequestTokenCounter;
                                 this.activeAdRequestToken = requestToken;
@@ -6035,37 +6430,47 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 1:
                                 _state.trys.push([
                                     1,
-                                    11,
+                                    12,
                                     ,
-                                    16
+                                    17
                                 ]);
+                                return [
+                                    4,
+                                    this.enforceGlobalRateLimit()
+                                ];
+                            case 2:
+                                _state.sent();
                                 this.lastAdRequestTime = Date.now();
                                 return [
                                     4,
                                     this.ima.requestAds(vastTagUrl)
                                 ];
-                            case 2:
+                            case 3:
                                 _state.sent();
+                                sendAdLoadedTracking(this.config.licenseKey, {
+                                    source: "ssp",
+                                    vastUrl: vastTagUrl
+                                }, this.config.adPlayerType).catch(function() {});
                                 this.clearAdRequestWatchdog();
                                 if (this.activeAdRequestToken !== requestToken) {
                                     return [
                                         2
                                     ];
                                 }
-                                _state.label = 3;
-                            case 3:
+                                _state.label = 4;
+                            case 4:
                                 _state.trys.push([
-                                    3,
-                                    5,
+                                    4,
+                                    6,
                                     ,
-                                    10
+                                    11
                                 ]);
                                 this.startAdFailsafeTimer(requestToken);
                                 return [
                                     4,
                                     this.ima.play()
                                 ];
-                            case 4:
+                            case 5:
                                 _state.sent();
                                 if (this.expectedAdBreakDurationMs != null && this.adStopTimerId == null) {
                                     this.currentAdBreakStartWallClockMs = Date.now();
@@ -6079,9 +6484,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 this.temporaryFailureUrls.delete(vastTagUrl);
                                 return [
                                     3,
-                                    10
+                                    11
                                 ];
-                            case 5:
+                            case 6:
                                 playError = _state.sent();
                                 if (this.config.debugAdTiming) {
                                     console.error("[AD-ERROR] Failed to play ad:", playError);
@@ -6089,18 +6494,18 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 preloadedFallback = this.getPreloadedAd();
                                 if (!preloadedFallback) return [
                                     3,
-                                    9
+                                    10
                                 ];
                                 if (this.config.debugAdTiming) {
                                     console.log("[AD-ERROR] Play failed, trying preloaded fallback ad");
                                 }
-                                _state.label = 6;
-                            case 6:
+                                _state.label = 7;
+                            case 7:
                                 _state.trys.push([
-                                    6,
-                                    8,
+                                    7,
+                                    9,
                                     ,
-                                    9
+                                    10
                                 ]);
                                 this.clearAdFailsafeTimer();
                                 this.ima.destroy();
@@ -6116,7 +6521,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     4,
                                     this.ima.play()
                                 ];
-                            case 7:
+                            case 8:
                                 _state.sent();
                                 if (this.expectedAdBreakDurationMs != null && this.adStopTimerId == null) {
                                     this.currentAdBreakStartWallClockMs = Date.now();
@@ -6129,16 +6534,16 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 return [
                                     2
                                 ];
-                            case 8:
+                            case 9:
                                 fallbackError = _state.sent();
                                 if (this.config.debugAdTiming) {
                                     console.warn("[AD-ERROR] Preloaded fallback also failed:", fallbackError);
                                 }
                                 return [
                                     3,
-                                    9
+                                    10
                                 ];
-                            case 9:
+                            case 10:
                                 if (this.isTemporaryAdError(playError)) {
                                     this.temporaryFailureUrls.set(vastTagUrl, Date.now());
                                     if (this.config.debugAdTiming) {
@@ -6155,12 +6560,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     this.activeAdRequestToken = null;
                                 }
                                 throw playError;
-                            case 10:
+                            case 11:
                                 return [
                                     3,
-                                    16
+                                    17
                                 ];
-                            case 11:
+                            case 12:
                                 error = _state.sent();
                                 errorMessage = (error === null || error === void 0 ? void 0 : error.message) || "";
                                 if (this.config.debugAdTiming) {
@@ -6169,18 +6574,18 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 preloadedFallback1 = this.getPreloadedAd();
                                 if (!preloadedFallback1) return [
                                     3,
-                                    15
+                                    16
                                 ];
                                 if (this.config.debugAdTiming) {
                                     console.log("[AD-ERROR] Request failed, trying preloaded fallback ad");
                                 }
-                                _state.label = 12;
-                            case 12:
+                                _state.label = 13;
+                            case 13:
                                 _state.trys.push([
-                                    12,
-                                    14,
+                                    13,
+                                    15,
                                     ,
-                                    15
+                                    16
                                 ]);
                                 this.clearAdRequestWatchdog();
                                 this.clearAdFailsafeTimer();
@@ -6197,7 +6602,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     4,
                                     this.ima.play()
                                 ];
-                            case 13:
+                            case 14:
                                 _state.sent();
                                 currentMuted2 = this.video.muted;
                                 currentVolume2 = this.video.volume;
@@ -6206,16 +6611,16 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 return [
                                     2
                                 ];
-                            case 14:
+                            case 15:
                                 fallbackError1 = _state.sent();
                                 if (this.config.debugAdTiming) {
                                     console.warn("[AD-ERROR] Preloaded fallback also failed:", fallbackError1);
                                 }
                                 return [
                                     3,
-                                    15
+                                    16
                                 ];
-                            case 15:
+                            case 16:
                                 if (this.isTemporaryAdError(error)) {
                                     this.temporaryFailureUrls.set(vastTagUrl, Date.now());
                                     if (this.config.debugAdTiming) {
@@ -6233,7 +6638,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     this.activeAdRequestToken = null;
                                 }
                                 throw error;
-                            case 16:
+                            case 17:
                                 return [
                                     2
                                 ];
@@ -6260,6 +6665,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }
                 this.adRequestQueue = [];
                 this.inAdBreak = false;
+                this.adDetectSentForCurrentBreak = false;
                 this.expectedAdBreakDurationMs = void 0;
                 this.currentAdBreakStartWallClockMs = void 0;
                 this.clearAdStartTimer();
@@ -6269,6 +6675,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 this.currentAdIndex = 0;
                 this.totalAdsInBreak = 0;
                 this.consecutiveFailures = 0;
+                this.globalConsecutiveNoFills = 0;
                 this.ima.stop().catch(function() {});
                 var restoredMuted = this.ima.getOriginalMutedState();
                 var restoredVolume = this.ima.getOriginalVolume();
@@ -6300,6 +6707,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "handleAdFailure",
             value: function handleAdFailure() {
                 this.consecutiveFailures++;
+                this.recordGamNoFill();
                 var remaining = this.getRemainingAdMs();
                 if (this.config.debugAdTiming) {
                     console.log("[CONTINUOUS-FETCH] Ad failure: remaining=".concat(remaining, "ms, queued ads=").concat(this.adRequestQueue.length, ", consecutiveFailures=").concat(this.consecutiveFailures), this.adRequestQueue.length > 0 ? {
@@ -6327,8 +6735,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "startAdRequestWatchdog",
             value: function startAdRequestWatchdog(token) {
                 var _this = this;
-                this.clearAdRequestWatchdog();
                 var _this_config_adFailsafeTimeoutMs;
+                this.clearAdRequestWatchdog();
                 var timeoutMs = (_this_config_adFailsafeTimeoutMs = this.config.adFailsafeTimeoutMs) !== null && _this_config_adFailsafeTimeoutMs !== void 0 ? _this_config_adFailsafeTimeoutMs : 1e4;
                 this.adRequestWatchdogToken = token;
                 this.adRequestWatchdogId = window.setTimeout(function() {
@@ -6371,8 +6779,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "startAdFailsafeTimer",
             value: function startAdFailsafeTimer(token) {
                 var _this = this;
-                this.clearAdFailsafeTimer();
                 var _this_config_adFailsafeTimeoutMs;
+                this.clearAdFailsafeTimer();
                 var failsafeMs = (_this_config_adFailsafeTimeoutMs = this.config.adFailsafeTimeoutMs) !== null && _this_config_adFailsafeTimeoutMs !== void 0 ? _this_config_adFailsafeTimeoutMs : 1e4;
                 this.adFailsafeToken = token;
                 this.adFailsafeTimerId = window.setTimeout(function() {
@@ -6697,6 +7105,7 @@ var CRITICAL_PROPS = [
     "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, [
         "src",
@@ -6731,6 +7140,8 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     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,
@@ -6750,23 +7161,51 @@ 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 getResponsiveScale = function() {
+    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;
         if (viewportWidth < 1024) return 0.9;
         return 1;
     };
     var responsiveScale = getResponsiveScale();
-    var formatTime = function(seconds) {
+    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);
         var minutes = Math.floor(seconds % 3600 / 60);
         var remainingSeconds = Math.floor(seconds % 60);
         return "".concat(hours, ":").concat(minutes.toString().padStart(2, "0"), ":").concat(remainingSeconds.toString().padStart(2, "0"));
     };
-    var handlePlayPause = function() {
+    var handlePlayPause = function handlePlayPause() {
         if (videoRef.current) {
             if (videoRef.current.paused) {
                 var hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
@@ -6784,8 +7223,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 setShowCenterPlay(true);
             }
         }
+        resetControlsTimer();
     };
-    var handleCenterPlayClick = function() {
+    var handleCenterPlayClick = function handleCenterPlayClick() {
         if (videoRef.current && videoRef.current.paused) {
             var hasValidSource = videoRef.current.src || videoRef.current.currentSrc && videoRef.current.currentSrc !== "" || videoRef.current.readyState >= 1;
             if (hasValidSource) {
@@ -6799,7 +7239,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
             }
         }
     };
-    var handleTimelineSeek = function(e) {
+    var handleTimelineSeek = function handleTimelineSeek(e) {
         if (videoRef.current && duration > 0 && isFinite(duration)) {
             var rect = e.currentTarget.getBoundingClientRect();
             var clickX = e.clientX - rect.left;
@@ -6809,14 +7249,15 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 videoRef.current.currentTime = newTime;
             }
         }
+        resetControlsTimer();
     };
-    var handleVolumeChange = function(newVolume) {
+    var handleVolumeChange = function handleVolumeChange(newVolume) {
         if (playerRef.current && isFinite(newVolume)) {
             var clampedVolume = Math.max(0, Math.min(1, newVolume));
             playerRef.current.setVolume(clampedVolume);
         }
     };
-    var handlePlaybackRateChange = function(rate) {
+    var handlePlaybackRateChange = function handlePlaybackRateChange(rate) {
         if (videoRef.current && isFinite(rate) && rate > 0) {
             videoRef.current.playbackRate = rate;
         }
@@ -6853,7 +7294,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         if (playerRef.current) {
             try {
                 playerRef.current.destroy();
-            } catch (e) {}
+            } catch (unused) {}
             playerRef.current = null;
         }
         var cfg = {
@@ -6893,7 +7334,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         return function() {
             try {
                 player.destroy();
-            } catch (e) {}
+            } catch (unused) {}
             playerRef.current = null;
         };
     }, [
@@ -6917,7 +7358,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     ]);
     (0, import_react.useEffect)(function() {
         if (!playerRef.current) return;
-        var checkAdStatus = function() {
+        var checkAdStatus = function checkAdStatus() {
             if (playerRef.current) {
                 var _videoRef_current_dataset, _videoRef_current;
                 var showAdsFromMethod = playerRef.current.isShowingAds();
@@ -6947,7 +7388,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, []);
     (0, import_react.useEffect)(function() {
         if (typeof window === "undefined" || !playerRef.current) return;
-        var handleResize = function() {
+        var handleResize = function handleResize() {
             if (playerRef.current && videoRef.current) {
                 if (typeof playerRef.current.resize === "function") {
                     playerRef.current.resize();
@@ -6963,8 +7404,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, []);
     (0, import_react.useEffect)(function() {
         if (!playerRef.current || !videoRef.current) return;
-        var updateStates = function() {
-            var _videoRef_current;
+        var updateStates = function updateStates() {
             if (playerRef.current && videoRef.current) {
                 setIsMuted(playerRef.current.isMuted());
                 setIsPlaying(!videoRef.current.paused);
@@ -6977,12 +7417,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() {
-            var _videoRef_current;
-            setIsFullscreen(document.fullscreenElement === ((_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.parentElement));
+        var handleFullscreenChange = function handleFullscreenChange() {
+            setIsFullscreen(document.fullscreenElement === wrapperRef.current);
         };
         document.addEventListener("fullscreenchange", handleFullscreenChange);
         return function() {
@@ -6992,7 +7431,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, []);
     (0, import_react.useEffect)(function() {
         if (!videoRef.current) return;
-        var handleLoadedMetadata = function() {
+        var handleLoadedMetadata = function handleLoadedMetadata() {
             if (videoRef.current) {
                 var video2 = videoRef.current;
                 void video2.offsetHeight;
@@ -7002,19 +7441,19 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 console.log("[StormcloudUI] Video event: loadedmetadata, readyState:", (_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.readyState);
             }
         };
-        var handleLoadedData = function() {
+        var handleLoadedData = function handleLoadedData() {
             if (debugAdTiming) {
                 var _videoRef_current;
                 console.log("[StormcloudUI] Video event: loadeddata, readyState:", (_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.readyState);
             }
         };
-        var handleLoadStart = function() {
+        var handleLoadStart = function handleLoadStart() {
             if (debugAdTiming) {
                 var _videoRef_current;
                 console.log("[StormcloudUI] Video event: loadstart, readyState:", (_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.readyState);
             }
         };
-        var handleCanPlay = function() {
+        var handleCanPlay = function handleCanPlay() {
             setIsLoading(false);
             if (bufferingTimeoutRef.current) {
                 clearTimeout(bufferingTimeoutRef.current);
@@ -7026,7 +7465,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 console.log("[StormcloudUI] Video event: canplay, readyState:", (_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.readyState, "- clearing loading state, isLoading=false");
             }
         };
-        var handleCanPlayThrough = function() {
+        var handleCanPlayThrough = function handleCanPlayThrough() {
             setIsLoading(false);
             if (bufferingTimeoutRef.current) {
                 clearTimeout(bufferingTimeoutRef.current);
@@ -7038,7 +7477,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 console.log("[StormcloudUI] Video event: canplaythrough, readyState:", (_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.readyState, "- clearing loading state, isLoading=false");
             }
         };
-        var handleWaiting = function() {
+        var handleWaiting = function handleWaiting() {
             if (bufferingTimeoutRef.current) {
                 clearTimeout(bufferingTimeoutRef.current);
             }
@@ -7054,7 +7493,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 console.log("[StormcloudUI] Video event: waiting, readyState:", (_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.readyState, "- buffering delay started (300ms)");
             }
         };
-        var handlePlaying = function() {
+        var handlePlaying = function handlePlaying() {
             setIsLoading(false);
             if (bufferingTimeoutRef.current) {
                 clearTimeout(bufferingTimeoutRef.current);
@@ -7067,7 +7506,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 console.log("[StormcloudUI] Video event: playing, readyState:", (_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : _videoRef_current.readyState, "- playback started, isLoading=false, isBuffering=false");
             }
         };
-        var handlePause = function() {
+        var handlePause = function handlePause() {
             var _playerRef_current, _videoRef_current_dataset, _videoRef_current;
             var isAdActive = ((_playerRef_current = playerRef.current) === null || _playerRef_current === void 0 ? void 0 : _playerRef_current.isShowingAds()) || ((_videoRef_current = videoRef.current) === null || _videoRef_current === void 0 ? void 0 : (_videoRef_current_dataset = _videoRef_current.dataset) === null || _videoRef_current_dataset === void 0 ? void 0 : _videoRef_current_dataset.stormcloudAdPlaying) === "true";
             if (playerRef.current && !isAdActive) {
@@ -7076,7 +7515,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                 setShowCenterPlay(false);
             }
         };
-        var handleEnded = function() {
+        var handleEnded = function handleEnded() {
             setShowCenterPlay(true);
         };
         var video = videoRef.current;
@@ -7110,13 +7549,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",
@@ -7131,7 +7582,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),
@@ -7157,16 +7608,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", {
@@ -7176,13 +7627,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"
@@ -7190,20 +7641,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.",
@@ -7222,836 +7671,550 @@ 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(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)";
+                        onMouseEnter: function onMouseEnter(e) {
+                            e.currentTarget.style.background = "rgba(0, 0, 0, 0.72)";
+                            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1.06)";
                         },
-                        onMouseLeave: function(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)";
+                        onMouseLeave: function onMouseLeave(e) {
+                            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(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(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() {
-                                                        return setShowVolumeSlider(true);
-                                                    },
-                                                    onMouseLeave: function() {
-                                                        return setShowVolumeSlider(false);
-                                                    },
-                                                    children: [
-                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                                            onClick: function() {
-                                                                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(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(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() {
-                                                                        return setShowVolumeSlider(true);
-                                                                    },
-                                                                    onMouseLeave: function() {
-                                                                        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",
+                                                                        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",
-                                                                        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(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(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(e) {},
-                                                                        onMouseLeave: function(e) {},
-                                                                        onMouseDown: function(e) {
-                                                                            e.preventDefault();
-                                                                            var sliderElement = e.currentTarget;
-                                                                            var handleMouseMove = function(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() {
-                                                                                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(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(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(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(e) {
-                                                                                    e.currentTarget.style.cursor = "grabbing";
-                                                                                },
-                                                                                onMouseUp: function(e) {
-                                                                                    e.currentTarget.style.cursor = "grab";
-                                                                                }
-                                                                            })
-                                                                        ]
-                                                                    })
+                                                                        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() {
-                                                                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(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(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() {
-                                                                        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(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(e) {
-                                                                        if (playbackRate !== speed) {
-                                                                            e.target.style.background = "transparent";
-                                                                        }
-                                                                    },
-                                                                    children: [
-                                                                        speed,
-                                                                        "x"
-                                                                    ]
-                                                                }, speed);
-                                                            })
-                                                        })
-                                                    ]
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                                    onClick: function() {
-                                                        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(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(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: function onMouseEnter() {
                                     return setShowVolumeSlider(true);
                                 },
-                                onMouseLeave: function() {
+                                onMouseLeave: function onMouseLeave() {
                                     return setShowVolumeSlider(false);
                                 },
                                 children: [
                                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                        onClick: function() {
-                                            if (playerRef.current) {
-                                                playerRef.current.toggleMute();
-                                            }
-                                            if (onVolumeToggle) {
-                                                onVolumeToggle();
-                                            }
-                                        },
-                                        onMouseEnter: function(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(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%)";
+                                        className: "sc-ctrl-btn",
+                                        onClick: function onClick() {
+                                            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() {
-                                                    return setShowVolumeSlider(true);
-                                                },
-                                                onMouseLeave: function() {
-                                                    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(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(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(e) {
-                                                        e.preventDefault();
-                                                        var sliderElement = e.currentTarget;
-                                                        var handleMouseMove = function(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() {
-                                                            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(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(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(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(e) {
-                                                                e.currentTarget.style.cursor = "grabbing";
-                                                            },
-                                                            onMouseUp: function(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", {
-                                onClick: function() {
+                                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(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(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)
                                 })
                             })
                         ]