@banou/media-player 0.10.9 → 0.10.10

package/dist/index.js

@@ -3,11 +3,12 @@ import { Children as s, Fragment as c, isValidElement as l, useCallback as u, us
 import { css as g, keyframes as _ } from "@emotion/react";
 import { createPlayer as v, useContainerAttach as y, useMediaAttach as b } from "@videojs/react";
 import { definePlayerFeature as x, videoFeatures as S } from "@videojs/core/dom";
-import { Fragment as C, jsx as w, jsxs as T } from "@emotion/react/jsx-runtime";
-import { Captions as E, CaptionsOff as D, Check as O, ChevronLeft as k, ChevronRight as A, Copy as j, Maximize as M, Minimize as N, Pause as P, Play as F, RotateCcw as I, Settings as L, TriangleAlert as R, Volume1 as z, Volume2 as B, VolumeX as ee } from "lucide-react";
-import { Tooltip as V } from "react-tooltip";
+import { createMediaElementSource as C } from "@banou/ponyfill/web-audio";
+import { Fragment as w, jsx as T, jsxs as E } from "@emotion/react/jsx-runtime";
+import { Captions as D, CaptionsOff as O, Check as k, ChevronLeft as A, ChevronRight as j, Copy as M, Maximize as N, Minimize as P, Pause as F, Play as I, RotateCcw as L, Settings as R, TriangleAlert as z, Volume1 as ee, Volume2 as B, VolumeX as V } from "lucide-react";
+import { Tooltip as H } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
-var H = {
+var te = {
 	indexes: [],
 	chapters: [],
 	thumbnails: [],
@@ -26,23 +27,24 @@ var H = {
 	passThroughPictureInPicture: null,
 	pictureInPictureMode: null,
 	burnedInSubtitles: !1,
+	volumeNormalizer: null,
 	playbackError: null,
 	playbackErrors: [],
 	ready: !1,
 	setSourceState: () => {}
-}, te = x({
+}, U = x({
 	name: "source",
-	state: () => ({ ...H }),
+	state: () => ({ ...te }),
 	attach({ set: e }) {
 		e({
 			setSourceState: (t) => e(t),
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), U = v({
-	features: [...S, te],
+}), W = v({
+	features: [...S, U],
 	displayName: "MediaPlayer"
-}), W = U.usePlayer, G = (e) => {
+}), G = W.usePlayer, K = (e) => {
 	if (e && e !== "und") try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -51,28 +53,28 @@ var H = {
 	} catch {
 		return;
 	}
-}, K = (e) => e?.replace(/_/g, " ").trim() || void 0, q = (e) => {
-	let t = e.map((e) => G(e.language) ?? K(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
+}, q = (e) => e?.replace(/_/g, " ").trim() || void 0, J = (e) => {
+	let t = e.map((e) => K(e.language) ?? q(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
 		...e,
 		[t]: (e[t] ?? 0) + 1
 	}), {});
 	return e.map((e, r) => {
-		let i = t[r], a = K(e.title);
+		let i = t[r], a = q(e.title);
 		return {
 			track: e,
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, ne = (e) => q(e).map(({ track: e, label: t }) => ({
+}, Y = (e) => J(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), J = [
+})), X = [
 	0,
 	250,
 	1e3,
 	3e3,
 	1e4
-], Y = 6e4, re = 500, ie = 15e3, ae = (e) => e instanceof Error ? e.message : String(e), oe = (e) => {
+], ne = 6e4, re = 500, ie = 15e3, ae = (e) => e instanceof Error ? e.message : String(e), oe = (e) => {
 	let t = [], n = e?.cause;
 	for (let e = 0; n != null && e < 8; e++) {
 		if (typeof MediaError < "u" && n instanceof MediaError) {
@@ -83,7 +85,7 @@ var H = {
 	}
 	return t.length ? t.join("\n") : void 0;
 }, se = (e, t, r) => {
-	let a = W(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, chapters: b, seekPrepareBudgetMs: x = re } = r ?? {}, S = p(b);
+	let a = G(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, chapters: b, seekPrepareBudgetMs: x = re } = r ?? {}, S = p(b);
 	S.current = b;
 	let [C, w] = m(void 0), [T, E] = m(0), D = p({
 		count: 0,
@@ -130,7 +132,7 @@ var H = {
 		});
 	}, [a, x]), L = u((e) => {
 		typeof e == "number" && (a.setSourceState({ selectedAudioTrack: e }), w(e));
-	}, [a]), R = W((e) => e.setSourceState);
+	}, [a]), R = G((e) => e.setSourceState);
 	d(() => {
 		R({
 			selectSubtitleTrack: F,
@@ -175,11 +177,11 @@ var H = {
 			let t = n(e);
 			if (u(e, t), t) {
 				let t = performance.now();
-				t - D.current.at > Y && (D.current = {
+				t - D.current.at > ne && (D.current = {
 					count: 0,
 					at: t
 				});
-				let n = J[Math.min(D.current.count, J.length - 1)];
+				let n = X[Math.min(D.current.count, X.length - 1)];
 				D.current = {
 					count: D.current.count + 1,
 					at: t
@@ -216,13 +218,13 @@ var H = {
 					onSeek: (e) => N.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || a.setSourceState({
-							subtitleTracks: ne(e),
+							subtitleTracks: Y(e),
 							...j.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || a.setSourceState({
-							audioTracks: ne(e),
+							audioTracks: Y(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -397,7 +399,80 @@ var H = {
 		g,
 		S
 	]);
-}, X = {
+}, ve = async (e, t, n = {}) => (await e.audioWorklet.addModule(t), new AudioWorkletNode(e, "banou-volume-normalizer", {
+	channelCountMode: "max",
+	processorOptions: n
+})), ye = /* @__PURE__ */ new WeakMap(), be = (e) => new Promise((t, n) => {
+	let r = () => {
+		(e.state === "running" || e.state === "closed") && (e.removeEventListener("statechange", r), e.state === "running" ? t() : n(new DOMException("The AudioContext closed before it ran", "InvalidStateError")));
+	};
+	e.addEventListener("statechange", r), r();
+}), xe = (e, t, n = {}) => {
+	let r = ye.get(e);
+	if (r) return r.wake(), r;
+	let i = new AudioContext(), a = n.enabled !== !1, o, s = !1, c = () => 20 * Math.log10(Math.max(e.volume, 1e-6)), l = e.ownerDocument, u = () => {
+		i.state === "suspended" && i.resume().catch(() => {});
+	}, d = (e) => {
+		for (let t of [
+			"pointerdown",
+			"pointerup",
+			"keydown"
+		]) e ? l.addEventListener(t, u, !0) : l.removeEventListener(t, u, !0);
+	}, f = () => {
+		let e = !s && i.state === "suspended";
+		d(e), e && o && u();
+	};
+	i.addEventListener("statechange", f), f();
+	let p = (async () => {
+		let r = await ve(i, t, {
+			...n,
+			enabled: a,
+			inputGainDb: c()
+		});
+		await be(i);
+		let s = C(i, e);
+		return r.port.postMessage({
+			enabled: a,
+			inputGainDb: c()
+		}), s.connect(r).connect(i.destination), e.addEventListener("volumechange", () => r.port.postMessage({ inputGainDb: c() })), e.addEventListener("seeking", () => r.port.postMessage({ reset: "seek" })), e.addEventListener("emptied", () => r.port.postMessage({ reset: "source" })), o = r, r;
+	})();
+	p.catch(() => {
+		s = !0, d(!1), i.close().catch(() => {});
+	});
+	let m = {
+		context: i,
+		routed: p,
+		setEnabled: (e) => {
+			a = e, o?.port.postMessage({ enabled: a });
+		},
+		release: () => {
+			s = !0, d(!1), e.isConnected ? i.state === "running" && i.suspend().catch(() => {}) : (ye.delete(e), i.close().catch(() => {}));
+		},
+		wake: () => {
+			i.state !== "closed" && (s = !1, u(), f());
+		}
+	};
+	return ye.set(e, m), m;
+}, Se = (e, t, n) => {
+	let r = p(null), [i, a] = m(!1);
+	return d(() => {
+		if (e && t) {
+			if (n && !r.current) {
+				let i = xe(e, t, { enabled: n });
+				r.current = i, i.routed.catch((e) => {
+					r.current === i && (console.warn("[media-player] the volume normalizer is unavailable:", e), a(!0));
+				});
+			}
+			r.current?.setEnabled(n);
+		}
+	}, [
+		e,
+		t,
+		n
+	]), d(() => () => {
+		r.current?.release(), r.current = null;
+	}, [e]), { refused: i };
+}, Z = {
 	headings: {
 		large: "\n      font-weight: 600;\n      font-size: calc(2.8 * var(--mp-unit));\n      line-height: calc(3.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(3.4 * var(--mp-unit));\n        line-height: calc(4.1 * var(--mp-unit));\n      }\n    ",
 		medium: "\n      font-weight: 600;\n      font-size: calc(2.4 * var(--mp-unit));\n      line-height: calc(2.9 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(2.8 * var(--mp-unit));\n        line-height: calc(3.4 * var(--mp-unit));\n      }\n    ",
@@ -424,7 +499,7 @@ var H = {
 		medium: "\n      font-weight: 500;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    ",
 		regular: "\n      font-weight: 400;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    "
 	}
-}, ve = g`
+}, Ce = g`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -437,7 +512,7 @@ var H = {
     margin: auto;
     pointer-events: none;
   }
-`, ye = g`
+`, we = g`
   position: absolute;
   top: 0;
   left: 0;
@@ -445,7 +520,7 @@ var H = {
   padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
   /* clears a notch once the player is fullscreen; resolves to zero everywhere else */
   padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-  ${X.headings.small}
+  ${Z.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -466,9 +541,9 @@ var H = {
 
   background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
   transition: opacity 0.1s cubic-bezier(.4,0,1,1);
-`, be = _`
+`, Te = _`
   to { transform: rotate(360deg); }
-`, xe = g`
+`, Ee = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -484,46 +559,46 @@ var H = {
     border-radius: 50%;
     border: 3px solid rgba(255, 255, 255, 0.25);
     border-top-color: #fff;
-    animation: ${be} 0.8s linear infinite;
+    animation: ${Te} 0.8s linear infinite;
   }
-`, Se = g`
+`, De = g`
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${X.bLarge.regular}
+  ${Z.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, Ce = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", we = ({ onSubtitleRef: e }) => {
-	let t = W((e) => e.title), n = W((e) => e.hideUI), r = W((e) => e.playbackError), i = W((e) => e.ready), a = W((e) => e.size), o = W((e) => e.waiting), s = W((e) => e.seekingTo);
-	return /* @__PURE__ */ T(C, { children: [
-		t ? /* @__PURE__ */ w("div", {
+`, Oe = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", ke = ({ onSubtitleRef: e }) => {
+	let t = G((e) => e.title), n = G((e) => e.hideUI), r = G((e) => e.playbackError), i = G((e) => e.ready), a = G((e) => e.size), o = G((e) => e.waiting), s = G((e) => e.seekingTo);
+	return /* @__PURE__ */ E(w, { children: [
+		t ? /* @__PURE__ */ T("div", {
 			className: "title",
-			css: ye,
+			css: we,
 			style: { ...n ? {
 				opacity: "0",
 				pointerEvents: "none"
 			} : {} },
 			children: t
 		}) : void 0,
-		((a ? !i : o) || s !== void 0) && !r ? /* @__PURE__ */ w("div", { css: xe }) : void 0,
-		r ? /* @__PURE__ */ w("div", {
-			css: Se,
-			children: Ce(r)
+		((a ? !i : o) || s !== void 0) && !r ? /* @__PURE__ */ T("div", { css: Ee }) : void 0,
+		r ? /* @__PURE__ */ T("div", {
+			css: De,
+			children: Oe(r)
 		}) : void 0,
-		/* @__PURE__ */ w("div", {
+		/* @__PURE__ */ T("div", {
 			className: "subtitles",
 			ref: e,
-			css: ve
+			css: Ce
 		})
 	] });
-}, Te = 1e-4, Ee = 1, De = (e) => Math.max(Te, Math.min(Ee, e)) ** 2, Oe = (e) => Math.max(Te, Math.min(Ee, e)) ** (Ee / 2), Z = (e) => {
+}, Ae = 1e-4, je = 1, Me = (e) => Math.max(Ae, Math.min(je, e)) ** 2, Ne = (e) => Math.max(Ae, Math.min(je, e)) ** (je / 2), Pe = (e) => {
 	if (e === void 0) return "0:00";
 	let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
 	return t > 0 ? `${t}:${n < 10 ? "0" : ""}${n}:${r < 10 ? "0" : ""}${r}` : `${n}:${r < 10 ? "0" : ""}${r}`;
-}, ke = (e, t) => `${Z(e)} / ${Z(t)}`, Ae = (e) => g`
+}, Fe = (e, t) => `${Pe(e)} / ${Pe(t)}`, Ie = (e) => g`
   display: flex;
   justify-content: flex-start;
 
@@ -555,7 +630,7 @@ var H = {
   z-index: 3;
 
   * {
-    ${X.bMedium.regular}
+    ${Z.bMedium.regular}
   }
 
   ${e === "sm" && g`
@@ -571,17 +646,17 @@ var H = {
 	x: -1,
 	y: -1,
 	anchors: 0
-}, je = (e) => {
+}, Le = (e) => {
 	Q.x = e.clientX, Q.y = e.clientY;
-}, Me = () => (Q.anchors++ === 0 && window.addEventListener("pointermove", je, {
+}, Re = () => (Q.anchors++ === 0 && window.addEventListener("pointermove", Le, {
 	capture: !0,
 	passive: !0
 }), () => {
-	--Q.anchors === 0 && window.removeEventListener("pointermove", je, { capture: !0 });
+	--Q.anchors === 0 && window.removeEventListener("pointermove", Le, { capture: !0 });
 }), $ = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => {
 	let l = p(null), u = p(null);
 	return d(() => {
-		let e = Me(), t = () => {
+		let e = Re(), t = () => {
 			let e = l.current;
 			if (!e) return;
 			let { left: t, right: n, top: r, bottom: i } = e.getBoundingClientRect();
@@ -592,7 +667,7 @@ var H = {
 			e();
 			for (let e of n) document.removeEventListener(e, t);
 		};
-	}, []), /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("div", {
+	}, []), /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T("div", {
 		ref: l,
 		"data-tooltip-id": e,
 		"data-open": !0,
@@ -601,14 +676,14 @@ var H = {
 		"data-tooltip-delay-hide": i,
 		"data-tooltip-place": o,
 		children: n
-	}), !s && /* @__PURE__ */ w(V, {
+	}), !s && /* @__PURE__ */ T(H, {
 		ref: u,
-		css: Ae(c),
+		css: Ie(c),
 		id: e,
 		noArrow: !0,
 		children: t
 	})] });
-}, Ne = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+}, ze = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
 	let [i, a] = m(!1), o = p(t);
 	o.current = t;
 	let s = p(null), c = u((t, r) => {
@@ -647,26 +722,26 @@ var H = {
 			style: { touchAction: "none" }
 		}
 	};
-}, Pe = 2, Fe = .005, Ie = "#000", Le = "#0000", Re = (e, t) => {
+}, Be = 2, Ve = .005, He = "#000", Ue = "#0000", We = (e, t) => {
 	if (!t) return [];
 	let n = /* @__PURE__ */ new Set();
 	for (let { start: r, end: i } of e) for (let e of [r, i]) {
 		let r = e / t;
-		r <= Fe || r >= .995 || n.add(Number((r * 100).toFixed(4)));
+		r <= Ve || r >= .995 || n.add(Number((r * 100).toFixed(4)));
 	}
 	return n.size ? [
 		0,
 		...[...n].sort((e, t) => e - t),
 		100
 	] : [];
-}, ze = (e, t) => {
-	let n = Pe / 2, r = e.length - 2, i = [];
+}, Ge = (e, t) => {
+	let n = Be / 2, r = e.length - 2, i = [];
 	for (let a = 0; a <= r; a += 1) {
 		let o = e[a], s = e[a + 1], c = a === 0 ? "0%" : `calc(${o}% + ${n}px)`, l = a === r ? "100%" : `calc(${s}% - ${n}px)`;
-		i.push(`${t(a) ? Ie : Le} ${c} ${l}`), a !== r && i.push(`${Le} calc(${s}% - ${n}px) calc(${s}% + ${n}px)`);
+		i.push(`${t(a) ? He : Ue} ${c} ${l}`), a !== r && i.push(`${Ue} calc(${s}% - ${n}px) calc(${s}% + ${n}px)`);
 	}
 	return `linear-gradient(90deg, ${i.join(", ")})`;
-}, Be = /* @__PURE__ */ new Set([
+}, Ke = /* @__PURE__ */ new Set([
 	"op",
 	"ops",
 	"opening",
@@ -674,7 +749,7 @@ var H = {
 	"ncop",
 	"オープニング",
 	"op主題歌"
-]), Ve = /* @__PURE__ */ new Set([
+]), qe = /* @__PURE__ */ new Set([
 	"ed",
 	"eds",
 	"ending",
@@ -687,13 +762,13 @@ var H = {
 	"エンドカード",
 	"エンドロール",
 	"ed主題歌"
-]), He = /* @__PURE__ */ new Set(["intro", "イントロ"]), Ue = /* @__PURE__ */ new Set(["outro", "アウトロ"]), We = {
+]), Je = /* @__PURE__ */ new Set(["intro", "イントロ"]), Ye = /* @__PURE__ */ new Set(["outro", "アウトロ"]), Xe = {
 	"credits start": "ending",
 	"credits end": null,
 	"preview end": null,
 	"end credits": "ending",
 	"closing credits": "ending"
-}, Ge = /* @__PURE__ */ new Set([
+}, Ze = /* @__PURE__ */ new Set([
 	"theme",
 	"themes",
 	"song",
@@ -712,53 +787,53 @@ var H = {
 	"the",
 	"主題歌",
 	"ノンクレジット"
-]), Ke = /* @__PURE__ */ new Set([
+]), Qe = /* @__PURE__ */ new Set([
 	"post",
 	"pre",
 	"after",
 	"before",
 	"non"
-]), qe = /[-:|~/\\[\]()「」『』【】,.!?"'’]|\s+by\s+/u, Je = (e) => !e.trim() || /^chapter\s*\d+$/i.test(e.trim()) || /^\d{1,2}:\d{2}:\d{2}([.,]\d+)?$/.test(e.trim()), Ye = (e) => e.replace(/([a-z぀-ヿ一-鿿])\s*\d+\s*$/u, "$1").split(/[\s_]+/u).map((e) => e.replace(/^[^\w぀-ヿ一-鿿]+|[^\w぀-ヿ一-鿿]+$/gu, "")).filter((e) => e && !/^\d+$/.test(e) && !Ge.has(e)), Xe = (e, t) => {
-	if (Be.has(e)) return "opening";
-	if (Ve.has(e)) return "ending";
+]), $e = /[-:|~/\\[\]()「」『』【】,.!?"'’]|\s+by\s+/u, et = (e) => !e.trim() || /^chapter\s*\d+$/i.test(e.trim()) || /^\d{1,2}:\d{2}:\d{2}([.,]\d+)?$/.test(e.trim()), tt = (e) => e.replace(/([a-z぀-ヿ一-鿿])\s*\d+\s*$/u, "$1").split(/[\s_]+/u).map((e) => e.replace(/^[^\w぀-ヿ一-鿿]+|[^\w぀-ヿ一-鿿]+$/gu, "")).filter((e) => e && !/^\d+$/.test(e) && !Ze.has(e)), nt = (e, t) => {
+	if (Ke.has(e)) return "opening";
+	if (qe.has(e)) return "ending";
 	if (t) {
-		if (He.has(e)) return "opening";
-		if (Ue.has(e)) return "ending";
+		if (Je.has(e)) return "opening";
+		if (Ye.has(e)) return "ending";
 	}
-}, Ze = (e, t) => {
-	if (Je(e)) return;
+}, rt = (e, t) => {
+	if (et(e)) return;
 	let n = e.trim().toLowerCase().replace(/\s+/gu, " ");
-	if (n in We) return We[n] ?? void 0;
-	let r = n.split(qe).map((e) => e.trim()).filter(Boolean);
-	if (r.some((e) => e.split(/[\s_]+/u).some((e) => Ke.has(e)))) return;
+	if (n in Xe) return Xe[n] ?? void 0;
+	let r = n.split($e).map((e) => e.trim()).filter(Boolean);
+	if (r.some((e) => e.split(/[\s_]+/u).some((e) => Qe.has(e)))) return;
 	let i = r.length > 1 ? [r[0], r.at(-1)] : r;
 	for (let e of i) {
-		let n = Ye(e);
+		let n = tt(e);
 		if (n.length !== 1) continue;
-		let r = Xe(n[0], t);
+		let r = nt(n[0], t);
 		if (r) return r;
 	}
-}, Qe = 15, $e = 87, et = 93, tt = (e) => {
+}, it = 15, at = 87, ot = 93, st = (e) => {
 	let t = e.map(() => void 0), n = e.at(-1)?.end ?? 0;
 	if (!n) return t;
 	let r = e.map((e, t) => ({
 		index: t,
 		start: e.start,
 		length: e.end - e.start
-	})).filter(({ length: e }) => e >= $e && e <= et), i = n / 2, a = r.filter(({ start: e }) => e < i), o = r.filter(({ start: e }) => e >= i);
+	})).filter(({ length: e }) => e >= at && e <= ot), i = n / 2, a = r.filter(({ start: e }) => e < i), o = r.filter(({ start: e }) => e >= i);
 	return a.length === 1 && (t[a[0].index] = "opening"), o.length === 1 && (t[o[0].index] = "ending"), t;
-}, nt = (e) => {
-	let t = e.map(({ title: e }) => Ze(e, !1)), n = e.reduce((e, n, r) => e + (t[r] ? n.end - n.start : 0), 0), r = e.reduce((e, t) => e + (t.end - t.start), 0);
+}, ct = (e) => {
+	let t = e.map(({ title: e }) => rt(e, !1)), n = e.reduce((e, n, r) => e + (t[r] ? n.end - n.start : 0), 0), r = e.reduce((e, t) => e + (t.end - t.start), 0);
 	if (r > 0 && n * 2 > r) return e.map(() => void 0);
 	let i = e.map((e, n) => {
-		if (e.end - e.start < Qe) return;
+		if (e.end - e.start < it) return;
 		let r = t[n];
 		if (r) return r;
-		let i = Ze(e.title, !0);
+		let i = rt(e.title, !0);
 		return i && !t.includes(i) ? i : void 0;
 	});
-	return e.every(({ title: e }) => Je(e)) ? tt(e) : i;
-}, rt = g`
+	return e.every(({ title: e }) => et(e)) ? st(e) : i;
+}, lt = g`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -843,7 +918,7 @@ var H = {
     box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${X.bMedium.bold}
+    ${Z.bMedium.bold}
 
     gap: calc(.6 * var(--mp-unit));
 
@@ -977,24 +1052,24 @@ var H = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, it = 4, at = () => {
-	let e = W(), t = W((e) => e.currentTime), n = W((e) => e.requestSeek), r = W((e) => e.duration), i = W((e) => e.size), a = W((e) => e.downloadedRanges), o = W((e) => e.buffered), s = W((e) => e.indexes), c = W((e) => e.thumbnails), l = W((e) => e.thumbnailAt), u = W((e) => e.requestThumbnail), h = W((e) => e.chapters), g = W((e) => e.seekingTo), _ = W((e) => e.setSourceState), v = W((e) => e.hideUI), y = p(null), [b, x] = m(void 0), [S, C] = m(void 0), E = (e) => {
+`, ut = 4, dt = () => {
+	let e = G(), t = G((e) => e.currentTime), n = G((e) => e.requestSeek), r = G((e) => e.duration), i = G((e) => e.size), a = G((e) => e.downloadedRanges), o = G((e) => e.buffered), s = G((e) => e.indexes), c = G((e) => e.thumbnails), l = G((e) => e.thumbnailAt), u = G((e) => e.requestThumbnail), h = G((e) => e.chapters), g = G((e) => e.seekingTo), _ = G((e) => e.setSourceState), v = G((e) => e.hideUI), y = p(null), [b, x] = m(void 0), [S, C] = m(void 0), w = (e) => {
 		C(e), u(e);
 	}, D = !!S;
 	d(() => {
 		if (D) return _({ seekPreview: !0 }), () => _({ seekPreview: !1 });
 	}, [_, D]), d(() => {
-		v && E(void 0);
+		v && w(void 0);
 	}, [v]);
-	let O = p(void 0), k = p(0), A = p(void 0), j = p(void 0), M = p(!1), { dragging: N, handlers: P } = Ne({
+	let O = p(void 0), k = p(0), A = p(void 0), j = p(void 0), M = p(!1), { dragging: N, handlers: P } = ze({
 		ref: y,
 		onChange: (e) => {
 			if (k.current += 1, A.current = e, j.current === void 0) j.current = e;
 			else if (!M.current) {
 				let t = y.current?.getBoundingClientRect().width ?? 0;
-				Math.abs(e - j.current) * t > it && (M.current = !0);
+				Math.abs(e - j.current) * t > ut && (M.current = !0);
 			}
-			x(e), O.current !== "mouse" && E(e * r);
+			x(e), O.current !== "mouse" && w(e * r);
 		}
 	}), F = (e) => {
 		O.current = e.pointerType, k.current = 0, j.current = void 0, M.current = !1, P.onPointerDown(e);
@@ -1005,20 +1080,20 @@ var H = {
 			let t = i * r;
 			n ? n(t) : e.seek(t);
 		}
-		k.current = 0, M.current = !1, j.current = void 0, t.pointerType !== "mouse" && E(void 0);
+		k.current = 0, M.current = !1, j.current = void 0, t.pointerType !== "mouse" && w(void 0);
 	}, L = (e) => {
 		if (!y.current) return;
 		let { left: t, right: n } = y.current.getBoundingClientRect();
 		return Math.min(Math.max((e - t) / (n - t), 0), 1) * r;
 	}, R = p("mouse"), z = (e) => {
 		R.current = e.pointerType;
-	}, B = (e) => {
-		R.current !== "touch" && E(L(e.clientX));
-	}, ee = () => {
-		y.current && E(void 0);
+	}, ee = (e) => {
+		R.current !== "touch" && w(L(e.clientX));
+	}, B = () => {
+		y.current && w(void 0);
 	}, V = (e) => r ? e / r * 100 : 0, H = (e, t, n) => {
 		let r = Number((n - t).toFixed(4)), i = t * 100;
-		return /* @__PURE__ */ w("div", {
+		return /* @__PURE__ */ T("div", {
 			className: "loaded-part",
 			style: {
 				transform: `scaleX(${r})`,
@@ -1055,22 +1130,22 @@ var H = {
 		N,
 		b,
 		g
-	]), G = f(() => Re(h, r), [h, r]), K = G.length > 0, q = f(() => {
+	]), W = f(() => We(h, r), [h, r]), K = W.length > 0, q = f(() => {
 		if (!K || S === void 0 || !r) return -1;
-		let e = S / r * 100, t = G.findIndex((t, n) => n < G.length - 1 && e >= t && e < G[n + 1]);
-		return t >= 0 ? t : G.length - 2;
+		let e = S / r * 100, t = W.findIndex((t, n) => n < W.length - 1 && e >= t && e < W[n + 1]);
+		return t >= 0 ? t : W.length - 2;
 	}, [
 		K,
-		G,
+		W,
 		S,
 		r
-	]), ne = f(() => K ? ze(G, (e) => e !== q) : void 0, [
+	]), J = f(() => K ? Ge(W, (e) => e !== q) : void 0, [
 		K,
-		G,
+		W,
 		q
-	]), J = f(() => q >= 0 ? ze(G, (e) => e === q) : void 0, [G, q]), Y = f(() => {
+	]), Y = f(() => q >= 0 ? Ge(W, (e) => e === q) : void 0, [W, q]), X = f(() => {
 		if (S !== void 0) return h.find(({ start: e, end: t }) => e <= S && S < t);
-	}, [h, S]), re = f(() => {
+	}, [h, S]), ne = f(() => {
 		if (S) {
 			if (l) return l(S);
 			if (c.length) return c.find(({ startTime: e, endTime: t }) => e <= S && S < t);
@@ -1079,26 +1154,26 @@ var H = {
 		c,
 		l,
 		S
-	]), ie = (e, t) => /* @__PURE__ */ T("div", {
+	]), re = (e, t) => /* @__PURE__ */ E("div", {
 		className: e ? `track ${e}` : "track",
 		style: t ? { maskImage: t } : void 0,
 		children: [
-			/* @__PURE__ */ w("div", { className: "background-bar" }),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ T("div", { className: "background-bar" }),
+			/* @__PURE__ */ T("div", {
 				className: "loaded",
 				children: te
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ T("div", {
 				className: "play-container",
-				children: /* @__PURE__ */ w("div", {
+				children: /* @__PURE__ */ T("div", {
 					className: "play",
 					style: { transform: `scaleX(${U})` }
 				})
 			})
 		]
 	});
-	return /* @__PURE__ */ T("div", {
-		css: rt,
+	return /* @__PURE__ */ E("div", {
+		css: lt,
 		ref: y,
 		className: [
 			"progress-bar",
@@ -1107,43 +1182,43 @@ var H = {
 		].filter(Boolean).join(" "),
 		onPointerDown: z,
 		onPointerMove: z,
-		onMouseMove: B,
-		onMouseOut: ee,
+		onMouseMove: ee,
+		onMouseOut: B,
 		children: [
-			ie(void 0, ne),
-			S ? /* @__PURE__ */ T("div", {
+			re(void 0, J),
+			S ? /* @__PURE__ */ E("div", {
 				className: "cursor-time",
 				style: {
-					left: Y ? `clamp(var(--thumbnail-half), ${V(S)}%, calc(100% - var(--thumbnail-half)))` : `clamp(calc(3 * var(--mp-unit)), ${V(S)}%, calc(100% - calc(3 * var(--mp-unit))))`,
-					maxWidth: Y ? "var(--thumbnail-width)" : void 0
+					left: X ? `clamp(var(--thumbnail-half), ${V(S)}%, calc(100% - var(--thumbnail-half)))` : `clamp(calc(3 * var(--mp-unit)), ${V(S)}%, calc(100% - calc(3 * var(--mp-unit))))`,
+					maxWidth: X ? "var(--thumbnail-width)" : void 0
 				},
-				children: [/* @__PURE__ */ w("span", {
+				children: [/* @__PURE__ */ T("span", {
 					className: "cursor-time-value",
-					children: Z(S)
-				}), Y ? /* @__PURE__ */ w("span", {
+					children: Pe(S)
+				}), X ? /* @__PURE__ */ T("span", {
 					className: "chapter-title",
-					children: Y.title
+					children: X.title
 				}) : void 0]
 			}) : void 0,
-			/* @__PURE__ */ w("div", { className: "progress" }),
-			/* @__PURE__ */ w("div", { className: "hover" }),
-			J ? ie("focus", J) : void 0,
-			/* @__PURE__ */ w("div", { className: "scrubber" }),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ T("div", { className: "progress" }),
+			/* @__PURE__ */ T("div", { className: "hover" }),
+			Y ? re("focus", Y) : void 0,
+			/* @__PURE__ */ T("div", { className: "scrubber" }),
+			/* @__PURE__ */ T("div", {
 				className: "padding",
 				...P,
 				onPointerDown: F,
 				onPointerUp: I,
 				onPointerCancel: I
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ T("div", {
 				className: "thumbnail",
 				style: { left: `clamp(var(--thumbnail-half), ${V(S ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
-				children: re?.url ? /* @__PURE__ */ w("img", { src: re.url }) : void 0
+				children: ne?.url ? /* @__PURE__ */ T("img", { src: ne.url }) : void 0
 			})
 		]
 	});
-}, ot = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", st = {
+}, ft = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", pt = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -1153,12 +1228,12 @@ var H = {
 	strokeWidth: 2,
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, ct = (e) => /* @__PURE__ */ T("svg", {
-	...st,
+}, mt = (e) => /* @__PURE__ */ E("svg", {
+	...pt,
 	...e,
 	children: [
-		/* @__PURE__ */ w("path", { d: "M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5" }),
-		/* @__PURE__ */ w("rect", {
+		/* @__PURE__ */ T("path", { d: "M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5" }),
+		/* @__PURE__ */ T("rect", {
 			x: "12",
 			y: "13",
 			width: "10",
@@ -1166,14 +1241,14 @@ var H = {
 			rx: "1",
 			ry: "1"
 		}),
-		/* @__PURE__ */ w("path", { d: "M14.5 18.5h2m2 0h1" })
+		/* @__PURE__ */ T("path", { d: "M14.5 18.5h2m2 0h1" })
 	]
-}), lt = (e) => /* @__PURE__ */ T("svg", {
-	...st,
+}), ht = (e) => /* @__PURE__ */ E("svg", {
+	...pt,
 	...e,
 	children: [
-		/* @__PURE__ */ w("path", { d: "M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5" }),
-		/* @__PURE__ */ w("rect", {
+		/* @__PURE__ */ T("path", { d: "M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5" }),
+		/* @__PURE__ */ T("rect", {
 			x: "12",
 			y: "13",
 			width: "10",
@@ -1181,9 +1256,9 @@ var H = {
 			rx: "1",
 			ry: "1"
 		}),
-		/* @__PURE__ */ w("path", { d: "M6 9h3m2 0h2" })
+		/* @__PURE__ */ T("path", { d: "M6 9h3m2 0h2" })
 	]
-}), ut = g`
+}), gt = g`
 .popover {
   position: absolute;
   /* Anchored to the PLAYER's right edge, never to the gear. The gear is not the last control in the
@@ -1222,7 +1297,7 @@ var H = {
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${X.bMedium.regular}
+  ${Z.bMedium.regular}
 
   z-index: 4;
 
@@ -1265,7 +1340,7 @@ var H = {
 
       .secondary {
         color: #eee;
-        ${X.bSmall.regular}
+        ${Z.bSmall.regular}
       }
     }
   }
@@ -1307,29 +1382,29 @@ var H = {
   .failed {
     border-bottom: 1px solid #4D4D4E;
     color: #f66;
-    ${X.bSmall.regular}
+    ${Z.bSmall.regular}
   }
 }
-`, dt = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
+`, _t = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
 	let c = o !== void 0, l = (e, i, a) => {
 		let s = c && o === e, l = c || t.find((t) => t.id === e)?.disabled;
-		return /* @__PURE__ */ T("div", {
+		return /* @__PURE__ */ E("div", {
 			onClick: () => {
 				l || r(e ?? void 0);
 			},
 			className: [a, l ? "unavailable" : null].filter(Boolean).join(" ") || void 0,
-			children: [/* @__PURE__ */ w("span", { children: i }), /* @__PURE__ */ w("span", { children: s ? "…" : (n ?? null) === e ? "✓" : "" })]
+			children: [/* @__PURE__ */ T("span", { children: i }), /* @__PURE__ */ T("span", { children: s ? "…" : (n ?? null) === e ? "✓" : "" })]
 		}, e ?? "__off__");
 	};
-	return /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ E("div", {
 		className: "popover track-list",
 		children: [
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ E("div", {
 				className: i ? "back" : "back no-hover",
 				onClick: i,
-				children: [i ? /* @__PURE__ */ w(k, {}) : null, /* @__PURE__ */ w("span", { children: e })]
+				children: [i ? /* @__PURE__ */ T(A, {}) : null, /* @__PURE__ */ T("span", { children: e })]
 			}),
-			s ? /* @__PURE__ */ w("div", {
+			s ? /* @__PURE__ */ T("div", {
 				className: "no-hover failed",
 				children: "Could not switch. Try again."
 			}) : null,
@@ -1337,7 +1412,7 @@ var H = {
 			t.map(({ id: e, label: t }) => l(e, t, "description"))
 		]
 	});
-}, ft = ({ onReset: e } = {}) => {
+}, vt = ({ onReset: e } = {}) => {
 	let t = p(null), [n, r] = m(!1), [i, a] = m(void 0), [o, s] = m(!1), c = p(e);
 	c.current = e;
 	let l = () => {
@@ -1378,7 +1453,7 @@ var H = {
 			});
 		}
 	};
-}, pt = g`
+}, yt = g`
 /* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
    which is the width of the player box, so it can be clamped to it. */
 position: static;
@@ -1394,7 +1469,7 @@ position: static;
   }
 }
 
-${ut}
+${gt}
 
 .popover.error-list {
   /* Wider than a track menu and taller, because these rows are sentences rather than labels, and a
@@ -1422,7 +1497,7 @@ ${ut}
 
     color: #fff;
     cursor: pointer;
-    ${X.bSmall.regular}
+    ${Z.bSmall.regular}
 
     &:hover {
       background-color: rgba(255,255,255,.1);
@@ -1443,7 +1518,7 @@ ${ut}
 
     .when {
       color: #bbb;
-      ${X.bSmall.regular}
+      ${Z.bSmall.regular}
 
       /* the one part of the line worth scanning for, so it is the one part at full brightness */
       .count {
@@ -1462,72 +1537,72 @@ ${ut}
       color: #ddd;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
-      ${X.bSmall.regular}
+      ${Z.bSmall.regular}
     }
   }
 }
-`, mt = (e) => new Date(e).toLocaleTimeString(), ht = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : Z(Math.max(0, e)), gt = (e) => e.reduce((e, t) => e + t.count, 0), _t = (e) => e.map((e, t) => {
-	let n = ht(e.atMediaTime), r = e.count > 1 ? `${new Date(e.at).toISOString()} to ${new Date(e.lastAt).toISOString()} ×${e.count}` : new Date(e.at).toISOString();
+`, bt = (e) => new Date(e).toLocaleTimeString(), xt = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : Pe(Math.max(0, e)), St = (e) => e.reduce((e, t) => e + t.count, 0), Ct = (e) => e.map((e, t) => {
+	let n = xt(e.atMediaTime), r = e.count > 1 ? `${new Date(e.at).toISOString()} to ${new Date(e.lastAt).toISOString()} ×${e.count}` : new Date(e.at).toISOString();
 	return [
 		`${t + 1}. ${r}${n ? ` (at ${n})` : ""}${e.recovered ? " [recovered]" : ""}`,
 		e.message,
 		e.detail
 	].filter(Boolean).join("\n");
-}).join("\n\n"), vt = () => {
-	let e = W((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = ft(), [i, a] = m(!1);
+}).join("\n\n"), wt = () => {
+	let e = G((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = vt(), [i, a] = m(!1);
 	if (e.length === 0) return null;
 	let o = () => {
-		navigator.clipboard?.writeText(_t(e)).then(() => {
+		navigator.clipboard?.writeText(Ct(e)).then(() => {
 			a(!0), setTimeout(() => a(!1), 2e3);
 		}, (e) => console.warn("[media-player] could not copy the errors:", e));
-	}, s = `Playback errors (${gt(e)})`;
-	return /* @__PURE__ */ T("div", {
-		css: pt,
+	}, s = `Playback errors (${St(e)})`;
+	return /* @__PURE__ */ E("div", {
+		css: yt,
 		ref: r,
-		children: [/* @__PURE__ */ w($, {
+		children: [/* @__PURE__ */ T($, {
 			id: "errors",
 			disabled: t,
-			text: /* @__PURE__ */ w("button", {
+			text: /* @__PURE__ */ T("button", {
 				className: "errors",
 				type: "button",
 				onClick: n,
 				"aria-label": s,
 				"aria-expanded": t,
-				children: /* @__PURE__ */ w(R, { className: "alert-triangle" })
+				children: /* @__PURE__ */ T(z, { className: "alert-triangle" })
 			}),
-			toolTipText: /* @__PURE__ */ w("span", { children: s })
-		}), t && /* @__PURE__ */ T("div", {
+			toolTipText: /* @__PURE__ */ T("span", { children: s })
+		}), t && /* @__PURE__ */ E("div", {
 			className: "popover error-list",
-			children: [/* @__PURE__ */ T("div", {
+			children: [/* @__PURE__ */ E("div", {
 				className: "back no-hover",
-				children: [/* @__PURE__ */ w("span", { children: s }), /* @__PURE__ */ T("button", {
+				children: [/* @__PURE__ */ T("span", { children: s }), /* @__PURE__ */ E("button", {
 					className: "copy",
 					type: "button",
 					onClick: o,
 					"aria-label": "Copy the errors",
-					children: [w(i ? O : j, {}), /* @__PURE__ */ w("span", { children: i ? "Copied" : "Copy" })]
+					children: [T(i ? k : M, {}), /* @__PURE__ */ T("span", { children: i ? "Copied" : "Copy" })]
 				})]
-			}), e.map((e, t) => /* @__PURE__ */ T("div", {
+			}), e.map((e, t) => /* @__PURE__ */ E("div", {
 				className: "entry no-hover",
 				children: [
-					/* @__PURE__ */ T("span", {
+					/* @__PURE__ */ E("span", {
 						className: "when",
 						children: [
-							mt(e.at),
-							e.count > 1 ? ` to ${mt(e.lastAt)}` : "",
-							ht(e.atMediaTime) ? ` at ${ht(e.atMediaTime)}` : "",
+							bt(e.at),
+							e.count > 1 ? ` to ${bt(e.lastAt)}` : "",
+							xt(e.atMediaTime) ? ` at ${xt(e.atMediaTime)}` : "",
 							e.recovered ? " recovered" : "",
-							e.count > 1 ? /* @__PURE__ */ w("span", {
+							e.count > 1 ? /* @__PURE__ */ T("span", {
 								className: "count",
 								children: `×${e.count}`
 							}) : null
 						]
 					}),
-					/* @__PURE__ */ w("span", {
+					/* @__PURE__ */ T("span", {
 						className: "what",
 						children: e.message
 					}),
-					e.detail ? /* @__PURE__ */ w("span", {
+					e.detail ? /* @__PURE__ */ T("span", {
 						className: "cause",
 						children: e.detail
 					}) : null
@@ -1535,7 +1610,7 @@ ${ut}
 			}, `${e.at}-${t}`))]
 		})]
 	});
-}, yt = g`
+}, Tt = g`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -1588,8 +1663,8 @@ width: 100%;
     }
   }
 }
-`, bt = () => {
-	let e = W(), t = W((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 2.75, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = Ne({
+`, Et = () => {
+	let e = G(), t = G((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 2.75, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = ze({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(l(t))
 	}), f = (t) => {
@@ -1604,26 +1679,26 @@ width: 100%;
 		};
 	}, [t]);
 	let m = c(s);
-	return /* @__PURE__ */ T("div", {
-		css: yt,
-		children: [/* @__PURE__ */ T("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ E("div", {
+		css: Tt,
+		children: [/* @__PURE__ */ E("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ T("div", {
 			className: "playback-slider",
 			ref: n,
 			...u,
-			children: /* @__PURE__ */ w("div", {
+			children: /* @__PURE__ */ T("div", {
 				ref: r,
 				style: { background: `linear-gradient(to right,
               #fff 0% ${m}%,
               #3A3A3A ${m}% 100%
             )` },
-				children: /* @__PURE__ */ w("div", {
+				children: /* @__PURE__ */ T("div", {
 					className: "playback-handle",
 					style: { left: `${m}%` }
 				})
 			})
 		})]
 	});
-}, xt = g`
+}, Dt = g`
 /* Deliberately NOT a containing block. The menu anchors to the control bar instead, which is exactly
    as wide as the player box and can therefore be clamped to it. The outside-click check uses
    \`contains\` on the ref, which is DOM containment and needs no position, and the bar's other
@@ -1641,7 +1716,42 @@ position: static;
   }
 }
 
-${ut}
+${gt}
+
+.switch {
+  position: relative;
+  flex-shrink: 0;
+  width: 28px;
+  height: 16px;
+  margin-right: 6px;
+  border-radius: 8px;
+  background-color: rgba(255,255,255,.3);
+  transition: background-color 0.15s ease-in-out;
+
+  ::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #fff;
+    transition: transform 0.15s ease-in-out;
+  }
+
+  &.on {
+    background-color: #fff;
+    ::after {
+      background-color: #1c1c1c;
+      transform: translateX(12px);
+    }
+  }
+}
+
+.unavailable {
+  opacity: 0.5;
+}
 
 .playback-rate {
   .slider {
@@ -1682,91 +1792,107 @@ ${ut}
   }
 }
 
-`, St = () => {
-	let e = W(), t = W((e) => e.playbackRate), n = W((e) => e.audioTracks), r = W((e) => e.selectedAudioTrack), i = W((e) => e.selectAudioTrack), [a, o] = m(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } = ft({ onReset: () => o(0) }), p = (t) => {
-		e.setPlaybackRate(t), o(0);
-	}, h = (e) => {
-		e !== void 0 && f(e, () => i(e));
-	}, g = (e) => () => {
-		o(e);
+`, Ot = () => {
+	let e = G(), t = G((e) => e.playbackRate), n = G((e) => e.audioTracks), r = G((e) => e.selectedAudioTrack), i = G((e) => e.selectAudioTrack), a = G((e) => e.volumeNormalizer), [o, s] = m(0), { open: c, toggle: l, containerRef: u, pending: d, failed: f, runSelect: p } = vt({ onReset: () => s(0) }), h = (t) => {
+		e.setPlaybackRate(t), s(0);
+	}, g = (e) => {
+		e !== void 0 && p(e, () => i(e));
+	}, _ = (e) => () => {
+		s(e);
 	};
-	return /* @__PURE__ */ T("div", {
-		css: xt,
-		ref: l,
+	return /* @__PURE__ */ E("div", {
+		css: Dt,
+		ref: u,
 		children: [
-			/* @__PURE__ */ w($, {
+			/* @__PURE__ */ T($, {
 				id: "settings",
-				disabled: s,
-				text: /* @__PURE__ */ w("button", {
+				disabled: c,
+				text: /* @__PURE__ */ T("button", {
 					className: "settings",
 					type: "button",
-					onClick: c,
+					onClick: l,
 					"aria-label": "Settings",
-					"aria-expanded": s,
-					children: /* @__PURE__ */ w(L, {})
+					"aria-expanded": c,
+					children: /* @__PURE__ */ T(R, {})
 				}),
-				toolTipText: /* @__PURE__ */ w("span", { children: "Settings" })
+				toolTipText: /* @__PURE__ */ T("span", { children: "Settings" })
 			}),
-			s && a === 0 && /* @__PURE__ */ T("div", {
+			c && o === 0 && /* @__PURE__ */ E("div", {
 				className: "popover menu",
-				children: [n.length > 1 ? /* @__PURE__ */ T("div", {
-					onClick: g(2),
-					children: [/* @__PURE__ */ w("div", { children: "Audio" }), /* @__PURE__ */ w("div", { children: /* @__PURE__ */ w(A, {}) })]
-				}) : null, /* @__PURE__ */ T("div", {
-					onClick: g(1),
-					children: [/* @__PURE__ */ w("div", { children: "Playback speed" }), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("span", {
-						className: "secondary",
-						children: t === 1 ? "(Default)" : t.toFixed(2)
-					}), /* @__PURE__ */ w(A, {})] })]
-				})]
+				children: [
+					n.length > 1 ? /* @__PURE__ */ E("div", {
+						onClick: _(2),
+						children: [/* @__PURE__ */ T("div", { children: "Audio" }), /* @__PURE__ */ T("div", { children: /* @__PURE__ */ T(j, {}) })]
+					}) : null,
+					/* @__PURE__ */ E("div", {
+						onClick: _(1),
+						children: [/* @__PURE__ */ T("div", { children: "Playback speed" }), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
+							className: "secondary",
+							children: t === 1 ? "(Default)" : t.toFixed(2)
+						}), /* @__PURE__ */ T(j, {})] })]
+					}),
+					a ? /* @__PURE__ */ E("div", {
+						role: "switch",
+						"aria-checked": a.available && a.enabled,
+						"aria-disabled": !a.available,
+						className: a.available ? void 0 : "no-hover unavailable",
+						onClick: () => {
+							a.available && a.setEnabled(!a.enabled);
+						},
+						children: [/* @__PURE__ */ T("div", { children: "Normalize volume" }), /* @__PURE__ */ T("div", { children: a.available ? /* @__PURE__ */ T("span", { className: a.enabled ? "switch on" : "switch" }) : /* @__PURE__ */ T("span", {
+							className: "secondary",
+							children: "Unavailable"
+						}) })]
+					}) : null
+				]
 			}),
-			s && a === 1 && /* @__PURE__ */ T("div", {
+			c && o === 1 && /* @__PURE__ */ E("div", {
 				className: "popover playback-rate",
 				children: [
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ E("div", {
 						className: "back",
-						onClick: g(0),
-						children: [/* @__PURE__ */ w(k, {}), /* @__PURE__ */ w("span", { children: "Playback speed" })]
+						onClick: _(0),
+						children: [/* @__PURE__ */ T(A, {}), /* @__PURE__ */ T("span", { children: "Playback speed" })]
 					}),
-					/* @__PURE__ */ w("div", {
+					/* @__PURE__ */ T("div", {
 						className: "slider no-hover",
-						children: /* @__PURE__ */ w(bt, {})
+						children: /* @__PURE__ */ T(Et, {})
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ E("div", {
 						className: "options no-hover",
 						children: [
-							/* @__PURE__ */ w("div", {
-								onClick: () => p(.5),
+							/* @__PURE__ */ T("div", {
+								onClick: () => h(.5),
 								children: "0.5x"
 							}),
-							/* @__PURE__ */ w("div", {
-								onClick: () => p(1),
+							/* @__PURE__ */ T("div", {
+								onClick: () => h(1),
 								children: "1x"
 							}),
-							/* @__PURE__ */ w("div", {
-								onClick: () => p(1.5),
+							/* @__PURE__ */ T("div", {
+								onClick: () => h(1.5),
 								children: "1.5x"
 							}),
-							/* @__PURE__ */ w("div", {
-								onClick: () => p(2),
+							/* @__PURE__ */ T("div", {
+								onClick: () => h(2),
 								children: "2x"
 							})
 						]
 					})
 				]
 			}),
-			s && a === 2 && /* @__PURE__ */ w(dt, {
+			c && o === 2 && /* @__PURE__ */ T(_t, {
 				title: "Audio",
 				tracks: n,
 				selected: r,
-				onSelect: h,
-				onBack: g(0),
-				pending: u,
-				failed: d
+				onSelect: g,
+				onBack: _(0),
+				pending: d,
+				failed: f
 			})
 		]
 	});
-}, Ct = g`
+}, kt = g`
 /* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
    which is the width of the player box, so it can be clamped to it. */
 position: static;
@@ -1782,28 +1908,28 @@ position: static;
   }
 }
 
-${ut}
-`, wt = () => {
-	let e = W((e) => e.subtitleTracks), t = W((e) => e.selectedSubtitleTrack), n = W((e) => e.selectSubtitleTrack), r = W((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = ft();
+${gt}
+`, At = () => {
+	let e = G((e) => e.subtitleTracks), t = G((e) => e.selectedSubtitleTrack), n = G((e) => e.selectSubtitleTrack), r = G((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = vt();
 	if (e.length === 0) return null;
 	let u = t !== void 0;
-	return /* @__PURE__ */ T("div", {
-		css: Ct,
+	return /* @__PURE__ */ E("div", {
+		css: kt,
 		ref: o,
-		children: [/* @__PURE__ */ w($, {
+		children: [/* @__PURE__ */ T($, {
 			id: "subtitles",
 			disabled: i,
-			text: /* @__PURE__ */ w("button", {
+			text: /* @__PURE__ */ T("button", {
 				className: "subtitles",
 				type: "button",
 				onClick: a,
 				"aria-label": "Subtitles",
 				"aria-expanded": i,
 				"aria-pressed": u,
-				children: u ? /* @__PURE__ */ w(E, { className: "captions" }) : /* @__PURE__ */ w(D, { className: "captions-off" })
+				children: u ? /* @__PURE__ */ T(D, { className: "captions" }) : /* @__PURE__ */ T(O, { className: "captions-off" })
 			}),
-			toolTipText: /* @__PURE__ */ w("span", { children: "Subtitles" })
-		}), i && /* @__PURE__ */ w(dt, {
+			toolTipText: /* @__PURE__ */ T("span", { children: "Subtitles" })
+		}), i && /* @__PURE__ */ T(_t, {
 			title: "Subtitles",
 			tracks: e,
 			selected: t,
@@ -1813,13 +1939,13 @@ ${ut}
 			failed: c
 		})]
 	});
-}, Tt = {
+}, jt = {
 	primary: "#EAEBEE",
 	secondary: "#D0D0D9",
 	hover: "rgba(255, 255, 255, 0.13)",
 	borderPrimary: "#384F70",
 	backgroundTooltip: "#222222"
-}, Et = g`
+}, Mt = g`
   display: flex;
   align-items: center;
 
@@ -1862,8 +1988,8 @@ ${ut}
     width: 10px;
     height: 10px;
   }
-`, Dt = ({ value: e, onChange: t }) => {
-	let n = W((e) => e.volume), r = W((e) => e.muted), i = p(null), a = p(null), { handlers: o } = Ne({
+`, Nt = ({ value: e, onChange: t }) => {
+	let n = G((e) => e.volume), r = G((e) => e.muted), i = p(null), a = p(null), { handlers: o } = ze({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -1877,31 +2003,31 @@ ${ut}
 			e && e.removeEventListener("wheel", s);
 		};
 	}, [e]);
-	let c = e * 100, l = f(() => Math.round(r ? 0 : Oe(n) * 100), [n, r]);
-	return /* @__PURE__ */ w($, {
+	let c = e * 100, l = f(() => Math.round(r ? 0 : Ne(n) * 100), [n, r]);
+	return /* @__PURE__ */ T($, {
 		id: "volume-slider",
-		text: /* @__PURE__ */ w("div", {
+		text: /* @__PURE__ */ T("div", {
 			ref: i,
-			css: Et,
+			css: Mt,
 			...o,
-			children: /* @__PURE__ */ w("div", {
+			children: /* @__PURE__ */ T("div", {
 				ref: a,
 				style: { background: `linear-gradient(to right,
                 #fff 0% ${c}%,
                 #3A3A3A ${c}% 100%
               )` },
-				children: /* @__PURE__ */ w("div", {
+				children: /* @__PURE__ */ T("div", {
 					className: "volume-handle",
 					style: { left: `${e * 100}%` }
 				})
 			})
 		}),
-		toolTipText: /* @__PURE__ */ T("div", {
+		toolTipText: /* @__PURE__ */ E("div", {
 			className: "volume-value",
 			children: [l, "%"]
 		})
 	});
-}, Ot = g`
+}, Pt = g`
   position: relative;
   display: flex;
   align-items: center;
@@ -1926,7 +2052,7 @@ ${ut}
       border-radius: 4px;
 
       .volume-value {
-        ${X.bMedium.regular};
+        ${Z.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -1964,39 +2090,39 @@ ${ut}
     }
   }
 
-`, kt = ({ ref: e }) => {
-	let t = W(), n = W((e) => e.volume), r = W((e) => e.muted), i = f(() => Oe(n), [n]);
-	return /* @__PURE__ */ T("div", {
-		css: Ot,
-		children: [/* @__PURE__ */ w($, {
+`, Ft = ({ ref: e }) => {
+	let t = G(), n = G((e) => e.volume), r = G((e) => e.muted), i = f(() => Ne(n), [n]);
+	return /* @__PURE__ */ E("div", {
+		css: Pt,
+		children: [/* @__PURE__ */ T($, {
 			id: "sound",
-			text: /* @__PURE__ */ w("button", {
+			text: /* @__PURE__ */ T("button", {
 				className: "sound",
 				type: "button",
 				onClick: () => t.toggleMuted(),
 				ref: e,
 				"aria-label": "Mute",
 				"aria-pressed": r || n === 0,
-				children: w(r || n === 0 ? ee : n <= .5 ? z : B, {
+				children: T(r || n === 0 ? V : n <= .5 ? ee : B, {
 					size: 18,
 					color: "#fff"
 				})
 			}),
-			toolTipText: /* @__PURE__ */ w("span", { children: r ? "Unmute (m)" : "Mute (m)" })
-		}), /* @__PURE__ */ w("div", {
+			toolTipText: /* @__PURE__ */ T("span", { children: r ? "Unmute (m)" : "Mute (m)" })
+		}), /* @__PURE__ */ T("div", {
 			className: "volume-slider-container",
-			children: /* @__PURE__ */ w("div", {
+			children: /* @__PURE__ */ T("div", {
 				className: "volume-slider-background",
-				children: /* @__PURE__ */ w(Dt, {
+				children: /* @__PURE__ */ T(Nt, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(De(e));
+						t.setVolume(Me(e));
 					}
 				})
 			})
 		})]
 	});
-}, At = .05, jt = 5, Mt = 50, Nt = 1e3, Pt = g`
+}, It = .05, Lt = 5, Rt = 50, zt = 1e3, Bt = g`
   display: flex;
   flex-direction: column;
   gap: calc(0.4 * var(--mp-unit));
@@ -2005,7 +2131,7 @@ ${ut}
     opacity: 0.72;
     font-size: 0.9em;
   }
-`, Ft = g`
+`, Vt = g`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -2097,7 +2223,7 @@ ${ut}
         /* .armed is the hover of a control letting its click through, which takes no pointer events
            of its own and so is never :hover */
         :hover, &.armed {
-          background-color: ${Tt.hover};
+          background-color: ${jt.hover};
         }
 
         /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -2114,7 +2240,7 @@ ${ut}
 
     .left {
       .time {
-        ${X.bMedium.regular}
+        ${Z.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -2135,10 +2261,10 @@ ${ut}
       }
     }
   }
-`, It = () => {
-	let e = W(), t = W((e) => e.paused), n = W((e) => e.currentTime), r = W((e) => e.duration), i = W((e) => e.seekingTo), a = W((e) => e.fullscreen), o = W((e) => e.hideUI), s = W((e) => e.togglePictureInPicture), c = W((e) => e.pictureInPictureMode), l = W((e) => e.burnedInSubtitles), f = W((e) => e.passThroughPictureInPicture), h = W((e) => e.subtitleTracks), g = W((e) => e.requestSeek), [_, v] = m(null), y = p(null), b = p(void 0), x = c === "burn-in", S = h.length > 0, C = r > 0 && n === r, E = u(({ direction: t, stepSize: n }) => {
-		let r = Oe(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
-		e.setVolume(De(a)), o && !e.muted && e.toggleMuted();
+`, Ht = () => {
+	let e = G(), t = G((e) => e.paused), n = G((e) => e.currentTime), r = G((e) => e.duration), i = G((e) => e.seekingTo), a = G((e) => e.fullscreen), o = G((e) => e.hideUI), s = G((e) => e.togglePictureInPicture), c = G((e) => e.pictureInPictureMode), l = G((e) => e.burnedInSubtitles), f = G((e) => e.passThroughPictureInPicture), h = G((e) => e.subtitleTracks), g = G((e) => e.requestSeek), [_, v] = m(null), y = p(null), b = p(void 0), x = c === "burn-in", S = h.length > 0, C = r > 0 && n === r, w = u(({ direction: t, stepSize: n }) => {
+		let r = Ne(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
+		e.setVolume(Me(a)), o && !e.muted && e.toggleMuted();
 	}, [e]);
 	d(() => {
 		let t = (t) => g ? g(t) : e.seek(t), n = (n) => {
@@ -2149,35 +2275,35 @@ ${ut}
 			else if (n.key === "k") e.togglePaused();
 			else if (n.key === " ") e.togglePaused();
 			else if (n.key === "m") e.toggleMuted();
-			else if (n.key === "ArrowUp") E({
+			else if (n.key === "ArrowUp") w({
 				direction: "up",
-				stepSize: At
+				stepSize: It
 			});
-			else if (n.key === "ArrowDown") E({
+			else if (n.key === "ArrowDown") w({
 				direction: "down",
-				stepSize: At
+				stepSize: It
 			});
 			else if (n.key === "ArrowRight") {
 				if (!e.duration) return;
-				t(Math.min(e.currentTime + jt, e.duration));
-			} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - jt, 0)) : i = !1;
+				t(Math.min(e.currentTime + Lt, e.duration));
+			} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - Lt, 0)) : i = !1;
 			i && n.preventDefault();
 		};
 		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
 	}, [
 		e,
-		E,
+		w,
 		g
 	]);
 	let D = u((e) => {
-		e.preventDefault(), e.deltaY < 0 ? E({
+		e.preventDefault(), e.deltaY < 0 ? w({
 			direction: "up",
-			stepSize: At
-		}) : E({
+			stepSize: It
+		}) : w({
 			direction: "down",
-			stepSize: At
+			stepSize: It
 		});
-	}, [E]);
+	}, [w]);
 	d(() => {
 		if (_) return _.addEventListener("wheel", D, { passive: !1 }), () => _.removeEventListener("wheel", D);
 	}, [_, D]);
@@ -2201,49 +2327,49 @@ ${ut}
 			}
 			let n = y.current, r = document.activeElement;
 			n && r?.tagName === "IFRAME" && r.closest(".video")?.parentElement?.contains(n) && n.focus({ preventScroll: !0 });
-		}, Mt);
+		}, Rt);
 		return b.current = t, () => {
-			e = Date.now() + Nt;
+			e = Date.now() + zt;
 		};
-	}, [k]), d(() => () => clearInterval(b.current), []), /* @__PURE__ */ T("div", {
-		css: Ft,
+	}, [k]), d(() => () => clearInterval(b.current), []), /* @__PURE__ */ E("div", {
+		css: Vt,
 		style: { ...o ? {
 			opacity: "0",
 			pointerEvents: "none"
 		} : k ? { pointerEvents: "none" } : {} },
-		children: [/* @__PURE__ */ w(at, {}), /* @__PURE__ */ T("div", {
+		children: [/* @__PURE__ */ T(dt, {}), /* @__PURE__ */ E("div", {
 			className: "actions",
-			children: [/* @__PURE__ */ T("div", {
+			children: [/* @__PURE__ */ E("div", {
 				className: "left",
 				children: [
-					/* @__PURE__ */ w($, {
+					/* @__PURE__ */ T($, {
 						id: "play",
 						tooltipPlace: "top-start",
-						text: /* @__PURE__ */ w("button", {
+						text: /* @__PURE__ */ T("button", {
 							className: "play",
 							type: "button",
 							onClick: () => e.togglePaused(),
 							"aria-label": C ? "Replay" : t ? "Play" : "Pause",
-							children: w(C ? I : t ? F : P, {})
+							children: T(C ? L : t ? I : F, {})
 						}),
-						toolTipText: /* @__PURE__ */ w("span", { children: C ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
+						toolTipText: /* @__PURE__ */ T("span", { children: C ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ w(kt, { ref: v }),
-					/* @__PURE__ */ w("div", {
+					/* @__PURE__ */ T(Ft, { ref: v }),
+					/* @__PURE__ */ T("div", {
 						className: "time",
-						children: ke(i ?? n, r)
+						children: Fe(i ?? n, r)
 					})
 				]
-			}), /* @__PURE__ */ T("div", {
+			}), /* @__PURE__ */ E("div", {
 				className: "right",
 				children: [
-					/* @__PURE__ */ w(vt, {}),
-					/* @__PURE__ */ w(wt, {}),
-					/* @__PURE__ */ w(St, {}),
-					f ? /* @__PURE__ */ w($, {
+					/* @__PURE__ */ T(wt, {}),
+					/* @__PURE__ */ T(At, {}),
+					/* @__PURE__ */ T(Ot, {}),
+					f ? /* @__PURE__ */ T($, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
-						text: /* @__PURE__ */ w("button", {
+						text: /* @__PURE__ */ T("button", {
 							ref: y,
 							className: f.armed ? "picture-in-picture armed" : "picture-in-picture",
 							type: "button",
@@ -2252,56 +2378,56 @@ ${ut}
 							onClick: f.active ? f.exit : void 0,
 							"aria-label": "Picture in picture",
 							"aria-pressed": f.active,
-							children: /* @__PURE__ */ w("img", {
-								src: ot,
+							children: /* @__PURE__ */ T("img", {
+								src: ft,
 								alt: ""
 							})
 						}),
-						toolTipText: /* @__PURE__ */ w("span", { children: f.active ? "Exit picture in picture" : "Picture in picture" })
-					}) : s ? /* @__PURE__ */ w($, {
+						toolTipText: /* @__PURE__ */ T("span", { children: f.active ? "Exit picture in picture" : "Picture in picture" })
+					}) : s ? /* @__PURE__ */ T($, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
-						text: /* @__PURE__ */ w("button", {
+						text: /* @__PURE__ */ T("button", {
 							className: "picture-in-picture",
 							type: "button",
 							onClick: s,
 							disabled: x && !S,
 							"aria-label": x ? "Put the subtitles in the video" : "Picture in picture",
 							"aria-pressed": x ? l : void 0,
-							children: x ? w(l ? ct : lt, {}) : /* @__PURE__ */ w("img", {
-								src: ot,
+							children: x ? T(l ? mt : ht, {}) : /* @__PURE__ */ T("img", {
+								src: ft,
 								alt: ""
 							})
 						}),
-						toolTipText: /* @__PURE__ */ T("span", {
-							css: Pt,
-							children: [/* @__PURE__ */ w("span", {
+						toolTipText: /* @__PURE__ */ E("span", {
+							css: Bt,
+							children: [/* @__PURE__ */ T("span", {
 								className: "lead",
 								children: x ? S ? l ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture"
-							}), x && S ? /* @__PURE__ */ w("span", {
+							}), x && S ? /* @__PURE__ */ T("span", {
 								className: "hint",
 								children: "Then hover the video and click your browser's own pop out button"
 							}) : null]
 						})
 					}) : null,
-					/* @__PURE__ */ w($, {
+					/* @__PURE__ */ T($, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
-						text: /* @__PURE__ */ w("button", {
+						text: /* @__PURE__ */ T("button", {
 							className: "full-screen",
 							type: "button",
 							onClick: () => e.toggleFullscreen(),
 							"aria-label": "Full screen",
 							"aria-pressed": a,
-							children: w(a ? N : M, {})
+							children: T(a ? P : N, {})
 						}),
-						toolTipText: /* @__PURE__ */ w("span", { children: a ? "Exit full screen (f)" : "Full screen (f)" })
+						toolTipText: /* @__PURE__ */ T("span", { children: a ? "Exit full screen (f)" : "Full screen (f)" })
 					})
 				]
 			})]
 		})]
 	});
-}, Lt = 9e3, Rt = g`
+}, Ut = 9e3, Wt = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2339,12 +2465,12 @@ ${ut}
   }
 
   .title {
-    ${X.bMedium.bold}
+    ${Z.bMedium.bold}
     color: #fff;
   }
 
   .body {
-    ${X.bSmall.regular}
+    ${Z.bSmall.regular}
     color: rgba(255, 255, 255, 0.75);
   }
 
@@ -2355,42 +2481,42 @@ ${ut}
     line-height: 1;
     color: #fff;
   }
-`, zt = () => {
-	let e = W((e) => e.burnedInSubtitles), t = W((e) => e.pictureInPictureMode), [n, r] = m(!1);
+`, Gt = () => {
+	let e = G((e) => e.burnedInSubtitles), t = G((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
 			r(!1);
 			return;
 		}
 		r(!0);
-		let n = setTimeout(() => r(!1), Lt);
+		let n = setTimeout(() => r(!1), Ut);
 		return () => clearTimeout(n);
-	}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ w("div", {
-		css: Rt,
+	}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ T("div", {
+		css: Wt,
 		className: n ? "show" : "",
 		role: "status",
-		children: /* @__PURE__ */ T("div", {
+		children: /* @__PURE__ */ E("div", {
 			className: "card",
-			children: [/* @__PURE__ */ T("div", {
+			children: [/* @__PURE__ */ E("div", {
 				className: "words",
-				children: [/* @__PURE__ */ w("div", {
+				children: [/* @__PURE__ */ T("div", {
 					className: "title",
 					children: "Subtitles are in the picture"
-				}), /* @__PURE__ */ w("div", {
+				}), /* @__PURE__ */ T("div", {
 					className: "body",
 					children: "Now hover the video and click your browser's own pop out button"
 				})]
-			}), /* @__PURE__ */ w("div", {
+			}), /* @__PURE__ */ T("div", {
 				className: "arrow",
 				"aria-hidden": "true",
 				children: "→"
 			})]
 		})
 	});
-}, Bt = 1, Vt = 6e3, Ht = 1, Ut = {
+}, Kt = 1, qt = 6e3, Jt = 1, Yt = {
 	opening: "Skip Opening",
 	ending: "Skip Ending"
-}, Wt = g`
+}, Xt = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2407,7 +2533,7 @@ ${ut}
     pointer-events: auto;
     cursor: pointer;
 
-    ${X.bMedium.bold}
+    ${Z.bMedium.bold}
     color: #fff;
     padding: calc(1 * var(--mp-unit)) calc(1.8 * var(--mp-unit));
     border: 1px solid rgba(255, 255, 255, .55);
@@ -2441,10 +2567,10 @@ ${ut}
       bottom: calc(9 * var(--mp-unit));
     }
   }
-`, Gt = () => {
-	let e = W((e) => e.chapters), t = W((e) => e.currentTime), n = W((e) => e.requestSeek), r = W((e) => e.seekPreview), i = W(), a = f(() => nt(e), [e]), o = f(() => {
+`, Zt = () => {
+	let e = G((e) => e.chapters), t = G((e) => e.currentTime), n = G((e) => e.requestSeek), r = G((e) => e.seekPreview), i = G(), a = f(() => ct(e), [e]), o = f(() => {
 		if (typeof t != "number") return;
-		let n = e.findIndex((e, n) => a[n] !== void 0 && e.start - Bt <= t && t < e.end), r = n >= 0 ? a[n] : void 0;
+		let n = e.findIndex((e, n) => a[n] !== void 0 && e.start - Kt <= t && t < e.end), r = n >= 0 ? a[n] : void 0;
 		return r ? {
 			kind: r,
 			end: e[n].end
@@ -2456,7 +2582,7 @@ ${ut}
 	]), s = p(0), [c, l] = m(0);
 	d(() => {
 		let e = typeof t == "number" ? t : 0, n = s.current;
-		s.current = e, e < n - Ht && l((e) => e + 1);
+		s.current = e, e < n - Jt && l((e) => e + 1);
 	}, [t]);
 	let [u, h] = m(!1), g = o ? `${o.kind}@${o.end}` : "";
 	return d(() => {
@@ -2465,23 +2591,23 @@ ${ut}
 			return;
 		}
 		h(!0);
-		let e = setTimeout(() => h(!1), Vt);
+		let e = setTimeout(() => h(!1), qt);
 		return () => clearTimeout(e);
 	}, [g, c]), d(() => {
 		o || h(!1);
-	}, [o]), o ? /* @__PURE__ */ w("div", {
-		css: Wt,
+	}, [o]), o ? /* @__PURE__ */ T("div", {
+		css: Xt,
 		className: u && !r ? "show" : "",
-		children: /* @__PURE__ */ w("button", {
+		children: /* @__PURE__ */ T("button", {
 			type: "button",
 			className: "skip-chapter",
 			onClick: () => {
 				h(!1), n ? n(o.end) : i.seek(o.end);
 			},
-			children: Ut[o.kind]
+			children: Yt[o.kind]
 		})
 	}) : null;
-}, Kt = 3e3, qt = g`
+}, Qt = 3e3, $t = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2492,10 +2618,10 @@ ${ut}
      hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events does
      not, and transitioning it holds the item on screen for the length of the fade. */
   transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
-`, Jt = (e, t) => {
+`, en = (e, t) => {
 	let n = e.left - t.left, r = e.top - t.top;
 	return `path(evenodd, 'M0 0H${t.width}V${t.height}H0Z M${n} ${r}H${n + e.width}V${r + e.height}H${n}Z')`;
-}, Yt = g`
+}, tn = g`
   position: relative;
   background-color: black;
   display: flex;
@@ -2549,14 +2675,14 @@ ${ut}
   &.hide {
     cursor: none;
   }
-`, Xt = (e, t = "") => s.toArray(e).flatMap((e, n) => {
+`, nn = (e, t = "") => s.toArray(e).flatMap((e, n) => {
 	let r = `${t}${l(e) && e.key != null ? e.key : n}`;
-	return l(e) && e.type === c ? Xt(e.props.children, `${r}/`) : [{
+	return l(e) && e.type === c ? nn(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), Zt = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
-	let o = W(), s = W((e) => e.hideUI), c = W((e) => e.setHideUI), l = W((e) => e.hasMedia), u = W((e) => e.passThroughPictureInPicture), f = p(void 0), m = p("mouse"), h = p({
+}), rn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
+	let o = G(), s = G((e) => e.hideUI), c = G((e) => e.setHideUI), l = G((e) => e.hasMedia), u = G((e) => e.passThroughPictureInPicture), f = p(void 0), m = p("mouse"), h = p({
 		x: -1,
 		y: -1
 	}), g = p(null);
@@ -2576,15 +2702,15 @@ ${ut}
 		return !!n && g.current.contains(n) && !n.closest(".video");
 	}, b = () => {
 		if (y()) {
-			f.current = setTimeout(b, Kt);
+			f.current = setTimeout(b, Qt);
 			return;
 		}
 		_();
 	}, x = () => {
-		c(!1), clearTimeout(f.current), f.current = setTimeout(b, Kt);
+		c(!1), clearTimeout(f.current), f.current = setTimeout(b, Qt);
 	};
-	return /* @__PURE__ */ T("div", {
-		css: Yt,
+	return /* @__PURE__ */ E("div", {
+		css: tn,
 		ref: v,
 		onPointerMove: (e) => {
 			m.current = e.pointerType, e.pointerType === "mouse" && (h.current = {
@@ -2603,9 +2729,9 @@ ${ut}
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ w(we, { onSubtitleRef: n }),
-			Xt(r).map(({ key: e, item: t }) => /* @__PURE__ */ w("div", {
-				css: qt,
+			/* @__PURE__ */ T(ke, { onSubtitleRef: n }),
+			nn(r).map(({ key: e, item: t }) => /* @__PURE__ */ T("div", {
+				css: $t,
 				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
@@ -2613,15 +2739,15 @@ ${ut}
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ w(It, {}),
-			/* @__PURE__ */ w(zt, {}),
-			/* @__PURE__ */ w(Gt, {}),
-			u?.armed && g.current ? /* @__PURE__ */ w("div", {
+			i === !1 ? null : /* @__PURE__ */ T(Ht, {}),
+			/* @__PURE__ */ T(Gt, {}),
+			/* @__PURE__ */ T(Zt, {}),
+			u?.armed && g.current ? /* @__PURE__ */ T("div", {
 				className: "pass-through",
-				style: { clipPath: Jt(u.armed, g.current.getBoundingClientRect()) },
+				style: { clipPath: en(u.armed, g.current.getBoundingClientRect()) },
 				onPointerOver: u.disarm
 			}) : null,
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ E("div", {
 				className: "video",
 				onClick: () => {
 					if (m.current === "mouse") {
@@ -2630,109 +2756,127 @@ ${ut}
 					}
 					s ? x() : (clearTimeout(f.current), _());
 				},
-				children: [t ? /* @__PURE__ */ w("video", {
+				children: [t ? /* @__PURE__ */ T("video", {
 					ref: t,
 					playsInline: !0
 				}) : null, a]
 			})
 		]
 	});
-}, Qt = ({ options: e, children: t }) => {
-	let n = "media" in e ? e : null, r = n ? null : e, { title: i, chapters: a } = e, { size: o, downloadedRanges: s, publicPath: c, libavWorkerUrl: l, read: u, thumbnailRead: f, thumbnailsEnabled: h } = r ?? {}, g = b(), _ = y(), [v, x] = m(null), [S, C] = m(null), T = n?.media ?? v;
-	d(() => (g?.(T), () => g?.(null)), [T, g]);
-	let { expose: E } = e, D = E === !0 ? {} : E || void 0, O = p(D);
-	O.current = D;
-	let k = D ? D.id : void 0, A = D ? D.origin : void 0, j = D ? D.channel : void 0;
+}, an = ({ options: e, children: t }) => {
+	let n = "media" in e ? e : null, r = n ? null : e, { title: i, chapters: a } = e, { size: o, downloadedRanges: s, publicPath: c, libavWorkerUrl: l, read: u, thumbnailRead: h, thumbnailsEnabled: g } = r ?? {}, _ = b(), v = y(), [x, S] = m(null), [C, w] = m(null), E = n?.media ?? x;
+	d(() => (_?.(E), () => _?.(null)), [E, _]);
+	let { expose: D } = e, O = D === !0 ? {} : D || void 0, k = p(O);
+	k.current = O;
+	let A = O ? O.id : void 0, j = O ? O.origin : void 0, M = O ? O.channel : void 0;
 	d(() => {
-		if (!E || !T) return;
+		if (!D || !E) return;
 		let e, t = !1;
 		return import("./remote/index.js").then(({ exposePlayer: n }) => {
-			t || (e = n(T, O.current ?? {}));
+			t || (e = n(E, k.current ?? {}));
 		}).catch(() => {}), () => {
 			t = !0, e?.();
 		};
 	}, [
-		T,
-		!!E,
-		k,
+		E,
+		!!D,
 		A,
-		j
-	]), se(v, S, r);
-	let { thumbnails: M, requestThumbnail: N } = ue({
+		j,
+		M
+	]), se(x, C, r);
+	let N = r?.normalizeVolume, [P, F] = m(!!N);
+	d(() => {
+		F(!!N);
+	}, [N]);
+	let I = p(r?.onNormalizeVolumeChange);
+	I.current = r?.onNormalizeVolumeChange;
+	let L = r?.normalizerWorkletUrl, { refused: R } = Se(x, L, P), z = f(() => L && typeof AudioWorkletNode == "function" ? {
+		enabled: P,
+		available: !R,
+		setEnabled: (e) => {
+			F(e), I.current?.(e);
+		}
+	} : null, [
+		L,
+		P,
+		R
+	]), { thumbnails: ee, requestThumbnail: B } = ue({
 		publicPath: c,
 		workerUrl: l,
-		length: h === !1 ? void 0 : o,
-		read: f ?? u,
+		length: g === !1 ? void 0 : o,
+		read: h ?? u,
 		downloadedRanges: s
-	}), P = n?.thumbnails?.all ?? M, { toggle: F, mode: I, burnedIn: L } = de(v, S), R = _e(n?.media ?? null, n?.pictureInPicture), z = W((e) => e.setSourceState), B = n ? !!n.media : o !== void 0;
+	}), V = n?.thumbnails?.all ?? ee, { toggle: H, mode: te, burnedIn: U } = de(x, C), W = _e(n?.media ?? null, n?.pictureInPicture), K = G((e) => e.setSourceState), q = n ? !!n.media : o !== void 0;
 	d(() => {
-		z({
+		K({
 			title: i,
 			size: o,
 			downloadedRanges: s,
-			hasMedia: B
+			hasMedia: q
 		});
 	}, [
-		z,
+		K,
 		i,
 		o,
 		s,
-		B
+		q
 	]);
-	let ee = n?.thumbnails?.at;
+	let J = n?.thumbnails?.at;
 	d(() => {
-		z({
-			thumbnails: P,
-			thumbnailAt: ee,
-			requestThumbnail: N,
-			togglePictureInPicture: F,
-			pictureInPictureMode: I,
-			burnedInSubtitles: L
+		K({
+			thumbnails: V,
+			thumbnailAt: J,
+			requestThumbnail: B,
+			togglePictureInPicture: H,
+			pictureInPictureMode: te,
+			burnedInSubtitles: U
 		});
 	}, [
-		z,
-		P,
-		ee,
-		N,
-		F,
-		I,
-		L
+		K,
+		V,
+		J,
+		B,
+		H,
+		te,
+		U
 	]), d(() => {
-		z({ passThroughPictureInPicture: R });
-	}, [z, R]);
-	let V = n?.subtitles?.selection, H = n?.audioTracks?.selection;
+		K({ volumeNormalizer: z });
+	}, [K, z]), d(() => {
+		K({ passThroughPictureInPicture: W });
+	}, [K, W]);
+	let Y = n?.subtitles?.selection, X = n?.audioTracks?.selection;
 	return d(() => {
-		V && z({
-			subtitleTracks: V.options.map(({ id: e, label: t, disabled: n }) => ({
+		Y && K({
+			subtitleTracks: Y.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedSubtitleTrack: V.selectedId ?? void 0,
-			selectSubtitleTrack: (e) => V.select(e == null ? null : String(e)),
-			subtitleOffLabel: V.offLabel
+			selectedSubtitleTrack: Y.selectedId ?? void 0,
+			selectSubtitleTrack: (e) => Y.select(e == null ? null : String(e)),
+			subtitleOffLabel: Y.offLabel
 		});
-	}, [z, V]), d(() => {
-		H && z({
-			audioTracks: H.options.map(({ id: e, label: t, disabled: n }) => ({
+	}, [K, Y]), d(() => {
+		X && K({
+			audioTracks: X.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedAudioTrack: H.selectedId ?? void 0,
-			selectAudioTrack: (e) => H.select(String(e))
+			selectedAudioTrack: X.selectedId ?? void 0,
+			selectAudioTrack: (e) => X.select(String(e))
 		});
-	}, [z, H]), d(() => {
-		a && z({ chapters: a });
-	}, [z, a]), /* @__PURE__ */ w(Zt, {
-		ref: _,
-		onVideoRef: n ? void 0 : x,
-		onSubtitleRef: C,
+	}, [K, X]), d(() => {
+		a && K({ chapters: a });
+	}, [K, a]), /* @__PURE__ */ T(rn, {
+		ref: v,
+		onVideoRef: n ? void 0 : S,
+		onSubtitleRef: w,
 		overlay: e.overlay,
 		controls: e.controls,
 		children: t
 	});
-}, $t = g`
+}, on = g`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -2802,17 +2946,17 @@ ${ut}
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, en = (e) => /* @__PURE__ */ w("div", {
-	css: $t,
-	children: /* @__PURE__ */ w(U.Provider, { children: /* @__PURE__ */ w(Qt, {
+`, sn = (e) => /* @__PURE__ */ T("div", {
+	css: on,
+	children: /* @__PURE__ */ T(W.Provider, { children: /* @__PURE__ */ T(an, {
 		options: e,
 		children: e.children
 	}) })
-}), tn = (e) => !!e && typeof e == "object" && "at" in e, nn = (e) => !!e && typeof e == "object" && "selection" in e, rn = ({ blob: e, name: t }) => ({
+}), cn = (e) => !!e && typeof e == "object" && "at" in e, ln = (e) => !!e && typeof e == "object" && "selection" in e, un = ({ blob: e, name: t }) => ({
 	length: e.size,
 	name: t ?? (e instanceof File ? e.name : void 0),
 	read: (t, n) => e.slice(t, t + n).arrayBuffer()
-}), an = async (e, t) => {
+}), dn = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -2822,8 +2966,8 @@ ${ut}
 	if (!Number.isFinite(i) || i <= 0) throw Error("The source did not report its length");
 	if (!r && n.status !== 206) throw Error("The source does not support range requests");
 	return i;
-}, on = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await an(e, r);
+}, fn = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await dn(e, r);
 	return {
 		length: i,
 		name: n,
@@ -2838,9 +2982,9 @@ ${ut}
 			return o.arrayBuffer();
 		}
 	};
-}, sn = async (e) => {
-	if ("blob" in e) return rn(e);
-	if ("url" in e) return on(e);
+}, pn = async (e) => {
+	if ("blob" in e) return un(e);
+	if ("url" in e) return fn(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -2849,4 +2993,4 @@ ${ut}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { en as MediaPlayer, en as default, U as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, sn as inputToRemuxerInput, nn as isDelegatedTracks, tn as isExternalThumbnails, te as sourceFeature, i as startPlayback, de as usePictureInPicture, W as usePlayer, ue as useSeekThumbnails };
+export { sn as MediaPlayer, sn as default, W as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, pn as inputToRemuxerInput, ln as isDelegatedTracks, cn as isExternalThumbnails, U as sourceFeature, i as startPlayback, de as usePictureInPicture, G as usePlayer, ue as useSeekThumbnails };