@banou/media-player 0.7.0 → 0.8.1

package/dist/index.js

@@ -5,51 +5,76 @@ import { createPlayer as f, useContainerAttach as p, useMediaAttach as m } from
 import { definePlayerFeature as h, videoFeatures as g } from "@videojs/core/dom";
 import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
 import { ChevronLeft as b, ChevronRight as x, Maximize as S, Minimize as C, Pause as w, Play as T, RotateCcw as E, Settings as D, Volume1 as O, Volume2 as k, VolumeX as A } from "react-feather";
-import { Tooltip as ee } from "react-tooltip";
+import { Tooltip as j } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
-var te = {
+var ee = {
 	indexes: [],
 	thumbnails: [],
-	subtitleStreams: [],
-	selectedSubtitleStream: void 0,
-	selectSubtitleStream: () => {},
-	audioStreams: [],
-	selectedAudioStream: -1,
-	selectAudioStream: () => {},
+	subtitleTracks: [],
+	selectedSubtitleTrack: void 0,
+	selectSubtitleTrack: () => {},
+	audioTracks: [],
+	selectedAudioTrack: void 0,
+	selectAudioTrack: () => {},
 	hideUI: !1,
 	setHideUI: () => {},
-	togglePictureInPicture: () => {},
+	togglePictureInPicture: null,
 	playbackError: null,
 	ready: !1,
 	setSourceState: () => {}
-}, j = h({
+}, M = h({
 	name: "source",
-	state: () => ({ ...te }),
+	state: () => ({ ...ee }),
 	attach({ set: e }) {
 		e({
 			setSourceState: (t) => e(t),
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), M = f({
-	features: [...g, j],
+}), N = f({
+	features: [...g, M],
 	displayName: "MediaPlayer"
-}), N = M.usePlayer, ne = (t, n, r) => {
-	let i = N(), { read: s, size: u, publicPath: d, libavWorkerUrl: f, jassubWorkerUrl: p, jassubWasmUrl: m, jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r, [y, b] = l(void 0), x = c(null), S = c(0), C = c(!1), w = c(s);
+}), P = N.usePlayer, te = (e) => {
+	if (!(!e || e === "und")) try {
+		return new Intl.DisplayNames([navigator.language || "en"], {
+			type: "language",
+			fallback: "none"
+		}).of(e) || void 0;
+	} catch {
+		return;
+	}
+}, F = (e) => e?.replace(/_/g, " ").trim() || void 0, ne = (e) => {
+	let t = e.map((e) => te(e.language) ?? F(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 = F(e.title);
+		return {
+			track: e,
+			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
+		};
+	});
+}, I = (e) => ne(e).map(({ track: e, label: t }) => ({
+	id: e.streamIndex,
+	label: t
+})), re = (t, n, r) => {
+	let i = P(), { read: s, size: u, publicPath: d = "", libavWorkerUrl: f = "", jassubWorkerUrl: p = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = l(void 0), x = c(null), S = c(0), C = c(!1), w = c(s);
 	w.current = s;
-	let T = c(r.onSeek);
-	T.current = r.onSeek;
-	let E = c(r.onPlaybackError);
-	E.current = r.onPlaybackError;
+	let T = c(r?.onSeek);
+	T.current = r?.onSeek;
+	let E = c(r?.onPlaybackError);
+	E.current = r?.onPlaybackError;
 	let D = a((e) => {
-		C.current = !0, i.setSourceState({ selectedSubtitleStream: e }), x.current?.selectSubtitleStream(e);
+		let t = typeof e == "number" ? e : void 0;
+		C.current = !0, i.setSourceState({ selectedSubtitleTrack: t }), x.current?.selectSubtitleStream(t);
 	}, [i]), O = a((e) => {
-		i.setSourceState({ selectedAudioStream: e }), b(e);
-	}, [i]), k = N((e) => e.setSourceState);
+		typeof e == "number" && (i.setSourceState({ selectedAudioTrack: e }), b(e));
+	}, [i]), k = P((e) => e.setSourceState);
 	o(() => {
 		k({
-			selectSubtitleStream: D,
-			selectAudioStream: O
+			selectSubtitleTrack: D,
+			selectAudioTrack: O
 		});
 	}, [
 		k,
@@ -90,14 +115,14 @@ var te = {
 					onSeek: (e) => T.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || i.setSourceState({
-							subtitleStreams: e,
-							...C.current ? {} : { selectedSubtitleStream: e[0]?.streamIndex }
+							subtitleTracks: I(e),
+							...C.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || i.setSourceState({
-							audioStreams: e,
-							selectedAudioStream: t
+							audioTracks: I(e),
+							selectedAudioTrack: t
 						});
 					}
 				});
@@ -106,8 +131,8 @@ var te = {
 					return;
 				}
 				x.current = o, i.setSourceState({ indexes: o.indexes });
-				let s = i.selectedSubtitleStream;
-				s !== void 0 && o.selectSubtitleStream(s);
+				let s = i.selectedSubtitleTrack;
+				typeof s == "number" && o.selectSubtitleStream(s);
 			} catch (e) {
 				a(e);
 			}
@@ -119,7 +144,6 @@ var te = {
 		t,
 		n,
 		u,
-		s,
 		d,
 		f,
 		p,
@@ -130,13 +154,13 @@ var te = {
 		y,
 		v
 	]);
-}, re = 5e3, ie = 6e4, P = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
+}, L = 5e3, R = 6e4, z = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
 	let [u, d] = l([]), f = c(null), p = c(i);
 	p.current = i;
 	let m = s(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = c(m);
 	return h.current = m, o(() => {
-		if (!r || !i) return;
-		let a = !1, o = null, s, c = re, l = () => {
+		if (!r || !i || !e || !n) return;
+		let a = !1, o = null, s, c = L, l = () => {
 			t({
 				publicPath: e,
 				workerUrl: n,
@@ -152,7 +176,7 @@ var te = {
 				}
 				o = e, f.current = e, e.update(h.current);
 			}, () => {
-				a || (s = setTimeout(l, c), c = Math.min(c * 2, ie));
+				a || (s = setTimeout(l, c), c = Math.min(c * 2, R));
 			});
 		};
 		return l(), () => {
@@ -165,9 +189,9 @@ var te = {
 	]), o(() => {
 		f.current?.update(m);
 	}, [m]), u;
-}, F = (e, t) => {
-	let n = N(), r = c(null);
-	return o(() => {
+}, B = (e, t) => {
+	let n = P(), r = c(null);
+	o(() => {
 		if (!e || !t) return;
 		let a = i({
 			video: e,
@@ -181,54 +205,56 @@ var te = {
 		e,
 		t,
 		n
-	]), a(() => {
+	]);
+	let s = a(() => {
 		r.current?.toggle().catch((e) => {
 			console.warn("picture in picture was refused", e);
 		});
 	}, []);
-}, I = {
+	return e && t ? s : null;
+}, V = {
 	headings: {
-		large: "\n      font-weight: 600;\n      font-size: 2.8rem;\n      line-height: 3.4rem;\n      @media (min-width: 960px) {\n        font-size: 3.4rem;\n        line-height: 4.1rem;\n      }\n    ",
-		medium: "\n      font-weight: 600;\n      font-size: 2.4rem;\n      line-height: 2.9rem;\n      @media (min-width: 960px) {\n        font-size: 2.8rem;\n        line-height: 3.4rem;\n      }\n    ",
-		small: "\n      font-weight: 500;\n      font-size: 1.8rem;\n      line-height: 1.9rem;\n      @media (min-width: 960px) {\n        font-size: 1.8rem;\n        line-height: 2.2rem;\n      }\n      @media (min-width: 2560px) {\n        font-size: 2.2rem;\n        line-height: 2.6rem;\n      }\n    ",
-		extraSmall: "\n      font-weight: 500;\n      font-size: 1.4rem;\n      line-height: 1.7rem;\n      @media (min-width: 960px) {\n        font-size: 1.6rem;\n        line-height: 1.9rem;\n      }\n    "
+		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    ",
+		small: "\n      font-weight: 500;\n      font-size: calc(1.8 * var(--mp-unit));\n      line-height: calc(1.9 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.8 * var(--mp-unit));\n        line-height: calc(2.2 * var(--mp-unit));\n      }\n      @media (min-width: 2560px) {\n        font-size: calc(2.2 * var(--mp-unit));\n        line-height: calc(2.6 * var(--mp-unit));\n      }\n    ",
+		extraSmall: "\n      font-weight: 500;\n      font-size: calc(1.4 * var(--mp-unit));\n      line-height: calc(1.7 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.6 * var(--mp-unit));\n        line-height: calc(1.9 * var(--mp-unit));\n      }\n    "
 	},
 	bLarge: {
-		bold: "\n      font-weight: 600;\n      font-size: 1.4rem;\n      line-height: 2rem;\n      @media (min-width: 960px) {\n        font-size: 1.6rem;\n        line-height: 2.2rem;\n      }\n    ",
-		medium: "\n      font-weight: 500;\n      font-size: 1.4rem;\n      line-height: 2rem;\n      @media (min-width: 960px) {\n        font-size: 1.6rem;\n        line-height: 2.2rem;\n      }\n    ",
-		regular: "\n      font-weight: 400;\n      font-size: 1.4rem;\n      line-height: 2rem;\n      @media (min-width: 960px) {\n        font-size: 1.6rem;\n        line-height: 2.2rem;\n      }\n    "
+		bold: "\n      font-weight: 600;\n      font-size: calc(1.4 * var(--mp-unit));\n      line-height: calc(2 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.6 * var(--mp-unit));\n        line-height: calc(2.2 * var(--mp-unit));\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: calc(1.4 * var(--mp-unit));\n      line-height: calc(2 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.6 * var(--mp-unit));\n        line-height: calc(2.2 * var(--mp-unit));\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: calc(1.4 * var(--mp-unit));\n      line-height: calc(2 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.6 * var(--mp-unit));\n        line-height: calc(2.2 * var(--mp-unit));\n      }\n    "
 	},
 	bMedium: {
-		bold: "\n      font-weight: 600;\n      font-size: 1.2rem;\n      line-height: 1.7rem;\n      @media (min-width: 960px) {\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    ",
-		medium: "\n      font-weight: 500;\n      font-size: 1.2rem;\n      line-height: 1.7rem;\n      @media (min-width: 960px) {\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    ",
-		regular: "\n      font-weight: 400;\n      font-size: 1.2rem;\n      line-height: 1.7rem;\n      @media (min-width: 960px) {\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    "
+		bold: "\n      font-weight: 600;\n      font-size: calc(1.2 * var(--mp-unit));\n      line-height: calc(1.7 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.4 * var(--mp-unit));\n        line-height: calc(2 * var(--mp-unit));\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: calc(1.2 * var(--mp-unit));\n      line-height: calc(1.7 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.4 * var(--mp-unit));\n        line-height: calc(2 * var(--mp-unit));\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: calc(1.2 * var(--mp-unit));\n      line-height: calc(1.7 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.4 * var(--mp-unit));\n        line-height: calc(2 * var(--mp-unit));\n      }\n    "
 	},
 	bSmall: {
-		bold: "\n      font-weight: 600;\n      font-size: 1rem;\n      line-height: 1.4rem;\n      @media (min-width: 960px) {\n        font-size: 1.2rem;\n        line-height: 1.7rem;\n      }\n    ",
-		medium: "\n      font-weight: 500;\n      font-size: 1rem;\n      line-height: 1.4rem;\n      @media (min-width: 960px) {\n        font-size: 1.2rem;\n        line-height: 1.7rem;\n      }\n    ",
-		regular: "\n      font-weight: 400;\n      font-size: 1rem;\n      line-height: 1.4rem;\n      @media (min-width: 960px) {\n        font-size: 1.2rem;\n        line-height: 1.7rem;\n      }\n    "
+		bold: "\n      font-weight: 600;\n      font-size: calc(1 * var(--mp-unit));\n      line-height: calc(1.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.2 * var(--mp-unit));\n        line-height: calc(1.7 * var(--mp-unit));\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: calc(1 * var(--mp-unit));\n      line-height: calc(1.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.2 * var(--mp-unit));\n        line-height: calc(1.7 * var(--mp-unit));\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: calc(1 * var(--mp-unit));\n      line-height: calc(1.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.2 * var(--mp-unit));\n        line-height: calc(1.7 * var(--mp-unit));\n      }\n    "
 	},
 	bExtraSmall: {
-		bold: "\n      font-weight: 600;\n      font-size: 0.8rem;\n      line-height: 1.1rem;\n      @media (min-width: 960px) {\n        font-size: 1rem;\n        line-height: 1.4rem;\n      }\n    ",
-		medium: "\n      font-weight: 500;\n      font-size: 0.8rem;\n      line-height: 1.1rem;\n      @media (min-width: 960px) {\n        font-size: 1rem;\n        line-height: 1.4rem;\n      }\n    ",
-		regular: "\n      font-weight: 400;\n      font-size: 0.8rem;\n      line-height: 1.1rem;\n      @media (min-width: 960px) {\n        font-size: 1rem;\n        line-height: 1.4rem;\n      }\n    "
+		bold: "\n      font-weight: 600;\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    ",
+		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    "
 	}
-}, ae = u`
+}, ie = u`
   top: unset !important;
   left: unset !important;
   width: 100%;
   height: 100%;
   margin: auto;
   pointer-events: none;
-`, L = u`
+`, ae = u`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  padding: 1.2rem 1.6rem;
+  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(1.2rem + env(safe-area-inset-top, 0px));
-  ${I.headings.small}
+  padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
+  ${V.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -241,8 +267,8 @@ var te = {
   text-overflow: ellipsis;
 
   @media (min-width: 768px) {
-    padding: 2.4rem;
-    padding-top: calc(2.4rem + env(safe-area-inset-top, 0px));
+    padding: calc(2.4 * var(--mp-unit));
+    padding-top: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
     white-space: normal;
     overflow: visible;
   }
@@ -260,8 +286,8 @@ var te = {
 
   ::after {
     content: '';
-    width: 4rem;
-    height: 4rem;
+    width: calc(4 * var(--mp-unit));
+    height: calc(4 * var(--mp-unit));
     border-radius: 50%;
     border: 3px solid rgba(255, 255, 255, 0.25);
     border-top-color: #fff;
@@ -273,60 +299,60 @@ var te = {
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
-  padding: 0 2rem;
+  padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${I.bLarge.regular}
+  ${V.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", le = ({ onCanvasRef: e }) => {
-	let t = N((e) => e.title), n = N((e) => e.hideUI), r = N((e) => e.playbackError), i = N((e) => e.ready), a = N((e) => e.size);
+	let t = P((e) => e.title), n = P((e) => e.hideUI), r = P((e) => e.playbackError), i = P((e) => e.ready), a = P((e) => e.size), o = P((e) => e.waiting);
 	return /* @__PURE__ */ y(_, { children: [
 		t ? /* @__PURE__ */ v("div", {
-			css: L,
+			css: ae,
 			style: { ...n ? {
 				opacity: "0",
 				pointerEvents: "none"
 			} : {} },
 			children: t
 		}) : void 0,
-		a && !i && !r ? /* @__PURE__ */ v("div", { css: oe }) : void 0,
+		(a ? !i : o) && !r ? /* @__PURE__ */ v("div", { css: oe }) : void 0,
 		r ? /* @__PURE__ */ v("div", {
 			css: se,
 			children: ce(r)
 		}) : void 0,
 		/* @__PURE__ */ v("canvas", {
 			ref: e,
-			css: ae
+			css: ie
 		})
 	] });
-}, R = 1e-4, z = 1, B = (e) => Math.max(R, Math.min(z, e)) ** 2, V = (e) => Math.max(R, Math.min(z, e)) ** (z / 2), H = (e) => {
+}, H = 1e-4, U = 1, W = (e) => Math.max(H, Math.min(U, e)) ** 2, G = (e) => Math.max(H, Math.min(U, e)) ** (U / 2), K = (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}`;
-}, U = (e, t) => `${H(e)} / ${H(t)}`, W = (e) => u`
+}, ue = (e, t) => `${K(e)} / ${K(t)}`, de = (e) => u`
   display: flex;
   justify-content: flex-end;
 
-  border-radius: 0.4rem;
+  border-radius: calc(0.4 * var(--mp-unit));
   user-select: none;
 
   z-index: 3;
 
   * {
-    ${I.bMedium.regular}
+    ${V.bMedium.regular}
   }
 
   ${e === "sm" && u`
-    padding: 0.4rem!important;
+    padding: calc(0.4 * var(--mp-unit))!important;
   `}
   ${e === "md" && u`
-    padding: 0.6rem!important;
+    padding: calc(0.6 * var(--mp-unit))!important;
   `}
   ${e === "lg" && u`
-    padding: 1.2rem!important;
+    padding: calc(1.2 * var(--mp-unit))!important;
   `}
-`, G = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("div", {
+`, q = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("div", {
 	"data-tooltip-id": e,
 	"data-open": !0,
 	"data-tooltip-offset": a,
@@ -334,12 +360,12 @@ var te = {
 	"data-tooltip-delay-hide": i,
 	"data-tooltip-place": o,
 	children: n
-}), !s && /* @__PURE__ */ v(ee, {
-	css: W(c),
+}), !s && /* @__PURE__ */ v(j, {
+	css: de(c),
 	id: e,
 	noArrow: !0,
 	children: t
-})] }), K = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+})] }), J = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
 	let [i, s] = l(!1), u = c(t);
 	u.current = t;
 	let d = c(null), f = a((t, r) => {
@@ -366,12 +392,12 @@ var te = {
 			style: { touchAction: "none" }
 		}
 	};
-}, ue = u`
+}, fe = u`
   position: relative;
-  height: .4rem;
+  height: calc(.4 * var(--mp-unit));
 
-  --thumbnail-width: 25rem;
-  --thumbnail-half: 12.5rem;
+  --thumbnail-width: calc(25 * var(--mp-unit));
+  --thumbnail-half: calc(12.5 * var(--mp-unit));
 
   transition: transform .2s ease-in-out;
 
@@ -392,7 +418,7 @@ var te = {
     }
     .loaded {
       transform: scaleY(1.5);
-      top: -.1rem;
+      top: calc(-.1 * var(--mp-unit));
     }
     .play-container {
       transform: scaleY(1.5);
@@ -411,13 +437,13 @@ var te = {
     justify-content: center;
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${I.bMedium.bold}
+    ${V.bMedium.bold}
 
     position: absolute;
-    top: -2.5rem;
-    width: 5rem;
+    top: calc(-2.5 * var(--mp-unit));
+    width: calc(5 * var(--mp-unit));
 
-    margin-left: -2.5rem;
+    margin-left: calc(-2.5 * var(--mp-unit));
     pointer-events: none;
   }
 
@@ -425,12 +451,12 @@ var te = {
     transform-origin: 0 0;
     position: absolute;
     bottom: 0;
-    height: .4rem;
+    height: calc(.4 * var(--mp-unit));
     width: 100%;
     .loaded-part {
       transform-origin: 0 0;
       bottom: 0;
-      height: .4rem;
+      height: calc(.4 * var(--mp-unit));
       width: 100%;
       position: absolute;
       background-color: hsla(0, 100%, 100%, .4);
@@ -441,7 +467,7 @@ var te = {
     position: absolute;
     bottom: 0;
     width: 100%;
-    height: .4rem;
+    height: calc(.4 * var(--mp-unit));
   }
 
   .play {
@@ -449,14 +475,14 @@ var te = {
     background-color: #f03;
     position: absolute;
     bottom: 0;
-    height: .4rem;
+    height: calc(.4 * var(--mp-unit));
     width: 100%;
   }
 
   .padding {
     position: absolute;
     bottom: -7.5px;
-    height: 2rem;
+    height: calc(2 * var(--mp-unit));
     width: 100%;
   }
 
@@ -465,7 +491,7 @@ var te = {
     justify-content: center;
 
     position: absolute;
-    top: calc(-3.4375rem - var(--thumbnail-width) * 9/16);
+    top: calc(calc(-3.4375 * var(--mp-unit)) - var(--thumbnail-width) * 9/16);
     height: calc(var(--thumbnail-width) * 9/16);
     width: var(--thumbnail-width);
 
@@ -473,8 +499,8 @@ var te = {
     pointer-events: none;
 
     img {
-      border-radius: .4rem;
-      box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
+      border-radius: calc(.4 * var(--mp-unit));
+      box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
 
       width: 100%;
       height: 100%;
@@ -482,9 +508,9 @@ var te = {
     }
   }
 
-  /* a thumb is far wider than a cursor, so the hit strip grows to 44px and the track to .6rem */
+  /* a thumb is far wider than a cursor, so the hit strip grows to 44px and the track thickens */
   @media (pointer: coarse) {
-    height: .6rem;
+    height: calc(.6 * var(--mp-unit));
 
     /* press feedback, coarse only: a finger has no hover, so without this the bar gives no sign
        it is being dragged */
@@ -495,18 +521,18 @@ var te = {
     }
 
     .loaded {
-      height: .6rem;
+      height: calc(.6 * var(--mp-unit));
       .loaded-part {
-        height: .6rem;
+        height: calc(.6 * var(--mp-unit));
       }
     }
 
     .play-container {
-      height: .6rem;
+      height: calc(.6 * var(--mp-unit));
     }
 
     .play {
-      height: .6rem;
+      height: calc(.6 * var(--mp-unit));
     }
 
     /* grows upward into the video: centred, it would hang over the control row and win hit
@@ -520,28 +546,28 @@ var te = {
   /* the clamp only holds the preview inside the bar while the bar is the wider of the two, so
      below that the preview is narrowed instead */
   @media (max-width: 480px) {
-    --thumbnail-width: 18rem;
-    --thumbnail-half: 9rem;
+    --thumbnail-width: calc(18 * var(--mp-unit));
+    --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, de = () => {
-	let e = N(), t = N((e) => e.currentTime), n = N((e) => e.duration), r = N((e) => e.size), i = N((e) => e.downloadedRanges), a = N((e) => e.indexes), u = N((e) => e.thumbnails), d = c(null), [f, p] = l(void 0), [m, h] = l(void 0), g = c(void 0), { dragging: _, handlers: b } = K({
-		ref: d,
+`, pe = () => {
+	let e = P(), t = P((e) => e.currentTime), n = P((e) => e.duration), r = P((e) => e.size), i = P((e) => e.downloadedRanges), a = P((e) => e.indexes), u = P((e) => e.thumbnails), d = P((e) => e.thumbnailAt), f = c(null), [p, m] = l(void 0), [h, g] = l(void 0), _ = c(void 0), { dragging: b, handlers: x } = J({
+		ref: f,
 		onChange: (e) => {
-			p(e), g.current !== "mouse" && h(e * n);
+			m(e), _.current !== "mouse" && g(e * n);
 		}
-	}), x = (e) => {
-		g.current = e.pointerType, b.onPointerDown(e);
-	}, S = (e) => {
-		b.onPointerUp(e), e.pointerType !== "mouse" && h(void 0);
+	}), S = (e) => {
+		_.current = e.pointerType, x.onPointerDown(e);
 	}, C = (e) => {
-		if (!d.current) return;
-		let { left: t, right: r } = d.current.getBoundingClientRect();
-		return Math.min(Math.max((e - t) / (r - t), 0), 1) * n;
+		x.onPointerUp(e), e.pointerType !== "mouse" && g(void 0);
 	}, w = (e) => {
-		h(C(e.clientX));
-	}, T = () => {
-		d.current && h(void 0);
-	}, E = (e) => n ? e / n * 100 : 0, D = s(() => i?.map((e, t) => {
+		if (!f.current) return;
+		let { left: t, right: r } = f.current.getBoundingClientRect();
+		return Math.min(Math.max((e - t) / (r - t), 0), 1) * n;
+	}, T = (e) => {
+		g(w(e.clientX));
+	}, E = () => {
+		f.current && g(void 0);
+	}, D = (e) => n ? e / n * 100 : 0, O = s(() => i?.map((e, t) => {
 		if (!r || !n) return null;
 		let i = a.filter((t) => e.startByteOffset <= t.pos && t.pos <= e.endByteOffset), o = i.at(0), s = i.at(-1);
 		if (!o || !s) return null;
@@ -557,87 +583,73 @@ var te = {
 		n,
 		a.length,
 		i?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
-	]), O = s(() => {
-		if (!m || m < 0) return;
-		let e = Math.floor(m / 3600), t = Math.floor((m - e * 3600) / 60), n = Math.floor(m - e * 3600 - t * 60);
+	]), k = s(() => {
+		if (!h || h < 0) return;
+		let e = Math.floor(h / 3600), t = Math.floor((h - e * 3600) / 60), n = Math.floor(h - e * 3600 - t * 60);
 		return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
-	}, [m]);
+	}, [h]);
 	o(() => {
-		if (f === void 0 || !n) return;
-		let t = f * n;
+		if (p === void 0 || !n) return;
+		let t = p * n;
 		e.seek(t);
 	}, [
 		e,
-		f,
+		p,
 		n
 	]);
-	let k = s(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), A = s(() => {
-		if (!(!u.length || !m)) return u.find(({ startTime: e, endTime: t }) => e <= m && m < t);
-	}, [u.length, m]);
+	let A = s(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = s(() => {
+		if (h) {
+			if (d) return d(h);
+			if (u.length) return u.find(({ startTime: e, endTime: t }) => e <= h && h < t);
+		}
+	}, [
+		u,
+		d,
+		h
+	]);
 	return /* @__PURE__ */ y("div", {
-		css: ue,
-		ref: d,
-		className: _ ? "progress-bar dragging" : "progress-bar",
-		onMouseMove: w,
-		onMouseOut: T,
+		css: fe,
+		ref: f,
+		className: b ? "progress-bar dragging" : "progress-bar",
+		onMouseMove: T,
+		onMouseOut: E,
 		children: [
 			/* @__PURE__ */ v("div", { className: "background-bar" }),
-			m ? /* @__PURE__ */ v("div", {
+			h ? /* @__PURE__ */ v("div", {
 				className: "cursor-time",
-				style: { left: `clamp(1.8rem, ${E(m)}%, calc(100% - 1.8rem))` },
-				children: O
+				style: { left: `clamp(calc(1.8 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(1.8 * var(--mp-unit))))` },
+				children: k
 			}) : void 0,
 			/* @__PURE__ */ v("div", { className: "progress" }),
 			/* @__PURE__ */ v("div", {
 				className: "loaded",
-				children: D
+				children: O
 			}),
 			/* @__PURE__ */ v("div", { className: "hover" }),
 			/* @__PURE__ */ v("div", {
 				className: "play-container",
 				children: /* @__PURE__ */ v("div", {
 					className: "play",
-					style: { transform: `scaleX(${k})` }
+					style: { transform: `scaleX(${A})` }
 				})
 			}),
 			/* @__PURE__ */ v("div", { className: "chapters" }),
 			/* @__PURE__ */ v("div", { className: "scrubber" }),
 			/* @__PURE__ */ v("div", {
 				className: "padding",
-				...b,
-				onPointerDown: x,
-				onPointerUp: S,
-				onPointerCancel: S
+				...x,
+				onPointerDown: S,
+				onPointerUp: C,
+				onPointerCancel: C
 			}),
 			/* @__PURE__ */ v("div", {
 				className: "thumbnail",
-				style: { left: `clamp(var(--thumbnail-half), ${E(m ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
-				children: A?.url ? /* @__PURE__ */ v("img", { src: A.url }) : void 0
+				style: { left: `clamp(var(--thumbnail-half), ${D(h ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
+				children: j?.url ? /* @__PURE__ */ v("img", { src: j.url }) : void 0
 			})
 		]
 	});
-}, fe = "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", pe = (e) => {
-	if (!(!e || e === "und")) try {
-		return new Intl.DisplayNames([navigator.language || "en"], {
-			type: "language",
-			fallback: "none"
-		}).of(e) || void 0;
-	} catch {
-		return;
-	}
-}, q = (e) => e?.replace(/_/g, " ").trim() || void 0, me = (e) => {
-	let t = e.map((e) => pe(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 = q(e.title);
-		return {
-			track: e,
-			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
-		};
-	});
-}, he = u`
+}, me = "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", he = u`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -691,7 +703,7 @@ width: 100%;
   }
 }
 `, ge = () => {
-	let e = N(), t = N((e) => e.playbackRate), n = c(null), r = c(null), i = .25, a = 3 - i, s = (e, t = .05) => Math.round(e / t) * t, l = s(t || 1), u = (e) => (e - i) / a * 100, d = (e) => s(i + e * a), { handlers: f } = K({
+	let e = P(), t = P((e) => e.playbackRate), n = c(null), r = c(null), i = .25, a = 3 - i, s = (e, t = .05) => Math.round(e / t) * t, l = s(t || 1), u = (e) => (e - i) / a * 100, d = (e) => s(i + e * a), { handlers: f } = J({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(d(t))
 	}), p = (t) => {
@@ -763,7 +775,7 @@ position: relative;
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${I.bMedium.regular}
+  ${V.bMedium.regular}
 
   z-index: 4;
 
@@ -806,7 +818,7 @@ position: relative;
 
       .secondary {
         color: #eee;
-        ${I.bSmall.regular}
+        ${V.bSmall.regular}
       }
     }
   }
@@ -874,10 +886,7 @@ position: relative;
     word-break: break-word;
   }
 }
-`, J = (e) => me(e).map(({ track: e, label: t }) => ({
-	streamIndex: e.streamIndex,
-	label: t
-})), Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, allowDisable: a }) => /* @__PURE__ */ y("div", {
+`, Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, allowDisable: a }) => /* @__PURE__ */ y("div", {
 	className: "popover track-list",
 	children: [
 		/* @__PURE__ */ y("div", {
@@ -889,59 +898,59 @@ position: relative;
 			onClick: () => r(void 0),
 			children: [/* @__PURE__ */ v("span", { children: "Disable" }), /* @__PURE__ */ v("span", { children: n === void 0 ? "✓" : "" })]
 		}) : null,
-		t.map(({ streamIndex: e, label: t }) => /* @__PURE__ */ y("div", {
+		t.map(({ id: e, label: t }) => /* @__PURE__ */ y("div", {
 			onClick: () => r(e),
 			className: "description",
 			children: [/* @__PURE__ */ v("span", { children: t }), /* @__PURE__ */ v("span", { children: n === e ? "✓" : "" })]
 		}, e))
 	]
 }), ve = () => {
-	let e = N(), t = N((e) => e.playbackRate), n = N((e) => e.subtitleStreams), r = N((e) => e.selectedSubtitleStream), i = N((e) => e.selectSubtitleStream), a = N((e) => e.audioStreams), u = N((e) => e.selectedAudioStream), d = N((e) => e.selectAudioStream), [f, p] = l(!1), [m, h] = l(0), g = c(null), _ = () => {
-		p(!f), h(0);
-	}, S = (t) => {
-		e.setPlaybackRate(t), h(0);
+	let e = P(), t = P((e) => e.playbackRate), n = P((e) => e.subtitleTracks), r = P((e) => e.selectedSubtitleTrack), i = P((e) => e.selectSubtitleTrack), a = P((e) => e.audioTracks), s = P((e) => e.selectedAudioTrack), u = P((e) => e.selectAudioTrack), [d, f] = l(!1), [p, m] = l(0), h = c(null), g = () => {
+		f(!d), m(0);
+	}, _ = (t) => {
+		e.setPlaybackRate(t), m(0);
 	};
 	o(() => {
 		let e = (e) => {
-			f && g.current && !g.current.contains(e.target) && _();
+			d && h.current && !h.current.contains(e.target) && g();
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-	}, [f]);
-	let C = s(() => J(n), [n]), w = s(() => J(a), [a]), T = (e) => {
-		i(e), _();
-	}, E = (e) => {
-		e !== void 0 && d(e), _();
-	}, O = (e) => () => {
-		h(e);
+	}, [d]);
+	let S = (e) => {
+		i(e), g();
+	}, C = (e) => {
+		e !== void 0 && u(e), g();
+	}, w = (e) => () => {
+		m(e);
 	};
 	return /* @__PURE__ */ y("div", {
 		css: _e,
-		ref: g,
+		ref: h,
 		children: [
-			/* @__PURE__ */ v(G, {
+			/* @__PURE__ */ v(q, {
 				id: "settings",
-				disabled: f,
+				disabled: d,
 				text: /* @__PURE__ */ v("button", {
 					className: "settings",
 					type: "button",
-					onClick: _,
+					onClick: g,
 					children: /* @__PURE__ */ v(D, {})
 				}),
 				toolTipText: /* @__PURE__ */ v("span", { children: "Settings" })
 			}),
-			f && m === 0 && /* @__PURE__ */ y("div", {
+			d && p === 0 && /* @__PURE__ */ y("div", {
 				className: "popover menu",
 				children: [
-					w.length > 1 ? /* @__PURE__ */ y("div", {
-						onClick: O(3),
+					a.length > 1 ? /* @__PURE__ */ y("div", {
+						onClick: w(3),
 						children: [/* @__PURE__ */ v("div", { children: "Audio" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
 					}) : null,
-					C.length > 0 ? /* @__PURE__ */ y("div", {
-						onClick: O(2),
+					n.length > 0 ? /* @__PURE__ */ y("div", {
+						onClick: w(2),
 						children: [/* @__PURE__ */ v("div", { children: "Subtitles" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
 					}) : null,
 					/* @__PURE__ */ y("div", {
-						onClick: O(1),
+						onClick: w(1),
 						children: [/* @__PURE__ */ v("div", { children: "Playback speed" }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("span", {
 							className: "secondary",
 							children: t === 1 ? "(Default)" : t.toFixed(2)
@@ -949,12 +958,12 @@ position: relative;
 					})
 				]
 			}),
-			f && m === 1 && /* @__PURE__ */ y("div", {
+			d && p === 1 && /* @__PURE__ */ y("div", {
 				className: "popover playback-rate",
 				children: [
 					/* @__PURE__ */ y("div", {
 						className: "back",
-						onClick: O(0),
+						onClick: w(0),
 						children: [/* @__PURE__ */ v(b, {}), /* @__PURE__ */ v("span", { children: "Playback speed" })]
 					}),
 					/* @__PURE__ */ v("div", {
@@ -965,39 +974,39 @@ position: relative;
 						className: "options no-hover",
 						children: [
 							/* @__PURE__ */ v("div", {
-								onClick: () => S(.5),
+								onClick: () => _(.5),
 								children: "0.5x"
 							}),
 							/* @__PURE__ */ v("div", {
-								onClick: () => S(1),
+								onClick: () => _(1),
 								children: "1x"
 							}),
 							/* @__PURE__ */ v("div", {
-								onClick: () => S(1.5),
+								onClick: () => _(1.5),
 								children: "1.5x"
 							}),
 							/* @__PURE__ */ v("div", {
-								onClick: () => S(2),
+								onClick: () => _(2),
 								children: "2x"
 							})
 						]
 					})
 				]
 			}),
-			f && m === 2 && /* @__PURE__ */ v(Y, {
+			d && p === 2 && /* @__PURE__ */ v(Y, {
 				title: "Subtitles",
-				tracks: C,
+				tracks: n,
 				selected: r,
-				onSelect: T,
-				onBack: O(0),
+				onSelect: S,
+				onBack: w(0),
 				allowDisable: !0
 			}),
-			f && m === 3 && /* @__PURE__ */ v(Y, {
+			d && p === 3 && /* @__PURE__ */ v(Y, {
 				title: "Audio",
-				tracks: w,
-				selected: u,
-				onSelect: E,
-				onBack: O(0)
+				tracks: a,
+				selected: s,
+				onSelect: C,
+				onBack: w(0)
 			})
 		]
 	});
@@ -1051,7 +1060,7 @@ position: relative;
     height: 10px;
   }
 `, xe = ({ value: e, onChange: t }) => {
-	let n = N((e) => e.volume), r = N((e) => e.muted), i = c(null), a = c(null), { handlers: l } = K({
+	let n = P((e) => e.volume), r = P((e) => e.muted), i = c(null), a = c(null), { handlers: l } = J({
 		ref: a,
 		onChange: t
 	}), u = (n) => {
@@ -1065,8 +1074,8 @@ position: relative;
 			e && e.removeEventListener("wheel", u);
 		};
 	}, [e]);
-	let d = e * 100, f = s(() => Math.round(r ? 0 : V(n) * 100), [n, r]);
-	return /* @__PURE__ */ v(G, {
+	let d = e * 100, f = s(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
+	return /* @__PURE__ */ v(q, {
 		id: "volume-slider",
 		text: /* @__PURE__ */ v("div", {
 			ref: i,
@@ -1114,14 +1123,14 @@ position: relative;
       border-radius: 4px;
 
       .volume-value {
-        ${I.bMedium.regular};
+        ${V.bMedium.regular};
         color: #ffffff;
       }
     }
   }
 
   &:hover .volume-slider-container {
-    width: 9rem;
+    width: calc(9 * var(--mp-unit));
 
     transition: margin .2s cubic-bezier(0,0,0.2,1), width .2s cubic-bezier(0,0,0.2,1);
     -webkit-transition: margin .2s cubic-bezier(0,0,0.2,1), width .2s cubic-bezier(0,0,0.2,1);
@@ -1153,10 +1162,10 @@ position: relative;
   }
 
 `, Ce = ({ ref: e }) => {
-	let t = N(), n = N((e) => e.volume), r = N((e) => e.muted), i = s(() => V(n), [n]);
+	let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = s(() => G(n), [n]);
 	return /* @__PURE__ */ y("div", {
 		css: Se,
-		children: [/* @__PURE__ */ v(G, {
+		children: [/* @__PURE__ */ v(q, {
 			id: "sound",
 			text: /* @__PURE__ */ v("button", {
 				className: "sound",
@@ -1176,7 +1185,7 @@ position: relative;
 				children: /* @__PURE__ */ v(xe, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(B(e));
+						t.setVolume(W(e));
 					}
 				})
 			})
@@ -1283,7 +1292,7 @@ position: relative;
 
     .left {
       .time {
-        ${I.bMedium.regular}
+        ${V.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -1305,9 +1314,9 @@ position: relative;
     }
   }
 `, Te = () => {
-	let e = N(), t = N((e) => e.paused), n = N((e) => e.currentTime), r = N((e) => e.duration), i = N((e) => e.fullscreen), s = N((e) => e.hideUI), c = N((e) => e.togglePictureInPicture), [u, d] = l(null), f = r > 0 && n === r, p = a(({ direction: t, stepSize: n }) => {
-		let r = V(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
-		e.setVolume(B(a)), o && !e.muted && e.toggleMuted();
+	let e = P(), t = P((e) => e.paused), n = P((e) => e.currentTime), r = P((e) => e.duration), i = P((e) => e.fullscreen), s = P((e) => e.hideUI), c = P((e) => e.togglePictureInPicture), [u, d] = l(null), f = r > 0 && n === r, p = a(({ direction: t, stepSize: n }) => {
+		let r = G(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
+		e.setVolume(W(a)), o && !e.muted && e.toggleMuted();
 	}, [e]);
 	o(() => {
 		let t = (t) => {
@@ -1351,12 +1360,12 @@ position: relative;
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ v(de, {}), /* @__PURE__ */ y("div", {
+		children: [/* @__PURE__ */ v(pe, {}), /* @__PURE__ */ y("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ y("div", {
 				className: "left",
 				children: [
-					/* @__PURE__ */ v(G, {
+					/* @__PURE__ */ v(q, {
 						id: "play",
 						tooltipPlace: "top-start",
 						text: /* @__PURE__ */ v("button", {
@@ -1370,24 +1379,24 @@ position: relative;
 					/* @__PURE__ */ v(Ce, { ref: d }),
 					/* @__PURE__ */ v("div", {
 						className: "time",
-						children: U(n, r)
+						children: ue(n, r)
 					})
 				]
 			}), /* @__PURE__ */ y("div", {
 				className: "right",
 				children: [
 					/* @__PURE__ */ v(ve, {}),
-					/* @__PURE__ */ v(G, {
+					c ? /* @__PURE__ */ v(q, {
 						id: "picture-in-picture",
 						text: /* @__PURE__ */ v("button", {
 							className: "picture-in-picture",
 							type: "button",
 							onClick: c,
-							children: /* @__PURE__ */ v("img", { src: fe })
+							children: /* @__PURE__ */ v("img", { src: me })
 						}),
 						toolTipText: /* @__PURE__ */ v("span", { children: "Picture in picture" })
-					}),
-					/* @__PURE__ */ v(G, {
+					}) : null,
+					/* @__PURE__ */ v(q, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ v("button", {
@@ -1434,84 +1443,121 @@ position: relative;
   &.hide {
     cursor: none;
   }
-`, Oe = ({ ref: e, onVideoRef: t, onCanvasRef: n, children: r }) => {
-	let i = N(), a = N((e) => e.hideUI), s = N((e) => e.setHideUI), l = c(void 0), u = c("mouse");
-	o(() => () => clearTimeout(l.current), []);
-	let d = () => {
-		s(!1), clearTimeout(l.current), l.current = setTimeout(() => s(!0), Ee);
+`, Oe = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, children: i }) => {
+	let a = P(), s = P((e) => e.hideUI), l = P((e) => e.setHideUI), u = c(void 0), d = c("mouse");
+	o(() => () => clearTimeout(u.current), []);
+	let f = () => {
+		l(!1), clearTimeout(u.current), u.current = setTimeout(() => l(!0), Ee);
 	};
 	return /* @__PURE__ */ y("div", {
 		css: De,
 		ref: e,
 		onPointerMove: (e) => {
-			u.current = e.pointerType, e.pointerType === "mouse" && d();
+			d.current = e.pointerType, e.pointerType === "mouse" && f();
 		},
 		onPointerDown: (e) => {
-			u.current = e.pointerType;
+			d.current = e.pointerType;
 		},
 		onMouseOut: (e) => {
 			let t = e.relatedTarget;
 			if (t && e.currentTarget.contains(t)) return;
 			let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
-			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(l.current), s(!0));
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(u.current), l(!0));
 		},
-		className: a ? "hide" : "",
+		className: s ? "hide" : "",
 		children: [
 			/* @__PURE__ */ v(le, { onCanvasRef: n }),
+			r,
 			/* @__PURE__ */ v(Te, {}),
 			/* @__PURE__ */ y("div", {
 				className: "video",
 				onClick: () => {
-					if (u.current === "mouse") {
-						i.togglePaused();
+					if (d.current === "mouse") {
+						a.togglePaused();
 						return;
 					}
-					a ? d() : (clearTimeout(l.current), s(!0));
+					s ? f() : (clearTimeout(u.current), l(!0));
 				},
-				children: [/* @__PURE__ */ v("video", {
+				children: [t ? /* @__PURE__ */ v("video", {
 					ref: t,
 					playsInline: !0
-				}), r]
+				}) : null, i]
 			})
 		]
 	});
-}, ke = ({ options: e, children: t }) => {
-	let { title: n, size: r, downloadedRanges: i, publicPath: a, libavWorkerUrl: s, read: c } = e, u = m(), d = p(), [f, h] = l(null), [g, _] = l(null);
-	o(() => (u?.(f), () => u?.(null)), [f, u]), ne(f, g, e);
-	let y = P({
-		publicPath: a,
-		workerUrl: s,
-		length: r,
-		read: c,
-		downloadedRanges: i
-	}), b = F(f, g), x = N((e) => e.setSourceState);
-	return o(() => {
-		x({
-			title: n,
-			size: r,
-			downloadedRanges: i
+}, Q = ({ options: e, children: t }) => {
+	let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: s, publicPath: c, libavWorkerUrl: u, read: d, thumbnailRead: f, thumbnailsEnabled: h } = r ?? {}, g = m(), _ = p(), [y, b] = l(null), [x, S] = l(null), C = n?.media ?? y;
+	o(() => (g?.(C), () => g?.(null)), [C, g]), re(y, x, r);
+	let w = z({
+		publicPath: c,
+		workerUrl: u,
+		length: h === !1 ? void 0 : a,
+		read: f ?? d,
+		downloadedRanges: s
+	}), T = n?.thumbnails?.all ?? w, E = B(y, x), D = P((e) => e.setSourceState);
+	o(() => {
+		D({
+			title: i,
+			size: a,
+			downloadedRanges: s
 		});
 	}, [
-		x,
-		n,
-		r,
-		i
-	]), o(() => {
-		x({
-			thumbnails: y,
-			togglePictureInPicture: b
+		D,
+		i,
+		a,
+		s
+	]);
+	let O = n?.thumbnails?.at;
+	o(() => {
+		D({
+			thumbnails: T,
+			thumbnailAt: O,
+			togglePictureInPicture: E
 		});
 	}, [
-		x,
-		y,
-		b
-	]), /* @__PURE__ */ v(Oe, {
-		ref: d,
-		onVideoRef: h,
-		onCanvasRef: _,
+		D,
+		T,
+		O,
+		E
+	]);
+	let k = n?.subtitles?.selection, A = n?.audioTracks?.selection;
+	return o(() => {
+		k && D({
+			subtitleTracks: k.options.map(({ id: e, label: t }) => ({
+				id: e,
+				label: t
+			})),
+			selectedSubtitleTrack: k.selectedId ?? void 0,
+			selectSubtitleTrack: (e) => k.select(e == null ? null : String(e))
+		});
+	}, [D, k]), o(() => {
+		A && D({
+			audioTracks: A.options.map(({ id: e, label: t }) => ({
+				id: e,
+				label: t
+			})),
+			selectedAudioTrack: A.selectedId ?? void 0,
+			selectAudioTrack: (e) => A.select(String(e))
+		});
+	}, [D, A]), /* @__PURE__ */ v(Oe, {
+		ref: _,
+		onVideoRef: n ? void 0 : b,
+		onCanvasRef: S,
+		overlay: e.overlay,
 		children: t
 	});
-}, Q = u`
+}, ke = u`
+  /**
+   * The chrome's whole scale, in one place.
+   *
+   * Everything inside is sized against this rather than against \`rem\`, because \`rem\` is root
+   * relative and a library cannot own the host page's root font. The old contract was that the host
+   * set \`html { font-size: 62.5% }\`, which silently rendered every control 1.6x too large in any app
+   * that did not, and could not be met by an app whose own screens are sized against the default.
+   * Override it on the player element to rescale the whole chrome.
+   */
+  --mp-unit: 10px;
+
   display: flex;
   justify-content: center;
   background-color: #111;
@@ -1519,16 +1565,16 @@ position: relative;
   width: 100%;
   overflow: hidden;
 `, $ = (e) => /* @__PURE__ */ v("div", {
-	css: Q,
-	children: /* @__PURE__ */ v(M.Provider, { children: /* @__PURE__ */ v(ke, {
+	css: ke,
+	children: /* @__PURE__ */ v(N.Provider, { children: /* @__PURE__ */ v(Q, {
 		options: e,
 		children: e.children
 	}) })
-}), Ae = ({ blob: e, name: t }) => ({
+}), Ae = (e) => !!e && typeof e == "object" && "at" in e, je = (e) => !!e && typeof e == "object" && "selection" in e, Me = ({ 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()
-}), je = async (e, t) => {
+}), Ne = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -1538,8 +1584,8 @@ position: relative;
 	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;
-}, Me = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await je(e, r);
+}, Pe = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await Ne(e, r);
 	return {
 		length: i,
 		name: n,
@@ -1552,9 +1598,9 @@ position: relative;
 			return a.arrayBuffer();
 		}
 	};
-}, Ne = async (e) => {
-	if ("blob" in e) return Ae(e);
-	if ("url" in e) return Me(e);
+}, Fe = async (e) => {
+	if ("blob" in e) return Me(e);
+	if ("url" in e) return Pe(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -1563,4 +1609,4 @@ position: relative;
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { $ as MediaPlayer, $ as default, M as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, Ne as inputToRemuxerInput, j as sourceFeature, e as startPlayback, F as usePictureInPicture, N as usePlayer, P as useSeekThumbnails };
+export { $ as MediaPlayer, $ as default, N as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, Fe as inputToRemuxerInput, je as isDelegatedTracks, Ae as isExternalThumbnails, M as sourceFeature, e as startPlayback, B as usePictureInPicture, P as usePlayer, z as useSeekThumbnails };