@banou/media-player 0.8.3 → 0.8.4

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 ee, VolumeX as te } from "react-feather";
-import { Tooltip as ne } 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 M, VolumeX as ee } from "react-feather";
+import { Tooltip as te } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
-var re = {
+var ne = {
 	indexes: [],
 	thumbnails: [],
 	subtitleTracks: [],
@@ -22,19 +22,19 @@ var re = {
 	playbackError: null,
 	ready: !1,
 	setSourceState: () => {}
-}, M = v({
+}, N = v({
 	name: "source",
-	state: () => ({ ...re }),
+	state: () => ({ ...ne }),
 	attach({ set: e }) {
 		e({
 			setSourceState: (t) => e(t),
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), N = h({
-	features: [...y, M],
+}), P = h({
+	features: [...y, N],
 	displayName: "MediaPlayer"
-}), P = N.usePlayer, ie = (e) => {
+}), F = P.usePlayer, re = (e) => {
 	if (!(!e || e === "und")) try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -43,23 +43,23 @@ var re = {
 	} catch {
 		return;
 	}
-}, 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) => ({
+}, 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) => ({
 		...e,
 		[t]: (e[t] ?? 0) + 1
 	}), {});
 	return e.map((e, r) => {
-		let i = t[r], a = F(e.title);
+		let i = t[r], a = I(e.title);
 		return {
 			track: e,
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, I = (e) => ae(e).map(({ track: e, label: t }) => ({
+}, R = (e) => L(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), 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);
+})), 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);
 	w.current = a;
 	let T = d(r?.onSeek);
 	T.current = r?.onSeek;
@@ -70,7 +70,7 @@ var re = {
 		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 = P((e) => e.setSourceState);
+	}, [i]), k = F((e) => e.setSourceState);
 	l(() => {
 		k({
 			selectSubtitleTrack: D,
@@ -115,13 +115,13 @@ var re = {
 					onSeek: (e) => T.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || i.setSourceState({
-							subtitleTracks: I(e),
+							subtitleTracks: R(e),
 							...C.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || i.setSourceState({
-							audioTracks: I(e),
+							audioTracks: R(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -154,13 +154,13 @@ var re = {
 		y,
 		v
 	]);
-}, se = 5e3, ce = 6e4, L = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
+}, ae = 5e3, oe = 6e4, z = ({ 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 = se, d = () => {
+		let a = !1, o = null, l, u = ae, d = () => {
 			t({
 				publicPath: e,
 				workerUrl: n,
@@ -176,7 +176,7 @@ var re = {
 				}
 				o = e, c.current = e, e.update(h.current);
 			}, () => {
-				a || (l = setTimeout(d, u), u = Math.min(u * 2, ce));
+				a || (l = setTimeout(d, u), u = Math.min(u * 2, oe));
 			});
 		};
 		return d(), () => {
@@ -189,8 +189,8 @@ var re = {
 	]), l(() => {
 		c.current?.update(m);
 	}, [m]), o;
-}, R = (e, t) => {
-	let n = P(), r = d(null);
+}, B = (e, t) => {
+	let n = F(), r = d(null);
 	l(() => {
 		if (!e || !t) return;
 		let a = i({
@@ -212,7 +212,7 @@ var re = {
 		});
 	}, []);
 	return e && t ? a : null;
-}, z = {
+}, V = {
 	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 re = {
 		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    "
 	}
-}, le = p`
+}, se = p`
   top: unset !important;
   left: unset !important;
   width: 100%;
   height: 100%;
   margin: auto;
   pointer-events: none;
-`, ue = p`
+`, ce = p`
   position: absolute;
   top: 0;
   left: 0;
@@ -254,7 +254,7 @@ var re = {
   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));
-  ${z.headings.small}
+  ${V.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -275,7 +275,7 @@ var re = {
 
   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);
-`, de = p`
+`, le = p`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -295,43 +295,43 @@ var re = {
   to { transform: rotate(360deg); }
 `} 0.8s linear infinite;
   }
-`, fe = p`
+`, ue = p`
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${z.bLarge.regular}
+  ${V.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, pe = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", B = ({ 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);
+`, 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);
 	return /* @__PURE__ */ S(b, { children: [
 		t ? /* @__PURE__ */ x("div", {
 			className: "title",
-			css: ue,
+			css: ce,
 			style: { ...n ? {
 				opacity: "0",
 				pointerEvents: "none"
 			} : {} },
 			children: t
 		}) : void 0,
-		(a ? !i : o) && !r ? /* @__PURE__ */ x("div", { css: de }) : void 0,
+		(a ? !i : o) && !r ? /* @__PURE__ */ x("div", { css: le }) : void 0,
 		r ? /* @__PURE__ */ x("div", {
-			css: fe,
-			children: pe(r)
+			css: ue,
+			children: de(r)
 		}) : void 0,
 		/* @__PURE__ */ x("canvas", {
 			ref: e,
-			css: le
+			css: se
 		})
 	] });
-}, V = 1e-4, H = 1, U = (e) => Math.max(V, Math.min(H, e)) ** 2, W = (e) => Math.max(V, Math.min(H, e)) ** (H / 2), G = (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}`;
-}, me = (e, t) => `${G(e)} / ${G(t)}`, he = (e) => p`
+}, pe = (e, t) => `${K(e)} / ${K(t)}`, me = (e) => p`
   display: flex;
   justify-content: flex-end;
 
@@ -341,7 +341,7 @@ var re = {
   z-index: 3;
 
   * {
-    ${z.bMedium.regular}
+    ${V.bMedium.regular}
   }
 
   ${e === "sm" && p`
@@ -353,7 +353,7 @@ var re = {
   ${e === "lg" && p`
     padding: calc(1.2 * var(--mp-unit))!important;
   `}
-`, K = ({ 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", {
+`, 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", {
 	"data-tooltip-id": e,
 	"data-open": !0,
 	"data-tooltip-offset": a,
@@ -361,12 +361,12 @@ var re = {
 	"data-tooltip-delay-hide": i,
 	"data-tooltip-place": o,
 	children: n
-}), !s && /* @__PURE__ */ x(ne, {
-	css: he(c),
+}), !s && /* @__PURE__ */ x(te, {
+	css: me(c),
 	id: e,
 	noArrow: !0,
 	children: t
-})] }), q = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+})] }), J = ({ 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 re = {
 			style: { touchAction: "none" }
 		}
 	};
-}, ge = p`
+}, he = p`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -438,7 +438,7 @@ var re = {
     justify-content: center;
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${z.bMedium.bold}
+    ${V.bMedium.bold}
 
     position: absolute;
     top: calc(-2.5 * var(--mp-unit));
@@ -550,8 +550,8 @@ var re = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, J = () => {
-	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 } = q({
+`, 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({
 		ref: c,
 		onChange: (e) => {
 			m(e), _.current !== "mouse" && g(e * n);
@@ -609,7 +609,7 @@ var re = {
 		h
 	]);
 	return /* @__PURE__ */ S("div", {
-		css: ge,
+		css: he,
 		ref: c,
 		className: v ? "progress-bar dragging" : "progress-bar",
 		onMouseMove: T,
@@ -704,7 +704,7 @@ width: 100%;
   }
 }
 `, ye = () => {
-	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 } = q({
+	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({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(u(t))
 	}), p = (t) => {
@@ -776,7 +776,7 @@ position: relative;
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${z.bMedium.regular}
+  ${V.bMedium.regular}
 
   z-index: 4;
 
@@ -819,7 +819,7 @@ position: relative;
 
       .secondary {
         color: #eee;
-        ${z.bSmall.regular}
+        ${V.bSmall.regular}
       }
     }
   }
@@ -886,72 +886,116 @@ position: relative;
   .description {
     word-break: break-word;
   }
+
+  /* Dimmed and inert, but still listed. A source that names a track it cannot serve right now is
+     saying the track exists, and dropping the row would read as the source having nothing. */
+  .unavailable {
+    opacity: 0.5;
+    cursor: default;
+    :hover {
+      background-color: transparent;
+    }
+  }
+
+  .failed {
+    border-bottom: 1px solid #4D4D4E;
+    color: #f66;
+    ${V.bSmall.regular}
+  }
 }
-`, Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, allowDisable: a }) => /* @__PURE__ */ S("div", {
-	className: "popover track-list",
-	children: [
-		/* @__PURE__ */ S("div", {
-			className: "back",
-			onClick: i,
-			children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: e })]
-		}),
-		a ? /* @__PURE__ */ S("div", {
-			onClick: () => r(void 0),
-			children: [/* @__PURE__ */ x("span", { children: "Disable" }), /* @__PURE__ */ x("span", { children: n === void 0 ? "✓" : "" })]
-		}) : null,
-		t.map(({ id: e, label: t }) => /* @__PURE__ */ S("div", {
-			onClick: () => r(e),
-			className: "description",
-			children: [/* @__PURE__ */ x("span", { children: t }), /* @__PURE__ */ x("span", { children: n === e ? "✓" : "" })]
-		}, e))
-	]
-}), xe = () => {
-	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), o = P((e) => e.selectedAudioTrack), s = P((e) => e.selectAudioTrack), [c, u] = f(!1), [p, m] = f(0), h = d(null), g = () => {
-		u(!c), m(0);
-	}, _ = (t) => {
-		e.setPlaybackRate(t), m(0);
+`, Y = ({ 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", {
+			onClick: () => {
+				l || r(e ?? void 0);
+			},
+			className: [a, l ? "unavailable" : null].filter(Boolean).join(" ") || void 0,
+			children: [/* @__PURE__ */ x("span", { children: i }), /* @__PURE__ */ x("span", { children: s ? "…" : (n ?? null) === e ? "✓" : "" })]
+		}, e ?? "__off__");
+	};
+	return /* @__PURE__ */ S("div", {
+		className: "popover track-list",
+		children: [
+			/* @__PURE__ */ S("div", {
+				className: "back",
+				onClick: i,
+				children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: e })]
+			}),
+			s ? /* @__PURE__ */ x("div", {
+				className: "no-hover failed",
+				children: "Could not switch. Try again."
+			}) : null,
+			a ? l(null, a) : null,
+			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);
 	};
 	l(() => {
 		let e = (e) => {
-			c && h.current && !h.current.contains(e.target) && g();
+			u && g.current && !g.current.contains(e.target) && T();
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-	}, [c]);
-	let v = (e) => {
-		i(e), g();
-	}, y = (e) => {
-		e !== void 0 && s(e), g();
-	}, b = (e) => () => {
-		m(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;
+		}
+		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);
 	};
 	return /* @__PURE__ */ S("div", {
 		css: be,
-		ref: h,
+		ref: g,
 		children: [
-			/* @__PURE__ */ x(K, {
+			/* @__PURE__ */ x(q, {
 				id: "settings",
-				disabled: c,
+				disabled: u,
 				text: /* @__PURE__ */ x("button", {
 					className: "settings",
 					type: "button",
-					onClick: g,
+					onClick: T,
 					children: /* @__PURE__ */ x(A, {})
 				}),
 				toolTipText: /* @__PURE__ */ x("span", { children: "Settings" })
 			}),
-			c && p === 0 && /* @__PURE__ */ S("div", {
+			u && m === 0 && /* @__PURE__ */ S("div", {
 				className: "popover menu",
 				children: [
 					a.length > 1 ? /* @__PURE__ */ S("div", {
-						onClick: b(3),
+						onClick: M(3),
 						children: [/* @__PURE__ */ x("div", { children: "Audio" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
 					}) : null,
 					n.length > 0 ? /* @__PURE__ */ S("div", {
-						onClick: b(2),
+						onClick: M(2),
 						children: [/* @__PURE__ */ x("div", { children: "Subtitles" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
 					}) : null,
 					/* @__PURE__ */ S("div", {
-						onClick: b(1),
+						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)
@@ -959,12 +1003,12 @@ position: relative;
 					})
 				]
 			}),
-			c && p === 1 && /* @__PURE__ */ S("div", {
+			u && m === 1 && /* @__PURE__ */ S("div", {
 				className: "popover playback-rate",
 				children: [
 					/* @__PURE__ */ S("div", {
 						className: "back",
-						onClick: b(0),
+						onClick: M(0),
 						children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: "Playback speed" })]
 					}),
 					/* @__PURE__ */ x("div", {
@@ -975,39 +1019,43 @@ position: relative;
 						className: "options no-hover",
 						children: [
 							/* @__PURE__ */ x("div", {
-								onClick: () => _(.5),
+								onClick: () => D(.5),
 								children: "0.5x"
 							}),
 							/* @__PURE__ */ x("div", {
-								onClick: () => _(1),
+								onClick: () => D(1),
 								children: "1x"
 							}),
 							/* @__PURE__ */ x("div", {
-								onClick: () => _(1.5),
+								onClick: () => D(1.5),
 								children: "1.5x"
 							}),
 							/* @__PURE__ */ x("div", {
-								onClick: () => _(2),
+								onClick: () => D(2),
 								children: "2x"
 							})
 						]
 					})
 				]
 			}),
-			c && p === 2 && /* @__PURE__ */ x(Y, {
+			u && m === 2 && /* @__PURE__ */ x(Y, {
 				title: "Subtitles",
 				tracks: n,
 				selected: r,
-				onSelect: v,
-				onBack: b(0),
-				allowDisable: !0
+				onSelect: k,
+				onBack: M(0),
+				offLabel: c ?? "Disable",
+				pending: _,
+				failed: y
 			}),
-			c && p === 3 && /* @__PURE__ */ x(Y, {
+			u && m === 3 && /* @__PURE__ */ x(Y, {
 				title: "Audio",
 				tracks: a,
 				selected: o,
-				onSelect: y,
-				onBack: b(0)
+				onSelect: j,
+				onBack: M(0),
+				pending: _,
+				failed: y
 			})
 		]
 	});
@@ -1061,7 +1109,7 @@ position: relative;
     height: 10px;
   }
 `, we = ({ value: e, onChange: t }) => {
-	let n = P((e) => e.volume), r = P((e) => e.muted), i = d(null), a = d(null), { handlers: o } = q({
+	let n = F((e) => e.volume), r = F((e) => e.muted), i = d(null), a = d(null), { handlers: o } = J({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -1075,8 +1123,8 @@ position: relative;
 			e && e.removeEventListener("wheel", s);
 		};
 	}, [e]);
-	let c = e * 100, f = u(() => Math.round(r ? 0 : W(n) * 100), [n, r]);
-	return /* @__PURE__ */ x(K, {
+	let c = e * 100, f = u(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
+	return /* @__PURE__ */ x(q, {
 		id: "volume-slider",
 		text: /* @__PURE__ */ x("div", {
 			ref: i,
@@ -1124,7 +1172,7 @@ position: relative;
       border-radius: 4px;
 
       .volume-value {
-        ${z.bMedium.regular};
+        ${V.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -1163,17 +1211,17 @@ position: relative;
   }
 
 `, Ee = ({ ref: e }) => {
-	let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = u(() => W(n), [n]);
+	let t = F(), n = F((e) => e.volume), r = F((e) => e.muted), i = u(() => G(n), [n]);
 	return /* @__PURE__ */ S("div", {
 		css: Te,
-		children: [/* @__PURE__ */ x(K, {
+		children: [/* @__PURE__ */ x(q, {
 			id: "sound",
 			text: /* @__PURE__ */ x("button", {
 				className: "sound",
 				type: "button",
 				onClick: () => t.toggleMuted(),
 				ref: e,
-				children: x(r || n === 0 ? te : n <= .5 ? j : ee, {
+				children: x(r || n === 0 ? ee : n <= .5 ? j : M, {
 					size: 18,
 					color: "#fff"
 				})
@@ -1186,7 +1234,7 @@ position: relative;
 				children: /* @__PURE__ */ x(we, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(U(e));
+						t.setVolume(W(e));
 					}
 				})
 			})
@@ -1293,7 +1341,7 @@ position: relative;
 
     .left {
       .time {
-        ${z.bMedium.regular}
+        ${V.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -1315,9 +1363,9 @@ position: relative;
     }
   }
 `, Oe = () => {
-	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 = W(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
-		e.setVolume(U(a)), o && !e.muted && e.toggleMuted();
+	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();
 	}, [e]);
 	l(() => {
 		let t = (t) => {
@@ -1361,12 +1409,12 @@ position: relative;
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ x(J, {}), /* @__PURE__ */ S("div", {
+		children: [/* @__PURE__ */ x(ge, {}), /* @__PURE__ */ S("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ S("div", {
 				className: "left",
 				children: [
-					/* @__PURE__ */ x(K, {
+					/* @__PURE__ */ x(q, {
 						id: "play",
 						tooltipPlace: "top-start",
 						text: /* @__PURE__ */ x("button", {
@@ -1380,14 +1428,14 @@ position: relative;
 					/* @__PURE__ */ x(Ee, { ref: u }),
 					/* @__PURE__ */ x("div", {
 						className: "time",
-						children: me(n, r)
+						children: pe(n, r)
 					})
 				]
 			}), /* @__PURE__ */ S("div", {
 				className: "right",
 				children: [
 					/* @__PURE__ */ x(xe, {}),
-					o ? /* @__PURE__ */ x(K, {
+					o ? /* @__PURE__ */ x(q, {
 						id: "picture-in-picture",
 						text: /* @__PURE__ */ x("button", {
 							className: "picture-in-picture",
@@ -1397,7 +1445,7 @@ position: relative;
 						}),
 						toolTipText: /* @__PURE__ */ x("span", { children: "Picture in picture" })
 					}) : null,
-					/* @__PURE__ */ x(K, {
+					/* @__PURE__ */ x(q, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ x("button", {
@@ -1461,66 +1509,66 @@ position: relative;
 		key: r,
 		item: e
 	}];
-}), Me = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, children: i }) => {
-	let a = P(), o = P((e) => e.hideUI), s = P((e) => e.setHideUI), c = d(void 0), u = d("mouse");
-	l(() => () => clearTimeout(c.current), []);
-	let f = () => {
-		s(!1), clearTimeout(c.current), c.current = setTimeout(() => s(!0), ke);
+}), 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");
+	l(() => () => clearTimeout(u.current), []);
+	let p = () => {
+		c(!1), clearTimeout(u.current), u.current = setTimeout(() => c(!0), ke);
 	};
 	return /* @__PURE__ */ S("div", {
 		css: je,
 		ref: e,
 		onPointerMove: (e) => {
-			u.current = e.pointerType, e.pointerType === "mouse" && f();
+			f.current = e.pointerType, e.pointerType === "mouse" && p();
 		},
 		onPointerDown: (e) => {
-			u.current = e.pointerType;
+			f.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(c.current), s(!0));
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(u.current), c(!0));
 		},
-		className: o ? "hide" : "",
+		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ x(B, { onCanvasRef: n }),
+			/* @__PURE__ */ x(fe, { onCanvasRef: n }),
 			Q(r).map(({ key: e, item: t }) => /* @__PURE__ */ x("div", {
 				css: Ae,
-				style: { ...o ? {
+				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
 					pointerEvents: "none"
 				} : {} },
 				children: t
 			}, e)),
-			/* @__PURE__ */ x(Oe, {}),
+			i === !1 ? null : /* @__PURE__ */ x(Oe, {}),
 			/* @__PURE__ */ S("div", {
 				className: "video",
 				onClick: () => {
-					if (u.current === "mouse") {
-						a.togglePaused();
+					if (f.current === "mouse") {
+						o.togglePaused();
 						return;
 					}
-					o ? f() : (clearTimeout(c.current), s(!0));
+					s ? p() : (clearTimeout(u.current), c(!0));
 				},
 				children: [t ? /* @__PURE__ */ x("video", {
 					ref: t,
 					playsInline: !0
-				}) : null, i]
+				}) : null, a]
 			})
 		]
 	});
 }, Ne = ({ 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]), oe(v, b, r);
-	let w = L({
+	l(() => (m?.(C), () => m?.(null)), [C, m]), ie(v, b, r);
+	let w = z({
 		publicPath: s,
 		workerUrl: c,
 		length: p === !1 ? void 0 : a,
 		read: d ?? u,
 		downloadedRanges: o
-	}), T = n?.thumbnails?.all ?? w, E = R(v, b), D = P((e) => e.setSourceState);
+	}), T = n?.thumbnails?.all ?? w, E = B(v, b), D = F((e) => e.setSourceState);
 	l(() => {
 		D({
 			title: i,
@@ -1549,18 +1597,21 @@ position: relative;
 	let k = n?.subtitles?.selection, A = n?.audioTracks?.selection;
 	return l(() => {
 		k && D({
-			subtitleTracks: k.options.map(({ id: e, label: t }) => ({
+			subtitleTracks: k.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
-				label: t
+				label: t,
+				disabled: n
 			})),
 			selectedSubtitleTrack: k.selectedId ?? void 0,
-			selectSubtitleTrack: (e) => k.select(e == null ? null : String(e))
+			selectSubtitleTrack: (e) => k.select(e == null ? null : String(e)),
+			subtitleOffLabel: k.offLabel
 		});
 	}, [D, k]), l(() => {
 		A && D({
-			audioTracks: A.options.map(({ id: e, label: t }) => ({
+			audioTracks: A.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
-				label: t
+				label: t,
+				disabled: n
 			})),
 			selectedAudioTrack: A.selectedId ?? void 0,
 			selectAudioTrack: (e) => A.select(String(e))
@@ -1570,6 +1621,7 @@ position: relative;
 		onVideoRef: n ? void 0 : y,
 		onCanvasRef: S,
 		overlay: e.overlay,
+		controls: e.controls,
 		children: t
 	});
 }, Pe = p`
@@ -1605,7 +1657,7 @@ position: relative;
   overflow: hidden;
 `, $ = (e) => /* @__PURE__ */ x("div", {
 	css: Pe,
-	children: /* @__PURE__ */ x(N.Provider, { children: /* @__PURE__ */ x(Ne, {
+	children: /* @__PURE__ */ x(P.Provider, { children: /* @__PURE__ */ x(Ne, {
 		options: e,
 		children: e.children
 	}) })
@@ -1648,4 +1700,4 @@ position: relative;
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { $ as MediaPlayer, $ as default, N as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, Be as inputToRemuxerInput, Ie as isDelegatedTracks, Fe as isExternalThumbnails, M as sourceFeature, e as startPlayback, R as usePictureInPicture, P as usePlayer, L as useSeekThumbnails };
+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 };

package/dist/react/components/chrome.d.ts

@@ -6,7 +6,9 @@ export type ChromeProps = {
     onCanvasRef: (element: HTMLCanvasElement | null) => void;
     /** The app's own content, over the video and outside the click-to-pause region, unlike `children`. */
     overlay?: ReactNode;
+    /** False draws no control bar at all, leaving the picture, the title and the overlay. */
+    controls?: boolean;
     children?: ReactNode;
 };
-export declare const Chrome: ({ ref, onVideoRef, onCanvasRef, overlay, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Chrome: ({ ref, onVideoRef, onCanvasRef, overlay, controls, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Chrome;

package/dist/react/player.d.ts

@@ -7,10 +7,11 @@ export declare const Player: import("@videojs/react").CreatePlayerResult<import(
     thumbnailAt?: (time: number) => import("..").ThumbnailImage | undefined;
     subtitleTracks: import("./source-feature").TrackChoice[];
     selectedSubtitleTrack: string | number | undefined;
-    selectSubtitleTrack: (id: string | number | undefined) => void;
+    selectSubtitleTrack: (id: string | number | undefined) => void | Promise<void>;
+    subtitleOffLabel?: string;
     audioTracks: import("./source-feature").TrackChoice[];
     selectedAudioTrack: string | number | undefined;
-    selectAudioTrack: (id: string | number) => void;
+    selectAudioTrack: (id: string | number) => void | Promise<void>;
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
     togglePictureInPicture: (() => void) | null;

package/dist/react/source-feature.d.ts

@@ -10,6 +10,13 @@ import type { MediaIndex, ThumbnailImage } from '../engine';
 export type TrackChoice = {
     id: string | number;
     label: string;
+    /**
+     * Offered but not selectable, so the menu shows it and refuses the click.
+     *
+     * Hiding it instead would be worse: a source that lists a dub it cannot currently serve is telling
+     * the viewer the dub exists, and a menu that silently omits it looks like the source has nothing.
+     */
+    disabled?: boolean;
 };
 /**
  * A byte span of the file the consumer has in hand, mapped onto the timeline through the keyframe
@@ -40,13 +47,24 @@ export type SourceState = {
      * Falls back to scanning `thumbnails` when absent, which is what the engine's generator fills.
      */
     thumbnailAt?: (time: number) => ThumbnailImage | undefined;
+    /**
+     * Both selectors may answer with a promise, and the menu waits on it.
+     *
+     * The engine switches a track by pointing the pipeline at another stream, which is immediate and
+     * cannot fail, so locally these return nothing. A source that owns its own player is the opposite
+     * case: the switch is a round trip through somebody else's UI and takes seconds, and it can lose.
+     * A menu that closed on the click would report a selection that has not happened, and a rejection
+     * with nothing awaiting it is an unhandled rejection rather than an error the viewer ever sees.
+     */
     subtitleTracks: TrackChoice[];
     /** undefined means subtitles are off. */
     selectedSubtitleTrack: string | number | undefined;
-    selectSubtitleTrack: (id: string | number | undefined) => void;
+    selectSubtitleTrack: (id: string | number | undefined) => void | Promise<void>;
+    /** What the row that turns subtitles off is called, when the source would rather name it itself. */
+    subtitleOffLabel?: string;
     audioTracks: TrackChoice[];
     selectedAudioTrack: string | number | undefined;
-    selectAudioTrack: (id: string | number) => void;
+    selectAudioTrack: (id: string | number) => void | Promise<void>;
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
@@ -87,13 +105,24 @@ export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
      * Falls back to scanning `thumbnails` when absent, which is what the engine's generator fills.
      */
     thumbnailAt?: (time: number) => ThumbnailImage | undefined;
+    /**
+     * Both selectors may answer with a promise, and the menu waits on it.
+     *
+     * The engine switches a track by pointing the pipeline at another stream, which is immediate and
+     * cannot fail, so locally these return nothing. A source that owns its own player is the opposite
+     * case: the switch is a round trip through somebody else's UI and takes seconds, and it can lose.
+     * A menu that closed on the click would report a selection that has not happened, and a rejection
+     * with nothing awaiting it is an unhandled rejection rather than an error the viewer ever sees.
+     */
     subtitleTracks: TrackChoice[];
     /** undefined means subtitles are off. */
     selectedSubtitleTrack: string | number | undefined;
-    selectSubtitleTrack: (id: string | number | undefined) => void;
+    selectSubtitleTrack: (id: string | number | undefined) => void | Promise<void>;
+    /** What the row that turns subtitles off is called, when the source would rather name it itself. */
+    subtitleOffLabel?: string;
     audioTracks: TrackChoice[];
     selectedAudioTrack: string | number | undefined;
-    selectAudioTrack: (id: string | number) => void;
+    selectAudioTrack: (id: string | number) => void | Promise<void>;
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;

package/dist/react/video-player.d.ts

@@ -14,8 +14,28 @@ export type MediaPlayerSource = {
 };
 /** Shared by both arms: nothing here depends on who owns the media. */
 type CommonOptions = {
+    /**
+     * Drawn across the top of the picture, in a layer of its own.
+     *
+     * That layer cannot see an `overlay` item, so an app that also places something along the top has
+     * two elements competing for one band of screen: on a narrow viewport the title ellipsizes against
+     * the FULL width and then runs underneath whatever is painted over it. An app in that position
+     * should leave this unset and draw the title as part of its own overlay row, where the two can
+     * share a flex line and the filename can be the one that gives way.
+     */
     title?: string;
     autoplay?: boolean;
+    /**
+     * Draw the control bar. Defaults to true.
+     *
+     * False leaves the picture, the title and the overlay and takes away only the chrome, for a host
+     * that has to put its own interactive UI over the media for a while. A source whose sign-in form
+     * lives inside its own document is the case this exists for: the form is the thing the viewer has
+     * to reach, and a control bar for a media that has not loaded yet sits on top of it and eats the
+     * clicks. Hiding it from the host side is not an option, since `setHideUI` is installed by the
+     * store's `attach` and does nothing at all until a media arrives.
+     */
+    controls?: boolean;
     /**
      * The app's own content over the video: a download readout, a badge, a logo, anything the player
      * itself has no opinion about.
@@ -85,7 +105,16 @@ export type MediaPlayerLocalOptions = CommonOptions & MediaPlayerSource & {
  * works: the key session belongs to whoever owns the element.
  */
 export type MediaPlayerRemoteOptions = CommonOptions & {
-    media: PlayerMedia;
+    /**
+     * Null means the media has not been found yet: the chrome renders and attaches when it arrives.
+     *
+     * A source usually has to mount its own document before it can hand over an element, and that
+     * document is passed as `children`, so it can only exist once this component has rendered. The
+     * key is still REQUIRED even when the value is null, because its presence is what selects this
+     * arm: omitting it falls through to the local arm, which draws an idle `<video>` over whatever
+     * the children put there.
+     */
+    media: PlayerMedia | null;
     read?: never;
     size?: never;
     /** The source's own storyboard, since there are no bytes to generate previews from. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",

package/src/lib/react/components/chrome.tsx

@@ -95,10 +95,12 @@ export type ChromeProps = {
   onCanvasRef: (element: HTMLCanvasElement | null) => void
   /** The app's own content, over the video and outside the click-to-pause region, unlike `children`. */
   overlay?: ReactNode
+  /** False draws no control bar at all, leaving the picture, the title and the overlay. */
+  controls?: boolean
   children?: ReactNode
 }
 
-export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, children }: ChromeProps) => {
+export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, controls, children }: ChromeProps) => {
   const player = usePlayer()
   const hideUI = usePlayer((state) => state.hideUI)
   const setHideUI = usePlayer((state) => state.setHideUI)
@@ -170,7 +172,7 @@ export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, children }: Chro
           {item}
         </div>
       ))}
-      <ControlBar />
+      {controls === false ? null : <ControlBar />}
       <div className="video" onClick={onVideoClick}>
         {onVideoRef ? <video ref={onVideoRef} playsInline /> : null}
         {children}

package/src/lib/react/components/settings.tsx

@@ -158,6 +158,22 @@ position: relative;
   .description {
     word-break: break-word;
   }
+
+  /* Dimmed and inert, but still listed. A source that names a track it cannot serve right now is
+     saying the track exists, and dropping the row would read as the source having nothing. */
+  .unavailable {
+    opacity: 0.5;
+    cursor: default;
+    :hover {
+      background-color: transparent;
+    }
+  }
+
+  .failed {
+    border-bottom: 1px solid #4D4D4E;
+    color: #f66;
+    ${fonts.bSmall.regular}
+  }
 }
 `
 
@@ -168,46 +184,55 @@ enum PopoverContent {
   Audio
 }
 
-/** One track picker, shared by the subtitle and audio menus. */
+/**
+ * One track picker, shared by the subtitle and audio menus.
+ *
+ * `pending` and `failed` describe the switch the viewer just asked for, not the menu: while a source
+ * is working, every row is inert and the one being switched to says so, because the selection has
+ * not moved yet and a tick next to it would be a lie.
+ */
 const TrackMenu = (
-  { title, tracks, selected, onSelect, onBack, allowDisable }: {
+  { title, tracks, selected, onSelect, onBack, offLabel, pending, failed }: {
     title: string
     tracks: TrackChoice[]
     selected: string | number | undefined
     onSelect: (id: string | number | undefined) => void
     onBack: () => void
-    allowDisable?: boolean
+    /** Absent means the menu offers no way off at all, which is what audio wants. */
+    offLabel?: string
+    /** The id currently being switched to, where `null` is the off row and undefined means idle. */
+    pending?: string | number | null
+    failed?: boolean
+  }
+) => {
+  const busy = pending !== undefined
+  const row = (id: string | number | null, label: string, className?: string) => {
+    const isPending = busy && pending === id
+    const disabled = busy || tracks.find((track) => track.id === id)?.disabled
+    return (
+      <div
+        key={id ?? '__off__'}
+        onClick={() => { if (!disabled) onSelect(id ?? undefined) }}
+        className={[className, disabled ? 'unavailable' : null].filter(Boolean).join(' ') || undefined}
+      >
+        <span>{label}</span>
+        <span>{isPending ? '…' : (selected ?? null) === id ? '✓' : ''}</span>
+      </div>
+    )
   }
-) => (
-  <div className='popover track-list'>
-    <div className="back" onClick={onBack}>
-      <ChevronLeft />
-      <span>{title}</span>
+
+  return (
+    <div className='popover track-list'>
+      <div className="back" onClick={onBack}>
+        <ChevronLeft />
+        <span>{title}</span>
+      </div>
+      {failed ? <div className="no-hover failed">Could not switch. Try again.</div> : null}
+      {offLabel ? row(null, offLabel) : null}
+      {tracks.map(({ id, label }) => row(id, label, 'description'))}
     </div>
-    {
-      allowDisable
-        ? (
-          <div onClick={() => onSelect(undefined)}>
-            <span>Disable</span>
-            <span>{selected === undefined ? '✓' : ''}</span>
-          </div>
-        )
-        : null
-    }
-    {
-      tracks.map(({ id, label }) => (
-        <div
-          key={id}
-          onClick={() => onSelect(id)}
-          className="description"
-        >
-          <span>{label}</span>
-          <span>{selected === id ? '✓' : ''}</span>
-        </div>
-      ))
-    }
-  </div>
-)
+  )
+}
 
 export const SettingsAction = () => {
   const player = usePlayer()
@@ -219,13 +244,27 @@ export const SettingsAction = () => {
   const selectedAudioTrack = usePlayer((state) => state.selectedAudioTrack)
   const selectAudioTrack = usePlayer((state) => state.selectAudioTrack)
 
+  const subtitleOffLabel = usePlayer((state) => state.subtitleOffLabel)
+
   const [isOpenPopover, setIsOpenPopover] = useState(false)
   const [popoverContent, setPopoverContent] = useState(PopoverContent.Default)
   const settingsContainerRef = useRef<HTMLDivElement>(null)
+  // The id being switched to, or undefined when nothing is in flight. Null is the row that turns
+  // subtitles off, so this cannot be a plain id: undefined has to keep meaning idle.
+  const [pending, setPending] = useState<string | number | null | undefined>(undefined)
+  const [failed, setFailed] = useState(false)
 
   const togglePopover = () => {
     setIsOpenPopover(!isOpenPopover)
     setPopoverContent(PopoverContent.Default)
+    setFailed(false)
+  }
+
+  // Not `togglePopover`: this runs from a promise, where the captured `isOpenPopover` is whatever it
+  // was at click time, so a toggle could reopen a menu the viewer has already dismissed.
+  const closePopover = () => {
+    setIsOpenPopover(false)
+    setPopoverContent(PopoverContent.Default)
   }
 
   const setPlaybackRate = (rate: number) => {
@@ -248,15 +287,50 @@ export const SettingsAction = () => {
     return () => document.removeEventListener('pointerdown', handleClickOutside)
   }, [isOpenPopover])
 
-  const chooseSubtitle = (id: string | number | undefined) => {
-    selectSubtitleTrack(id)
-    togglePopover()
+  /**
+   * Runs a track switch and decides when the menu may close.
+   *
+   * A selector that returns nothing switched synchronously, so the click closes the menu as it always
+   * has. One that returns a promise owns a player this one cannot reach, and the menu stays open and
+   * inert until it answers: closing first would show a selection that has not happened yet, and
+   * dropping the promise would turn a failed switch into an unhandled rejection nobody ever sees.
+   */
+  const runSelect = (id: string | number | null, select: () => void | Promise<void>) => {
+    if (pending !== undefined) return
+    setFailed(false)
+    let result: void | Promise<void>
+    try {
+      result = select()
+    } catch (err) {
+      console.warn('[media-player] track selection failed:', err)
+      setFailed(true)
+      return
+    }
+    if (!(result instanceof Promise)) {
+      closePopover()
+      return
+    }
+    setPending(id)
+    result.then(
+      () => {
+        setPending(undefined)
+        closePopover()
+      },
+      (err) => {
+        console.warn('[media-player] track selection failed:', err)
+        setPending(undefined)
+        setFailed(true)
+      },
+    )
   }
 
+  const chooseSubtitle = (id: string | number | undefined) =>
+    runSelect(id ?? null, () => selectSubtitleTrack(id))
+
+  // the audio menu offers no way off, so there is no undefined case to answer for
   const chooseAudio = (id: string | number | undefined) => {
-    // the audio menu never offers "Disable"
-    if (id !== undefined) selectAudioTrack(id)
-    togglePopover()
+    if (id === undefined) return
+    runSelect(id, () => selectAudioTrack(id))
   }
 
   const changePopoverContent = (newPopoverContent: PopoverContent) => () => {
@@ -362,7 +436,9 @@ export const SettingsAction = () => {
             selected={selectedSubtitleTrack}
             onSelect={chooseSubtitle}
             onBack={changePopoverContent(PopoverContent.Default)}
-            allowDisable
+            offLabel={subtitleOffLabel ?? 'Disable'}
+            pending={pending}
+            failed={failed}
           />
         )
       }
@@ -374,6 +450,8 @@ export const SettingsAction = () => {
             selected={selectedAudioTrack}
             onSelect={chooseAudio}
             onBack={changePopoverContent(PopoverContent.Default)}
+            pending={pending}
+            failed={failed}
           />
         )
       }

package/src/lib/react/source-feature.ts

@@ -13,6 +13,13 @@ import { definePlayerFeature } from '@videojs/core/dom'
 export type TrackChoice = {
   id: string | number
   label: string
+  /**
+   * Offered but not selectable, so the menu shows it and refuses the click.
+   *
+   * Hiding it instead would be worse: a source that lists a dub it cannot currently serve is telling
+   * the viewer the dub exists, and a menu that silently omits it looks like the source has nothing.
+   */
+  disabled?: boolean
 }
 
 /**
@@ -47,14 +54,25 @@ export type SourceState = {
    */
   thumbnailAt?: (time: number) => ThumbnailImage | undefined
 
+  /**
+   * Both selectors may answer with a promise, and the menu waits on it.
+   *
+   * The engine switches a track by pointing the pipeline at another stream, which is immediate and
+   * cannot fail, so locally these return nothing. A source that owns its own player is the opposite
+   * case: the switch is a round trip through somebody else's UI and takes seconds, and it can lose.
+   * A menu that closed on the click would report a selection that has not happened, and a rejection
+   * with nothing awaiting it is an unhandled rejection rather than an error the viewer ever sees.
+   */
   subtitleTracks: TrackChoice[]
   /** undefined means subtitles are off. */
   selectedSubtitleTrack: string | number | undefined
-  selectSubtitleTrack: (id: string | number | undefined) => void
+  selectSubtitleTrack: (id: string | number | undefined) => void | Promise<void>
+  /** What the row that turns subtitles off is called, when the source would rather name it itself. */
+  subtitleOffLabel?: string
 
   audioTracks: TrackChoice[]
   selectedAudioTrack: string | number | undefined
-  selectAudioTrack: (id: string | number) => void
+  selectAudioTrack: (id: string | number) => void | Promise<void>
 
   /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
   hideUI: boolean

package/src/lib/react/video-player.tsx

@@ -23,9 +23,30 @@ export type MediaPlayerSource =
 
 /** Shared by both arms: nothing here depends on who owns the media. */
 type CommonOptions = {
+  /**
+   * Drawn across the top of the picture, in a layer of its own.
+   *
+   * That layer cannot see an `overlay` item, so an app that also places something along the top has
+   * two elements competing for one band of screen: on a narrow viewport the title ellipsizes against
+   * the FULL width and then runs underneath whatever is painted over it. An app in that position
+   * should leave this unset and draw the title as part of its own overlay row, where the two can
+   * share a flex line and the filename can be the one that gives way.
+   */
   title?: string
   autoplay?: boolean
 
+  /**
+   * Draw the control bar. Defaults to true.
+   *
+   * False leaves the picture, the title and the overlay and takes away only the chrome, for a host
+   * that has to put its own interactive UI over the media for a while. A source whose sign-in form
+   * lives inside its own document is the case this exists for: the form is the thing the viewer has
+   * to reach, and a control bar for a media that has not loaded yet sits on top of it and eats the
+   * clicks. Hiding it from the host side is not an option, since `setHideUI` is installed by the
+   * store's `attach` and does nothing at all until a media arrives.
+   */
+  controls?: boolean
+
   /**
    * The app's own content over the video: a download readout, a badge, a logo, anything the player
    * itself has no opinion about.
@@ -105,7 +126,16 @@ export type MediaPlayerLocalOptions =
 export type MediaPlayerRemoteOptions =
   & CommonOptions
   & {
-    media: PlayerMedia
+    /**
+     * Null means the media has not been found yet: the chrome renders and attaches when it arrives.
+     *
+     * A source usually has to mount its own document before it can hand over an element, and that
+     * document is passed as `children`, so it can only exist once this component has rendered. The
+     * key is still REQUIRED even when the value is null, because its presence is what selects this
+     * arm: omitting it falls through to the local arm, which draws an idle `<video>` over whatever
+     * the children put there.
+     */
+    media: PlayerMedia | null
     read?: never
     size?: never
 
@@ -177,19 +207,23 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
   // the document, and it renders the result itself.
   const subtitles = remote?.subtitles?.selection
   const audio = remote?.audioTracks?.selection
+  // `select` is published as-is rather than wrapped, so its promise reaches the menu: the menu is the
+  // only place that can hold the popover open, keep the tick off an unfinished switch, and show a
+  // failure, and a promise nothing awaits is an unhandled rejection.
   useEffect(() => {
     if (!subtitles) return
     setSourceState({
-      subtitleTracks: subtitles.options.map(({ id, label }) => ({ id, label })),
+      subtitleTracks: subtitles.options.map(({ id, label, disabled }) => ({ id, label, disabled })),
       selectedSubtitleTrack: subtitles.selectedId ?? undefined,
       selectSubtitleTrack: (id) => subtitles.select(id == null ? null : String(id)),
+      subtitleOffLabel: subtitles.offLabel,
     })
   }, [setSourceState, subtitles])
 
   useEffect(() => {
     if (!audio) return
     setSourceState({
-      audioTracks: audio.options.map(({ id, label }) => ({ id, label })),
+      audioTracks: audio.options.map(({ id, label, disabled }) => ({ id, label, disabled })),
       selectedAudioTrack: audio.selectedId ?? undefined,
       selectAudioTrack: (id) => audio.select(String(id)),
     })
@@ -203,6 +237,7 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
       onVideoRef={remote ? undefined : setVideo}
       onCanvasRef={setCanvas}
       overlay={options.overlay}
+      controls={options.controls}
     >
       {children}
     </Chrome>