@moq/watch 0.3.1 → 0.4.0

package/ui/element.js

@@ -1,31 +1,32 @@
-import { n as e } from "../sync-D67IxmxJ.js";
-import { Effect as t, Signal as n } from "@moq/signals";
-import * as r from "@moq/signals/dom";
+import { n as e } from "../sync-zdwVEj9u.js";
+import * as t from "@moq/net";
+import { Effect as n, Signal as r } from "@moq/signals";
+import * as i from "@moq/signals/dom";
 //#region src/ui/components/buffering-indicator.ts
-function i(e, t) {
+function a(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", a = e.get(t.backend.video.source.error) === "unsupported";
+		let r = e.get(t.video.out.stalled), i = e.get(t.broadcast.out.status) === "offline", a = e.get(t.video.source.out.error) === "unsupported";
 		n.style.display = r && !i && !a ? "" : "none";
 	}), n;
 }
 //#endregion
 //#region src/ui/icons/audio.svg?raw
-var a = "<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>", o = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n	<path d=\"M20 6 9 17l-5-5\" />\n</svg>\n", s = "<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=\"M18 6 6 18\" />\n	<path d=\"m6 6 12 12\" />\n</svg>\n", c = "<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>", l = "<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>", 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\">\n	<path d=\"m12 14 4-4\" />\n	<path d=\"M3.34 19a10 10 0 1 1 17.32 0\" />\n</svg>\n", d = "<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>", 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=\"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>", p = "<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>", m = "<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>", h = "<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	<line x1=\"21\" x2=\"14\" y1=\"4\" y2=\"4\" />\n	<line x1=\"10\" x2=\"3\" y1=\"4\" y2=\"4\" />\n	<line x1=\"21\" x2=\"12\" y1=\"12\" y2=\"12\" />\n	<line x1=\"8\" x2=\"3\" y1=\"12\" y2=\"12\" />\n	<line x1=\"21\" x2=\"16\" y1=\"20\" y2=\"20\" />\n	<line x1=\"12\" x2=\"3\" y1=\"20\" y2=\"20\" />\n	<line x1=\"14\" x2=\"14\" y1=\"2\" y2=\"6\" />\n	<line x1=\"8\" x2=\"8\" y1=\"10\" y2=\"14\" />\n	<line x1=\"16\" x2=\"16\" y1=\"18\" y2=\"22\" />\n</svg>\n", 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=\"M5 21v-6\" />\n	<path d=\"M12 21V3\" />\n	<path d=\"M19 21V9\" />\n</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\">\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>", 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=\"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>", y = "<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>", b = "<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>";
+var o = "<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>", s = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n	<path d=\"M20 6 9 17l-5-5\" />\n</svg>\n", c = "<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=\"M18 6 6 18\" />\n	<path d=\"m6 6 12 12\" />\n</svg>\n", l = "<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>", 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\">\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>", 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=\"m12 14 4-4\" />\n	<path d=\"M3.34 19a10 10 0 1 1 17.32 0\" />\n</svg>\n", f = "<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>", 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=\"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>", m = "<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>", 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=\"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>", 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	<line x1=\"21\" x2=\"14\" y1=\"4\" y2=\"4\" />\n	<line x1=\"10\" x2=\"3\" y1=\"4\" y2=\"4\" />\n	<line x1=\"21\" x2=\"12\" y1=\"12\" y2=\"12\" />\n	<line x1=\"8\" x2=\"3\" y1=\"12\" y2=\"12\" />\n	<line x1=\"21\" x2=\"16\" y1=\"20\" y2=\"20\" />\n	<line x1=\"12\" x2=\"3\" y1=\"20\" y2=\"20\" />\n	<line x1=\"14\" x2=\"14\" y1=\"2\" y2=\"6\" />\n	<line x1=\"8\" x2=\"8\" y1=\"10\" y2=\"14\" />\n	<line x1=\"16\" x2=\"16\" y1=\"18\" y2=\"22\" />\n</svg>\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=\"M5 21v-6\" />\n	<path d=\"M12 21V3\" />\n	<path d=\"M19 21V9\" />\n</svg>", v = "<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>", y = "<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>", b = "<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>", 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</svg>";
 //#endregion
 //#region src/ui/icons.ts
