@banou/media-player 0.10.18 → 0.10.19

package/dist/index.js

@@ -5,10 +5,10 @@ import { createPlayer as v, useContainerAttach as y, useMediaAttach as b } from
 import { definePlayerFeature as x, videoFeatures as S } from "@videojs/core/dom";
 import { createMediaElementSource as C } from "@banou/ponyfill/web-audio";
 import { Fragment as w, jsx as T, jsxs as E } from "@emotion/react/jsx-runtime";
-import { Captions as D, CaptionsOff as O, Check as k, ChevronLeft as A, ChevronRight as j, Copy as M, Maximize as N, Minimize as P, Pause as F, Play as I, RotateCcw as L, Settings as R, TriangleAlert as z, Volume1 as ee, Volume2 as B, VolumeX as V } from "lucide-react";
-import { Tooltip as H } from "react-tooltip";
+import { Captions as D, CaptionsOff as O, Check as k, ChevronLeft as A, ChevronRight as j, Copy as M, Maximize as N, Minimize as P, Pause as F, Play as I, RotateCcw as L, Settings as R, TriangleAlert as z, Volume1 as ee, Volume2 as te, VolumeX as B } from "lucide-react";
+import { Tooltip as V } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
-var te = {
+var ne = {
 	indexes: [],
 	chapters: [],
 	thumbnails: [],
@@ -20,6 +20,7 @@ var te = {
 	audioTracks: [],
 	selectedAudioTrack: void 0,
 	selectAudioTrack: () => {},
+	quality: null,
 	hideUI: !1,
 	setHideUI: () => {},
 	hasMedia: !1,
@@ -32,19 +33,19 @@ var te = {
 	playbackErrors: [],
 	ready: !1,
 	setSourceState: () => {}
-}, U = x({
+}, H = x({
 	name: "source",
-	state: () => ({ ...te }),
+	state: () => ({ ...ne }),
 	attach({ set: e }) {
 		e({
 			setSourceState: (t) => e(t),
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), W = v({
-	features: [...S, U],
+}), U = v({
+	features: [...S, H],
 	displayName: "MediaPlayer"
-}), G = W.usePlayer, K = (e) => {
+}), W = U.usePlayer, G = (e) => {
 	if (e && e !== "und") try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -53,28 +54,28 @@ var te = {
 	} catch {
 		return;
 	}
-}, q = (e) => e?.replace(/_/g, " ").trim() || void 0, J = (e) => {
-	let t = e.map((e) => K(e.language) ?? q(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
+}, K = (e) => e?.replace(/_/g, " ").trim() || void 0, q = (e) => {
+	let t = e.map((e) => G(e.language) ?? K(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
 		...e,
 		[t]: (e[t] ?? 0) + 1
 	}), {});
 	return e.map((e, r) => {
-		let i = t[r], a = q(e.title);
+		let i = t[r], a = K(e.title);
 		return {
 			track: e,
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, Y = (e) => J(e).map(({ track: e, label: t }) => ({
+}, J = (e) => q(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), X = [
+})), Y = [
 	0,
 	250,
 	1e3,
 	3e3,
 	1e4
-], ne = 6e4, re = 500, ie = 15e3, ae = (e) => e instanceof Error ? e.message : String(e), oe = (e) => {
+], X = 6e4, re = 500, ie = 15e3, ae = (e) => e instanceof Error ? e.message : String(e), oe = (e) => {
 	let t = [], n = e?.cause;
 	for (let e = 0; n != null && e < 8; e++) {
 		if (typeof MediaError < "u" && n instanceof MediaError) {
@@ -85,7 +86,7 @@ var te = {
 	}
 	return t.length ? t.join("\n") : void 0;
 }, se = (e, t, r) => {
-	let a = G(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, chapters: b, seekPrepareBudgetMs: x = re } = r ?? {}, S = p(b);
+	let a = W(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, chapters: b, seekPrepareBudgetMs: x = re } = r ?? {}, S = p(b);
 	S.current = b;
 	let [C, w] = m(void 0), [T, E] = m(0), D = p({
 		count: 0,
@@ -132,7 +133,7 @@ var te = {
 		});
 	}, [a, x]), L = u((e) => {
 		typeof e == "number" && (a.setSourceState({ selectedAudioTrack: e }), w(e));
-	}, [a]), R = G((e) => e.setSourceState);
+	}, [a]), R = W((e) => e.setSourceState);
 	d(() => {
 		R({
 			selectSubtitleTrack: F,
@@ -177,11 +178,11 @@ var te = {
 			let t = n(e);
 			if (u(e, t), t) {
 				let t = performance.now();
-				t - D.current.at > ne && (D.current = {
+				t - D.current.at > X && (D.current = {
 					count: 0,
 					at: t
 				});
-				let n = X[Math.min(D.current.count, X.length - 1)];
+				let n = Y[Math.min(D.current.count, Y.length - 1)];
 				D.current = {
 					count: D.current.count + 1,
 					at: t
@@ -218,13 +219,13 @@ var te = {
 					onSeek: (e) => N.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || a.setSourceState({
-							subtitleTracks: Y(e),
+							subtitleTracks: J(e),
 							...j.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || a.setSourceState({
-							audioTracks: Y(e),
+							audioTracks: J(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -572,7 +573,7 @@ var te = {
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
 `, Oe = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", ke = ({ onSubtitleRef: e }) => {
-	let t = G((e) => e.title), n = G((e) => e.hideUI), r = G((e) => e.playbackError), i = G((e) => e.ready), a = G((e) => e.size), o = G((e) => e.waiting), s = G((e) => e.seekingTo);
+	let t = W((e) => e.title), n = W((e) => e.hideUI), r = W((e) => e.playbackError), i = W((e) => e.ready), a = W((e) => e.size), o = W((e) => e.waiting), s = W((e) => e.seekingTo);
 	return /* @__PURE__ */ E(w, { children: [
 		t ? /* @__PURE__ */ T("div", {
 			className: "title",
@@ -676,7 +677,7 @@ var te = {
 		"data-tooltip-delay-hide": i,
 		"data-tooltip-place": o,
 		children: n
-	}), !s && /* @__PURE__ */ T(H, {
+	}), !s && /* @__PURE__ */ T(V, {
 		ref: u,
 		css: Ie(c),
 		id: e,
@@ -1053,7 +1054,7 @@ var te = {
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
 `, ut = 4, dt = () => {
-	let e = G(), t = G((e) => e.currentTime), n = G((e) => e.requestSeek), r = G((e) => e.duration), i = G((e) => e.size), a = G((e) => e.downloadedRanges), o = G((e) => e.buffered), s = G((e) => e.indexes), c = G((e) => e.thumbnails), l = G((e) => e.thumbnailAt), u = G((e) => e.requestThumbnail), h = G((e) => e.chapters), g = G((e) => e.seekingTo), _ = G((e) => e.setSourceState), v = G((e) => e.hideUI), y = p(null), [b, x] = m(void 0), [S, C] = m(void 0), w = (e) => {
+	let e = W(), t = W((e) => e.currentTime), n = W((e) => e.requestSeek), r = W((e) => e.duration), i = W((e) => e.size), a = W((e) => e.downloadedRanges), o = W((e) => e.buffered), s = W((e) => e.indexes), c = W((e) => e.thumbnails), l = W((e) => e.thumbnailAt), u = W((e) => e.requestThumbnail), h = W((e) => e.chapters), g = W((e) => e.seekingTo), _ = W((e) => e.setSourceState), v = W((e) => e.hideUI), y = p(null), [b, x] = m(void 0), [S, C] = m(void 0), w = (e) => {
 		C(e), u(e);
 	}, D = !!S;
 	d(() => {
@@ -1089,9 +1090,9 @@ var te = {
 		R.current = e.pointerType;
 	}, ee = (e) => {
 		R.current !== "touch" && w(L(e.clientX));
-	}, B = () => {
+	}, te = () => {
 		y.current && w(void 0);
-	}, V = (e) => r ? e / r * 100 : 0, H = (e, t, n) => {
+	}, B = (e) => r ? e / r * 100 : 0, V = (e, t, n) => {
 		let r = Number((n - t).toFixed(4)), i = t * 100;
 		return /* @__PURE__ */ T("div", {
 			className: "loaded-part",
@@ -1100,10 +1101,10 @@ var te = {
 				marginLeft: `${i}%`
 			}
 		}, e);
-	}, te = f(() => i === void 0 ? r ? o.map(([e, t], n) => H(n, e / r, t / r)) : [] : a?.map((e, t) => {
+	}, ne = f(() => i === void 0 ? r ? o.map(([e, t], n) => V(n, e / r, t / r)) : [] : a?.map((e, t) => {
 		if (!i || !r) return null;
 		let n = s.filter((t) => e.startByteOffset <= t.pos && t.pos <= e.endByteOffset), a = n.at(0), o = n.at(-1);
-		return !a || !o ? null : H(t, a.timestamp / r, o.timestamp / r);
+		return !a || !o ? null : V(t, a.timestamp / r, o.timestamp / r);
 	}) ?? [], [
 		r,
 		i,
@@ -1119,7 +1120,7 @@ var te = {
 		b,
 		r
 	]);
-	let U = f(() => {
+	let H = f(() => {
 		if (!r) return 0;
 		if (N && b !== void 0) return b;
 		let e = g ?? t;
@@ -1130,22 +1131,22 @@ var te = {
 		N,
 		b,
 		g
-	]), W = f(() => We(h, r), [h, r]), K = W.length > 0, q = f(() => {
-		if (!K || S === void 0 || !r) return -1;
-		let e = S / r * 100, t = W.findIndex((t, n) => n < W.length - 1 && e >= t && e < W[n + 1]);
-		return t >= 0 ? t : W.length - 2;
+	]), U = f(() => We(h, r), [h, r]), G = U.length > 0, K = f(() => {
+		if (!G || S === void 0 || !r) return -1;
+		let e = S / r * 100, t = U.findIndex((t, n) => n < U.length - 1 && e >= t && e < U[n + 1]);
+		return t >= 0 ? t : U.length - 2;
 	}, [
-		K,
-		W,
+		G,
+		U,
 		S,
 		r
-	]), J = f(() => K ? Ge(W, (e) => e !== q) : void 0, [
-		K,
-		W,
-		q
-	]), Y = f(() => q >= 0 ? Ge(W, (e) => e === q) : void 0, [W, q]), X = f(() => {
+	]), q = f(() => G ? Ge(U, (e) => e !== K) : void 0, [
+		G,
+		U,
+		K
+	]), J = f(() => K >= 0 ? Ge(U, (e) => e === K) : void 0, [U, K]), Y = f(() => {
 		if (S !== void 0) return h.find(({ start: e, end: t }) => e <= S && S < t);
-	}, [h, S]), ne = f(() => {
+	}, [h, S]), X = f(() => {
 		if (S) {
 			if (l) return l(S);
 			if (c.length) return c.find(({ startTime: e, endTime: t }) => e <= S && S < t);
@@ -1161,13 +1162,13 @@ var te = {
 			/* @__PURE__ */ T("div", { className: "background-bar" }),
 			/* @__PURE__ */ T("div", {
 				className: "loaded",
-				children: te
+				children: ne
 			}),
 			/* @__PURE__ */ T("div", {
 				className: "play-container",
 				children: /* @__PURE__ */ T("div", {
 					className: "play",
-					style: { transform: `scaleX(${U})` }
+					style: { transform: `scaleX(${H})` }
 				})
 			})
 		]
@@ -1178,31 +1179,31 @@ var te = {
 		className: [
 			"progress-bar",
 			N ? "dragging" : "",
-			K ? "segmented" : ""
+			G ? "segmented" : ""
 		].filter(Boolean).join(" "),
 		onPointerDown: z,
 		onPointerMove: z,
 		onMouseMove: ee,
-		onMouseOut: B,
+		onMouseOut: te,
 		children: [
-			re(void 0, J),
+			re(void 0, q),
 			S ? /* @__PURE__ */ E("div", {
 				className: "cursor-time",
 				style: {
-					left: X ? `clamp(var(--thumbnail-half), ${V(S)}%, calc(100% - var(--thumbnail-half)))` : `clamp(calc(3 * var(--mp-unit)), ${V(S)}%, calc(100% - calc(3 * var(--mp-unit))))`,
-					maxWidth: X ? "var(--thumbnail-width)" : void 0
+					left: Y ? `clamp(var(--thumbnail-half), ${B(S)}%, calc(100% - var(--thumbnail-half)))` : `clamp(calc(3 * var(--mp-unit)), ${B(S)}%, calc(100% - calc(3 * var(--mp-unit))))`,
+					maxWidth: Y ? "var(--thumbnail-width)" : void 0
 				},
 				children: [/* @__PURE__ */ T("span", {
 					className: "cursor-time-value",
 					children: Pe(S)
-				}), X ? /* @__PURE__ */ T("span", {
+				}), Y ? /* @__PURE__ */ T("span", {
 					className: "chapter-title",
-					children: X.title
+					children: Y.title
 				}) : void 0]
 			}) : void 0,
 			/* @__PURE__ */ T("div", { className: "progress" }),
 			/* @__PURE__ */ T("div", { className: "hover" }),
-			Y ? re("focus", Y) : void 0,
+			J ? re("focus", J) : void 0,
 			/* @__PURE__ */ T("div", { className: "scrubber" }),
 			/* @__PURE__ */ T("div", {
 				className: "padding",
@@ -1213,8 +1214,8 @@ var te = {
 			}),
 			/* @__PURE__ */ T("div", {
 				className: "thumbnail",
-				style: { left: `clamp(var(--thumbnail-half), ${V(S ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
-				children: ne?.url ? /* @__PURE__ */ T("img", { src: ne.url }) : void 0
+				style: { left: `clamp(var(--thumbnail-half), ${B(S ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
+				children: X?.url ? /* @__PURE__ */ T("img", { src: X.url }) : void 0
 			})
 		]
 	});
@@ -1549,7 +1550,7 @@ ${gt}
 		e.detail
 	].filter(Boolean).join("\n");
 }).join("\n\n"), wt = () => {
-	let e = G((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = vt(), [i, a] = m(!1);
+	let e = W((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = vt(), [i, a] = m(!1);
 	if (e.length === 0) return null;
 	let o = () => {
 		navigator.clipboard?.writeText(Ct(e)).then(() => {
@@ -1664,7 +1665,7 @@ width: 100%;
   }
 }
 `, Et = () => {
-	let e = G(), t = G((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 2.75, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = ze({
+	let e = W(), t = W((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 2.75, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = ze({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(l(t))
 	}), f = (t) => {
@@ -1793,65 +1794,74 @@ ${gt}
 }
 
 `, Ot = () => {
-	let e = G(), t = G((e) => e.playbackRate), n = G((e) => e.audioTracks), r = G((e) => e.selectedAudioTrack), i = G((e) => e.selectAudioTrack), a = G((e) => e.volumeNormalizer), [o, s] = m(0), { open: c, toggle: l, containerRef: u, pending: d, failed: f, runSelect: p } = vt({ onReset: () => s(0) }), h = (t) => {
-		e.setPlaybackRate(t), s(0);
-	}, g = (e) => {
-		e !== void 0 && p(e, () => i(e));
-	}, _ = (e) => () => {
-		s(e);
+	let e = W(), t = W((e) => e.playbackRate), n = W((e) => e.audioTracks), r = W((e) => e.selectedAudioTrack), i = W((e) => e.selectAudioTrack), a = W((e) => e.quality), o = W((e) => e.volumeNormalizer), [s, c] = m(0), { open: l, toggle: u, containerRef: d, pending: f, failed: p, runSelect: h } = vt({ onReset: () => c(0) }), g = (t) => {
+		e.setPlaybackRate(t), c(0);
+	}, _ = (e) => {
+		e !== void 0 && h(e, () => i(e));
+	}, v = (e) => {
+		a && h(e ?? null, () => a.select(e === void 0 ? null : String(e)));
+	}, y = a ? a.options.length + +!!a.offLabel : 0, b = a?.selectedId == null ? a?.offLabel : a.options.find(({ id: e }) => e === a.selectedId)?.label, x = (e) => () => {
+		c(e);
 	};
 	return /* @__PURE__ */ E("div", {
 		css: Dt,
-		ref: u,
+		ref: d,
 		children: [
 			/* @__PURE__ */ T($, {
 				id: "settings",
-				disabled: c,
+				disabled: l,
 				text: /* @__PURE__ */ T("button", {
 					className: "settings",
 					type: "button",
-					onClick: l,
+					onClick: u,
 					"aria-label": "Settings",
-					"aria-expanded": c,
+					"aria-expanded": l,
 					children: /* @__PURE__ */ T(R, {})
 				}),
 				toolTipText: /* @__PURE__ */ T("span", { children: "Settings" })
 			}),
-			c && o === 0 && /* @__PURE__ */ E("div", {
+			l && s === 0 && /* @__PURE__ */ E("div", {
 				className: "popover menu",
 				children: [
 					n.length > 1 ? /* @__PURE__ */ E("div", {
-						onClick: _(2),
+						onClick: x(2),
 						children: [/* @__PURE__ */ T("div", { children: "Audio" }), /* @__PURE__ */ T("div", { children: /* @__PURE__ */ T(j, {}) })]
 					}) : null,
+					y > 1 ? /* @__PURE__ */ E("div", {
+						onClick: x(3),
+						children: [/* @__PURE__ */ T("div", { children: "Quality" }), /* @__PURE__ */ E("div", { children: [b ? /* @__PURE__ */ T("span", {
+							className: "secondary",
+							children: b
+						}) : null, /* @__PURE__ */ T(j, {})] })]
+					}) : null,
 					/* @__PURE__ */ E("div", {
-						onClick: _(1),
+						onClick: x(1),
 						children: [/* @__PURE__ */ T("div", { children: "Playback speed" }), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("span", {
 							className: "secondary",
 							children: t === 1 ? "(Default)" : t.toFixed(2)
 						}), /* @__PURE__ */ T(j, {})] })]
 					}),
-					a ? /* @__PURE__ */ E("div", {
+					o ? /* @__PURE__ */ E("div", {
 						role: "switch",
-						"aria-checked": a.available && a.enabled,
-						"aria-disabled": !a.available,
-						className: a.available ? void 0 : "no-hover unavailable",
+						"aria-checked": o.available && o.enabled,
+						"aria-disabled": !o.available,
+						className: o.available ? void 0 : "no-hover unavailable",
 						onClick: () => {
-							a.available && a.setEnabled(!a.enabled);
+							o.available && o.setEnabled(!o.enabled);
 						},
-						children: [/* @__PURE__ */ T("div", { children: "Normalize volume" }), /* @__PURE__ */ T("div", { children: a.available ? /* @__PURE__ */ T("span", { className: a.enabled ? "switch on" : "switch" }) : /* @__PURE__ */ T("span", {
+						children: [/* @__PURE__ */ T("div", { children: "Normalize volume" }), /* @__PURE__ */ T("div", { children: o.available ? /* @__PURE__ */ T("span", { className: o.enabled ? "switch on" : "switch" }) : /* @__PURE__ */ T("span", {
 							className: "secondary",
 							children: "Unavailable"
 						}) })]
 					}) : null
 				]
 			}),
-			c && o === 1 && /* @__PURE__ */ E("div", {
+			l && s === 1 && /* @__PURE__ */ E("div", {
 				className: "popover playback-rate",
 				children: [
 					/* @__PURE__ */ E("div", {
 						className: "back",
-						onClick: _(0),
+						onClick: x(0),
 						children: [/* @__PURE__ */ T(A, {}), /* @__PURE__ */ T("span", { children: "Playback speed" })]
 					}),
 					/* @__PURE__ */ T("div", {
@@ -1862,33 +1872,43 @@ ${gt}
 						className: "options no-hover",
 						children: [
 							/* @__PURE__ */ T("div", {
-								onClick: () => h(.5),
+								onClick: () => g(.5),
 								children: "0.5x"
 							}),
 							/* @__PURE__ */ T("div", {
-								onClick: () => h(1),
+								onClick: () => g(1),
 								children: "1x"
 							}),
 							/* @__PURE__ */ T("div", {
-								onClick: () => h(1.5),
+								onClick: () => g(1.5),
 								children: "1.5x"
 							}),
 							/* @__PURE__ */ T("div", {
-								onClick: () => h(2),
+								onClick: () => g(2),
 								children: "2x"
 							})
 						]
 					})
 				]
 			}),
-			c && o === 2 && /* @__PURE__ */ T(_t, {
+			l && s === 2 && /* @__PURE__ */ T(_t, {
 				title: "Audio",
 				tracks: n,
 				selected: r,
-				onSelect: g,
-				onBack: _(0),
-				pending: d,
-				failed: f
+				onSelect: _,
+				onBack: x(0),
+				pending: f,
+				failed: p
+			}),
+			l && s === 3 && a && /* @__PURE__ */ T(_t, {
+				title: "Quality",
+				tracks: a.options,
+				selected: a.selectedId ?? void 0,
+				onSelect: v,
+				onBack: x(0),
+				offLabel: a.offLabel,
+				pending: f,
+				failed: p
 			})
 		]
 	});
@@ -1910,7 +1930,7 @@ position: static;
 
 ${gt}
 `, At = () => {
-	let e = G((e) => e.subtitleTracks), t = G((e) => e.selectedSubtitleTrack), n = G((e) => e.selectSubtitleTrack), r = G((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = vt();
+	let e = W((e) => e.subtitleTracks), t = W((e) => e.selectedSubtitleTrack), n = W((e) => e.selectSubtitleTrack), r = W((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = vt();
 	if (e.length === 0) return null;
 	let u = t !== void 0;
 	return /* @__PURE__ */ E("div", {
@@ -1989,7 +2009,7 @@ ${gt}
     height: 10px;
   }
 `, Nt = ({ value: e, onChange: t }) => {
-	let n = G((e) => e.volume), r = G((e) => e.muted), i = p(null), a = p(null), { handlers: o } = ze({
+	let n = W((e) => e.volume), r = W((e) => e.muted), i = p(null), a = p(null), { handlers: o } = ze({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -2091,7 +2111,7 @@ ${gt}
   }
 
 `, Ft = ({ ref: e }) => {
-	let t = G(), n = G((e) => e.volume), r = G((e) => e.muted), i = f(() => Ne(n), [n]);
+	let t = W(), n = W((e) => e.volume), r = W((e) => e.muted), i = f(() => Ne(n), [n]);
 	return /* @__PURE__ */ E("div", {
 		css: Pt,
 		children: [/* @__PURE__ */ T($, {
@@ -2103,7 +2123,7 @@ ${gt}
 				ref: e,
 				"aria-label": "Mute",
 				"aria-pressed": r || n === 0,
-				children: T(r || n === 0 ? V : n <= .5 ? ee : B, {
+				children: T(r || n === 0 ? B : n <= .5 ? ee : te, {
 					size: 18,
 					color: "#fff"
 				})
@@ -2253,7 +2273,7 @@ ${gt}
     }
   }
 `, Vt = ({ shortcuts: e = "window", root: t }) => {
-	let n = G(), r = G((e) => e.paused), i = G((e) => e.currentTime), a = G((e) => e.duration), o = G((e) => e.seekingTo), s = G((e) => e.fullscreen), c = G((e) => e.hideUI), l = G((e) => e.togglePictureInPicture), f = G((e) => e.pictureInPictureMode), h = G((e) => e.burnedInSubtitles), g = G((e) => e.passThroughPictureInPicture), _ = G((e) => e.subtitleTracks), v = G((e) => e.requestSeek), [y, b] = m(null), x = p(null), S = p(void 0), C = f === "burn-in", w = _.length > 0, D = a > 0 && i === a, O = u(({ direction: e, stepSize: t }) => {
+	let n = W(), r = W((e) => e.paused), i = W((e) => e.currentTime), a = W((e) => e.duration), o = W((e) => e.seekingTo), s = W((e) => e.fullscreen), c = W((e) => e.hideUI), l = W((e) => e.togglePictureInPicture), f = W((e) => e.pictureInPictureMode), h = W((e) => e.burnedInSubtitles), g = W((e) => e.passThroughPictureInPicture), _ = W((e) => e.subtitleTracks), v = W((e) => e.requestSeek), [y, b] = m(null), x = p(null), S = p(void 0), C = f === "burn-in", w = _.length > 0, D = a > 0 && i === a, O = u(({ direction: e, stepSize: t }) => {
 		let r = Ne(n.volume), i = e === "up" ? t : -t, a = Math.max(0, Math.min(1, r + i)), o = n.muted;
 		n.setVolume(Me(a)), o && !n.muted && n.toggleMuted();
 	}, [n]), k = p(!1);
@@ -2461,7 +2481,7 @@ ${gt}
     color: #fff;
   }
 `, Wt = () => {
-	let e = G((e) => e.burnedInSubtitles), t = G((e) => e.pictureInPictureMode), [n, r] = m(!1);
+	let e = W((e) => e.burnedInSubtitles), t = W((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
 			r(!1);
@@ -2541,7 +2561,7 @@ ${gt}
     }
   }
 `, Xt = () => {
-	let e = G((e) => e.chapters), t = G((e) => e.currentTime), n = G((e) => e.requestSeek), r = G((e) => e.seekPreview), i = G(), a = f(() => ct(e), [e]), o = f(() => {
+	let e = W((e) => e.chapters), t = W((e) => e.currentTime), n = W((e) => e.requestSeek), r = W((e) => e.seekPreview), i = W(), a = f(() => ct(e), [e]), o = f(() => {
 		if (typeof t != "number") return;
 		let n = e.findIndex((e, n) => a[n] !== void 0 && e.start - Gt <= t && t < e.end), r = n >= 0 ? a[n] : void 0;
 		return r ? {
@@ -2658,7 +2678,7 @@ ${gt}
 		item: e
 	}];
 }), nn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, shortcuts: a, children: o }) => {
-	let s = G(), c = G((e) => e.hideUI), l = G((e) => e.setHideUI), u = G((e) => e.hasMedia), f = G((e) => e.passThroughPictureInPicture), m = p(void 0), h = p("mouse"), g = p({
+	let s = W(), c = W((e) => e.hideUI), l = W((e) => e.setHideUI), u = W((e) => e.hasMedia), f = W((e) => e.passThroughPictureInPicture), m = p(void 0), h = p("mouse"), g = p({
 		x: -1,
 		y: -1
 	}), _ = p(null);
@@ -2780,75 +2800,79 @@ ${gt}
 		L,
 		P,
 		R
-	]), { thumbnails: ee, requestThumbnail: B } = ue({
+	]), { thumbnails: ee, requestThumbnail: te } = ue({
 		publicPath: c,
 		workerUrl: l,
 		length: g === !1 ? void 0 : o,
 		read: h ?? u,
 		downloadedRanges: s
-	}), V = n?.thumbnails?.all ?? ee, { toggle: H, mode: te, burnedIn: U } = de(x, C), W = _e(n?.media ?? null, n?.pictureInPicture), K = G((e) => e.setSourceState), q = n ? !!n.media : o !== void 0;
+	}), B = n?.thumbnails?.all ?? ee, { toggle: V, mode: ne, burnedIn: H } = de(x, C), U = _e(n?.media ?? null, n?.pictureInPicture), G = W((e) => e.setSourceState), K = n ? !!n.media : o !== void 0;
 	d(() => {
-		K({
+		G({
 			title: i,
 			size: o,
 			downloadedRanges: s,
-			hasMedia: q
+			hasMedia: K
 		});
 	}, [
-		K,
+		G,
 		i,
 		o,
 		s,
-		q
+		K
 	]);
-	let J = n?.thumbnails?.at;
+	let q = n?.thumbnails?.at;
 	d(() => {
-		K({
-			thumbnails: V,
-			thumbnailAt: J,
-			requestThumbnail: B,
-			togglePictureInPicture: H,
-			pictureInPictureMode: te,
-			burnedInSubtitles: U
+		G({
+			thumbnails: B,
+			thumbnailAt: q,
+			requestThumbnail: te,
+			togglePictureInPicture: V,
+			pictureInPictureMode: ne,
+			burnedInSubtitles: H
 		});
 	}, [
-		K,
-		V,
-		J,
+		G,
 		B,
-		H,
+		q,
 		te,
-		U
+		V,
+		ne,
+		H
 	]), d(() => {
-		K({ volumeNormalizer: z });
-	}, [K, z]), d(() => {
-		K({ passThroughPictureInPicture: W });
-	}, [K, W]);
-	let Y = n?.subtitles?.selection, X = n?.audioTracks?.selection;
-	return d(() => {
-		Y && K({
-			subtitleTracks: Y.options.map(({ id: e, label: t, disabled: n }) => ({
+		G({ volumeNormalizer: z });
+	}, [G, z]), d(() => {
+		G({ passThroughPictureInPicture: U });
+	}, [G, U]);
+	let J = n?.subtitles?.selection, Y = n?.audioTracks?.selection;
+	d(() => {
+		J && G({
+			subtitleTracks: J.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedSubtitleTrack: Y.selectedId ?? void 0,
-			selectSubtitleTrack: (e) => Y.select(e == null ? null : String(e)),
-			subtitleOffLabel: Y.offLabel
+			selectedSubtitleTrack: J.selectedId ?? void 0,
+			selectSubtitleTrack: (e) => J.select(e == null ? null : String(e)),
+			subtitleOffLabel: J.offLabel
 		});
-	}, [K, Y]), d(() => {
-		X && K({
-			audioTracks: X.options.map(({ id: e, label: t, disabled: n }) => ({
+	}, [G, J]), d(() => {
+		Y && G({
+			audioTracks: Y.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedAudioTrack: X.selectedId ?? void 0,
-			selectAudioTrack: (e) => X.select(String(e))
+			selectedAudioTrack: Y.selectedId ?? void 0,
+			selectAudioTrack: (e) => Y.select(String(e))
 		});
-	}, [K, X]), d(() => {
-		a && K({ chapters: a });
-	}, [K, a]), /* @__PURE__ */ T(nn, {
+	}, [G, Y]);
+	let X = n?.quality?.selection ?? null;
+	return d(() => {
+		G({ quality: X });
+	}, [G, X]), d(() => {
+		a && G({ chapters: a });
+	}, [G, a]), /* @__PURE__ */ T(nn, {
 		ref: v,
 		onVideoRef: n ? void 0 : S,
 		onSubtitleRef: w,
@@ -2929,7 +2953,7 @@ ${gt}
   overflow: hidden;
 `, on = (e) => /* @__PURE__ */ T("div", {
 	css: an,
-	children: /* @__PURE__ */ T(W.Provider, { children: /* @__PURE__ */ T(rn, {
+	children: /* @__PURE__ */ T(U.Provider, { children: /* @__PURE__ */ T(rn, {
 		options: e,
 		children: e.children
 	}) })
@@ -2974,4 +2998,4 @@ ${gt}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { on as MediaPlayer, on as default, W as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, fn as inputToRemuxerInput, cn as isDelegatedTracks, sn as isExternalThumbnails, U as sourceFeature, i as startPlayback, de as usePictureInPicture, G as usePlayer, ue as useSeekThumbnails };
+export { on as MediaPlayer, on as default, U as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, fn as inputToRemuxerInput, cn as isDelegatedTracks, sn as isExternalThumbnails, H as sourceFeature, i as startPlayback, de as usePictureInPicture, W as usePlayer, ue as useSeekThumbnails };

package/dist/react/components/track-menu.d.ts

@@ -17,7 +17,7 @@ export declare const popoverStyle: import("@emotion/utils").SerializedStyles;
  */
 export declare const TrackMenu: ({ title, tracks, selected, onSelect, onBack, offLabel, pending, failed }: {
     title: string;
-    tracks: TrackChoice[];
+    tracks: readonly TrackChoice[];
     selected: string | number | undefined;
     onSelect: (id: string | number | undefined) => void;
     /** Absent means the menu was opened straight from the bar, so the header is a label and no more. */

package/dist/react/player.d.ts

@@ -15,6 +15,7 @@ export declare const Player: import("@videojs/react").CreatePlayerResult<import(
     audioTracks: import("./source-feature").TrackChoice[];
     selectedAudioTrack: string | number | undefined;
     selectAudioTrack: (id: string | number) => void | Promise<void>;
+    quality: import("./media").DelegatedSelection | null;
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
     hasMedia: boolean;

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

@@ -1,4 +1,5 @@
 import type { MediaChapter, MediaIndex, PictureInPictureMode, ThumbnailImage } from '../engine';
+import type { DelegatedSelection } from './media';
 /**
  * One row of a track menu, already named.
  *
@@ -162,6 +163,8 @@ export type SourceState = {
     audioTracks: TrackChoice[];
     selectedAudioTrack: string | number | undefined;
     selectAudioTrack: (id: string | number) => void | Promise<void>;
+    /** The settings menu's quality choices, from a media the player does not own. null when none are offered. */
+    quality: DelegatedSelection | null;
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
@@ -307,6 +310,8 @@ export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
     audioTracks: TrackChoice[];
     selectedAudioTrack: string | number | undefined;
     selectAudioTrack: (id: string | number) => void | Promise<void>;
+    /** The settings menu's quality choices, from a media the player does not own. null when none are offered. */
+    quality: DelegatedSelection | null;
     /** 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

@@ -193,6 +193,12 @@ export type MediaPlayerRemoteOptions = CommonOptions & {
     /** The source renders these; the player draws the menu and reports the pick. */
     subtitles?: DelegatedTracks;
     audioTracks?: DelegatedTracks;
+    /**
+     * The source's own quality choices, as a row of the settings menu that shows the selected one.
+     * Offered only with two or more rows to choose between; `offLabel` names a row with no quality
+     * picked, such as an automatic one, whose id is null.
+     */
+    quality?: DelegatedTracks;
     /**
      * Offer picture in picture, entered by the host from inside the media's own document. Off by
      * default, and then there is no control at all. See `PassThroughPictureInPicture` for what the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.18",
+  "version": "0.10.19",
   "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/settings.tsx

@@ -107,7 +107,8 @@ ${popoverStyle}
 enum PopoverContent {
   Default,
   PlaybackRate,
-  Audio
+  Audio,
+  Quality
 }
 
 export const SettingsAction = () => {
@@ -116,6 +117,7 @@ export const SettingsAction = () => {
   const audioTracks = usePlayer((state) => state.audioTracks)
   const selectedAudioTrack = usePlayer((state) => state.selectedAudioTrack)
   const selectAudioTrack = usePlayer((state) => state.selectAudioTrack)
+  const quality = usePlayer((state) => state.quality)
   const volumeNormalizer = usePlayer((state) => state.volumeNormalizer)
 
   const [popoverContent, setPopoverContent] = useState(PopoverContent.Default)
@@ -134,6 +136,15 @@ export const SettingsAction = () => {
     runSelect(id, () => selectAudioTrack(id))
   }
 
+  const chooseQuality = (id: string | number | undefined) => {
+    if (!quality) return
+    runSelect(id ?? null, () => quality.select(id === undefined ? null : String(id)))
+  }
+  const qualityRows = quality ? quality.options.length + (quality.offLabel ? 1 : 0) : 0
+  const qualityLabel = quality?.selectedId == null
+    ? quality?.offLabel
+    : quality.options.find(({ id }) => id === quality.selectedId)?.label
+
   const changePopoverContent = (newPopoverContent: PopoverContent) => () => {
     setPopoverContent(newPopoverContent)
   }
@@ -179,6 +190,17 @@ export const SettingsAction = () => {
                 </div>
               )
               : null}
+            {qualityRows > 1
+              ? (
+                <div onClick={changePopoverContent(PopoverContent.Quality)}>
+                  <div>Quality</div>
+                  <div>
+                    {qualityLabel ? <span className='secondary'>{qualityLabel}</span> : null}
+                    <ChevronRight />
+                  </div>
+                </div>
+              )
+              : null}
             <div onClick={changePopoverContent(PopoverContent.PlaybackRate)}>
               <div>Playback speed</div>
               <div>
@@ -255,6 +277,20 @@ export const SettingsAction = () => {
           />
         )
       }
+      {
+        open && popoverContent === PopoverContent.Quality && quality && (
+          <TrackMenu
+            title='Quality'
+            tracks={quality.options}
+            selected={quality.selectedId ?? undefined}
+            onSelect={chooseQuality}
+            onBack={changePopoverContent(PopoverContent.Default)}
+            offLabel={quality.offLabel}
+            pending={pending}
+            failed={failed}
+          />
+        )
+      }
     </div>
   )
 }

package/src/lib/react/components/track-menu.tsx

@@ -154,7 +154,7 @@ export const popoverStyle = css`
 export const TrackMenu = (
   { title, tracks, selected, onSelect, onBack, offLabel, pending, failed }: {
     title: string
-    tracks: TrackChoice[]
+    tracks: readonly TrackChoice[]
     selected: string | number | undefined
     onSelect: (id: string | number | undefined) => void
     /** Absent means the menu was opened straight from the bar, so the header is a label and no more. */

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

@@ -1,4 +1,5 @@
 import type { MediaChapter, MediaIndex, PictureInPictureMode, ThumbnailImage } from '../engine'
+import type { DelegatedSelection } from './media'
 
 import { definePlayerFeature } from '@videojs/core/dom'
 
@@ -175,6 +176,9 @@ export type SourceState = {
   selectedAudioTrack: string | number | undefined
   selectAudioTrack: (id: string | number) => void | Promise<void>
 
+  /** The settings menu's quality choices, from a media the player does not own. null when none are offered. */
+  quality: DelegatedSelection | null
+
   /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
   hideUI: boolean
   setHideUI: (hide: boolean) => void
@@ -283,6 +287,7 @@ const initialState: SourceState = {
   audioTracks: [],
   selectedAudioTrack: undefined,
   selectAudioTrack: () => {},
+  quality: null,
   hideUI: false,
   setHideUI: () => {},
   hasMedia: false,

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

@@ -220,6 +220,12 @@ export type MediaPlayerRemoteOptions =
     /** The source renders these; the player draws the menu and reports the pick. */
     subtitles?: DelegatedTracks
     audioTracks?: DelegatedTracks
+    /**
+     * The source's own quality choices, as a row of the settings menu that shows the selected one.
+     * Offered only with two or more rows to choose between; `offLabel` names a row with no quality
+     * picked, such as an automatic one, whose id is null.
+     */
+    quality?: DelegatedTracks
     /**
      * Offer picture in picture, entered by the host from inside the media's own document. Off by
      * default, and then there is no control at all. See `PassThroughPictureInPicture` for what the
@@ -397,6 +403,11 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
     })
   }, [setSourceState, audio])
 
+  const quality = remote?.quality?.selection ?? null
+  useEffect(() => {
+    setSourceState({ quality })
+  }, [setSourceState, quality])
+
   /*
    * Guarded, and its own effect, for the reason the ones above are.
    *