@vindral/web-sdk 4.2.0 → 4.2.1

package/ABGzdpO4.js

@@ -0,0 +1,1761 @@
+import { n as e, t } from "./BsfwXDui.js";
+import { a as n, i as r, n as i, r as a, t as o } from "./B7hT-BKr.js";
+import { g as s, h as c, n as l, r as ee, t as u, v as te, y as ne } from "./CF-41rJe.js";
+import { t as d } from "./RxoWWyzp.js";
+//#region \0rolldown/runtime.js
+var f = Object.defineProperty, p = (e, t) => {
+	let n = {};
+	for (var r in e) f(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || f(n, Symbol.toStringTag, { value: "Module" }), n;
+}, m, re = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"m8 2 1.88 1.88\"/>\n  <path d=\"M14.12 3.88 16 2\"/>\n  <path d=\"M9 7.13v-1a3.003 3.003 0 1 1 6 0v1\"/>\n  <path d=\"M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6\"/>\n  <path d=\"M12 20v-9\"/>\n  <path d=\"M6.53 9C4.6 8.8 3 7.1 3 5\"/>\n  <path d=\"M6 13H2\"/>\n  <path d=\"M3 21c0-2.1 1.7-3.9 3.8-4\"/>\n  <path d=\"M20.97 5c0 2.1-1.6 3.8-3.5 4\"/>\n  <path d=\"M22 13h-4\"/>\n  <path d=\"M17.2 17c2.1.1 3.8 1.9 3.8 4\"/>\n</svg>\n", h = document.createElement("template");
+h.innerHTML = `
+  <style>
+    :host {
+      display: var(--debug-button-display);
+      align-items: center;
+      justify-content: center;
+    }
+
+    :host([${s.DEBUG_PANEL_OPEN}]) {
+      background: rgba(255, 255, 255, 0.15);
+    }
+  </style>
+
+  <span id="icon">
+    <slot name="icon">${re}</slot>
+  </span>
+`;
+var ie = class extends ee {
+	constructor() {
+		var e;
+		super(), (e = this.shadowRoot) == null || e.appendChild(h.content.cloneNode(!0));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("aria-label", "Toggle debug panel");
+	}
+	attributeChangedCallback(e, t, n) {
+		t !== n && e === "disabled" && (n === null ? this.enable() : this.disable());
+	}
+	handleClick(e) {
+		this.dispatchEvent(new CustomEvent(c.TOGGLE_DEBUG_PANEL, {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+};
+m = ie, e(ie, "observedAttributes", [...l(m, "observedAttributes", m), s.DEBUG_PANEL_OPEN]);
+//#endregion
+//#region ../../libs/player-next/src/components/DebugPanel.constants.ts
+var ae = "Adaptive around current target", g = [
+	{
+		label: "Ultra-Low",
+		value: 200,
+		description: "Minimal delay, jitter sensitive"
+	},
+	{
+		label: "Low",
+		value: 500,
+		description: "Low delay, may buffer"
+	},
+	{
+		label: "Standard",
+		value: 1500,
+		description: "Balanced delay & stability"
+	},
+	{
+		label: "High",
+		value: 3e3,
+		description: "Maximum stability"
+	}
+], oe = (e) => e <= 350 ? g[0] : e <= 800 ? g[1] : e <= 2e3 ? g[2] : g[3], se = "vindral:debug-panel-layout:v1", _ = [
+	"latency-section",
+	"quality-section",
+	"playback-section",
+	"network-section",
+	"stats-section",
+	"events-section"
+], ce = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M18 6 6 18\"/>\n  <path d=\"m6 6 12 12\"/>\n</svg>\n", le = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"m9 18 6-6-6-6\"/>\n</svg>\n", ue = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"m15 18-6-6 6-6\"/>\n</svg>\n", de = document.createElement("template");
+de.innerHTML = `
+  <style>
+    :host {
+      --debug-overlay-controls-reserved-space: var(
+        --vindral-debug-overlay-controls-reserved-space,
+        calc(
+          var(--button-icon-size) + (2 * var(--button-padding)) + (2 * var(--control-padding)) + var(--padding-2) +
+            env(safe-area-inset-bottom)
+        )
+      );
+      display: none;
+      position: absolute;
+      top: var(--padding-2);
+      right: var(--padding-2);
+      width: min(360px, 95cqw);
+      max-height: calc(100% - var(--padding-2) - var(--debug-overlay-controls-reserved-space));
+      overflow: auto;
+      overscroll-behavior: contain;
+      z-index: 20;
+      box-sizing: border-box;
+      font-family: var(--ui-font);
+      font-size: 12px;
+      color: var(--fg-strong);
+      pointer-events: auto;
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    :host([${s.DEBUG_PANEL_OPEN}]) {
+      display: block;
+    }
+
+    :host([data-density="compact"]) {
+      font-size: 11px;
+    }
+
+    :host([data-density="compact"]) .overlay-header {
+      padding: 4px 6px;
+    }
+
+    :host([data-density="compact"]) .section-content {
+      padding: 0 4px;
+      margin-bottom: 4px;
+    }
+
+    :host([data-density="compact"]) .stat-row {
+      padding: 4px 6px;
+      font-size: 11px;
+    }
+
+    :host([data-density="compact"]) .latency-control,
+    :host([data-density="compact"]) .quality-item,
+    :host([data-density="compact"]) .copy-btn {
+      padding: 6px;
+    }
+
+    :host([data-density="compact"]) .preset-btn {
+      min-height: 48px;
+    }
+
+    @container (max-width: 500px) {
+      :host {
+        top: auto;
+        bottom: var(--debug-overlay-controls-reserved-space);
+        left: 0;
+        right: 0;
+        width: 100%;
+        max-height: calc(100% - var(--debug-overlay-controls-reserved-space));
+        border-radius: 10px 10px 0 0;
+      }
+
+      :host([data-collapsed]) {
+        top: var(--padding-2);
+        bottom: auto;
+        left: auto;
+        right: var(--padding-2);
+        width: min(360px, 95cqw);
+        border-radius: 4px;
+      }
+
+      .close-btn,
+      .latency-btn {
+        min-width: 36px;
+        min-height: 36px;
+      }
+
+      .mode-btn,
+      .preset-btn,
+      .copy-btn,
+      .quality-item,
+      .section-tab {
+        min-height: 36px;
+      }
+
+      .section-tab .label-full {
+        display: none;
+      }
+
+      .section-tab .label-short {
+        display: inline;
+      }
+
+      .section-badge {
+        display: none;
+      }
+    }
+
+    :host::-webkit-scrollbar {
+      width: 5px;
+      padding-right: 5px;
+    }
+
+    :host::-webkit-scrollbar-thumb {
+      background-color: var(--fg-extra-subtle);
+      border-radius: 10px;
+      border: 0;
+    }
+
+    :host::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background-color: transparent;
+    }
+
+    .close-btn {
+      min-width: 28px;
+      min-height: 28px;
+      border: none;
+      background: transparent;
+      color: var(--fg-subtle);
+      cursor: pointer;
+      padding: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+    }
+
+    .close-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: var(--fg-strong);
+    }
+
+    .overlay-header {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap: var(--padding-1);
+      margin-bottom: var(--padding-1);
+      background: rgba(0, 0, 0, 0.9);
+      border-radius: 4px;
+      padding: var(--padding-1);
+    }
+
+    .overlay-header .close-btn {
+      margin-left: auto;
+    }
+
+    .scroll-tabs-btn {
+      display: none;
+      min-width: 20px;
+      min-height: 20px;
+      border: none;
+      background: transparent;
+      color: var(--fg-extra-subtle);
+      cursor: pointer;
+      padding: 0;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      flex-shrink: 0;
+    }
+
+    .scroll-tabs-btn[data-visible="true"] {
+      display: flex;
+    }
+
+    .scroll-tabs-btn:hover {
+      color: var(--fg-strong);
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .section-tabs-wrap {
+      position: relative;
+      min-width: 0;
+      flex: 1;
+    }
+
+    .section-tabs-wrap[data-can-scroll-right]::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 24px;
+      height: 100%;
+      pointer-events: none;
+      background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+    }
+
+    .section-tabs {
+      display: flex;
+      align-items: center;
+      gap: var(--padding-1);
+      overflow-x: auto;
+      scrollbar-width: none;
+      padding-right: 12px;
+    }
+
+    .section-tabs::-webkit-scrollbar {
+      display: none;
+    }
+
+    .section-tab {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border: none;
+      border-radius: 4px;
+      background: rgba(0, 0, 0, 0.9);
+      color: var(--fg-subtle);
+      padding: var(--padding-1) var(--padding-2);
+      font-size: 10px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      cursor: pointer;
+      white-space: nowrap;
+      min-height: 28px;
+      flex: 0 0 auto;
+    }
+
+    .section-label {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .section-tab .label-full {
+      display: inline;
+    }
+
+    .section-tab .label-short {
+      display: none;
+    }
+
+    .section-badge {
+      font-size: 9px;
+      font-weight: 500;
+      letter-spacing: 0;
+      text-transform: none;
+      font-variant-numeric: tabular-nums;
+      color: var(--fg-extra-subtle);
+      max-width: 88px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .section-tab[data-active="true"] .section-badge {
+      color: rgba(255, 255, 255, 0.9);
+    }
+
+    .section-tab:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: var(--fg-strong);
+    }
+
+    .section-tab[data-active="true"] {
+      background: #549ce0;
+      color: #ffffff;
+    }
+
+    .section-tab:focus-visible,
+    .quality-item:focus-visible,
+    .mode-btn:focus-visible,
+    .preset-btn:focus-visible,
+    .latency-btn:focus-visible,
+    .copy-btn:focus-visible,
+    .events-btn:focus-visible,
+    .close-btn:focus-visible {
+      outline: 2px solid var(--fg-strong);
+      outline-offset: -2px;
+    }
+
+    .section {
+      margin-bottom: var(--padding-1);
+      background: rgba(0, 0, 0, 0.9);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .section:last-child {
+      margin-bottom: 0;
+    }
+
+    .section-content {
+      padding: 0 var(--padding-1);
+      margin-bottom: var(--padding-1);
+    }
+
+    .section-content[hidden] {
+      display: none;
+    }
+
+    .stat-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: var(--padding-2);
+      padding: var(--padding-1) var(--padding-2);
+      font-size: 12px;
+    }
+
+    .stat-label {
+      color: var(--fg-subtle);
+    }
+
+    .stat-value {
+      font-weight: 500;
+      font-variant-numeric: tabular-nums;
+      color: var(--fg-strong);
+      text-align: right;
+      max-width: 64%;
+      overflow-wrap: anywhere;
+    }
+
+    .stat-value[data-status="good"] {
+      color: #549ce0;
+    }
+
+    .stat-value[data-status="warning"] {
+      color: #ff9800;
+    }
+
+    .stat-value[data-status="error"] {
+      color: #f44336;
+    }
+
+    .latency-control {
+      display: flex;
+      align-items: center;
+      gap: var(--padding-2);
+      padding: var(--padding-2);
+      border-radius: 4px;
+    }
+
+    .latency-btn {
+      min-width: 32px;
+      min-height: 32px;
+      border: none;
+      border-radius: 4px;
+      background: rgba(255, 255, 255, 0.15);
+      color: var(--fg-strong);
+      font-size: 16px;
+      font-weight: bold;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .latency-btn:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .latency-btn:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    .latency-value-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .latency-label {
+      font-size: 9px;
+      text-transform: uppercase;
+      opacity: 0.6;
+      letter-spacing: 0.05em;
+    }
+
+    .latency-value {
+      font-variant-numeric: tabular-nums;
+      font-weight: 600;
+      font-size: 16px;
+    }
+
+    .preset-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--padding-1);
+      margin-top: var(--padding-2);
+    }
+
+    .preset-btn {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 2px;
+      min-height: 54px;
+      padding: var(--padding-1) var(--padding-2);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      font-size: 11px;
+      text-align: left;
+      cursor: pointer;
+      background: rgba(0, 0, 0, 0.9);
+      color: var(--fg-strong);
+      transition: background 0.15s;
+    }
+
+    .preset-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    .preset-btn[data-active="true"] {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: var(--fg-extra-subtle);
+    }
+
+    .preset-title {
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 1.2;
+    }
+
+    .preset-subtitle {
+      font-size: 10px;
+      opacity: 0.65;
+      line-height: 1.2;
+    }
+
+    .preset-value {
+      font-size: 10px;
+      opacity: 0.55;
+      font-variant-numeric: tabular-nums;
+      margin-top: 2px;
+    }
+
+    .preset-btn.dynamic-btn {
+      min-height: 48px;
+      grid-column: 1 / -1;
+    }
+
+    .preset-btn.dynamic-btn .preset-title {
+      text-transform: uppercase;
+      font-size: 10px;
+      letter-spacing: 0.05em;
+      opacity: 0.75;
+    }
+
+    .preset-btn.dynamic-btn .preset-value {
+      opacity: 0.65;
+      margin-top: 0;
+    }
+
+    .preset-btn.dynamic-btn[data-active="true"] {
+      border-style: dashed;
+    }
+
+    .mode-toggle {
+      display: flex;
+      gap: var(--padding-1);
+      margin-bottom: var(--padding-2);
+      margin-top: var(--padding-2);
+    }
+
+    .mode-btn {
+      flex: 1;
+      padding: var(--padding-1) var(--padding-2);
+      border: none;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 500;
+      cursor: pointer;
+      background: rgba(0, 0, 0, 0.9);
+      color: var(--fg-strong);
+      transition: background 0.15s;
+    }
+
+    .mode-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    .mode-btn[data-active="true"] {
+      background: #549ce0;
+      color: #ffffff;
+    }
+
+    .mode-btn:disabled {
+      opacity: 0.35;
+      cursor: not-allowed;
+    }
+
+    .mode-btn:disabled:hover {
+      background: rgba(0, 0, 0, 0.9);
+    }
+
+    .setting-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--padding-2);
+      padding: 0 var(--padding-1);
+    }
+
+    .setting-row .mode-btn {
+      flex: 0 0 auto;
+      min-width: 40px;
+    }
+
+    .setting-row:has(.mode-btn:disabled) .stat-label {
+      opacity: 0.35;
+    }
+
+    .quality-status-text {
+      font-size: 10px;
+      color: var(--fg-subtle);
+      margin-bottom: var(--padding-2);
+      padding: 0 var(--padding-1);
+      font-style: italic;
+    }
+
+    .quality-menu {
+      display: grid;
+      gap: var(--padding-1);
+    }
+
+    .quality-item {
+      display: flex;
+      align-items: center;
+      gap: var(--padding-2);
+      padding: var(--padding-2);
+      width: 100%;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      text-align: left;
+      cursor: pointer;
+      font-size: 13px;
+      background: transparent;
+      color: var(--fg-strong);
+    }
+
+    .quality-item:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    .quality-item[data-selected="true"] {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid var(--fg-extra-subtle);
+    }
+
+    .quality-item[data-capped="true"] {
+      opacity: 0.5;
+    }
+
+    .quality-current-label {
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #549ce0;
+      margin-left: auto;
+      display: none;
+    }
+
+    .quality-item[data-playing="true"] .quality-current-label {
+      display: block;
+    }
+
+    .quality-item-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .quality-item-title {
+      font-weight: 500;
+    }
+
+    .quality-item-subtitle {
+      font-size: 10px;
+      opacity: 0.6;
+    }
+
+    .copy-btn {
+      width: 100%;
+      padding: var(--padding-2);
+      border: none;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+      background: rgba(0, 0, 0, 0.9);
+      color: var(--fg-strong);
+      transition: background 0.15s;
+      margin-top: var(--padding-2);
+    }
+
+    .copy-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    .copy-btn[data-copied="true"] {
+      background: #549ce0;
+      color: white;
+    }
+
+    .events-toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--padding-1);
+      margin-top: var(--padding-2);
+      margin-bottom: var(--padding-1);
+    }
+
+    .events-count {
+      margin-right: auto;
+      font-size: 10px;
+      color: var(--fg-subtle);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      white-space: nowrap;
+    }
+
+    .events-btn {
+      border: none;
+      border-radius: 4px;
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--fg-strong);
+      cursor: pointer;
+      padding: 4px 8px;
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .events-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    .events-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--padding-1);
+      max-height: 220px;
+      overflow: auto;
+      padding-right: 2px;
+    }
+
+    .events-list::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    .events-list::-webkit-scrollbar-thumb {
+      background-color: var(--fg-extra-subtle);
+      border-radius: 10px;
+    }
+
+    .events-list::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    .events-empty {
+      color: var(--fg-subtle);
+      font-size: 11px;
+      padding: var(--padding-2) 0;
+    }
+
+    .event-row {
+      display: grid;
+      grid-template-columns: auto auto 1fr;
+      align-items: start;
+      gap: var(--padding-1);
+      background: rgba(255, 255, 255, 0.04);
+      border-radius: 4px;
+      padding: 4px 6px;
+      font-size: 11px;
+    }
+
+    .event-time {
+      color: var(--fg-extra-subtle);
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+      font-size: 10px;
+    }
+
+    .event-category {
+      color: var(--fg-subtle);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      font-size: 10px;
+      white-space: nowrap;
+    }
+
+    .event-message {
+      color: var(--fg-strong);
+      overflow-wrap: anywhere;
+    }
+
+    .event-row[data-level="warn"] .event-message {
+      color: #ffb300;
+    }
+
+    .event-row[data-level="error"] .event-message {
+      color: #ef5350;
+    }
+  </style>
+
+  <div class="overlay-header" role="toolbar" aria-label="Debug sections">
+    <div class="section-tabs-wrap">
+      <div class="section-tabs">
+        <button class="section-tab" data-target="latency-section" type="button" aria-pressed="true" data-active="true" aria-label="Latency section" title="Latency">
+          <span class="label-full">Latency</span>
+          <span class="label-short">Sync</span>
+        </button>
+        <button class="section-tab" data-target="quality-section" type="button" aria-pressed="false" aria-label="Quality section" title="Quality">
+          <span class="label-full">Quality</span>
+          <span class="label-short">Qual</span>
+        </button>
+        <button class="section-tab" data-target="playback-section" type="button" aria-pressed="false" aria-label="Playback section" title="Playback">
+          <span class="label-full">Playback</span>
+          <span class="label-short">Play</span>
+        </button>
+        <button class="section-tab" data-target="network-section" type="button" aria-pressed="false" aria-label="Network section" title="Network">
+          <span class="label-full">Network</span>
+          <span class="label-short">Net</span>
+        </button>
+        <button class="section-tab" data-target="stats-section" type="button" aria-pressed="false" aria-label="Statistics section" title="Statistics">
+          <span class="label-full">Statistics</span>
+          <span class="label-short">Stats</span>
+        </button>
+        <button class="section-tab" data-target="events-section" type="button" aria-pressed="false" aria-label="Events section" title="Events">
+          <span class="label-full">Events</span>
+          <span class="label-short">Log</span>
+        </button>
+      </div>
+    </div>
+    <button class="scroll-tabs-btn" type="button" aria-label="Scroll tabs">${le}</button>
+    <button class="close-btn" type="button" aria-label="Close debug panel">${ce}</button>
+  </div>
+
+  <!-- Latency Section -->
+  <div class="section" id="latency-section">
+    <div class="section-content" id="latency-content">
+      <div class="stat-row">
+        <span class="stat-label">Current Drift</span>
+        <span class="stat-value" id="current-drift">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Playback Latency</span>
+        <span class="stat-value" id="playback-latency">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Average Drift</span>
+        <span class="stat-value" id="average-drift">-</span>
+      </div>
+      <div class="latency-control">
+        <button class="latency-btn" id="latency-strip-decrease" type="button" aria-label="Decrease target buffer time">-</button>
+        <div class="latency-value-container">
+          <span class="latency-label">Target</span>
+          <span class="latency-value" id="latency-strip-target">1500ms</span>
+        </div>
+        <button class="latency-btn" id="latency-strip-increase" type="button" aria-label="Increase target buffer time">+</button>
+      </div>
+      <div class="preset-grid" id="latency-presets"></div>
+    </div>
+  </div>
+
+  <!-- Quality Section -->
+  <div class="section" id="quality-section" hidden>
+    <div class="section-content" id="quality-content">
+      <div class="mode-toggle">
+        <button class="mode-btn" id="abr-auto-btn" type="button" data-active="true">Auto (ABR)</button>
+        <button class="mode-btn" id="abr-fixed-btn" type="button">Fixed</button>
+      </div>
+      <div class="setting-row">
+        <span class="stat-label">Size cap</span>
+        <button class="mode-btn" id="size-cap-toggle" type="button" data-active="true">On</button>
+      </div>
+      <div class="quality-status-text" id="quality-status-text">Select maximum allowed quality</div>
+      <div class="quality-menu" id="quality-menu"></div>
+    </div>
+  </div>
+
+  <!-- Playback Section -->
+  <div class="section" id="playback-section" hidden>
+    <div class="section-content" id="playback-content">
+      <div class="stat-row">
+        <span class="stat-label">Buffer Fullness</span>
+        <span class="stat-value" id="playback-buffer-fullness">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Last Buffer Event</span>
+        <span class="stat-value" id="playback-last-buffer-event">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Buffering Events</span>
+        <span class="stat-value" id="playback-buffering-events">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Buffering Ratio</span>
+        <span class="stat-value" id="playback-buffering-ratio">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Time Spent Buffering</span>
+        <span class="stat-value" id="playback-time-spent-buffering">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Rendition Changes</span>
+        <span class="stat-value" id="playback-rendition-changes">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Seek Adj/min</span>
+        <span class="stat-value" id="playback-seek-adjustments-rate">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Timeshift Adj/min</span>
+        <span class="stat-value" id="playback-timeshift-adjustments-rate">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Current Rendition</span>
+        <span class="stat-value" id="playback-current-rendition">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Codecs</span>
+        <span class="stat-value" id="playback-codecs">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Frame Drops</span>
+        <span class="stat-value" id="playback-frame-drops">-</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Network Section -->
+  <div class="section" id="network-section" hidden>
+    <div class="section-content" id="network-content">
+      <div class="stat-row">
+        <span class="stat-label">Edge URL</span>
+        <span class="stat-value" id="network-edge-url">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Protocol</span>
+        <span class="stat-value" id="network-protocol">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">RTT</span>
+        <span class="stat-value" id="network-rtt">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Estimated Bandwidth</span>
+        <span class="stat-value" id="network-estimated-bandwidth">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Video Bit Rate</span>
+        <span class="stat-value" id="network-video-bitrate">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Audio Bit Rate</span>
+        <span class="stat-value" id="network-audio-bitrate">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Average Bit Rate</span>
+        <span class="stat-value" id="network-bitrate">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Audio Jitter</span>
+        <span class="stat-value" id="network-audio-jitter">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Video Jitter</span>
+        <span class="stat-value" id="network-video-jitter">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Connect Success</span>
+        <span class="stat-value" id="network-connect-success">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Reconnects/h</span>
+        <span class="stat-value" id="network-reconnects-per-hour">-</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Statistics Section -->
+  <div class="section" id="stats-section" hidden>
+    <div class="section-content" id="stats-content">
+      <div class="stat-row">
+        <span class="stat-label">SDK Version</span>
+        <span class="stat-value" id="sdk-version">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Session ID</span>
+        <span class="stat-value" id="session-id">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Client ID</span>
+        <span class="stat-value" id="client-id">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Channel ID</span>
+        <span class="stat-value" id="channel-id">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Channel Group ID</span>
+        <span class="stat-value" id="channel-group-id">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Uptime</span>
+        <span class="stat-value" id="uptime">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Time to First Frame</span>
+        <span class="stat-value" id="ttff">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Connection State</span>
+        <span class="stat-value" id="connection-state">-</span>
+      </div>
+      <div class="stat-row">
+        <span class="stat-label">Playback State</span>
+        <span class="stat-value" id="playback-state">-</span>
+      </div>
+      <button class="copy-btn" id="copy-stats" type="button">Copy Stats to Clipboard</button>
+    </div>
+  </div>
+
+  <!-- Events Section -->
+  <div class="section" id="events-section" hidden>
+    <div class="section-content" id="events-content">
+      <div class="events-toolbar">
+        <span class="events-count" id="events-count">0 events</span>
+        <button class="events-btn" id="events-clear" type="button">Clear</button>
+        <button class="events-btn" id="copy-events" type="button">Copy</button>
+      </div>
+      <div class="events-list" id="events-list" role="log" aria-live="polite" aria-relevant="additions text"></div>
+    </div>
+  </div>
+`;
+var fe = de, v = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakSet(), pe = /* @__PURE__ */ new WeakMap(), me = /* @__PURE__ */ new WeakMap(), he = /* @__PURE__ */ new WeakMap(), ge = /* @__PURE__ */ new WeakMap(), _e = /* @__PURE__ */ new WeakMap(), ve = /* @__PURE__ */ new WeakMap(), ye = /* @__PURE__ */ new WeakMap(), be = class extends HTMLElement {
+	constructor() {
+		super(), o(this, K), n(this, v, null), n(this, y, []), n(this, b, 2 ** 53 - 1), n(this, x, !0), n(this, S, !0), n(this, C, null), n(this, w, 1500), n(this, T, 0), n(this, E, null), n(this, D, !1), n(this, O, []), n(this, k, 0), n(this, A, !1), n(this, j, null), n(this, M, /* @__PURE__ */ new Map()), n(this, N, []), n(this, P, []), n(this, F, []), n(this, I, []), n(this, L, null), n(this, R, null), n(this, z, null), n(this, B, null), n(this, V, null), n(this, H, !1), n(this, U, null), n(this, W, null), n(this, G, null), n(this, pe, (e) => {
+			let t = e === "disconnected" ? "warn" : "info";
+			r(K, this, $).call(this, "Connection", `State: ${e}`, t);
+		}), n(this, me, (e) => {
+			r(K, this, $).call(this, "Playback", `State: ${e}`);
+		}), n(this, he, (e) => {
+			r(K, this, $).call(this, "Buffer", `${e}`, "warn");
+		}), n(this, ge, (e) => {
+			let t = e.isFatal() ? "Fatal" : "Non-fatal";
+			r(K, this, $).call(this, "Error", `${t}: ${e.message} (${e.code()})`, e.isFatal() ? "error" : "warn");
+		}), n(this, _e, (e) => {
+			let t = e.video;
+			if (t != null && t.width && t.height) {
+				let e = r(K, this, et).call(this, t.frameRate), n = e ? ` @ ${e}fps` : "";
+				r(K, this, $).call(this, "Quality", `Rendition: ${t.width}x${t.height}${n}`);
+			}
+		}), n(this, ve, (e) => {
+			r(K, this, $).call(this, "Connection", `Channel ${e ? "live" : "offline"}`);
+		}), n(this, ye, (e) => {
+			let { key: t, ctrlKey: n, altKey: r, metaKey: i } = e;
+			n || r || i || t === "Escape" && (e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent(c.TOGGLE_DEBUG_PANEL, {
+				bubbles: !0,
+				composed: !0
+			})));
+		}), this.attachShadow({ mode: "open" }).appendChild(fe.content.cloneNode(!0));
+	}
+	connectedCallback() {
+		var e;
+		a(v, this, this.closest("vindral-controller")), (e = i(v, this)) == null || e.connectListener(this), this.tabIndex = -1, r(K, this, we).call(this), r(K, this, Te).call(this), r(K, this, Ee).call(this), r(K, this, Re).call(this), r(K, this, Ye).call(this), r(K, this, Ot).call(this), r(K, this, St).call(this), r(K, this, qe).call(this), this.setAttribute("data-density", "compact"), r(K, this, je).call(this), r(K, this, Ie).call(this), r(K, this, Le).call(this), r(K, this, Et).call(this), r(K, this, ot).call(this), this.addEventListener("keydown", i(ye, this)), this.addEventListener("dblclick", (e) => e.stopPropagation());
+	}
+	disconnectedCallback() {
+		var e;
+		(e = i(v, this)) == null || e.disconnectListener(this), this.removeEventListener("keydown", i(ye, this)), r(K, this, it).call(this), r(K, this, st).call(this), r(K, this, Fe).call(this), i(M, this).clear();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case s.DEBUG_PANEL_OPEN:
+				n === null ? r(K, this, it).call(this) : (r(K, this, rt).call(this), this.focus({ preventScroll: !0 }));
+				break;
+			case s.TARGET_BUFFER_TIME:
+				if (n) {
+					let e = parseInt(n, 10);
+					Number.isNaN(e) || (e !== i(w, this) && r(K, this, $).call(this, "Latency", `Target buffer set to ${e}ms`), a(w, this, e), r(K, this, Z).call(this));
+				}
+				break;
+			case s.DRIFT:
+				if (n) {
+					let e = parseFloat(n);
+					Number.isNaN(e) || (a(T, this, e), r(K, this, Je).call(this));
+				}
+				break;
+			case s.RENDITION_LEVELS:
+				if (n) try {
+					let e = JSON.parse(n);
+					Array.isArray(e) && (a(y, this, e), r(K, this, $e).call(this));
+				} catch (e) {}
+				break;
+			case s.MAX_VIDEO_BITRATE:
+				a(b, this, n ? parseInt(n, 10) : 2 ** 53 - 1), Number.isNaN(i(b, this)) && a(b, this, 2 ** 53 - 1), r(K, this, tt).call(this);
+				break;
+			case s.ABR_ENABLED:
+				a(x, this, n !== null && n !== "false"), r(K, this, Ze).call(this), r(K, this, Qe).call(this);
+				break;
+			case s.SIZE_BASED_RESOLUTION_CAP_ENABLED:
+				a(S, this, n !== null && n !== "false"), r(K, this, Qe).call(this);
+				break;
+			case s.RENDITION_LEVEL:
+				if (n) try {
+					var o;
+					let e = JSON.parse(n), t = i(C, this);
+					if (a(C, this, e), r(K, this, tt).call(this), t && (o = e.video) != null && o.width && e.video.height) {
+						let n = t.video ? `${t.video.width}x${t.video.height}` : "?", i = `${e.video.width}x${e.video.height}`;
+						n !== i && r(K, this, $).call(this, "Quality", `Switched: ${n} → ${i}`);
+					}
+				} catch (e) {}
+				break;
+		}
+	}
+};
+function q(e) {
+	if (!this.shadowRoot) return null;
+	if (i(M, this).has(e)) return i(M, this).get(e);
+	let t = this.shadowRoot.querySelector(e);
+	return i(M, this).set(e, t), t;
+}
+function J(e, t) {
+	!e || e.textContent === t || (e.textContent = t);
+}
+function xe() {
+	var e, t, n, r, o, s, c;
+	a(N, this, Array.from(((e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("#latency-strip-target")) || [])), a(P, this, Array.from(((t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("#latency-strip-decrease")) || [])), a(F, this, Array.from(((n = this.shadowRoot) == null ? void 0 : n.querySelectorAll("#latency-strip-increase")) || [])), a(I, this, Array.from(((r = this.shadowRoot) == null ? void 0 : r.querySelectorAll(".preset-btn[data-value]")) || [])), a(L, this, ((o = this.shadowRoot) == null ? void 0 : o.querySelector(".preset-btn[data-mode=\"dynamic\"]")) || null), a(R, this, ((s = i(L, this)) == null ? void 0 : s.querySelector(".dynamic-subtitle")) || null), a(z, this, ((c = i(L, this)) == null ? void 0 : c.querySelector(".dynamic-value")) || null);
+}
+function Se(e) {
+	var t;
+	let n = (t = this.shadowRoot) == null ? void 0 : t.querySelector(`.section#${e}`);
+	return !!n && !n.hidden;
+}
+function Ce() {
+	let e = `${i(O, this).length} event${i(O, this).length === 1 ? "" : "s"}`;
+	r(K, this, J).call(this, i(V, this), e), r(K, this, Y).call(this, "events-section", String(i(O, this).length));
+}
+function we() {
+	let e = r(K, this, q).call(this, ".close-btn");
+	e == null || e.addEventListener("click", (e) => {
+		e.stopPropagation(), this.dispatchEvent(new CustomEvent(c.TOGGLE_DEBUG_PANEL, {
+			bubbles: !0,
+			composed: !0
+		}));
+	});
+}
+function Te() {
+	var e;
+	let t = Array.from(((e = this.shadowRoot) == null ? void 0 : e.querySelectorAll(".section-tab[data-target]")) || []);
+	t.length !== 0 && t.forEach((e) => {
+		e.addEventListener("click", (t) => {
+			t.stopPropagation();
+			let n = e.getAttribute("data-target");
+			n && r(K, this, X).call(this, n) && r(K, this, Oe).call(this, n);
+		});
+	});
+}
+function Ee() {
+	a(U, this, r(K, this, q).call(this, ".scroll-tabs-btn")), a(W, this, r(K, this, q).call(this, ".section-tabs-wrap")), a(G, this, r(K, this, q).call(this, ".section-tabs")), !(!i(U, this) || !i(G, this) || !i(W, this)) && (i(G, this).addEventListener("scroll", () => r(K, this, De).call(this), { passive: !0 }), i(U, this).addEventListener("click", (e) => {
+		if (e.stopPropagation(), !i(G, this)) return;
+		let { scrollLeft: t, scrollWidth: n, clientWidth: r } = i(G, this), a = t + r >= n - 4;
+		i(G, this).scrollTo({
+			left: a ? 0 : n,
+			behavior: "smooth"
+		});
+	}), r(K, this, De).call(this));
+}
+function De() {
+	if (!i(U, this) || !i(G, this) || !i(W, this)) return;
+	let { scrollLeft: e, scrollWidth: t, clientWidth: n } = i(G, this), r = t > n + 4, a = e + n >= t - 4;
+	i(U, this).setAttribute("data-visible", String(r)), i(U, this).innerHTML = a ? ue : le, i(W, this).toggleAttribute("data-can-scroll-right", r && !a);
+}
+function Oe(e) {
+	let t = r(K, this, q).call(this, `.section#${e}`);
+	t && r(K, this, ke).call(this, e, t.hidden);
+}
+function ke(e, t) {
+	let n = r(K, this, q).call(this, `.section#${e}`);
+	if (!n) return;
+	let a = !n.hidden;
+	n.hidden = !t;
+	let o = r(K, this, q).call(this, `.section-tab[data-target="${e}"]`);
+	o && (o.setAttribute("data-active", String(t)), o.setAttribute("aria-pressed", String(t)), !i(D, this) && a !== t && r(K, this, Fe).call(this), e === "events-section" && t && i(H, this) && r(K, this, Et).call(this, !0), r(K, this, Ae).call(this));
+}
+function Ae() {
+	this.toggleAttribute("data-collapsed", r(K, this, Me).call(this).length === 0);
+}
+function je() {
+	var e;
+	Array.from(((e = this.shadowRoot) == null ? void 0 : e.querySelectorAll(".section[id]")) || []).forEach((e) => {
+		r(K, this, X).call(this, e.id) && r(K, this, ke).call(this, e.id, !e.hidden);
+	});
+}
+function Y(e, t) {
+	let n = r(K, this, q).call(this, `.section-badge[data-badge-for="${e}"]`);
+	if (!n) return;
+	r(K, this, J).call(this, n, t);
+	let i = r(K, this, q).call(this, `.section-tab[data-target="${e}"]`);
+	if (!i) return;
+	let a = `${i.getAttribute("title") || e} section (${t})`;
+	i.getAttribute("aria-label") !== a && i.setAttribute("aria-label", a);
+}
+function X(e) {
+	return _.includes(e);
+}
+function Me() {
+	var e;
+	return Array.from(((e = this.shadowRoot) == null ? void 0 : e.querySelectorAll(".section[id]")) || []).filter((e) => r(K, this, X).call(this, e.id) && !e.hidden).map((e) => e.id);
+}
+function Ne() {
+	var e;
+	return Array.from(((e = this.shadowRoot) == null ? void 0 : e.querySelectorAll(".section-tab[data-target]")) || []).map((e) => e.getAttribute("data-target")).filter((e) => typeof e == "string" && r(K, this, X).call(this, e));
+}
+function Pe(e) {
+	var t;
+	let n = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".section-tabs");
+	if (!n || !this.shadowRoot) return;
+	let i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
+	Array.from(n.querySelectorAll(".section-tab[data-target]")).forEach((e) => {
+		let t = e.getAttribute("data-target");
+		t && r(K, this, X).call(this, t) && i.set(t, e);
+	}), _.forEach((e) => {
+		var t;
+		let n = (t = this.shadowRoot) == null ? void 0 : t.querySelector(`.section#${e}`);
+		n && a.set(e, n);
+	});
+	let o = [...e, ..._.filter((t) => !e.includes(t))];
+	o.forEach((e) => {
+		let t = i.get(e);
+		t && n.appendChild(t);
+	}), o.forEach((e) => {
+		let t = a.get(e);
+		if (t) {
+			var n;
+			(n = this.shadowRoot) == null || n.appendChild(t);
+		}
+	});
+}
+function Fe() {
+	if (!this.shadowRoot) return;
+	let e = {
+		version: 1,
+		openSections: r(K, this, Me).call(this),
+		sectionOrder: r(K, this, Ne).call(this)
+	};
+	try {
+		sessionStorage.setItem(se, JSON.stringify(e));
+	} catch (e) {}
+}
+function Ie() {
+	let e = null;
+	try {
+		e = sessionStorage.getItem(se);
+	} catch (e) {
+		return;
+	}
+	if (!e) return;
+	let t = null;
+	try {
+		t = JSON.parse(e);
+	} catch (e) {
+		return;
+	}
+	if (!t || typeof t != "object") return;
+	let n = Array.isArray(t.openSections) ? t.openSections.filter((e) => typeof e == "string" && r(K, this, X).call(this, e)) : [], i = Array.isArray(t.sectionOrder) ? t.sectionOrder.filter((e) => typeof e == "string" && r(K, this, X).call(this, e)) : [];
+	a(D, this, !0);
+	try {
+		if (i.length > 0 && r(K, this, Pe).call(this, i), Array.isArray(t.openSections)) {
+			let e = new Set(n);
+			_.forEach((t) => {
+				r(K, this, ke).call(this, t, e.has(t));
+			});
+		}
+		r(K, this, je).call(this);
+	} finally {
+		a(D, this, !1);
+	}
+	r(K, this, Fe).call(this);
+}
+function Le() {
+	r(K, this, Y).call(this, "latency-section", "Drift -"), r(K, this, Y).call(this, "quality-section", "Auto"), r(K, this, Y).call(this, "playback-section", "Buffer -"), r(K, this, Y).call(this, "network-section", "RTT -"), r(K, this, Y).call(this, "stats-section", "Up -"), r(K, this, Y).call(this, "events-section", `${i(O, this).length}`);
+}
+function Re() {
+	r(K, this, xe).call(this), i(P, this).forEach((e) => {
+		e.addEventListener("click", (e) => {
+			e.stopPropagation(), r(K, this, Be).call(this, -r(K, this, ze).call(this, !1));
+		});
+	}), i(F, this).forEach((e) => {
+		e.addEventListener("click", (e) => {
+			e.stopPropagation(), r(K, this, Be).call(this, r(K, this, ze).call(this, !0));
+		});
+	});
+}
+function ze(e) {
+	let t = i(w, this);
+	return e ? t >= 1e3 ? 250 : t >= 500 ? 100 : 50 : t > 1e3 ? 250 : t > 500 ? 100 : 50;
+}
+function Be(e) {
+	let t = Math.max(50, Math.min(u, i(w, this) + e));
+	t !== i(w, this) && (a(w, this, t), r(K, this, Ve).call(this, t), r(K, this, Ue).call(this), r(K, this, Z).call(this));
+}
+function Ve(e) {
+	if (!i(v, this)) return;
+	let { isDynamic: t, minBuffer: n, maxBuffer: a } = r(K, this, He).call(this);
+	t && (e < n ? i(v, this).setAttribute("min-buffer-time", String(e)) : e > a && i(v, this).setAttribute("max-buffer-time", String(e)));
+}
+function He() {
+	var e, t;
+	let n = (e = i(v, this)) == null ? void 0 : e.getAttribute("min-buffer-time"), r = (t = i(v, this)) == null ? void 0 : t.getAttribute("max-buffer-time");
+	if (!n || !r) return {
+		isDynamic: !1,
+		minBuffer: 0,
+		maxBuffer: 0
+	};
+	let a = Number(n), o = Number(r);
+	return Number.isNaN(a) || Number.isNaN(o) ? {
+		isDynamic: !1,
+		minBuffer: 0,
+		maxBuffer: 0
+	} : {
+		isDynamic: a !== o,
+		minBuffer: a,
+		maxBuffer: o
+	};
+}
+function Ue() {
+	this.dispatchEvent(new CustomEvent(c.SET_TARGET_BUFFER_TIME, {
+		bubbles: !0,
+		composed: !0,
+		detail: i(w, this)
+	}));
+}
+function We(e) {
+	if (r(K, this, He).call(this).isDynamic) {
+		r(K, this, Ke).call(this, e), r(K, this, Z).call(this);
+		return;
+	}
+	a(w, this, e), r(K, this, Ue).call(this), r(K, this, Z).call(this);
+}
+function Ge() {
+	if (r(K, this, He).call(this).isDynamic || !i(v, this)) return;
+	let e = Math.max(50, Math.min(u, i(w, this))), t = Math.max(50, e - 100), n = Math.min(u, e + 100);
+	t === n && n < 5e3 ? n = Math.min(u, n + 100) : t === n && t > 50 && (t = Math.max(50, t - 100)), i(v, this).setAttribute("min-buffer-time", String(t)), i(v, this).setAttribute("max-buffer-time", String(n)), r(K, this, Ue).call(this), r(K, this, Z).call(this);
+}
+function Ke(e) {
+	if (!i(v, this)) return;
+	let t = Math.max(50, Math.min(u, e));
+	a(w, this, t);
+	let n = String(t);
+	i(v, this).setAttribute("min-buffer-time", n), i(v, this).setAttribute("max-buffer-time", n), r(K, this, Ue).call(this);
+}
+function qe() {
+	let e = r(K, this, q).call(this, "#latency-presets");
+	if (!e) return;
+	e.innerHTML = "", g.forEach((t) => {
+		let n = document.createElement("button");
+		n.className = "preset-btn", n.type = "button", n.setAttribute("data-value", String(t.value)), n.setAttribute("aria-label", `${t.label} preset (${t.value}ms)`);
+		let i = document.createElement("span");
+		i.className = "preset-title", i.textContent = t.label, n.appendChild(i);
+		let a = document.createElement("span");
+		a.className = "preset-subtitle", a.textContent = t.description, n.appendChild(a);
+		let o = document.createElement("span");
+		o.className = "preset-value", o.textContent = `${t.value}ms`, n.appendChild(o), n.addEventListener("click", (e) => {
+			e.stopPropagation(), r(K, this, We).call(this, t.value);
+		}), e.appendChild(n);
+	});
+	let t = document.createElement("button");
+	t.type = "button", t.className = "preset-btn dynamic-btn", t.setAttribute("data-mode", "dynamic"), t.setAttribute("aria-label", "Enable dynamic buffer mode");
+	let n = document.createElement("span");
+	n.className = "preset-title", n.textContent = "Dynamic", t.appendChild(n);
+	let i = document.createElement("span");
+	i.className = "preset-subtitle dynamic-subtitle", t.appendChild(i);
+	let a = document.createElement("span");
+	a.className = "preset-value dynamic-value", t.appendChild(a), t.addEventListener("click", (e) => {
+		e.stopPropagation(), r(K, this, Ge).call(this);
+	}), e.appendChild(t), r(K, this, xe).call(this), r(K, this, Z).call(this);
+}
+function Z() {
+	i(N, this).length === 0 && r(K, this, xe).call(this);
+	let { isDynamic: e, minBuffer: t, maxBuffer: n } = r(K, this, He).call(this);
+	if (i(N, this).forEach((e) => {
+		r(K, this, J).call(this, e, `${i(w, this)}ms`);
+	}), i(P, this).forEach((e) => {
+		e.disabled = i(w, this) <= 50;
+	}), i(F, this).forEach((e) => {
+		e.disabled = i(w, this) >= u;
+	}), i(L, this) && i(L, this).setAttribute("data-active", String(e)), i(R, this) && r(K, this, J).call(this, i(R, this), e ? `${t}ms - ${n}ms` : ae), i(z, this) && r(K, this, J).call(this, i(z, this), e ? "range" : ""), i(I, this).length === 0) return;
+	let a = null;
+	if (!e) {
+		let e = g.find((e) => e.value === i(w, this)), t = oe(i(w, this)), n = g.reduce((e, t) => Math.abs(t.value - i(w, this)) < Math.abs(e.value - i(w, this)) ? t : e);
+		a = e || t || n;
+	}
+	i(I, this).forEach((t) => {
+		let n = parseInt(t.getAttribute("data-value") || "0", 10), r = !e && (a == null ? void 0 : a.value) === n;
+		t.setAttribute("data-active", String(r));
+	});
+}
+function Je() {
+	let e = r(K, this, q).call(this, "#current-drift"), t = `${i(T, this).toFixed(1)}ms`;
+	if (e) {
+		r(K, this, J).call(this, e, t);
+		let n = Math.abs(i(T, this));
+		n > 200 ? e.setAttribute("data-status", "error") : n > 100 ? e.setAttribute("data-status", "warning") : e.setAttribute("data-status", "good");
+	}
+	let n = i(T, this) > 0 ? `+${t}` : t;
+	r(K, this, Y).call(this, "latency-section", `Drift ${n}`);
+}
+function Ye() {
+	let e = r(K, this, q).call(this, "#abr-auto-btn"), t = r(K, this, q).call(this, "#abr-fixed-btn");
+	e == null || e.addEventListener("click", (e) => {
+		e.stopPropagation(), a(x, this, !0), r(K, this, Ze).call(this), this.dispatchEvent(new CustomEvent(c.SET_ABR_MODE, {
+			bubbles: !0,
+			composed: !0,
+			detail: !0
+		})), r(K, this, $).call(this, "Quality", "ABR mode: Auto");
+	}), t == null || t.addEventListener("click", (e) => {
+		e.stopPropagation();
+		let t = r(K, this, Xe).call(this);
+		t && this.dispatchEvent(new CustomEvent(c.SET_RENDITION, {
+			bubbles: !0,
+			composed: !0,
+			detail: t
+		})), a(x, this, !1), r(K, this, Ze).call(this), this.dispatchEvent(new CustomEvent(c.SET_ABR_MODE, {
+			bubbles: !0,
+			composed: !0,
+			detail: !1
+		})), r(K, this, $).call(this, "Quality", "ABR mode: Fixed");
+	});
+	let n = r(K, this, q).call(this, "#size-cap-toggle");
+	n == null || n.addEventListener("click", (e) => {
+		e.stopPropagation(), a(S, this, !i(S, this)), r(K, this, Qe).call(this), this.dispatchEvent(new CustomEvent(c.SET_SIZE_BASED_RESOLUTION_CAP_MODE, {
+			bubbles: !0,
+			composed: !0,
+			detail: i(S, this)
+		})), r(K, this, $).call(this, "Quality", `Size cap: ${i(S, this) ? "On" : "Off"}`);
+	});
+}
+function Xe() {
+	let e = [...i(y, this)].sort((e, t) => {
+		var n, r;
+		return (n = e.video) != null && n.bitRate && (r = t.video) != null && r.bitRate ? t.video.bitRate - e.video.bitRate : 0;
+	});
+	return e.find((e) => {
+		var t;
+		return ((t = e.video) == null ? void 0 : t.bitRate) && e.video.bitRate <= i(b, this);
+	}) || e[e.length - 1] || null;
+}
+function Ze() {
+	let e = r(K, this, q).call(this, "#abr-auto-btn"), t = r(K, this, q).call(this, "#abr-fixed-btn"), n = r(K, this, q).call(this, "#quality-status-text");
+	e == null || e.setAttribute("data-active", String(i(x, this))), t == null || t.setAttribute("data-active", String(!i(x, this))), n && r(K, this, J).call(this, n, i(x, this) ? "Select maximum allowed quality" : "Select specific quality (may cause buffering)"), r(K, this, tt).call(this);
+}
+function Qe() {
+	let e = r(K, this, q).call(this, "#size-cap-toggle");
+	e && (e.textContent = i(S, this) ? "On" : "Off", e.setAttribute("data-active", String(i(S, this))), e.disabled = !i(x, this));
+}
+function $e() {
+	var e;
+	let t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("#quality-menu");
+	t && (t.innerHTML = "", i(y, this).sort((e, t) => {
+		var n, r;
+		return (n = e.video) != null && n.bitRate && (r = t.video) != null && r.bitRate ? t.video.bitRate - e.video.bitRate : 0;
+	}).forEach((e) => {
+		var n, i, a, o, s, l, ee;
+		let u = document.createElement("button");
+		u.className = "quality-item", u.type = "button", u.setAttribute("data-id", String(((n = e.video) == null ? void 0 : n.id) || 0)), u.setAttribute("data-bitrate", String(((i = e.video) == null ? void 0 : i.bitRate) || 0)), u.setAttribute("aria-label", e.video ? `Set quality to ${ne(e.video)}` : "Set quality");
+		let d = document.createElement("div");
+		d.className = "quality-item-info";
+		let f = document.createElement("span");
+		f.className = "quality-item-title", f.textContent = e.video ? ne(e.video) : "";
+		let p = document.createElement("span");
+		p.className = "quality-item-subtitle";
+		let m = r(K, this, et).call(this, (a = e.video) == null ? void 0 : a.frameRate), re = m ? `, ${m}fps` : "";
+		p.textContent = `${te(((o = (s = e.video) == null ? void 0 : s.bitRate) == null ? 0 : o) + ((l = (ee = e.audio) == null ? void 0 : ee.bitRate) == null ? 0 : l))}${re}`, d.appendChild(f), d.appendChild(p), u.appendChild(d);
+		let h = document.createElement("span");
+		h.className = "quality-current-label", h.textContent = "Current", u.appendChild(h), u.addEventListener("click", (t) => {
+			t.stopPropagation(), this.dispatchEvent(new CustomEvent(c.SET_RENDITION, {
+				bubbles: !0,
+				composed: !0,
+				detail: e
+			}));
+			let n = e.video ? ne(e.video) : "unknown";
+			r(K, this, $).call(this, "Quality", `Selected: ${n}`);
+		}), t.appendChild(u);
+	}), r(K, this, tt).call(this));
+}
+function et(e) {
+	return e ? e[0] % e[1] === 0 ? (e[0] / e[1]).toString() : (e[0] / e[1]).toFixed(2) : "";
+}
+function tt() {
+	var e, t, n;
+	let a = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll(".quality-item"), o = (t = i(C, this)) == null || (t = t.video) == null ? void 0 : t.id, s = i(b, this), c = r(K, this, nt).call(this, a, s);
+	a == null || a.forEach((e) => {
+		let t = parseInt(e.getAttribute("data-id") || "0", 10), n = parseInt(e.getAttribute("data-bitrate") || "0", 10);
+		e.setAttribute("data-playing", String(t === o));
+		let r = c !== null && n === c;
+		e.setAttribute("data-selected", String(r)), e.setAttribute("aria-pressed", String(r)), i(x, this) ? e.setAttribute("data-capped", String(n > s)) : e.removeAttribute("data-capped");
+	});
+	let l = (n = i(C, this)) == null ? void 0 : n.video;
+	if (l != null && l.width && l.height) {
+		r(K, this, Y).call(this, "quality-section", `${l.width}x${l.height}`);
+		return;
+	}
+	if (typeof c == "number" && c > 0) {
+		r(K, this, Y).call(this, "quality-section", te(c, 1));
+		return;
+	}
+	r(K, this, Y).call(this, "quality-section", i(x, this) ? "Auto" : "Fixed");
+}
+function nt(e, t) {
+	var n;
+	if (!(e != null && e.length)) return null;
+	let r = null, i = null;
+	return e.forEach((e) => {
+		let n = parseInt(e.getAttribute("data-bitrate") || "0", 10);
+		Number.isNaN(n) || ((i === null || n < i) && (i = n), n <= t && (r === null || n > r) && (r = n));
+	}), (n = r) == null ? i : n;
+}
+function rt() {
+	r(K, this, it).call(this), r(K, this, ot).call(this), r(K, this, at).call(this), a(E, this, window.setInterval(() => r(K, this, at).call(this), 1e3));
+}
+function it() {
+	i(E, this) !== null && (clearInterval(i(E, this)), a(E, this, null));
+}
+function at() {
+	var e;
+	let t = (e = i(v, this)) == null ? void 0 : e.instance;
+	if (t) try {
+		let e = t.getStatistics();
+		r(K, this, Z).call(this), r(K, this, Q).call(this, "#sdk-version", e.version || "-"), r(K, this, Q).call(this, "#session-id", e.sessionId || "-"), r(K, this, Q).call(this, "#client-id", e.clientId || "-"), r(K, this, Q).call(this, "#channel-id", e.channelId || "-"), r(K, this, Q).call(this, "#channel-group-id", e.channelGroupId || "-"), r(K, this, Q).call(this, "#uptime", r(K, this, ct).call(this, e.uptime)), r(K, this, Q).call(this, "#ttff", e.timeToFirstFrame ? `${e.timeToFirstFrame}ms` : "-"), r(K, this, Q).call(this, "#connection-state", t.connectionState || "-"), r(K, this, Q).call(this, "#playback-state", t.playbackState || "-");
+		let n = typeof t.playbackLatency == "number" ? `${Math.round(t.playbackLatency)}ms` : "-";
+		r(K, this, Q).call(this, "#playback-latency", n), r(K, this, Q).call(this, "#average-drift", r(K, this, lt).call(this, e.averageDrift, 1));
+		let o = `${Math.max(0, t.bufferFullness * 100).toFixed(0)}%`;
+		if (r(K, this, Q).call(this, "#playback-buffer-fullness", o), r(K, this, Y).call(this, "playback-section", `Buffer ${o}`), r(K, this, Q).call(this, "#playback-last-buffer-event", t.lastBufferEvent || "-"), r(K, this, Q).call(this, "#playback-buffering-events", typeof e.bufferingEventsCount == "number" ? e.bufferingEventsCount.toString() : "-"), r(K, this, Q).call(this, "#playback-buffering-ratio", r(K, this, ut).call(this, e.bufferingRatio)), r(K, this, Q).call(this, "#playback-time-spent-buffering", r(K, this, ct).call(this, t.timeSpentBuffering)), r(K, this, Q).call(this, "#playback-rendition-changes", r(K, this, pt).call(this, e.renditionLevelChangeCount, e.renditionChangesPerMinute)), r(K, this, Q).call(this, "#playback-seek-adjustments-rate", r(K, this, ft).call(this, e.seekAdjustmentsPerMinute, "min")), r(K, this, Q).call(this, "#playback-timeshift-adjustments-rate", r(K, this, ft).call(this, e.timeshiftAdjustmentsPerMinute, "min")), r(K, this, Q).call(this, "#playback-current-rendition", r(K, this, yt).call(this, e)), r(K, this, Q).call(this, "#playback-codecs", r(K, this, bt).call(this, e)), r(K, this, Q).call(this, "#playback-frame-drops", r(K, this, xt).call(this, e)), e.edgeUrl) try {
+			r(K, this, Q).call(this, "#network-edge-url", new URL(e.edgeUrl).hostname);
+		} catch (t) {
+			r(K, this, Q).call(this, "#network-edge-url", e.edgeUrl);
+		}
+		else r(K, this, Q).call(this, "#network-edge-url", "-");
+		r(K, this, Q).call(this, "#network-protocol", r(K, this, mt).call(this, e.connectionProtocol));
+		let s = r(K, this, ht).call(this, e.rtt);
+		r(K, this, Q).call(this, "#network-rtt", s), r(K, this, Q).call(this, "#network-estimated-bandwidth", r(K, this, dt).call(this, e.estimatedBandwidth)), r(K, this, Q).call(this, "#network-video-bitrate", r(K, this, dt).call(this, e.videoBitRate)), r(K, this, Q).call(this, "#network-audio-bitrate", r(K, this, dt).call(this, e.audioBitRate)), r(K, this, Q).call(this, "#network-bitrate", r(K, this, dt).call(this, e.averageBitRate)), r(K, this, Q).call(this, "#network-audio-jitter", r(K, this, _t).call(this, e.audioJitter)), r(K, this, Q).call(this, "#network-video-jitter", r(K, this, _t).call(this, e.videoJitter)), r(K, this, Q).call(this, "#network-connect-success", r(K, this, vt).call(this, e.connectCount, e.connectionAttemptCount, e.connectionSuccessRatio)), r(K, this, Q).call(this, "#network-reconnects-per-hour", r(K, this, ft).call(this, e.reconnectsPerHour, "h")), r(K, this, Y).call(this, "network-section", r(K, this, gt).call(this, e.rtt));
+		let c = r(K, this, ct).call(this, e.uptime);
+		r(K, this, Y).call(this, "stats-section", c === "-" ? "Up -" : `Up ${c}`), i(A, this) && (a(A, this, !1), r(K, this, $).call(this, "System", "Statistics stream recovered"));
+	} catch (e) {
+		i(A, this) || (a(A, this, !0), r(K, this, $).call(this, "System", "Failed to read statistics", "error"));
+	}
+}
+function ot() {
+	var e;
+	let t = (e = i(v, this)) == null ? void 0 : e.instance;
+	!t || i(j, this) === t || (r(K, this, st).call(this), a(j, this, t), t.on("connection state", i(pe, this)), t.on("playback state", i(me, this)), t.on("buffer state event", i(he, this)), t.on("error", i(ge, this)), t.on("rendition level", i(_e, this)), t.on("is live", i(ve, this)));
+}
+function st() {
+	let e = i(j, this);
+	e && (e.off("connection state", i(pe, this)), e.off("playback state", i(me, this)), e.off("buffer state event", i(he, this)), e.off("error", i(ge, this)), e.off("rendition level", i(_e, this)), e.off("is live", i(ve, this)), a(j, this, null));
+}
+function Q(e, t) {
+	r(K, this, J).call(this, r(K, this, q).call(this, e), t);
+}
+function ct(e) {
+	if (!e) return "-";
+	let t = Math.floor(e / 1e3), n = Math.floor(t / 60), r = Math.floor(n / 60);
+	return r > 0 ? `${r}h ${n % 60}m ${t % 60}s` : n > 0 ? `${n}m ${t % 60}s` : `${t}s`;
+}
+function lt(e, t = 0) {
+	return typeof e != "number" || Number.isNaN(e) ? "-" : `${e.toFixed(t)}ms`;
+}
+function ut(e, t = 1) {
+	return typeof e != "number" || Number.isNaN(e) ? "-" : `${(e * 100).toFixed(t)}%`;
+}
+function dt(e) {
+	return typeof e != "number" || e <= 0 || Number.isNaN(e) ? "-" : te(e, 2);
+}
+function ft(e, t) {
+	return typeof e != "number" || Number.isNaN(e) ? "-" : `${e.toFixed(2)}/${t}`;
+}
+function pt(e, t) {
+	return typeof e == "number" ? typeof t != "number" || Number.isNaN(t) ? e.toString() : `${e} (${t.toFixed(2)}/min)` : "-";
+}
+function mt(e) {
+	switch (e) {
+		case "moq": return "MoQ (WebTransport)";
+		case "moq_ws": return "MoQ (WebSocket)";
+		case "vindral_ws": return "Vindral WS";
+		default: return "-";
+	}
+}
+function ht(e) {
+	return e ? `${e.last.toFixed(1)}ms (avg ${e.average.toFixed(1)})` : "-";
+}
+function gt(e) {
+	return !e || typeof e.last != "number" ? "RTT -" : `RTT ${Math.round(e.last)}ms`;
+}
+function _t(e) {
+	return e ? `${e.last}ms (avg ${e.average}, max ${e.max})` : "-";
+}
+function vt(e, t, n) {
+	return typeof t != "number" || t <= 0 ? "-" : `${typeof e == "number" ? e : 0}/${t} (${typeof n == "number" ? `${(n * 100).toFixed(0)}%` : "-"})`;
+}
+function yt(e) {
+	if (!(typeof e.videoWidth == "number" && typeof e.videoHeight == "number")) return e.audioCodec ? "Audio only" : "-";
+	let t = r(K, this, et).call(this, e.frameRate), n = t ? ` @ ${t}fps` : "";
+	return `${e.videoWidth}x${e.videoHeight}${n}`;
+}
+function bt(e) {
+	return [e.videoCodec ? `V: ${e.videoCodec}` : "", e.audioCodec ? `A: ${e.audioCodec}` : ""].filter(Boolean).join(" / ") || "-";
+}
+function xt(e) {
+	let t = typeof e.droppedVideoFrames == "number" ? e.droppedVideoFrames : typeof e.rendererDroppedFrameCount == "number" ? e.rendererDroppedFrameCount : void 0, n = typeof e.totalVideoFrames == "number" ? e.totalVideoFrames : typeof e.renderedFrameCount == "number" && typeof e.rendererDroppedFrameCount == "number" ? e.renderedFrameCount + e.rendererDroppedFrameCount : void 0;
+	return typeof t != "number" || typeof n != "number" || n <= 0 ? "-" : `${t}/${n} (${(t / n * 100).toFixed(1)}%)`;
+}
+function St() {
+	var e = this;
+	let n = r(K, this, q).call(this, "#events-clear"), o = r(K, this, q).call(this, "#copy-events");
+	a(B, this, r(K, this, q).call(this, "#events-list")), a(V, this, r(K, this, q).call(this, "#events-count")), n == null || n.addEventListener("click", (e) => {
+		e.stopPropagation(), a(O, this, []), r(K, this, Et).call(this, !0);
+	}), o == null || o.addEventListener("click", function() {
+		var n = t(function* (t) {
+			t.stopPropagation();
+			let n = JSON.stringify(i(O, e).map((e) => d(d({}, e), {}, { isoTimestamp: new Date(e.timestamp).toISOString() })), null, 2);
+			try {
+				yield navigator.clipboard.writeText(n), o.textContent = "Copied", setTimeout(() => {
+					o.textContent = "Copy";
+				}, 2e3);
+			} catch (e) {
+				o.textContent = "Copy unavailable", setTimeout(() => {
+					o.textContent = "Copy";
+				}, 2e3);
+			}
+		});
+		return function(e) {
+			return n.apply(this, arguments);
+		};
+	}());
+}
+function $(e, t, n = "info") {
+	a(k, this, i(k, this) + 1);
+	let o = {
+		id: i(k, this),
+		timestamp: Date.now(),
+		category: e,
+		message: t,
+		level: n
+	};
+	if (i(O, this).push(o), i(O, this).length > 250 && i(O, this).splice(0, i(O, this).length - 250), r(K, this, Ce).call(this), r(K, this, Se).call(this, "events-section")) {
+		r(K, this, wt).call(this, o), r(K, this, Tt).call(this);
+		return;
+	}
+	a(H, this, !0);
+}
+function Ct(e) {
+	let t = document.createElement("div");
+	t.className = "event-row", t.setAttribute("data-level", e.level);
+	let n = document.createElement("span");
+	n.className = "event-time", n.textContent = r(K, this, Dt).call(this, e.timestamp);
+	let i = document.createElement("span");
+	i.className = "event-category", i.textContent = e.category;
+	let a = document.createElement("span");
+	return a.className = "event-message", a.textContent = e.message, t.appendChild(n), t.appendChild(i), t.appendChild(a), t;
+}
+function wt(e) {
+	if (!i(B, this)) return;
+	let t = i(B, this).querySelector(".events-empty");
+	t && t.remove();
+	let n = r(K, this, Ct).call(this, e);
+	i(B, this).prepend(n);
+}
+function Tt() {
+	if (!i(B, this)) return;
+	let e = i(B, this).querySelectorAll(".event-row");
+	for (let n = e.length - 1; n >= 250; n--) {
+		var t;
+		(t = e[n]) == null || t.remove();
+	}
+}
+function Et(e = !1) {
+	if (!i(B, this) || !i(V, this)) return;
+	if (r(K, this, Ce).call(this), !e && !r(K, this, Se).call(this, "events-section")) {
+		a(H, this, !0);
+		return;
+	}
+	if (a(H, this, !1), i(O, this).length === 0) {
+		i(B, this).innerHTML = "<div class=\"events-empty\">No events yet</div>";
+		return;
+	}
+	i(B, this).innerHTML = "";
+	let t = document.createDocumentFragment();
+	for (let e = i(O, this).length - 1; e >= 0; e--) {
+		let n = i(O, this)[e];
+		n && t.appendChild(r(K, this, Ct).call(this, n));
+	}
+	i(B, this).appendChild(t);
+}
+function Dt(e) {
+	return new Date(e).toLocaleTimeString([], {
+		hour12: !1,
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+}
+function Ot() {
+	var e = this;
+	let n = r(K, this, q).call(this, "#copy-stats");
+	n == null || n.addEventListener("click", function() {
+		var i = t(function* (t) {
+			t.stopPropagation();
+			let i = r(K, e, kt).call(e);
+			try {
+				yield navigator.clipboard.writeText(JSON.stringify(i, null, 2)), n.setAttribute("data-copied", "true"), n.textContent = "Copied!", setTimeout(() => {
+					n.setAttribute("data-copied", "false"), n.textContent = "Copy Stats to Clipboard";
+				}, 2e3);
+			} catch (e) {
+				n.textContent = "Copy unavailable", setTimeout(() => {
+					n.textContent = "Copy Stats to Clipboard";
+				}, 2e3);
+			}
+		});
+		return function(e) {
+			return i.apply(this, arguments);
+		};
+	}());
+}
+function kt() {
+	var e;
+	let t = (e = i(v, this)) == null ? void 0 : e.instance;
+	if (!t) return {
+		error: "Vindral instance not available",
+		timestamp: (/* @__PURE__ */ new Date()).toISOString()
+	};
+	try {
+		return d(d({}, t.getStatistics()), {}, {
+			connectionState: t.connectionState,
+			playbackState: t.playbackState,
+			playbackLatency: t.playbackLatency,
+			bufferFullness: t.bufferFullness,
+			lastBufferEvent: t.lastBufferEvent,
+			timeSpentBuffering: t.timeSpentBuffering,
+			currentRendition: i(C, this),
+			targetBufferTime: i(w, this),
+			drift: i(T, this),
+			abrEnabled: i(x, this),
+			debugLayout: {
+				openSections: r(K, this, Me).call(this),
+				sectionOrder: r(K, this, Ne).call(this)
+			},
+			debugEvents: i(O, this).map((e) => d(d({}, e), {}, { isoTimestamp: new Date(e.timestamp).toISOString() })),
+			timestamp: (/* @__PURE__ */ new Date()).toISOString()
+		});
+	} catch (e) {
+		return {
+			error: "Failed to get statistics",
+			timestamp: (/* @__PURE__ */ new Date()).toISOString()
+		};
+	}
+}
+e(be, "observedAttributes", [
+	s.DEBUG_PANEL_OPEN,
+	s.TARGET_BUFFER_TIME,
+	s.DRIFT,
+	s.RENDITION_LEVELS,
+	s.MAX_VIDEO_BITRATE,
+	s.ABR_ENABLED,
+	s.SIZE_BASED_RESOLUTION_CAP_ENABLED,
+	s.RENDITION_LEVEL
+]);
+//#endregion
+//#region ../../libs/player-next/src/registerDebugComponents.ts
+var At = /* @__PURE__ */ p({ registerDebugComponents: () => jt });
+function jt() {
+	customElements.get("vindral-debug-button") || customElements.define("vindral-debug-button", ie), customElements.get("vindral-debug-panel") || customElements.define("vindral-debug-panel", be);
+}
+//#endregion
+export { At as n, jt as t };