-function x(e) {
+function S(e) {
 	let t = document.createElement("span");
 	return t.className = "flex-center", t.setAttribute("role", "img"), t.setAttribute("aria-hidden", "true"), t.innerHTML = e, t;
 }
 //#endregion
 //#region src/ui/components/center-play.ts
-function S(e, t) {
+function C(e, t) {
 	let n = document.createElement("button");
-	return n.type = "button", n.className = "center-play flex-center", n.title = "Play", n.setAttribute("aria-label", "Play"), n.replaceChildren(x(m)), e.run((e) => {
-		let r = e.get(t.backend.paused), i = e.get(t.backend.video.source.error);
+	return n.type = "button", n.className = "center-play flex-center", n.title = "Play", n.setAttribute("aria-label", "Play"), n.replaceChildren(S(h)), e.run((e) => {
+		let r = e.get(t.controls.paused), i = e.get(t.video.source.out.error);
 		n.style.display = r && !i ? "" : "none";
 	}), e.event(n, "click", () => {
 		t.paused = !1;
@@ -33,81 +34,76 @@ function S(e, t) {
 }
 //#endregion
 //#region src/ui/fullscreen.ts
-var C = "player--pseudo-fullscreen";
-function w(e, t, n) {
-	let r = document, i = /* @__PURE__ */ new Set(), a = () => {
-		for (let e of i) e();
+var w = "player--pseudo-fullscreen";
+function T(e, t) {
+	let n = document, r = /* @__PURE__ */ new Set(), i = () => {
+		for (let e of r) e();
 	};
-	e.event(document, "fullscreenchange", a), e.event(document, "webkitfullscreenchange", a);
-	let o, s = () => !!(document.fullscreenElement || r.webkitFullscreenElement || o?.webkitDisplayingFullscreen), c = () => t.classList.contains(C), l = () => s() || c(), u = () => {
-		let r = t;
-		if (r.requestFullscreen) {
-			r.requestFullscreen().catch(() => f());
-			return;
-		}
-		if (r.webkitRequestFullscreen) {
-			r.webkitRequestFullscreen();
+	e.event(document, "fullscreenchange", i), e.event(document, "webkitfullscreenchange", i);
+	let a = () => !!(document.fullscreenElement || n.webkitFullscreenElement), o = () => t.classList.contains(w), s = () => a() || o(), c = () => {
+		let e = t;
+		if (e.requestFullscreen) {
+			e.requestFullscreen().catch(() => u());
 			return;
 		}
-		let i = n();
-		if (i?.webkitEnterFullscreen && i.webkitSupportsFullscreen !== !1) {
-			o !== i && (o = i, e.event(i, "webkitbeginfullscreen", a), e.event(i, "webkitendfullscreen", a)), i.webkitEnterFullscreen();
+		if (e.webkitRequestFullscreen) {
+			e.webkitRequestFullscreen();
 			return;
 		}
-		f();
-	}, d = () => {
-		if (c()) {
-			p();
+		u();
+	}, l = () => {
+		if (o()) {
+			d();
 			return;
 		}
 		if (document.exitFullscreen) {
 			document.exitFullscreen().catch(() => {});
 			return;
 		}
-		r.webkitExitFullscreen?.();
-	}, f = () => {
-		t.classList.add(C), a();
-	}, p = () => {
-		t.classList.remove(C), a();
+		n.webkitExitFullscreen?.();
+	}, u = () => {
+		t.classList.add(w), i();
+	}, d = () => {
+		t.classList.remove(w), i();
 	};
 	return {
-		active: l,
-		toggle: () => l() ? d() : u(),
-		onChange: (e) => (i.add(e), () => i.delete(e))
+		active: s,
+		toggle: () => s() ? l() : c(),
+		onChange: (e) => (r.add(e), () => r.delete(e))
 	};
 }
 //#endregion
 //#region src/ui/components/button.ts
-function T(e, t) {
+function E(e, t) {
 	let n = document.createElement("button");
-	return n.type = "button", n.className = "control flex-center", n.title = t, n.setAttribute("aria-label", t), n.replaceChildren(x(e)), n;
+	return n.type = "button", n.className = "control flex-center", n.title = t, n.setAttribute("aria-label", t), n.replaceChildren(S(e)), n;
 }
 //#endregion
 //#region src/ui/components/fullscreen-button.ts
-function E(e, t, n) {
-	let r = T(c, "Fullscreen"), i = w(e, t, () => n.querySelector("video") ?? n.querySelector("canvas")), a = () => {
-		let e = i.active();
-		r.replaceChildren(x(e ? l : c)), r.title = e ? "Exit fullscreen" : "Fullscreen", r.setAttribute("aria-label", r.title);
+function D(e, t) {
+	let n = E(l, "Fullscreen"), r = T(e, t), i = () => {
+		let e = r.active();
+		n.replaceChildren(S(e ? u : l)), n.title = e ? "Exit fullscreen" : "Fullscreen", n.setAttribute("aria-label", n.title);
 	};
-	return a(), e.cleanup(i.onChange(a)), e.event(r, "click", () => i.toggle()), r;
+	return i(), e.cleanup(r.onChange(i)), e.event(n, "click", () => r.toggle()), n;
 }
 //#endregion
 //#region src/ui/format.ts
-function D(e) {
+function O(e) {
 	return e >= 1e6 ? `${(e / 1e6).toFixed(1)} Mbps` : e >= 1e3 ? `${(e / 1e3).toFixed(0)} kbps` : `${Math.round(e)} bps`;
 }
-function O(e) {
+function k(e) {
 	return e < 1e3 ? `${Math.round(e)} ms` : `${(e / 1e3).toFixed(2)} s`;
 }
 function ee(e) {
 	return `${(e / 1e3).toFixed(1)} kHz`;
 }
-function k(e) {
+function te(e) {
 	return `${e.toFixed(1)} fps`;
 }
 //#endregion
 //#region src/ui/components/live-badge.ts
-function te(e, t, n) {
+function A(e, t, n) {
 	return e ? t === "disconnected" ? {
 		variant: "error",
 		text: "Disconnected"
@@ -131,7 +127,7 @@ function te(e, t, n) {
 		text: "No URL"
 	};
 }
-function A(e, t, n) {
+function j(e, t, n) {
 	let r = document.createElement("button");
 	r.type = "button", r.className = "badge flex-align-center", r.title = "Latency settings";
 	let i = document.createElement("span");
@@ -140,29 +136,30 @@ function A(e, t, n) {
 	a.className = "badge-text";
 	let o = document.createElement("span");
 	return o.className = "badge-latency", r.append(i, a, o), e.run((e) => {
-		let n = e.get(t.connection.url), i = e.get(t.connection.status), o = e.get(t.broadcast.status), { variant: s, text: c } = te(n, i, o);
+		let n = e.get(t.connection.url), i = e.get(t.connection.status), o = e.get(t.broadcast.out.status), { variant: s, text: c } = A(n, i, o);
 		r.style.display = o === "offline" ? "none" : "", r.dataset.variant = s, a.textContent = c.toUpperCase();
 	}), e.run((e) => {
-		o.textContent = `+${O(e.get(t.backend.sync.buffer))} latency`;
+		let n = e.get(t.sync.out.buffer);
+		o.textContent = `+${k(n)} latency`;
 	}), e.event(r, "click", () => {
 		n.tab.set("latency"), n.panel.set(!0);
 	}), r;
 }
 //#endregion
 //#region src/ui/components/play-pause.ts
-function j(e, t) {
-	let n = T(m, "Play");
+function M(e, t) {
+	let n = E(h, "Play");
 	return e.run((e) => {
-		let r = e.get(t.backend.paused);
-		n.title = r ? "Play" : "Pause", n.setAttribute("aria-label", n.title), n.replaceChildren(x(r ? m : p));
+		let r = e.get(t.controls.paused);
+		n.title = r ? "Play" : "Pause", n.setAttribute("aria-label", n.title), n.replaceChildren(S(r ? h : m));
 	}), e.event(n, "click", () => {
 		t.paused = !t.paused;
 	}), n;
 }
 //#endregion
 //#region src/ui/components/settings-button.ts
-function M(e, t) {
-	let n = T(h, "Settings");
+function N(e, t) {
+	let n = E(g, "Settings");
 	return e.run((e) => {
 		let r = e.get(t.panel);
 		n.classList.toggle("control--active", r), n.title = r ? "Close settings" : "Settings", n.setAttribute("aria-label", n.title), n.setAttribute("aria-expanded", String(r));
@@ -172,48 +169,48 @@ function M(e, t) {
 }
 //#endregion
 //#region src/ui/components/volume-slider.ts
-function N(e, t) {
-	return t || e === 0 ? d : e <= 33 ? y : e <= 66 ? b : v;
-}
 function P(e, t) {
+	return t || e === 0 ? f : e <= 33 ? b : e <= 66 ? x : y;
+}
+function F(e, t) {
 	let n = document.createElement("div");
 	n.className = "volume flex-align-center";
 	let r = document.createElement("button");
 	r.type = "button", r.className = "control flex-center";
 	let i = document.createElement("input");
 	return i.type = "range", i.className = "volume-track", i.min = "0", i.max = "100", i.setAttribute("aria-label", "Volume"), n.append(r, i), e.run((e) => {
-		let n = e.get(t.backend.audio.volume), a = e.get(t.backend.audio.muted), o = Math.round(n * 100), s = a ? 0 : o;
-		i.value = s.toString(), i.style.setProperty("--fill", `${s}%`), r.title = a ? "Unmute" : "Mute", r.setAttribute("aria-label", r.title), r.replaceChildren(x(N(o, a)));
+		let n = e.get(t.controls.volume), a = e.get(t.controls.muted), o = Math.round(n * 100), s = a ? 0 : o;
+		i.value = s.toString(), i.style.setProperty("--fill", `${s}%`), r.title = a ? "Unmute" : "Mute", r.setAttribute("aria-label", r.title), r.replaceChildren(S(P(o, a)));
 	}), e.event(i, "input", () => {
 		let e = Number.parseFloat(i.value) / 100;
-		t.backend.audio.volume.set(e), e > 0 && t.backend.audio.muted.set(!1);
+		t.controls.volume.set(e), e > 0 && t.controls.muted.set(!1);
 	}), e.event(r, "click", () => {
-		t.backend.audio.muted.update((e) => !e);
+		t.controls.muted.update((e) => !e);
 	}), n;
 }
 //#endregion
 //#region src/ui/components/control-bar.ts
-function F(e, t, n, i) {
-	let a = r.create("div", { className: "controls" }), o = r.create("div", { className: "controls-group" });
-	o.append(j(e, t), P(e, t), A(e, t, n));
-	let s = r.create("div", { className: "controls-spacer" }), c = r.create("div", { className: "controls-group" });
-	return c.append(M(e, n), E(e, i, t)), a.append(o, s, c), a;
+function I(e, t, n, r) {
+	let a = i.create("div", { className: "controls" }), o = i.create("div", { className: "controls-group" });
+	o.append(M(e, t), F(e, t), j(e, t, n));
+	let s = i.create("div", { className: "controls-spacer" }), c = i.create("div", { className: "controls-group" });
+	return c.append(N(e, n), D(e, r)), a.append(o, s, c), a;
 }
 //#endregion
 //#region src/ui/components/offline-indicator.ts
-function I(e, t) {
+function ne(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";
+		let r = e.get(t.broadcast.out.status) === "offline";
 		n.style.display = r ? "" : "none";
 	}), n;
 }
 //#endregion
 //#region src/ui/graph.ts
-var L = 120;
-function R(e, t) {
+var re = 120;
+function L(e, t) {
 	let n = document.createElement("canvas").getContext("2d");
 	if (!n) return e;
 	n.fillStyle = e;
@@ -225,8 +222,8 @@ function R(e, t) {
 	let i = r.match(/[\d.]+/g);
 	return i && i.length >= 3 ? `rgba(${i[0]}, ${i[1]}, ${i[2]}, ${t})` : e;
 }
-function z(e, t, n) {
-	let r = n?.color ?? "#4ade80", i = R(r, .33), a = R(r, 0), o = Number.isFinite(n?.samples) ? Math.max(1, Math.floor(n?.samples)) : L, s = document.createElement("div");
+function R(e, t, n) {
+	let r = n?.color ?? "#4ade80", i = L(r, .33), a = L(r, 0), o = Number.isFinite(n?.samples) ? Math.max(1, Math.floor(n?.samples)) : re, s = document.createElement("div");
 	s.className = "graph";
 	let c = document.createElement("div");
 	c.className = "graph-header";
@@ -269,25 +266,25 @@ function z(e, t, n) {
 }
 //#endregion
 //#region src/ui/stats.ts
-var ne = 250;
+var z = 250;
 function B(e, t, n) {
-	let i = r.create("div", { className: `stat-card stat-card--${e}` }), a = r.create("div", { className: "stat-head" }), o = r.create("div", { className: "stat-icon" });
-	o.appendChild(x(n));
-	let s = r.create("span", {
+	let r = i.create("div", { className: `stat-card stat-card--${e}` }), a = i.create("div", { className: "stat-head" }), o = i.create("div", { className: "stat-icon" });
+	o.appendChild(S(n));
+	let s = i.create("span", {
 		className: "stat-status",
 		style: { display: "none" }
 	});
-	a.append(o, r.create("span", { className: "stat-title" }, t), s);
-	let c = r.create("div", { className: "stat-grid" });
-	return i.append(a, c), {
-		el: i,
+	a.append(o, i.create("span", { className: "stat-title" }, t), s);
+	let c = i.create("div", { className: "stat-grid" });
+	return r.append(a, c), {
+		el: r,
 		grid: c,
 		status: s
 	};
 }
 function V(e, t) {
-	let n = r.create("div", { className: "stat-line" }), i = r.create("span", { className: "stat-value" }, "—");
-	return n.append(r.create("span", { className: "stat-key" }, t), i), e.appendChild(n), i;
+	let n = i.create("div", { className: "stat-line" }), r = i.create("span", { className: "stat-value" }, "—");
+	return n.append(i.create("span", { className: "stat-key" }, t), r), e.appendChild(n), r;
 }
 function H(e, t, n) {
 	if (e.bytes <= 0) return;
@@ -304,29 +301,29 @@ function W(e, t, n) {
 	});
 }
 function G(e, t) {
-	let n = r.create("div", { className: "tab-body stats" }), i = B("video", "Video", _), o = V(i.grid, "Resolution"), s = V(i.grid, "Codec"), c = z(e, "Bitrate", {
+	let n = i.create("div", { className: "tab-body stats" }), r = B("video", "Video", v), a = V(r.grid, "Resolution"), s = V(r.grid, "Codec"), c = R(e, "Bitrate", {
 		color: "#a855f7",
-		format: D
-	}), l = z(e, "Frame rate", {
+		format: O
+	}), l = R(e, "Frame rate", {
 		color: "#facc15",
-		format: k
+		format: te
 	});
-	i.el.append(c.el, l.el), W(e, i, {
-		catalog: t.backend.video.source.catalog,
-		flag: t.backend.paused,
+	r.el.append(c.el, l.el), W(e, r, {
+		catalog: t.video.source.out.catalog,
+		flag: t.controls.paused,
 		label: "paused"
 	});
-	let u = B("audio", "Audio", a), d = V(u.grid, "Codec"), p = V(u.grid, "Sample rate"), m = V(u.grid, "Channels"), h = V(u.grid, "Bitrate");
+	let u = B("audio", "Audio", o), d = V(u.grid, "Codec"), f = V(u.grid, "Sample rate"), m = V(u.grid, "Channels"), h = V(u.grid, "Bitrate");
 	W(e, u, {
-		catalog: t.backend.audio.source.catalog,
-		flag: t.backend.audio.muted,
+		catalog: t.audio.source.out.catalog,
+		flag: t.controls.muted,
 		label: "muted"
 	});
-	let g = B("network", "Network", f), v = V(g.grid, "Estimated max"), y = V(g.grid, "Actual"), b = z(e, "Round trip", {
+	let g = B("network", "Network", p), _ = V(g.grid, "Estimated max"), y = V(g.grid, "Actual"), b = R(e, "Round trip", {
 		color: "#00dfff",
-		format: (e) => O(e)
+		format: (e) => k(e)
 	});
-	g.el.append(b.el), n.append(i.el, u.el, g.el);
+	g.el.append(b.el), n.append(r.el, u.el, g.el);
 	let x = {
 		frames: 0,
 		bytes: 0,
@@ -336,115 +333,115 @@ function G(e, t) {
 		when: performance.now()
 	};
 	return e.interval(() => {
-		let e = performance.now(), n = t.backend.video.source.config.peek(), r = t.backend.video.source.catalog.peek(), i = t.backend.video.stats.peek(), a = n?.codedWidth ?? r?.display?.width, u = n?.codedHeight ?? r?.display?.height;
-		o.textContent = a && u ? `${a}×${u}` : "—", s.textContent = n?.codec ?? "—";
-		let f;
+		let e = performance.now(), n = t.video.source.out.config.peek(), r = t.video.source.out.catalog.peek(), i = t.video.out.stats.peek(), o = n?.codedWidth ?? r?.display?.width, u = n?.codedHeight ?? r?.display?.height;
+		a.textContent = o && u ? `${o}×${u}` : "—", s.textContent = n?.codec ?? "—";
+		let p;
 		if (i && x.frames > 0) {
 			let t = e - x.when, n = i.frameCount - x.frames;
-			n > 0 && t > 0 && (f = n / (t / 1e3));
+			n > 0 && t > 0 && (p = n / (t / 1e3));
 		}
 		let g = i ? H(x, i.bytesReceived, e) : void 0;
-		c.push(g), l.push(f), i && (x = {
+		c.push(g), l.push(p), i && (x = {
 			frames: i.frameCount,
 			bytes: i.bytesReceived,
 			when: e
 		});
-		let _ = t.backend.audio.source.config.peek(), C = t.backend.audio.stats.peek();
-		d.textContent = _?.codec ?? "—", p.textContent = _?.sampleRate ? ee(_.sampleRate) : "—", m.textContent = _?.numberOfChannels ? `${_.numberOfChannels}` : "—";
+		let v = t.audio.source.out.config.peek(), C = t.audio.out.stats.peek();
+		d.textContent = v?.codec ?? "—", f.textContent = v?.sampleRate ? ee(v.sampleRate) : "—", m.textContent = v?.numberOfChannels ? `${v.numberOfChannels}` : "—";
 		let w = C ? H(S, C.bytesReceived, e) : void 0;
-		h.textContent = w === void 0 ? "—" : D(w), C && (S = {
+		h.textContent = w === void 0 ? "—" : O(w), C && (S = {
 			bytes: C.bytesReceived,
 			when: e
 		});
-		let T = t.connection.established.peek(), E = T?.recvBandwidth?.peek();
-		v.textContent = E ? D(E) : "—";
-		let O = g !== void 0 || w !== void 0 ? (g ?? 0) + (w ?? 0) : void 0;
-		y.textContent = O === void 0 ? "—" : D(O);
-		let k = T?.rtt?.peek();
+		let T = t.connection.probe.peek(), E = T?.estimatedRecvRate;
+		_.textContent = E ? O(E) : "—";
+		let D = g !== void 0 || w !== void 0 ? (g ?? 0) + (w ?? 0) : void 0;
+		y.textContent = D === void 0 ? "—" : O(D);
+		let k = T?.rtt;
 		b.push(k !== void 0 && k > 0 ? k : void 0);
-	}, ne), n;
+	}, z), n;
 }
 //#endregion
 //#region src/ui/components/buffer-control.ts
-var K = 0, q = 10, J = 4e3, Y = 48;
-function X(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);
+var K = t.Time.Milli(0), q = t.Time.Milli(10), J = t.Time.Milli(4e3), Y = 48;
+function X(e, n, r, i, a) {
+	let o = e.getContext("2d");
+	if (!o) return;
+	let s = window.devicePixelRatio || 1, c = e.getBoundingClientRect(), l = c.width, u = c.height, d = Math.round(l * s), f = Math.round(u * s);
+	if ((e.width !== d || e.height !== f) && (e.width = d, e.height = f), o.setTransform(s, 0, 0, s, 0, 0), o.clearRect(0, 0, l, u), r === void 0) return;
+	let p = u - 4;
+	for (let e = 0; e < n.length; e++) {
+		let s = n[e], c = t.Time.Milli(s.start - r), d = t.Time.Milli(s.end - r), f = Math.max(0, c), m = Math.min(d, i);
+		if (m <= f) continue;
+		let h = f / i * l, g = Math.max(2, (m - f) / i * l);
+		if (o.globalAlpha = .85, o.fillStyle = a ? "#f87171" : e > 0 ? "#facc15" : "#4ade80", typeof o.roundRect == "function" ? (o.beginPath(), o.roundRect(h, 2, g, p, 2), o.fill()) : o.fillRect(h, 2, g, p), d > i) {
+			let e = ((d - i) / 1e3).toFixed(1);
+			o.globalAlpha = .7, o.fillStyle = "black", o.font = "500 9px system-ui, sans-serif", o.textAlign = "right", o.textBaseline = "middle", o.fillText(`+${e}s`, h + g - 4, u / 2);
 		}
 	}
 }
-function re(e, t, n = J) {
-	let r = document.createElement("div");
-	r.className = "buffer";
+function ie(e, n, r = J) {
 	let i = document.createElement("div");
-	i.className = "buffer-visualization", i.setAttribute("role", "slider"), i.tabIndex = 0, i.setAttribute("aria-valuemin", K.toString()), i.setAttribute("aria-valuemax", n.toString()), i.setAttribute("aria-label", "Buffer jitter");
+	i.className = "buffer";
 	let a = document.createElement("div");
-	a.className = "buffer-playhead";
+	a.className = "buffer-visualization", a.setAttribute("role", "slider"), a.tabIndex = 0, a.setAttribute("aria-valuemin", K.toString()), a.setAttribute("aria-valuemax", r.toString()), a.setAttribute("aria-label", "Buffer jitter");
 	let o = document.createElement("div");
-	o.className = "buffer-track buffer-track--video";
-	let s = document.createElement("span");
-	s.className = "buffer-track-label", s.textContent = "Video";
-	let c = document.createElement("canvas");
-	c.className = "buffer-canvas", o.append(s, c);
-	let l = document.createElement("div");
-	l.className = "buffer-track buffer-track--audio";
-	let u = document.createElement("span");
-	u.className = "buffer-track-label", u.textContent = "Audio";
-	let d = document.createElement("canvas");
-	d.className = "buffer-canvas", l.append(u, d);
-	let f = document.createElement("div");
-	f.className = "buffer-target-area";
+	o.className = "buffer-playhead";
+	let s = document.createElement("div");
+	s.className = "buffer-track buffer-track--video";
+	let c = document.createElement("span");
+	c.className = "buffer-track-label", c.textContent = "Video";
+	let l = document.createElement("canvas");
+	l.className = "buffer-canvas", s.append(c, l);
+	let u = document.createElement("div");
+	u.className = "buffer-track buffer-track--audio";
+	let d = document.createElement("span");
+	d.className = "buffer-track-label", d.textContent = "Audio";
+	let f = document.createElement("canvas");
+	f.className = "buffer-canvas", u.append(d, f);
 	let p = document.createElement("div");
-	p.className = "buffer-target-line";
-	let m = document.createElement("span");
-	m.className = "buffer-target-label", p.appendChild(m), f.appendChild(p);
+	p.className = "buffer-target-area";
+	let m = document.createElement("div");
+	m.className = "buffer-target-line";
 	let h = document.createElement("span");
-	h.className = "buffer-help", h.textContent = "click to change latency", i.append(a, o, l, f, h), r.appendChild(i);
-	let g = !1, _ = !1;
+	h.className = "buffer-target-label", m.appendChild(h), p.appendChild(m);
+	let g = document.createElement("span");
+	g.className = "buffer-help", g.textContent = "click to change latency", a.append(o, s, u, p, g), i.appendChild(a);
+	let _ = !1, v = !1;
 	e.run((e) => {
-		let r = e.get(t.backend.jitter), a = r / n * 100;
-		p.style.left = `${a}%`, m.textContent = `${Math.round(r)}ms`, i.setAttribute("aria-valuenow", r.toString());
+		let t = e.get(n.sync.out.jitter), i = t / r * 100;
+		m.style.left = `${i}%`, h.textContent = `${Math.round(t)}ms`, a.setAttribute("aria-valuenow", t.toString());
 	});
-	let v = (e) => {
-		let r = i.getBoundingClientRect(), a = r.width - Y, o = Math.max(0, Math.min(e - r.left - Y, a)) / a * n, s = Math.round(o / q) * q;
-		t.latencyMin = Math.max(K, Math.min(n, s));
-	}, y = () => {
-		_ || (_ = !0, h.style.display = "none");
+	let y = (e) => {
+		let i = a.getBoundingClientRect(), o = i.width - Y, s = Math.max(0, Math.min(e - i.left - Y, o)) / o * r, c = t.Time.Milli(Math.round(s / q) * q);
+		n.latencyMin = t.Time.Milli(Math.max(K, Math.min(r, c)));
+	}, b = () => {
+		v || (v = !0, g.style.display = "none");
 	};
-	e.event(i, "mousedown", (e) => {
-		g = !0, i.classList.add("buffer-visualization--dragging"), y(), v(e.clientX);
+	e.event(a, "mousedown", (e) => {
+		_ = !0, a.classList.add("buffer-visualization--dragging"), b(), y(e.clientX);
 	}), e.event(document, "mousemove", (e) => {
-		g && v(e.clientX);
+		_ && y(e.clientX);
 	}), e.event(document, "mouseup", () => {
-		g && (g = !1, i.classList.remove("buffer-visualization--dragging"));
-	}), e.event(i, "keydown", (e) => {
-		let r = 0;
-		if (e.key === "ArrowRight" || e.key === "ArrowUp") r = q;
-		else if (e.key === "ArrowLeft" || e.key === "ArrowDown") r = -10;
+		_ && (_ = !1, a.classList.remove("buffer-visualization--dragging"));
+	}), e.event(a, "keydown", (e) => {
+		let i = t.Time.Milli(0);
+		if (e.key === "ArrowRight" || e.key === "ArrowUp") i = q;
+		else if (e.key === "ArrowLeft" || e.key === "ArrowDown") i = t.Time.Milli(-q);
 		else return;
-		e.preventDefault(), y();
-		let i = t.backend.jitter.peek();
-		t.latencyMin = Math.max(K, Math.min(n, i + r));
+		e.preventDefault(), b();
+		let a = n.sync.out.jitter.peek();
+		n.latencyMin = t.Time.Milli(Math.max(K, Math.min(r, a + i)));
 	});
-	let b = () => {
-		let r = t.backend.sync.now(), i = t.backend.video.stalled.peek();
-		X(c, t.backend.video.buffered.peek(), r, n, i), X(d, t.backend.audio.buffered.peek(), r, n, i), e.animate(b);
+	let x = () => {
+		let t = n.sync.now(), i = n.video.out.stalled.peek();
+		X(l, n.video.out.buffered.peek(), t, r, i), X(f, n.audio.out.buffered.peek(), t, r, i), e.animate(x);
 	};
-	return e.animate(b), r;
+	return e.animate(x), i;
 }
 //#endregion
 //#region src/ui/components/latency.ts
-var ie = [
+var ae = [
 	{
 		label: "Real-time",
 		value: "real-time"
@@ -470,72 +467,72 @@ var ie = [
 		value: 2e3
 	}
 ];
-function ae(t, n) {
-	let i = r.create("div", { className: "tab-body latency" }), a = r.create("div", { className: "latency-presets" }), o = ie.map((e) => {
-		let i = r.create("button", {
+function oe(n, r) {
+	let a = i.create("div", { className: "tab-body latency" }), o = i.create("div", { className: "latency-presets" }), s = ae.map((e) => {
+		let a = i.create("button", {
 			className: "chip",
 			type: "button"
 		}, e.label);
-		return t.event(i, "click", () => {
-			n.latencyMin = e.value === "real-time" ? "real-time" : e.value;
-		}), a.appendChild(i), {
+		return n.event(a, "click", () => {
+			r.latencyMin = e.value === "real-time" ? "real-time" : t.Time.Milli(e.value);
+		}), o.appendChild(a), {
 			preset: e,
-			chip: i
+			chip: a
 		};
 	});
-	t.run((t) => {
-		let r = e(t.get(n.backend.latency)).min;
-		for (let { preset: e, chip: t } of o) {
-			let n = e.value === "real-time" ? r === "real-time" : r === e.value;
-			t.classList.toggle("chip--active", n);
+	n.run((t) => {
+		let n = e(t.get(r.controls.latency)).min;
+		for (let { preset: e, chip: t } of s) {
+			let r = e.value === "real-time" ? n === "real-time" : n === e.value;
+			t.classList.toggle("chip--active", r);
 		}
 	});
-	let s = re(t, n), c = r.create("div", { className: "latency-readout" }), l = r.create("div", { className: "latency-stat" }), u = r.create("span", { className: "latency-stat-value" }, "—");
-	l.append(r.create("span", { className: "latency-stat-label" }, "Jitter buffer"), u);
-	let d = r.create("div", { className: "latency-stat" }), f = r.create("span", { className: "latency-stat-value" }, "—");
-	d.append(r.create("span", { className: "latency-stat-label" }, "Total buffer"), f), c.append(l, d), t.run((t) => {
-		let r = e(t.get(n.backend.latency)).min, i = t.get(n.backend.jitter), a = t.get(n.backend.sync.buffer);
-		u.textContent = `${O(i)}${r === "real-time" ? " (auto)" : ""}`, f.textContent = O(a);
+	let c = ie(n, r), l = i.create("div", { className: "latency-readout" }), u = i.create("div", { className: "latency-stat" }), d = i.create("span", { className: "latency-stat-value" }, "—");
+	u.append(i.create("span", { className: "latency-stat-label" }, "Jitter buffer"), d);
+	let f = i.create("div", { className: "latency-stat" }), p = i.create("span", { className: "latency-stat-value" }, "—");
+	f.append(i.create("span", { className: "latency-stat-label" }, "Total buffer"), p), l.append(u, f), n.run((t) => {
+		let n = e(t.get(r.controls.latency)).min, i = t.get(r.sync.out.jitter), a = t.get(r.sync.out.buffer);
+		d.textContent = `${k(i)}${n === "real-time" ? " (auto)" : ""}`, p.textContent = k(a);
 	});
-	let p = r.create("div", { className: "tab-hint" }, "A larger buffer smooths over network jitter at the cost of latency. Real-time tracks the connection RTT automatically. Drag the timeline to fine-tune.");
-	return i.append(a, s, c, p), i;
+	let m = i.create("div", { className: "tab-hint" }, "A larger buffer smooths over network jitter at the cost of latency. Real-time tracks the connection RTT automatically. Drag the timeline to fine-tune.");
+	return a.append(o, c, l, m), a;
 }
 //#endregion
 //#region src/ui/components/quality.ts
-function oe(e) {
+function se(e) {
 	if (e.codedWidth && e.codedHeight) return `${e.codedWidth}×${e.codedHeight}`;
 }
-function se(e) {
+function ce(e) {
 	let t = [];
-	return e.framerate && t.push(`${Math.round(e.framerate)}fps`), e.bitrate && t.push(D(e.bitrate)), e.codec && t.push(e.codec), t.join(" · ");
+	return e.framerate && t.push(`${Math.round(e.framerate)}fps`), e.bitrate && t.push(O(e.bitrate)), e.codec && t.push(e.codec), t.join(" · ");
 }
-function Z(e, t, n, i, a, s) {
-	let c = r.create("button", {
+function Z(e, t, n, r, a, o) {
+	let c = i.create("button", {
 		className: "q-row",
 		type: "button"
 	});
-	i && c.classList.add("q-row--selected");
-	let l = r.create("span", { className: "q-row-check" });
-	i && l.appendChild(x(o));
-	let u = r.create("div", { className: "q-row-body" }), d = r.create("span", { className: "q-row-title" }, t);
+	r && c.classList.add("q-row--selected");
+	let l = i.create("span", { className: "q-row-check" });
+	r && l.appendChild(S(s));
+	let u = i.create("div", { className: "q-row-body" }), d = i.create("span", { className: "q-row-title" }, t);
 	if (a) {
-		let e = r.create("span", { className: "q-row-playing" }, "playing");
+		let e = i.create("span", { className: "q-row-playing" }, "playing");
 		d.appendChild(e);
 	}
-	let f = r.create("span", { className: "q-row-sub" }, n);
-	return u.append(d, f), c.append(l, u), e.event(c, "click", s), c;
+	let f = i.create("span", { className: "q-row-sub" }, n);
+	return u.append(d, f), c.append(l, u), e.event(c, "click", o), c;
 }
-function Q(e, t) {
-	let n = r.create("div", { className: "tab-body q-list" });
+function le(e, t) {
+	let n = i.create("div", { className: "tab-body q-list" });
 	return e.run((e) => {
-		let i = t.backend.video.source, a = e.get(i.catalog), o = e.get(i.target), s = e.get(i.track), c = a?.renditions ?? {}, l = Object.entries(c);
+		let r = t.video.source, a = e.get(r.out.catalog), o = e.get(t.controls.target), s = e.get(r.out.track), c = a?.renditions ?? {}, l = Object.entries(c);
 		if (n.replaceChildren(), l.length === 0) {
-			n.appendChild(r.create("div", { className: "tab-empty" }, "No video renditions"));
+			n.appendChild(i.create("div", { className: "tab-empty" }, "No video renditions"));
 			return;
 		}
 		let u = o?.name, d = s && !u ? `auto · currently ${s}` : "adapts to bandwidth";
 		n.appendChild(Z(e, "Auto", d, !u, !1, () => {
-			i.target.update((e) => ({
+			t.controls.target.update((e) => ({
 				...e,
 				name: void 0
 			}));
@@ -543,12 +540,12 @@ function Q(e, t) {
 			let n = (e[1].codedWidth ?? 0) * (e[1].codedHeight ?? 0);
 			return (t[1].codedWidth ?? 0) * (t[1].codedHeight ?? 0) - n;
 		});
-		for (let [t, r] of l) {
-			let a = oe(r) ?? t;
-			n.appendChild(Z(e, a, se(r), u === t, s === t, () => {
-				i.target.update((e) => ({
+		for (let [r, i] of l) {
+			let a = se(i) ?? r;
+			n.appendChild(Z(e, a, ce(i), u === r, s === r, () => {
+				t.controls.target.update((e) => ({
 					...e,
-					name: t
+					name: r
 				}));
 			}));
 		}
@@ -556,46 +553,46 @@ function Q(e, t) {
 }
 //#endregion
 //#region src/ui/components/settings-panel.ts
-var ce = [
+var ue = [
 	{
 		id: "quality",
 		label: "Quality",
-		svg: _
+		svg: v
 	},
 	{
 		id: "latency",
 		label: "Latency",
-		svg: u
+		svg: d
 	},
 	{
 		id: "stats",
 		label: "Stats",
-		svg: g
+		svg: _
 	}
 ];
-function le(e, t, n) {
-	let i = r.create("div", { className: "panel" });
-	i.setAttribute("role", "dialog"), i.setAttribute("aria-label", "Player settings");
-	let a = r.create("div", { className: "panel-head" }), o = r.create("div", { className: "panel-head-title flex-align-center" });
-	o.append(x(h), r.create("span", {}, "Settings"));
-	let c = r.create("button", {
+function Q(e, t, n) {
+	let r = i.create("div", { className: "panel" });
+	r.setAttribute("role", "dialog"), r.setAttribute("aria-label", "Player settings");
+	let a = i.create("div", { className: "panel-head" }), o = i.create("div", { className: "panel-head-title flex-align-center" });
+	o.append(S(g), i.create("span", {}, "Settings"));
+	let s = i.create("button", {
 		className: "control flex-center",
 		type: "button"
 	});
-	c.title = "Close", c.setAttribute("aria-label", "Close settings"), c.appendChild(x(s)), e.event(c, "click", () => n.panel.set(!1)), a.append(o, c);
-	let l = "panel-body", u = r.create("div", { className: "panel-tabs" });
+	s.title = "Close", s.setAttribute("aria-label", "Close settings"), s.appendChild(S(c)), e.event(s, "click", () => n.panel.set(!1)), a.append(o, s);
+	let l = "panel-body", u = i.create("div", { className: "panel-tabs" });
 	u.setAttribute("role", "tablist");
-	let d = ce.map((t) => {
-		let i = r.create("button", {
+	let d = ue.map((t) => {
+		let r = i.create("button", {
 			className: "panel-tab",
 			type: "button",
 			id: `tab-${t.id}`
 		});
-		return i.setAttribute("role", "tab"), i.setAttribute("aria-controls", l), i.append(x(t.svg), r.create("span", {}, t.label)), e.event(i, "click", () => n.tab.set(t.id)), u.appendChild(i), {
+		return r.setAttribute("role", "tab"), r.setAttribute("aria-controls", l), r.append(S(t.svg), i.create("span", {}, t.label)), e.event(r, "click", () => n.tab.set(t.id)), u.appendChild(r), {
 			tab: t,
-			btn: i
+			btn: r
 		};
-	}), f = r.create("div", {
+	}), f = i.create("div", {
 		className: "panel-body",
 		id: l
 	});
@@ -608,41 +605,48 @@ function le(e, t, n) {
 		}
 	}), e.run((e) => {
 		if (!e.get(n.panel)) return;
-		let i = e.get(n.tab), a = i === "quality" ? Q(e, t) : i === "latency" ? ae(e, t) : G(e, t);
-		r.render(e, f, a);
-	}), i.append(a, u, f), e.run((e) => {
+		let r = e.get(n.tab), a = r === "quality" ? le(e, t) : r === "latency" ? oe(e, t) : G(e, t);
+		i.render(e, f, a);
+	}), r.append(a, u, f), e.run((e) => {
 		let t = e.get(n.panel);
-		i.classList.toggle("panel--open", t), i.setAttribute("aria-hidden", String(!t));
-	}), i;
+		r.classList.toggle("panel--open", t), r.setAttribute("aria-hidden", String(!t));
+	}), r;
 }
 //#endregion
 //#region src/ui/components/unsupported-indicator.ts
-function ue(e, t) {
+function de(e, t) {
 	let n = document.createElement("div");
 	n.className = "watch-ui__unsupported-indicator", n.setAttribute("role", "status"), n.setAttribute("aria-live", "polite");
 	let r = document.createElement("span");
 	return r.className = "watch-ui__unsupported-text", n.appendChild(r), e.run((e) => {
-		let i = e.get(t.backend.video.source.error) === "unsupported", a = e.get(t.broadcast.status) === "offline", o = i && !a;
+		let i = e.get(t.video.source.out.error) === "unsupported", a = e.get(t.broadcast.out.status) === "offline", o = i && !a;
 		if (n.style.display = o ? "" : "none", !o) return;
-		let s = e.get(t.backend.video.source.catalog)?.renditions ?? {}, c = [...new Set(Object.values(s).map((e) => e.codec))].join(", ");
+		let s = e.get(t.video.source.out.catalog)?.renditions ?? {}, c = [...new Set(Object.values(s).map((e) => e.codec))].join(", ");
 		r.textContent = c ? `This video codec is not supported by your browser: ${c}` : "This video codec is not supported by your browser";
 	}), n;
 }
 //#endregion
 //#region src/ui/styles/index.css?inline
-var de = "*,:before,:after{box-sizing:border-box}: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-60:#fff9;--color-white-alpha-70:#ffffffb3;--color-white-alpha-90:#ffffffe6;--color-gray-100:#9ca3af;--color-gray-400:#6b7280;--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-500:#22c55e;--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-red-400:#f87171;--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-60:#0009;--color-black-alpha-85:#000000d9;--color-panel:#121214eb;--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:.375rem;--border-radius-md:.5rem;--border-radius-lg:.75rem;--accent:var(--color-orange-400);--ease:cubic-bezier(.4, 0, .2, 1);font-family:system-ui,Segoe UI,Roboto,sans-serif}.flex-center{justify-content:center;align-items:center;display:flex}.flex-align-center{align-items:center;display:flex}.control{width:2.25rem;height:2.25rem;color:var(--color-white);cursor:pointer;transition:background-color .12s var(--ease), transform .12s var(--ease), color .12s var(--ease);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.control svg{width:1.25rem;height:1.25rem}.control:hover:not(:disabled){background-color:var(--color-white-alpha-15)}.control:active:not(:disabled){transform:scale(.92)}.control--active{color:var(--accent)}.control:disabled{opacity:.4;cursor:default}.chip{padding:var(--spacing-4) var(--spacing-12);color:var(--color-white-alpha-70);background-color:var(--color-white-alpha-10);border:var(--spacing-1) solid transparent;cursor:pointer;transition:background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);border-radius:999px;font-size:.75rem;font-weight:500}.chip:hover{background-color:var(--color-white-alpha-20);color:var(--color-white)}.chip--active{color:var(--color-gray-950);background-color:var(--accent);border-color:var(--accent)}:host{display:block;position:relative}.player{border-radius:var(--spacing-8);background:#000;justify-content:center;align-items:center;width:100%;line-height:0;display:flex;position:relative;overflow:hidden}.player ::slotted(moq-watch){width:100%;line-height:0;display:block}.player:not(.player--chrome){cursor:none}.player:fullscreen,.player--pseudo-fullscreen{border-radius:0;justify-content:center;align-items:center;display:flex}.player:-webkit-full-screen{border-radius:0;justify-content:center;align-items:center;display:flex}.player--pseudo-fullscreen{z-index:2147483647;width:100vw;height:100vh;position:fixed;inset:0}@supports (height:100dvh){.player--pseudo-fullscreen{height:100dvh}}.player:fullscreen ::slotted(moq-watch),.player--pseudo-fullscreen ::slotted(moq-watch){width:100%;height:100%;max-height:100%}.player:-webkit-full-screen ::slotted(moq-watch){width:100%;height:100%;max-height:100%}.scrim{pointer-events:none;opacity:0;transition:opacity .2s var(--ease);position:absolute;left:0;right:0}.scrim--top{background:linear-gradient(to bottom, var(--color-black-alpha-40), transparent);height:25%;top:0}.scrim--bottom{background:linear-gradient(to top, var(--color-black-alpha-60), transparent 60%);height:100%;bottom:0}.player--chrome .scrim{opacity:1}.center{pointer-events:none;justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset:0}.center-play{pointer-events:auto;width:4.5rem;height:4.5rem;color:var(--color-white);background:linear-gradient(to bottom right, var(--color-orange-400), var(--color-orange-500), var(--color-amber-600));cursor:pointer;box-shadow:0 var(--spacing-8) var(--spacing-24) var(--color-black-alpha-40);transition:transform .15s var(--ease), box-shadow .15s var(--ease);border:none;border-radius:50%}.center-play svg{width:2rem;height:2rem}.center-play:hover{box-shadow:0 var(--spacing-8) var(--spacing-32) var(--color-orange-500-alpha-60);transform:scale(1.06)}.center-play:active{transform:scale(.97)}.chrome{opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease);flex-direction:column;justify-content:flex-end;line-height:1.4;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(.5rem)}.player--chrome .chrome{opacity:1;pointer-events:auto;transform:translateY(0)}.controls{align-items:center;gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-12) var(--spacing-12);display:flex;position:relative}.controls-group{align-items:center;gap:var(--spacing-4);display:flex}.controls-spacer{flex:1}.volume{gap:var(--spacing-4)}.volume-track{appearance:none;background:linear-gradient(to right, var(--color-white) 0%, var(--color-white) var(--fill,50%), var(--color-white-alpha-30) var(--fill,50%));cursor:pointer;opacity:0;width:0;max-width:0;height:.25rem;transition:width .16s var(--ease), max-width .16s var(--ease), opacity .16s var(--ease);border-radius:999px;outline:none;margin:0}.volume:hover .volume-track,.volume:focus-within .volume-track{opacity:1;width:4.5rem;max-width:4.5rem}.volume-track::-webkit-slider-thumb{appearance:none;background:var(--color-white);cursor:pointer;border:none;border-radius:50%;width:.75rem;height:.75rem}.volume-track::-moz-range-thumb{background:var(--color-white);cursor:pointer;border:none;border-radius:50%;width:.75rem;height:.75rem}.badge{gap:var(--spacing-8);height:2.25rem;padding:0 var(--spacing-12);margin-left:var(--spacing-4);color:var(--color-white);border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .12s var(--ease);background:0 0;border:none;font-size:.8125rem}.badge:hover{background-color:var(--color-white-alpha-10)}.badge-dot{background:var(--color-gray-400);border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}.badge-text{letter-spacing:.04em;font-weight:600}.badge-latency{max-width:0;margin-left:calc(-1 * var(--spacing-8));opacity:0;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--color-white-alpha-60);transition:max-width .16s var(--ease), margin-left .16s var(--ease), opacity .16s var(--ease);overflow:hidden}.badge:hover .badge-latency,.badge:focus-visible .badge-latency{opacity:1;max-width:9rem;margin-left:0}.badge[data-variant=live] .badge-dot{background:var(--color-red-400);animation:badge-pulse 2s var(--ease) infinite;box-shadow:0 0 #f87171b3}.badge[data-variant=live] .badge-text{color:var(--color-red-400)}.badge[data-variant=loading] .badge-dot,.badge[data-variant=connecting] .badge-dot{background:var(--color-yellow-400)}.badge[data-variant=error] .badge-dot{background:var(--color-gray-400)}.badge[data-variant=error] .badge-text{color:var(--color-gray-100)}@keyframes badge-pulse{0%{box-shadow:0 0 #f8717199}70%{box-shadow:0 0 0 .4rem #f8717100}to{box-shadow:0 0 #f8717100}}.panel{top:var(--spacing-8);right:var(--spacing-8);bottom:var(--spacing-8);width:20rem;max-width:calc(100% - var(--spacing-16));background:var(--color-panel);backdrop-filter:blur(12px);border:var(--spacing-1) solid var(--color-white-alpha-15);border-radius:var(--border-radius-lg);box-shadow:0 var(--spacing-8) var(--spacing-32) var(--color-black-alpha-60);color:var(--color-white);z-index:4;opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease);flex-direction:column;line-height:1.4;display:flex;position:absolute;overflow:hidden;transform:translate(.75rem)}.panel--open{opacity:1;pointer-events:auto;transform:translate(0)}.panel-head{padding:var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);border-bottom:var(--spacing-1) solid var(--color-white-alpha-10);justify-content:space-between;align-items:center;display:flex}.panel-head-title{gap:var(--spacing-8);font-size:.875rem;font-weight:600}.panel-head-title svg{width:1.125rem;height:1.125rem}.panel-head .control{width:2rem;height:2rem}.panel-tabs{padding:var(--spacing-8);gap:var(--spacing-4);display:flex}.panel-tab{align-items:center;gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-4);color:var(--color-white-alpha-60);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color .12s var(--ease), color .12s var(--ease);background:0 0;border:none;flex-direction:column;flex:1;font-size:.6875rem;font-weight:500;display:flex}.panel-tab svg{width:1.125rem;height:1.125rem}.panel-tab:hover{background-color:var(--color-white-alpha-05);color:var(--color-white)}.panel-tab--active{background-color:var(--color-white-alpha-10);color:var(--color-white)}.panel-body{scrollbar-width:thin;scrollbar-color:var(--color-white-alpha-20) transparent;flex:1;min-height:0;overflow-y:auto}.panel-body::-webkit-scrollbar{width:.375rem}.panel-body::-webkit-scrollbar-thumb{background:var(--color-white-alpha-20);border-radius:999px}.tab-body{gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-16) var(--spacing-16);flex-direction:column;display:flex}.tab-empty{padding:var(--spacing-24) 0;text-align:center;color:var(--color-white-alpha-40);font-size:.8125rem}.tab-hint{color:var(--color-white-alpha-40);font-size:.6875rem;line-height:1.5}.q-list{gap:var(--spacing-2)}.q-row{align-items:center;gap:var(--spacing-8);width:100%;padding:var(--spacing-8);text-align:left;color:var(--color-white);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color .12s var(--ease);background:0 0;border:none;display:flex}.q-row:hover{background-color:var(--color-white-alpha-05)}.q-row--selected{background-color:var(--color-white-alpha-10)}.q-row-check{width:1rem;color:var(--accent);flex-shrink:0;justify-content:center;align-items:center;display:flex}.q-row-check svg{width:1rem;height:1rem}.q-row-body{flex-direction:column;gap:.1rem;min-width:0;display:flex}.q-row-title{align-items:center;gap:var(--spacing-8);font-size:.8125rem;font-weight:600;display:flex}.q-row-playing{letter-spacing:.06em;text-transform:uppercase;color:var(--color-green-500);background:var(--color-green-900);padding:.05rem var(--spacing-4);border-radius:var(--border-radius-sm);font-size:.5625rem;font-weight:600}.q-row-sub{color:var(--color-white-alpha-60);text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;overflow:hidden}.latency-presets{gap:var(--spacing-4);flex-wrap:wrap;display:flex}.latency-readout{gap:var(--spacing-8);display:flex}.latency-stat{gap:var(--spacing-2);padding:var(--spacing-8) var(--spacing-12);background:var(--color-white-alpha-05);border-radius:var(--border-radius-md);flex-direction:column;flex:1;display:flex}.latency-stat-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-white-alpha-40);font-size:.625rem}.latency-stat-value{font-variant-numeric:tabular-nums;color:var(--accent);font-size:.9375rem;font-weight:600}.stat-card{gap:var(--spacing-8);padding:var(--spacing-12);background:var(--color-white-alpha-05);border-radius:var(--border-radius-md);flex-direction:column;display:flex}.stat-head{align-items:center;gap:var(--spacing-8);display:flex}.stat-icon{border-radius:var(--border-radius-sm);justify-content:center;align-items:center;width:1.5rem;height:1.5rem;display:flex}.stat-icon svg{width:.875rem;height:.875rem}.stat-title{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.stat-status{letter-spacing:.06em;text-transform:uppercase;color:var(--color-gray-100);background:var(--color-white-alpha-10);padding:.05rem var(--spacing-8);border-radius:var(--border-radius-sm);margin-left:auto;font-size:.5625rem;font-weight:600}.stat-card--video .stat-icon{background:var(--color-purple-900);color:var(--color-purple-400)}.stat-card--video .stat-title{color:var(--color-purple-400)}.stat-card--audio .stat-icon{background:var(--color-green-900);color:var(--color-green-400)}.stat-card--audio .stat-title{color:var(--color-green-400)}.stat-card--network .stat-icon{background:var(--color-blue-900);color:var(--color-blue-400)}.stat-card--network .stat-title{color:var(--color-blue-400)}.stat-grid{gap:var(--spacing-2) var(--spacing-12);grid-template-columns:auto 1fr;display:grid}.stat-line{display:contents}.stat-key{color:var(--color-white-alpha-60);font-size:.75rem}.stat-value{text-align:right;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;font-weight:600;overflow:hidden}.graph{gap:var(--spacing-2);margin-top:var(--spacing-4);flex-direction:column;display:flex}.graph-header{justify-content:space-between;align-items:baseline;display:flex}.graph-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-white-alpha-40);font-size:.625rem}.graph-value{font-variant-numeric:tabular-nums;font-size:.6875rem;font-weight:600}.graph-canvas{width:100%;height:2.5rem;display:block}.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}}.watch-ui__unsupported-indicator{text-align:center;background-color:var(--color-black-alpha-85);z-index:4;pointer-events:auto;border-radius:.25rem;justify-content:center;align-items:center;max-width:min(80%,32rem);padding:.75rem 1.25rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.watch-ui__unsupported-text{color:var(--color-white);font-size:.875rem;font-weight:600;line-height:1.4}@media (width<=480px){.watch-ui__unsupported-indicator{max-width:90%;padding:.625rem .875rem}.watch-ui__unsupported-text{font-size:.75rem}}", fe = 2800, $ = class extends HTMLElement {
+var fe = "*,:before,:after{box-sizing:border-box}: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-60:#fff9;--color-white-alpha-70:#ffffffb3;--color-white-alpha-90:#ffffffe6;--color-gray-100:#9ca3af;--color-gray-400:#6b7280;--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-500:#22c55e;--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-red-400:#f87171;--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-60:#0009;--color-black-alpha-85:#000000d9;--color-panel:#121214eb;--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:.375rem;--border-radius-md:.5rem;--border-radius-lg:.75rem;--accent:var(--color-orange-400);--ease:cubic-bezier(.4, 0, .2, 1);font-family:system-ui,Segoe UI,Roboto,sans-serif}.flex-center{justify-content:center;align-items:center;display:flex}.flex-align-center{align-items:center;display:flex}.control{width:2.25rem;height:2.25rem;color:var(--color-white);cursor:pointer;transition:background-color .12s var(--ease), transform .12s var(--ease), color .12s var(--ease);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.control svg{width:1.25rem;height:1.25rem}.control:hover:not(:disabled){background-color:var(--color-white-alpha-15)}.control:active:not(:disabled){transform:scale(.92)}.control--active{color:var(--accent)}.control:disabled{opacity:.4;cursor:default}.chip{padding:var(--spacing-4) var(--spacing-12);color:var(--color-white-alpha-70);background-color:var(--color-white-alpha-10);border:var(--spacing-1) solid transparent;cursor:pointer;transition:background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);border-radius:999px;font-size:.75rem;font-weight:500}.chip:hover{background-color:var(--color-white-alpha-20);color:var(--color-white)}.chip--active{color:var(--color-gray-950);background-color:var(--accent);border-color:var(--accent)}:host{display:block;position:relative}.player{border-radius:var(--spacing-8);background:#000;justify-content:center;align-items:center;width:100%;line-height:0;display:flex;position:relative;overflow:hidden}.player ::slotted(moq-watch){width:100%;line-height:0;display:block}.player:not(.player--chrome){cursor:none}.player:fullscreen,.player--pseudo-fullscreen{border-radius:0;justify-content:center;align-items:center;display:flex}.player:-webkit-full-screen{border-radius:0;justify-content:center;align-items:center;display:flex}.player--pseudo-fullscreen{z-index:2147483647;width:100vw;height:100vh;position:fixed;inset:0}@supports (height:100dvh){.player--pseudo-fullscreen{height:100dvh}}.player:fullscreen ::slotted(moq-watch),.player--pseudo-fullscreen ::slotted(moq-watch){width:100%;height:100%;max-height:100%}.player:-webkit-full-screen ::slotted(moq-watch){width:100%;height:100%;max-height:100%}.scrim{pointer-events:none;opacity:0;transition:opacity .2s var(--ease);position:absolute;left:0;right:0}.scrim--top{background:linear-gradient(to bottom, var(--color-black-alpha-40), transparent);height:25%;top:0}.scrim--bottom{background:linear-gradient(to top, var(--color-black-alpha-60), transparent 60%);height:100%;bottom:0}.player--chrome .scrim{opacity:1}.center{pointer-events:none;justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset:0}.center-play{pointer-events:auto;width:4.5rem;height:4.5rem;color:var(--color-white);background:linear-gradient(to bottom right, var(--color-orange-400), var(--color-orange-500), var(--color-amber-600));cursor:pointer;box-shadow:0 var(--spacing-8) var(--spacing-24) var(--color-black-alpha-40);transition:transform .15s var(--ease), box-shadow .15s var(--ease);border:none;border-radius:50%}.center-play svg{width:2rem;height:2rem}.center-play:hover{box-shadow:0 var(--spacing-8) var(--spacing-32) var(--color-orange-500-alpha-60);transform:scale(1.06)}.center-play:active{transform:scale(.97)}.chrome{opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease);flex-direction:column;justify-content:flex-end;line-height:1.4;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(.5rem)}.player--chrome .chrome{opacity:1;pointer-events:auto;transform:translateY(0)}.controls{align-items:center;gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-12) var(--spacing-12);display:flex;position:relative}.controls-group{align-items:center;gap:var(--spacing-4);display:flex}.controls-spacer{flex:1}.volume{gap:var(--spacing-4)}.volume-track{appearance:none;background:linear-gradient(to right, var(--color-white) 0%, var(--color-white) var(--fill,50%), var(--color-white-alpha-30) var(--fill,50%));cursor:pointer;opacity:0;width:0;max-width:0;height:.25rem;transition:width .16s var(--ease), max-width .16s var(--ease), opacity .16s var(--ease);border-radius:999px;outline:none;margin:0}.volume:hover .volume-track,.volume:focus-within .volume-track{opacity:1;width:4.5rem;max-width:4.5rem}.volume-track::-webkit-slider-thumb{appearance:none;background:var(--color-white);cursor:pointer;border:none;border-radius:50%;width:.75rem;height:.75rem}.volume-track::-moz-range-thumb{background:var(--color-white);cursor:pointer;border:none;border-radius:50%;width:.75rem;height:.75rem}.badge{gap:var(--spacing-8);height:2.25rem;padding:0 var(--spacing-12);margin-left:var(--spacing-4);color:var(--color-white);border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .12s var(--ease);background:0 0;border:none;font-size:.8125rem}.badge:hover{background-color:var(--color-white-alpha-10)}.badge-dot{background:var(--color-gray-400);border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}.badge-text{letter-spacing:.04em;font-weight:600}.badge-latency{max-width:0;margin-left:calc(-1 * var(--spacing-8));opacity:0;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--color-white-alpha-60);transition:max-width .16s var(--ease), margin-left .16s var(--ease), opacity .16s var(--ease);overflow:hidden}.badge:hover .badge-latency,.badge:focus-visible .badge-latency{opacity:1;max-width:9rem;margin-left:0}.badge[data-variant=live] .badge-dot{background:var(--color-red-400);animation:badge-pulse 2s var(--ease) infinite;box-shadow:0 0 #f87171b3}.badge[data-variant=live] .badge-text{color:var(--color-red-400)}.badge[data-variant=loading] .badge-dot,.badge[data-variant=connecting] .badge-dot{background:var(--color-yellow-400)}.badge[data-variant=error] .badge-dot{background:var(--color-gray-400)}.badge[data-variant=error] .badge-text{color:var(--color-gray-100)}@keyframes badge-pulse{0%{box-shadow:0 0 #f8717199}70%{box-shadow:0 0 0 .4rem #f8717100}to{box-shadow:0 0 #f8717100}}.panel{top:var(--spacing-8);right:var(--spacing-8);bottom:var(--spacing-8);width:20rem;max-width:calc(100% - var(--spacing-16));background:var(--color-panel);backdrop-filter:blur(12px);border:var(--spacing-1) solid var(--color-white-alpha-15);border-radius:var(--border-radius-lg);box-shadow:0 var(--spacing-8) var(--spacing-32) var(--color-black-alpha-60);color:var(--color-white);z-index:4;opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease);flex-direction:column;line-height:1.4;display:flex;position:absolute;overflow:hidden;transform:translate(.75rem)}.panel--open{opacity:1;pointer-events:auto;transform:translate(0)}.panel-head{padding:var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);border-bottom:var(--spacing-1) solid var(--color-white-alpha-10);justify-content:space-between;align-items:center;display:flex}.panel-head-title{gap:var(--spacing-8);font-size:.875rem;font-weight:600}.panel-head-title svg{width:1.125rem;height:1.125rem}.panel-head .control{width:2rem;height:2rem}.panel-tabs{padding:var(--spacing-8);gap:var(--spacing-4);display:flex}.panel-tab{align-items:center;gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-4);color:var(--color-white-alpha-60);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color .12s var(--ease), color .12s var(--ease);background:0 0;border:none;flex-direction:column;flex:1;font-size:.6875rem;font-weight:500;display:flex}.panel-tab svg{width:1.125rem;height:1.125rem}.panel-tab:hover{background-color:var(--color-white-alpha-05);color:var(--color-white)}.panel-tab--active{background-color:var(--color-white-alpha-10);color:var(--color-white)}.panel-body{scrollbar-width:thin;scrollbar-color:var(--color-white-alpha-20) transparent;flex:1;min-height:0;overflow-y:auto}.panel-body::-webkit-scrollbar{width:.375rem}.panel-body::-webkit-scrollbar-thumb{background:var(--color-white-alpha-20);border-radius:999px}.tab-body{gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-16) var(--spacing-16);flex-direction:column;display:flex}.tab-empty{padding:var(--spacing-24) 0;text-align:center;color:var(--color-white-alpha-40);font-size:.8125rem}.tab-hint{color:var(--color-white-alpha-40);font-size:.6875rem;line-height:1.5}.q-list{gap:var(--spacing-2)}.q-row{align-items:center;gap:var(--spacing-8);width:100%;padding:var(--spacing-8);text-align:left;color:var(--color-white);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color .12s var(--ease);background:0 0;border:none;display:flex}.q-row:hover{background-color:var(--color-white-alpha-05)}.q-row--selected{background-color:var(--color-white-alpha-10)}.q-row-check{width:1rem;color:var(--accent);flex-shrink:0;justify-content:center;align-items:center;display:flex}.q-row-check svg{width:1rem;height:1rem}.q-row-body{flex-direction:column;gap:.1rem;min-width:0;display:flex}.q-row-title{align-items:center;gap:var(--spacing-8);font-size:.8125rem;font-weight:600;display:flex}.q-row-playing{letter-spacing:.06em;text-transform:uppercase;color:var(--color-green-500);background:var(--color-green-900);padding:.05rem var(--spacing-4);border-radius:var(--border-radius-sm);font-size:.5625rem;font-weight:600}.q-row-sub{color:var(--color-white-alpha-60);text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;overflow:hidden}.latency-presets{gap:var(--spacing-4);flex-wrap:wrap;display:flex}.latency-readout{gap:var(--spacing-8);display:flex}.latency-stat{gap:var(--spacing-2);padding:var(--spacing-8) var(--spacing-12);background:var(--color-white-alpha-05);border-radius:var(--border-radius-md);flex-direction:column;flex:1;display:flex}.latency-stat-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-white-alpha-40);font-size:.625rem}.latency-stat-value{font-variant-numeric:tabular-nums;color:var(--accent);font-size:.9375rem;font-weight:600}.stat-card{gap:var(--spacing-8);padding:var(--spacing-12);background:var(--color-white-alpha-05);border-radius:var(--border-radius-md);flex-direction:column;display:flex}.stat-head{align-items:center;gap:var(--spacing-8);display:flex}.stat-icon{border-radius:var(--border-radius-sm);justify-content:center;align-items:center;width:1.5rem;height:1.5rem;display:flex}.stat-icon svg{width:.875rem;height:.875rem}.stat-title{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.stat-status{letter-spacing:.06em;text-transform:uppercase;color:var(--color-gray-100);background:var(--color-white-alpha-10);padding:.05rem var(--spacing-8);border-radius:var(--border-radius-sm);margin-left:auto;font-size:.5625rem;font-weight:600}.stat-card--video .stat-icon{background:var(--color-purple-900);color:var(--color-purple-400)}.stat-card--video .stat-title{color:var(--color-purple-400)}.stat-card--audio .stat-icon{background:var(--color-green-900);color:var(--color-green-400)}.stat-card--audio .stat-title{color:var(--color-green-400)}.stat-card--network .stat-icon{background:var(--color-blue-900);color:var(--color-blue-400)}.stat-card--network .stat-title{color:var(--color-blue-400)}.stat-grid{gap:var(--spacing-2) var(--spacing-12);grid-template-columns:auto 1fr;display:grid}.stat-line{display:contents}.stat-key{color:var(--color-white-alpha-60);font-size:.75rem}.stat-value{text-align:right;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;font-weight:600;overflow:hidden}.graph{gap:var(--spacing-2);margin-top:var(--spacing-4);flex-direction:column;display:flex}.graph-header{justify-content:space-between;align-items:baseline;display:flex}.graph-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-white-alpha-40);font-size:.625rem}.graph-value{font-variant-numeric:tabular-nums;font-size:.6875rem;font-weight:600}.graph-canvas{width:100%;height:2.5rem;display:block}.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}}.watch-ui__unsupported-indicator{text-align:center;background-color:var(--color-black-alpha-85);z-index:4;pointer-events:auto;border-radius:.25rem;justify-content:center;align-items:center;max-width:min(80%,32rem);padding:.75rem 1.25rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.watch-ui__unsupported-text{color:var(--color-white);font-size:.875rem;font-weight:600;line-height:1.4}@media (width<=480px){.watch-ui__unsupported-indicator{max-width:90%;padding:.625rem .875rem}.watch-ui__unsupported-text{font-size:.75rem}}", pe = 2800;
+function me(e) {
+	for (let t of [":fullscreen", ":-webkit-full-screen"]) try {
+		if (e.matches(t)) return !0;
+	} catch {}
+	return !1;
+}
+var $ = class extends HTMLElement {
 	#e;
 	#t;
-	#n = new n(void 0);
+	#n = new r(void 0);
 	#r;
 	constructor() {
 		super(), this.#t = this.attachShadow({ mode: "open" });
 		let e = document.createElement("style");
-		e.textContent = de, this.#t.appendChild(e), this.#r = new MutationObserver(() => this.#i());
+		e.textContent = fe, this.#t.appendChild(e), this.#r = new MutationObserver(() => this.#i());
 	}
 	connectedCallback() {
 		this.#i(), this.#r.observe(this, { childList: !0 });
-		let e = new t();
+		let e = new n();
 		this.#e = e, e.run(this.#a.bind(this));
 	}
 	disconnectedCallback() {
@@ -655,22 +659,22 @@ var de = "*,:before,:after{box-sizing:border-box}:host{--color-white:#fff;--colo
 	#a(e) {
 		let t = e.get(this.#n);
 		if (!t) return;
-		let a = {
-			chrome: new n(!0),
-			panel: new n(!1),
-			tab: new n("quality")
-		}, o = r.create("div", { className: "player" });
-		o.appendChild(r.create("slot"));
-		let s = r.create("div", { className: "center" });
-		s.append(S(e, t), i(e, t), I(e, t), ue(e, t));
-		let c = r.create("div", { className: "scrim scrim--top" }), l = r.create("div", { className: "chrome" });
-		l.append(r.create("div", { className: "scrim scrim--bottom" }), F(e, t, a, o));
-		let u = le(e, t, a);
-		o.append(c, s, l, u), r.render(e, this.#t, o), this.#s(e, t, o), this.#c(e, t, a, o, l, u);
+		let n = {
+			chrome: new r(!0),
+			panel: new r(!1),
+			tab: new r("quality")
+		}, o = i.create("div", { className: "player" });
+		o.appendChild(i.create("slot"));
+		let s = i.create("div", { className: "center" });
+		s.append(C(e, t), a(e, t), ne(e, t), de(e, t));
+		let c = i.create("div", { className: "scrim scrim--top" }), l = i.create("div", { className: "chrome" });
+		l.append(i.create("div", { className: "scrim scrim--bottom" }), I(e, t, n, o));
+		let u = Q(e, t, n);
+		o.append(c, s, l, u), i.render(e, this.#t, o), this.#s(e, t, o), this.#c(e, t, n, o, l, u);
 	}
 	#o(e) {
 		let t = document;
-		return this.#t.fullscreenElement === e || document.fullscreenElement === e || t.webkitFullscreenElement === e || e.classList.contains("player--pseudo-fullscreen");
+		return this.#t.fullscreenElement === e || document.fullscreenElement === e || t.webkitFullscreenElement === e || me(e) || e.classList.contains("player--pseudo-fullscreen");
 	}
 	#s(e, t, n) {
 		let r = () => {
@@ -689,21 +693,21 @@ var de = "*,:before,:after{box-sizing:border-box}:host{--color-white:#fff;--colo
 			attributeFilter: ["class"]
 		}), e.cleanup(() => i.disconnect()), e.cleanup(() => a.disconnect()), e.event(document, "fullscreenchange", r), e.event(document, "webkitfullscreenchange", r), e.event(this.#t, "fullscreenchange", r), r();
 	}
-	#c(e, t, r, i, a, o) {
+	#c(e, t, n, i, a, o) {
 		if (window.matchMedia("(pointer: coarse)").matches || window.matchMedia("(hover: none)").matches) {
-			this.#l(e, r, i, a, o);
+			this.#l(e, n, i, a, o);
 			return;
 		}
-		let s = new n(0), c = () => s.update((e) => e + 1);
+		let s = new r(0), c = () => s.update((e) => e + 1);
 		e.event(this, "pointermove", c), e.event(this, "pointerdown", c), e.event(this, "focusin", c);
-		let l = () => t.backend.paused.peek() || r.panel.peek();
+		let l = () => t.controls.paused.peek() || n.panel.peek();
 		e.run((e) => {
-			let n = e.get(t.backend.paused) || e.get(r.panel);
-			e.get(s), r.chrome.set(!0), !n && e.timer(() => r.chrome.set(!1), fe);
+			let r = e.get(t.controls.paused) || e.get(n.panel);
+			e.get(s), n.chrome.set(!0), !r && e.timer(() => n.chrome.set(!1), pe);
 		}), e.event(this, "pointerleave", () => {
-			l() || r.chrome.set(!1);
+			l() || n.chrome.set(!1);
 		}), e.run((e) => {
-			i.classList.toggle("player--chrome", e.get(r.chrome));
+			i.classList.toggle("player--chrome", e.get(n.chrome));
 		});
 	}
 	#l(e, t, n, r, i) {