stormcloud-video-player 0.3.60 → 0.3.62

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -2646,40 +2646,66 @@ function getBrowserID(clientInfo) {
         });
     })();
 }
-function sendInitialTracking(licenseKey) {
+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 clientInfo, browserId, trackingData, headers, response, error;
+        var response;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    _state.trys.push([
-                        0,
-                        4,
-                        ,
-                        5
-                    ]);
-                    clientInfo = getClientInfo();
                     return [
                         4,
-                        getBrowserID(clientInfo)
+                        fetch(TRACK_URL, {
+                            method: "POST",
+                            headers: buildHeaders(licenseKey),
+                            body: JSON.stringify(body)
+                        })
                     ];
                 case 1:
-                    browserId = _state.sent();
-                    trackingData = _object_spread({
-                        browserId: browserId
-                    }, clientInfo);
-                    headers = {
-                        "Content-Type": "application/json"
-                    };
+                    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 postJson(url, licenseKey, body) {
+    return _async_to_generator(function() {
+        var response;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
                     return [
                         4,
-                        fetch("https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/track", {
+                        fetch(url, {
                             method: "POST",
-                            headers: headers,
-                            body: JSON.stringify(trackingData)
+                            headers: buildHeaders(licenseKey),
+                            body: JSON.stringify(body)
                         })
                     ];
-                case 2:
+                case 1:
                     response = _state.sent();
                     if (!response.ok) {
                         throw new Error("HTTP error! status: ".concat(response.status));
@@ -2688,35 +2714,63 @@ function sendInitialTracking(licenseKey) {
                         4,
                         response.json()
                     ];
-                case 3:
+                case 2:
                     _state.sent();
                     return [
-                        3,
-                        5
+                        2
                     ];
-                case 4:
-                    error = _state.sent();
-                    console.error("[StormcloudVideoPlayer] Error sending initial tracking data:", error);
+            }
+        });
+    })();
+}
+function buildPlayerMetricEvent(_0) {
+    return _async_to_generator(function(licenseKey) {
+        var context, flags, _flags_captureAt, clientInfo, browserId, 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] : {};
+                    clientInfo = getClientInfo();
                     return [
-                        3,
-                        5
+                        4,
+                        getBrowserID(clientInfo)
                     ];
-                case 5:
+                case 1:
+                    browserId = _state.sent();
+                    captureAt = (_flags_captureAt = flags.captureAt) !== null && _flags_captureAt !== void 0 ? _flags_captureAt : /* @__PURE__ */ new Date().toISOString();
                     return [
-                        2
+                        2,
+                        {
+                            player_id: browserId,
+                            browserId: browserId,
+                            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
+                        }
                     ];
             }
         });
-    })();
+    }).apply(this, arguments);
 }
-function sendHeartbeat(licenseKey) {
-    return _async_to_generator(function() {
-        var clientInfo, browserId, heartbeatData, headers, response, error;
+function sendInitialTracking(_0) {
+    return _async_to_generator(function(licenseKey) {
+        var context, clientInfo, browserId, trackingData, 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] : {};
+                    _state.label = 1;
+                case 1:
                     _state.trys.push([
-                        0,
+                        1,
                         4,
                         ,
                         5
@@ -2726,35 +2780,29 @@ function sendHeartbeat(licenseKey) {
                         4,
                         getBrowserID(clientInfo)
                     ];
-                case 1:
+                case 2:
                     browserId = _state.sent();
-                    heartbeatData = {
-                        browserId: browserId,
-                        timestamp: /* @__PURE__ */ new Date().toISOString()
-                    };
-                    headers = {
-                        "Content-Type": "application/json"
-                    };
-                    if (licenseKey) {
-                        headers["Authorization"] = "Bearer ".concat(licenseKey);
-                    }
+                    trackingData = _object_spread({
+                        browserId: browserId
+                    }, clientInfo);
                     return [
                         4,
-                        fetch("https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/heartbeat", {
-                            method: "POST",
-                            headers: headers,
-                            body: JSON.stringify(heartbeatData)
+                        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
                         })
                     ];
-                case 2:
-                    response = _state.sent();
-                    if (!response.ok) {
-                        throw new Error("HTTP error! status: ".concat(response.status));
-                    }
-                    return [
-                        4,
-                        response.json()
-                    ];
                 case 3:
                     _state.sent();
                     return [
@@ -2763,7 +2811,7 @@ function sendHeartbeat(licenseKey) {
                     ];
                 case 4:
                     error = _state.sent();
-                    console.error("[StormcloudVideoPlayer] Error sending heartbeat:", error);
+                    console.error("[StormcloudVideoPlayer] Error sending initial tracking data:", error);
                     return [
                         3,
                         5
@@ -2774,95 +2822,74 @@ function sendHeartbeat(licenseKey) {
                     ];
             }
         });
-    })();
+    }).apply(this, arguments);
 }
-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;
+function sendAdDetectTracking(_0, _1) {
+    return _async_to_generator(function(licenseKey, adDetectInfo) {
+        var context, error;
+        var _arguments = arguments;
         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)
-                        })
-                    ];
+                    context = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : {};
+                    _state.label = 1;
                 case 1:
