stormcloud-video-player 0.7.4 → 0.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/stormcloud-vp.min.js +1 -1
  2. package/lib/index.cjs +311 -6
  3. package/lib/index.cjs.map +1 -1
  4. package/lib/index.d.cts +25 -0
  5. package/lib/index.d.ts +25 -0
  6. package/lib/index.js +312 -7
  7. package/lib/index.js.map +1 -1
  8. package/lib/player/StormcloudVideoPlayer.cjs +73 -4
  9. package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
  10. package/lib/player/StormcloudVideoPlayer.d.cts +20 -1
  11. package/lib/players/HlsPlayer.cjs +73 -4
  12. package/lib/players/HlsPlayer.cjs.map +1 -1
  13. package/lib/players/HlsPlayer.d.cts +1 -1
  14. package/lib/players/index.cjs +73 -4
  15. package/lib/players/index.cjs.map +1 -1
  16. package/lib/sdk/adstormPlayer.cjs +4 -4
  17. package/lib/sdk/adstormPlayer.cjs.map +1 -1
  18. package/lib/sdk/adstormPlayer.d.cts +1 -1
  19. package/lib/{types-vCa10HuQ.d.cts → types-ClqQZM3U.d.cts} +7 -1
  20. package/lib/ui/StormcloudVideoPlayer.cjs +311 -6
  21. package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
  22. package/lib/ui/StormcloudVideoPlayer.d.cts +1 -1
  23. package/lib/utils/tracking.d.cts +1 -1
  24. package/package.json +1 -1
