@banou/media-player 0.8.2 → 0.8.4

package/dist/index.js

@@ -1,13 +1,13 @@
 import { i as e, n as t, o as n, s as r, t as i } from "./engine-Dmc7JSd9.js";
-import { useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
-import { css as u, keyframes as d } from "@emotion/react";
-import { createPlayer as f, useContainerAttach as p, useMediaAttach as m } from "@videojs/react";
-import { definePlayerFeature as h, videoFeatures as g } from "@videojs/core/dom";
-import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
-import { ChevronLeft as b, ChevronRight as x, Maximize as S, Minimize as C, Pause as w, Play as T, RotateCcw as E, Settings as D, Volume1 as O, Volume2 as k, VolumeX as A } from "react-feather";
-import { Tooltip as j } from "react-tooltip";
+import { Children as a, Fragment as o, isValidElement as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+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";
 //#region src/lib/react/source-feature.ts
-var ee = {
+var ne = {
 	indexes: [],
 	thumbnails: [],
 	subtitleTracks: [],
@@ -22,19 +22,19 @@ var ee = {
 	playbackError: null,
 	ready: !1,
 	setSourceState: () => {}
-}, M = h({
+}, N = v({
 	name: "source",
-	state: () => ({ ...ee }),
+	state: () => ({ ...ne }),
 	attach({ set: e }) {
 		e({
 			setSourceState: (t) => e(t),
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), N = f({
-	features: [...g, M],
+}), P = h({
+	features: [...y, N],
 	displayName: "MediaPlayer"
-}), P = N.usePlayer, te = (e) => {
+}), F = P.usePlayer, re = (e) => {
 	if (!(!e || e === "und")) try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -43,35 +43,35 @@ var ee = {
 	} catch {
 		return;
 	}
-}, F = (e) => e?.replace(/_/g, " ").trim() || void 0, ne = (e) => {
-	let t = e.map((e) => te(e.language) ?? F(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
+}, 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) => ne(e).map(({ track: e, label: t }) => ({
+}, R = (e) => L(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), re = (t, n, r) => {
-	let i = P(), { read: s, size: u, publicPath: d = "", libavWorkerUrl: f = "", jassubWorkerUrl: p = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = l(void 0), x = c(null), S = c(0), C = c(!1), w = c(s);
-	w.current = s;
-	let T = c(r?.onSeek);
+})), 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;
-	let E = c(r?.onPlaybackError);
+	let E = d(r?.onPlaybackError);
 	E.current = r?.onPlaybackError;
-	let D = a((e) => {
+	let D = c((e) => {
 		let t = typeof e == "number" ? e : void 0;
 		C.current = !0, i.setSourceState({ selectedSubtitleTrack: t }), x.current?.selectSubtitleStream(t);
-	}, [i]), O = a((e) => {
+	}, [i]), O = c((e) => {
 		typeof e == "number" && (i.setSourceState({ selectedAudioTrack: e }), b(e));
-	}, [i]), k = P((e) => e.setSourceState);
-	o(() => {
+	}, [i]), k = F((e) => e.setSourceState);
+	l(() => {
 		k({
 			selectSubtitleTrack: D,
 			selectAudioTrack: O
@@ -80,25 +80,25 @@ var ee = {
 		k,
 		D,
 		O
-	]), o(() => {
-		if (!t || !n || !u || !s) return;
+	]), l(() => {
+		if (!t || !n || !o || !a) return;
 		let r = !1;
 		i.setSourceState({
 			playbackError: null,
 			ready: !1
 		});
-		let a = (e) => {
+		let c = (e) => {
 			r || (console.error("playback failed", e), i.setSourceState({ playbackError: e }), E.current?.(e));
 		};
 		return (async () => {
 			try {
-				let o = await e({
+				let a = await e({
 					videoElement: t,
 					canvasElement: n,
 					read: (e, t) => w.current(e, t),
-					length: u,
-					publicPath: d,
-					libavWorkerUrl: f,
+					length: o,
+					publicPath: s,
+					libavWorkerUrl: u,
 					jassubWorkerUrl: p,
 					jassubWasmUrl: m,
 					jassubLegacyWasmUrl: h,
@@ -108,33 +108,33 @@ var ee = {
 					onReady: () => {
 						r || (i.setSourceState({ ready: !0 }), S.current > 0 && (t.currentTime = S.current, S.current = 0), v && t.play().catch(() => {}));
 					},
-					onError: a,
+					onError: c,
 					onRecovered: () => {
 						r || i.setSourceState({ playbackError: null });
 					},
 					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
 						});
 					}
 				});
 				if (r) {
-					o.destroy();
+					a.destroy();
 					return;
 				}
-				x.current = o, i.setSourceState({ indexes: o.indexes });
-				let s = i.selectedSubtitleTrack;
-				typeof s == "number" && o.selectSubtitleStream(s);
+				x.current = a, i.setSourceState({ indexes: a.indexes });
+				let l = i.selectedSubtitleTrack;
+				typeof l == "number" && a.selectSubtitleStream(l);
 			} catch (e) {
-				a(e);
+				c(e);
 			}
 		})(), () => {
 			r = !0, S.current = t.currentTime, x.current?.destroy(), x.current = null, i.setSourceState({ ready: !1 });
@@ -143,9 +143,9 @@ var ee = {
 		i,
 		t,
 		n,
+		o,
+		s,
 		u,
-		d,
-		f,
 		p,
 		m,
 		h,
@@ -154,44 +154,44 @@ var ee = {
 		y,
 		v
 	]);
-}, L = 5e3, R = 6e4, z = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
-	let [u, d] = l([]), f = c(null), p = c(i);
+}, 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 = s(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = c(m);
-	return h.current = m, o(() => {
+	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, s, c = L, l = () => {
+		let a = !1, o = null, l, u = ae, d = () => {
 			t({
 				publicPath: e,
 				workerUrl: n,
 				length: r,
 				read: (e, t) => p.current(e, t),
 				onThumbnails: (e) => {
-					a || d(e);
+					a || s(e);
 				}
 			}).then((e) => {
 				if (a) {
 					e.destroy();
 					return;
 				}
-				o = e, f.current = e, e.update(h.current);
+				o = e, c.current = e, e.update(h.current);
 			}, () => {
-				a || (s = setTimeout(l, c), c = Math.min(c * 2, R));
+				a || (l = setTimeout(d, u), u = Math.min(u * 2, oe));
 			});
 		};
-		return l(), () => {
-			a = !0, clearTimeout(s), f.current = null, o?.destroy(), d([]);
+		return d(), () => {
+			a = !0, clearTimeout(l), c.current = null, o?.destroy(), s([]);
 		};
 	}, [
 		r,
 		e,
 		n
-	]), o(() => {
-		f.current?.update(m);
-	}, [m]), u;
+	]), l(() => {
+		c.current?.update(m);
+	}, [m]), o;
 }, B = (e, t) => {
-	let n = P(), r = c(null);
-	o(() => {
+	let n = F(), r = d(null);
+	l(() => {
 		if (!e || !t) return;
 		let a = i({
 			video: e,
@@ -206,12 +206,12 @@ var ee = {
 		t,
 		n
 	]);
-	let s = a(() => {
+	let a = c(() => {
 		r.current?.toggle().catch((e) => {
 			console.warn("picture in picture was refused", e);
 		});
 	}, []);
-	return e && t ? s : null;
+	return e && t ? a : null;
 }, 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    ",
@@ -239,75 +239,43 @@ var ee = {
 		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    "
 	}
-}, ie = u`
+}, se = p`
   top: unset !important;
   left: unset !important;
   width: 100%;
   height: 100%;
   margin: auto;
   pointer-events: none;
-`, ae = u`
+`, ce = p`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
+  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}
+  color: white;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
-  /* the video underneath keeps the click that toggles playback; anything in the slot that needs a
-     pointer takes it back for itself */
   pointer-events: none;
 
-  display: flex;
-  align-items: flex-start;
-  gap: calc(1.6 * var(--mp-unit));
-
-  /* longhands per breakpoint, never the shorthand: a nested at-rule is hoisted after the rule it
-     sits in, so a shorthand in a media query would override the longhands above it and silently
-     drop the safe-area insets. Those clear a notch once the player is fullscreen and resolve to
-     zero everywhere else. */
-  padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-  padding-bottom: calc(1.2 * var(--mp-unit));
-  padding-left: calc(calc(1.6 * var(--mp-unit)) + env(safe-area-inset-left, 0px));
-  padding-right: calc(calc(1.6 * var(--mp-unit)) + env(safe-area-inset-right, 0px));
+  /* one line with an ellipsis until there is width to wrap, since a release filename would
+     otherwise run to four lines on a phone */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   @media (min-width: 768px) {
+    padding: calc(2.4 * var(--mp-unit));
     padding-top: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-    padding-bottom: calc(2.4 * var(--mp-unit));
-    padding-left: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-left, 0px));
-    padding-right: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-right, 0px));
+    white-space: normal;
+    overflow: visible;
   }
 
   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%);
-  /* visibility, not only opacity: a slot child that took pointer events back would otherwise stay
-     hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events
-     does not, and transitioning it holds the element visible for the length of the fade. */
-  transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
-
-  .title {
-    ${V.headings.small}
-    color: white;
-    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-
-    /* one line with an ellipsis until there is width to wrap, since a release filename would
-       otherwise run to four lines on a phone */
-    flex: 1;
-    min-width: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    @media (min-width: 768px) {
-      white-space: normal;
-      overflow: visible;
-    }
-  }
-
-  /* pinned right with or without a title, so an app's readout does not jump sideways when a
-     filename arrives late */
-  .app-slot {
-    margin-left: auto;
-    flex: none;
-  }
-`, oe = u`
+  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
+`, le = p`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -323,11 +291,11 @@ var ee = {
     border-radius: 50%;
     border: 3px solid rgba(255, 255, 255, 0.25);
     border-top-color: #fff;
-    animation: ${d`
+    animation: ${m`
   to { transform: rotate(360deg); }
 `} 0.8s linear infinite;
   }
-`, se = u`
+`, ue = p`
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
@@ -337,39 +305,33 @@ var ee = {
   ${V.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, ce = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", le = ({ onCanvasRef: e, overlay: t }) => {
-	let n = P((e) => e.title), r = P((e) => e.hideUI), i = P((e) => e.playbackError), a = P((e) => e.ready), o = P((e) => e.size), s = P((e) => e.waiting);
-	return /* @__PURE__ */ y(_, { children: [
-		n || t ? /* @__PURE__ */ y("div", {
-			css: ae,
-			style: { ...r ? {
+`, 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: ce,
+			style: { ...n ? {
 				opacity: "0",
-				visibility: "hidden",
 				pointerEvents: "none"
 			} : {} },
-			children: [n ? /* @__PURE__ */ v("div", {
-				className: "title",
-				children: n
-			}) : void 0, t ? /* @__PURE__ */ v("div", {
-				className: "app-slot",
-				children: t
-			}) : void 0]
+			children: t
 		}) : void 0,
-		(o ? !a : s) && !i ? /* @__PURE__ */ v("div", { css: oe }) : void 0,
-		i ? /* @__PURE__ */ v("div", {
-			css: se,
-			children: ce(i)
+		(a ? !i : o) && !r ? /* @__PURE__ */ x("div", { css: le }) : void 0,
+		r ? /* @__PURE__ */ x("div", {
+			css: ue,
+			children: de(r)
 		}) : void 0,
-		/* @__PURE__ */ v("canvas", {
+		/* @__PURE__ */ x("canvas", {
 			ref: e,
-			css: ie
+			css: se
 		})
 	] });
 }, 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}`;
-}, ue = (e, t) => `${K(e)} / ${K(t)}`, de = (e) => u`
+}, pe = (e, t) => `${K(e)} / ${K(t)}`, me = (e) => p`
   display: flex;
   justify-content: flex-end;
 
@@ -382,16 +344,16 @@ var ee = {
     ${V.bMedium.regular}
   }
 
-  ${e === "sm" && u`
+  ${e === "sm" && p`
     padding: calc(0.4 * var(--mp-unit))!important;
   `}
-  ${e === "md" && u`
+  ${e === "md" && p`
     padding: calc(0.6 * var(--mp-unit))!important;
   `}
-  ${e === "lg" && u`
+  ${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__ */ y(_, { children: [/* @__PURE__ */ v("div", {
+`, q = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
 	"data-tooltip-id": e,
 	"data-open": !0,
 	"data-tooltip-offset": a,
@@ -399,28 +361,28 @@ var ee = {
 	"data-tooltip-delay-hide": i,
 	"data-tooltip-place": o,
 	children: n
-}), !s && /* @__PURE__ */ v(j, {
-	css: de(c),
+}), !s && /* @__PURE__ */ x(te, {
+	css: me(c),
 	id: e,
 	noArrow: !0,
 	children: t
 })] }), J = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
-	let [i, s] = l(!1), u = c(t);
-	u.current = t;
-	let d = c(null), f = a((t, r) => {
+	let [i, a] = f(!1), o = d(t);
+	o.current = t;
+	let s = d(null), u = c((t, r) => {
 		let i = e.current;
 		if (!i) return 0;
 		let { left: a, right: o, top: s, bottom: c } = i.getBoundingClientRect(), l = n === "horizontal" ? (t - a) / (o - a) : (c - r) / (c - s);
 		return Math.min(Math.max(l, 0), 1);
-	}, [e, n]), p = a((e) => {
-		r || e.button > 0 || (d.current = e.pointerId, e.currentTarget.setPointerCapture?.(e.pointerId), s(!0), u.current(f(e.clientX, e.clientY)));
-	}, [r, f]), m = a((e) => {
-		d.current === e.pointerId && u.current(f(e.clientX, e.clientY));
-	}, [f]), h = a((e) => {
-		d.current === e.pointerId && (d.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId), s(!1));
+	}, [e, n]), p = c((e) => {
+		r || e.button > 0 || (s.current = e.pointerId, e.currentTarget.setPointerCapture?.(e.pointerId), a(!0), o.current(u(e.clientX, e.clientY)));
+	}, [r, u]), m = c((e) => {
+		s.current === e.pointerId && o.current(u(e.clientX, e.clientY));
+	}, [u]), h = c((e) => {
+		s.current === e.pointerId && (s.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId), a(!1));
 	}, []);
-	return o(() => {
-		r && (d.current = null, s(!1));
+	return l(() => {
+		r && (s.current = null, a(!1));
 	}, [r]), {
 		dragging: i,
 		handlers: {
@@ -431,7 +393,7 @@ var ee = {
 			style: { touchAction: "none" }
 		}
 	};
-}, fe = u`
+}, he = p`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -588,30 +550,30 @@ var ee = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, pe = () => {
-	let e = P(), t = P((e) => e.currentTime), n = P((e) => e.duration), r = P((e) => e.size), i = P((e) => e.downloadedRanges), a = P((e) => e.indexes), u = P((e) => e.thumbnails), d = P((e) => e.thumbnailAt), f = c(null), [p, m] = l(void 0), [h, g] = l(void 0), _ = c(void 0), { dragging: b, handlers: x } = J({
-		ref: f,
+`, 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);
 		}
-	}), S = (e) => {
-		_.current = e.pointerType, x.onPointerDown(e);
+	}), b = (e) => {
+		_.current = e.pointerType, y.onPointerDown(e);
 	}, C = (e) => {
-		x.onPointerUp(e), e.pointerType !== "mouse" && g(void 0);
+		y.onPointerUp(e), e.pointerType !== "mouse" && g(void 0);
 	}, w = (e) => {
-		if (!f.current) return;
-		let { left: t, right: r } = f.current.getBoundingClientRect();
+		if (!c.current) return;
+		let { left: t, right: r } = c.current.getBoundingClientRect();
 		return Math.min(Math.max((e - t) / (r - t), 0), 1) * n;
 	}, T = (e) => {
 		g(w(e.clientX));
 	}, E = () => {
-		f.current && g(void 0);
-	}, D = (e) => n ? e / n * 100 : 0, O = s(() => i?.map((e, t) => {
+		c.current && g(void 0);
+	}, D = (e) => n ? e / n * 100 : 0, O = u(() => i?.map((e, t) => {
 		if (!r || !n) return null;
 		let i = a.filter((t) => e.startByteOffset <= t.pos && t.pos <= e.endByteOffset), o = i.at(0), s = i.at(-1);
 		if (!o || !s) return null;
 		let c = o.timestamp / n, l = s.timestamp / n, u = Number((l - c).toFixed(2)), d = c * 100;
-		return /* @__PURE__ */ v("div", {
+		return /* @__PURE__ */ x("div", {
 			className: "loaded-part",
 			style: {
 				transform: `scaleX(${u})`,
@@ -622,12 +584,12 @@ var ee = {
 		n,
 		a.length,
 		i?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
-	]), k = s(() => {
+	]), k = u(() => {
 		if (!h || h < 0) return;
 		let e = Math.floor(h / 3600), t = Math.floor((h - e * 3600) / 60), n = Math.floor(h - e * 3600 - t * 60);
 		return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
 	}, [h]);
-	o(() => {
+	l(() => {
 		if (p === void 0 || !n) return;
 		let t = p * n;
 		e.seek(t);
@@ -636,59 +598,59 @@ var ee = {
 		p,
 		n
 	]);
-	let A = s(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = s(() => {
+	let A = u(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = u(() => {
 		if (h) {
-			if (d) return d(h);
-			if (u.length) return u.find(({ startTime: e, endTime: t }) => e <= h && h < t);
+			if (s) return s(h);
+			if (o.length) return o.find(({ startTime: e, endTime: t }) => e <= h && h < t);
 		}
 	}, [
-		u,
-		d,
+		o,
+		s,
 		h
 	]);
-	return /* @__PURE__ */ y("div", {
-		css: fe,
-		ref: f,
-		className: b ? "progress-bar dragging" : "progress-bar",
+	return /* @__PURE__ */ S("div", {
+		css: he,
+		ref: c,
+		className: v ? "progress-bar dragging" : "progress-bar",
 		onMouseMove: T,
 		onMouseOut: E,
 		children: [
-			/* @__PURE__ */ v("div", { className: "background-bar" }),
-			h ? /* @__PURE__ */ v("div", {
+			/* @__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))))` },
 				children: k
 			}) : void 0,
-			/* @__PURE__ */ v("div", { className: "progress" }),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ x("div", { className: "progress" }),
+			/* @__PURE__ */ x("div", {
 				className: "loaded",
 				children: O
 			}),
-			/* @__PURE__ */ v("div", { className: "hover" }),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ x("div", { className: "hover" }),
+			/* @__PURE__ */ x("div", {
 				className: "play-container",
-				children: /* @__PURE__ */ v("div", {
+				children: /* @__PURE__ */ x("div", {
 					className: "play",
 					style: { transform: `scaleX(${A})` }
 				})
 			}),
-			/* @__PURE__ */ v("div", { className: "chapters" }),
-			/* @__PURE__ */ v("div", { className: "scrubber" }),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ x("div", { className: "chapters" }),
+			/* @__PURE__ */ x("div", { className: "scrubber" }),
+			/* @__PURE__ */ x("div", {
 				className: "padding",
-				...x,
-				onPointerDown: S,
+				...y,
+				onPointerDown: b,
 				onPointerUp: C,
 				onPointerCancel: C
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ x("div", {
 				className: "thumbnail",
 				style: { left: `clamp(var(--thumbnail-half), ${D(h ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
-				children: j?.url ? /* @__PURE__ */ v("img", { src: j.url }) : void 0
+				children: j?.url ? /* @__PURE__ */ x("img", { src: j.url }) : void 0
 			})
 		]
 	});
-}, me = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", he = u`
+}, _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`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -741,42 +703,42 @@ width: 100%;
     }
   }
 }
-`, ge = () => {
-	let e = P(), t = P((e) => e.playbackRate), n = c(null), r = c(null), i = .25, a = 3 - i, s = (e, t = .05) => Math.round(e / t) * t, l = s(t || 1), u = (e) => (e - i) / a * 100, d = (e) => s(i + e * a), { handlers: f } = J({
+`, 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({
 		ref: r,
-		onChange: (t) => e.setPlaybackRate(d(t))
+		onChange: (t) => e.setPlaybackRate(u(t))
 	}), p = (t) => {
 		t.preventDefault();
-		let n = .05, r = l;
+		let n = .05, r = s;
 		r = t.deltaY < 0 ? Math.min(3, r + n) : Math.max(i, r - n), e.setPlaybackRate(r);
 	};
-	o(() => {
+	l(() => {
 		let e = n.current;
 		return e && e.addEventListener("wheel", p, { passive: !1 }), () => {
 			e && e.removeEventListener("wheel", p);
 		};
 	}, [t]);
-	let m = u(l);
-	return /* @__PURE__ */ y("div", {
-		css: he,
-		children: [/* @__PURE__ */ y("div", { children: [l.toFixed(2), "x"] }), /* @__PURE__ */ v("div", {
+	let m = c(s);
+	return /* @__PURE__ */ S("div", {
+		css: ve,
+		children: [/* @__PURE__ */ S("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ x("div", {
 			className: "playback-slider",
 			ref: n,
 			...f,
-			children: /* @__PURE__ */ v("div", {
+			children: /* @__PURE__ */ x("div", {
 				ref: r,
 				style: { background: `linear-gradient(to right,
               #fff 0% ${m}%,
               #3A3A3A ${m}% 100%
             )` },
-				children: /* @__PURE__ */ v("div", {
+				children: /* @__PURE__ */ x("div", {
 					className: "playback-handle",
 					style: { left: `${m}%` }
 				})
 			})
 		})]
 	});
-}, _e = u`
+}, be = p`
 position: relative;
 
 .settings {
@@ -924,138 +886,186 @@ 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__ */ y("div", {
-	className: "popover track-list",
-	children: [
-		/* @__PURE__ */ y("div", {
-			className: "back",
-			onClick: i,
-			children: [/* @__PURE__ */ v(b, {}), /* @__PURE__ */ v("span", { children: e })]
-		}),
-		a ? /* @__PURE__ */ y("div", {
-			onClick: () => r(void 0),
-			children: [/* @__PURE__ */ v("span", { children: "Disable" }), /* @__PURE__ */ v("span", { children: n === void 0 ? "✓" : "" })]
-		}) : null,
-		t.map(({ id: e, label: t }) => /* @__PURE__ */ y("div", {
-			onClick: () => r(e),
-			className: "description",
-			children: [/* @__PURE__ */ v("span", { children: t }), /* @__PURE__ */ v("span", { children: n === e ? "✓" : "" })]
-		}, e))
-	]
-}), ve = () => {
-	let e = P(), t = P((e) => e.playbackRate), n = P((e) => e.subtitleTracks), r = P((e) => e.selectedSubtitleTrack), i = P((e) => e.selectSubtitleTrack), a = P((e) => e.audioTracks), s = P((e) => e.selectedAudioTrack), u = P((e) => e.selectAudioTrack), [d, f] = l(!1), [p, m] = l(0), h = c(null), g = () => {
-		f(!d), m(0);
-	}, _ = (t) => {
-		e.setPlaybackRate(t), m(0);
+`, 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__");
 	};
-	o(() => {
+	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) => {
-			d && 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);
-	}, [d]);
-	let S = (e) => {
-		i(e), g();
-	}, C = (e) => {
-		e !== void 0 && u(e), g();
-	}, w = (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__ */ y("div", {
-		css: _e,
-		ref: h,
+	return /* @__PURE__ */ S("div", {
+		css: be,
+		ref: g,
 		children: [
-			/* @__PURE__ */ v(q, {
+			/* @__PURE__ */ x(q, {
 				id: "settings",
-				disabled: d,
-				text: /* @__PURE__ */ v("button", {
+				disabled: u,
+				text: /* @__PURE__ */ x("button", {
 					className: "settings",
 					type: "button",
-					onClick: g,
-					children: /* @__PURE__ */ v(D, {})
+					onClick: T,
+					children: /* @__PURE__ */ x(A, {})
 				}),
-				toolTipText: /* @__PURE__ */ v("span", { children: "Settings" })
+				toolTipText: /* @__PURE__ */ x("span", { children: "Settings" })
 			}),
-			d && p === 0 && /* @__PURE__ */ y("div", {
+			u && m === 0 && /* @__PURE__ */ S("div", {
 				className: "popover menu",
 				children: [
-					a.length > 1 ? /* @__PURE__ */ y("div", {
-						onClick: w(3),
-						children: [/* @__PURE__ */ v("div", { children: "Audio" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
+					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__ */ y("div", {
-						onClick: w(2),
-						children: [/* @__PURE__ */ v("div", { children: "Subtitles" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
+					n.length > 0 ? /* @__PURE__ */ S("div", {
+						onClick: M(2),
+						children: [/* @__PURE__ */ x("div", { children: "Subtitles" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
 					}) : null,
-					/* @__PURE__ */ y("div", {
-						onClick: w(1),
-						children: [/* @__PURE__ */ v("div", { children: "Playback speed" }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("span", {
+					/* @__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__ */ v(x, {})] })]
+						}), /* @__PURE__ */ x(w, {})] })]
 					})
 				]
 			}),
-			d && p === 1 && /* @__PURE__ */ y("div", {
+			u && m === 1 && /* @__PURE__ */ S("div", {
 				className: "popover playback-rate",
 				children: [
-					/* @__PURE__ */ y("div", {
+					/* @__PURE__ */ S("div", {
 						className: "back",
-						onClick: w(0),
-						children: [/* @__PURE__ */ v(b, {}), /* @__PURE__ */ v("span", { children: "Playback speed" })]
+						onClick: M(0),
+						children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: "Playback speed" })]
 					}),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ x("div", {
 						className: "slider no-hover",
-						children: /* @__PURE__ */ v(ge, {})
+						children: /* @__PURE__ */ x(ye, {})
 					}),
-					/* @__PURE__ */ y("div", {
+					/* @__PURE__ */ S("div", {
 						className: "options no-hover",
 						children: [
-							/* @__PURE__ */ v("div", {
-								onClick: () => _(.5),
+							/* @__PURE__ */ x("div", {
+								onClick: () => D(.5),
 								children: "0.5x"
 							}),
-							/* @__PURE__ */ v("div", {
-								onClick: () => _(1),
+							/* @__PURE__ */ x("div", {
+								onClick: () => D(1),
 								children: "1x"
 							}),
-							/* @__PURE__ */ v("div", {
-								onClick: () => _(1.5),
+							/* @__PURE__ */ x("div", {
+								onClick: () => D(1.5),
 								children: "1.5x"
 							}),
-							/* @__PURE__ */ v("div", {
-								onClick: () => _(2),
+							/* @__PURE__ */ x("div", {
+								onClick: () => D(2),
 								children: "2x"
 							})
 						]
 					})
 				]
 			}),
-			d && p === 2 && /* @__PURE__ */ v(Y, {
+			u && m === 2 && /* @__PURE__ */ x(Y, {
 				title: "Subtitles",
 				tracks: n,
 				selected: r,
-				onSelect: S,
-				onBack: w(0),
-				allowDisable: !0
+				onSelect: k,
+				onBack: M(0),
+				offLabel: c ?? "Disable",
+				pending: _,
+				failed: y
 			}),
-			d && p === 3 && /* @__PURE__ */ v(Y, {
+			u && m === 3 && /* @__PURE__ */ x(Y, {
 				title: "Audio",
 				tracks: a,
-				selected: s,
-				onSelect: C,
-				onBack: w(0)
+				selected: o,
+				onSelect: j,
+				onBack: M(0),
+				pending: _,
+				failed: y
 			})
 		]
 	});
-}, ye = {
+}, Se = {
 	primary: "#EAEBEE",
 	secondary: "#D0D0D9",
 	hover: "rgba(255, 255, 255, 0.13)",
 	borderPrimary: "#384F70",
 	backgroundTooltip: "#222222"
-}, be = u`
+}, Ce = p`
   display: flex;
   align-items: center;
 
@@ -1098,46 +1108,46 @@ position: relative;
     width: 10px;
     height: 10px;
   }
-`, xe = ({ value: e, onChange: t }) => {
-	let n = P((e) => e.volume), r = P((e) => e.muted), i = c(null), a = c(null), { handlers: l } = J({
+`, 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({
 		ref: a,
 		onChange: t
-	}), u = (n) => {
+	}), s = (n) => {
 		n.preventDefault();
 		let r = .05, i = e;
 		i = n.deltaY < 0 ? Math.min(1, i + r) : Math.max(0, i - r), t(i);
 	};
-	o(() => {
+	l(() => {
 		let e = i.current;
-		return e && e.addEventListener("wheel", u, { passive: !1 }), () => {
-			e && e.removeEventListener("wheel", u);
+		return e && e.addEventListener("wheel", s, { passive: !1 }), () => {
+			e && e.removeEventListener("wheel", s);
 		};
 	}, [e]);
-	let d = e * 100, f = s(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
-	return /* @__PURE__ */ v(q, {
+	let c = e * 100, f = u(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
+	return /* @__PURE__ */ x(q, {
 		id: "volume-slider",
-		text: /* @__PURE__ */ v("div", {
+		text: /* @__PURE__ */ x("div", {
 			ref: i,
-			css: be,
-			...l,
-			children: /* @__PURE__ */ v("div", {
+			css: Ce,
+			...o,
+			children: /* @__PURE__ */ x("div", {
 				ref: a,
 				style: { background: `linear-gradient(to right,
-                #fff 0% ${d}%,
-                #3A3A3A ${d}% 100%
+                #fff 0% ${c}%,
+                #3A3A3A ${c}% 100%
               )` },
-				children: /* @__PURE__ */ v("div", {
+				children: /* @__PURE__ */ x("div", {
 					className: "volume-handle",
 					style: { left: `${e * 100}%` }
 				})
 			})
 		}),
-		toolTipText: /* @__PURE__ */ y("div", {
+		toolTipText: /* @__PURE__ */ S("div", {
 			className: "volume-value",
 			children: [f, "%"]
 		})
 	});
-}, Se = u`
+}, Te = p`
   position: relative;
   display: flex;
   align-items: center;
@@ -1200,28 +1210,28 @@ position: relative;
     }
   }
 
-`, Ce = ({ ref: e }) => {
-	let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = s(() => G(n), [n]);
-	return /* @__PURE__ */ y("div", {
-		css: Se,
-		children: [/* @__PURE__ */ v(q, {
+`, Ee = ({ ref: e }) => {
+	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(q, {
 			id: "sound",
-			text: /* @__PURE__ */ v("button", {
+			text: /* @__PURE__ */ x("button", {
 				className: "sound",
 				type: "button",
 				onClick: () => t.toggleMuted(),
 				ref: e,
-				children: v(r || n === 0 ? A : n <= .5 ? O : k, {
+				children: x(r || n === 0 ? ee : n <= .5 ? j : M, {
 					size: 18,
 					color: "#fff"
 				})
 			}),
-			toolTipText: /* @__PURE__ */ v("span", { children: r ? "Unmute (m)" : "Mute (m)" })
-		}), /* @__PURE__ */ v("div", {
+			toolTipText: /* @__PURE__ */ x("span", { children: r ? "Unmute (m)" : "Mute (m)" })
+		}), /* @__PURE__ */ x("div", {
 			className: "volume-slider-container",
-			children: /* @__PURE__ */ v("div", {
+			children: /* @__PURE__ */ x("div", {
 				className: "volume-slider-background",
-				children: /* @__PURE__ */ v(xe, {
+				children: /* @__PURE__ */ x(we, {
 					value: r ? 0 : i,
 					onChange: (e) => {
 						t.setVolume(W(e));
@@ -1230,7 +1240,7 @@ position: relative;
 			})
 		})]
 	});
-}, X = .05, Z = 5, we = u`
+}, X = .05, Z = 5, De = p`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -1314,7 +1324,7 @@ position: relative;
         cursor: pointer;
 
         :hover {
-          background-color: ${ye.hover};
+          background-color: ${Se.hover};
         }
 
         /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -1352,12 +1362,12 @@ position: relative;
       }
     }
   }
-`, Te = () => {
-	let e = P(), t = P((e) => e.paused), n = P((e) => e.currentTime), r = P((e) => e.duration), i = P((e) => e.fullscreen), s = P((e) => e.hideUI), c = P((e) => e.togglePictureInPicture), [u, d] = l(null), f = r > 0 && n === r, p = a(({ direction: t, stepSize: n }) => {
+`, 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();
 	}, [e]);
-	o(() => {
+	l(() => {
 		let t = (t) => {
 			let n = t.target;
 			if (n?.isContentEditable || /^(input|textarea|select)$/i.test(n?.tagName ?? "")) return;
@@ -1382,7 +1392,7 @@ position: relative;
 		};
 		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
 	}, [e, p]);
-	let m = a((e) => {
+	let m = c((e) => {
 		e.preventDefault(), e.deltaY < 0 ? p({
 			direction: "up",
 			stepSize: X
@@ -1391,66 +1401,77 @@ position: relative;
 			stepSize: X
 		});
 	}, [p]);
-	return o(() => {
-		if (u) return u.addEventListener("wheel", m, { passive: !1 }), () => u.removeEventListener("wheel", m);
-	}, [u, m]), /* @__PURE__ */ y("div", {
-		css: we,
-		style: { ...s ? {
+	return l(() => {
+		if (s) return s.addEventListener("wheel", m, { passive: !1 }), () => s.removeEventListener("wheel", m);
+	}, [s, m]), /* @__PURE__ */ S("div", {
+		css: De,
+		style: { ...a ? {
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ v(pe, {}), /* @__PURE__ */ y("div", {
+		children: [/* @__PURE__ */ x(ge, {}), /* @__PURE__ */ S("div", {
 			className: "actions",
-			children: [/* @__PURE__ */ y("div", {
+			children: [/* @__PURE__ */ S("div", {
 				className: "left",
 				children: [
-					/* @__PURE__ */ v(q, {
+					/* @__PURE__ */ x(q, {
 						id: "play",
 						tooltipPlace: "top-start",
-						text: /* @__PURE__ */ v("button", {
+						text: /* @__PURE__ */ x("button", {
 							className: "play",
 							type: "button",
 							onClick: () => e.togglePaused(),
-							children: v(f ? E : t ? T : w, {})
+							children: x(d ? k : t ? O : D, {})
 						}),
-						toolTipText: /* @__PURE__ */ v("span", { children: f ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
+						toolTipText: /* @__PURE__ */ x("span", { children: d ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ v(Ce, { ref: d }),
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ x(Ee, { ref: u }),
+					/* @__PURE__ */ x("div", {
 						className: "time",
-						children: ue(n, r)
+						children: pe(n, r)
 					})
 				]
-			}), /* @__PURE__ */ y("div", {
+			}), /* @__PURE__ */ S("div", {
 				className: "right",
 				children: [
-					/* @__PURE__ */ v(ve, {}),
-					c ? /* @__PURE__ */ v(q, {
+					/* @__PURE__ */ x(xe, {}),
+					o ? /* @__PURE__ */ x(q, {
 						id: "picture-in-picture",
-						text: /* @__PURE__ */ v("button", {
+						text: /* @__PURE__ */ x("button", {
 							className: "picture-in-picture",
 							type: "button",
-							onClick: c,
-							children: /* @__PURE__ */ v("img", { src: me })
+							onClick: o,
+							children: /* @__PURE__ */ x("img", { src: _e })
 						}),
-						toolTipText: /* @__PURE__ */ v("span", { children: "Picture in picture" })
+						toolTipText: /* @__PURE__ */ x("span", { children: "Picture in picture" })
 					}) : null,
-					/* @__PURE__ */ v(q, {
+					/* @__PURE__ */ x(q, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
-						text: /* @__PURE__ */ v("button", {
+						text: /* @__PURE__ */ x("button", {
 							className: "full-screen",
 							type: "button",
 							onClick: () => e.toggleFullscreen(),
-							children: v(i ? C : S, {})
+							children: x(i ? E : T, {})
 						}),
-						toolTipText: /* @__PURE__ */ v("span", { children: i ? "Exit full screen (f)" : "Full screen (f)" })
+						toolTipText: /* @__PURE__ */ x("span", { children: i ? "Exit full screen (f)" : "Full screen (f)" })
 					})
 				]
 			})]
 		})]
 	});
-}, Ee = 3e3, De = u`
+}, ke = 3e3, Ae = p`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  /* Never eats a click: click-to-pause still reaches the video underneath, and an item that needs a
+     pointer (a tooltip anchor, a button) sets \`pointer-events: auto\` on itself. */
+  pointer-events: none;
+  /* visibility, not only opacity: an item that took pointer events back would otherwise stay
+     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`
   position: relative;
   background-color: black;
   display: flex;
@@ -1482,74 +1503,86 @@ position: relative;
   &.hide {
     cursor: none;
   }
-`, Oe = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, children: i }) => {
-	let a = P(), s = P((e) => e.hideUI), l = P((e) => e.setHideUI), u = c(void 0), d = c("mouse");
-	o(() => () => clearTimeout(u.current), []);
-	let f = () => {
-		l(!1), clearTimeout(u.current), u.current = setTimeout(() => l(!0), Ee);
+`, Q = (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}/`) : [{
+		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");
+	l(() => () => clearTimeout(u.current), []);
+	let p = () => {
+		c(!1), clearTimeout(u.current), u.current = setTimeout(() => c(!0), ke);
 	};
-	return /* @__PURE__ */ y("div", {
-		css: De,
+	return /* @__PURE__ */ S("div", {
+		css: je,
 		ref: e,
 		onPointerMove: (e) => {
-			d.current = e.pointerType, e.pointerType === "mouse" && f();
+			f.current = e.pointerType, e.pointerType === "mouse" && p();
 		},
 		onPointerDown: (e) => {
-			d.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(u.current), l(!0));
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(u.current), c(!0));
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ v(le, {
-				onCanvasRef: n,
-				overlay: r
-			}),
-			/* @__PURE__ */ v(Te, {}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ x(fe, { onCanvasRef: n }),
+			Q(r).map(({ key: e, item: t }) => /* @__PURE__ */ x("div", {
+				css: Ae,
+				style: { ...s ? {
+					opacity: "0",
+					visibility: "hidden",
+					pointerEvents: "none"
+				} : {} },
+				children: t
+			}, e)),
+			i === !1 ? null : /* @__PURE__ */ x(Oe, {}),
+			/* @__PURE__ */ S("div", {
 				className: "video",
 				onClick: () => {
-					if (d.current === "mouse") {
-						a.togglePaused();
+					if (f.current === "mouse") {
+						o.togglePaused();
 						return;
 					}
-					s ? f() : (clearTimeout(u.current), l(!0));
+					s ? p() : (clearTimeout(u.current), c(!0));
 				},
-				children: [t ? /* @__PURE__ */ v("video", {
+				children: [t ? /* @__PURE__ */ x("video", {
 					ref: t,
 					playsInline: !0
-				}) : null, i]
+				}) : null, a]
 			})
 		]
 	});
-}, Q = ({ options: e, children: t }) => {
-	let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: s, publicPath: c, libavWorkerUrl: u, read: d, thumbnailRead: f, thumbnailsEnabled: h } = r ?? {}, g = m(), _ = p(), [y, b] = l(null), [x, S] = l(null), C = n?.media ?? y;
-	o(() => (g?.(C), () => g?.(null)), [C, g]), re(y, x, r);
+}, 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]), ie(v, b, r);
 	let w = z({
-		publicPath: c,
-		workerUrl: u,
-		length: h === !1 ? void 0 : a,
-		read: f ?? d,
-		downloadedRanges: s
-	}), T = n?.thumbnails?.all ?? w, E = B(y, x), D = P((e) => e.setSourceState);
-	o(() => {
+		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);
+	l(() => {
 		D({
 			title: i,
 			size: a,
-			downloadedRanges: s
+			downloadedRanges: o
 		});
 	}, [
 		D,
 		i,
 		a,
-		s
+		o
 	]);
 	let O = n?.thumbnails?.at;
-	o(() => {
+	l(() => {
 		D({
 			thumbnails: T,
 			thumbnailAt: O,
@@ -1562,32 +1595,36 @@ position: relative;
 		E
 	]);
 	let k = n?.subtitles?.selection, A = n?.audioTracks?.selection;
-	return o(() => {
+	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]), o(() => {
+	}, [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))
 		});
-	}, [D, A]), /* @__PURE__ */ v(Oe, {
-		ref: _,
-		onVideoRef: n ? void 0 : b,
+	}, [D, A]), /* @__PURE__ */ x(Me, {
+		ref: h,
+		onVideoRef: n ? void 0 : y,
 		onCanvasRef: S,
 		overlay: e.overlay,
+		controls: e.controls,
 		children: t
 	});
-}, ke = u`
+}, Pe = p`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -1618,17 +1655,17 @@ position: relative;
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, $ = (e) => /* @__PURE__ */ v("div", {
-	css: ke,
-	children: /* @__PURE__ */ v(N.Provider, { children: /* @__PURE__ */ v(Q, {
+`, $ = (e) => /* @__PURE__ */ x("div", {
+	css: Pe,
+	children: /* @__PURE__ */ x(P.Provider, { children: /* @__PURE__ */ x(Ne, {
 		options: e,
 		children: e.children
 	}) })
-}), Ae = (e) => !!e && typeof e == "object" && "at" in e, je = (e) => !!e && typeof e == "object" && "selection" in e, Me = ({ blob: e, name: t }) => ({
+}), Fe = (e) => !!e && typeof e == "object" && "at" in e, Ie = (e) => !!e && typeof e == "object" && "selection" in e, Le = ({ 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()
-}), Ne = async (e, t) => {
+}), Re = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -1638,8 +1675,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;
-}, Pe = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await Ne(e, r);
+}, ze = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await Re(e, r);
 	return {
 		length: i,
 		name: n,
@@ -1652,9 +1689,9 @@ position: relative;
 			return a.arrayBuffer();
 		}
 	};
-}, Fe = async (e) => {
-	if ("blob" in e) return Me(e);
-	if ("url" in e) return Pe(e);
+}, Be = async (e) => {
+	if ("blob" in e) return Le(e);
+	if ("url" in e) return ze(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -1663,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, Fe as inputToRemuxerInput, je as isDelegatedTracks, Ae as isExternalThumbnails, M as sourceFeature, e as startPlayback, B as usePictureInPicture, P as usePlayer, z 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 };