@moq/watch 0.2.13 → 0.2.15

package/ui/element.js

@@ -1,382 +1,358 @@
-import { Signal as R, Effect as T } from "@moq/signals";
-import { c as v, r as C } from "../dom-BsFrLb_F.js";
-const j = 0, E = 10, P = 4e3, F = 48;
-function S(o, t, e, r, a) {
-  const n = o.getContext("2d");
-  if (!n) return;
-  const i = window.devicePixelRatio || 1, s = o.getBoundingClientRect(), l = s.width, c = s.height, p = Math.round(l * i), d = Math.round(c * i);
-  if ((o.width !== p || o.height !== d) && (o.width = p, o.height = d), n.setTransform(i, 0, 0, i, 0, 0), n.clearRect(0, 0, l, c), e === void 0) return;
-  const h = 2, f = c - h * 2, b = 2;
-  for (let m = 0; m < t.length; m++) {
-    const x = t[m], A = x.start - e, k = x.end - e, y = Math.max(0, A), N = Math.min(k, r);
-    if (N <= y) continue;
-    const u = y / r * l, g = Math.max(2, (N - y) / r * l);
-    if (n.globalAlpha = 0.85, n.fillStyle = a ? "#f87171" : m > 0 ? "#facc15" : "#4ade80", typeof n.roundRect == "function" ? (n.beginPath(), n.roundRect(u, h, g, f, b), n.fill()) : n.fillRect(u, h, g, f), k > r) {
-      const w = ((k - r) / 1e3).toFixed(1);
-      n.globalAlpha = 0.7, n.fillStyle = "black", n.font = "500 9px system-ui, sans-serif", n.textAlign = "right", n.textBaseline = "middle", n.fillText(`+${w}s`, u + g - 4, c / 2);
-    }
-  }
+import { n as e, t } from "../dom-Yz3UT5ap.js";
+import { Effect as n, Signal as r } from "@moq/signals";
+//#region src/ui/components/buffer-control.ts
+var i = 0, a = 10, o = 4e3, s = 48;
+function c(e, t, n, r, i) {
+	let a = e.getContext("2d");
+	if (!a) return;
+	let o = window.devicePixelRatio || 1, s = e.getBoundingClientRect(), c = s.width, l = s.height, u = Math.round(c * o), d = Math.round(l * o);
+	if ((e.width !== u || e.height !== d) && (e.width = u, e.height = d), a.setTransform(o, 0, 0, o, 0, 0), a.clearRect(0, 0, c, l), n === void 0) return;
+	let f = l - 4;
+	for (let e = 0; e < t.length; e++) {
+		let o = t[e], s = o.start - n, u = o.end - n, d = Math.max(0, s), p = Math.min(u, r);
+		if (p <= d) continue;
+		let m = d / r * c, h = Math.max(2, (p - d) / r * c);
+		if (a.globalAlpha = .85, a.fillStyle = i ? "#f87171" : e > 0 ? "#facc15" : "#4ade80", typeof a.roundRect == "function" ? (a.beginPath(), a.roundRect(m, 2, h, f, 2), a.fill()) : a.fillRect(m, 2, h, f), u > r) {
+			let e = ((u - r) / 1e3).toFixed(1);
+			a.globalAlpha = .7, a.fillStyle = "black", a.font = "500 9px system-ui, sans-serif", a.textAlign = "right", a.textBaseline = "middle", a.fillText(`+${e}s`, m + h - 4, l / 2);
+		}
+	}
 }
-function V(o, t, e = P) {
-  const r = document.createElement("div");
-  r.className = "buffer";
-  const a = document.createElement("div");
-  a.className = "buffer-visualization", a.setAttribute("role", "slider"), a.tabIndex = 0, a.setAttribute("aria-valuemin", j.toString()), a.setAttribute("aria-valuemax", e.toString()), a.setAttribute("aria-label", "Buffer jitter");
-  const n = document.createElement("div");
-  n.className = "buffer-playhead";
-  const i = document.createElement("div");
-  i.className = "buffer-track buffer-track--video";
-  const s = document.createElement("span");
-  s.className = "buffer-track-label", s.textContent = "Video";
-  const l = document.createElement("canvas");
-  l.className = "buffer-canvas", i.append(s, l);
-  const c = document.createElement("div");
-  c.className = "buffer-track buffer-track--audio";
-  const p = document.createElement("span");
-  p.className = "buffer-track-label", p.textContent = "Audio";
-  const d = document.createElement("canvas");
-  d.className = "buffer-canvas", c.append(p, d);
-  const h = document.createElement("div");
-  h.className = "buffer-target-area";
-  const f = document.createElement("div");
-  f.className = "buffer-target-line";
-  const b = document.createElement("span");
-  b.className = "buffer-target-label", f.appendChild(b), h.appendChild(f);
-  const m = document.createElement("span");
-  m.className = "buffer-help", m.textContent = "click to change latency", a.append(n, i, c, h, m), r.appendChild(a);
-  let x = !1, A = !1;
-  o.run((u) => {
-    const g = u.get(t.backend.jitter), w = g / e * 100;
-    f.style.left = `${w}%`, b.textContent = `${Math.round(g)}ms`, a.setAttribute("aria-valuenow", g.toString());
-  });
-  const k = (u) => {
-    const g = a.getBoundingClientRect(), w = g.width - F, H = Math.max(0, Math.min(u - g.left - F, w)) / w * e, I = Math.round(H / E) * E, W = Math.max(j, Math.min(e, I));
-    t.backend.latency.set(W);
-  }, y = () => {
-    A || (A = !0, m.style.display = "none");
-  };
-  o.event(a, "mousedown", (u) => {
-    x = !0, a.classList.add("buffer-visualization--dragging"), y(), k(u.clientX);
-  }), o.event(document, "mousemove", (u) => {
-    x && k(u.clientX);
-  }), o.event(document, "mouseup", () => {
-    x && (x = !1, a.classList.remove("buffer-visualization--dragging"));
-  }), o.event(a, "keydown", (u) => {
-    let g = 0;
-    if (u.key === "ArrowRight" || u.key === "ArrowUp")
-      g = E;
-    else if (u.key === "ArrowLeft" || u.key === "ArrowDown")
-      g = -E;
-    else
-      return;
-    u.preventDefault(), y();
-    const w = t.backend.jitter.peek(), L = Math.max(j, Math.min(e, w + g));
-    t.backend.latency.set(L);
-  });
-  const N = () => {
-    const u = t.backend.sync.now(), g = t.backend.video.stalled.peek();
-    S(l, t.backend.video.buffered.peek(), u, e, g), S(d, t.backend.audio.buffered.peek(), u, e, g), o.animate(N);
-  };
-  return o.animate(N), r;
+function l(e, t, n = o) {
+	let r = document.createElement("div");
+	r.className = "buffer";
+	let l = document.createElement("div");
+	l.className = "buffer-visualization", l.setAttribute("role", "slider"), l.tabIndex = 0, l.setAttribute("aria-valuemin", i.toString()), l.setAttribute("aria-valuemax", n.toString()), l.setAttribute("aria-label", "Buffer jitter");
+	let u = document.createElement("div");
+	u.className = "buffer-playhead";
+	let d = document.createElement("div");
+	d.className = "buffer-track buffer-track--video";
+	let f = document.createElement("span");
+	f.className = "buffer-track-label", f.textContent = "Video";
+	let p = document.createElement("canvas");
+	p.className = "buffer-canvas", d.append(f, p);
+	let m = document.createElement("div");
+	m.className = "buffer-track buffer-track--audio";
+	let h = document.createElement("span");
+	h.className = "buffer-track-label", h.textContent = "Audio";
+	let g = document.createElement("canvas");
+	g.className = "buffer-canvas", m.append(h, g);
+	let _ = document.createElement("div");
+	_.className = "buffer-target-area";
+	let v = document.createElement("div");
+	v.className = "buffer-target-line";
+	let y = document.createElement("span");
+	y.className = "buffer-target-label", v.appendChild(y), _.appendChild(v);
+	let b = document.createElement("span");
+	b.className = "buffer-help", b.textContent = "click to change latency", l.append(u, d, m, _, b), r.appendChild(l);
+	let x = !1, S = !1;
+	e.run((e) => {
+		let r = e.get(t.backend.jitter), i = r / n * 100;
+		v.style.left = `${i}%`, y.textContent = `${Math.round(r)}ms`, l.setAttribute("aria-valuenow", r.toString());
+	});
+	let C = (e) => {
+		let r = l.getBoundingClientRect(), o = r.width - s, c = Math.max(0, Math.min(e - r.left - s, o)) / o * n, u = Math.round(c / a) * a, d = Math.max(i, Math.min(n, u));
+		t.backend.latency.set(d);
+	}, w = () => {
+		S || (S = !0, b.style.display = "none");
+	};
+	e.event(l, "mousedown", (e) => {
+		x = !0, l.classList.add("buffer-visualization--dragging"), w(), C(e.clientX);
+	}), e.event(document, "mousemove", (e) => {
+		x && C(e.clientX);
+	}), e.event(document, "mouseup", () => {
+		x && (x = !1, l.classList.remove("buffer-visualization--dragging"));
+	}), e.event(l, "keydown", (e) => {
+		let r = 0;
+		if (e.key === "ArrowRight" || e.key === "ArrowUp") r = a;
+		else if (e.key === "ArrowLeft" || e.key === "ArrowDown") r = -10;
+		else return;
+		e.preventDefault(), w();
+		let o = t.backend.jitter.peek(), s = Math.max(i, Math.min(n, o + r));
+		t.backend.latency.set(s);
+	});
+	let T = () => {
+		let r = t.backend.sync.now(), i = t.backend.video.stalled.peek();
+		c(p, t.backend.video.buffered.peek(), r, n, i), c(g, t.backend.audio.buffered.peek(), r, n, i), e.animate(T);
+	};
+	return e.animate(T), r;
 }
-function O(o, t) {
-  const e = document.createElement("div");
-  e.className = "buffering";
-  const r = document.createElement("div");
-  return r.className = "buffering-spinner", e.appendChild(r), o.run((a) => {
-    const n = a.get(t.backend.video.stalled), i = a.get(t.broadcast.status) === "offline";
-    e.style.display = n && !i ? "" : "none";
-  }), e;
+//#endregion
+//#region src/ui/components/buffering-indicator.ts
+function u(e, t) {
+	let n = document.createElement("div");
+	n.className = "buffering";
+	let r = document.createElement("div");
+	return r.className = "buffering-spinner", n.appendChild(r), e.run((e) => {
+		let r = e.get(t.backend.video.stalled), i = e.get(t.broadcast.status) === "offline";
+		n.style.display = r && !i ? "" : "none";
+	}), n;
 }
-const U = `<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">
-	<path d="M9 18V5l12-2v13" />
-	<circle cx="6" cy="18" r="3" />
-	<circle cx="18" cy="16" r="3" />
-</svg>`, D = `<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">
-	<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
-</svg>`, _ = `<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">
-	<path d="M8 3H5a2 2 0 0 0-2 2v3" />
-	<path d="M21 8V5a2 2 0 0 0-2-2h-3" />
-	<path d="M3 16v3a2 2 0 0 0 2 2h3" />
-	<path d="M16 21h3a2 2 0 0 0 2-2v-3" />
-</svg>`, X = `<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">
-	<path d="M8 3v3a2 2 0 0 1-2 2H3" />
-	<path d="M21 8h-3a2 2 0 0 1-2-2V3" />
-	<path d="M3 16h3a2 2 0 0 1 2 2v3" />
-	<path d="M16 21v-3a2 2 0 0 1 2-2h3" />
-</svg>`, G = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--color-white)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-	<path d="M16 9a5 5 0 0 1 .95 2.293" />
-	<path d="M19.364 5.636a9 9 0 0 1 1.889 9.96" />
-	<path d="m2 2 20 20" />
-	<path d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11" />
-	<path d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686" />
-</svg>`, Q = `<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">
-	<path d="M16.247 7.761a6 6 0 0 1 0 8.478" />
-	<path d="M19.075 4.933a10 10 0 0 1 0 14.134" />
-	<path d="M4.925 19.067a10 10 0 0 1 0-14.134" />
-	<path d="M7.753 16.239a6 6 0 0 1 0-8.478" />
-	<circle cx="12" cy="12" r="2" />
-</svg>`, J = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--color-white)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-	<rect x="14" y="3" width="5" height="18" rx="1" />
-    <rect x="5" y="3" width="5" height="18" rx="1" />
-</svg>`, K = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--color-white)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-	<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />
-</svg>`, Y = `<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">
-	<path d="M5 21v-6" />
-	<path d="M12 21V3" />
-	<path d="M19 21V9" />
-</svg>`, Z = `<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">
-	<path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" />
-	<rect x="2" y="6" width="14" height="12" rx="2" />
-</svg>`, tt = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--color-white)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-	<path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
-	<path d="M16 9a5 5 0 0 1 0 6" />
-	<path d="M19.364 18.364a9 9 0 0 0 0-12.728" />
-</svg>`, et = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--color-white)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-	<path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
-</svg>`, at = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--color-white)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" />
-    <path d="M16 9a5 5 0 0 1 0 6" />
-</svg>`;
-function M(o) {
-  const t = document.createElement("span");
-  return t.className = "flex-center", t.setAttribute("role", "img"), t.setAttribute("aria-hidden", "true"), t.innerHTML = o, t;
+//#endregion
+//#region src/ui/icons/audio.svg?raw
+var d = "<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=\"M9 18V5l12-2v13\" />\n	<circle cx=\"6\" cy=\"18\" r=\"3\" />\n	<circle cx=\"18\" cy=\"16\" r=\"3\" />\n</svg>", f = "<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=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\" />\n</svg>", p = "<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 3H5a2 2 0 0 0-2 2v3\" />\n	<path d=\"M21 8V5a2 2 0 0 0-2-2h-3\" />\n	<path d=\"M3 16v3a2 2 0 0 0 2 2h3\" />\n	<path d=\"M16 21h3a2 2 0 0 0 2-2v-3\" />\n</svg>", m = "<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 3v3a2 2 0 0 1-2 2H3\" />\n	<path d=\"M21 8h-3a2 2 0 0 1-2-2V3\" />\n	<path d=\"M3 16h3a2 2 0 0 1 2 2v3\" />\n	<path d=\"M16 21v-3a2 2 0 0 1 2-2h3\" />\n</svg>", h = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n	<path d=\"M16 9a5 5 0 0 1 .95 2.293\" />\n	<path d=\"M19.364 5.636a9 9 0 0 1 1.889 9.96\" />\n	<path d=\"m2 2 20 20\" />\n	<path d=\"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11\" />\n	<path d=\"M9.828 4.172A.686.686 0 0 1 11 4.657v.686\" />\n</svg>", g = "<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=\"M16.247 7.761a6 6 0 0 1 0 8.478\" />\n	<path d=\"M19.075 4.933a10 10 0 0 1 0 14.134\" />\n	<path d=\"M4.925 19.067a10 10 0 0 1 0-14.134\" />\n	<path d=\"M7.753 16.239a6 6 0 0 1 0-8.478\" />\n	<circle cx=\"12\" cy=\"12\" r=\"2\" />\n</svg>", _ = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n	<rect x=\"14\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />\n    <rect x=\"5\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />\n</svg>", v = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n	<path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\" />\n</svg>", y = "<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=\"M5 21v-6\" />\n	<path d=\"M12 21V3\" />\n	<path d=\"M19 21V9\" />\n</svg>", b = "<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=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\" />\n	<rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\" />\n</svg>", x = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n	<path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" />\n	<path d=\"M16 9a5 5 0 0 1 0 6\" />\n	<path d=\"M19.364 18.364a9 9 0 0 0 0-12.728\" />\n</svg>", S = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n	<path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" />\n</svg>", C = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" />\n    <path d=\"M16 9a5 5 0 0 1 0 6\" />\n</svg>";
+//#endregion
+//#region src/ui/icons.ts
+function w(e) {
+	let t = document.createElement("span");
+	return t.className = "flex-center", t.setAttribute("role", "img"), t.setAttribute("aria-hidden", "true"), t.innerHTML = e, t;
 }
-function ot(o, t) {
-  const e = document.createElement("button");
-  e.type = "button", e.className = "button flex-center", e.title = "Fullscreen", e.setAttribute("aria-label", "Fullscreen"), e.replaceChildren(M(_));
-  const r = () => {
-    const a = !!document.fullscreenElement;
-    e.replaceChildren(M(a ? X : _));
-  };
-  return o.event(document, "fullscreenchange", r), o.event(e, "click", () => {
-    document.fullscreenElement ? document.exitFullscreen() : t.requestFullscreen();
-  }), e;
+//#endregion
+//#region src/ui/components/fullscreen-button.ts
+function T(e, t) {
+	let n = document.createElement("button");
+	return n.type = "button", n.className = "button flex-center", n.title = "Fullscreen", n.setAttribute("aria-label", "Fullscreen"), n.replaceChildren(w(p)), e.event(document, "fullscreenchange", () => {
+		let e = !!document.fullscreenElement;
+		n.replaceChildren(w(e ? m : p));
+	}), e.event(n, "click", () => {
+		document.fullscreenElement ? document.exitFullscreen() : t.requestFullscreen();
+	}), n;
 }
-function nt(o, t) {
-  const e = document.createElement("div");
-  e.className = "watch-ui__offline-indicator", e.setAttribute("role", "status"), e.setAttribute("aria-live", "polite");
-  const r = document.createElement("span");
-  return r.className = "watch-ui__offline-text", r.textContent = "OFFLINE", e.appendChild(r), o.run((a) => {
-    const n = a.get(t.broadcast.status) === "offline";
-    e.style.display = n ? "" : "none";
-  }), e;
+//#endregion
+//#region src/ui/components/offline-indicator.ts
+function E(e, t) {
+	let n = document.createElement("div");
+	n.className = "watch-ui__offline-indicator", n.setAttribute("role", "status"), n.setAttribute("aria-live", "polite");
+	let r = document.createElement("span");
+	return r.className = "watch-ui__offline-text", r.textContent = "OFFLINE", n.appendChild(r), e.run((e) => {
+		let r = e.get(t.broadcast.status) === "offline";
+		n.style.display = r ? "" : "none";
+	}), n;
 }
-function rt(o, t) {
-  const e = document.createElement("button");
-  return e.type = "button", e.className = "button button--playback flex-center", o.run((r) => {
-    const a = r.get(t.backend.paused);
-    e.title = a ? "Play" : "Pause", e.setAttribute("aria-label", a ? "Play" : "Pause"), e.replaceChildren(M(a ? K : J));
-  }), o.event(e, "click", () => {
-    t.paused = !t.paused;
-  }), e;
+//#endregion
+//#region src/ui/components/play-pause.ts
+function D(e, t) {
+	let n = document.createElement("button");
+	return n.type = "button", n.className = "button button--playback flex-center", e.run((e) => {
+		let r = e.get(t.backend.paused);
+		n.title = r ? "Play" : "Pause", n.setAttribute("aria-label", r ? "Play" : "Pause"), n.replaceChildren(w(r ? v : _));
+	}), e.event(n, "click", () => {
+		t.paused = !t.paused;
+	}), n;
 }
-function it(o) {
-  return o >= 1e6 ? `${(o / 1e6).toFixed(1)} Mbps` : o >= 1e3 ? `${(o / 1e3).toFixed(0)} kbps` : `${o} bps`;
+//#endregion
+//#region src/ui/components/quality-selector.ts
+function O(e) {
+	return e >= 1e6 ? `${(e / 1e6).toFixed(1)} Mbps` : e >= 1e3 ? `${(e / 1e3).toFixed(0)} kbps` : `${e} bps`;
 }
-function st(o, t) {
-  const e = document.createElement("div");
-  e.className = "quality-selector";
-  const r = document.createElement("label");
-  r.htmlFor = "moq-watch-quality-select", r.className = "quality-label", r.textContent = "Quality: ";
-  const a = document.createElement("select");
-  return a.id = "moq-watch-quality-select", a.className = "quality-select", e.append(r, a), o.run((n) => {
-    const i = n.get(t.backend.video.source.catalog), s = n.get(t.backend.video.source.track), l = i?.renditions ?? {};
-    a.replaceChildren();
-    const c = document.createElement("option");
-    c.value = "", c.textContent = "Auto", a.appendChild(c);
-    for (const [p, d] of Object.entries(l)) {
-      const h = document.createElement("option");
-      h.value = p;
-      const f = d.codedWidth && d.codedHeight ? ` (${d.codedWidth}x${d.codedHeight})` : "", b = d.bitrate ? ` ${it(d.bitrate)}` : "";
-      h.textContent = `${p}${f}${b}`, a.appendChild(h);
-    }
-    a.value = s ?? "";
-  }), o.event(a, "change", () => {
-    const n = a.value || void 0;
-    t.backend.video.source.target.update((i) => ({ ...i, name: n }));
-  }), e;
+function k(e, t) {
+	let n = document.createElement("div");
+	n.className = "quality-selector";
+	let r = document.createElement("label");
+	r.htmlFor = "moq-watch-quality-select", r.className = "quality-label", r.textContent = "Quality: ";
+	let i = document.createElement("select");
+	return i.id = "moq-watch-quality-select", i.className = "quality-select", n.append(r, i), e.run((e) => {
+		let n = e.get(t.backend.video.source.catalog), r = e.get(t.backend.video.source.track), a = n?.renditions ?? {};
+		i.replaceChildren();
+		let o = document.createElement("option");
+		o.value = "", o.textContent = "Auto", i.appendChild(o);
+		for (let [e, t] of Object.entries(a)) {
+			let n = document.createElement("option");
+			n.value = e, n.textContent = `${e}${t.codedWidth && t.codedHeight ? ` (${t.codedWidth}x${t.codedHeight})` : ""}${t.bitrate ? ` ${O(t.bitrate)}` : ""}`, i.appendChild(n);
+		}
+		i.value = r ?? "";
+	}), e.event(i, "change", () => {
+		let e = i.value || void 0;
+		t.backend.video.source.target.update((t) => ({
+			...t,
+			name: e
+		}));
+	}), n;
 }
-function lt(o, t) {
-  const e = document.createElement("button");
-  return e.type = "button", e.className = "button flex-center", e.replaceChildren(M(Y)), o.run((r) => {
-    const a = r.get(t);
-    e.title = a ? "Hide stats" : "Show stats", e.setAttribute("aria-label", e.title);
-  }), o.event(e, "click", () => {
-    t.update((r) => !r);
-  }), e;
+//#endregion
+//#region src/ui/components/stats-button.ts
+function A(e, t) {
+	let n = document.createElement("button");
+	return n.type = "button", n.className = "button flex-center", n.replaceChildren(w(y)), e.run((e) => {
+		n.title = e.get(t) ? "Hide stats" : "Show stats", n.setAttribute("aria-label", n.title);
+	}), e.event(n, "click", () => {
+		t.update((e) => !e);
+	}), n;
 }
-function ct(o, t) {
-  return t || o === 0 ? G : o <= 33 ? et : o <= 66 ? at : tt;
+//#endregion
+//#region src/ui/components/volume-slider.ts
+function j(e, t) {
+	return t || e === 0 ? h : e <= 33 ? S : e <= 66 ? C : x;
 }
-function dt(o, t) {
-  const e = document.createElement("div");
-  e.className = "volume-slider flex-center";
-  const r = document.createElement("button");
-  r.type = "button", r.className = "button flex-center";
-  const a = document.createElement("input");
-  a.type = "range", a.min = "0", a.max = "100";
-  const n = document.createElement("span");
-  return n.className = "volume-label", e.append(r, a, n), o.run((i) => {
-    const s = i.get(t.backend.audio.volume), l = i.get(t.backend.audio.muted), c = Math.round(s * 100);
-    a.value = c.toString(), n.textContent = c.toString(), r.title = l ? "Unmute" : "Mute", r.setAttribute("aria-label", r.title), r.replaceChildren(M(ct(c, l)));
-  }), o.event(a, "input", () => {
-    t.backend.audio.volume.set(Number.parseFloat(a.value) / 100);
-  }), o.event(r, "click", () => {
-    t.backend.audio.muted.update((i) => !i);
-  }), e;
+function M(e, t) {
+	let n = document.createElement("div");
+	n.className = "volume-slider flex-center";
+	let r = document.createElement("button");
+	r.type = "button", r.className = "button flex-center";
+	let i = document.createElement("input");
+	i.type = "range", i.min = "0", i.max = "100";
+	let a = document.createElement("span");
+	return a.className = "volume-label", n.append(r, i, a), e.run((e) => {
+		let n = e.get(t.backend.audio.volume), o = e.get(t.backend.audio.muted), s = Math.round(n * 100);
+		i.value = s.toString(), a.textContent = s.toString(), r.title = o ? "Unmute" : "Mute", r.setAttribute("aria-label", r.title), r.replaceChildren(w(j(s, o)));
+	}), e.event(i, "input", () => {
+		t.backend.audio.volume.set(Number.parseFloat(i.value) / 100);
+	}), e.event(r, "click", () => {
+		t.backend.audio.muted.update((e) => !e);
+	}), n;
 }
-function ut(o, t, e) {
-  return o ? t === "disconnected" ? { variant: "error", text: "Disconnected" } : t === "connecting" ? { variant: "connecting", text: "Connecting..." } : e === "offline" ? { variant: "error", text: "Offline" } : e === "loading" ? { variant: "loading", text: "Loading..." } : e === "live" ? { variant: "live", text: "Live" } : { variant: "connected", text: "Connected" } : { variant: "error", text: "No URL" };
+//#endregion
+//#region src/ui/components/watch-status-indicator.ts
+function N(e, t, n) {
+	return e ? t === "disconnected" ? {
+		variant: "error",
+		text: "Disconnected"
+	} : t === "connecting" ? {
+		variant: "connecting",
+		text: "Connecting..."
+	} : n === "offline" ? {
+		variant: "error",
+		text: "Offline"
+	} : n === "loading" ? {
+		variant: "loading",
+		text: "Loading..."
+	} : n === "live" ? {
+		variant: "live",
+		text: "Live"
+	} : {
+		variant: "connected",
+		text: "Connected"
+	} : {
+		variant: "error",
+		text: "No URL"
+	};
 }
-function pt(o, t) {
-  const e = document.createElement("div");
-  e.className = "status-indicator flex-center";
-  const r = document.createElement("span"), a = document.createElement("span");
-  return e.append(r, a), o.run((n) => {
-    const i = n.get(t.connection.url), s = n.get(t.connection.status), l = n.get(t.broadcast.status), { variant: c, text: p } = ut(i, s, l);
-    r.className = `status-indicator-dot status-indicator-dot--${c}`, a.className = `status-indicator-text status-indicator-text--${c}`, a.textContent = p;
-  }), e;
+function P(e, t) {
+	let n = document.createElement("div");
+	n.className = "status-indicator flex-center";
+	let r = document.createElement("span"), i = document.createElement("span");
+	return n.append(r, i), e.run((e) => {
+		let { variant: n, text: a } = N(e.get(t.connection.url), e.get(t.connection.status), e.get(t.broadcast.status));
+		r.className = `status-indicator-dot status-indicator-dot--${n}`, i.className = `status-indicator-text status-indicator-text--${n}`, i.textContent = a;
+	}), n;
 }
-const $ = 250;
-function z(o, t, e) {
-  const r = v("div", { className: `stats-item stats-item--${o}` }), a = v("div", { className: "stats-icon-wrapper" });
-  a.appendChild(M(e));
-  const n = v("span", { className: "stats-item-title" }, t), i = v("span", { className: "stats-item-data" }, "N/A"), s = v("div", { className: "stats-item-detail" });
-  return s.append(n, i), r.append(a, s), { el: r, data: i };
+//#endregion
+//#region src/ui/stats.ts
+var F = 250;
+function I(e, n, r) {
+	let i = t("div", { className: `stats-item stats-item--${e}` }), a = t("div", { className: "stats-icon-wrapper" });
+	a.appendChild(w(r));
+	let o = t("span", { className: "stats-item-title" }, n), s = t("span", { className: "stats-item-data" }, "N/A"), c = t("div", { className: "stats-item-detail" });
+	return c.append(o, s), i.append(a, c), {
+		el: i,
+		data: s
+	};
 }
-function B(o) {
-  return o >= 1e6 ? `${(o / 1e6).toFixed(1)}Mbps` : o >= 1e3 ? `${(o / 1e3).toFixed(0)}kbps` : `${o.toFixed(0)}bps`;
+function L(e) {
+	return e >= 1e6 ? `${(e / 1e6).toFixed(1)}Mbps` : e >= 1e3 ? `${(e / 1e3).toFixed(0)}kbps` : `${e.toFixed(0)}bps`;
 }
-function q(o, t) {
-  if (o === void 0 || o <= 0) return null;
-  const e = t === "down" ? "↓" : "↑";
-  return o >= 1e9 ? `${e} ${(o / 1e9).toFixed(1)}Gbps` : `${e} ${B(o)}`;
+function R(e, t) {
+	if (e === void 0 || e <= 0) return null;
+	let n = t === "down" ? "↓" : "↑";
+	return e >= 1e9 ? `${n} ${(e / 1e9).toFixed(1)}Gbps` : `${n} ${L(e)}`;
 }
-function ht(o, t) {
-  const { el: e, data: r } = z("network", "network", Q);
-  return o.interval(() => {
-    const a = t.connection.established.peek();
-    if (!a) {
-      r.textContent = "N/A";
-      return;
-    }
-    const n = a.rtt?.peek(), i = [
-      q(a.recvBandwidth?.peek(), "down"),
-      q(a.sendBandwidth?.peek(), "up"),
-      n !== void 0 && n > 0 ? `${n.toFixed(0)}ms` : null
-    ].filter((s) => s !== null);
-    r.textContent = i.length > 0 ? i.join(`
-`) : "N/A";
-  }, $), e;
+function z(e, t) {
+	let { el: n, data: r } = I("network", "network", g);
+	return e.interval(() => {
+		let e = t.connection.established.peek();
+		if (!e) {
+			r.textContent = "N/A";
+			return;
+		}
+		let n = e.rtt?.peek(), i = [
+			R(e.recvBandwidth?.peek(), "down"),
+			R(e.sendBandwidth?.peek(), "up"),
+			n !== void 0 && n > 0 ? `${n.toFixed(0)}ms` : null
+		].filter((e) => e !== null);
+		r.textContent = i.length > 0 ? i.join("\n") : "N/A";
+	}, F), n;
 }
-function gt(o, t) {
-  const { el: e, data: r } = z("video", "video", Z);
-  let a = 0, n = 0, i = performance.now();
-  return o.interval(() => {
-    const s = t.backend.video.source.catalog.peek(), l = t.backend.video.stats.peek(), c = performance.now(), p = c - i;
-    let d;
-    if (l && a > 0 && p > 0) {
-      const m = l.frameCount - a;
-      m > 0 && (d = m / (p / 1e3));
-    }
-    let h;
-    if (l && n > 0 && p > 0) {
-      const m = l.bytesReceived - n;
-      m > 0 && (h = B(m * 8 * (1e3 / p)));
-    }
-    l && (a = l.frameCount, n = l.bytesReceived, i = c);
-    const { width: f, height: b } = s?.display ?? {};
-    r.textContent = [
-      f && b ? `${f}x${b}` : "N/A",
-      d !== void 0 ? `@${d.toFixed(1)} fps` : "N/A",
-      h ?? "N/A"
-    ].join(`
-`);
-  }, $), e;
+function B(e, t) {
+	let { el: n, data: r } = I("video", "video", b), i = 0, a = 0, o = performance.now();
+	return e.interval(() => {
+		let e = t.backend.video.source.catalog.peek(), n = t.backend.video.stats.peek(), s = performance.now(), c = s - o, l;
+		if (n && i > 0 && c > 0) {
+			let e = n.frameCount - i;
+			e > 0 && (l = e / (c / 1e3));
+		}
+		let u;
+		if (n && a > 0 && c > 0) {
+			let e = n.bytesReceived - a;
+			e > 0 && (u = L(e * 8 * (1e3 / c)));
+		}
+		n && (i = n.frameCount, a = n.bytesReceived, o = s);
+		let { width: d, height: f } = e?.display ?? {};
+		r.textContent = [
+			d && f ? `${d}x${f}` : "N/A",
+			l === void 0 ? "N/A" : `@${l.toFixed(1)} fps`,
+			u ?? "N/A"
+		].join("\n");
+	}, F), n;
 }
-function ft(o, t) {
-  const { el: e, data: r } = z("audio", "audio", U);
-  let a = 0, n = performance.now();
-  return o.interval(() => {
-    const i = t.backend.audio.source.track.peek(), s = t.backend.audio.source.config.peek(), l = t.backend.audio.stats.peek();
-    if (!i || !s) {
-      r.textContent = "N/A";
-      return;
-    }
-    const c = performance.now();
-    let p;
-    if (l && a > 0) {
-      const h = l.bytesReceived - a, f = c - n;
-      h > 0 && f > 0 && (p = B(h * 8 * (1e3 / f)));
-    }
-    l && (a = l.bytesReceived, n = c);
-    const d = [];
-    s.sampleRate && d.push(`${(s.sampleRate / 1e3).toFixed(1)}kHz`), s.numberOfChannels && d.push(`${s.numberOfChannels}ch`), d.push(p ?? "N/A"), s.codec && d.push(s.codec), r.textContent = d.length > 0 ? d.join(`
-`) : "N/A";
-  }, $), e;
+function V(e, t) {
+	let { el: n, data: r } = I("audio", "audio", d), i = 0, a = performance.now();
+	return e.interval(() => {
+		let e = t.backend.audio.source.track.peek(), n = t.backend.audio.source.config.peek(), o = t.backend.audio.stats.peek();
+		if (!e || !n) {
+			r.textContent = "N/A";
+			return;
+		}
+		let s = performance.now(), c;
+		if (o && i > 0) {
+			let e = o.bytesReceived - i, t = s - a;
+			e > 0 && t > 0 && (c = L(e * 8 * (1e3 / t)));
+		}
+		o && (i = o.bytesReceived, a = s);
+		let l = [];
+		n.sampleRate && l.push(`${(n.sampleRate / 1e3).toFixed(1)}kHz`), n.numberOfChannels && l.push(`${n.numberOfChannels}ch`), l.push(c ?? "N/A"), n.codec && l.push(n.codec), r.textContent = l.length > 0 ? l.join("\n") : "N/A";
+	}, F), n;
 }
-function mt(o, t) {
-  const { el: e, data: r } = z("buffer", "buffer", D);
-  return o.run((a) => {
-    const n = a.get(t.backend.jitter);
-    r.textContent = `${Math.round(n)}ms`;
-  }), e;
+function H(e, t) {
+	let { el: n, data: r } = I("buffer", "buffer", f);
+	return e.run((e) => {
+		let n = e.get(t.backend.jitter);
+		r.textContent = `${Math.round(n)}ms`;
+	}), n;
 }
-function vt(o, t, e) {
-  const r = v("div", { className: "stats" }), a = v("div", { className: "stats-panel" });
-  return r.appendChild(a), o.run((n) => {
-    const i = n.get(e);
-    r.style.display = i ? "" : "none", i && (C(n, a, ht(n, t)), C(n, a, gt(n, t)), C(n, a, ft(n, t)), C(n, a, mt(n, t)));
-  }), r;
+function U(n, r, i) {
+	let a = t("div", { className: "stats" }), o = t("div", { className: "stats-panel" });
+	return a.appendChild(o), n.run((t) => {
+		let n = t.get(i);
+		a.style.display = n ? "" : "none", n && (e(t, o, z(t, r)), e(t, o, B(t, r)), e(t, o, V(t, r)), e(t, o, H(t, r)));
+	}), a;
 }
-const bt = ':host{--color-white: #ffffff;--color-white-alpha-05: rgba(255, 255, 255, .05);--color-white-alpha-10: rgba(255, 255, 255, .1);--color-white-alpha-15: rgba(255, 255, 255, .15);--color-white-alpha-20: rgba(255, 255, 255, .2);--color-white-alpha-25: rgba(255, 255, 255, .25);--color-white-alpha-30: rgba(255, 255, 255, .3);--color-white-alpha-40: rgba(255, 255, 255, .4);--color-white-alpha-70: rgba(255, 255, 255, .7);--color-white-alpha-90: rgba(255, 255, 255, .9);--color-gray-100: #9ca3af;--color-gray-950: #1a1a1a;--color-blue-400: #00dfff;--color-blue-500: #52a1ff;--color-blue-900: #1b3243;--color-purple-400: #a855f7;--color-purple-900: #31144a;--color-green-400: #65ee2e;--color-green-900: #3d4928;--color-yellow-400: #facc15;--color-orange-400: #ff9900;--color-orange-450: #fb923c;--color-orange-500: #f97316;--color-orange-900: #4d301b;--color-amber-600: #d97706;--color-orange-500-alpha-60: rgba(249, 115, 22, .6);--color-orange-500-alpha-80: rgba(249, 115, 22, .8);--color-black-alpha-08: rgba(0, 0, 0, .08);--color-black-alpha-10: rgba(0, 0, 0, .1);--color-black-alpha-40: rgba(0, 0, 0, .4);--color-black-alpha-85: rgba(0, 0, 0, .85);--spacing-1: .0625rem;--spacing-2: .125rem;--spacing-4: .25rem;--spacing-8: .5rem;--spacing-12: .75rem;--spacing-16: 1rem;--spacing-24: 1.5rem;--spacing-32: 2rem;--spacing-48: 3rem;--border-radius-sm: .5rem;--border-radius-md: .75rem;--border-radius-lg: 1rem}.flex-center{display:flex;justify-content:center;align-items:center}.flex-align-center{align-items:center}.button{color:var(--color-white);cursor:pointer;background-color:var(--color-white-alpha-10);border:var(--spacing-1) solid var(--color-white-alpha-20);border-radius:50%;width:2.25rem;height:2.25rem;transform-origin:center;transition:transform .1s cubic-bezier(.4,0,.2,1)}.button:hover:not(:disabled){transform:scale(1.02);background-color:var(--color-white-alpha-20);box-shadow:0 var(--spacing-2) var(--spacing-8) var(--color-black-alpha-10)}.button:active:not(:disabled){transform:scale(.98);box-shadow:0 var(--spacing-1) var(--spacing-4) var(--color-black-alpha-08)}.button:disabled{opacity:.5;cursor:default;color:var(--color-gray-100)}.stats{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;pointer-events:none;z-index:2;width:100%;height:inherit;container-type:inline-size}.stats .stats-panel{position:absolute;display:flex;align-items:flex-start;justify-content:center;flex-direction:row;flex-wrap:wrap;gap:var(--spacing-12);max-width:240px;width:100%;background-color:var(--color-black-alpha-85);border:1px solid var(--color-white-alpha-25);border-radius:8px;padding:var(--spacing-12);pointer-events:auto;top:8px}@container (width > 480px) and (width <= 768px){.stats .stats-panel{max-width:360px;padding:var(--spacing-24)}}@container (width > 768px){.stats .stats-panel{max-width:600px;padding:var(--spacing-24)}}.stats .stats-panel .stats-item{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:row;height:auto;column-gap:var(--spacing-8);flex-basis:calc(50% - var(--spacing-12));flex-grow:1;flex-shrink:1}@container (width > 480px){.stats .stats-panel .stats-item{flex-basis:calc(25% - var(--spacing-12))}}.stats .stats-panel .stats-item .stats-icon-wrapper{display:none;padding:var(--spacing-8);border-radius:8px;width:fit-content;height:fit-content;flex-shrink:0}@container (width > 480px){.stats .stats-panel .stats-item .stats-icon-wrapper{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-direction:row}}.stats .stats-panel .stats-item .stats-icon-wrapper svg{width:100%;height:100%}.stats .stats-panel .stats-item.stats-item--network .stats-icon-wrapper{background-color:var(--color-blue-900)}.stats .stats-panel .stats-item.stats-item--network,.stats .stats-panel .stats-item.stats-item--network .stats-item-data{color:var(--color-blue-400)}.stats .stats-panel .stats-item.stats-item--video .stats-icon-wrapper{background-color:var(--color-purple-900)}.stats .stats-panel .stats-item.stats-item--video,.stats .stats-panel .stats-item.stats-item--video .stats-item-data{color:var(--color-purple-400)}.stats .stats-panel .stats-item.stats-item--audio .stats-icon-wrapper{background-color:var(--color-green-900)}.stats .stats-panel .stats-item.stats-item--audio,.stats .stats-panel .stats-item.stats-item--audio .stats-item-data{color:var(--color-green-400)}.stats .stats-panel .stats-item.stats-item--buffer .stats-icon-wrapper{background-color:var(--color-orange-900)}.stats .stats-panel .stats-item.stats-item--buffer,.stats .stats-panel .stats-item.stats-item--buffer .stats-item-data{color:var(--color-orange-400)}.stats .stats-panel .stats-item .stats-item-detail{display:flex;align-items:flex-start;justify-content:space-evenly;flex-direction:column;gap:var(--spacing-4)}.stats .stats-panel .stats-item .stats-item-detail .stats-item-title{font-size:12px;font-weight:500;text-transform:capitalize;color:var(--color-gray-100);font-family:Segoe UI,Roboto,sans-serif;letter-spacing:1px;line-height:12px}.stats .stats-panel .stats-item .stats-item-detail .stats-item-data{font-size:16px;font-weight:700;font-family:Segoe UI,Roboto,sans-serif;white-space:pre-wrap;line-height:1.5}.video-container{display:block;position:relative;width:100%;height:auto;border-radius:var(--spacing-4);margin:0 auto;pointer-events:none}.controls{display:flex;flex-direction:column;gap:var(--spacing-24)}.button.button--playback{width:3rem;height:3rem;background:linear-gradient(to bottom right,var(--color-orange-400),var(--color-orange-500),var(--color-amber-600));box-shadow:0 0 var(--spacing-16) var(--color-orange-500-alpha-60);transition:box-shadow .15s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.button.button--playback:hover:not(:disabled){box-shadow:0 0 var(--spacing-24) var(--color-orange-500-alpha-80);transform:scale(1.02)}.button.button--playback:active:not(:disabled){transform:scale(.98)}.button.button--playback:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,var(--color-white-alpha-30),transparent);opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1);pointer-events:none}.button.button--playback:hover:before{opacity:1}.button.button--playback:after{content:"";position:absolute;inset:0;background-color:var(--color-white-alpha-20);border-radius:50%;filter:blur(var(--spacing-24));pointer-events:none}.playback-controls{display:flex;place-content:center space-around;gap:var(--spacing-8);padding:var(--spacing-8) 0}.latency-controls{display:flex;flex-direction:column;gap:var(--spacing-16)}.volume-slider{gap:var(--spacing-4)}.volume-label{width:var(--spacing-16);text-align:right}.quality-selector{display:flex;align-items:center;gap:var(--spacing-8);background:transparent;border-radius:var(--spacing-8)}.quality-label{font-size:1.25rem;font-weight:500;color:var(--color-white);white-space:nowrap}.quality-select{flex:0 1 auto;font-size:1rem;padding:var(--spacing-8);border-radius:var(--spacing-4);background:var(--color-white-alpha-10);color:var(--color-white);border:var(--spacing-1) solid var(--color-white-alpha-20);cursor:pointer;transition:background .2s ease}.quality-select:hover{background:var(--color-white-alpha-15)}.quality-select:focus{outline:var(--spacing-2) solid var(--color-white-alpha-30);outline-offset:var(--spacing-2)}.quality-select option{background:var(--color-gray-950);color:var(--color-white)}.buffer{width:100%}.buffer-visualization{position:relative;width:100%;height:3.75rem;background:var(--color-white-alpha-10);border-radius:var(--spacing-4);cursor:pointer;user-select:none;padding-left:var(--spacing-48);box-sizing:border-box}.buffer-playhead{position:absolute;left:var(--spacing-48);top:0;bottom:0;width:var(--spacing-2);background:var(--color-white);z-index:3}.buffer-track{display:flex;align-items:center;position:absolute;left:var(--spacing-48);right:0;height:var(--spacing-24)}.buffer-track--video{top:var(--spacing-4)}.buffer-track--audio{top:var(--spacing-32)}.buffer-track-label{position:absolute;left:-2.875rem;width:2.5rem;font-size:.625rem;color:var(--color-white-alpha-70);text-align:right;padding-right:var(--spacing-4);pointer-events:none;box-sizing:border-box}.buffer-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.buffer-target-area{position:absolute;top:0;bottom:0;left:var(--spacing-48);right:0;pointer-events:none}.buffer-target-line{position:absolute;top:0;bottom:0;width:.1875rem;background:var(--color-orange-400, var(--color-orange-450));z-index:2;cursor:ew-resize;border-radius:var(--spacing-1);pointer-events:auto}.buffer-target-label{position:absolute;bottom:100%;left:50%;transform:translate(-50%);font-size:.6875rem;font-weight:500;color:var(--color-orange-400, var(--color-orange-450));white-space:nowrap;margin-bottom:var(--spacing-2);opacity:0;transition:opacity .15s ease;pointer-events:none}.buffer-visualization:hover .buffer-target-label,.buffer-visualization--dragging .buffer-target-label{opacity:1}.buffer-help{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.75rem;color:var(--color-white-alpha-30, rgba(255, 255, 255, .3));pointer-events:none;white-space:nowrap}.buffering{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;z-index:1;background-color:var(--color-black-alpha-40);backdrop-filter:blur(var(--spacing-2));pointer-events:auto}.buffering-spinner{width:2.5rem;height:2.5rem;border:var(--spacing-4) solid var(--color-white-alpha-20);border-top:var(--spacing-4) solid var(--color-white);border-radius:50%;animation:buffer-spin 1s linear infinite}@keyframes buffer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.watch-ui__offline-indicator{position:absolute;bottom:1rem;right:1rem;padding:.5rem 1rem;display:flex;align-items:center;justify-content:center;background-color:#000;z-index:4;pointer-events:auto;border-radius:.25rem}.watch-ui__offline-text{font-size:.875rem;font-weight:700;color:#fff;letter-spacing:.08em;text-shadow:none}@media(max-width:768px){.watch-ui__offline-indicator{bottom:.75rem;right:.75rem;padding:.375rem .75rem}.watch-ui__offline-text{font-size:.75rem}}@media(max-width:480px){.watch-ui__offline-indicator{bottom:.5rem;right:.5rem;padding:.25rem .5rem}.watch-ui__offline-text{font-size:.75rem}}.status-indicator{gap:var(--spacing-12);backdrop-filter:blur(var(--spacing-16))}.status-indicator-dot{position:relative;width:.75rem;height:.75rem;border-radius:50%;flex-shrink:0;z-index:1}.status-indicator-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:currentcolor;transform:scale(1);opacity:.5;animation:status-pulse 1.5s ease-out infinite;z-index:-1}.status-indicator-dot:after{display:none}.status-indicator-dot--live:after,.status-indicator-dot--connected:after,.status-indicator-dot--loading:after,.status-indicator-dot--connecting:after{display:block}.status-indicator-dot--error{background:var(--color-gray-100);color:var(--color-gray-100)}.status-indicator-text--error{color:var(--color-gray-100)}.status-indicator-dot--connecting{background:var(--color-yellow-400);color:var(--color-yellow-400)}.status-indicator-text--connecting{color:var(--color-yellow-400)}.status-indicator-dot--loading{background:var(--color-yellow-400);color:var(--color-yellow-400)}.status-indicator-text--loading{color:var(--color-yellow-400)}.status-indicator-dot--live{background:var(--color-green-400);color:var(--color-green-400)}.status-indicator-text--live{color:var(--color-green-400)}.status-indicator-dot--connected{background:var(--color-blue-500);color:var(--color-blue-500)}.status-indicator-text--connected{color:var(--color-blue-500)}.status-indicator-text{font-size:1rem;letter-spacing:.1rem}@keyframes status-pulse{0%{transform:scale(1);opacity:.5}70%{opacity:.25}to{transform:scale(2.5);opacity:0}}';
-class wt extends HTMLElement {
-  #e;
-  #t;
-  #o = new R(void 0);
-  #a;
-  constructor() {
-    super(), this.#t = this.attachShadow({ mode: "open" });
-    const t = document.createElement("style");
-    t.textContent = bt, this.#t.appendChild(t), this.#a = new MutationObserver(() => this.#n());
-  }
-  connectedCallback() {
-    this.#n(), this.#a.observe(this, { childList: !0 });
-    const t = new T();
-    this.#e = t, t.run(this.#r.bind(this));
-  }
-  disconnectedCallback() {
-    this.#a.disconnect(), this.#e?.close(), this.#e = void 0;
-  }
-  #n() {
-    const t = this.querySelector("moq-watch");
-    this.#o.set(t ?? void 0);
-  }
-  #r(t) {
-    const e = t.get(this.#o);
-    if (!e) return;
-    const r = new R(!1), a = v("div", { className: "video-container" });
-    a.append(
-      v("slot"),
-      vt(t, e, r),
-      O(t, e),
-      nt(t, e)
-    );
-    const n = v("div", { className: "controls" }), i = v("div", { className: "playback-controls flex-align-center" });
-    i.append(
-      rt(t, e),
-      dt(t, e),
-      pt(t, e),
-      lt(t, r),
-      ot(t, e)
-    );
-    const s = v("div", { className: "latency-controls" });
-    s.append(V(t, e), st(t, e)), n.append(i, s), C(t, this.#t, a), C(t, this.#t, n);
-  }
-}
-customElements.define("moq-watch-ui", wt);
-export {
-  wt as default
+//#endregion
+//#region src/ui/styles/index.css?inline
+var W = ":host{--color-white:#fff;--color-white-alpha-05:#ffffff0d;--color-white-alpha-10:#ffffff1a;--color-white-alpha-15:#ffffff26;--color-white-alpha-20:#fff3;--color-white-alpha-25:#ffffff40;--color-white-alpha-30:#ffffff4d;--color-white-alpha-40:#fff6;--color-white-alpha-70:#ffffffb3;--color-white-alpha-90:#ffffffe6;--color-gray-100:#9ca3af;--color-gray-950:#1a1a1a;--color-blue-400:#00dfff;--color-blue-500:#52a1ff;--color-blue-900:#1b3243;--color-purple-400:#a855f7;--color-purple-900:#31144a;--color-green-400:#65ee2e;--color-green-900:#3d4928;--color-yellow-400:#facc15;--color-orange-400:#f90;--color-orange-450:#fb923c;--color-orange-500:#f97316;--color-orange-900:#4d301b;--color-amber-600:#d97706;--color-orange-500-alpha-60:#f9731699;--color-orange-500-alpha-80:#f97316cc;--color-black-alpha-08:#00000014;--color-black-alpha-10:#0000001a;--color-black-alpha-40:#0006;--color-black-alpha-85:#000000d9;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-48:3rem;--border-radius-sm:.5rem;--border-radius-md:.75rem;--border-radius-lg:1rem}.flex-center{justify-content:center;align-items:center;display:flex}.flex-align-center{align-items:center}.button{color:var(--color-white);cursor:pointer;background-color:var(--color-white-alpha-10);border:var(--spacing-1) solid var(--color-white-alpha-20);transform-origin:50%;border-radius:50%;width:2.25rem;height:2.25rem;transition:transform .1s cubic-bezier(.4,0,.2,1)}.button:hover:not(:disabled){background-color:var(--color-white-alpha-20);box-shadow:0 var(--spacing-2) var(--spacing-8) var(--color-black-alpha-10);transform:scale(1.02)}.button:active:not(:disabled){box-shadow:0 var(--spacing-1) var(--spacing-4) var(--color-black-alpha-08);transform:scale(.98)}.button:disabled{opacity:.5;cursor:default;color:var(--color-gray-100)}.stats{pointer-events:none;z-index:2;width:100%;height:inherit;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;container-type:inline-size}.stats .stats-panel{justify-content:center;align-items:flex-start;gap:var(--spacing-12);background-color:var(--color-black-alpha-85);border:1px solid var(--color-white-alpha-25);width:100%;max-width:240px;padding:var(--spacing-12);pointer-events:auto;border-radius:8px;flex-flow:wrap;display:flex;position:absolute;top:8px}@container (width>480px) and (width<=768px){.stats .stats-panel{max-width:360px;padding:var(--spacing-24)}}@container (width>768px){.stats .stats-panel{max-width:600px;padding:var(--spacing-24)}}.stats .stats-panel .stats-item{justify-content:flex-start;align-items:flex-start;column-gap:var(--spacing-8);flex-direction:row;flex-basis:calc(50% - var(--spacing-12));flex-grow:1;flex-shrink:1;height:auto;display:flex}@container (width>480px){.stats .stats-panel .stats-item{flex-basis:calc(25% - var(--spacing-12))}}.stats .stats-panel .stats-item .stats-icon-wrapper{padding:var(--spacing-8);border-radius:8px;flex-shrink:0;width:fit-content;height:fit-content;display:none}@container (width>480px){.stats .stats-panel .stats-item .stats-icon-wrapper{flex-direction:row;justify-content:center;align-items:center;width:24px;height:24px;display:flex}}.stats .stats-panel .stats-item .stats-icon-wrapper svg{width:100%;height:100%}.stats .stats-panel .stats-item.stats-item--network .stats-icon-wrapper{background-color:var(--color-blue-900)}.stats .stats-panel .stats-item.stats-item--network,.stats .stats-panel .stats-item.stats-item--network .stats-item-data{color:var(--color-blue-400)}.stats .stats-panel .stats-item.stats-item--video .stats-icon-wrapper{background-color:var(--color-purple-900)}.stats .stats-panel .stats-item.stats-item--video,.stats .stats-panel .stats-item.stats-item--video .stats-item-data{color:var(--color-purple-400)}.stats .stats-panel .stats-item.stats-item--audio .stats-icon-wrapper{background-color:var(--color-green-900)}.stats .stats-panel .stats-item.stats-item--audio,.stats .stats-panel .stats-item.stats-item--audio .stats-item-data{color:var(--color-green-400)}.stats .stats-panel .stats-item.stats-item--buffer .stats-icon-wrapper{background-color:var(--color-orange-900)}.stats .stats-panel .stats-item.stats-item--buffer,.stats .stats-panel .stats-item.stats-item--buffer .stats-item-data{color:var(--color-orange-400)}.stats .stats-panel .stats-item .stats-item-detail{justify-content:space-evenly;align-items:flex-start;gap:var(--spacing-4);flex-direction:column;display:flex}.stats .stats-panel .stats-item .stats-item-detail .stats-item-title{text-transform:capitalize;color:var(--color-gray-100);letter-spacing:1px;font-family:Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:500;line-height:12px}.stats .stats-panel .stats-item .stats-item-detail .stats-item-data{white-space:pre-wrap;font-family:Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:700;line-height:1.5}.video-container{border-radius:var(--spacing-4);pointer-events:none;width:100%;height:auto;margin:0 auto;display:block;position:relative}.controls{gap:var(--spacing-24);flex-direction:column;display:flex}.button.button--playback{background:linear-gradient(to bottom right, var(--color-orange-400), var(--color-orange-500), var(--color-amber-600));width:3rem;height:3rem;box-shadow:0 0 var(--spacing-16) var(--color-orange-500-alpha-60);transition:box-shadow .15s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.button.button--playback:hover:not(:disabled){box-shadow:0 0 var(--spacing-24) var(--color-orange-500-alpha-80);transform:scale(1.02)}.button.button--playback:active:not(:disabled){transform:scale(.98)}.button.button--playback:before{content:\"\";background:linear-gradient(to bottom right, var(--color-white-alpha-30), transparent);opacity:0;pointer-events:none;transition:opacity .15s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}.button.button--playback:hover:before{opacity:1}.button.button--playback:after{content:\"\";background-color:var(--color-white-alpha-20);filter:blur(var(--spacing-24));pointer-events:none;border-radius:50%;position:absolute;inset:0}.playback-controls{place-content:center space-around;gap:var(--spacing-8);padding:var(--spacing-8) 0;display:flex}.latency-controls{gap:var(--spacing-16);flex-direction:column;display:flex}.volume-slider{gap:var(--spacing-4)}.volume-label{width:var(--spacing-16);text-align:right}.quality-selector{align-items:center;gap:var(--spacing-8);border-radius:var(--spacing-8);background:0 0;display:flex}.quality-label{color:var(--color-white);white-space:nowrap;font-size:1.25rem;font-weight:500}.quality-select{padding:var(--spacing-8);border-radius:var(--spacing-4);background:var(--color-white-alpha-10);color:var(--color-white);border:var(--spacing-1) solid var(--color-white-alpha-20);cursor:pointer;flex:0 auto;font-size:1rem;transition:background .2s}.quality-select:hover{background:var(--color-white-alpha-15)}.quality-select:focus{outline:var(--spacing-2) solid var(--color-white-alpha-30);outline-offset:var(--spacing-2)}.quality-select option{background:var(--color-gray-950);color:var(--color-white)}.buffer{width:100%}.buffer-visualization{background:var(--color-white-alpha-10);border-radius:var(--spacing-4);cursor:pointer;user-select:none;width:100%;height:3.75rem;padding-left:var(--spacing-48);box-sizing:border-box;position:relative}.buffer-playhead{left:var(--spacing-48);width:var(--spacing-2);background:var(--color-white);z-index:3;position:absolute;top:0;bottom:0}.buffer-track{left:var(--spacing-48);height:var(--spacing-24);align-items:center;display:flex;position:absolute;right:0}.buffer-track--video{top:var(--spacing-4)}.buffer-track--audio{top:var(--spacing-32)}.buffer-track-label{width:2.5rem;color:var(--color-white-alpha-70);text-align:right;padding-right:var(--spacing-4);pointer-events:none;box-sizing:border-box;font-size:.625rem;position:absolute;left:-2.875rem}.buffer-canvas{width:100%;height:100%;position:absolute;top:0;left:0}.buffer-target-area{top:0;bottom:0;left:var(--spacing-48);pointer-events:none;position:absolute;right:0}.buffer-target-line{background:var(--color-orange-400,var(--color-orange-450));z-index:2;cursor:ew-resize;border-radius:var(--spacing-1);pointer-events:auto;width:.1875rem;position:absolute;top:0;bottom:0}.buffer-target-label{color:var(--color-orange-400,var(--color-orange-450));white-space:nowrap;margin-bottom:var(--spacing-2);opacity:0;pointer-events:none;font-size:.6875rem;font-weight:500;transition:opacity .15s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.buffer-visualization:hover .buffer-target-label,.buffer-visualization--dragging .buffer-target-label{opacity:1}.buffer-help{color:var(--color-white-alpha-30,#ffffff4d);pointer-events:none;white-space:nowrap;font-size:.75rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.buffering{z-index:1;background-color:var(--color-black-alpha-40);width:100%;height:100%;backdrop-filter:blur(var(--spacing-2));pointer-events:auto;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.buffering-spinner{border:var(--spacing-4) solid var(--color-white-alpha-20);border-top:var(--spacing-4) solid var(--color-white);border-radius:50%;width:2.5rem;height:2.5rem;animation:1s linear infinite buffer-spin}@keyframes buffer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.watch-ui__offline-indicator{z-index:4;pointer-events:auto;background-color:#000;border-radius:.25rem;justify-content:center;align-items:center;padding:.5rem 1rem;display:flex;position:absolute;bottom:1rem;right:1rem}.watch-ui__offline-text{color:#fff;letter-spacing:.08em;text-shadow:none;font-size:.875rem;font-weight:700}@media (width<=768px){.watch-ui__offline-indicator{padding:.375rem .75rem;bottom:.75rem;right:.75rem}.watch-ui__offline-text{font-size:.75rem}}@media (width<=480px){.watch-ui__offline-indicator{padding:.25rem .5rem;bottom:.5rem;right:.5rem}.watch-ui__offline-text{font-size:.75rem}}.status-indicator{gap:var(--spacing-12);backdrop-filter:blur(var(--spacing-16))}.status-indicator-dot{z-index:1;border-radius:50%;flex-shrink:0;width:.75rem;height:.75rem;position:relative}.status-indicator-dot:after{content:\"\";opacity:.5;z-index:-1;background:currentColor;border-radius:50%;animation:1.5s ease-out infinite status-pulse;display:none;position:absolute;inset:0;transform:scale(1)}.status-indicator-dot--live:after,.status-indicator-dot--connected:after,.status-indicator-dot--loading:after,.status-indicator-dot--connecting:after{display:block}.status-indicator-dot--error{background:var(--color-gray-100);color:var(--color-gray-100)}.status-indicator-text--error{color:var(--color-gray-100)}.status-indicator-dot--connecting{background:var(--color-yellow-400);color:var(--color-yellow-400)}.status-indicator-text--connecting{color:var(--color-yellow-400)}.status-indicator-dot--loading{background:var(--color-yellow-400);color:var(--color-yellow-400)}.status-indicator-text--loading{color:var(--color-yellow-400)}.status-indicator-dot--live{background:var(--color-green-400);color:var(--color-green-400)}.status-indicator-text--live{color:var(--color-green-400)}.status-indicator-dot--connected{background:var(--color-blue-500);color:var(--color-blue-500)}.status-indicator-text--connected{color:var(--color-blue-500)}.status-indicator-text{letter-spacing:.1rem;font-size:1rem}@keyframes status-pulse{0%{opacity:.5;transform:scale(1)}70%{opacity:.25}to{opacity:0;transform:scale(2.5)}}", G = class extends HTMLElement {
+	#e;
+	#t;
+	#n = new r(void 0);
+	#r;
+	constructor() {
+		super(), this.#t = this.attachShadow({ mode: "open" });
+		let e = document.createElement("style");
+		e.textContent = W, this.#t.appendChild(e), this.#r = new MutationObserver(() => this.#i());
+	}
+	connectedCallback() {
+		this.#i(), this.#r.observe(this, { childList: !0 });
+		let e = new n();
+		this.#e = e, e.run(this.#a.bind(this));
+	}
+	disconnectedCallback() {
+		this.#r.disconnect(), this.#e?.close(), this.#e = void 0;
+	}
+	#i() {
+		let e = this.querySelector("moq-watch");
+		this.#n.set(e ?? void 0);
+	}
+	#a(n) {
+		let i = n.get(this.#n);
+		if (!i) return;
+		let a = new r(!1), o = t("div", { className: "video-container" });
+		o.append(t("slot"), U(n, i, a), u(n, i), E(n, i));
+		let s = t("div", { className: "controls" }), c = t("div", { className: "playback-controls flex-align-center" });
+		c.append(D(n, i), M(n, i), P(n, i), A(n, a), T(n, i));
+		let d = t("div", { className: "latency-controls" });
+		d.append(l(n, i), k(n, i)), s.append(c, d), e(n, this.#t, o), e(n, this.#t, s);
+	}
 };
-//# sourceMappingURL=element.js.map
+customElements.define("moq-watch-ui", G);
+//#endregion
+export { G as default };
+
+//# sourceMappingURL=element.js.map