package/lib/ui/StormcloudVideoPlayer.cjs CHANGED
@@ -529,8 +529,8 @@ var UNSUPPORTED_VIDEO_EXTENSIONS = [
529
529
  var REQUEST_TIMEOUT_MS = 5e3;
530
530
  var REQUEST_MAX_RETRIES = 3;
531
531
  var REQUEST_RETRY_BACKOFF_MS = 1500;
532
- var AD_LAYER_Z_INDEX = "2147483646";
533
- var COUNTDOWN_Z_INDEX = "2147483647";
532
+ var AD_LAYER_Z_INDEX = "30";
533
+ var COUNTDOWN_Z_INDEX = "31";
534
534
  var STALL_TIMEOUT_MS = 8e3;
535
535
  function getFileExtension(url) {
536
536
  try {
@@ -1234,7 +1234,7 @@ function createAdStormPlayer(contentVideo, options) {
1234
1234
  container.style.isolation = "isolate";
1235
1235
  var countdown = document.createElement("div");
1236
1236
  countdown.style.position = "absolute";
1237
- countdown.style.right = "12px";
1237
+ countdown.style.left = "12px";
1238
1238
  countdown.style.top = "12px";
1239
1239
  countdown.style.padding = "4px 8px";
1240
1240
  countdown.style.borderRadius = "4px";
@@ -1685,7 +1685,7 @@ function createAdStormPlayer(contentVideo, options) {
1685
1685
  container.style.isolation = "isolate";
1686
1686
  var countdown = document.createElement("div");
1687
1687
  countdown.style.position = "absolute";
1688
- countdown.style.right = "12px";
1688
+ countdown.style.left = "12px";
1689
1689
  countdown.style.top = "12px";
1690
1690
  countdown.style.padding = "4px 8px";
1691
1691
  countdown.style.borderRadius = "4px";
@@ -2781,6 +2781,7 @@ function getBrowserConfigOverrides() {
2781
2781
  return overrides;
2782
2782
  }
2783
2783
  // src/player/StormcloudVideoPlayer.ts
2784
+ var DEBUG_HISTORY_LIMIT = 120;
2784
2785
  var StormcloudVideoPlayer = /*#__PURE__*/ function() {
2785
2786
  function StormcloudVideoPlayer(config) {
2786
2787
  _class_call_check(this, StormcloudVideoPlayer);
@@ -2823,6 +2824,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
2823
2824
  this.adRequestMaxRetries = 3;
2824
2825
  this.adRequestRetryBackoffMs = 1500;
2825
2826
  this.preloadedTokens = [];
2827
+ this.debugLogEntries = [];
2828
+ this.scteMarkerHistory = [];
2826
2829
  initializePolyfills();
2827
2830
  var browserOverrides = getBrowserConfigOverrides();
2828
2831
  this.config = _object_spread({}, browserOverrides, config);
@@ -3329,6 +3332,9 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
3329
3332
  errorMessage += ". Caused by: ".concat(causeMessage);
3330
3333
  }
3331
3334
  }
3335
+ _this.pushDebugLog("error", "ad", errorMessage, _object_spread({}, errorPayload ? {
3336
+ payload: errorPayload
3337
+ } : {}));
3332
3338
  console.error("[AD-ERROR]", errorMessage, errorPayload || "");
3333
3339
  _this.adLayer.stop().catch(function() {});
3334
3340
  _this.handleAdFailure();
@@ -3770,6 +3776,13 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
3770
3776
  value: function onScte35Marker(marker) {
3771
3777
  var _this = this;
3772
3778
  if (this.config.disableAds) return;
3779
+ this.pushScteMarker(marker);
3780
+ this.pushDebugLog("info", "scte35", "SCTE-35 marker detected", {
3781
+ type: marker.type,
3782
+ ptsSeconds: marker.ptsSeconds,
3783
+ durationSeconds: marker.durationSeconds,
3784
+ currentTime: this.video.currentTime
3785
+ });
3773
3786
  if (this.config.debugAdTiming) {
3774
3787
  console.log("[StormcloudVideoPlayer] SCTE-35 marker detected:", {
3775
3788
  type: marker.type,
@@ -5638,6 +5651,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
5638
5651
  if (!this.config.debugAdTiming) {
5639
5652
  return;
5640
5653
  }
5654
+ this.pushDebugLog("info", "ad-state", event, extra);
5641
5655
  console.log("[StormcloudVideoPlayer][AdState]", _object_spread({
5642
5656
  event: event,
5643
5657
  timestamp: /* @__PURE__ */ new Date().toISOString(),
@@ -5657,6 +5671,59 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
5657
5671
  return Math.max(0, this.expectedAdBreakDurationMs - elapsed);
5658
5672
  }
5659
5673
  },
5674
+ {
5675
+ key: "pushScteMarker",
5676
+ value: function pushScteMarker(marker) {
5677
+ if (!this.config.debugAdTiming) return;
5678
+ this.scteMarkerHistory.push({
5679
+ timestampMs: Date.now(),
5680
+ marker: marker
5681
+ });
5682
+ if (this.scteMarkerHistory.length > DEBUG_HISTORY_LIMIT) {
5683
+ this.scteMarkerHistory = this.scteMarkerHistory.slice(-DEBUG_HISTORY_LIMIT);
5684
+ }
5685
+ }
5686
+ },
5687
+ {
5688
+ key: "pushDebugLog",
5689
+ value: function pushDebugLog(level, category, message, details) {
5690
+ if (!this.config.debugAdTiming) return;
5691
+ this.debugLogEntries.push(_object_spread({
5692
+ timestampMs: Date.now(),
5693
+ level: level,
5694
+ category: category,
5695
+ message: message
5696
+ }, details ? {
5697
+ details: details
5698
+ } : {}));
5699
+ if (this.debugLogEntries.length > DEBUG_HISTORY_LIMIT) {
5700
+ this.debugLogEntries = this.debugLogEntries.slice(-DEBUG_HISTORY_LIMIT);
5701
+ }
5702
+ }
5703
+ },
5704
+ {
5705
+ key: "getRecentScteMarkers",
5706
+ value: function getRecentScteMarkers() {
5707
+ return this.scteMarkerHistory.map(function(entry) {
5708
+ return _object_spread({
5709
+ timestampMs: entry.timestampMs,
5710
+ type: entry.marker.type
5711
+ }, entry.marker.ptsSeconds !== void 0 ? {
5712
+ ptsSeconds: entry.marker.ptsSeconds
5713
+ } : {}, entry.marker.durationSeconds !== void 0 ? {
5714
+ durationSeconds: entry.marker.durationSeconds
5715
+ } : {}, entry.marker.raw !== void 0 ? {
5716
+ raw: entry.marker.raw
5717
+ } : {});
5718
+ });
5719
+ }
5720
+ },
5721
+ {
5722
+ key: "getDebugLogs",
5723
+ value: function getDebugLogs() {
5724
+ return this.debugLogEntries.slice();
5725
+ }
5726
+ },
5660
5727
  {
5661
5728
  key: "toggleMute",
5662
5729
  value: function toggleMute() {
@@ -5902,6 +5969,8 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
5902
5969
  (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : _this_hls.destroy();
5903
5970
  (_this_adLayer = this.adLayer) === null || _this_adLayer === void 0 ? void 0 : _this_adLayer.destroy();
5904
5971
  this.consecutiveFailures = 0;
5972
+ this.debugLogEntries = [];
5973
+ this.scteMarkerHistory = [];
5905
5974
  }
5906
5975
  }
5907
5976
  ]);
@@ -7015,10 +7084,12 @@ var CRITICAL_PROPS = [
7015
7084
  "allowNativeHls",
7016
7085
  "licenseKey",
7017
7086
  "lowLatencyMode",
7018
- "driftToleranceMs"
7087
+ "driftToleranceMs",
7088
+ "debugAdTiming"
7019
7089
  ];
7020
7090
  var CONTROLS_HIDE_DELAY = 3e3;
7021
7091
  var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
7092
+ var DEBUG_PANEL_MARKER_LIMIT = 12;
7022
7093
  var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props) {
7023
7094
  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, [
7024
7095
  "src",
@@ -7081,6 +7152,8 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7081
7152
  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];
7082
7153
  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];
7083
7154
  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];
7155
+ 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];
7156
+ 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];
7084
7157
  var getResponsiveScale = function getResponsiveScale() {
7085
7158
  if (viewportWidth < 480) return 0.7;
7086
7159
  if (viewportWidth < 768) return 0.8;
@@ -7088,6 +7161,28 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7088
7161
  return 1;
7089
7162
  };
7090
7163
  var responsiveScale = getResponsiveScale();
7164
+ var formatDebugClock = function formatDebugClock(timestampMs) {
7165
+ try {
7166
+ var localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
7167
+ return new Date(timestampMs).toLocaleTimeString("en-GB", {
7168
+ hour12: false,
7169
+ hour: "2-digit",
7170
+ minute: "2-digit",
7171
+ second: "2-digit",
7172
+ timeZone: localTimeZone
7173
+ });
7174
+ } catch (unused) {
7175
+ return "--:--:--";
7176
+ }
7177
+ };
7178
+ var formatDebugRaw = function formatDebugRaw(raw) {
7179
+ if (!raw || (typeof raw === "undefined" ? "undefined" : _type_of(raw)) !== "object") return "";
7180
+ var obj = raw;
7181
+ if (typeof obj.tag === "string") return obj.tag;
7182
+ if (typeof obj.id3 === "string") return "ID3";
7183
+ if (typeof obj.splice_command_type === "number") return "binary splice";
7184
+ return "marker";
7185
+ };
7091
7186
  var resetControlsTimer = (0, import_react2.useCallback)(function() {
7092
7187
  if (controlsTimerRef.current) {
7093
7188
  clearTimeout(controlsTimerRef.current);
@@ -7165,6 +7260,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7165
7260
  };
7166
7261
  var isHlsStream = (src === null || src === void 0 ? void 0 : src.toLowerCase().includes(".m3u8")) || (src === null || src === void 0 ? void 0 : src.toLowerCase().includes("/hls/"));
7167
7262
  var shouldShowEnhancedControls = showCustomControls && (isHlsStream ? allowNativeHls : true);
7263
+ var debugPanelBottomOffset = shouldShowEnhancedControls ? Math.max(74, 92 * responsiveScale) : Math.max(52, 58 * responsiveScale);
7168
7264
  var criticalPropsKey = (0, import_react2.useMemo)(function() {
7169
7265
  return CRITICAL_PROPS.map(function(prop) {
7170
7266
  return "".concat(prop, ":").concat(props[prop]);
@@ -7470,6 +7566,26 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7470
7566
  }
7471
7567
  };
7472
7568
  }, []);
7569
+ (0, import_react2.useEffect)(function() {
7570
+ if (!debugAdTiming) {
7571
+ setShowDebugPanel(false);
7572
+ setDebugMarkers([]);
7573
+ return;
7574
+ }
7575
+ var updateDebugData = function updateDebugData() {
7576
+ var player = playerRef.current;
7577
+ if (!player) return;
7578
+ setDebugMarkers(player.getRecentScteMarkers().slice(-DEBUG_PANEL_MARKER_LIMIT).reverse());
7579
+ };
7580
+ updateDebugData();
7581
+ var interval = window.setInterval(updateDebugData, 500);
7582
+ return function() {
7583
+ return clearInterval(interval);
7584
+ };
7585
+ }, [
7586
+ debugAdTiming,
7587
+ criticalPropsKey
7588
+ ]);
7473
7589
  var handleWrapperMouseMove = (0, import_react2.useCallback)(function() {
7474
7590
  resetControlsTimer();
7475
7591
  }, [
@@ -7488,7 +7604,7 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7488
7604
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, {
7489
7605
  children: [
7490
7606
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", {
7491
- 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 "
7607
+ 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 "
7492
7608
  }),
7493
7609
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7494
7610
  ref: wrapperRef,
@@ -7730,6 +7846,155 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7730
7846
  })
7731
7847
  ]
7732
7848
  }),
7849
+ debugAdTiming && showDebugPanel && !showLicenseWarning && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7850
+ style: {
7851
+ position: "absolute",
7852
+ right: "".concat(10 * responsiveScale, "px"),
7853
+ bottom: "".concat(debugPanelBottomOffset, "px"),
7854
+ width: "".concat(Math.min(440, Math.max(320, viewportWidth * 0.42)), "px"),
7855
+ maxWidth: "92vw",
7856
+ height: isPortrait ? "52vh" : "420px",
7857
+ maxHeight: "58vh",
7858
+ zIndex: 60,
7859
+ background: "rgba(10, 10, 10, 0.74)",
7860
+ border: "1px solid rgba(255, 255, 255, 0.14)",
7861
+ borderRadius: "12px",
7862
+ boxShadow: "0 16px 48px rgba(0, 0, 0, 0.45)",
7863
+ backdropFilter: "blur(16px)",
7864
+ WebkitBackdropFilter: "blur(16px)",
7865
+ color: "rgba(255,255,255,0.94)",
7866
+ overflow: "hidden"
7867
+ },
7868
+ children: [
7869
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7870
+ style: {
7871
+ display: "flex",
7872
+ alignItems: "center",
7873
+ justifyContent: "space-between",
7874
+ padding: "10px 12px",
7875
+ borderBottom: "1px solid rgba(255,255,255,0.1)"
7876
+ },
7877
+ children: [
7878
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
7879
+ style: {
7880
+ fontSize: "13px",
7881
+ fontWeight: 700,
7882
+ letterSpacing: "0.02em"
7883
+ },
7884
+ children: "Debug Ad Timing"
7885
+ }),
7886
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
7887
+ className: "sc-ctrl-btn",
7888
+ onClick: function onClick() {
7889
+ return setShowDebugPanel(false);
7890
+ },
7891
+ style: {
7892
+ padding: "4px",
7893
+ borderRadius: "6px",
7894
+ minWidth: "26px",
7895
+ minHeight: "26px"
7896
+ },
7897
+ title: "Close panel",
7898
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaTimes, {
7899
+ size: 12
7900
+ })
7901
+ })
7902
+ ]
7903
+ }),
7904
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
7905
+ className: "sc-debug-scroll",
7906
+ style: {
7907
+ padding: "10px 12px 12px",
7908
+ overflowY: "auto",
7909
+ overflowX: "hidden",
7910
+ height: "calc(100% - 46px)",
7911
+ display: "grid",
7912
+ gap: "12px"
7913
+ },
7914
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7915
+ children: [
7916
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
7917
+ style: {
7918
+ fontSize: "11px",
7919
+ fontWeight: 700,
7920
+ textTransform: "uppercase",
7921
+ letterSpacing: "0.08em",
7922
+ color: "rgba(255,255,255,0.68)",
7923
+ marginBottom: "8px"
7924
+ },
7925
+ children: "SCTE-35 markers"
7926
+ }),
7927
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
7928
+ style: {
7929
+ display: "grid",
7930
+ gap: "6px"
7931
+ },
7932
+ children: debugMarkers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {
7933
+ style: {
7934
+ fontSize: "12px",
7935
+ color: "rgba(255,255,255,0.55)"
7936
+ },
7937
+ children: "No markers detected yet."
7938
+ }) : debugMarkers.map(function(entry, idx) {
7939
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7940
+ style: {
7941
+ display: "grid",
7942
+ gridTemplateColumns: "56px 52px 1fr",
7943
+ gap: "8px",
7944
+ alignItems: "center",
7945
+ fontFamily: "'SF Mono', 'Cascadia Code', monospace",
7946
+ fontSize: "11px",
7947
+ background: "rgba(255,255,255,0.05)",
7948
+ border: "1px solid rgba(255,255,255,0.08)",
7949
+ borderRadius: "8px",
7950
+ padding: "6px 8px"
7951
+ },
7952
+ children: [
7953
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {
7954
+ style: {
7955
+ color: "rgba(255,255,255,0.68)"
7956
+ },
7957
+ children: formatDebugClock(entry.timestampMs)
7958
+ }),
7959
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {
7960
+ style: {
7961
+ textTransform: "uppercase",
7962
+ fontWeight: 700,
7963
+ color: entry.type === "start" ? "#34d399" : entry.type === "end" ? "#f87171" : "#fbbf24"
7964
+ },
7965
+ children: entry.type
7966
+ }),
7967
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {
7968
+ style: {
7969
+ color: "rgba(255,255,255,0.88)"
7970
+ },
7971
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", {
7972
+ style: {
7973
+ display: "inline-block",
7974
+ maxWidth: "100%",
7975
+ verticalAlign: "bottom",
7976
+ overflow: "hidden",
7977
+ textOverflow: "ellipsis",
7978
+ whiteSpace: "nowrap"
7979
+ },
7980
+ children: [
7981
+ entry.durationSeconds != null ? "dur:".concat(entry.durationSeconds.toFixed(2), "s") : "dur:-",
7982
+ " ",
7983
+ entry.ptsSeconds != null ? "pts:".concat(entry.ptsSeconds.toFixed(2)) : "pts:-",
7984
+ " ",
7985
+ formatDebugRaw(entry.raw)
7986
+ ]
7987
+ })
7988
+ })
7989
+ ]
7990
+ }, "".concat(entry.timestampMs, "-").concat(idx));
7991
+ })
7992
+ })
7993
+ ]
7994
+ })
7995
+ })
7996
+ ]
7997
+ }),
7733
7998
  shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7734
