@banou/media-player 0.10.18 → 0.10.20

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);
@@ -2331,6 +2351,7 @@ ${gt}
 			e = Date.now() + zt;
 		};
 	}, [M]), d(() => () => clearInterval(S.current), []), /* @__PURE__ */ E("div", {
+		className: "control-bar",
 		css: Bt,
 		style: { ...c ? {
 			opacity: "0",
@@ -2461,7 +2482,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 +2562,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,50 +2679,54 @@ ${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);
+	}), _ = p(!1), v = p(null);
 	d(() => () => clearTimeout(m.current), []), d(() => {
 		u || (clearTimeout(m.current), l(!1));
 	}, [u, l]);
-	let v = () => {
+	let y = () => {
 		u && l(!0);
-	}, y = (t) => {
-		_.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
-	}, b = () => {
+	}, b = (t) => {
+		v.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+	}, x = () => {
 		if (s.passThroughPictureInPicture?.armed) return !0;
 		if (h.current !== "mouse") return !1;
 		let { x: e, y: t } = g.current;
-		if (!_.current || e < 0) return !1;
+		if (!v.current || e < 0) return !1;
 		let n = document.elementFromPoint(e, t);
-		return !!n && _.current.contains(n) && !n.closest(".video");
-	}, x = () => {
-		if (b()) {
-			m.current = setTimeout(x, Zt);
+		return !n || !v.current.contains(n) || n.closest(".video") ? !1 : !n.closest(".control-bar") || _.current || !!v.current.querySelector(".control-bar [aria-expanded=\"true\"]");
+	}, S = () => {
+		if (x()) {
+			m.current = setTimeout(S, Zt);
 			return;
 		}
-		v();
-	}, S = () => {
-		l(!1), clearTimeout(m.current), m.current = setTimeout(x, Zt);
-	};
+		y();
+	}, C = () => {
+		l(!1), clearTimeout(m.current), m.current = setTimeout(S, Zt);
+	}, w = (e) => {
+		h.current = e.pointerType, e.pointerType === "mouse" && (g.current = {
+			x: e.clientX,
+			y: e.clientY
+		}, C());
+	}, D = (e) => {
+		h.current = e.pointerType, _.current = !0;
+	}, O = () => {
+		_.current = !1;
+	}, k = p(!0);
 	return /* @__PURE__ */ E("div", {
 		css: en,
-		ref: y,
-		onPointerMove: (e) => {
-			h.current = e.pointerType, e.pointerType === "mouse" && (g.current = {
-				x: e.clientX,
-				y: e.clientY
-			}, S());
-		},
-		onPointerDown: (e) => {
-			h.current = e.pointerType;
-		},
+		ref: b,
+		onPointerMove: w,
+		onPointerDown: D,
+		onPointerUp: O,
+		onPointerCancel: O,
 		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(m.current), v());
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(m.current), y());
 		},
 		className: c ? "hide" : "",
 		tabIndex: a === "player" ? -1 : void 0,
@@ -2718,23 +2743,27 @@ ${gt}
 			}, e)),
 			i === !1 ? null : /* @__PURE__ */ T(Vt, {
 				shortcuts: a,
-				root: _
+				root: v
 			}),
 			/* @__PURE__ */ T(Wt, {}),
 			/* @__PURE__ */ T(Xt, {}),
