@banou/media-player 0.10.17 → 0.10.19

package/dist/index.js

@@ -1,14 +1,14 @@
-import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-C9vSEJYW.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-C4Gj_4zs.js";
 import { Children as s, Fragment as c, isValidElement as l, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m, useSyncExternalStore as h } from "react";
 import { css as g, keyframes as _ } from "@emotion/react";
 import { createPlayer as v, useContainerAttach as y, useMediaAttach as b } from "@videojs/react";
 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 };