stormcloud-video-player 0.7.9 → 0.7.11

package/lib/index.js

@@ -367,7 +367,7 @@ function _ts_values(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 }
 // src/ui/StormcloudVideoPlayer.tsx
-import React2, { useEffect as useEffect2, useRef as useRef2, useMemo, useCallback as useCallback2 } from "react";
+import React2, { useEffect as useEffect2, useRef as useRef2, useMemo as useMemo2, useCallback as useCallback2 } from "react";
 // src/player/StormcloudVideoPlayer.ts
 import Hls from "hls.js";
 // src/sdk/vastParser.ts
@@ -2802,6 +2802,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         this.isInAdTransition = false;
         this.maxPlaceholderDurationMs = 5e3;
         this.isShowingPlaceholder = false;
+        this.lastAdInsertionPoint = null;
+        this.processedAdInsertionUpdatedAt = null;
         this.totalAdRequestsInBreak = 0;
         this.maxTotalAdRequestsPerBreak = 20;
         this.pendingAdBreak = null;
@@ -2819,6 +2821,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         this.preloadedTokens = [];
         this.debugLogEntries = [];
         this.scteMarkerHistory = [];
+        this.adInsertionDebugHistory = [];
         initializePolyfills();
         var browserOverrides = getBrowserConfigOverrides();
         this.config = _object_spread({}, browserOverrides, config);
@@ -3003,6 +3006,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                                     _state.sent();
                                                     _state.label = 2;
                                                 case 2:
+                                                    if (!this.config.disableAds && this.config.projectId) {
+                                                        this.startAdInsertionPolling();
+                                                    }
                                                     return [
                                                         2
                                                     ];
@@ -3010,78 +3016,11 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                         });
                                     }).call(_this);
                                 });
-                                this.hls.on(Hls.Events.LEVEL_LOADED, function(_evt, data) {
+                                this.hls.on(Hls.Events.LEVEL_LOADED, function() {
                                     if (_this.inAdBreak || _this.pendingAdBreak) {
                                         return;
                                     }
-                                    var details = data === null || data === void 0 ? void 0 : data.details;
-                                    if (!details || !details.fragments || details.fragments.length === 0) {
-                                        return;
-                                    }
-                                    var fragmentsToScan = Math.min(5, details.fragments.length);
-                                    for(var i = 0; i < fragmentsToScan; i++){
-                                        var frag = details.fragments[i];
-                                        var tagList = frag === null || frag === void 0 ? void 0 : frag.tagList;
-                                        if (!Array.isArray(tagList)) continue;
-                                        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-                                        try {
-                                            for(var _iterator = tagList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                                                var entry = _step.value;
-                                                var tag = "";
-                                                var value = "";
-                                                if (Array.isArray(entry)) {
-                                                    var _entry_, _entry_1;
-                                                    tag = String((_entry_ = entry[0]) !== null && _entry_ !== void 0 ? _entry_ : "");
-                                                    value = String((_entry_1 = entry[1]) !== null && _entry_1 !== void 0 ? _entry_1 : "");
-                                                } else if (typeof entry === "string") {
-                                                    var idx = entry.indexOf(":");
-                                                    if (idx >= 0) {
-                                                        tag = entry.substring(0, idx);
-                                                        value = entry.substring(idx + 1);
-                                                    } else {
-                                                        tag = entry;
-                                                    }
-                                                }
-                                                if (!tag) continue;
-                                                if (tag.includes("EXT-X-CUE-OUT") || tag.includes("EXT-X-DATERANGE")) {
-                                                    var attrs = tag.includes("EXT-X-DATERANGE") ? _this.parseAttributeList(value) : {};
-                                                    var hasScteOut = tag.includes("EXT-X-CUE-OUT") || "SCTE35-OUT" in attrs || attrs["SCTE35-OUT"] !== void 0;
-                                                    if (hasScteOut) {
-                                                        var durationSeconds = _this.parseCueOutDuration(value);
-                                                        var marker = _object_spread_props(_object_spread({
-                                                            type: "start"
-                                                        }, durationSeconds !== void 0 ? {
-                                                            durationSeconds: durationSeconds
-                                                        } : {}), {
-                                                            raw: {
-                                                                tag: tag,
-                                                                value: value,
-                                                                earlyDetection: true
-                                                            }
-                                                        });
-                                                        if (_this.config.debugAdTiming) {
-                                                            console.log("[StormcloudVideoPlayer] \uD83C\uDFAF EARLY SCTE-35 DETECTION: Ad break marker found in fragment", i, "- starting pre-fetch (NOT playing yet)");
-                                                        }
-                                                        _this.startAdPrefetch(marker, frag === null || frag === void 0 ? void 0 : frag.sn);
-                                                        return;
-                                                    }
-                                                }
-                                            }
-                                        } catch (err) {
-                                            _didIteratorError = true;
-                                            _iteratorError = err;
-                                        } finally{
-                                            try {
-                                                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                                                    _iterator.return();
-                                                }
-                                            } finally{
-                                                if (_didIteratorError) {
-                                                    throw _iteratorError;
-                                                }
-                                            }
-                                        }
-                                    }
+                                    _this.checkAdInsertionInManifest();
                                 });
                                 this.hls.on(Hls.Events.FRAG_BUFFERED, function(_evt, data) {
                                     return _async_to_generator(function() {
@@ -3143,124 +3082,42 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                                         });
                                     }).call(_this);
                                 });