-                    response = _state.sent();
-                    if (!response.ok) {
-                        throw new Error("HTTP error! status: ".concat(response.status));
-                    }
+                    _state.trys.push([
+                        1,
+                        3,
+                        ,
+                        4
+                    ]);
                     return [
                         4,
-                        response.json()
+                        sendHeartbeat(licenseKey, context, {
+                            adDetect: true,
+                            captureAt: adDetectInfo.timestamp
+                        })
                     ];
                 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
                     ];
             }
         });
-    })();
+    }).apply(this, arguments);
 }
-function sendAdDetectTracking(licenseKey, payload) {
-    return _async_to_generator(function() {
-        var _payload_source, _payload_timestamp, clientInfo, browserId, adDetectInfo, body, error;
+function sendAdLoadedTracking(_0, _1) {
+    return _async_to_generator(function(licenseKey, adLoadedInfo) {
+        var context, error;
+        var _arguments = arguments;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
+                    context = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : {};
+                    _state.label = 1;
+                case 1:
                     _state.trys.push([
-                        0,
+                        1,
                         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)
+                        sendHeartbeat(licenseKey, context, {
+                            adLoaded: true,
+                            captureAt: adLoadedInfo.timestamp
+                        })
                     ];
                 case 2:
                     _state.sent();
@@ -2872,7 +2899,7 @@ function sendAdDetectTracking(licenseKey, payload) {
                     ];
                 case 3:
                     error = _state.sent();
-                    console.error("[StormcloudVideoPlayer] Error sending ad-detect tracking:", error);
+                    console.error("[StormcloudVideoPlayer] Error sending ad loaded tracking:", error);
                     return [
                         3,
                         4
@@ -2883,126 +2910,116 @@ function sendAdDetectTracking(licenseKey, payload) {
                     ];
             }
         });
-    })();
+    }).apply(this, arguments);
 }
-function sendAdLoadedTracking(licenseKey, payload, adPlayerType) {
-    return _async_to_generator(function() {
-        var clientInfo, browserId, source, adLoadedInfo, body, error;
+function sendAdImpressionTracking(_0, _1) {
+    return _async_to_generator(function(licenseKey, adImpressionInfo) {
+        var context, metricEvent, error;
+        var _arguments = arguments;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
+                    context = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : {};
+                    _state.label = 1;
+                case 1:
                     _state.trys.push([
-                        0,
-                        3,
+                        1,
+                        4,
                         ,
-                        4
+                        5
                     ]);
-                    clientInfo = getClientInfo();
                     return [
                         4,
-                        getBrowserID(clientInfo)
+                        buildPlayerMetricEvent(licenseKey, context, {
+                            captureAt: adImpressionInfo.timestamp
+                        })
                     ];
-                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
-                    });
+                case 2:
+                    metricEvent = _state.sent();
                     return [
                         4,
-                        postAdTracking(licenseKey, body)
+                        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 2:
+                case 3:
                     _state.sent();
                     return [
                         3,
-                        4
+                        5
                     ];
-                case 3:
+                case 4:
                     error = _state.sent();
-                    console.error("[StormcloudVideoPlayer] Error sending ad-loaded tracking:", error);
+                    console.error("[StormcloudVideoPlayer] Error sending ad impression tracking:", error);
                     return [
                         3,
-                        4
+                        5
                     ];
-                case 4:
+                case 5:
                     return [
                         2
                     ];
             }
         });
-    })();
+    }).apply(this, arguments);
 }
