@banou/media-player 0.8.4 → 0.8.5

package/dist/index.js

@@ -4,10 +4,10 @@ import { css as p, keyframes as m } from "@emotion/react";
 import { createPlayer as h, useContainerAttach as g, useMediaAttach as _ } from "@videojs/react";
 import { definePlayerFeature as v, videoFeatures as y } from "@videojs/core/dom";
 import { Fragment as b, jsx as x, jsxs as S } from "@emotion/react/jsx-runtime";
-import { ChevronLeft as C, ChevronRight as w, Maximize as T, Minimize as E, Pause as D, Play as O, RotateCcw as k, Settings as A, Volume1 as j, Volume2 as M, VolumeX as ee } from "react-feather";
-import { Tooltip as te } from "react-tooltip";
+import { ChevronLeft as C, ChevronRight as w, Maximize as T, Minimize as E, Pause as D, Play as O, RotateCcw as k, Settings as A, Volume1 as j, Volume2 as ee, VolumeX as te } from "react-feather";
+import { Tooltip as ne } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
-var ne = {
+var re = {
 	indexes: [],
 	thumbnails: [],
 	subtitleTracks: [],
@@ -22,19 +22,19 @@ var ne = {
 	playbackError: null,
 	ready: !1,
 	setSourceState: () => {}
-}, N = v({
+}, M = v({
 	name: "source",
-	state: () => ({ ...ne }),
+	state: () => ({ ...re }),
 	attach({ set: e }) {
 		e({
 			setSourceState: (t) => e(t),
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), P = h({
-	features: [...y, N],
+}), N = h({
+	features: [...y, M],
 	displayName: "MediaPlayer"
-}), F = P.usePlayer, re = (e) => {
+}), P = N.usePlayer, ie = (e) => {
 	if (!(!e || e === "und")) try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -43,23 +43,23 @@ var ne = {
 	} catch {
 		return;
 	}
-}, I = (e) => e?.replace(/_/g, " ").trim() || void 0, L = (e) => {
-	let t = e.map((e) => re(e.language) ?? I(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
+}, F = (e) => e?.replace(/_/g, " ").trim() || void 0, ae = (e) => {
+	let t = e.map((e) => ie(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 = I(e.title);
+		let i = t[r], a = F(e.title);
 		return {
 			track: e,
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, R = (e) => L(e).map(({ track: e, label: t }) => ({
+}, I = (e) => ae(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), ie = (t, n, r) => {
-	let i = F(), { read: a, size: o, publicPath: s = "", libavWorkerUrl: u = "", jassubWorkerUrl: p = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = f(void 0), x = d(null), S = d(0), C = d(!1), w = d(a);
+})), oe = (t, n, r) => {
+	let i = P(), { read: a, size: o, publicPath: s = "", libavWorkerUrl: u = "", jassubWorkerUrl: p = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = f(void 0), x = d(null), S = d(0), C = d(!1), w = d(a);
 	w.current = a;
 	let T = d(r?.onSeek);
 	T.current = r?.onSeek;
@@ -70,7 +70,7 @@ var ne = {
 		C.current = !0, i.setSourceState({ selectedSubtitleTrack: t }), x.current?.selectSubtitleStream(t);
 	}, [i]), O = c((e) => {
 		typeof e == "number" && (i.setSourceState({ selectedAudioTrack: e }), b(e));
-	}, [i]), k = F((e) => e.setSourceState);
+	}, [i]), k = P((e) => e.setSourceState);
 	l(() => {
 		k({
 			selectSubtitleTrack: D,
@@ -115,13 +115,13 @@ var ne = {
 					onSeek: (e) => T.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || i.setSourceState({
-							subtitleTracks: R(e),
+							subtitleTracks: I(e),
 							...C.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || i.setSourceState({
-							audioTracks: R(e),
+							audioTracks: I(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -154,13 +154,13 @@ var ne = {
 		y,
 		v
 	]);
-}, ae = 5e3, oe = 6e4, z = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
+}, se = 5e3, ce = 6e4, L = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
 	let [o, s] = f([]), c = d(null), p = d(i);
 	p.current = i;
 	let m = u(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = d(m);
 	return h.current = m, l(() => {
 		if (!r || !i || !e || !n) return;
-		let a = !1, o = null, l, u = ae, d = () => {
+		let a = !1, o = null, l, u = se, d = () => {
 			t({
 				publicPath: e,
 				workerUrl: n,
@@ -176,7 +176,7 @@ var ne = {
 				}
 				o = e, c.current = e, e.update(h.current);
 			}, () => {
-				a || (l = setTimeout(d, u), u = Math.min(u * 2, oe));
+				a || (l = setTimeout(d, u), u = Math.min(u * 2, ce));
 			});
 		};
 		return d(), () => {
@@ -189,8 +189,8 @@ var ne = {
 	]), l(() => {
 		c.current?.update(m);
 	}, [m]), o;
-}, B = (e, t) => {
-	let n = F(), r = d(null);
+}, R = (e, t) => {
+	let n = P(), r = d(null);
 	l(() => {
 		if (!e || !t) return;
 		let a = i({
@@ -212,7 +212,7 @@ var ne = {
 		});
 	}, []);
 	return e && t ? a : null;
-}, V = {
+}, 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    ",
@@ -239,14 +239,14 @@ var ne = {
 		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    "
 	}
-}, se = p`
+}, le = p`
   top: unset !important;
   left: unset !important;
   width: 100%;
   height: 100%;
   margin: auto;
   pointer-events: none;
-`, ce = p`
+`, ue = p`
   position: absolute;
   top: 0;
   left: 0;
@@ -254,7 +254,7 @@ var ne = {
   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));
-  ${V.headings.small}
+  ${z.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -275,7 +275,7 @@ var ne = {
 
   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);
-`, le = p`
+`, de = p`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -295,43 +295,43 @@ var ne = {
   to { transform: rotate(360deg); }
 `} 0.8s linear infinite;
   }
-`, ue = p`
+`, fe = p`
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${V.bLarge.regular}
+  ${z.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, de = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", fe = ({ onCanvasRef: e }) => {
-	let t = F((e) => e.title), n = F((e) => e.hideUI), r = F((e) => e.playbackError), i = F((e) => e.ready), a = F((e) => e.size), o = F((e) => e.waiting);
+`, pe = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", me = ({ onCanvasRef: e }) => {
+	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__ */ S(b, { children: [
 		t ? /* @__PURE__ */ x("div", {
 			className: "title",
-			css: ce,
+			css: ue,
 			style: { ...n ? {
 				opacity: "0",
 				pointerEvents: "none"
 			} : {} },
 			children: t
 		}) : void 0,
-		(a ? !i : o) && !r ? /* @__PURE__ */ x("div", { css: le }) : void 0,
+		(a ? !i : o) && !r ? /* @__PURE__ */ x("div", { css: de }) : void 0,
 		r ? /* @__PURE__ */ x("div", {
-			css: ue,
-			children: de(r)
+			css: fe,
+			children: pe(r)
 		}) : void 0,
 		/* @__PURE__ */ x("canvas", {
 			ref: e,
-			css: se
+			css: le
 		})
 	] });
-}, 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) => {
+}, B = 1e-4, V = 1, H = (e) => Math.max(B, Math.min(V, e)) ** 2, U = (e) => Math.max(B, Math.min(V, e)) ** (V / 2), W = (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}`;
-}, pe = (e, t) => `${K(e)} / ${K(t)}`, me = (e) => p`
+}, he = (e, t) => `${W(e)} / ${W(t)}`, ge = (e) => p`
   display: flex;
   justify-content: flex-end;
 
@@ -341,7 +341,7 @@ var ne = {
   z-index: 3;
 
   * {
-    ${V.bMedium.regular}
+    ${z.bMedium.regular}
   }
 
   ${e === "sm" && p`
@@ -353,7 +353,7 @@ var ne = {
   ${e === "lg" && p`
     padding: calc(1.2 * var(--mp-unit))!important;
   `}
-`, 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__ */ S(b, { children: [/* @__PURE__ */ x("div", {
+`, 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__ */ S(b, { children: [/* @__PURE__ */ x("div", {
 	"data-tooltip-id": e,
 	"data-open": !0,
 	"data-tooltip-offset": a,
@@ -361,12 +361,12 @@ var ne = {
 	"data-tooltip-delay-hide": i,
 	"data-tooltip-place": o,
 	children: n
-}), !s && /* @__PURE__ */ x(te, {
-	css: me(c),
+}), !s && /* @__PURE__ */ x(ne, {
+	css: ge(c),
 	id: e,
 	noArrow: !0,
 	children: t
-})] }), J = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+})] }), K = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
 	let [i, a] = f(!1), o = d(t);
 	o.current = t;
 	let s = d(null), u = c((t, r) => {
@@ -393,7 +393,7 @@ var ne = {
 			style: { touchAction: "none" }
 		}
 	};
-}, he = p`
+}, _e = p`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -437,14 +437,28 @@ var ne = {
     display: flex;
     justify-content: center;
 
+    /* The seekbar's other hover affordance, the thumbnail below, gets a rounded box and a drop
+       shadow. A source that ships no thumbnails, which is every source whose media the player does
+       not own, leaves this readout as the entire preview, so it carries the same treatment instead
+       of sitting as bare text on the picture. The ink comes from the player root. */
+    background-color: rgba(28, 28, 28, .95);
+    border-radius: calc(.4 * var(--mp-unit));
+    padding: 0 calc(.6 * var(--mp-unit));
+    box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
+
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${V.bMedium.bold}
+    ${z.bMedium.bold}
 
     position: absolute;
-    top: calc(-2.5 * var(--mp-unit));
-    width: calc(5 * var(--mp-unit));
+    /* Anchored on its bottom edge rather than its top: now that it has a background its height
+       follows the font size, and a top-anchored box would grow downward into the track. */
+    bottom: calc(1.2 * var(--mp-unit));
+    /* Sized to its content, replacing a fixed 5 unit box that \`1:04:09\` overflows. Transparent, that
+       overflow was invisible; filled, it would not be. */
+    width: max-content;
+    white-space: nowrap;
+    transform: translateX(-50%);
 
-    margin-left: calc(-2.5 * var(--mp-unit));
     pointer-events: none;
   }
 
@@ -550,8 +564,8 @@ var ne = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, ge = () => {
-	let e = F(), t = F((e) => e.currentTime), n = F((e) => e.duration), r = F((e) => e.size), i = F((e) => e.downloadedRanges), a = F((e) => e.indexes), o = F((e) => e.thumbnails), s = F((e) => e.thumbnailAt), c = d(null), [p, m] = f(void 0), [h, g] = f(void 0), _ = d(void 0), { dragging: v, handlers: y } = J({
+`, ve = () => {
+	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), o = P((e) => e.thumbnails), s = P((e) => e.thumbnailAt), c = d(null), [p, m] = f(void 0), [h, g] = f(void 0), _ = d(void 0), { dragging: v, handlers: y } = K({
 		ref: c,
 		onChange: (e) => {
 			m(e), _.current !== "mouse" && g(e * n);
@@ -609,7 +623,7 @@ var ne = {
 		h
 	]);
 	return /* @__PURE__ */ S("div", {
-		css: he,
+		css: _e,
 		ref: c,
 		className: v ? "progress-bar dragging" : "progress-bar",
 		onMouseMove: T,
@@ -618,7 +632,7 @@ var ne = {
 			/* @__PURE__ */ x("div", { className: "background-bar" }),
 			h ? /* @__PURE__ */ x("div", {
 				className: "cursor-time",
-				style: { left: `clamp(calc(1.8 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(1.8 * var(--mp-unit))))` },
+				style: { left: `clamp(calc(3 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(3 * var(--mp-unit))))` },
 				children: k
 			}) : void 0,
 			/* @__PURE__ */ x("div", { className: "progress" }),
@@ -650,7 +664,7 @@ var ne = {
 			})
 		]
 	});
-}, _e = "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", ve = p`
+}, ye = "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", be = p`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -703,8 +717,8 @@ width: 100%;
     }
   }
 }
-`, ye = () => {
-	let e = F(), t = F((e) => e.playbackRate), n = d(null), r = d(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, u = (e) => o(i + e * a), { handlers: f } = J({
+`, xe = () => {
+	let e = P(), t = P((e) => e.playbackRate), n = d(null), r = d(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, u = (e) => o(i + e * a), { handlers: f } = K({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(u(t))
 	}), p = (t) => {
@@ -720,7 +734,7 @@ width: 100%;
 	}, [t]);
 	let m = c(s);
 	return /* @__PURE__ */ S("div", {
-		css: ve,
+		css: be,
 		children: [/* @__PURE__ */ S("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ x("div", {
 			className: "playback-slider",
 			ref: n,
@@ -738,37 +752,38 @@ width: 100%;
 			})
 		})]
 	});
-}, be = p`
-position: relative;
-
-.settings {
-  /* the icon keeps its size, the pressable box grows around it */
-  @media (pointer: coarse) {
-    box-sizing: border-box;
-    justify-content: center;
-
-    min-width: 44px;
-    min-height: 44px;
-  }
-}
-
+}, q = p`
 .popover {
   position: absolute;
-  /* the gear sits a couple of buttons in from the right edge, so a centred popover hangs off that
-     edge on a phone. It anchors to the button instead until the viewport has room to centre it. */
-  right: 0;
-  transform: none;
+  /* Anchored to the PLAYER's right edge, never to the gear. The gear is not the last control in the
+     bar, so a menu centred on it puts its own edges wherever the button happens to sit: with no
+     picture-in-picture button, which is every source whose media the player does not own, an edge
+     landed outside the box, and the root's \`overflow: hidden\` cut it off, taking the rows under it
+     out of reach. The inset matches the bar's own padding so the menu lines up with the last button. */
+  right: calc(12px + env(safe-area-inset-right, 0px));
+  bottom: calc(100% + 8px);
 
   overflow-y: auto;
   width: 180px;
-  max-width: calc(100vw - 24px);
-  height: 160px;
-  top: -180px;
+  /* \`100%\` is the control bar, which is the width of the PLAYER. The old \`100vw\` was the viewport,
+     which equals the player only when the player is the whole document, and it is the wrong kind of
+     guard besides: a max-width shrinks the box, it never moves it back inside. */
+  max-width: calc(100% - 24px);
+  /* Sized to its rows, capped at what fits. A fixed height left the settings menu two thirds empty
+     once subtitles moved out to its own button, and a long track list scrolls at the cap either way. */
+  height: max-content;
+  /* The room actually above the bar. A short player had the top of the menu clipped by that same
+     \`overflow: hidden\`. With no size container in the ancestry this resolves against the small
+     viewport, so it can only ever shrink the box, never grow it. */
+  max-height: min(160px, calc(100cqh - 100% - 16px));
   @media (min-width: 768px) {
-    right: 50%;
-    transform: translateX(50%);
+    right: calc(16px + env(safe-area-inset-right, 0px));
     width: 250px;
-    height: 160px;
+    max-width: calc(100% - 32px);
+  }
+  @media (min-width: 2560px) {
+    right: calc(24px + env(safe-area-inset-right, 0px));
+    max-width: calc(100% - 48px);
   }
 
   display: flex;
@@ -776,7 +791,7 @@ position: relative;
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${V.bMedium.regular}
+  ${z.bMedium.regular}
 
   z-index: 4;
 
@@ -819,7 +834,7 @@ position: relative;
 
       .secondary {
         color: #eee;
-        ${V.bSmall.regular}
+        ${z.bSmall.regular}
       }
     }
   }
@@ -843,45 +858,6 @@ position: relative;
   }
 }
 
-.playback-rate {
-  .slider {
-    width: 100%;
-  }
-  .options {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    align-items: center;
-
-    padding: 8px 12px;
-    /* four presets across a 180px popover leave targets 34px wide, so a finger gets two rows of two
-       until the popover is wide enough for the row of four */
-    @media (pointer: coarse) {
-      grid-template-columns: 1fr 1fr;
-    }
-    @media (pointer: coarse) and (min-width: 768px) {
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-    }
-
-    > div {
-      display: flex;
-      align-items: center;
-      border-radius: 4px;
-
-      padding: 8px 6px;
-      height: 100%;
-      @media (pointer: coarse) {
-        box-sizing: border-box;
-        min-height: 44px;
-      }
-
-      cursor: pointer;
-      :hover {
-        background-color: rgba(255,255,255,.1);
-      }
-    }
-  }
-}
-
 .track-list {
   .description {
     word-break: break-word;
@@ -900,10 +876,10 @@ position: relative;
   .failed {
     border-bottom: 1px solid #4D4D4E;
     color: #f66;
-    ${V.bSmall.regular}
+    ${z.bSmall.regular}
   }
 }
-`, Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
+`, J = ({ 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__ */ S("div", {
@@ -918,9 +894,9 @@ position: relative;
 		className: "popover track-list",
 		children: [
 			/* @__PURE__ */ S("div", {
-				className: "back",
+				className: i ? "back" : "back no-hover",
 				onClick: i,
-				children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: e })]
+				children: [i ? /* @__PURE__ */ x(C, {}) : null, /* @__PURE__ */ x("span", { children: e })]
 			}),
 			s ? /* @__PURE__ */ x("div", {
 				className: "no-hover failed",
@@ -930,142 +906,278 @@ position: relative;
 			t.map(({ id: e, label: t }) => l(e, t, "description"))
 		]
 	});
-}, xe = () => {
-	let e = F(), t = F((e) => e.playbackRate), n = F((e) => e.subtitleTracks), r = F((e) => e.selectedSubtitleTrack), i = F((e) => e.selectSubtitleTrack), a = F((e) => e.audioTracks), o = F((e) => e.selectedAudioTrack), s = F((e) => e.selectAudioTrack), c = F((e) => e.subtitleOffLabel), [u, p] = f(!1), [m, h] = f(0), g = d(null), [_, v] = f(void 0), [y, b] = f(!1), T = () => {
-		p(!u), h(0), b(!1);
-	}, E = () => {
-		p(!1), h(0);
-	}, D = (t) => {
-		e.setPlaybackRate(t), h(0);
+}, Y = ({ onReset: e } = {}) => {
+	let t = d(null), [n, r] = f(!1), [i, a] = f(void 0), [o, s] = f(!1), c = d(e);
+	c.current = e;
+	let u = () => {
+		r(!1), c.current?.();
 	};
-	l(() => {
+	return l(() => {
 		let e = (e) => {
-			u && g.current && !g.current.contains(e.target) && T();
+			n && t.current && !t.current.contains(e.target) && u();
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-	}, [u]);
-	let O = (e, t) => {
-		if (_ !== void 0) return;
-		b(!1);
-		let n;
-		try {
-			n = t();
-		} catch (e) {
-			console.warn("[media-player] track selection failed:", e), b(!0);
-			return;
-		}
-		if (!(n instanceof Promise)) {
-			E();
-			return;
+	}, [n]), {
+		open: n,
+		toggle: () => {
+			r((e) => !e), s(!1), c.current?.();
+		},
+		close: u,
+		containerRef: t,
+		pending: i,
+		failed: o,
+		runSelect: (e, t) => {
+			if (i !== void 0) return;
+			s(!1);
+			let n;
+			try {
+				n = t();
+			} catch (e) {
+				console.warn("[media-player] track selection failed:", e), s(!0);
+				return;
+			}
+			if (!(n instanceof Promise)) {
+				u();
+				return;
+			}
+			a(e), n.then(() => {
+				a(void 0), u();
+			}, (e) => {
+				console.warn("[media-player] track selection failed:", e), a(void 0), s(!0);
+			});
 		}
-		v(e), n.then(() => {
-			v(void 0), E();
-		}, (e) => {
-			console.warn("[media-player] track selection failed:", e), v(void 0), b(!0);
-		});
-	}, k = (e) => O(e ?? null, () => i(e)), j = (e) => {
-		e !== void 0 && O(e, () => s(e));
-	}, M = (e) => () => {
-		h(e);
+	};
+}, Se = p`
+/* 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
+   tooltips already resolve against the control bar with no positioned wrapper of their own. */
+position: static;
+
+.settings {
+  /* the icon keeps its size, the pressable box grows around it */
+  @media (pointer: coarse) {
+    box-sizing: border-box;
+    justify-content: center;
+
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+${q}
+
+.playback-rate {
+  .slider {
+    width: 100%;
+  }
+  .options {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    align-items: center;
+
+    padding: 8px 12px;
+    /* four presets across a 180px popover leave targets 34px wide, so a finger gets two rows of two
+       until the popover is wide enough for the row of four */
+    @media (pointer: coarse) {
+      grid-template-columns: 1fr 1fr;
+    }
+    @media (pointer: coarse) and (min-width: 768px) {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      border-radius: 4px;
+
+      padding: 8px 6px;
+      height: 100%;
+      @media (pointer: coarse) {
+        box-sizing: border-box;
+        min-height: 44px;
+      }
+
+      cursor: pointer;
+      :hover {
+        background-color: rgba(255,255,255,.1);
+      }
+    }
+  }
+}
+
+`, Ce = () => {
+	let e = P(), t = P((e) => e.playbackRate), n = P((e) => e.audioTracks), r = P((e) => e.selectedAudioTrack), i = P((e) => e.selectAudioTrack), [a, o] = f(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: p } = Y({ onReset: () => o(0) }), m = (t) => {
+		e.setPlaybackRate(t), o(0);
+	}, h = (e) => {
+		e !== void 0 && p(e, () => i(e));
+	}, g = (e) => () => {
+		o(e);
 	};
 	return /* @__PURE__ */ S("div", {
-		css: be,
-		ref: g,
+		css: Se,
+		ref: l,
 		children: [
-			/* @__PURE__ */ x(q, {
+			/* @__PURE__ */ x(G, {
 				id: "settings",
-				disabled: u,
+				disabled: s,
 				text: /* @__PURE__ */ x("button", {
 					className: "settings",
 					type: "button",
-					onClick: T,
+					onClick: c,
 					children: /* @__PURE__ */ x(A, {})
 				}),
 				toolTipText: /* @__PURE__ */ x("span", { children: "Settings" })
 			}),
-			u && m === 0 && /* @__PURE__ */ S("div", {
+			s && a === 0 && /* @__PURE__ */ S("div", {
 				className: "popover menu",
-				children: [
-					a.length > 1 ? /* @__PURE__ */ S("div", {
-						onClick: M(3),
-						children: [/* @__PURE__ */ x("div", { children: "Audio" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
-					}) : null,
-					n.length > 0 ? /* @__PURE__ */ S("div", {
-						onClick: M(2),
-						children: [/* @__PURE__ */ x("div", { children: "Subtitles" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
-					}) : null,
-					/* @__PURE__ */ S("div", {
-						onClick: M(1),
-						children: [/* @__PURE__ */ x("div", { children: "Playback speed" }), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("span", {
-							className: "secondary",
-							children: t === 1 ? "(Default)" : t.toFixed(2)
-						}), /* @__PURE__ */ x(w, {})] })]
-					})
-				]
+				children: [n.length > 1 ? /* @__PURE__ */ S("div", {
+					onClick: g(2),
+					children: [/* @__PURE__ */ x("div", { children: "Audio" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
+				}) : null, /* @__PURE__ */ S("div", {
+					onClick: g(1),
+					children: [/* @__PURE__ */ x("div", { children: "Playback speed" }), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("span", {
+						className: "secondary",
+						children: t === 1 ? "(Default)" : t.toFixed(2)
+					}), /* @__PURE__ */ x(w, {})] })]
+				})]
 			}),
-			u && m === 1 && /* @__PURE__ */ S("div", {
+			s && a === 1 && /* @__PURE__ */ S("div", {
 				className: "popover playback-rate",
 				children: [
 					/* @__PURE__ */ S("div", {
 						className: "back",
-						onClick: M(0),
+						onClick: g(0),
 						children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: "Playback speed" })]
 					}),
 					/* @__PURE__ */ x("div", {
 						className: "slider no-hover",
-						children: /* @__PURE__ */ x(ye, {})
+						children: /* @__PURE__ */ x(xe, {})
 					}),
 					/* @__PURE__ */ S("div", {
 						className: "options no-hover",
 						children: [
 							/* @__PURE__ */ x("div", {
-								onClick: () => D(.5),
+								onClick: () => m(.5),
 								children: "0.5x"
 							}),
 							/* @__PURE__ */ x("div", {
-								onClick: () => D(1),
+								onClick: () => m(1),
 								children: "1x"
 							}),
 							/* @__PURE__ */ x("div", {
-								onClick: () => D(1.5),
+								onClick: () => m(1.5),
 								children: "1.5x"
 							}),
 							/* @__PURE__ */ x("div", {
-								onClick: () => D(2),
+								onClick: () => m(2),
 								children: "2x"
 							})
 						]
 					})
 				]
 			}),
-			u && m === 2 && /* @__PURE__ */ x(Y, {
-				title: "Subtitles",
+			s && a === 2 && /* @__PURE__ */ x(J, {
+				title: "Audio",
 				tracks: n,
 				selected: r,
-				onSelect: k,
-				onBack: M(0),
-				offLabel: c ?? "Disable",
-				pending: _,
-				failed: y
-			}),
-			u && m === 3 && /* @__PURE__ */ x(Y, {
-				title: "Audio",
-				tracks: a,
-				selected: o,
-				onSelect: j,
-				onBack: M(0),
-				pending: _,
-				failed: y
+				onSelect: h,
+				onBack: g(0),
+				pending: u,
+				failed: d
 			})
 		]
 	});
-}, Se = {
+}, X = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}, we = (e) => /* @__PURE__ */ S("svg", {
+	...X,
+	...e,
+	children: [/* @__PURE__ */ x("rect", {
+		x: "3",
+		y: "5",
+		width: "18",
+		height: "14",
+		rx: "2",
+		ry: "2"
+	}), /* @__PURE__ */ x("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" })]
+}), Te = (e) => /* @__PURE__ */ S("svg", {
+	...X,
+	...e,
+	children: [
+		/* @__PURE__ */ x("rect", {
+			x: "3",
+			y: "5",
+			width: "18",
+			height: "14",
+			rx: "2",
+			ry: "2"
+		}),
+		/* @__PURE__ */ x("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" }),
+		/* @__PURE__ */ x("line", {
+			x1: "2",
+			y1: "2",
+			x2: "22",
+			y2: "22"
+		})
+	]
+}), Ee = p`
+/* 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;
+
+.subtitles {
+  /* the icon keeps its size, the pressable box grows around it */
+  @media (pointer: coarse) {
+    box-sizing: border-box;
+    justify-content: center;
+
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+${q}
+`, De = () => {
+	let e = P((e) => e.subtitleTracks), t = P((e) => e.selectedSubtitleTrack), n = P((e) => e.selectSubtitleTrack), r = P((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Y();
+	return e.length === 0 ? null : /* @__PURE__ */ S("div", {
+		css: Ee,
+		ref: o,
+		children: [/* @__PURE__ */ x(G, {
+			id: "subtitles",
+			disabled: i,
+			text: /* @__PURE__ */ x("button", {
+				className: "subtitles",
+				type: "button",
+				onClick: a,
+				children: t === void 0 ? /* @__PURE__ */ x(Te, { className: "captions-off" }) : /* @__PURE__ */ x(we, { className: "captions" })
+			}),
+			toolTipText: /* @__PURE__ */ x("span", { children: "Subtitles" })
+		}), i && /* @__PURE__ */ x(J, {
+			title: "Subtitles",
+			tracks: e,
+			selected: t,
+			onSelect: (e) => l(e ?? null, () => n(e)),
+			offLabel: r ?? "Disable",
+			pending: s,
+			failed: c
+		})]
+	});
+}, Oe = {
 	primary: "#EAEBEE",
 	secondary: "#D0D0D9",
 	hover: "rgba(255, 255, 255, 0.13)",
 	borderPrimary: "#384F70",
 	backgroundTooltip: "#222222"
-}, Ce = p`
+}, ke = p`
   display: flex;
   align-items: center;
 
@@ -1108,8 +1220,8 @@ position: relative;
     width: 10px;
     height: 10px;
   }
-`, we = ({ value: e, onChange: t }) => {
-	let n = F((e) => e.volume), r = F((e) => e.muted), i = d(null), a = d(null), { handlers: o } = J({
+`, Ae = ({ value: e, onChange: t }) => {
+	let n = P((e) => e.volume), r = P((e) => e.muted), i = d(null), a = d(null), { handlers: o } = K({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -1123,12 +1235,12 @@ position: relative;
 			e && e.removeEventListener("wheel", s);
 		};
 	}, [e]);
-	let c = e * 100, f = u(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
-	return /* @__PURE__ */ x(q, {
+	let c = e * 100, f = u(() => Math.round(r ? 0 : U(n) * 100), [n, r]);
+	return /* @__PURE__ */ x(G, {
 		id: "volume-slider",
 		text: /* @__PURE__ */ x("div", {
 			ref: i,
-			css: Ce,
+			css: ke,
 			...o,
 			children: /* @__PURE__ */ x("div", {
 				ref: a,
@@ -1147,7 +1259,7 @@ position: relative;
 			children: [f, "%"]
 		})
 	});
-}, Te = p`
+}, je = p`
   position: relative;
   display: flex;
   align-items: center;
@@ -1172,7 +1284,7 @@ position: relative;
       border-radius: 4px;
 
       .volume-value {
-        ${V.bMedium.regular};
+        ${z.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -1210,18 +1322,18 @@ position: relative;
     }
   }
 
-`, Ee = ({ ref: e }) => {
-	let t = F(), n = F((e) => e.volume), r = F((e) => e.muted), i = u(() => G(n), [n]);
+`, Me = ({ ref: e }) => {
+	let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = u(() => U(n), [n]);
 	return /* @__PURE__ */ S("div", {
-		css: Te,
-		children: [/* @__PURE__ */ x(q, {
+		css: je,
+		children: [/* @__PURE__ */ x(G, {
 			id: "sound",
 			text: /* @__PURE__ */ x("button", {
 				className: "sound",
 				type: "button",
 				onClick: () => t.toggleMuted(),
 				ref: e,
-				children: x(r || n === 0 ? ee : n <= .5 ? j : M, {
+				children: x(r || n === 0 ? te : n <= .5 ? j : ee, {
 					size: 18,
 					color: "#fff"
 				})
@@ -1231,16 +1343,16 @@ position: relative;
 			className: "volume-slider-container",
 			children: /* @__PURE__ */ x("div", {
 				className: "volume-slider-background",
-				children: /* @__PURE__ */ x(we, {
+				children: /* @__PURE__ */ x(Ae, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(W(e));
+						t.setVolume(H(e));
 					}
 				})
 			})
 		})]
 	});
-}, X = .05, Z = 5, De = p`
+}, Z = .05, Q = 5, Ne = p`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -1292,7 +1404,7 @@ position: relative;
         }
       }
 
-      .play, .sound, .time, .settings, .picture-in-picture, .full-screen {
+      .play, .sound, .time, .subtitles, .settings, .picture-in-picture, .full-screen {
         display: flex;
         align-items: center;
 
@@ -1310,7 +1422,7 @@ position: relative;
         }
       }
 
-      .play, .sound, .settings, .picture-in-picture, .full-screen {
+      .play, .sound, .subtitles, .settings, .picture-in-picture, .full-screen {
         border-radius: 4px;
 
         padding: 8px;
@@ -1324,7 +1436,7 @@ position: relative;
         cursor: pointer;
 
         :hover {
-          background-color: ${Se.hover};
+          background-color: ${Oe.hover};
         }
 
         /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -1341,7 +1453,7 @@ position: relative;
 
     .left {
       .time {
-        ${V.bMedium.regular}
+        ${z.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -1362,10 +1474,10 @@ position: relative;
       }
     }
   }
-`, Oe = () => {
-	let e = F(), t = F((e) => e.paused), n = F((e) => e.currentTime), r = F((e) => e.duration), i = F((e) => e.fullscreen), a = F((e) => e.hideUI), o = F((e) => e.togglePictureInPicture), [s, u] = f(null), d = r > 0 && n === r, p = c(({ 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();
+`, Pe = () => {
+	let e = P(), t = P((e) => e.paused), n = P((e) => e.currentTime), r = P((e) => e.duration), i = P((e) => e.fullscreen), a = P((e) => e.hideUI), o = P((e) => e.togglePictureInPicture), [s, u] = f(null), d = r > 0 && n === r, p = c(({ direction: t, stepSize: n }) => {
+		let r = U(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
+		e.setVolume(H(a)), o && !e.muted && e.toggleMuted();
 	}, [e]);
 	l(() => {
 		let t = (t) => {
@@ -1378,16 +1490,16 @@ position: relative;
 			else if (t.key === "m") e.toggleMuted();
 			else if (t.key === "ArrowUp") p({
 				direction: "up",
-				stepSize: X
+				stepSize: Z
 			});
 			else if (t.key === "ArrowDown") p({
 				direction: "down",
-				stepSize: X
+				stepSize: Z
 			});
 			else if (t.key === "ArrowRight") {
 				if (!e.duration) return;
-				e.seek(Math.min(e.currentTime + Z, e.duration));
-			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - Z, 0)) : r = !1;
+				e.seek(Math.min(e.currentTime + Q, e.duration));
+			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - Q, 0)) : r = !1;
 			r && t.preventDefault();
 		};
 		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
@@ -1395,26 +1507,26 @@ position: relative;
 	let m = c((e) => {
 		e.preventDefault(), e.deltaY < 0 ? p({
 			direction: "up",
-			stepSize: X
+			stepSize: Z
 		}) : p({
 			direction: "down",
-			stepSize: X
+			stepSize: Z
 		});
 	}, [p]);
 	return l(() => {
 		if (s) return s.addEventListener("wheel", m, { passive: !1 }), () => s.removeEventListener("wheel", m);
 	}, [s, m]), /* @__PURE__ */ S("div", {
-		css: De,
+		css: Ne,
 		style: { ...a ? {
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ x(ge, {}), /* @__PURE__ */ S("div", {
+		children: [/* @__PURE__ */ x(ve, {}), /* @__PURE__ */ S("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ S("div", {
 				className: "left",
 				children: [
-					/* @__PURE__ */ x(q, {
+					/* @__PURE__ */ x(G, {
 						id: "play",
 						tooltipPlace: "top-start",
 						text: /* @__PURE__ */ x("button", {
@@ -1425,27 +1537,28 @@ position: relative;
 						}),
 						toolTipText: /* @__PURE__ */ x("span", { children: d ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ x(Ee, { ref: u }),
+					/* @__PURE__ */ x(Me, { ref: u }),
 					/* @__PURE__ */ x("div", {
 						className: "time",
-						children: pe(n, r)
+						children: he(n, r)
 					})
 				]
 			}), /* @__PURE__ */ S("div", {
 				className: "right",
 				children: [
-					/* @__PURE__ */ x(xe, {}),
-					o ? /* @__PURE__ */ x(q, {
+					/* @__PURE__ */ x(De, {}),
+					/* @__PURE__ */ x(Ce, {}),
+					o ? /* @__PURE__ */ x(G, {
 						id: "picture-in-picture",
 						text: /* @__PURE__ */ x("button", {
 							className: "picture-in-picture",
 							type: "button",
 							onClick: o,
-							children: /* @__PURE__ */ x("img", { src: _e })
+							children: /* @__PURE__ */ x("img", { src: ye })
 						}),
 						toolTipText: /* @__PURE__ */ x("span", { children: "Picture in picture" })
 					}) : null,
-					/* @__PURE__ */ x(q, {
+					/* @__PURE__ */ x(G, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ x("button", {
@@ -1460,7 +1573,7 @@ position: relative;
 			})]
 		})]
 	});
-}, ke = 3e3, Ae = p`
+}, Fe = 3e3, Ie = p`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -1471,7 +1584,7 @@ position: relative;
      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;
-`, je = p`
+`, Le = p`
   position: relative;
   background-color: black;
   display: flex;
@@ -1503,20 +1616,20 @@ position: relative;
   &.hide {
     cursor: none;
   }
-`, Q = (e, t = "") => a.toArray(e).flatMap((e, n) => {
+`, $ = (e, t = "") => a.toArray(e).flatMap((e, n) => {
 	let r = `${t}${s(e) && e.key != null ? e.key : n}`;
-	return s(e) && e.type === o ? Q(e.props.children, `${r}/`) : [{
+	return s(e) && e.type === o ? $(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), Me = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
-	let o = F(), s = F((e) => e.hideUI), c = F((e) => e.setHideUI), u = d(void 0), f = d("mouse");
+}), Re = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
+	let o = P(), s = P((e) => e.hideUI), c = P((e) => e.setHideUI), u = d(void 0), f = d("mouse");
 	l(() => () => clearTimeout(u.current), []);
 	let p = () => {
-		c(!1), clearTimeout(u.current), u.current = setTimeout(() => c(!0), ke);
+		c(!1), clearTimeout(u.current), u.current = setTimeout(() => c(!0), Fe);
 	};
 	return /* @__PURE__ */ S("div", {
-		css: je,
+		css: Le,
 		ref: e,
 		onPointerMove: (e) => {
 			f.current = e.pointerType, e.pointerType === "mouse" && p();
@@ -1532,9 +1645,9 @@ position: relative;
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ x(fe, { onCanvasRef: n }),
-			Q(r).map(({ key: e, item: t }) => /* @__PURE__ */ x("div", {
-				css: Ae,
+			/* @__PURE__ */ x(me, { onCanvasRef: n }),
+			$(r).map(({ key: e, item: t }) => /* @__PURE__ */ x("div", {
+				css: Ie,
 				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
@@ -1542,7 +1655,7 @@ position: relative;
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ x(Oe, {}),
+			i === !1 ? null : /* @__PURE__ */ x(Pe, {}),
 			/* @__PURE__ */ S("div", {
 				className: "video",
 				onClick: () => {
@@ -1559,16 +1672,16 @@ position: relative;
 			})
 		]
 	});
-}, Ne = ({ options: e, children: t }) => {
+}, ze = ({ options: e, children: t }) => {
 	let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: o, publicPath: s, libavWorkerUrl: c, read: u, thumbnailRead: d, thumbnailsEnabled: p } = r ?? {}, m = _(), h = g(), [v, y] = f(null), [b, S] = f(null), C = n?.media ?? v;
-	l(() => (m?.(C), () => m?.(null)), [C, m]), ie(v, b, r);
-	let w = z({
+	l(() => (m?.(C), () => m?.(null)), [C, m]), oe(v, b, r);
+	let w = L({
 		publicPath: s,
 		workerUrl: c,
 		length: p === !1 ? void 0 : a,
 		read: d ?? u,
 		downloadedRanges: o
-	}), T = n?.thumbnails?.all ?? w, E = B(v, b), D = F((e) => e.setSourceState);
+	}), T = n?.thumbnails?.all ?? w, E = R(v, b), D = P((e) => e.setSourceState);
 	l(() => {
 		D({
 			title: i,
@@ -1616,7 +1729,7 @@ position: relative;
 			selectedAudioTrack: A.selectedId ?? void 0,
 			selectAudioTrack: (e) => A.select(String(e))
 		});
-	}, [D, A]), /* @__PURE__ */ x(Me, {
+	}, [D, A]), /* @__PURE__ */ x(Re, {
 		ref: h,
 		onVideoRef: n ? void 0 : y,
 		onCanvasRef: S,
@@ -1624,7 +1737,7 @@ position: relative;
 		controls: e.controls,
 		children: t
 	});
-}, Pe = p`
+}, Be = p`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -1636,6 +1749,45 @@ position: relative;
    */
   --mp-unit: 10px;
 
+  /**
+   * The chrome's own typeface, for exactly the reason the unit above exists.
+   *
+   * \`font-family\` inherits, and this library declared it nowhere, so every label drew in whatever the
+   * embedding document happened to set, and in the UA's serif where it set nothing. Not hypothetical:
+   * stub mounts the player in a second document, \`embed.html\`, which sets no font and loads no face,
+   * and the entire settings menu came out in Times New Roman.
+   *
+   * Named faces only, no bundled webfont. The chrome is a handful of short labels, so a font request
+   * on the critical path of a document whose job is to paint video buys a round trip and a flash of
+   * unstyled text for nothing.
+   *
+   * Read through \`var()\` so a host with a brand face sets \`--mp-font-family\` on any ancestor and it
+   * inherits in. A bare \`font-family\` on the host can no longer reach the chrome: this declaration is
+   * on the player element itself and beats anything inherited.
+   */
+  font-family: var(
+    --mp-font-family,
+    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'
+  );
+
+  /**
+   * The chrome's default ink, same argument again.
+   *
+   * Most text here names its own colour, but the two time readouts do not: the elapsed/duration pair
+   * and the seekbar's hover time carry a font token and a black text-shadow and nothing else.
+   * Inherited from a host that declares none that resolves to \`canvastext\`, which is black text under
+   * a black halo on a dark gradient.
+   */
+  color: #fff;
+
+  /**
+   * The settings menu scrolls, and a UA that has not been told the surface is dark paints that
+   * scrollbar in its light theme: a white track down the side of a #1c1c1c menu. Declared here rather
+   * than asked of the host, so it reaches the menu and nothing outside the player.
+   */
+  color-scheme: dark;
+
   /**
    * The other half of owning the chrome's own scale.
    *
@@ -1655,17 +1807,17 @@ position: relative;
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, $ = (e) => /* @__PURE__ */ x("div", {
-	css: Pe,
-	children: /* @__PURE__ */ x(P.Provider, { children: /* @__PURE__ */ x(Ne, {
+`, Ve = (e) => /* @__PURE__ */ x("div", {
+	css: Be,
+	children: /* @__PURE__ */ x(N.Provider, { children: /* @__PURE__ */ x(ze, {
 		options: e,
 		children: e.children
 	}) })
-}), Fe = (e) => !!e && typeof e == "object" && "at" in e, Ie = (e) => !!e && typeof e == "object" && "selection" in e, Le = ({ blob: e, name: t }) => ({
+}), He = (e) => !!e && typeof e == "object" && "at" in e, Ue = (e) => !!e && typeof e == "object" && "selection" in e, We = ({ 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()
-}), Re = async (e, t) => {
+}), Ge = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -1675,8 +1827,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;
-}, ze = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await Re(e, r);
+}, Ke = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await Ge(e, r);
 	return {
 		length: i,
 		name: n,
@@ -1689,9 +1841,9 @@ position: relative;
 			return a.arrayBuffer();
 		}
 	};
-}, Be = async (e) => {
-	if ("blob" in e) return Le(e);
-	if ("url" in e) return ze(e);
+}, qe = async (e) => {
+	if ("blob" in e) return We(e);
+	if ("url" in e) return Ke(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -1700,4 +1852,4 @@ position: relative;
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { $ as MediaPlayer, $ as default, P as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, Be as inputToRemuxerInput, Ie as isDelegatedTracks, Fe as isExternalThumbnails, N as sourceFeature, e as startPlayback, B as usePictureInPicture, F as usePlayer, z as useSeekThumbnails };
+export { Ve as MediaPlayer, Ve as default, N as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, qe as inputToRemuxerInput, Ue as isDelegatedTracks, He as isExternalThumbnails, M as sourceFeature, e as startPlayback, R as usePictureInPicture, P as usePlayer, L as useSeekThumbnails };