7999
  className: "sc-controls-bar",
7735
8000
  style: {
@@ -7973,6 +8238,26 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
7973
8238
  gap: "".concat(8 * responsiveScale, "px")
7974
8239
  },
7975
8240
  children: [
8241
+ debugAdTiming && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
8242
+ className: "sc-ctrl-btn",
8243
+ onClick: function onClick() {
8244
+ setShowDebugPanel(function(prev) {
8245
+ return !prev;
8246
+ });
8247
+ resetControlsTimer();
8248
+ },
8249
+ style: {
8250
+ padding: "".concat(8 * responsiveScale, "px"),
8251
+ borderRadius: "50%",
8252
+ minWidth: "".concat(36 * responsiveScale, "px"),
8253
+ minHeight: "".concat(36 * responsiveScale, "px"),
8254
+ background: showDebugPanel ? "rgba(255, 255, 255, 0.16)" : "transparent"
8255
+ },
8256
+ title: showDebugPanel ? "Hide debug panel" : "Show debug panel",
8257
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaCog, {
8258
+ size: Math.max(14, 18 * responsiveScale)
8259
+ })
8260
+ }),
7976
8261
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", {
7977
8262
  style: {
7978
8263
  position: "relative",
@@ -8224,6 +8509,26 @@ var StormcloudVideoPlayerComponent = import_react2.default.memo(function(props)
8224
8509
  })
8225
8510
  ]
8226
8511
  }),
8512
+ debugAdTiming && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
8513
+ className: "sc-ctrl-btn",
8514
+ onClick: function onClick() {
8515
+ setShowDebugPanel(function(prev) {
8516
+ return !prev;
8517
+ });
8518
+ resetControlsTimer();
8519
+ },
8520
+ style: {
8521
+ padding: "".concat(8 * responsiveScale, "px"),
8522
+ borderRadius: "50%",
8523
+ minWidth: "".concat(36 * responsiveScale, "px"),
8524
+ minHeight: "".concat(36 * responsiveScale, "px"),
8525
+ background: showDebugPanel ? "rgba(255, 255, 255, 0.16)" : "rgba(0, 0, 0, 0.6)"
8526
+ },
8527
+ title: showDebugPanel ? "Hide debug panel" : "Show debug panel",
8528
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaCog, {
8529
+ size: Math.max(14, 18 * responsiveScale)
8530
+ })
8531
+ }),
8227
8532
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", {
8228
8533
  className: "sc-ctrl-btn",
8229
8534
  onClick: function onClick() {