-function sendAdImpressionTracking(licenseKey, payload, adPlayerType) {
-    return _async_to_generator(function() {
-        var clientInfo, browserId, source, adImpressionInfo, body, error;
+function sendHeartbeat(_0) {
+    return _async_to_generator(function(licenseKey) {
+        var context, flags, heartbeatData, 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] : {}, flags = _arguments.length > 2 && _arguments[2] !== void 0 ? _arguments[2] : {};
+                    _state.label = 1;
+                case 1:
                     _state.trys.push([
-                        0,
-                        3,
+                        1,
+                        4,
                         ,
-                        4
+                        5
                     ]);
-                    clientInfo = getClientInfo();
                     return [
                         4,
-                        getBrowserID(clientInfo)
+                        buildPlayerMetricEvent(licenseKey, context, flags)
                     ];
-                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
-                    });
+                case 2:
+                    heartbeatData = _state.sent();
                     return [
                         4,
-                        postAdTracking(licenseKey, body)
+                        postJson(HEARTBEAT_URL, licenseKey, heartbeatData)
                     ];
-                case 2:
+                case 3:
                     _state.sent();
                     return [
                         3,
-                        4
+                        5
                     ];
-                case 3:
+                case 4:
                     error = _state.sent();
-                    console.error("[StormcloudVideoPlayer] Error sending ad-impression tracking:", error);
+                    console.error("[StormcloudVideoPlayer] Error sending heartbeat:", error);
                     return [
                         3,
-                        4
+                        5
                     ];
-                case 4:
+                case 5:
                     return [
                         2
                     ];
             }
         });
