stormcloud-video-player 0.7.4 → 0.7.5

package/lib/index.cjs

@@ -682,8 +682,8 @@ var UNSUPPORTED_VIDEO_EXTENSIONS = [
 var REQUEST_TIMEOUT_MS = 5e3;
 var REQUEST_MAX_RETRIES = 3;
 var REQUEST_RETRY_BACKOFF_MS = 1500;
-var AD_LAYER_Z_INDEX = "2147483646";
-var COUNTDOWN_Z_INDEX = "2147483647";
+var AD_LAYER_Z_INDEX = "30";
+var COUNTDOWN_Z_INDEX = "31";
 var STALL_TIMEOUT_MS = 8e3;
 function getFileExtension(url) {
     try {
@@ -1387,7 +1387,7 @@ function createAdStormPlayer(contentVideo, options) {
                 container.style.isolation = "isolate";
                 var countdown = document.createElement("div");
                 countdown.style.position = "absolute";
-                countdown.style.right = "12px";
+                countdown.style.left = "12px";
                 countdown.style.top = "12px";
                 countdown.style.padding = "4px 8px";
                 countdown.style.borderRadius = "4px";
@@ -1838,7 +1838,7 @@ function createAdStormPlayer(contentVideo, options) {
                 container.style.isolation = "isolate";
                 var countdown = document.createElement("div");
                 countdown.style.position = "absolute";
-                countdown.style.right = "12px";
+                countdown.style.left = "12px";
                 countdown.style.top = "12px";
                 countdown.style.padding = "4px 8px";
                 countdown.style.borderRadius = "4px";
@@ -2959,6 +2959,7 @@ function supportsFeature(feature) {
     }
 }
 // src/player/StormcloudVideoPlayer.ts
+var DEBUG_HISTORY_LIMIT = 120;
 var StormcloudVideoPlayer = /*#__PURE__*/ function() {
     function StormcloudVideoPlayer(config) {
         _class_call_check(this, StormcloudVideoPlayer);
@@ -3001,6 +3002,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
         this.adRequestMaxRetries = 3;
         this.adRequestRetryBackoffMs = 1500;
         this.preloadedTokens = [];
+        this.debugLogEntries = [];
+        this.scteMarkerHistory = [];
         initializePolyfills();
         var browserOverrides = getBrowserConfigOverrides();
         this.config = _object_spread({}, browserOverrides, config);
@@ -3507,6 +3510,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                             errorMessage += ". Caused by: ".concat(causeMessage);
                         }
                     }
+                    _this.pushDebugLog("error", "ad", errorMessage, _object_spread({}, errorPayload ? {
+                        payload: errorPayload
+                    } : {}));
                     console.error("[AD-ERROR]", errorMessage, errorPayload || "");
                     _this.adLayer.stop().catch(function() {});
                     _this.handleAdFailure();
@@ -3948,6 +3954,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
             value: function onScte35Marker(marker) {
                 var _this = this;
                 if (this.config.disableAds) return;
+                this.pushScteMarker(marker);
+                this.pushDebugLog("info", "scte35", "SCTE-35 marker detected", {
+                    type: marker.type,
+                    ptsSeconds: marker.ptsSeconds,
+                    durationSeconds: marker.durationSeconds,
+                    currentTime: this.video.currentTime
+                });
                 if (this.config.debugAdTiming) {
                     console.log("[StormcloudVideoPlayer] SCTE-35 marker detected:", {
                         type: marker.type,
@@ -5816,6 +5829,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 if (!this.config.debugAdTiming) {
                     return;
                 }
+                this.pushDebugLog("info", "ad-state", event, extra);
                 console.log("[StormcloudVideoPlayer][AdState]", _object_spread({
                     event: event,
                     timestamp: /* @__PURE__ */ new Date().toISOString(),
@@ -5835,6 +5849,59 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 return Math.max(0, this.expectedAdBreakDurationMs - elapsed);
             }
         },
+        {
+            key: "pushScteMarker",
+            value: function pushScteMarker(marker) {
+                if (!this.config.debugAdTiming) return;
+                this.scteMarkerHistory.push({
+                    timestampMs: Date.now(),
+                    marker: marker
+                });
+                if (this.scteMarkerHistory.length > DEBUG_HISTORY_LIMIT) {
+                    this.scteMarkerHistory = this.scteMarkerHistory.slice(-DEBUG_HISTORY_LIMIT);
+                }
+            }
+        },
+        {
+            key: "pushDebugLog",
+            value: function pushDebugLog(level, category, message, details) {
+                if (!this.config.debugAdTiming) return;
+                this.debugLogEntries.push(_object_spread({
+                    timestampMs: Date.now(),
+                    level: level,
+                    category: category,
+                    message: message
+                }, details ? {
+                    details: details
+                } : {}));
+                if (this.debugLogEntries.length > DEBUG_HISTORY_LIMIT) {
+                    this.debugLogEntries = this.debugLogEntries.slice(-DEBUG_HISTORY_LIMIT);
+                }
+            }
+        },
+        {
+            key: "getRecentScteMarkers",
+            value: function getRecentScteMarkers() {
+                return this.scteMarkerHistory.map(function(entry) {
+                    return _object_spread({
+                        timestampMs: entry.timestampMs,
+                        type: entry.marker.type
+                    }, entry.marker.ptsSeconds !== void 0 ? {
+                        ptsSeconds: entry.marker.ptsSeconds
+                    } : {}, entry.marker.durationSeconds !== void 0 ? {
+                        durationSeconds: entry.marker.durationSeconds
+                    } : {}, entry.marker.raw !== void 0 ? {
+                        raw: entry.marker.raw
+                    } : {});
+                });
+            }
+        },
+        {
+            key: "getDebugLogs",
+            value: function getDebugLogs() {
+                return this.debugLogEntries.slice();
+            }
+        },
         {
             key: "toggleMute",
             value: function toggleMute() {
@@ -6080,6 +6147,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
                 (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : _this_hls.destroy();
                 (_this_adLayer = this.adLayer) === null || _this_adLayer === void 0 ? void 0 : _this_adLayer.destroy();
                 this.consecutiveFailures = 0;
+                this.debugLogEntries = [];
+                this.scteMarkerHistory = [];
             }
         }
     ]);
@@ -7193,10 +7262,12 @@ var CRITICAL_PROPS = [
     "allowNativeHls",
     "licenseKey",
     "lowLatencyMode",
-    "driftToleranceMs"
+    "driftToleranceMs",
+    "debugAdTiming"
 ];
 var CONTROLS_HIDE_DELAY = 3e3;
 var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
+var DEBUG_PANEL_MARKER_LIMIT = 12;
 var StormcloudVideoPlayerComponent = import_react2.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, minSegmentsBeforePlay = props.minSegmentsBeforePlay, disableAds = props.disableAds, disableFiller = props.disableFiller, swirlProjectId = props.swirlProjectId, restVideoAttrs = _object_without_properties(props, [
         "src",
@@ -7259,6 +7330,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
     var _import_react2_default_useState18 = _sliced_to_array(import_react2.default.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _import_react2_default_useState18[0], setViewportWidth = _import_react2_default_useState18[1];
     var _import_react2_default_useState19 = _sliced_to_array(import_react2.default.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _import_react2_default_useState19[0], setIsPortrait = _import_react2_default_useState19[1];
     var _import_react2_default_useState20 = _sliced_to_array(import_react2.default.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _import_react2_default_useState20[0], setPlayerAspectRatio = _import_react2_default_useState20[1];
+    var _import_react2_default_useState21 = _sliced_to_array(import_react2.default.useState(false), 2), showDebugPanel = _import_react2_default_useState21[0], setShowDebugPanel = _import_react2_default_useState21[1];
+    var _import_react2_default_useState22 = _sliced_to_array(import_react2.default.useState([]), 2), debugMarkers = _import_react2_default_useState22[0], setDebugMarkers = _import_react2_default_useState22[1];
     var getResponsiveScale = function getResponsiveScale() {
         if (viewportWidth < 480) return 0.7;
         if (viewportWidth < 768) return 0.8;
@@ -7266,6 +7339,28 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
         return 1;
     };
     var responsiveScale = getResponsiveScale();
+    var formatDebugClock = function formatDebugClock(timestampMs) {
+        try {
+            var localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            return new Date(timestampMs).toLocaleTimeString("en-GB", {
+                hour12: false,
+                hour: "2-digit",
+                minute: "2-digit",
+                second: "2-digit",
+                timeZone: localTimeZone
+            });
+        } catch (unused) {
+            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 resetControlsTimer = (0, import_react2.useCallback)(function() {
         if (controlsTimerRef.current) {
             clearTimeout(controlsTimerRef.current);
@@ -7648,6 +7743,26 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
             }
         };
     }, []);
+    (0, import_react2.useEffect)(function() {
+        if (!debugAdTiming) {
+            setShowDebugPanel(false);
+            setDebugMarkers([]);
+            return;
+        }
+        var updateDebugData = function updateDebugData() {
+            var player = playerRef.current;
+            if (!player) return;
+            setDebugMarkers(player.getRecentScteMarkers().slice(-DEBUG_PANEL_MARKER_LIMIT).reverse());
+        };
+        updateDebugData();
+        var interval = window.setInterval(updateDebugData, 500);
+        return function() {
+            return clearInterval(interval);
+        };
+    }, [
+        debugAdTiming,
+        criticalPropsKey
+    ]);
     var handleWrapperMouseMove = (0, import_react2.useCallback)(function() {
         resetControlsTimer();
     }, [
@@ -7666,7 +7781,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", {
-                children: "\n              @keyframes sc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n              }\n              @keyframes sc-loading-glow {\n                0%, 100% { opacity: 0.85; transform: scale(1); }\n                50% { opacity: 1; transform: scale(1.05); }\n              }\n              @keyframes sc-pulse {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0.6; }\n              }\n              @keyframes sc-fade-in {\n                from { opacity: 0; transform: translateY(8px); }\n                to { opacity: 1; transform: translateY(0); }\n              }\n              .sc-wrapper:fullscreen,\n              .sc-wrapper:has(*:fullscreen) {\n                border-radius: 0 !important;\n                box-shadow: none !important;\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n                display: flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n              }\n              .sc-ctrl-btn {\n                background: none;\n                border: none;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 50%;\n                padding: 8px;\n                transition: background 0.15s ease, opacity 0.15s ease;\n                opacity: 0.9;\n              }\n              .sc-ctrl-btn:hover {\n                opacity: 1;\n                background: rgba(255, 255, 255, 0.1);\n              }\n              .sc-ctrl-btn:active {\n                opacity: 0.7;\n              }\n              .sc-controls-bar {\n                transition: opacity 0.35s ease, transform 0.35s ease;\n              }\n              .sc-progress-track:hover .sc-progress-thumb {\n                transform: translate(-50%, -50%) scale(1) !important;\n              }\n              .sc-loading-hidden .sc-loading-indicator {\n                display: none !important;\n              }\n            "
+                children: "\n              @keyframes sc-spin {\n                from { transform: rotate(0deg); }\n                to { transform: rotate(360deg); }\n              }\n              @keyframes sc-loading-glow {\n                0%, 100% { opacity: 0.85; transform: scale(1); }\n                50% { opacity: 1; transform: scale(1.05); }\n              }\n              @keyframes sc-pulse {\n                0%, 100% { opacity: 1; }\n                50% { opacity: 0.6; }\n              }\n              @keyframes sc-fade-in {\n                from { opacity: 0; transform: translateY(8px); }\n                to { opacity: 1; transform: translateY(0); }\n              }\n              .sc-wrapper:fullscreen,\n              .sc-wrapper:has(*:fullscreen) {\n                border-radius: 0 !important;\n                box-shadow: none !important;\n                width: 100vw !important;\n                height: 100vh !important;\n                max-width: 100vw !important;\n                max-height: 100vh !important;\n                position: fixed !important;\n                top: 0 !important;\n                left: 0 !important;\n                z-index: 999999 !important;\n                background: #000 !important;\n                display: flex !important;\n                align-items: center !important;\n                justify-content: center !important;\n              }\n              .sc-ctrl-btn {\n                background: none;\n                border: none;\n                color: #fff;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 50%;\n                padding: 8px;\n                transition: background 0.15s ease, opacity 0.15s ease;\n                opacity: 0.9;\n              }\n              .sc-ctrl-btn:hover {\n                opacity: 1;\n                background: rgba(255, 255, 255, 0.1);\n              }\n              .sc-ctrl-btn:active {\n                opacity: 0.7;\n              }\n              .sc-controls-bar {\n                transition: opacity 0.35s ease, transform 0.35s ease;\n              }\n              .sc-progress-track:hover .sc-progress-thumb {\n                transform: translate(-50%, -50%) scale(1) !important;\n              }\n              .sc-loading-hidden .sc-loading-indicator {\n                display: none !important;\n              }\n              .sc-debug-scroll::-webkit-scrollbar {\n                width: 8px;\n              }\n              .sc-debug-scroll::-webkit-scrollbar-thumb {\n                background: rgba(255, 255, 255, 0.22);\n                border-radius: 4px;\n              }\n              .sc-debug-scroll {\n                overflow-x: hidden !important;\n              }\n            "
             }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                 ref: wrapperRef,
@@ -7908,6 +8023,181 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
                             })
                         ]
                     }),
+                    debugAdTiming && !showLicenseWarning && !showDebugPanel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
+                        className: "sc-ctrl-btn",
+                        onClick: function onClick() {
+                            setShowDebugPanel(function(prev) {
+                                return !prev;
+                            });
+                            resetControlsTimer();
+                        },
+                        style: {
+                            position: "absolute",
+                            top: "".concat(12 * responsiveScale, "px"),
+                            right: "".concat(12 * responsiveScale, "px"),
+                            zIndex: 61,
+                            width: "".concat(34 * responsiveScale, "px"),
+                            height: "".concat(34 * responsiveScale, "px"),
+                            borderRadius: "50%",
+                            background: showDebugPanel ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.55)",
+                            border: "1px solid rgba(255, 255, 255, 0.2)",
+                            backdropFilter: "blur(12px)",
+                            WebkitBackdropFilter: "blur(12px)"
+                        },
+                        title: showDebugPanel ? "Hide debug panel" : "Show debug panel",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaCog, {
+                            size: Math.max(12, 15 * responsiveScale)
+                        })
+                    }),
+                    debugAdTiming && showDebugPanel && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
+                        style: {
+                            position: "absolute",
+                            top: "".concat(12 * responsiveScale, "px"),
+                            right: "".concat(12 * responsiveScale, "px"),
+                            width: "".concat(Math.min(440, Math.max(320, viewportWidth * 0.42)), "px"),
+                            maxWidth: "92vw",
+                            height: isPortrait ? "52vh" : "420px",
+                            maxHeight: "58vh",
+                            zIndex: 60,
+                            background: "rgba(10, 10, 10, 0.74)",
+                            border: "1px solid rgba(255, 255, 255, 0.14)",
+                            borderRadius: "12px",
+                            boxShadow: "0 16px 48px rgba(0, 0, 0, 0.45)",
+                            backdropFilter: "blur(16px)",
+                            WebkitBackdropFilter: "blur(16px)",
+                            color: "rgba(255,255,255,0.94)",
+                            overflow: "hidden"
+                        },
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
+                                style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    padding: "10px 12px",
+                                    borderBottom: "1px solid rgba(255,255,255,0.1)"
+                                },
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+                                        style: {
+                                            fontSize: "13px",
+                                            fontWeight: 700,
+                                            letterSpacing: "0.02em"
+                                        },
+                                        children: "Debug Ad Timing"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
+                                        className: "sc-ctrl-btn",
+                                        onClick: function onClick() {
+                                            return setShowDebugPanel(false);
+                                        },
+                                        style: {
+                                            padding: "4px",
+                                            borderRadius: "6px",
+                                            minWidth: "26px",
+                                            minHeight: "26px"
+                                        },
+                                        title: "Close panel",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaTimes, {
+                                            size: 12
+                                        })
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+                                className: "sc-debug-scroll",
+                                style: {
+                                    padding: "10px 12px 12px",
+                                    overflowY: "auto",
+                                    overflowX: "hidden",
+                                    height: "calc(100% - 46px)",
+                                    display: "grid",
+                                    gap: "12px"
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
+                                    children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+                                            style: {
+                                                fontSize: "11px",
+                                                fontWeight: 700,
+                                                textTransform: "uppercase",
+                                                letterSpacing: "0.08em",
+                                                color: "rgba(255,255,255,0.68)",
+                                                marginBottom: "8px"
+                                            },
+                                            children: "SCTE-35 markers"
+                                        }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+                                            style: {
+                                                display: "grid",
+                                                gap: "6px"
+                                            },
+                                            children: debugMarkers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
+                                                style: {
+                                                    fontSize: "12px",
+                                                    color: "rgba(255,255,255,0.55)"
+                                                },
+                                                children: "No markers detected yet."
+                                            }) : debugMarkers.map(function(entry, idx) {
+                                                return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
+                                                    style: {
+                                                        display: "grid",
+                                                        gridTemplateColumns: "56px 52px 1fr",
+                                                        gap: "8px",
+                                                        alignItems: "center",
+                                                        fontFamily: "'SF Mono', 'Cascadia Code', monospace",
+                                                        fontSize: "11px",
+                                                        background: "rgba(255,255,255,0.05)",
+                                                        border: "1px solid rgba(255,255,255,0.08)",
+                                                        borderRadius: "8px",
+                                                        padding: "6px 8px"
+                                                    },
+                                                    children: [
+                                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {
+                                                            style: {
+                                                                color: "rgba(255,255,255,0.68)"
+                                                            },
+                                                            children: formatDebugClock(entry.timestampMs)
+                                                        }),
+                                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {
+                                                            style: {
+                                                                textTransform: "uppercase",
+                                                                fontWeight: 700,
+                                                                color: entry.type === "start" ? "#34d399" : entry.type === "end" ? "#f87171" : "#fbbf24"
+                                                            },
+                                                            children: entry.type
+                                                        }),
+                                                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {
+                                                            style: {
+                                                                color: "rgba(255,255,255,0.88)"
+                                                            },
+                                                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", {
+                                                                style: {
+                                                                    display: "inline-block",
+                                                                    maxWidth: "100%",
+                                                                    verticalAlign: "bottom",
+                                                                    overflow: "hidden",
+                                                                    textOverflow: "ellipsis",
+                                                                    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)
+                                                                ]
+                                                            })
+                                                        })
+                                                    ]
+                                                }, "".concat(entry.timestampMs, "-").concat(idx));
+                                            })
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
                     shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
                         className: "sc-controls-bar",
                         style: {