stormcloud-video-player 0.8.2 → 0.8.4

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -1371,6 +1371,99 @@ function createPalNonceManager() {
         }
     };
 }
+// src/utils/mqttConfig.ts
+var DEFAULT_MQTT_CONFIG = {
+    enabled: true,
+    brokerAddress: "vecbae77.ala.us-east-1.emqxsl.com",
+    brokerPort: 8883,
+    wsPort: 8084,
+    username: "for-sonifi",
+    password: "sonifi-mqtt",
+    topicPrefix: "adstorm/players",
+    qos: 1
+};
+var mqttConfig = _object_spread({}, DEFAULT_MQTT_CONFIG);
+function isMQTTEnabled() {
+    return mqttConfig.enabled;
+}
+function buildMQTTBrokerUrl() {
+    if (mqttConfig.brokerUrl) return mqttConfig.brokerUrl;
+    return "wss://".concat(mqttConfig.brokerAddress, ":").concat(mqttConfig.wsPort, "/mqtt");
+}
+function buildPlayerTopic(licenseKey, channel) {
+    return "".concat(mqttConfig.topicPrefix, "/").concat(licenseKey, "/").concat(channel);
+}
+// src/utils/mqttClient.ts
+var import_mqtt = __toESM(require("mqtt"), 1);
+var LOG = "[StormcloudVideoPlayer][MQTT]";
+var client = null;
+var status = "disconnected";
+function initMQTTClient() {
+    if (client || !isMQTTEnabled()) return;
+    var url = buildMQTTBrokerUrl();
+    status = "connecting";
+    var clientId = "stormcloud-vp-".concat(Math.random().toString(36).slice(2, 9));
+    try {
+        client = import_mqtt.default.connect(url, {
+            clientId: clientId,
+            username: mqttConfig.username,
+            password: mqttConfig.password,
+            keepalive: 60,
+            clean: true,
+            reconnectPeriod: 5e3,
+            connectTimeout: 1e4,
+            queueQoSZero: false
+        });
+    } catch (err) {
+        status = "error";
+        console.warn("".concat(LOG, " connect() threw:"), err);
+        return;
+    }
+    client.on("connect", function() {
+        status = "connected";
+        console.info("".concat(LOG, " connected to ").concat(url));
+    });
+    client.on("reconnect", function() {
+        status = "connecting";
+        console.info("".concat(LOG, " reconnecting…"));
+    });
+    client.on("offline", function() {
+        status = "disconnected";
+        console.warn("".concat(LOG, " offline"));
+    });
+    client.on("error", function(err) {
+        status = "error";
+        console.warn("".concat(LOG, " error:"), err.message);
+    });
+    client.on("close", function() {
+        if (status === "connected") {
+            status = "disconnected";
+        }
+    });
+}
+function ensureMQTTClient() {
+    if (isMQTTEnabled() && !client) {
+        initMQTTClient();
+    }
+}
+function publishMQTT(topic, payload) {
+    if (!isMQTTEnabled()) {
+        return false;
+    }
+    ensureMQTTClient();
+    if (!client) {
+        return false;
+    }
+    try {
+        client.publish(topic, JSON.stringify(payload), {
+            qos: mqttConfig.qos
+        });
+        return true;
+    } catch (err) {
+        console.warn("".concat(LOG, " publish failed on ").concat(topic, ":"), err);
+        return false;
+    }
+}
 // src/utils/tracking.ts
 var cachedBrowserId = null;
 function getClientInfo() {
@@ -1517,7 +1610,7 @@ function getClientInfo() {
 }
 function getBrowserID(clientInfo) {
     return _async_to_generator(function() {
-        var fingerprintString, encodedData, utf8, buffer, i, hashBuffer, hashArray, hashHex, error, hash, i1, char, fallbackHash, timestamp, random;
+        var _crypto_subtle, fingerprintString, encodedData, utf8, buffer, i, hashBuffer, hashHex, unused, hash, i1, char, fallbackHash, timestamp, random;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
@@ -1528,7 +1621,7 @@ function getBrowserID(clientInfo) {
                         ];
                     }
                     fingerprintString = JSON.stringify(clientInfo);
-                    if (!(typeof crypto !== "undefined" && crypto.subtle && crypto.subtle.digest)) return [
+                    if (!(typeof crypto !== "undefined" && ((_crypto_subtle = crypto.subtle) === null || _crypto_subtle === void 0 ? void 0 : _crypto_subtle.digest))) return [
                         3,
                         5
                     ];
@@ -1566,8 +1659,7 @@ function getBrowserID(clientInfo) {
                     ];
                 case 3:
                     hashBuffer = _state.sent();
-                    hashArray = Array.from(new Uint8Array(hashBuffer));
-                    hashHex = hashArray.map(function(b) {
+                    hashHex = Array.from(new Uint8Array(hashBuffer)).map(function(b) {
                         return b.toString(16).padStart(2, "0");
                     }).join("");
                     cachedBrowserId = hashHex;
@@ -1576,8 +1668,8 @@ function getBrowserID(clientInfo) {
                         hashHex
                     ];
                 case 4:
-                    error = _state.sent();
-                    console.warn("[StormcloudVideoPlayer] crypto.subtle.digest not supported, using fallback hash");
+                    unused = _state.sent();
+                    console.warn("[StormcloudVideoPlayer] crypto.subtle not supported, using fallback hash");
                     return [
                         3,
                         5
@@ -1601,177 +1693,91 @@ function getBrowserID(clientInfo) {
         });
     })();
 }
-var PLAYER_TRACKING_BASE_URL = "https://adstorm.co/api-adstorm-dev/adstorm/player-tracking";
-var TRACK_URL = "".concat(PLAYER_TRACKING_BASE_URL, "/metrics/ingest");
-var HEARTBEAT_URL = "".concat(PLAYER_TRACKING_BASE_URL, "/heartbeat");
-var IMPRESSIONS_URL = "".concat(PLAYER_TRACKING_BASE_URL, "/impressions/ingest");
-function buildHeaders(licenseKey) {
-    var headers = {
-        "Content-Type": "application/json"
-    };
-    if (licenseKey) {
-        headers["Authorization"] = "Bearer ".concat(licenseKey);
-    }
-    return headers;
-}
-function sendTrackRequest(licenseKey, body) {
-    return _async_to_generator(function() {
-        var response;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    return [
-                        4,
-                        fetch(TRACK_URL, {
-                            method: "POST",
-                            headers: buildHeaders(licenseKey),
-                            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 canPublish(licenseKey) {
+    return Boolean(isMQTTEnabled() && licenseKey);
 }
-function postJson(url, licenseKey, body) {
+function buildPlayerMetricEvent() {
     return _async_to_generator(function() {
-        var response;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    return [
-                        4,
-                        fetch(url, {
-                            method: "POST",
-                            headers: buildHeaders(licenseKey),
-                            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 buildPlayerMetricEvent(_0) {
-    return _async_to_generator(function(licenseKey) {
-        var context, flags, _flags_captureAt, clientInfo, browserId, captureAt;
+        var context, flags, _flags_captureAt, _flags_adLoaded, _flags_adDetect, clientInfo, playerId, captureAt;
         var _arguments = arguments;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    context = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : {}, flags = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : {};
+                    context = _arguments.length > 0 && _arguments[0] !== void 0 ? _arguments[0] : {}, flags = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : {};
                     clientInfo = getClientInfo();
                     return [
                         4,
                         getBrowserID(clientInfo)
                     ];
                 case 1:
-                    browserId = _state.sent();
+                    playerId = _state.sent();
                     captureAt = (_flags_captureAt = flags.captureAt) !== null && _flags_captureAt !== void 0 ? _flags_captureAt : /* @__PURE__ */ new Date().toISOString();
                     return [
                         2,
-                        {
-                            player_id: browserId,
-                            browserId: browserId,
+                        _object_spread({
+                            player_id: playerId,
                             device_type: clientInfo.deviceType,
-                            deviceType: clientInfo.deviceType,
-                            input_stream_type: context.inputStreamType,
-                            os: clientInfo.os,
-                            ad_loaded: flags.adLoaded,
-                            ad_detect: flags.adDetect,
-                            license_key: licenseKey,
-                            capture_at: captureAt,
-                            timestamp: captureAt
-                        }
+                            os: clientInfo.os.toLowerCase(),
+                            ad_loaded: (_flags_adLoaded = flags.adLoaded) !== null && _flags_adLoaded !== void 0 ? _flags_adLoaded : false,
+                            ad_detect: (_flags_adDetect = flags.adDetect) !== null && _flags_adDetect !== void 0 ? _flags_adDetect : false,
+                            capture_at: captureAt
+                        }, context.inputStreamType ? {
+                            input_stream_type: context.inputStreamType
+                        } : {})
                     ];
             }
         });
     }).apply(this, arguments);
 }
+function publishTracking(licenseKey, channel, body) {
+    ensureMQTTClient();
+    publishMQTT(buildPlayerTopic(licenseKey, channel), body);
+}
 function sendInitialTracking(_0) {
     return _async_to_generator(function(licenseKey) {
-        var context, clientInfo, browserId, trackingData, error;
+        var context, metricEvent, error;
         var _arguments = arguments;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
                     context = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : {};
+                    if (!canPublish(licenseKey)) return [
+                        2
+                    ];
                     _state.label = 1;
                 case 1:
                     _state.trys.push([
                         1,
-                        4,
+                        3,
                         ,
-                        5
+                        4
                     ]);
-                    clientInfo = getClientInfo();
                     return [
                         4,
-                        getBrowserID(clientInfo)
-                    ];
-                case 2:
-                    browserId = _state.sent();
-                    trackingData = _object_spread({
-                        browserId: browserId
-                    }, clientInfo);
-                    return [
-                        4,
-                        sendTrackRequest(licenseKey, {
-                            events: [
-                                {
-                                    player_id: browserId,
-                                    device_type: clientInfo.deviceType,
-                                    input_stream_type: context.inputStreamType,
-                                    os: clientInfo.os,
-                                    ad_loaded: false,
-                                    ad_detect: false,
-                                    license_key: licenseKey,
-                                    capture_at: /* @__PURE__ */ new Date().toISOString()
-                                }
-                            ],
-                            trackingData: trackingData
+                        buildPlayerMetricEvent(context, {
+                            adLoaded: false,
+                            adDetect: false
                         })
                     ];
-                case 3:
-                    _state.sent();
+                case 2:
+                    metricEvent = _state.sent();
+                    publishTracking(licenseKey, "metrics", {
+                        events: [
+                            metricEvent
+                        ]
+                    });
                     return [
                         3,
-                        5
+                        4
                     ];
-                case 4:
+                case 3:
                     error = _state.sent();
                     console.error("[StormcloudVideoPlayer] Error sending initial tracking data:", error);
                     return [
                         3,
-                        5
+                        4
                     ];
-                case 5:
+                case 4:
                     return [
                         2
                     ];
@@ -1875,53 +1881,48 @@ function sendAdImpressionTracking(_0, _1) {
             switch(_state.label){
                 case 0:
                     context = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : {};
+                    if (!canPublish(licenseKey)) return [
+                        2
+                    ];
                     _state.label = 1;
                 case 1:
                     _state.trys.push([
                         1,
-                        4,
+                        3,
                         ,
-                        5
+                        4
                     ]);
                     return [
                         4,
-                        buildPlayerMetricEvent(licenseKey, context, {
+                        buildPlayerMetricEvent(context, {
                             captureAt: adImpressionInfo.timestamp
                         })
                     ];
                 case 2:
                     metricEvent = _state.sent();
-                    return [
-                        4,
-                        Promise.all([
-                            postJson(HEARTBEAT_URL, licenseKey, metricEvent),
-                            postJson(IMPRESSIONS_URL, licenseKey, {
-                                events: [
-                                    {
-                                        player_id: metricEvent.player_id,
-                                        ad_played_count: 1,
-                                        ad_url: adImpressionInfo.adUrl,
-                                        license_key: licenseKey,
-                                        capture_at: adImpressionInfo.timestamp
-                                    }
-                                ]
-                            })
-                        ])
-                    ];
-                case 3:
-                    _state.sent();
+                    publishTracking(licenseKey, "heartbeat", metricEvent);
+                    publishTracking(licenseKey, "impressions", {
+                        events: [
+                            {
+                                player_id: metricEvent.player_id,
+                                ad_played_count: 1,
+                                ad_url: adImpressionInfo.adUrl,
+                                capture_at: adImpressionInfo.timestamp
+                            }
+                        ]
+                    });
                     return [
                         3,
-                        5
+                        4
                     ];
-                case 4:
+                case 3:
                     error = _state.sent();
                     console.error("[StormcloudVideoPlayer] Error sending ad impression tracking:", error);
                     return [
                         3,
-                        5
+                        4
                     ];
-                case 5:
+                case 4:
                     return [
                         2
                     ];
@@ -1937,38 +1938,36 @@ function sendHeartbeat(_0) {
             switch(_state.label){
                 case 0:
                     context = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : {}, flags = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : {};
+                    if (!canPublish(licenseKey)) return [
+                        2
+                    ];
                     _state.label = 1;
                 case 1:
                     _state.trys.push([
                         1,
-                        4,
+                        3,
                         ,
-                        5
+                        4
                     ]);
                     return [
                         4,
-                        buildPlayerMetricEvent(licenseKey, context, flags)
+                        buildPlayerMetricEvent(context, flags)
                     ];
                 case 2:
                     heartbeatData = _state.sent();
-                    return [
-                        4,
-                        postJson(HEARTBEAT_URL, licenseKey, heartbeatData)
-                    ];
-                case 3:
-                    _state.sent();
+                    publishTracking(licenseKey, "heartbeat", heartbeatData);
                     return [
                         3,
-                        5
+                        4
                     ];
-                case 4:
+                case 3:
                     error = _state.sent();
                     console.error("[StormcloudVideoPlayer] Error sending heartbeat:", error);
                     return [
                         3,
-                        5
+                        4
                     ];
-                case 5:
+                case 4:
                     return [
                         2
                     ];
@@ -2481,7 +2480,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "load",
             value: function load() {
                 return _async_to_generator(function() {
-                    var _this, _this_config_lowLatencyMode, error, _this_config_lowLatencyMode1, _this_video_play;
+                    var _this, _this_config_lowLatencyMode, error, _this_config_isLiveStream, _this_config_lowLatencyMode1, _this_video_play;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
@@ -2532,7 +2531,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 this.nativeHlsMode = true;
                                 this.videoSrcProtection = this.config.src;
                                 this.video.src = this.config.src;
-                                this.isLiveStream = (_this_config_lowLatencyMode1 = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode1 !== void 0 ? _this_config_lowLatencyMode1 : false;
+                                this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_this_config_lowLatencyMode1 = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode1 !== void 0 ? _this_config_lowLatencyMode1 : false;
                                 if (this.config.debugAdTiming) {
                                     console.log("[StormcloudVideoPlayer] Using native HLS playback - VOD mode:", {
                                         isLive: this.isLiveStream,
@@ -2583,15 +2582,15 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 });
                                 this.hls.on(import_hls2.default.Events.MANIFEST_PARSED, function(_, data) {
                                     return _async_to_generator(function() {
-                                        var _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
+                                        var _this_config_isLiveStream, _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
                                         return _ts_generator(this, function(_state) {
                                             switch(_state.label){
                                                 case 0:
-                                                    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) {
+                                                    this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_ref = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : (_this_hls_levels = _this_hls.levels) === null || _this_hls_levels === void 0 ? void 0 : _this_hls_levels.some(function(level) {
                                                         var _level_details, _level_details1;
                                                         return (level === null || level === void 0 ? void 0 : (_level_details = level.details) === null || _level_details === void 0 ? void 0 : _level_details.live) === true || (level === null || level === void 0 ? void 0 : (_level_details1 = level.details) === null || _level_details1 === void 0 ? void 0 : _level_details1.type) === "LIVE";
                                                     })) !== null && _ref !== void 0 ? _ref : false;
-                                                    if (!this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
+                                                    if (!this.isVmapEnabled() && !this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
                                                         prerollKey = "synthetic-vod-preroll";
                                                         if (!this.consumedVmapBreakIds.has(prerollKey)) {
                                                             this.vmapBreaks = [
@@ -3176,12 +3175,14 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         _this.palNonce.sendPlaybackStart();
                     }
                 });
-                this.video.addEventListener("ended", function() {
+                this.endedHandler = function() {
                     if (_this.palPlaybackStarted) {
                         _this.palPlaybackStarted = false;
                         _this.palNonce.sendPlaybackEnd();
                     }
-                });
+                    _this.onVideoEnded();
+                };
+                this.video.addEventListener("ended", this.endedHandler);
                 this.video.addEventListener("mousedown", function(e) {
                     _this.palNonce.sendAdTouch(e);
                 });
@@ -4503,6 +4504,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }
             }
         },
+        {
+            key: "isVmapEnabled",
+            value: function isVmapEnabled() {
+                var _this_config_vmapUrl;
+                return !!(this.config.isVmap && ((_this_config_vmapUrl = this.config.vmapUrl) === null || _this_config_vmapUrl === void 0 ? void 0 : _this_config_vmapUrl.trim()));
+            }
+        },
         {
             key: "fetchAdConfiguration",
             value: function fetchAdConfiguration() {
@@ -4511,7 +4519,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
-                                if (!this.config.vmapUrl) return [
+                                if (!this.isVmapEnabled()) return [
                                     3,
                                     2
                                 ];
@@ -4521,7 +4529,12 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 1:
                                 _state.sent();
-                                _state.label = 2;
+                                if (this.config.debugAdTiming) {
+                                    console.log("[StormcloudVideoPlayer] VMAP mode enabled");
+                                }
+                                return [
+                                    2
+                                ];
                             case 2:
                                 vastMode = this.config.vastMode || "default";
                                 if (this.config.debugAdTiming) {
@@ -4689,7 +4702,16 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     }
                     return [];
                 }
-                var adBreakNodes = Array.from(doc.querySelectorAll("AdBreak, vmap\\:AdBreak"));
+                var VMAP_NS = "http://www.iab.net/videosuite/vmap";
+                var adBreakNodes = Array.from(doc.getElementsByTagNameNS(VMAP_NS, "AdBreak"));
+                if (adBreakNodes.length === 0) {
+                    adBreakNodes = Array.from(doc.querySelectorAll("AdBreak, vmap\\:AdBreak"));
+                }
+                if (adBreakNodes.length === 0) {
+                    adBreakNodes = Array.from(doc.getElementsByTagName("*")).filter(function(el) {
+                        return el.localName === "AdBreak";
+                    });
+                }
                 var parsed = [];
                 adBreakNodes.forEach(function(node, index) {
                     var timeOffsetRaw = (node.getAttribute("timeOffset") || "").trim();
@@ -4697,7 +4719,11 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     if (startTimeMs == null) {
                         return;
                     }
-                    var adTagNode = node.querySelector("AdTagURI, vmap\\:AdTagURI");
+                    var adTagNode = node.getElementsByTagNameNS(VMAP_NS, "AdTagURI")[0];
+                    if (!adTagNode) {
+                        var _node_querySelector;
+                        adTagNode = (_node_querySelector = node.querySelector("AdTagURI, vmap\\:AdTagURI")) !== null && _node_querySelector !== void 0 ? _node_querySelector : void 0;
+                    }
                     var adTagUrl = ((adTagNode === null || adTagNode === void 0 ? void 0 : adTagNode.textContent) || "").trim();
                     if (!adTagUrl) {
                         return;
@@ -6254,23 +6280,49 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "onTimeUpdate",
             value: function onTimeUpdate(currentTimeSec) {
                 var _this = this;
+                if (!this.isVmapEnabled() || this.vmapBreaks.length === 0) {
+                    return;
+                }
                 if (this.adPlayer.isAdPlaying() || this.inAdBreak) return;
                 var nowMs = currentTimeSec * 1e3;
                 var breakToPlay = this.findBreakForTime(nowMs);
                 if (breakToPlay) {
-                    void this.handleMidAdJoin(breakToPlay, nowMs).catch(function(error) {
+                    void this.handleVmapAdBreak(breakToPlay, nowMs).catch(function(error) {
+                        if (_this.config.debugAdTiming) {
+                            console.warn("[StormcloudVideoPlayer] VMAP ad break failed gracefully:", error);
+                        }
+                    });
+                }
+            }
+        },
+        {
+            key: "onVideoEnded",
+            value: function onVideoEnded() {
+                var _this = this;
+                if (!this.isVmapEnabled() || this.vmapBreaks.length === 0) {
+                    return;
+                }
+                if (this.adPlayer.isAdPlaying() || this.inAdBreak) {
+                    return;
+                }
+                var durationMs = Number.isFinite(this.video.duration) ? Math.floor(this.video.duration * 1e3) : 0;
+                var postroll = this.vmapBreaks.find(function(b) {
+                    return b.startTimeMs === -1 && !_this.consumedVmapBreakIds.has(_this.getAdBreakKey(b));
+                });
+                if (postroll) {
+                    void this.handleVmapAdBreak(postroll, durationMs).catch(function(error) {
                         if (_this.config.debugAdTiming) {
-                            console.warn("[StormcloudVideoPlayer] Mid-roll VMAP join failed gracefully:", error);
+                            console.warn("[StormcloudVideoPlayer] VMAP post-roll failed gracefully:", error);
                         }
                     });
                 }
             }
         },
         {
-            key: "handleMidAdJoin",
-            value: function handleMidAdJoin(adBreak, nowMs) {
+            key: "handleVmapAdBreak",
+            value: function handleVmapAdBreak(adBreak, nowMs) {
                 return _async_to_generator(function() {
-                    var _adBreak_durationMs, _this_config_driftToleranceMs, key, breakStartMs, durationMs, endMs, tol, inWindow, remainingMs, tags, first, rest, error;
+                    var _adBreak_durationMs, key, breakStartMs, durationMs, endMs, inWindow, tags, first, rest, error;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
@@ -6288,25 +6340,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 }
                                 durationMs = (_adBreak_durationMs = adBreak.durationMs) !== null && _adBreak_durationMs !== void 0 ? _adBreak_durationMs : 0;
                                 endMs = breakStartMs + durationMs;
-                                tol = (_this_config_driftToleranceMs = this.config.driftToleranceMs) !== null && _this_config_driftToleranceMs !== void 0 ? _this_config_driftToleranceMs : 1e3;
-                                inWindow = durationMs > 0 ? nowMs > breakStartMs && nowMs < endMs : nowMs + tol >= breakStartMs;
+                                inWindow = durationMs > 0 ? nowMs >= breakStartMs && nowMs < endMs : nowMs >= breakStartMs;
                                 if (!inWindow) return [
                                     3,
                                     4
                                 ];
                                 this.consumedVmapBreakIds.add(key);
-                                remainingMs = durationMs > 0 ? Math.max(0, endMs - nowMs) : 0;
-                                tags = this.selectVastTagsForBreak(adBreak) || (this.apiVastTagUrl ? [
-                                    this.apiVastTagUrl
-                                ] : void 0);
-                                if (!(tags && tags.length > 0)) return [
-                                    3,
-                                    4
-                                ];
+                                tags = this.selectVastTagsForBreak(adBreak);
+                                if (!tags || tags.length === 0) {
+                                    return [
+                                        2
+                                    ];
+                                }
                                 first = tags[0];
                                 rest = tags.slice(1);
                                 this.adPodQueue = rest;
                                 this.adPlayer.updateOriginalMutedState(this.video.muted, this.video.volume);
+                                this.showAds = true;
+                                this.inAdBreak = true;
+                                this.currentAdBreakStartWallClockMs = Date.now();
+                                if (!this.video.paused) {
+                                    this.video.pause();
+                                }
                                 _state.label = 1;
                             case 1:
                                 _state.trys.push([
@@ -6321,10 +6376,6 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 ];
                             case 2:
                                 _state.sent();
-                                this.inAdBreak = true;
-                                this.expectedAdBreakDurationMs = remainingMs;
-                                this.currentAdBreakStartWallClockMs = Date.now();
-                                this.scheduleAdStopCountdown(remainingMs);
                                 return [
                                     3,
                                     4
@@ -6332,8 +6383,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 3:
                                 error = _state.sent();
                                 this.adPodQueue = [];
+                                this.inAdBreak = false;
+                                this.showAds = false;
                                 if (this.config.debugAdTiming) {
-                                    console.warn("[StormcloudVideoPlayer] Mid-roll VMAP ad request failed:", error);
+                                    console.warn("[StormcloudVideoPlayer] VMAP ad request failed:", error);
                                 }
                                 return [
                                     3,
@@ -7045,9 +7098,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         {
             key: "findBreakForTime",
             value: function findBreakForTime(nowMs) {
-                var _this_config_driftToleranceMs;
                 var schedule = this.vmapBreaks;
-                var tol = (_this_config_driftToleranceMs = this.config.driftToleranceMs) !== null && _this_config_driftToleranceMs !== void 0 ? _this_config_driftToleranceMs : 1e3;
                 var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
                 try {
                     for(var _iterator = schedule[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
@@ -7059,9 +7110,14 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         if (breakStartMs == null) {
                             continue;
                         }
-                        var end = breakStartMs + (b.durationMs || 0);
-                        var effectiveTol = breakStartMs === 0 ? Math.max(tol, 3e4) : tol;
-                        if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + effectiveTol)) {
+                        if (b.durationMs) {
+                            var end = breakStartMs + b.durationMs;
+                            if (nowMs >= breakStartMs && nowMs < end) {
+                                return b;
+                            }
+                            continue;
+                        }
+                        if (nowMs >= breakStartMs) {
                             return b;
                         }
                     }
@@ -7269,6 +7325,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                     this.video.removeEventListener("timeupdate", this.timeUpdateHandler);
                     delete this.timeUpdateHandler;
                 }
+                if (this.endedHandler) {
+                    this.video.removeEventListener("ended", this.endedHandler);
+                    delete this.endedHandler;
+                }
                 if (this.emptiedHandler) {
                     this.video.removeEventListener("emptied", this.emptiedHandler);
                     delete this.emptiedHandler;
@@ -7297,7 +7357,9 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var CRITICAL_PROPS = [
     "src",
     "allowNativeHls",
+    "isLiveStream",
     "licenseKey",
+    "isVmap",
     "vmapUrl",
     "lowLatencyMode",
     "driftToleranceMs",
@@ -7306,12 +7368,13 @@ var CRITICAL_PROPS = [
 var CONTROLS_HIDE_DELAY = 3e3;
 var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
 var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
-    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
+    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, isLiveStream = props.isLiveStream, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, isVmap = props.isVmap, vmapUrl = props.vmapUrl, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
         "src",
         "autoplay",
         "muted",
         "lowLatencyMode",
         "allowNativeHls",
+        "isLiveStream",
         "driftToleranceMs",
         "immediateManifestAds",
         "debugAdTiming",
@@ -7333,6 +7396,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         "licenseKey",
         "vastMode",
         "vastTagUrl",
+        "isVmap",
         "vmapUrl",
         "minSegmentsBeforePlay"
     ]);
@@ -7465,7 +7529,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         setShowSpeedMenu(false);
     };
     var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
-    var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
+    var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls || isLiveStream === false : true);
     var criticalPropsKey = (0, import_react.useMemo)(function() {
         return CRITICAL_PROPS.map(function(prop) {
             return "".concat(prop, ":").concat(props[prop]);
@@ -7473,7 +7537,9 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, [
         src,
         allowNativeHls,
+        isLiveStream,
         licenseKey,
+        isVmap,
         vmapUrl,
         lowLatencyMode,
         driftToleranceMs,
@@ -7507,6 +7573,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         if (muted !== void 0) cfg.muted = muted;
         if (lowLatencyMode !== void 0) cfg.lowLatencyMode = lowLatencyMode;
         if (allowNativeHls !== void 0) cfg.allowNativeHls = allowNativeHls;
+        if (isLiveStream !== void 0) cfg.isLiveStream = isLiveStream;
         if (driftToleranceMs !== void 0) cfg.driftToleranceMs = driftToleranceMs;
         if (immediateManifestAds !== void 0) cfg.immediateManifestAds = immediateManifestAds;
         if (debugAdTiming !== void 0) cfg.debugAdTiming = debugAdTiming;
@@ -7517,6 +7584,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
         if (licenseKey !== void 0) cfg.licenseKey = licenseKey;
         if (vastMode !== void 0) cfg.vastMode = vastMode;
         if (vastTagUrl !== void 0) cfg.vastTagUrl = vastTagUrl;
+        if (isVmap !== void 0) cfg.isVmap = isVmap;
         if (vmapUrl !== void 0) cfg.vmapUrl = vmapUrl;
         if (minSegmentsBeforePlay !== void 0) cfg.minSegmentsBeforePlay = minSegmentsBeforePlay;
         var player = new StormcloudVideoPlayer(cfg);
@@ -8345,161 +8413,202 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
                                 ]
                             })
                         ]
-                    }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                        className: "sc-controls-bar",
-                        style: {
-                            position: "absolute",
-                            bottom: "".concat(10 * responsiveScale, "px"),
-                            right: "".concat(10 * responsiveScale, "px"),
-                            display: "flex",
-                            flexDirection: isPortrait ? "column" : "row",
-                            gap: "".concat(8 * responsiveScale, "px"),
-                            zIndex: 10,
-                            opacity: controlsVisible ? 1 : 0,
-                            transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
-                            pointerEvents: controlsVisible ? "auto" : "none"
-                        },
+                    }) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
                         children: [
                             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                                 style: {
+                                    position: "absolute",
+                                    top: "".concat(10 * responsiveScale, "px"),
+                                    left: "".concat(10 * responsiveScale, "px"),
                                     display: "flex",
                                     alignItems: "center",
-                                    background: "rgba(0, 0, 0, 0.6)",
-                                    borderRadius: "".concat(18 * responsiveScale, "px"),
-                                    padding: "2px",
-                                    paddingRight: "".concat(8 * responsiveScale, "px")
-                                },
-                                onMouseEnter: function onMouseEnter() {
-                                    return setShowVolumeSlider(true);
+                                    gap: "6px",
+                                    zIndex: 10,
+                                    opacity: controlsVisible ? 1 : 0,
+                                    transition: "opacity 0.35s ease"
                                 },
-                                onMouseLeave: function onMouseLeave() {
-                                    return setShowVolumeSlider(false);
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                        style: {
+                                            width: "8px",
+                                            height: "8px",
+                                            borderRadius: "50%",
+                                            background: "#ff3b30",
+                                            animation: "sc-pulse 1.5s ease-in-out infinite",
+                                            flexShrink: 0
+                                        }
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                                        style: {
+                                            fontSize: "".concat(12 * responsiveScale, "px"),
+                                            fontFamily: "'SF Pro Display', 'Segoe UI', Arial, sans-serif",
+                                            fontWeight: 700,
+                                            letterSpacing: "0.08em",
+                                            color: "#fff",
+                                            textShadow: "0 1px 3px rgba(0,0,0,0.6)",
+                                            userSelect: "none"
+                                        },
+                                        children: "LIVE"
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                className: "sc-controls-bar",
+                                style: {
+                                    position: "absolute",
+                                    bottom: "".concat(10 * responsiveScale, "px"),
+                                    right: "".concat(10 * responsiveScale, "px"),
+                                    display: "flex",
+                                    flexDirection: isPortrait ? "column" : "row",
+                                    gap: "".concat(8 * responsiveScale, "px"),
+                                    zIndex: 10,
+                                    opacity: controlsVisible ? 1 : 0,
+                                    transform: controlsVisible ? "translateY(0)" : "translateY(4px)",
+                                    pointerEvents: controlsVisible ? "auto" : "none"
                                 },
                                 children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                        style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            background: "rgba(0, 0, 0, 0.6)",
+                                            borderRadius: "".concat(18 * responsiveScale, "px"),
+                                            padding: "2px",
+                                            paddingRight: "".concat(8 * responsiveScale, "px")
+                                        },
+                                        onMouseEnter: function onMouseEnter() {
+                                            return setShowVolumeSlider(true);
+                                        },
+                                        onMouseLeave: function onMouseLeave() {
+                                            return setShowVolumeSlider(false);
+                                        },
+                                        children: [
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+                                                className: "sc-ctrl-btn",
+                                                onClick: function onClick() {
+                                                    if (playerRef.current) playerRef.current.toggleMute();
+                                                    onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
+                                                    resetControlsTimer();
+                                                },
+                                                style: {
+                                                    padding: "".concat(8 * responsiveScale, "px"),
+                                                    borderRadius: "50%",
+                                                    minWidth: "".concat(36 * responsiveScale, "px"),
+                                                    minHeight: "".concat(36 * responsiveScale, "px")
+                                                },
+                                                title: isMuted ? "Unmute" : "Mute",
+                                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
+                                                    size: Math.max(14, 18 * responsiveScale)
+                                                })
+                                            }),
+                                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                style: {
+                                                    width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
+                                                    overflow: "hidden",
+                                                    transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
+                                                    paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
+                                                },
+                                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+                                                    style: {
+                                                        position: "relative",
+                                                        width: "".concat(56 * responsiveScale, "px"),
+                                                        height: "3px",
+                                                        cursor: "pointer",
+                                                        borderRadius: "1.5px"
+                                                    },
+                                                    onMouseDown: function onMouseDown(e) {
+                                                        e.preventDefault();
+                                                        var el = e.currentTarget;
+                                                        var move = function move(ev) {
+                                                            var r2 = el.getBoundingClientRect();
+                                                            handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
+                                                        };
+                                                        var up = function up1() {
+                                                            document.removeEventListener("mousemove", move);
+                                                            document.removeEventListener("mouseup", up);
+                                                        };
+                                                        document.addEventListener("mousemove", move);
+                                                        document.addEventListener("mouseup", up);
+                                                        var r = el.getBoundingClientRect();
+                                                        handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
+                                                    },
+                                                    onClick: function onClick(e) {
+                                                        e.stopPropagation();
+                                                        var r = e.currentTarget.getBoundingClientRect();
+                                                        handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
+                                                    },
+                                                    children: [
+                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                            style: {
+                                                                position: "absolute",
+                                                                inset: 0,
+                                                                background: "rgba(255, 255, 255, 0.2)",
+                                                                borderRadius: "1.5px"
+                                                            }
+                                                        }),
+                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                            style: {
+                                                                position: "absolute",
+                                                                top: 0,
+                                                                left: 0,
+                                                                bottom: 0,
+                                                                width: "".concat((isMuted ? 0 : volume) * 100, "%"),
+                                                                background: "#fff",
+                                                                borderRadius: "1.5px",
+                                                                transition: "width 0.1s ease-out"
+                                                            }
+                                                        }),
+                                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                                                            style: {
+                                                                position: "absolute",
+                                                                top: "50%",
+                                                                left: "".concat((isMuted ? 0 : volume) * 100, "%"),
+                                                                transform: "translate(-50%, -50%)",
+                                                                width: "12px",
+                                                                height: "12px",
+                                                                background: "#fff",
+                                                                borderRadius: "50%",
+                                                                boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
+                                                                transition: "left 0.1s ease-out"
+                                                            }
+                                                        })
+                                                    ]
+                                                })
+                                            })
+                                        ]
+                                    }),
                                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
                                         className: "sc-ctrl-btn",
                                         onClick: function onClick() {
-                                            if (playerRef.current) playerRef.current.toggleMute();
-                                            onVolumeToggle === null || onVolumeToggle === void 0 ? void 0 : onVolumeToggle();
+                                            if (onFullscreenToggle) {
+                                                onFullscreenToggle();
+                                            } else if (wrapperRef.current) {
+                                                if (!document.fullscreenElement) {
+                                                    wrapperRef.current.requestFullscreen().catch(function() {});
+                                                } else {
+                                                    document.exitFullscreen().catch(function() {});
+                                                }
+                                            }
                                             resetControlsTimer();
                                         },
                                         style: {
                                             padding: "".concat(8 * responsiveScale, "px"),
                                             borderRadius: "50%",
                                             minWidth: "".concat(36 * responsiveScale, "px"),
-                                            minHeight: "".concat(36 * responsiveScale, "px")
+                                            minHeight: "".concat(36 * responsiveScale, "px"),
+                                            background: "rgba(0, 0, 0, 0.6)"
                                         },
-                                        title: isMuted ? "Unmute" : "Mute",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeIcon, {
+                                        title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
+                                        children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
+                                            size: Math.max(14, 18 * responsiveScale)
+                                        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
                                             size: Math.max(14, 18 * responsiveScale)
-                                        })
-                                    }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                        style: {
-                                            width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
-                                            overflow: "hidden",
-                                            transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                                            display: "flex",
-                                            alignItems: "center",
-                                            paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
-                                            paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
-                                        },
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-                                            style: {
-                                                position: "relative",
-                                                width: "".concat(56 * responsiveScale, "px"),
-                                                height: "3px",
-                                                cursor: "pointer",
-                                                borderRadius: "1.5px"
-                                            },
-                                            onMouseDown: function onMouseDown(e) {
-                                                e.preventDefault();
-                                                var el = e.currentTarget;
-                                                var move = function move(ev) {
-                                                    var r2 = el.getBoundingClientRect();
-                                                    handleVolumeChange(Math.max(0, Math.min(1, (ev.clientX - r2.left) / r2.width)));
-                                                };
-                                                var up = function up1() {
-                                                    document.removeEventListener("mousemove", move);
-                                                    document.removeEventListener("mouseup", up);
-                                                };
-                                                document.addEventListener("mousemove", move);
-                                                document.addEventListener("mouseup", up);
-                                                var r = el.getBoundingClientRect();
-                                                handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
-                                            },
-                                            onClick: function onClick(e) {
-                                                e.stopPropagation();
-                                                var r = e.currentTarget.getBoundingClientRect();
-                                                handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
-                                            },
-                                            children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                    style: {
-                                                        position: "absolute",
-                                                        inset: 0,
-                                                        background: "rgba(255, 255, 255, 0.2)",
-                                                        borderRadius: "1.5px"
-                                                    }
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                    style: {
-                                                        position: "absolute",
-                                                        top: 0,
-                                                        left: 0,
-                                                        bottom: 0,
-                                                        width: "".concat((isMuted ? 0 : volume) * 100, "%"),
-                                                        background: "#fff",
-                                                        borderRadius: "1.5px",
-                                                        transition: "width 0.1s ease-out"
-                                                    }
-                                                }),
-                                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                                                    style: {
-                                                        position: "absolute",
-                                                        top: "50%",
-                                                        left: "".concat((isMuted ? 0 : volume) * 100, "%"),
-                                                        transform: "translate(-50%, -50%)",
-                                                        width: "12px",
-                                                        height: "12px",
-                                                        background: "#fff",
-                                                        borderRadius: "50%",
-                                                        boxShadow: "0 0 3px rgba(0, 0, 0, 0.3)",
-                                                        transition: "left 0.1s ease-out"
-                                                    }
-                                                })
-                                            ]
                                         })
                                     })
                                 ]
-                            }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
-                                className: "sc-ctrl-btn",
-                                onClick: function onClick() {
-                                    if (onFullscreenToggle) {
-                                        onFullscreenToggle();
-                                    } else if (wrapperRef.current) {
-                                        if (!document.fullscreenElement) {
-                                            wrapperRef.current.requestFullscreen().catch(function() {});
-                                        } else {
-                                            document.exitFullscreen().catch(function() {});
-                                        }
-                                    }
-                                    resetControlsTimer();
-                                },
-                                style: {
-                                    padding: "".concat(8 * responsiveScale, "px"),
-                                    borderRadius: "50%",
-                                    minWidth: "".concat(36 * responsiveScale, "px"),
-                                    minHeight: "".concat(36 * responsiveScale, "px"),
-                                    background: "rgba(0, 0, 0, 0.6)"
-                                },
-                                title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
-                                children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaCompress, {
-                                    size: Math.max(14, 18 * responsiveScale)
-                                }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_fa.FaExpand, {
-                                    size: Math.max(14, 18 * responsiveScale)
-                                })
                             })
                         ]
                     }),