-    })();
+    }).apply(this, arguments);
 }
 // src/utils/polyfills.ts
 function polyfillURLSearchParams() {
@@ -3358,7 +3375,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "load",
             value: function load() {
                 return _async_to_generator(function() {
-                    var _this, error, _this_config_lowLatencyMode, _this_video_play;
+                    var _this, error, _this_config_isLiveStream, _this_config_lowLatencyMode, _this_video_play;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
                             case 0:
@@ -3402,7 +3419,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 this.nativeHlsMode = true;
                                 this.videoSrcProtection = this.config.src;
                                 this.video.src = this.config.src;
-                                this.isLiveStream = (_this_config_lowLatencyMode = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode !== void 0 ? _this_config_lowLatencyMode : false;
+                                this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_this_config_lowLatencyMode = this.config.lowLatencyMode) !== null && _this_config_lowLatencyMode !== void 0 ? _this_config_lowLatencyMode : false;
                                 if (this.config.debugAdTiming) {
                                     console.log("[StormcloudVideoPlayer] Using native HLS playback - VOD mode:", {
                                         isLive: this.isLiveStream,
@@ -3453,19 +3470,28 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                 });
                                 this.hls.on(import_hls2.default.Events.MANIFEST_PARSED, function(_, data) {
                                     return _async_to_generator(function() {
-                                        var _this_config_minSegmentsBeforePlay, _ref, _this_hls_levels, _this_hls, adBehavior, minSegments, _this_video_play;
+                                        var _this_config_isLiveStream, _ref, _this_config_minSegmentsBeforePlay, _this_hls_levels, _this_hls, prerollKey, adBehavior, minSegments, _this_video_play;
                                         return _ts_generator(this, function(_state) {
                                             switch(_state.label){
                                                 case 0:
-                                                    if (this.config.allowNativeHls === false) {
-                                                        this.isLiveStream = true;
-                                                    } else {
-                                                        ;
-                                                        ;
-                                                        this.isLiveStream = (_ref = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : (_this_hls_levels = _this_hls.levels) === null || _this_hls_levels === void 0 ? void 0 : _this_hls_levels.some(function(level) {
-                                                            var _level_details, _level_details1;
-                                                            return (level === null || level === void 0 ? void 0 : (_level_details = level.details) === null || _level_details === void 0 ? void 0 : _level_details.live) === true || (level === null || level === void 0 ? void 0 : (_level_details1 = level.details) === null || _level_details1 === void 0 ? void 0 : _level_details1.type) === "LIVE";
-                                                        })) !== null && _ref !== void 0 ? _ref : false;
+                                                    this.isLiveStream = (_this_config_isLiveStream = this.config.isLiveStream) !== null && _this_config_isLiveStream !== void 0 ? _this_config_isLiveStream : (_ref = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : (_this_hls_levels = _this_hls.levels) === null || _this_hls_levels === void 0 ? void 0 : _this_hls_levels.some(function(level) {
+                                                        var _level_details, _level_details1;
+                                                        return (level === null || level === void 0 ? void 0 : (_level_details = level.details) === null || _level_details === void 0 ? void 0 : _level_details.live) === true || (level === null || level === void 0 ? void 0 : (_level_details1 = level.details) === null || _level_details1 === void 0 ? void 0 : _level_details1.type) === "LIVE";
+                                                    })) !== null && _ref !== void 0 ? _ref : false;
+                                                    if (!this.isLiveStream && this.vmapBreaks.length === 0 && this.apiVastTagUrl) {
+                                                        prerollKey = "synthetic-vod-preroll";
+                                                        if (!this.consumedVmapBreakIds.has(prerollKey)) {
+                                                            this.vmapBreaks = [
+                                                                {
+                                                                    id: prerollKey,
+                                                                    startTimeMs: 0,
+                                                                    vastTagUrl: this.apiVastTagUrl
+                                                                }
+                                                            ];
+                                                            if (this.config.debugAdTiming) {
+                                                                console.log("[StormcloudVideoPlayer] Injected synthetic VOD preroll from apiVastTagUrl");
+                                                            }
+                                                        }
                                                     }
                                                     if (this.config.debugAdTiming) {
                                                         adBehavior = this.shouldContinueLiveStreamDuringAds() ? "live (main video continues muted during ads)" : "vod (main video pauses during ads)";
@@ -3795,8 +3821,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 var _this = this;
                 this.ima.on("all_ads_completed", function() {
                     sendAdImpressionTracking(_this.config.licenseKey, {
-                        adIndex: _this.currentAdIndex
-                    }, _this.config.adPlayerType).catch(function() {});
+                        source: "ima",
+                        adIndex: _this.currentAdIndex,
+                        timestamp: /* @__PURE__ */ new Date().toISOString()
+                    }).catch(function() {});
                     var remaining = _this.getRemainingAdMs();
                     _this.consecutiveFailures = 0;
                     if (_this.config.debugAdTiming) {
@@ -3857,8 +3885,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 });
                 this.ima.on("content_resume", function() {
                     sendAdImpressionTracking(_this.config.licenseKey, {
-                        adIndex: _this.currentAdIndex
-                    }, _this.config.adPlayerType).catch(function() {});
+                        source: "ima",
+                        adIndex: _this.currentAdIndex,
+                        timestamp: /* @__PURE__ */ new Date().toISOString()
+                    }).catch(function() {});
                     if (!_this.video.muted) {
                         _this.video.muted = true;
                         _this.video.volume = 0;
@@ -4492,7 +4522,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                         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() {});
+                        sendAdDetectTracking(this.config.licenseKey, _object_spread({
+                            source: "scte35",
+                            timestamp: /* @__PURE__ */ new Date().toISOString()
+                        }, detectPayload)).catch(function() {});
                     }
                     var hasPrefetchedAds = this.pendingAdBreak && this.pendingAdBreak.vastUrls.length > 0;
                     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;
@@ -5734,7 +5767,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 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() {});
+                sendAdDetectTracking(this.config.licenseKey, _object_spread({
+                    source: "scte35",
+                    timestamp: /* @__PURE__ */ new Date().toISOString()
+                }, 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"));
@@ -6215,9 +6251,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     preloadedController = preloaded.imaController;
                                     usePreloadedAd = true;
                                     sendAdLoadedTracking(this.config.licenseKey, {
-                                        source: "preload",
-                                        vastUrl: firstAdUrl
-                                    }, this.config.adPlayerType).catch(function() {});
+                                        source: "ima",
+                                        vastUrl: firstAdUrl,
+                                        timestamp: /* @__PURE__ */ new Date().toISOString()
+                                    }).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"));
@@ -6307,9 +6344,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 5:
                                 _state.sent();
                                 sendAdLoadedTracking(this.config.licenseKey, {
-                                    source: "ssp",
-                                    vastUrl: firstAdUrl
-                                }, this.config.adPlayerType).catch(function() {});
+                                    source: "ima",
+                                    vastUrl: firstAdUrl,
+                                    timestamp: /* @__PURE__ */ new Date().toISOString()
+                                }).catch(function() {});
                                 if (this.config.debugAdTiming) {
                                     console.log("[CONTINUOUS-FETCH] \u2705 First ad request successful, starting playback");
                                 }
@@ -6705,9 +6743,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                     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() {});
+                                    source: "ima",
+                                    vastUrl: preloaded.vastUrl,
+                                    timestamp: /* @__PURE__ */ new Date().toISOString()
+                                }).catch(function() {});
                                 _state.label = 1;
                             case 1:
                                 _state.trys.push([
@@ -7459,9 +7498,10 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             case 3:
                                 _state.sent();
                                 sendAdLoadedTracking(this.config.licenseKey, {
-                                    source: "ssp",
-                                    vastUrl: vastTagUrl
-                                }, this.config.adPlayerType).catch(function() {});
+                                    source: "ima",
+                                    vastUrl: vastTagUrl,
+                                    timestamp: /* @__PURE__ */ new Date().toISOString()
+                                }).catch(function() {});
                                 this.clearAdRequestWatchdog();
                                 if (this.activeAdRequestToken !== requestToken) {
                                     return [
@@ -7889,7 +7929,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             continue;
                         }
                         var end = breakStartMs + (b.durationMs || 0);
-                        if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + tol)) {
+                        var effectiveTol = breakStartMs === 0 ? Math.max(tol, 3e4) : tol;
+                        if (nowMs >= breakStartMs && (b.durationMs ? nowMs < end : nowMs <= breakStartMs + effectiveTol)) {
                             return b;
                         }
                     }
@@ -8120,6 +8161,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var CRITICAL_PROPS = [
     "src",
     "allowNativeHls",
+    "isLiveStream",
     "licenseKey",
     "vmapUrl",
     "lowLatencyMode",
@@ -8129,12 +8171,13 @@ var CRITICAL_PROPS = [
 var CONTROLS_HIDE_DELAY = 3e3;
 var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
 var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
-    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
+    var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, isLiveStream = props.isLiveStream, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, vastMode = props.vastMode, vastTagUrl = props.vastTagUrl, vmapUrl = props.vmapUrl, adPlayerType = props.adPlayerType, minSegmentsBeforePlay = props.minSegmentsBeforePlay, restVideoAttrs = _object_without_properties(props, [
         "src",
         "autoplay",
         "muted",
         "lowLatencyMode",
         "allowNativeHls",
+        "isLiveStream",
         "driftToleranceMs",
         "immediateManifestAds",
         "debugAdTiming",
@@ -8289,7 +8332,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]);
@@ -8297,6 +8340,7 @@ var StormcloudVideoPlayerComponent = import_react.default.memo(function(props) {
     }, [
         src,
         allowNativeHls,
+        isLiveStream,
         licenseKey,
         vmapUrl,
         lowLatencyMode,
@@ -8331,6 +8375,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;
@@ -9170,161 +9215,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")
+                                    gap: "6px",
+                                    zIndex: 10,
+                                    opacity: controlsVisible ? 1 : 0,
+                                    transition: "opacity 0.35s ease"
                                 },
-                                onMouseEnter: function onMouseEnter() {
-                                    return setShowVolumeSlider(true);
-                                },
-                                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)
-                                })
                             })
                         ]
                     }),