-                                this.hls.on(Hls.Events.FRAG_PARSING_METADATA, function(_evt, data) {
-                                    var id3Tags = ((data === null || data === void 0 ? void 0 : data.samples) || []).map(function(s) {
-                                        return {
-                                            key: "ID3",
-                                            value: s === null || s === void 0 ? void 0 : s.data,
-                                            ptsSeconds: s === null || s === void 0 ? void 0 : s.pts
-                                        };
-                                    });
-                                    id3Tags.forEach(function(tag) {
-                                        return _this.onId3Tag(tag);
-                                    });
-                                });
                                 this.hls.on(Hls.Events.FRAG_CHANGED, function(_evt, data) {
                                     var frag = data === null || data === void 0 ? void 0 : data.frag;
-                                    var tagList = frag === null || frag === void 0 ? void 0 : frag.tagList;
-                                    if (!Array.isArray(tagList)) return;
-                                    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-                                    try {
-                                        for(var _iterator = tagList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                                            var entry = _step.value;
-                                            var tag = "";
-                                            var value = "";
-                                            if (Array.isArray(entry)) {
-                                                var _entry_, _entry_1;
-                                                tag = String((_entry_ = entry[0]) !== null && _entry_ !== void 0 ? _entry_ : "");
-                                                value = String((_entry_1 = entry[1]) !== null && _entry_1 !== void 0 ? _entry_1 : "");
-                                            } else if (typeof entry === "string") {
-                                                var idx = entry.indexOf(":");
-                                                if (idx >= 0) {
-                                                    tag = entry.substring(0, idx);
-                                                    value = entry.substring(idx + 1);
-                                                } else {
-                                                    tag = entry;
-                                                    value = "";
-                                                }
+                                    if (!frag) return;
+                                    if (_this.lastAdInsertionPoint && !_this.inAdBreak && _this.lastAdInsertionPoint.updated_at !== _this.processedAdInsertionUpdatedAt) {
+                                        var segmentName = _this.lastAdInsertionPoint.segment_ts_name;
+                                        if (_this.fragmentMatchesSegment(frag, segmentName)) {
+                                            var _ref;
+                                            _this.processedAdInsertionUpdatedAt = _this.lastAdInsertionPoint.updated_at;
+                                            var offsetMs = (_this.lastAdInsertionPoint.offset_seconds || 0) * 1e3;
+                                            _this.pushAdInsertionDebug("segment_playing", segmentName, {
+                                                offsetSeconds: _this.lastAdInsertionPoint.offset_seconds,
+                                                detail: "sn=".concat((_ref = frag === null || frag === void 0 ? void 0 : frag.sn) !== null && _ref !== void 0 ? _ref : "?")
+                                            });
+                                            if (_this.config.debugAdTiming) {
+                                                console.log('[StormcloudVideoPlayer] Ad insertion segment "'.concat(segmentName, '" now playing — scheduling ad start in ').concat(offsetMs, "ms"));
                                             }
-                                            if (!tag) continue;
-                                            if (tag.includes("EXT-X-CUE-OUT-CONT")) {
-                                                var prog = _this.parseCueOutCont(value);
-                                                var marker = _object_spread_props(_object_spread({
-                                                    type: "progress"
-                                                }, (prog === null || prog === void 0 ? void 0 : prog.duration) !== void 0 ? {
-                                                    durationSeconds: prog.duration
-                                                } : {}, (prog === null || prog === void 0 ? void 0 : prog.elapsed) !== void 0 ? {
-                                                    ptsSeconds: prog.elapsed
-                                                } : {}), {
-                                                    raw: {
-                                                        tag: tag,
-                                                        value: value
-                                                    }
-                                                });
-                                                _this.onScte35Marker(marker);
-                                            } else if (tag.includes("EXT-X-CUE-OUT")) {
-                                                var durationSeconds = _this.parseCueOutDuration(value);
-                                                var marker1 = _object_spread_props(_object_spread({
-                                                    type: "start"
-                                                }, durationSeconds !== void 0 ? {
-                                                    durationSeconds: durationSeconds
-                                                } : {}), {
-                                                    raw: {
-                                                        tag: tag,
-                                                        value: value
-                                                    }
+                                            _this.pushAdInsertionDebug("ad_scheduled", segmentName, {
+                                                offsetSeconds: _this.lastAdInsertionPoint.offset_seconds,
+                                                detail: "in ".concat(offsetMs, "ms, dur=60s")
+                                            });
+                                            _this.clearAdInsertionOffsetTimer();
+                                            _this.adInsertionOffsetTimerId = window.setTimeout(function() {
+                                                _this.adInsertionOffsetTimerId = void 0;
+                                                if (_this.inAdBreak) return;
+                                                _this.pushAdInsertionDebug("ad_triggered", segmentName, {
+                                                    detail: "ad break started (60s)"
                                                 });
-                                                _this.onScte35Marker(marker1);
-                                            } else if (tag.includes("EXT-X-CUE-IN")) {
-                                                _this.onScte35Marker({
-                                                    type: "end",
+                                                var marker = {
+                                                    type: "start",
+                                                    durationSeconds: 60,
                                                     raw: {
-                                                        tag: tag,
-                                                        value: value
+                                                        apiInsertionPoint: _this.lastAdInsertionPoint
                                                     }
-                                                });
-                                            } else if (tag.includes("EXT-X-DATERANGE")) {
-                                                var _attrs_CLASS;
-                                                var attrs = _this.parseAttributeList(value);
-                                                var hasScteOut = "SCTE35-OUT" in attrs || attrs["SCTE35-OUT"] !== void 0;
-                                                var hasScteIn = "SCTE35-IN" in attrs || attrs["SCTE35-IN"] !== void 0;
-                                                var klass = String((_attrs_CLASS = attrs["CLASS"]) !== null && _attrs_CLASS !== void 0 ? _attrs_CLASS : "");
-                                                var duration = _this.toNumber(attrs["DURATION"]);
-                                                if (hasScteOut || /com\.apple\.hls\.cue/i.test(klass)) {
-                                                    var marker2 = _object_spread_props(_object_spread({
-                                                        type: "start"
-                                                    }, duration !== void 0 ? {
-                                                        durationSeconds: duration
-                                                    } : {}), {
-                                                        raw: {
-                                                            tag: tag,
-                                                            value: value,
-                                                            attrs: attrs
-                                                        }
-                                                    });
-                                                    _this.onScte35Marker(marker2);
-                                                }
-                                                if (hasScteIn) {
-                                                    _this.onScte35Marker({
-                                                        type: "end",
-                                                        raw: {
-                                                            tag: tag,
-                                                            value: value,
-                                                            attrs: attrs
-                                                        }
-                                                    });
-                                                }
-                                            }
-                                        }
-                                    } catch (err) {
-                                        _didIteratorError = true;
-                                        _iteratorError = err;
-                                    } finally{
-                                        try {
-                                            if (!_iteratorNormalCompletion && _iterator.return != null) {
-                                                _iterator.return();
-                                            }
-                                        } finally{
-                                            if (_didIteratorError) {
-                                                throw _iteratorError;
-                                            }
+                                                };
+                                                _this.onScte35Marker(marker);
+                                            }, offsetMs);
                                         }
                                     }
                                 });
@@ -4460,6 +4317,182 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 this.preloadedTokens = [];
             }
         },
+        {
+            key: "startAdInsertionPolling",
+            value: function startAdInsertionPolling() {
+                var _this = this;
+                if (this.adInsertionPollingId != null) return;
+                this.fetchAdInsertionPoint();
+                this.adInsertionPollingId = window.setInterval(function() {
+                    _this.fetchAdInsertionPoint();
+                }, 1e3);
+            }
+        },
+        {
+            key: "stopAdInsertionPolling",
+            value: function stopAdInsertionPolling() {
+                if (this.adInsertionPollingId != null) {
+                    clearInterval(this.adInsertionPollingId);
+                    this.adInsertionPollingId = void 0;
+                }
+            }
+        },
+        {
+            key: "fetchAdInsertionPoint",
+            value: function fetchAdInsertionPoint() {
+                return _async_to_generator(function() {
+                    var _this_lastAdInsertionPoint, resp, data, isNew, unused;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                if (!this.config.projectId) return [
+                                    2
+                                ];
+                                _state.label = 1;
+                            case 1:
+                                _state.trys.push([
+                                    1,
+                                    4,
+                                    ,
+                                    5
+                                ]);
+                                return [
+                                    4,
+                                    fetch("https://adstorm.co/api-adstorm-dev/adstorm/swirl/projects/".concat(encodeURIComponent(this.config.projectId), "/ad-insertion-point"))
+                                ];
+                            case 2:
+                                resp = _state.sent();
+                                if (!resp.ok) return [
+                                    2
+                                ];
+                                return [
+                                    4,
+                                    resp.json()
+                                ];
+                            case 3:
+                                data = _state.sent();
+                                isNew = data.updated_at !== ((_this_lastAdInsertionPoint = this.lastAdInsertionPoint) === null || _this_lastAdInsertionPoint === void 0 ? void 0 : _this_lastAdInsertionPoint.updated_at);
+                                this.lastAdInsertionPoint = data;
+                                if (isNew) {
+                                    this.pushAdInsertionDebug("api_response", data.segment_ts_name, {
+                                        offsetSeconds: data.offset_seconds,
+                                        updatedAt: data.updated_at,
+                                        detail: "project=".concat(data.project_id)
+                                    });
+                                }
+                                if (this.config.debugAdTiming) {
+                                    console.log("[StormcloudVideoPlayer] Ad insertion point API response:", data);
+                                }
+                                return [
+                                    3,
+                                    5
+                                ];
+                            case 4:
+                                unused = _state.sent();
+                                if (this.config.debugAdTiming) {
+                                    console.warn("[StormcloudVideoPlayer] Ad insertion point API fetch failed");
+                                }
+                                return [
+                                    3,
+                                    5
+                                ];
+                            case 5:
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                }).call(this);
+            }
+        },
+        {
+            key: "checkAdInsertionInManifest",
+            value: function checkAdInsertionInManifest() {
+                var _this_hls;
+                if (!this.lastAdInsertionPoint) return;
+                if (this.inAdBreak || this.pendingAdBreak) return;
+                if (this.lastAdInsertionPoint.updated_at === this.processedAdInsertionUpdatedAt) return;
+                var segmentName = this.lastAdInsertionPoint.segment_ts_name;
+                var levels = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : _this_hls.levels;
+                if (!levels) return;
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = levels[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var level = _step.value;
+                        var _level_details;
+                        var fragments = (_level_details = level.details) === null || _level_details === void 0 ? void 0 : _level_details.fragments;
+                        if (!Array.isArray(fragments)) continue;
+                        var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
+                        try {
+                            for(var _iterator1 = fragments[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true){
+                                var frag = _step1.value;
+                                if (this.fragmentMatchesSegment(frag, segmentName)) {
+                                    var _ref;
+                                    this.pushAdInsertionDebug("segment_found", segmentName, {
+                                        detail: "sn=".concat((_ref = frag === null || frag === void 0 ? void 0 : frag.sn) !== null && _ref !== void 0 ? _ref : "?")
+                                    });
+                                    if (this.config.debugAdTiming) {
+                                        console.log('[StormcloudVideoPlayer] Ad insertion segment "'.concat(segmentName, '" found in manifest — starting pre-fetch'));
+                                    }
+                                    var marker = {
+                                        type: "start",
+                                        durationSeconds: 60,
+                                        raw: {
+                                            apiInsertionPoint: this.lastAdInsertionPoint,
+                                            earlyDetection: true
+                                        }
+                                    };
+                                    this.startAdPrefetch(marker, frag === null || frag === void 0 ? void 0 : frag.sn);
+                                    return;
+                                }
+                            }
+                        } catch (err) {
+                            _didIteratorError1 = true;
+                            _iteratorError1 = err;
+                        } finally{
+                            try {
+                                if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                                    _iterator1.return();
+                                }
+                            } finally{
+                                if (_didIteratorError1) {
+                                    throw _iteratorError1;
+                                }
+                            }
+                        }
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+            }
+        },
+        {
+            key: "fragmentMatchesSegment",
+            value: function fragmentMatchesSegment(frag, segmentName) {
+                var url = (frag === null || frag === void 0 ? void 0 : frag.url) || (frag === null || frag === void 0 ? void 0 : frag.relurl) || "";
+                return url.endsWith(segmentName) || url.includes("/" + segmentName);
+            }
+        },
+        {
+            key: "clearAdInsertionOffsetTimer",
+            value: function clearAdInsertionOffsetTimer() {
+                if (this.adInsertionOffsetTimerId != null) {
+                    clearTimeout(this.adInsertionOffsetTimerId);
+                    this.adInsertionOffsetTimerId = void 0;
+                }
+            }
+        },
         {
             key: "startContinuousFetchLoop",
             value: function startContinuousFetchLoop() {
@@ -5381,6 +5414,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 }
                 this.clearAdRequestWatchdog();
                 this.clearAdFailsafeTimer();
+                this.clearAdInsertionOffsetTimer();
                 this.activeAdRequestToken = null;
                 this.isInAdTransition = false;
                 this.stopContinuousFetching();
@@ -5711,6 +5745,32 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 });
             }
         },
+        {
+            key: "pushAdInsertionDebug",
+            value: function pushAdInsertionDebug(event, segmentName, opts) {
+                if (!this.config.debugAdTiming) return;
+                this.adInsertionDebugHistory.push(_object_spread({
+                    timestampMs: Date.now(),
+                    event: event,
+                    segmentName: segmentName
+                }, (opts === null || opts === void 0 ? void 0 : opts.offsetSeconds) !== void 0 ? {
+                    offsetSeconds: opts.offsetSeconds
+                } : {}, (opts === null || opts === void 0 ? void 0 : opts.updatedAt) ? {
+                    updatedAt: opts.updatedAt
+                } : {}, (opts === null || opts === void 0 ? void 0 : opts.detail) ? {
+                    detail: opts.detail
+                } : {}));
+                if (this.adInsertionDebugHistory.length > DEBUG_HISTORY_LIMIT) {
+                    this.adInsertionDebugHistory = this.adInsertionDebugHistory.slice(-DEBUG_HISTORY_LIMIT);
+                }
+            }
+        },
+        {
+            key: "getAdInsertionDebugLog",
+            value: function getAdInsertionDebugLog() {
+                return this.adInsertionDebugHistory.slice();
+            }
+        },
         {
             key: "getDebugLogs",
             value: function getDebugLogs() {
@@ -5977,6 +6037,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             key: "destroy",
             value: function destroy() {
                 var _this_hls, _this_adLayer;
+                this.stopAdInsertionPolling();
+                this.clearAdInsertionOffsetTimer();
                 this.stopContinuousFetching();
                 this.stopFillerBreakTimer();
                 this.clearAdStartTimer();
@@ -6008,6 +6070,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 this.consecutiveFailures = 0;
                 this.debugLogEntries = [];
                 this.scteMarkerHistory = [];
+                this.adInsertionDebugHistory = [];
             }
         }
     ]);