-			f?.armed && _.current ? /* @__PURE__ */ T("div", {
+			f?.armed && v.current ? /* @__PURE__ */ T("div", {
 				className: "pass-through",
-				style: { clipPath: $t(f.armed, _.current.getBoundingClientRect()) },
+				style: { clipPath: $t(f.armed, v.current.getBoundingClientRect()) },
 				onPointerOver: f.disarm
 			}) : null,
 			/* @__PURE__ */ E("div", {
 				className: "video",
-				onClick: () => {
+				onClick: (e) => {
 					if (h.current === "mouse") {
-						s.togglePaused();
+						if (e.detail > 1) return;
+						k.current = s.paused, s.togglePaused();
 						return;
 					}
-					c ? S() : (clearTimeout(m.current), v());
+					c ? C() : (clearTimeout(m.current), y());
+				},
+				onDoubleClick: () => {
+					h.current === "mouse" && (k.current ? s.pause() : s.play().catch(() => {}), s.toggleFullscreen());
 				},
 				children: [t ? /* @__PURE__ */ T("video", {
 					ref: t,
@@ -2780,75 +2809,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 +2962,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 +3007,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.20",
   "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

@@ -147,6 +147,8 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
   const lastPointerType = useRef<string>('mouse')
   // where the mouse last was, which is where it still is when nothing has moved
   const pointer = useRef({ x: -1, y: -1 })
+  // a mouse button held down with the mouse still is a drag on the seekbar or the volume, not yet over
+  const pressed = useRef(false)
   const root = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => () => clearTimeout(autoHide.current), [])
@@ -189,9 +191,10 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
    * and a right click offers the browser's video menu rather than the control's. That is how a link
    * drawn in an overlay stops behaving like a link, which is what this exists to stop.
    *
-   * Only what actually takes pointer events can be hit, so this needs no list of selectors: the
-   * chrome's own layers opt out, an overlay item opts out until an app opts a child back in, and the
-   * picture is excluded here because resting on the picture is exactly when hiding is right.
+   * Only what actually takes pointer events can be hit: the chrome's own layers opt out, and an
+   * overlay item opts out until an app opts a child back in. The picture and the control bar are
+   * excluded here because resting on them is exactly when hiding is right, unless a button is held
+   * on the bar or one of its menus is open, which are still in use.
    *
    * The mouse only. A finger has no resting position, and `elementFromPoint` on the last tap would
    * keep the controls up forever after one press.
@@ -205,7 +208,9 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
     const { x, y } = pointer.current
     if (!root.current || x < 0) return false
     const hit = document.elementFromPoint(x, y)
-    return !!hit && root.current.contains(hit) && !hit.closest('.video')
+    if (!hit || !root.current.contains(hit) || hit.closest('.video')) return false
+    if (hit.closest('.control-bar')) return pressed.current || !!root.current.querySelector('.control-bar [aria-expanded="true"]')
+    return true
   }
 
   const hideUnlessTheMouseIsOnAControl = () => {
@@ -233,11 +238,20 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
 
   const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
     lastPointerType.current = event.pointerType
+    pressed.current = true
   }
 
+  const onPointerUp = () => {
+    pressed.current = false
+  }
+
+  const pausedBeforeClick = useRef(true)
+
   // play/pause with a mouse, show or hide the controls with a finger, which has no other way back
-  const onVideoClick = () => {
+  const onVideoClick = (event: React.MouseEvent) => {
     if (lastPointerType.current === 'mouse') {
+      if (event.detail > 1) return
+      pausedBeforeClick.current = player.paused
       player.togglePaused()
       return
     }
@@ -248,6 +262,15 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
     }
   }
 
+  // The first click toggled playback, so it is put back rather than toggled again: a remote media
+  // reports its pause late, and a second toggle would read it as still playing and pause it twice.
+  const onVideoDoubleClick = () => {
+    if (lastPointerType.current !== 'mouse') return
+    if (pausedBeforeClick.current) player.pause()
+    else void player.play().catch(() => {})
+    void player.toggleFullscreen()
+  }
+
   // relatedTarget alone is not enough: the browser fires mouseout with a null one while the pointer
   // still sits over the video, so a null is confirmed against the pointer's own coordinates.
   const onMouseOut: React.DOMAttributes<HTMLDivElement>['onMouseOut'] = (ev) => {
@@ -266,6 +289,8 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
       ref={setRoot}
       onPointerMove={onPointerMove}
       onPointerDown={onPointerDown}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
       onMouseOut={onMouseOut}
       className={hideUI ? 'hide' : ''}
       // focusable, so a click on the picture puts the focus, and with it the shortcuts, inside the player
@@ -294,7 +319,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
           />
         )
         : null}
-      <div className="video" onClick={onVideoClick}>
+      <div className="video" onClick={onVideoClick} onDoubleClick={onVideoDoubleClick}>
         {onVideoRef ? <video ref={onVideoRef} playsInline /> : null}
         {children}
       </div>

package/src/lib/react/components/control-bar.tsx

@@ -308,6 +308,7 @@ export const ControlBar = (
     // Armed, the whole bar takes no pointer events, or the rows around the control would still catch
     // the click at its box. The chrome's layer covers everything but the control meanwhile.
     <div
+      className='control-bar'
       css={style}
       style={{ ...hideUI ? { opacity: '0', pointerEvents: 'none' } : armed ? { pointerEvents: 'none' } : {} }}
     >

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.
    *