@@ -6016,7 +6079,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
 // src/ui/StormcloudVideoPlayer.tsx
 import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress, FaCog, FaTimes } from "react-icons/fa";
 // src/ui/OverlayRenderer.tsx
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
 // src/utils/overlays.ts
 var OVERLAY_API_BASE = "https://adstorm.co/api-adstorm-dev";
 function timeStringToSeconds(timeStr) {
@@ -7065,10 +7128,13 @@ function hexToRgb(hex) {
     var num = parseInt(clean.length === 3 ? clean.replace(/./g, "$&$&") : clean, 16);
     return "".concat(num >> 16 & 255, ",").concat(num >> 8 & 255, ",").concat(num & 255);
 }
+var FADE_DURATION_MS = 1e3;
 var OverlayRenderer = function OverlayRenderer(param) {
     var overlays = param.overlays, currentTime = param.currentTime, videoRef = param.videoRef, coordinateSpace = param.coordinateSpace;
     var _useState = _sliced_to_array(useState(null), 2), dims = _useState[0], setDims = _useState[1];
     var rafRef = useRef(null);
+    var _useState1 = _sliced_to_array(useState(/* @__PURE__ */ new Map()), 2), fadeMap = _useState1[0], setFadeMap = _useState1[1];
+    var removeTimers = useRef(/* @__PURE__ */ new Map());
     var updateDims = useCallback(function() {
         var video = videoRef.current;
         if (video) {
@@ -7099,10 +7165,181 @@ var OverlayRenderer = function OverlayRenderer(param) {
     }, [
         updateDims
     ]);
-    var activeOverlays = overlays.filter(function(o) {
-        return isOverlayActive(o, currentTime);
-    });
-    if (!dims || activeOverlays.length === 0) return null;
+    var activeOverlays = useMemo(function() {
+        return overlays.filter(function(o) {
+            return isOverlayActive(o, currentTime);
+        });
+    }, [
+        overlays,
+        currentTime
+    ]);
+    useEffect(function() {
+        var activeIds = new Set(activeOverlays.map(function(o) {
+            return o.id;
+        }));
+        setFadeMap(function(prev) {
+            var next = new Map(prev);
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = activeOverlays[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var overlay = _step.value;
+                    if (!next.has(overlay.id)) {
+                        next.set(overlay.id, {
+                            overlay: overlay,
+                            visible: false
+                        });
+                    } else {
+                        var existing = next.get(overlay.id);
+                        next.set(overlay.id, _object_spread_props(_object_spread({}, existing), {
+                            overlay: overlay
+                        }));
+                    }
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+            var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
+            try {
+                var _loop = function() {
+                    var _step_value = _sliced_to_array(_step1.value, 2), id = _step_value[0], state = _step_value[1];
+                    if (!activeIds.has(id) && state.visible) {
+                        next.set(id, _object_spread_props(_object_spread({}, state), {
+                            visible: false
+                        }));
+                        if (!removeTimers.current.has(id)) {
+                            var timer = setTimeout(function() {
+                                setFadeMap(function(m) {
+                                    var updated = new Map(m);
+                                    updated.delete(id);
+                                    return updated;
+                                });
+                                removeTimers.current.delete(id);
+                            }, FADE_DURATION_MS);
+                            removeTimers.current.set(id, timer);
+                        }
+                    } else if (!activeIds.has(id) && !state.visible) {}
+                };
+                for(var _iterator1 = next[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true)_loop();
+            } catch (err) {
+                _didIteratorError1 = true;
+                _iteratorError1 = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+                        _iterator1.return();
+                    }
+                } finally{
+                    if (_didIteratorError1) {
+                        throw _iteratorError1;
+                    }
+                }
+            }
+            return next;
+        });
+    }, [
+        activeOverlays
+    ]);
+    useEffect(function() {
+        var toFadeIn = [];
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            var _loop = function() {
+                var _step_value = _sliced_to_array(_step.value, 2), id = _step_value[0], state = _step_value[1];
+                if (!state.visible) {
+                    var isActive = activeOverlays.some(function(o) {
+                        return o.id === id;
+                    });
+                    if (isActive) toFadeIn.push(id);
+                }
+            };
+            for(var _iterator = fadeMap[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        if (toFadeIn.length === 0) return;
+        var raf = requestAnimationFrame(function() {
+            setFadeMap(function(prev) {
+                var next = new Map(prev);
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = toFadeIn[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var id = _step.value;
+                        var state = next.get(id);
+                        if (state) next.set(id, _object_spread_props(_object_spread({}, state), {
+                            visible: true
+                        }));
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+                return next;
+            });
+        });
+        return function() {
+            return cancelAnimationFrame(raf);
+        };
+    }, [
+        fadeMap,
+        activeOverlays
+    ]);
+    useEffect(function() {
+        return function() {
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = removeTimers.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var timer = _step.value;
+                    clearTimeout(timer);
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+        };
+    }, []);
+    if (!dims || fadeMap.size === 0) return null;
     return /* @__PURE__ */ jsx("div", {
         "aria-hidden": "true",
         style: {
@@ -7115,14 +7352,16 @@ var OverlayRenderer = function OverlayRenderer(param) {
             overflow: "hidden",
             zIndex: 8
         },
-        children: activeOverlays.map(function(overlay) {
+        children: _to_consumable_array(fadeMap.values()).map(function(param) {
+            var overlay = param.overlay, visible = param.visible;
             var scaleX = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.width) ? dims.displayWidth / coordinateSpace.width : dims.scaleX;
             var scaleY = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.height) ? dims.displayHeight / coordinateSpace.height : dims.scaleY;
             var left = overlay.x * scaleX;
             var top = overlay.y * scaleY;
             var width = overlay.width * scaleX;
             var height = overlay.height * scaleY;
-            var opacity = Math.max(0, Math.min(100, overlay.opacity)) / 100;
+            var baseOpacity = Math.max(0, Math.min(100, overlay.opacity)) / 100;
+            var opacity = visible ? baseOpacity : 0;
             var sz = {
                 w: width,
                 h: height
@@ -7135,6 +7374,7 @@ var OverlayRenderer = function OverlayRenderer(param) {
                     width: "".concat(width, "px"),
                     height: "".concat(height, "px"),
                     opacity: opacity,
+                    transition: "opacity ".concat(FADE_DURATION_MS, "ms ease"),
                     zIndex: overlay.z_index,
                     overflow: "hidden"
                 },
@@ -7207,7 +7447,7 @@ var AI_CONTEXT_MIN_POLL_MS = 800;
 var PANEL_BASE_RIGHT_OFFSET = 10;
 var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     var _ref;
-    var _aiLiveContext_context, _aiLiveContext_context_keywords, _aiLiveContext_context1;
+    var _aiLiveContext_context;
     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, minSegmentsBeforePlay = props.minSegmentsBeforePlay, disableAds = props.disableAds, disableFiller = props.disableFiller, swirlProjectId = props.swirlProjectId, restVideoAttrs = _object_without_properties(props, [
         "src",
         "autoplay",
@@ -7299,13 +7539,39 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
             return "--:--:--";
         }
     };
-    var formatDebugRaw = function formatDebugRaw(raw) {
-        if (!raw || (typeof raw === "undefined" ? "undefined" : _type_of(raw)) !== "object") return "";
-        var obj = raw;
-        if (typeof obj.tag === "string") return obj.tag;
-        if (typeof obj.id3 === "string") return "ID3";
-        if (typeof obj.splice_command_type === "number") return "binary splice";
-        return "marker";
+    var formatAdInsertionEvent = function formatAdInsertionEvent(event) {
+        switch(event){
+            case "api_response":
+                return {
+                    label: "API",
+                    color: "#60a5fa"
+                };
+            case "segment_found":
+                return {
+                    label: "FOUND",
+                    color: "#a78bfa"
+                };
+            case "segment_playing":
+                return {
+                    label: "PLAYING",
+                    color: "#fbbf24"
+                };
+            case "ad_scheduled":
+                return {
+                    label: "SCHED",
+                    color: "#fb923c"
+                };
+            case "ad_triggered":
+                return {
+                    label: "TRIGGER",
+                    color: "#34d399"
+                };
+            default:
+                return {
+                    label: event,
+                    color: "rgba(255,255,255,0.68)"
+                };
+        }
     };
     var formatAiRelativeTime = function formatAiRelativeTime(timestamp) {
         var epochMs = Date.parse(timestamp);
@@ -7404,7 +7670,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
     var debugPanelBottomOffset = shouldShowEnhancedControls ? Math.max(74, 92 * responsiveScale) : Math.max(52, 58 * responsiveScale);
     var panelBaseRight = PANEL_BASE_RIGHT_OFFSET * responsiveScale;
     var debugPanelRightOffset = showAiPanel && !shouldStackPanels ? panelBaseRight + analyzerPanelWidth + panelGap : panelBaseRight;
-    var criticalPropsKey = useMemo(function() {
+    var criticalPropsKey = useMemo2(function() {
         return CRITICAL_PROPS.map(function(prop) {
             return "".concat(prop, ":").concat(props[prop]);
         }).join("|");
@@ -7718,7 +7984,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
         var updateDebugData = function updateDebugData() {
             var player = playerRef.current;
             if (!player) return;
-            setDebugMarkers(player.getRecentScteMarkers().slice(-DEBUG_PANEL_MARKER_LIMIT).reverse());
+            setDebugMarkers(player.getAdInsertionDebugLog().slice(-DEBUG_PANEL_MARKER_LIMIT).reverse());
         };
         updateDebugData();
         var interval = window.setInterval(updateDebugData, 500);
@@ -8253,34 +8519,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                                     whiteSpace: "pre-wrap"
                                                 },
                                                 children: (_ref = (_aiLiveContext_context = aiLiveContext.context) === null || _aiLiveContext_context === void 0 ? void 0 : _aiLiveContext_context.context) !== null && _ref !== void 0 ? _ref : aiLiveContext.isLoading ? "Analyzing live stream..." : "Waiting for AI context response."
-                                            }),
-                                            ((_aiLiveContext_context1 = aiLiveContext.context) === null || _aiLiveContext_context1 === void 0 ? void 0 : (_aiLiveContext_context_keywords = _aiLiveContext_context1.keywords) === null || _aiLiveContext_context_keywords === void 0 ? void 0 : _aiLiveContext_context_keywords.length) ? /* @__PURE__ */ jsx2("div", {
-                                                style: {
-                                                    marginTop: "10px",
-                                                    display: "flex",
-                                                    flexWrap: "wrap",
-                                                    gap: "6px"
-                                                },
-                                                children: aiLiveContext.context.keywords.slice(0, 12).map(function(kw) {
-                                                    return /* @__PURE__ */ jsx2("span", {
-                                                        style: {
-                                                            fontSize: "10px",
-                                                            fontWeight: 600,
-                                                            padding: "4px 7px",
-                                                            borderRadius: "999px",
-                                                            background: "rgba(236, 72, 153, 0.2)",
-                                                            border: "1px solid rgba(244, 114, 182, 0.42)",
-                                                            color: "#fce7f3",
-                                                            maxWidth: "100%",
-                                                            overflow: "hidden",
-                                                            textOverflow: "ellipsis",
-                                                            whiteSpace: "nowrap"
-                                                        },
-                                                        title: kw,
-                                                        children: kw
-                                                    }, kw);
-                                                })
-                                            }) : null
+                                            })
                                         ]
                                     })
                                 ]
@@ -8322,7 +8561,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                             fontWeight: 700,
                                             letterSpacing: "0.02em"
                                         },
-                                        children: "Debug Ad Timing"
+                                        children: "Ad Insertion Debug"
                                     }),
                                     /* @__PURE__ */ jsx2("button", {
                                         className: "sc-ctrl-btn",
@@ -8363,7 +8602,7 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                                 color: "rgba(255,255,255,0.68)",
                                                 marginBottom: "8px"
                                             },
-                                            children: "SCTE-35 markers"
+                                            children: "Ad Insertion Points"
                                         }),
                                         /* @__PURE__ */ jsx2("div", {
                                             style: {
@@ -8375,12 +8614,13 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                                     fontSize: "12px",
                                                     color: "rgba(255,255,255,0.55)"
                                                 },
-                                                children: "No markers detected yet."
+                                                children: "No ad insertion events yet."
                                             }) : debugMarkers.map(function(entry, idx) {
+                                                var evt = formatAdInsertionEvent(entry.event);
                                                 return /* @__PURE__ */ jsxs2("div", {
                                                     style: {
                                                         display: "grid",
-                                                        gridTemplateColumns: "56px 52px 1fr",
+                                                        gridTemplateColumns: "56px 54px 1fr",
                                                         gap: "8px",
                                                         alignItems: "center",
                                                         fontFamily: "'SF Mono', 'Cascadia Code', monospace",
@@ -8399,11 +8639,11 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                                         }),
                                                         /* @__PURE__ */ jsx2("span", {
                                                             style: {
-                                                                textTransform: "uppercase",
                                                                 fontWeight: 700,
-                                                                color: entry.type === "start" ? "#34d399" : entry.type === "end" ? "#f87171" : "#fbbf24"
+                                                                color: evt.color,
+                                                                fontSize: "10px"
                                                             },
-                                                            children: entry.type
+                                                            children: evt.label
                                                         }),
                                                         /* @__PURE__ */ jsx2("span", {
                                                             style: {
@@ -8419,11 +8659,9 @@ var StormcloudVideoPlayerComponent = React2.memo(function(props) {
                                                                     whiteSpace: "nowrap"
                                                                 },
                                                                 children: [
-                                                                    entry.durationSeconds != null ? "dur:".concat(entry.durationSeconds.toFixed(2), "s") : "dur:-",
-                                                                    " ",
-                                                                    entry.ptsSeconds != null ? "pts:".concat(entry.ptsSeconds.toFixed(2)) : "pts:-",
-                                                                    " ",
-                                                                    formatDebugRaw(entry.raw)
+                                                                    entry.segmentName,
+                                                                    entry.offsetSeconds != null ? " +".concat(entry.offsetSeconds, "s") : "",
+                                                                    entry.detail ? " (".concat(entry.detail, ")") : ""
                                                                 ]
                                                             })
                                                         })