@banou/media-player 0.10.0 → 0.10.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-YeMWShCv.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-DqyZgmTv.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 } from "react";
 import { css as h, keyframes as g } from "@emotion/react";
 import { createPlayer as _, useContainerAttach as v, useMediaAttach as y } from "@videojs/react";
@@ -9,6 +9,7 @@ import { Tooltip as z } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
 var B = {
 	indexes: [],
+	chapters: [],
 	thumbnails: [],
 	requestThumbnail: () => {},
 	subtitleTracks: [],
@@ -26,7 +27,7 @@ var B = {
 	playbackErrors: [],
 	ready: !1,
 	setSourceState: () => {}
-}, ee = b({
+}, V = b({
 	name: "source",
 	state: () => ({ ...B }),
 	attach({ set: e }) {
@@ -35,10 +36,10 @@ var B = {
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), V = _({
-	features: [...x, ee],
+}), H = _({
+	features: [...x, V],
 	displayName: "MediaPlayer"
-}), H = V.usePlayer, te = (e) => {
+}), U = H.usePlayer, W = (e) => {
 	if (!(!e || e === "und")) try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -47,60 +48,62 @@ var B = {
 	} catch {
 		return;
 	}
-}, ne = (e) => e?.replace(/_/g, " ").trim() || void 0, re = (e) => {
-	let t = e.map((e) => te(e.language) ?? ne(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
+}, G = (e) => e?.replace(/_/g, " ").trim() || void 0, ee = (e) => {
+	let t = e.map((e) => W(e.language) ?? G(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 = ne(e.title);
+		let i = t[r], a = G(e.title);
 		return {
 			track: e,
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, ie = (e) => re(e).map(({ track: e, label: t }) => ({
+}, te = (e) => ee(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), ae = [
+})), ne = [
 	0,
 	250,
 	1e3,
 	3e3,
 	1e4
-], oe = 6e4, se = 500, ce = (e) => e instanceof Error ? e.message : String(e), le = (e) => {
+], re = 6e4, ie = 500, 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) {
 			t.push(`MediaError code ${n.code}${n.message ? `: ${n.message}` : ""}`);
 			break;
 		}
-		t.push(ce(n)), n = n?.cause;
+		t.push(ae(n)), n = n?.cause;
 	}
 	return t.length ? t.join("\n") : void 0;
-}, ue = (e, t, r) => {
-	let a = H(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, seekPrepareBudgetMs: b = se } = r ?? {}, [x, S] = m(void 0), [C, w] = m(0), T = p({
+}, se = (e, t, r) => {
+	let a = U(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, chapters: b, seekPrepareBudgetMs: x = ie } = r ?? {}, S = p(b);
+	S.current = b;
+	let [C, w] = m(void 0), [T, E] = m(0), D = p({
 		count: 0,
 		at: 0
-	}), E = p(void 0);
-	d(() => (T.current = {
+	}), O = p(void 0);
+	d(() => (D.current = {
 		count: 0,
 		at: 0
 	}, a.setSourceState({ playbackErrors: [] }), () => {
-		E.current && clearTimeout(E.current);
+		O.current && clearTimeout(O.current);
 	}), [s]);
-	let D = p(null), O = p(null), k = p(!1), A = p(o);
-	A.current = o;
-	let j = p(r?.onSeek);
-	j.current = r?.onSeek;
-	let M = p(r?.onPlaybackError);
-	M.current = r?.onPlaybackError;
-	let N = u((e) => {
+	let k = p(null), A = p(null), j = p(!1), M = p(o);
+	M.current = o;
+	let N = p(r?.onSeek);
+	N.current = r?.onSeek;
+	let P = p(r?.onPlaybackError);
+	P.current = r?.onPlaybackError;
+	let F = u((e) => {
 		let t = typeof e == "number" ? e : void 0;
-		k.current = !0, a.setSourceState({ selectedSubtitleTrack: t }), D.current?.selectSubtitleStream(t);
-	}, [a]), P = u((e) => {
-		let t = D.current;
-		if (!t || b <= 0) {
+		j.current = !0, a.setSourceState({ selectedSubtitleTrack: t }), k.current?.selectSubtitleStream(t);
+	}, [a]), I = u((e) => {
+		let t = k.current;
+		if (!t || x <= 0) {
 			a.seek(e);
 			return;
 		}
@@ -112,24 +115,24 @@ var B = {
 			}
 		}, c = setTimeout(() => {
 			o = "deadline", s();
-		}, b);
+		}, x);
 		t.prepareSeek(e).catch(() => {}).finally(() => {
 			clearTimeout(c), s();
 		});
-	}, [a, b]), F = u((e) => {
-		typeof e == "number" && (a.setSourceState({ selectedAudioTrack: e }), S(e));
-	}, [a]), I = H((e) => e.setSourceState);
+	}, [a, x]), L = u((e) => {
+		typeof e == "number" && (a.setSourceState({ selectedAudioTrack: e }), w(e));
+	}, [a]), R = U((e) => e.setSourceState);
 	d(() => {
-		I({
-			selectSubtitleTrack: N,
-			selectAudioTrack: F,
-			requestSeek: P
+		R({
+			selectSubtitleTrack: F,
+			selectAudioTrack: L,
+			requestSeek: I
 		});
 	}, [
-		I,
-		N,
+		R,
 		F,
-		P
+		L,
+		I
 	]), d(() => {
 		if (!e || !t || !s || !o) return;
 		let r = !1;
@@ -138,7 +141,7 @@ var B = {
 			ready: !1
 		});
 		let u = (t, n) => {
-			let r = Date.now(), i = ce(t), o = le(t), s = a.playbackErrors, c = s[s.length - 1];
+			let r = Date.now(), i = ae(t), o = oe(t), s = a.playbackErrors, c = s[s.length - 1];
 			if (c && c.message === i && c.detail === o && c.recovered === n) {
 				let e = {
 					...c,
@@ -163,25 +166,25 @@ var B = {
 			let t = n(e);
 			if (u(e, t), t) {
 				let t = performance.now();
-				t - T.current.at > oe && (T.current = {
+				t - D.current.at > re && (D.current = {
 					count: 0,
 					at: t
 				});
-				let n = ae[Math.min(T.current.count, ae.length - 1)];
-				T.current = {
-					count: T.current.count + 1,
+				let n = ne[Math.min(D.current.count, ne.length - 1)];
+				D.current = {
+					count: D.current.count + 1,
 					at: t
-				}, console.warn(`the media element failed; rebuilding the pipeline${n ? ` in ${n}ms` : ""}`, e), E.current && clearTimeout(E.current), E.current = setTimeout(() => w((e) => e + 1), n);
+				}, console.warn(`the media element failed; rebuilding the pipeline${n ? ` in ${n}ms` : ""}`, e), O.current && clearTimeout(O.current), O.current = setTimeout(() => E((e) => e + 1), n);
 				return;
 			}
-			console.error("playback failed", e), a.setSourceState({ playbackError: e }), M.current?.(e);
+			console.error("playback failed", e), a.setSourceState({ playbackError: e }), P.current?.(e);
 		};
 		return (async () => {
 			try {
 				let n = await i({
 					videoElement: e,
 					subtitleContainer: t,
-					read: (e, t) => A.current(e, t),
+					read: (e, t) => M.current(e, t),
 					length: s,
 					publicPath: c,
 					libavWorkerUrl: l,
@@ -190,27 +193,27 @@ var B = {
 					jassubLegacyWasmUrl: g,
 					defaultFontUrl: _,
 					bufferSize: v,
-					audioStreamIndex: x,
+					audioStreamIndex: C,
 					onReady: () => {
 						if (r) return;
 						a.setSourceState({ ready: !0 });
-						let t = O.current;
-						O.current = null, t && t.size === s && t.time > 0 && (e.currentTime = t.time), y && e.play().catch(() => {});
+						let t = A.current;
+						A.current = null, t && t.size === s && t.time > 0 && (e.currentTime = t.time), y && e.play().catch(() => {});
 					},
 					onError: d,
 					onRecovered: () => {
 						r || a.setSourceState({ playbackError: null });
 					},
-					onSeek: (e) => j.current?.(e),
+					onSeek: (e) => N.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || a.setSourceState({
-							subtitleTracks: ie(e),
-							...k.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
+							subtitleTracks: te(e),
+							...j.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || a.setSourceState({
-							audioTracks: ie(e),
+							audioTracks: te(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -219,17 +222,20 @@ var B = {
 					n.destroy();
 					return;
 				}
-				D.current = n, a.setSourceState({ indexes: n.indexes });
+				k.current = n, a.setSourceState({
+					indexes: n.indexes,
+					chapters: S.current ?? n.chapters
+				});
 				let o = a.selectedSubtitleTrack;
 				typeof o == "number" && n.selectSubtitleStream(o);
 			} catch (e) {
 				d(e);
 			}
 		})(), () => {
-			r = !0, O.current = {
+			r = !0, A.current = {
 				time: e.currentTime,
 				size: s
-			}, D.current?.destroy(), D.current = null, a.setSourceState({ ready: !1 });
+			}, k.current?.destroy(), k.current = null, a.setSourceState({ ready: !1 });
 		};
 	}, [
 		a,
@@ -243,17 +249,17 @@ var B = {
 		g,
 		_,
 		v,
-		x,
+		C,
 		y,
-		C
+		T
 	]);
-}, de = 5e3, fe = 6e4, pe = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
+}, ce = 5e3, le = 6e4, ue = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
 	let [o, s] = m([]), c = p(null), l = p(i);
 	l.current = i;
 	let h = f(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), g = p(h);
 	return g.current = h, d(() => {
 		if (!n || !i || !e || !t) return;
-		let a = !1, o = null, u, d = de, f = () => {
+		let a = !1, o = null, u, d = ce, f = () => {
 			r({
 				publicPath: e,
 				workerUrl: t,
@@ -269,7 +275,7 @@ var B = {
 				}
 				o = e, c.current = e, e.update(g.current);
 			}, () => {
-				a || (u = setTimeout(f, d), d = Math.min(d * 2, fe));
+				a || (u = setTimeout(f, d), d = Math.min(d * 2, le));
 			});
 		};
 		return f(), () => {
@@ -287,7 +293,7 @@ var B = {
 			c.current?.prioritize(e);
 		}, [])
 	};
-}, me = (e, n) => {
+}, de = (e, n) => {
 	let r = p(null), [i, o] = m(!1), [s] = m(() => t());
 	d(() => {
 		if (!e || !n || !s) return;
@@ -315,7 +321,7 @@ var B = {
 		mode: s,
 		burnedIn: i
 	};
-}, U = {
+}, K = {
 	headings: {
 		large: "\n      font-weight: 600;\n      font-size: calc(2.8 * var(--mp-unit));\n      line-height: calc(3.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(3.4 * var(--mp-unit));\n        line-height: calc(4.1 * var(--mp-unit));\n      }\n    ",
 		medium: "\n      font-weight: 600;\n      font-size: calc(2.4 * var(--mp-unit));\n      line-height: calc(2.9 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(2.8 * var(--mp-unit));\n        line-height: calc(3.4 * var(--mp-unit));\n      }\n    ",
@@ -342,7 +348,7 @@ var B = {
 		medium: "\n      font-weight: 500;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    ",
 		regular: "\n      font-weight: 400;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    "
 	}
-}, he = h`
+}, fe = h`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -355,7 +361,7 @@ var B = {
     margin: auto;
     pointer-events: none;
   }
-`, ge = h`
+`, pe = h`
   position: absolute;
   top: 0;
   left: 0;
@@ -363,7 +369,7 @@ var B = {
   padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
   /* clears a notch once the player is fullscreen; resolves to zero everywhere else */
   padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-  ${U.headings.small}
+  ${K.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -384,7 +390,7 @@ var B = {
 
   background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
   transition: opacity 0.1s cubic-bezier(.4,0,1,1);
-`, _e = h`
+`, me = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -404,44 +410,44 @@ var B = {
   to { transform: rotate(360deg); }
 `} 0.8s linear infinite;
   }
-`, ve = h`
+`, he = h`
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${U.bLarge.regular}
+  ${K.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, ye = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", be = ({ onSubtitleRef: e }) => {
-	let t = H((e) => e.title), n = H((e) => e.hideUI), r = H((e) => e.playbackError), i = H((e) => e.ready), a = H((e) => e.size), o = H((e) => e.waiting);
+`, ge = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", _e = ({ onSubtitleRef: e }) => {
+	let t = U((e) => e.title), n = U((e) => e.hideUI), r = U((e) => e.playbackError), i = U((e) => e.ready), a = U((e) => e.size), o = U((e) => e.waiting);
 	return /* @__PURE__ */ w(S, { children: [
 		t ? /* @__PURE__ */ C("div", {
 			className: "title",
-			css: ge,
+			css: pe,
 			style: { ...n ? {
 				opacity: "0",
 				pointerEvents: "none"
 			} : {} },
 			children: t
 		}) : void 0,
-		(a ? !i : o) && !r ? /* @__PURE__ */ C("div", { css: _e }) : void 0,
+		(a ? !i : o) && !r ? /* @__PURE__ */ C("div", { css: me }) : void 0,
 		r ? /* @__PURE__ */ C("div", {
-			css: ve,
-			children: ye(r)
+			css: he,
+			children: ge(r)
 		}) : void 0,
 		/* @__PURE__ */ C("div", {
 			className: "subtitles",
 			ref: e,
-			css: he
+			css: fe
 		})
 	] });
-}, xe = 1e-4, W = 1, Se = (e) => Math.max(xe, Math.min(W, e)) ** 2, G = (e) => Math.max(xe, Math.min(W, e)) ** (W / 2), K = (e) => {
+}, ve = 1e-4, q = 1, ye = (e) => Math.max(ve, Math.min(q, e)) ** 2, J = (e) => Math.max(ve, Math.min(q, e)) ** (q / 2), Y = (e) => {
 	if (e === void 0) return "0:00";
 	let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
 	return t > 0 ? `${t}:${n < 10 ? "0" : ""}${n}:${r < 10 ? "0" : ""}${r}` : `${n}:${r < 10 ? "0" : ""}${r}`;
-}, Ce = (e, t) => `${K(e)} / ${K(t)}`, we = (e) => h`
+}, be = (e, t) => `${Y(e)} / ${Y(t)}`, xe = (e) => h`
   display: flex;
   justify-content: flex-start;
 
@@ -473,7 +479,7 @@ var B = {
   z-index: 3;
 
   * {
-    ${U.bMedium.regular}
+    ${K.bMedium.regular}
   }
 
   ${e === "sm" && h`
@@ -485,25 +491,25 @@ var B = {
   ${e === "lg" && h`
     padding: calc(1.2 * var(--mp-unit))!important;
   `}
-`, q = {
+`, X = {
 	x: -1,
 	y: -1,
 	anchors: 0
-}, Te = (e) => {
-	q.x = e.clientX, q.y = e.clientY;
-}, Ee = () => (q.anchors++ === 0 && window.addEventListener("pointermove", Te, {
+}, Se = (e) => {
+	X.x = e.clientX, X.y = e.clientY;
+}, Ce = () => (X.anchors++ === 0 && window.addEventListener("pointermove", Se, {
 	capture: !0,
 	passive: !0
 }), () => {
-	--q.anchors === 0 && window.removeEventListener("pointermove", Te, { capture: !0 });
-}), J = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => {
+	--X.anchors === 0 && window.removeEventListener("pointermove", Se, { capture: !0 });
+}), Z = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => {
 	let l = p(null), u = p(null);
 	return d(() => {
-		let e = Ee(), t = () => {
+		let e = Ce(), t = () => {
 			let e = l.current;
 			if (!e) return;
 			let { left: t, right: n, top: r, bottom: i } = e.getBoundingClientRect();
-			q.x >= t && q.x < n && q.y >= r && q.y < i || u.current?.close();
+			X.x >= t && X.x < n && X.y >= r && X.y < i || u.current?.close();
 		}, n = ["fullscreenchange", "webkitfullscreenchange"];
 		for (let e of n) document.addEventListener(e, t);
 		return () => {
@@ -521,12 +527,12 @@ var B = {
 		children: n
 	}), !s && /* @__PURE__ */ C(z, {
 		ref: u,
-		css: we(c),
+		css: xe(c),
 		id: e,
 		noArrow: !0,
 		children: t
 	})] });
-}, Y = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+}, we = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
 	let [i, a] = m(!1), o = p(t);
 	o.current = t;
 	let s = p(null), c = u((t, r) => {
@@ -565,7 +571,118 @@ var B = {
 			style: { touchAction: "none" }
 		}
 	};
-}, De = h`
+}, Te = 2, Ee = .005, De = "#000", Oe = "#0000", ke = (e, t) => {
+	if (!t) return [];
+	let n = /* @__PURE__ */ new Set();
+	for (let { start: r, end: i } of e) for (let e of [r, i]) {
+		let r = e / t;
+		r <= Ee || r >= 1 - Ee || n.add(Number((r * 100).toFixed(4)));
+	}
+	return n.size ? [
+		0,
+		...[...n].sort((e, t) => e - t),
+		100
+	] : [];
+}, Ae = (e, t) => {
+	let n = Te / 2, r = e.length - 2, i = [];
+	for (let a = 0; a <= r; a += 1) {
+		let o = e[a], s = e[a + 1], c = a === 0 ? "0%" : `calc(${o}% + ${n}px)`, l = a === r ? "100%" : `calc(${s}% - ${n}px)`;
+		i.push(`${t(a) ? De : Oe} ${c} ${l}`), a !== r && i.push(`${Oe} calc(${s}% - ${n}px) calc(${s}% + ${n}px)`);
+	}
+	return `linear-gradient(90deg, ${i.join(", ")})`;
+}, je = /* @__PURE__ */ new Set([
+	"op",
+	"ops",
+	"opening",
+	"openings",
+	"ncop",
+	"オープニング",
+	"op主題歌"
+]), Me = /* @__PURE__ */ new Set([
+	"ed",
+	"eds",
+	"ending",
+	"endings",
+	"nced",
+	"credits",
+	"endcard",
+	"endroll",
+	"エンディング",
+	"エンドカード",
+	"エンドロール",
+	"ed主題歌"
+]), Ne = /* @__PURE__ */ new Set(["intro", "イントロ"]), Pe = /* @__PURE__ */ new Set(["outro", "アウトロ"]), Fe = {
+	"credits start": "ending",
+	"credits end": null,
+	"preview end": null,
+	"end credits": "ending",
+	"closing credits": "ending"
+}, Ie = /* @__PURE__ */ new Set([
+	"theme",
+	"themes",
+	"song",
+	"sequence",
+	"nc",
+	"non",
+	"credit",
+	"creditless",
+	"textless",
+	"clean",
+	"tv",
+	"size",
+	"version",
+	"ver",
+	"full",
+	"the",
+	"主題歌",
+	"ノンクレジット"
+]), Le = /* @__PURE__ */ new Set([
+	"post",
+	"pre",
+	"after",
+	"before",
+	"non"
+]), Re = /[-:|~/\\[\]()「」『』【】,.!?"'’]|\s+by\s+/u, ze = (e) => /^chapter\s*\d+$/i.test(e.trim()) || /^\d{1,2}:\d{2}:\d{2}([.,]\d+)?$/.test(e.trim()), Be = (e) => e.replace(/([a-z぀-ヿ一-鿿])\s*\d+\s*$/u, "$1").split(/[\s_]+/u).map((e) => e.replace(/^[^\w぀-ヿ一-鿿]+|[^\w぀-ヿ一-鿿]+$/gu, "")).filter((e) => e && !/^\d+$/.test(e) && !Ie.has(e)), Ve = (e, t) => {
+	if (je.has(e)) return "opening";
+	if (Me.has(e)) return "ending";
+	if (t) {
+		if (Ne.has(e)) return "opening";
+		if (Pe.has(e)) return "ending";
+	}
+}, He = (e, t) => {
+	if (ze(e)) return;
+	let n = e.trim().toLowerCase().replace(/\s+/gu, " ");
+	if (n in Fe) return Fe[n] ?? void 0;
+	let r = n.split(Re).map((e) => e.trim()).filter(Boolean);
+	if (r.some((e) => e.split(/[\s_]+/u).some((e) => Le.has(e)))) return;
+	let i = r.length > 1 ? [r[0], r.at(-1)] : r;
+	for (let e of i) {
+		let n = Be(e);
+		if (n.length !== 1) continue;
+		let r = Ve(n[0], t);
+		if (r) return r;
+	}
+}, Ue = 15, We = 87, Ge = 93, Ke = (e) => {
+	let t = e.map(() => void 0), n = e.at(-1)?.end ?? 0;
+	if (!n) return t;
+	let r = e.map((e, t) => ({
+		index: t,
+		start: e.start,
+		length: e.end - e.start
+	})).filter(({ length: e }) => e >= We && e <= Ge), i = n / 2, a = r.filter(({ start: e }) => e < i), o = r.filter(({ start: e }) => e >= i);
+	return a.length === 1 && (t[a[0].index] = "opening"), o.length === 1 && (t[o[0].index] = "ending"), t;
+}, qe = (e) => {
+	let t = e.map(({ title: e }) => He(e, !1)), n = e.reduce((e, n, r) => e + (t[r] ? n.end - n.start : 0), 0), r = e.reduce((e, t) => e + (t.end - t.start), 0);
+	if (r > 0 && n * 2 > r) return e.map(() => void 0);
+	let i = e.map((e, n) => {
+		if (e.end - e.start < Ue) return;
+		let r = t[n];
+		if (r) return r;
+		let i = He(e.title, !0);
+		return i && !t.includes(i) ? i : void 0;
+	});
+	return i.some(Boolean) ? i : Ke(e);
+}, Je = h`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -598,6 +715,37 @@ var B = {
     }
   }
 
+  /*
+   * One copy of the track per mask, stacked.
+   *
+   * The rest track paints every segment except the one under the pointer, the focus track paints only that one and
+   * is the only element that grows. Both are full bar width, which is what keeps every percentage
+   * and every scaleX inside them meaning exactly what it meant before chapters existed: the gaps are
+   * cut by a mask, not by resizing anything.
+   *
+   * The mask sits HERE and never on .loaded-part or .play. Those two carry a scaleX, and a mask
+   * travels with its element's transform, so a gap drawn on them would slide with the fill.
+   */
+  .track {
+    position: absolute;
+    inset: 0;
+    /* never a hit target: .padding is the only one, and a second would break the drag gesture and
+       fire a bubbling mouseout at every boundary crossing */
+    pointer-events: none;
+  }
+
+  /*
+   * The segment under the pointer, on TOP of the growth the whole bar already got.
+   *
+   * Measured off YouTube's live player, hovering one chapter of five: every other segment goes 4px
+   * to 6px, and the one under the pointer goes to 10px. Both grow about the bar's centre line, so
+   * the emphasised segment bulges above and below its neighbours rather than sitting on them. 6 x
+   * 1.667 is 10, and the 1.5 the layers inside already carry gets this track from 4 to exactly that.
+   */
+  .track.focus {
+    transform: scaleY(1.667);
+  }
+
 
   .background-bar {
     position: absolute;
@@ -619,7 +767,24 @@ var B = {
     box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${U.bMedium.bold}
+    ${K.bMedium.bold}
+
+    gap: calc(.6 * var(--mp-unit));
+
+    /*
+     * The chapter under the pointer, next to the time, which is where the reference puts it.
+     *
+     * It is the one part of this pill whose width the player does not control, so it is capped and
+     * ellipsised rather than allowed to push the box outside the picture. The cap and the clamp that
+     * positions the pill are set together on the element, since a centred box can only be kept
+     * inside the bar if the clamp knows its half width.
+     */
+    .chapter-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+      font-weight: normal;
+    }
 
     position: absolute;
     /* Anchored on its bottom edge rather than its top: now that it has a background its height
@@ -736,38 +901,38 @@ var B = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, Oe = 4, ke = () => {
-	let e = H(), t = H((e) => e.currentTime), n = H((e) => e.requestSeek), r = H((e) => e.duration), i = H((e) => e.size), a = H((e) => e.downloadedRanges), o = H((e) => e.indexes), s = H((e) => e.thumbnails), c = H((e) => e.thumbnailAt), l = H((e) => e.requestThumbnail), u = p(null), [h, g] = m(void 0), [_, v] = m(void 0), y = (e) => {
-		v(e), l(e);
-	}, b = p(void 0), x = p(0), S = p(void 0), T = p(void 0), E = p(!1), { dragging: D, handlers: O } = Y({
-		ref: u,
+`, Ye = 4, Xe = () => {
+	let e = U(), t = U((e) => e.currentTime), n = U((e) => e.requestSeek), r = U((e) => e.duration), i = U((e) => e.size), a = U((e) => e.downloadedRanges), o = U((e) => e.indexes), s = U((e) => e.thumbnails), c = U((e) => e.thumbnailAt), l = U((e) => e.requestThumbnail), u = U((e) => e.chapters), h = p(null), [g, _] = m(void 0), [v, y] = m(void 0), b = (e) => {
+		y(e), l(e);
+	}, x = p(void 0), S = p(0), T = p(void 0), E = p(void 0), D = p(!1), { dragging: O, handlers: k } = we({
+		ref: h,
 		onChange: (e) => {
-			if (x.current += 1, S.current = e, T.current === void 0) T.current = e;
-			else if (!E.current) {
-				let t = u.current?.getBoundingClientRect().width ?? 0;
-				Math.abs(e - T.current) * t > Oe && (E.current = !0);
+			if (S.current += 1, T.current = e, E.current === void 0) E.current = e;
+			else if (!D.current) {
+				let t = h.current?.getBoundingClientRect().width ?? 0;
+				Math.abs(e - E.current) * t > Ye && (D.current = !0);
 			}
-			g(e), b.current !== "mouse" && y(e * r);
+			_(e), x.current !== "mouse" && b(e * r);
 		}
-	}), k = (e) => {
-		b.current = e.pointerType, x.current = 0, T.current = void 0, E.current = !1, O.onPointerDown(e);
-	}, A = (t) => {
-		O.onPointerUp(t);
-		let i = x.current > 0 ? S.current : void 0;
+	}), A = (e) => {
+		x.current = e.pointerType, S.current = 0, E.current = void 0, D.current = !1, k.onPointerDown(e);
+	}, j = (t) => {
+		k.onPointerUp(t);
+		let i = S.current > 0 ? T.current : void 0;
 		if (i !== void 0 && r) {
 			let t = i * r;
 			n ? n(t) : e.seek(t);
 		}
-		x.current = 0, E.current = !1, T.current = void 0, t.pointerType !== "mouse" && y(void 0);
-	}, j = (e) => {
-		if (!u.current) return;
-		let { left: t, right: n } = u.current.getBoundingClientRect();
-		return Math.min(Math.max((e - t) / (n - t), 0), 1) * r;
+		S.current = 0, D.current = !1, E.current = void 0, t.pointerType !== "mouse" && b(void 0);
 	}, M = (e) => {
-		y(j(e.clientX));
-	}, N = () => {
-		u.current && y(void 0);
-	}, P = (e) => r ? e / r * 100 : 0, F = f(() => a?.map((e, t) => {
+		if (!h.current) return;
+		let { left: t, right: n } = h.current.getBoundingClientRect();
+		return Math.min(Math.max((e - t) / (n - t), 0), 1) * r;
+	}, N = (e) => {
+		b(M(e.clientX));
+	}, P = () => {
+		h.current && b(void 0);
+	}, F = (e) => r ? e / r * 100 : 0, I = f(() => a?.map((e, t) => {
 		if (!i || !r) return null;
 		let n = o.filter((t) => e.startByteOffset <= t.pos && t.pos <= e.endByteOffset), a = n.at(0), s = n.at(-1);
 		if (!a || !s) return null;
@@ -783,72 +948,102 @@ var B = {
 		r,
 		o.length,
 		a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
-	]), I = f(() => {
-		if (!_ || _ < 0) return;
-		let e = Math.floor(_ / 3600), t = Math.floor((_ - e * 3600) / 60), n = Math.floor(_ - e * 3600 - t * 60);
-		return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
-	}, [_]);
+	]);
 	d(() => {
-		h === void 0 || !r || !D || !E.current || e.seek(h * r);
+		g === void 0 || !r || !O || !D.current || e.seek(g * r);
 	}, [
 		e,
-		D,
-		h,
+		O,
+		g,
 		r
 	]);
-	let L = f(() => !r || typeof t != "number" ? 0 : t / r, [r, t]), R = f(() => {
-		if (_) {
-			if (c) return c(_);
-			if (s.length) return s.find(({ startTime: e, endTime: t }) => e <= _ && _ < t);
+	let L = f(() => !r || typeof t != "number" ? 0 : t / r, [r, t]), R = f(() => ke(u, r), [u, r]), z = R.length > 0, B = f(() => {
+		if (!z || v === void 0 || !r) return -1;
+		let e = v / r * 100, t = R.findIndex((t, n) => n < R.length - 1 && e >= t && e < R[n + 1]);
+		return t >= 0 ? t : R.length - 2;
+	}, [
+		z,
+		R,
+		v,
+		r
+	]), V = f(() => z ? Ae(R, (e) => e !== B) : void 0, [
+		z,
+		R,
+		B
+	]), H = f(() => B >= 0 ? Ae(R, (e) => e === B) : void 0, [R, B]), W = f(() => {
+		if (v !== void 0) return u.find(({ start: e, end: t }) => e <= v && v < t);
+	}, [u, v]), G = f(() => {
+		if (v) {
+			if (c) return c(v);
+			if (s.length) return s.find(({ startTime: e, endTime: t }) => e <= v && v < t);
 		}
 	}, [
 		s,
 		c,
-		_
-	]);
-	return /* @__PURE__ */ w("div", {
-		css: De,
-		ref: u,
-		className: D ? "progress-bar dragging" : "progress-bar",
-		onMouseMove: M,
-		onMouseOut: N,
+		v
+	]), ee = (e, t) => /* @__PURE__ */ w("div", {
+		className: e ? `track ${e}` : "track",
+		style: t ? { maskImage: t } : void 0,
 		children: [
 			/* @__PURE__ */ C("div", { className: "background-bar" }),
-			_ ? /* @__PURE__ */ C("div", {
-				className: "cursor-time",
-				style: { left: `clamp(calc(3 * var(--mp-unit)), ${P(_)}%, calc(100% - calc(3 * var(--mp-unit))))` },
-				children: I
-			}) : void 0,
-			/* @__PURE__ */ C("div", { className: "progress" }),
 			/* @__PURE__ */ C("div", {
 				className: "loaded",
-				children: F
+				children: I
 			}),
-			/* @__PURE__ */ C("div", { className: "hover" }),
 			/* @__PURE__ */ C("div", {
 				className: "play-container",
 				children: /* @__PURE__ */ C("div", {
 					className: "play",
 					style: { transform: `scaleX(${L})` }
 				})
-			}),
-			/* @__PURE__ */ C("div", { className: "chapters" }),
+			})
+		]
+	});
+	return /* @__PURE__ */ w("div", {
+		css: Je,
+		ref: h,
+		className: [
+			"progress-bar",
+			O ? "dragging" : "",
+			z ? "segmented" : ""
+		].filter(Boolean).join(" "),
+		onMouseMove: N,
+		onMouseOut: P,
+		children: [
+			ee(void 0, V),
+			v ? /* @__PURE__ */ w("div", {
+				className: "cursor-time",
+				style: {
+					left: W ? `clamp(var(--thumbnail-half), ${F(v)}%, calc(100% - var(--thumbnail-half)))` : `clamp(calc(3 * var(--mp-unit)), ${F(v)}%, calc(100% - calc(3 * var(--mp-unit))))`,
+					maxWidth: W ? "var(--thumbnail-width)" : void 0
+				},
+				children: [/* @__PURE__ */ C("span", {
+					className: "cursor-time-value",
+					children: Y(v)
+				}), W ? /* @__PURE__ */ C("span", {
+					className: "chapter-title",
+					children: W.title
+				}) : void 0]
+			}) : void 0,
+			/* @__PURE__ */ C("div", { className: "progress" }),
+			/* @__PURE__ */ C("div", { className: "hover" }),
+			H ? ee("focus", H) : void 0,
 			/* @__PURE__ */ C("div", { className: "scrubber" }),
 			/* @__PURE__ */ C("div", {
 				className: "padding",
-				...O,
-				onPointerDown: k,
-				onPointerUp: A,
-				onPointerCancel: A
+				...k,
+				onPointerDown: A,
+				onPointerUp: j,
+				onPointerCancel: j
 			}),
 			/* @__PURE__ */ C("div", {
 				className: "thumbnail",
-				style: { left: `clamp(var(--thumbnail-half), ${P(_ ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
-				children: R?.url ? /* @__PURE__ */ C("img", { src: R.url }) : void 0
+				style: { left: `clamp(var(--thumbnail-half), ${F(v ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
+				children: G?.url ? /* @__PURE__ */ C("img", { src: G.url }) : void 0
 			})
 		]
 	});
-}, Ae = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", X = {
+}, Ze = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", Q = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -858,8 +1053,8 @@ var B = {
 	strokeWidth: 2,
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, je = (e) => /* @__PURE__ */ w("svg", {
-	...X,
+}, Qe = (e) => /* @__PURE__ */ w("svg", {
+	...Q,
 	...e,
 	children: [/* @__PURE__ */ C("rect", {
 		x: "3",
@@ -869,8 +1064,8 @@ var B = {
 		rx: "2",
 		ry: "2"
 	}), /* @__PURE__ */ C("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" })]
-}), Me = (e) => /* @__PURE__ */ w("svg", {
-	...X,
+}), $e = (e) => /* @__PURE__ */ w("svg", {
+	...Q,
 	...e,
 	children: [
 		/* @__PURE__ */ C("rect", {
@@ -889,8 +1084,8 @@ var B = {
 			y2: "22"
 		})
 	]
-}), Ne = (e) => /* @__PURE__ */ w("svg", {
-	...X,
+}), et = (e) => /* @__PURE__ */ w("svg", {
+	...Q,
 	...e,
 	children: [
 		/* @__PURE__ */ C("path", { d: "M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5" }),
@@ -904,8 +1099,8 @@ var B = {
 		}),
 		/* @__PURE__ */ C("path", { d: "M14.5 18.5h2m2 0h1" })
 	]
-}), Pe = (e) => /* @__PURE__ */ w("svg", {
-	...X,
+}), tt = (e) => /* @__PURE__ */ w("svg", {
+	...Q,
 	...e,
 	children: [
 		/* @__PURE__ */ C("path", { d: "M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5" }),
@@ -919,7 +1114,7 @@ var B = {
 		}),
 		/* @__PURE__ */ C("path", { d: "M6 9h3m2 0h2" })
 	]
-}), Z = h`
+}), nt = h`
 .popover {
   position: absolute;
   /* Anchored to the PLAYER's right edge, never to the gear. The gear is not the last control in the
@@ -958,7 +1153,7 @@ var B = {
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${U.bMedium.regular}
+  ${K.bMedium.regular}
 
   z-index: 4;
 
@@ -1001,7 +1196,7 @@ var B = {
 
       .secondary {
         color: #eee;
-        ${U.bSmall.regular}
+        ${K.bSmall.regular}
       }
     }
   }
@@ -1043,10 +1238,10 @@ var B = {
   .failed {
     border-bottom: 1px solid #4D4D4E;
     color: #f66;
-    ${U.bSmall.regular}
+    ${K.bSmall.regular}
   }
 }
-`, Fe = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
+`, rt = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
 	let c = o !== void 0, l = (e, i, a) => {
 		let s = c && o === e, l = c || t.find((t) => t.id === e)?.disabled;
 		return /* @__PURE__ */ w("div", {
@@ -1073,7 +1268,7 @@ var B = {
 			t.map(({ id: e, label: t }) => l(e, t, "description"))
 		]
 	});
-}, Ie = ({ onReset: e } = {}) => {
+}, it = ({ onReset: e } = {}) => {
 	let t = p(null), [n, r] = m(!1), [i, a] = m(void 0), [o, s] = m(!1), c = p(e);
 	c.current = e;
 	let l = () => {
@@ -1114,7 +1309,7 @@ var B = {
 			});
 		}
 	};
-}, Le = h`
+}, at = h`
 /* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
    which is the width of the player box, so it can be clamped to it. */
 position: static;
@@ -1130,7 +1325,7 @@ position: static;
   }
 }
 
-${Z}
+${nt}
 
 .popover.error-list {
   /* Wider than a track menu and taller, because these rows are sentences rather than labels, and a
@@ -1158,7 +1353,7 @@ ${Z}
 
     color: #fff;
     cursor: pointer;
-    ${U.bSmall.regular}
+    ${K.bSmall.regular}
 
     &:hover {
       background-color: rgba(255,255,255,.1);
@@ -1179,7 +1374,7 @@ ${Z}
 
     .when {
       color: #bbb;
-      ${U.bSmall.regular}
+      ${K.bSmall.regular}
 
       /* the one part of the line worth scanning for, so it is the one part at full brightness */
       .count {
@@ -1198,29 +1393,29 @@ ${Z}
       color: #ddd;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
-      ${U.bSmall.regular}
+      ${K.bSmall.regular}
     }
   }
 }
-`, Re = (e) => new Date(e).toLocaleTimeString(), Q = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : K(Math.max(0, e)), ze = (e) => e.reduce((e, t) => e + t.count, 0), Be = (e) => e.map((e, t) => {
-	let n = Q(e.atMediaTime), r = e.count > 1 ? `${new Date(e.at).toISOString()} to ${new Date(e.lastAt).toISOString()} ×${e.count}` : new Date(e.at).toISOString();
+`, ot = (e) => new Date(e).toLocaleTimeString(), st = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : Y(Math.max(0, e)), ct = (e) => e.reduce((e, t) => e + t.count, 0), lt = (e) => e.map((e, t) => {
+	let n = st(e.atMediaTime), r = e.count > 1 ? `${new Date(e.at).toISOString()} to ${new Date(e.lastAt).toISOString()} ×${e.count}` : new Date(e.at).toISOString();
 	return [
 		`${t + 1}. ${r}${n ? ` (at ${n})` : ""}${e.recovered ? " [recovered]" : ""}`,
 		e.message,
 		e.detail
 	].filter(Boolean).join("\n");
-}).join("\n\n"), Ve = () => {
-	let e = H((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = Ie(), [i, a] = m(!1);
+}).join("\n\n"), ut = () => {
+	let e = U((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = it(), [i, a] = m(!1);
 	if (e.length === 0) return null;
 	let o = () => {
-		navigator.clipboard?.writeText(Be(e)).then(() => {
+		navigator.clipboard?.writeText(lt(e)).then(() => {
 			a(!0), setTimeout(() => a(!1), 2e3);
 		}, (e) => console.warn("[media-player] could not copy the errors:", e));
-	}, s = `Playback errors (${ze(e)})`;
+	}, s = `Playback errors (${ct(e)})`;
 	return /* @__PURE__ */ w("div", {
-		css: Le,
+		css: at,
 		ref: r,
-		children: [/* @__PURE__ */ C(J, {
+		children: [/* @__PURE__ */ C(Z, {
 			id: "errors",
 			disabled: t,
 			text: /* @__PURE__ */ C("button", {
@@ -1249,9 +1444,9 @@ ${Z}
 					/* @__PURE__ */ w("span", {
 						className: "when",
 						children: [
-							Re(e.at),
-							e.count > 1 ? ` to ${Re(e.lastAt)}` : "",
-							Q(e.atMediaTime) ? ` at ${Q(e.atMediaTime)}` : "",
+							ot(e.at),
+							e.count > 1 ? ` to ${ot(e.lastAt)}` : "",
+							st(e.atMediaTime) ? ` at ${st(e.atMediaTime)}` : "",
 							e.recovered ? " recovered" : "",
 							e.count > 1 ? /* @__PURE__ */ C("span", {
 								className: "count",
@@ -1271,7 +1466,7 @@ ${Z}
 			}, `${e.at}-${t}`))]
 		})]
 	});
-}, He = h`
+}, dt = h`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -1324,8 +1519,8 @@ width: 100%;
     }
   }
 }
-`, Ue = () => {
-	let e = H(), t = H((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = Y({
+`, ft = () => {
+	let e = U(), t = U((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = we({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(l(t))
 	}), f = (t) => {
@@ -1341,7 +1536,7 @@ width: 100%;
 	}, [t]);
 	let m = c(s);
 	return /* @__PURE__ */ w("div", {
-		css: He,
+		css: dt,
 		children: [/* @__PURE__ */ w("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ C("div", {
 			className: "playback-slider",
 			ref: n,
@@ -1359,7 +1554,7 @@ width: 100%;
 			})
 		})]
 	});
-}, We = h`
+}, pt = h`
 /* Deliberately NOT a containing block. The menu anchors to the control bar instead, which is exactly
    as wide as the player box and can therefore be clamped to it. The outside-click check uses
    \`contains\` on the ref, which is DOM containment and needs no position, and the bar's other
@@ -1377,7 +1572,7 @@ position: static;
   }
 }
 
-${Z}
+${nt}
 
 .playback-rate {
   .slider {
@@ -1418,8 +1613,8 @@ ${Z}
   }
 }
 
-`, Ge = () => {
-	let e = H(), t = H((e) => e.playbackRate), n = H((e) => e.audioTracks), r = H((e) => e.selectedAudioTrack), i = H((e) => e.selectAudioTrack), [a, o] = m(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } = Ie({ onReset: () => o(0) }), p = (t) => {
+`, mt = () => {
+	let e = U(), t = U((e) => e.playbackRate), n = U((e) => e.audioTracks), r = U((e) => e.selectedAudioTrack), i = U((e) => e.selectAudioTrack), [a, o] = m(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } = it({ onReset: () => o(0) }), p = (t) => {
 		e.setPlaybackRate(t), o(0);
 	}, h = (e) => {
 		e !== void 0 && f(e, () => i(e));
@@ -1427,10 +1622,10 @@ ${Z}
 		o(e);
 	};
 	return /* @__PURE__ */ w("div", {
-		css: We,
+		css: pt,
 		ref: l,
 		children: [
-			/* @__PURE__ */ C(J, {
+			/* @__PURE__ */ C(Z, {
 				id: "settings",
 				disabled: s,
 				text: /* @__PURE__ */ C("button", {
@@ -1466,7 +1661,7 @@ ${Z}
 					}),
 					/* @__PURE__ */ C("div", {
 						className: "slider no-hover",
-						children: /* @__PURE__ */ C(Ue, {})
+						children: /* @__PURE__ */ C(ft, {})
 					}),
 					/* @__PURE__ */ w("div", {
 						className: "options no-hover",
@@ -1491,7 +1686,7 @@ ${Z}
 					})
 				]
 			}),
-			s && a === 2 && /* @__PURE__ */ C(Fe, {
+			s && a === 2 && /* @__PURE__ */ C(rt, {
 				title: "Audio",
 				tracks: n,
 				selected: r,
@@ -1502,7 +1697,7 @@ ${Z}
 			})
 		]
 	});
-}, Ke = h`
+}, ht = h`
 /* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
    which is the width of the player box, so it can be clamped to it. */
 position: static;
@@ -1518,15 +1713,15 @@ position: static;
   }
 }
 
-${Z}
-`, qe = () => {
-	let e = H((e) => e.subtitleTracks), t = H((e) => e.selectedSubtitleTrack), n = H((e) => e.selectSubtitleTrack), r = H((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Ie();
+${nt}
+`, gt = () => {
+	let e = U((e) => e.subtitleTracks), t = U((e) => e.selectedSubtitleTrack), n = U((e) => e.selectSubtitleTrack), r = U((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = it();
 	if (e.length === 0) return null;
 	let u = t !== void 0;
 	return /* @__PURE__ */ w("div", {
-		css: Ke,
+		css: ht,
 		ref: o,
-		children: [/* @__PURE__ */ C(J, {
+		children: [/* @__PURE__ */ C(Z, {
 			id: "subtitles",
 			disabled: i,
 			text: /* @__PURE__ */ C("button", {
@@ -1536,10 +1731,10 @@ ${Z}
 				"aria-label": "Subtitles",
 				"aria-expanded": i,
 				"aria-pressed": u,
-				children: u ? /* @__PURE__ */ C(je, { className: "captions" }) : /* @__PURE__ */ C(Me, { className: "captions-off" })
+				children: u ? /* @__PURE__ */ C(Qe, { className: "captions" }) : /* @__PURE__ */ C($e, { className: "captions-off" })
 			}),
 			toolTipText: /* @__PURE__ */ C("span", { children: "Subtitles" })
-		}), i && /* @__PURE__ */ C(Fe, {
+		}), i && /* @__PURE__ */ C(rt, {
 			title: "Subtitles",
 			tracks: e,
 			selected: t,
@@ -1549,13 +1744,13 @@ ${Z}
 			failed: c
 		})]
 	});
-}, Je = {
+}, _t = {
 	primary: "#EAEBEE",
 	secondary: "#D0D0D9",
 	hover: "rgba(255, 255, 255, 0.13)",
 	borderPrimary: "#384F70",
 	backgroundTooltip: "#222222"
-}, Ye = h`
+}, vt = h`
   display: flex;
   align-items: center;
 
@@ -1598,8 +1793,8 @@ ${Z}
     width: 10px;
     height: 10px;
   }
-`, Xe = ({ value: e, onChange: t }) => {
-	let n = H((e) => e.volume), r = H((e) => e.muted), i = p(null), a = p(null), { handlers: o } = Y({
+`, yt = ({ value: e, onChange: t }) => {
+	let n = U((e) => e.volume), r = U((e) => e.muted), i = p(null), a = p(null), { handlers: o } = we({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -1613,12 +1808,12 @@ ${Z}
 			e && e.removeEventListener("wheel", s);
 		};
 	}, [e]);
-	let c = e * 100, l = f(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
-	return /* @__PURE__ */ C(J, {
+	let c = e * 100, l = f(() => Math.round(r ? 0 : J(n) * 100), [n, r]);
+	return /* @__PURE__ */ C(Z, {
 		id: "volume-slider",
 		text: /* @__PURE__ */ C("div", {
 			ref: i,
-			css: Ye,
+			css: vt,
 			...o,
 			children: /* @__PURE__ */ C("div", {
 				ref: a,
@@ -1637,7 +1832,7 @@ ${Z}
 			children: [l, "%"]
 		})
 	});
-}, Ze = h`
+}, bt = h`
   position: relative;
   display: flex;
   align-items: center;
@@ -1662,7 +1857,7 @@ ${Z}
       border-radius: 4px;
 
       .volume-value {
-        ${U.bMedium.regular};
+        ${K.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -1700,11 +1895,11 @@ ${Z}
     }
   }
 
-`, Qe = ({ ref: e }) => {
-	let t = H(), n = H((e) => e.volume), r = H((e) => e.muted), i = f(() => G(n), [n]);
+`, xt = ({ ref: e }) => {
+	let t = U(), n = U((e) => e.volume), r = U((e) => e.muted), i = f(() => J(n), [n]);
 	return /* @__PURE__ */ w("div", {
-		css: Ze,
-		children: [/* @__PURE__ */ C(J, {
+		css: bt,
+		children: [/* @__PURE__ */ C(Z, {
 			id: "sound",
 			text: /* @__PURE__ */ C("button", {
 				className: "sound",
@@ -1723,16 +1918,16 @@ ${Z}
 			className: "volume-slider-container",
 			children: /* @__PURE__ */ C("div", {
 				className: "volume-slider-background",
-				children: /* @__PURE__ */ C(Xe, {
+				children: /* @__PURE__ */ C(yt, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(Se(e));
+						t.setVolume(ye(e));
 					}
 				})
 			})
 		})]
 	});
-}, $ = .05, $e = 5, et = h`
+}, $ = .05, St = 5, Ct = h`
   display: flex;
   flex-direction: column;
   gap: calc(0.4 * var(--mp-unit));
@@ -1741,7 +1936,7 @@ ${Z}
     opacity: 0.72;
     font-size: 0.9em;
   }
-`, tt = h`
+`, wt = h`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -1831,7 +2026,7 @@ ${Z}
         cursor: pointer;
 
         :hover {
-          background-color: ${Je.hover};
+          background-color: ${_t.hover};
         }
 
         /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -1848,7 +2043,7 @@ ${Z}
 
     .left {
       .time {
-        ${U.bMedium.regular}
+        ${K.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -1869,10 +2064,10 @@ ${Z}
       }
     }
   }
-`, nt = () => {
-	let e = H(), t = H((e) => e.paused), n = H((e) => e.currentTime), r = H((e) => e.duration), i = H((e) => e.fullscreen), a = H((e) => e.hideUI), o = H((e) => e.togglePictureInPicture), s = H((e) => e.pictureInPictureMode), c = H((e) => e.burnedInSubtitles), l = H((e) => e.subtitleTracks), f = H((e) => e.requestSeek), [p, h] = m(null), g = s === "burn-in", _ = l.length > 0, v = r > 0 && n === r, y = u(({ direction: t, stepSize: n }) => {
-		let r = G(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
-		e.setVolume(Se(a)), o && !e.muted && e.toggleMuted();
+`, Tt = () => {
+	let e = U(), t = U((e) => e.paused), n = U((e) => e.currentTime), r = U((e) => e.duration), i = U((e) => e.fullscreen), a = U((e) => e.hideUI), o = U((e) => e.togglePictureInPicture), s = U((e) => e.pictureInPictureMode), c = U((e) => e.burnedInSubtitles), l = U((e) => e.subtitleTracks), f = U((e) => e.requestSeek), [p, h] = m(null), g = s === "burn-in", _ = l.length > 0, v = r > 0 && n === r, y = u(({ direction: t, stepSize: n }) => {
+		let r = J(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
+		e.setVolume(ye(a)), o && !e.muted && e.toggleMuted();
 	}, [e]);
 	d(() => {
 		let t = (t) => f ? f(t) : e.seek(t), n = (n) => {
@@ -1893,8 +2088,8 @@ ${Z}
 			});
 			else if (n.key === "ArrowRight") {
 				if (!e.duration) return;
-				t(Math.min(e.currentTime + $e, e.duration));
-			} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - $e, 0)) : i = !1;
+				t(Math.min(e.currentTime + St, e.duration));
+			} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - St, 0)) : i = !1;
 			i && n.preventDefault();
 		};
 		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
@@ -1915,17 +2110,17 @@ ${Z}
 	return d(() => {
 		if (p) return p.addEventListener("wheel", b, { passive: !1 }), () => p.removeEventListener("wheel", b);
 	}, [p, b]), /* @__PURE__ */ w("div", {
-		css: tt,
+		css: wt,
 		style: { ...a ? {
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ C(ke, {}), /* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ C(Xe, {}), /* @__PURE__ */ w("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ w("div", {
 				className: "left",
 				children: [
-					/* @__PURE__ */ C(J, {
+					/* @__PURE__ */ C(Z, {
 						id: "play",
 						tooltipPlace: "top-start",
 						text: /* @__PURE__ */ C("button", {
@@ -1937,19 +2132,19 @@ ${Z}
 						}),
 						toolTipText: /* @__PURE__ */ C("span", { children: v ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ C(Qe, { ref: h }),
+					/* @__PURE__ */ C(xt, { ref: h }),
 					/* @__PURE__ */ C("div", {
 						className: "time",
-						children: Ce(n, r)
+						children: be(n, r)
 					})
 				]
 			}), /* @__PURE__ */ w("div", {
 				className: "right",
 				children: [
-					/* @__PURE__ */ C(Ve, {}),
-					/* @__PURE__ */ C(qe, {}),
-					/* @__PURE__ */ C(Ge, {}),
-					o ? /* @__PURE__ */ C(J, {
+					/* @__PURE__ */ C(ut, {}),
+					/* @__PURE__ */ C(gt, {}),
+					/* @__PURE__ */ C(mt, {}),
+					o ? /* @__PURE__ */ C(Z, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ C("button", {
@@ -1959,13 +2154,13 @@ ${Z}
 							disabled: g && !_,
 							"aria-label": g ? "Put the subtitles in the video" : "Picture in picture",
 							"aria-pressed": g ? c : void 0,
-							children: g ? C(c ? Ne : Pe, {}) : /* @__PURE__ */ C("img", {
-								src: Ae,
+							children: g ? C(c ? et : tt, {}) : /* @__PURE__ */ C("img", {
+								src: Ze,
 								alt: ""
 							})
 						}),
 						toolTipText: /* @__PURE__ */ w("span", {
-							css: et,
+							css: Ct,
 							children: [/* @__PURE__ */ C("span", {
 								className: "lead",
 								children: g ? _ ? c ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture"
@@ -1975,7 +2170,7 @@ ${Z}
 							}) : null]
 						})
 					}) : null,
-					/* @__PURE__ */ C(J, {
+					/* @__PURE__ */ C(Z, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ C("button", {
@@ -1992,7 +2187,7 @@ ${Z}
 			})]
 		})]
 	});
-}, rt = 9e3, it = h`
+}, Et = 9e3, Dt = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2030,12 +2225,12 @@ ${Z}
   }
 
   .title {
-    ${U.bMedium.bold}
+    ${K.bMedium.bold}
     color: #fff;
   }
 
   .body {
-    ${U.bSmall.regular}
+    ${K.bSmall.regular}
     color: rgba(255, 255, 255, 0.75);
   }
 
@@ -2046,18 +2241,18 @@ ${Z}
     line-height: 1;
     color: #fff;
   }
-`, at = () => {
-	let e = H((e) => e.burnedInSubtitles), t = H((e) => e.pictureInPictureMode), [n, r] = m(!1);
+`, Ot = () => {
+	let e = U((e) => e.burnedInSubtitles), t = U((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
 			r(!1);
 			return;
 		}
 		r(!0);
-		let n = setTimeout(() => r(!1), rt);
+		let n = setTimeout(() => r(!1), Et);
 		return () => clearTimeout(n);
 	}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ C("div", {
-		css: it,
+		css: Dt,
 		className: n ? "show" : "",
 		role: "status",
 		children: /* @__PURE__ */ w("div", {
@@ -2078,7 +2273,101 @@ ${Z}
 			})]
 		})
 	});
-}, ot = 3e3, st = h`
+}, kt = 1, At = 6e3, jt = 1, Mt = {
+	opening: "Skip Opening",
+	ending: "Skip Ending"
+}, Nt = h`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+
+  button {
+    position: absolute;
+    /* clear of the control bar, which is 6 to 8px of padding plus a row of 18 to 28px controls and
+       the seekbar above them */
+    bottom: calc(7 * var(--mp-unit));
+    right: calc(2.4 * var(--mp-unit));
+
+    /* the one thing in this layer that can be pressed */
+    pointer-events: auto;
+    cursor: pointer;
+
+    ${K.bMedium.bold}
+    color: #fff;
+    padding: calc(1 * var(--mp-unit)) calc(1.8 * var(--mp-unit));
+    border: 1px solid rgba(255, 255, 255, .55);
+    border-radius: calc(.4 * var(--mp-unit));
+    background-color: rgba(20, 20, 22, .8);
+    box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
+
+    opacity: 0;
+    transform: translateY(calc(.6 * var(--mp-unit)));
+    /* visibility as well as opacity, so a faded button cannot be hovered or pressed */
+    visibility: hidden;
+    transition: opacity .18s ease, transform .18s ease, visibility .18s;
+
+    &:hover, &:focus-visible {
+      background-color: rgba(255, 255, 255, .92);
+      color: #111;
+      border-color: transparent;
+    }
+  }
+
+  &.show button {
+    opacity: 1;
+    transform: none;
+    visibility: visible;
+  }
+
+  @media (pointer: coarse) {
+    button {
+      /* a finger needs a target, and the control row below is already 44px */
+      min-height: 44px;
+      bottom: calc(9 * var(--mp-unit));
+    }
+  }
+`, Pt = () => {
+	let e = U((e) => e.chapters), t = U((e) => e.currentTime), n = U((e) => e.requestSeek), r = U(), i = f(() => qe(e), [e]), a = f(() => {
+		if (typeof t != "number") return;
+		let n = e.findIndex((e, n) => i[n] !== void 0 && e.start - kt <= t && t < e.end), r = n >= 0 ? i[n] : void 0;
+		return r ? {
+			kind: r,
+			end: e[n].end
+		} : void 0;
+	}, [
+		e,
+		i,
+		t
+	]), o = p(0), [s, c] = m(0);
+	d(() => {
+		let e = typeof t == "number" ? t : 0, n = o.current;
+		o.current = e, e < n - jt && c((e) => e + 1);
+	}, [t]);
+	let [l, u] = m(!1), h = a ? `${a.kind}@${a.end}` : "";
+	return d(() => {
+		if (!h) {
+			u(!1);
+			return;
+		}
+		u(!0);
+		let e = setTimeout(() => u(!1), At);
+		return () => clearTimeout(e);
+	}, [h, s]), d(() => {
+		a || u(!1);
+	}, [a]), a ? /* @__PURE__ */ C("div", {
+		css: Nt,
+		className: l ? "show" : "",
+		children: /* @__PURE__ */ C("button", {
+			type: "button",
+			className: "skip-chapter",
+			onClick: () => {
+				u(!1), n ? n(a.end) : r.seek(a.end);
+			},
+			children: Mt[a.kind]
+		})
+	}) : null;
+}, Ft = 3e3, It = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2089,7 +2378,7 @@ ${Z}
      hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events does
      not, and transitioning it holds the item on screen for the length of the fade. */
   transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
-`, ct = h`
+`, Lt = h`
   position: relative;
   background-color: black;
   display: flex;
@@ -2134,14 +2423,14 @@ ${Z}
   &.hide {
     cursor: none;
   }
-`, lt = (e, t = "") => s.toArray(e).flatMap((e, n) => {
+`, Rt = (e, t = "") => s.toArray(e).flatMap((e, n) => {
 	let r = `${t}${l(e) && e.key != null ? e.key : n}`;
-	return l(e) && e.type === c ? lt(e.props.children, `${r}/`) : [{
+	return l(e) && e.type === c ? Rt(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), ut = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
-	let o = H(), s = H((e) => e.hideUI), c = H((e) => e.setHideUI), l = p(void 0), u = p("mouse"), f = p({
+}), zt = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
+	let o = U(), s = U((e) => e.hideUI), c = U((e) => e.setHideUI), l = p(void 0), u = p("mouse"), f = p({
 		x: -1,
 		y: -1
 	}), m = p(null);
@@ -2156,15 +2445,15 @@ ${Z}
 		return !!n && m.current.contains(n) && !n.closest(".video");
 	}, _ = () => {
 		if (g()) {
-			l.current = setTimeout(_, ot);
+			l.current = setTimeout(_, Ft);
 			return;
 		}
 		c(!0);
 	}, v = () => {
-		c(!1), clearTimeout(l.current), l.current = setTimeout(_, ot);
+		c(!1), clearTimeout(l.current), l.current = setTimeout(_, Ft);
 	};
 	return /* @__PURE__ */ w("div", {
-		css: ct,
+		css: Lt,
 		ref: h,
 		onPointerMove: (e) => {
 			u.current = e.pointerType, e.pointerType === "mouse" && (f.current = {
@@ -2183,9 +2472,9 @@ ${Z}
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ C(be, { onSubtitleRef: n }),
-			lt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
-				css: st,
+			/* @__PURE__ */ C(_e, { onSubtitleRef: n }),
+			Rt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
+				css: It,
 				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
@@ -2193,8 +2482,9 @@ ${Z}
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ C(nt, {}),
-			/* @__PURE__ */ C(at, {}),
+			i === !1 ? null : /* @__PURE__ */ C(Tt, {}),
+			/* @__PURE__ */ C(Ot, {}),
+			/* @__PURE__ */ C(Pt, {}),
 			/* @__PURE__ */ w("div", {
 				className: "video",
 				onClick: () => {
@@ -2211,96 +2501,98 @@ ${Z}
 			})
 		]
 	});
-}, dt = ({ options: e, children: t }) => {
-	let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: o, publicPath: s, libavWorkerUrl: c, read: l, thumbnailRead: u, thumbnailsEnabled: f } = r ?? {}, h = y(), g = v(), [_, b] = m(null), [x, S] = m(null), w = n?.media ?? _;
-	d(() => (h?.(w), () => h?.(null)), [w, h]);
-	let { expose: T } = e, E = T === !0 ? {} : T || void 0, D = p(E);
-	D.current = E;
-	let O = E ? E.id : void 0, k = E ? E.origin : void 0, A = E ? E.channel : void 0;
+}, Bt = ({ options: e, children: t }) => {
+	let n = "media" in e ? e : null, r = n ? null : e, { title: i, chapters: a } = e, { size: o, downloadedRanges: s, publicPath: c, libavWorkerUrl: l, read: u, thumbnailRead: f, thumbnailsEnabled: h } = r ?? {}, g = y(), _ = v(), [b, x] = m(null), [S, w] = m(null), T = n?.media ?? b;
+	d(() => (g?.(T), () => g?.(null)), [T, g]);
+	let { expose: E } = e, D = E === !0 ? {} : E || void 0, O = p(D);
+	O.current = D;
+	let k = D ? D.id : void 0, A = D ? D.origin : void 0, j = D ? D.channel : void 0;
 	d(() => {
-		if (!T || !w) return;
+		if (!E || !T) return;
 		let e, t = !1;
 		return import("./remote/index.js").then(({ exposePlayer: n }) => {
-			t || (e = n(w, D.current ?? {}));
+			t || (e = n(T, O.current ?? {}));
 		}).catch(() => {}), () => {
 			t = !0, e?.();
 		};
 	}, [
-		w,
-		!!T,
-		O,
+		T,
+		!!E,
 		k,
-		A
-	]), ue(_, x, r);
-	let { thumbnails: j, requestThumbnail: M } = pe({
-		publicPath: s,
-		workerUrl: c,
-		length: f === !1 ? void 0 : a,
-		read: u ?? l,
-		downloadedRanges: o
-	}), N = n?.thumbnails?.all ?? j, { toggle: P, mode: F, burnedIn: I } = me(_, x), L = H((e) => e.setSourceState);
+		A,
+		j
+	]), se(b, S, r);
+	let { thumbnails: M, requestThumbnail: N } = ue({
+		publicPath: c,
+		workerUrl: l,
+		length: h === !1 ? void 0 : o,
+		read: f ?? u,
+		downloadedRanges: s
+	}), P = n?.thumbnails?.all ?? M, { toggle: F, mode: I, burnedIn: L } = de(b, S), R = U((e) => e.setSourceState);
 	d(() => {
-		L({
+		R({
 			title: i,
-			size: a,
-			downloadedRanges: o
+			size: o,
+			downloadedRanges: s
 		});
 	}, [
-		L,
+		R,
 		i,
-		a,
-		o
+		o,
+		s
 	]);
-	let R = n?.thumbnails?.at;
+	let z = n?.thumbnails?.at;
 	d(() => {
-		L({
-			thumbnails: N,
-			thumbnailAt: R,
-			requestThumbnail: M,
-			togglePictureInPicture: P,
-			pictureInPictureMode: F,
-			burnedInSubtitles: I
+		R({
+			thumbnails: P,
+			thumbnailAt: z,
+			requestThumbnail: N,
+			togglePictureInPicture: F,
+			pictureInPictureMode: I,
+			burnedInSubtitles: L
 		});
 	}, [
-		L,
-		N,
 		R,
-		M,
 		P,
+		z,
+		N,
 		F,
-		I
+		I,
+		L
 	]);
-	let z = n?.subtitles?.selection, B = n?.audioTracks?.selection;
+	let B = n?.subtitles?.selection, V = n?.audioTracks?.selection;
 	return d(() => {
-		z && L({
-			subtitleTracks: z.options.map(({ id: e, label: t, disabled: n }) => ({
+		B && R({
+			subtitleTracks: B.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedSubtitleTrack: z.selectedId ?? void 0,
-			selectSubtitleTrack: (e) => z.select(e == null ? null : String(e)),
-			subtitleOffLabel: z.offLabel
+			selectedSubtitleTrack: B.selectedId ?? void 0,
+			selectSubtitleTrack: (e) => B.select(e == null ? null : String(e)),
+			subtitleOffLabel: B.offLabel
 		});
-	}, [L, z]), d(() => {
-		B && L({
-			audioTracks: B.options.map(({ id: e, label: t, disabled: n }) => ({
+	}, [R, B]), d(() => {
+		V && R({
+			audioTracks: V.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedAudioTrack: B.selectedId ?? void 0,
-			selectAudioTrack: (e) => B.select(String(e))
+			selectedAudioTrack: V.selectedId ?? void 0,
+			selectAudioTrack: (e) => V.select(String(e))
 		});
-	}, [L, B]), /* @__PURE__ */ C(ut, {
-		ref: g,
-		onVideoRef: n ? void 0 : b,
-		onSubtitleRef: S,
+	}, [R, V]), d(() => {
+		a && R({ chapters: a });
+	}, [R, a]), /* @__PURE__ */ C(zt, {
+		ref: _,
+		onVideoRef: n ? void 0 : x,
+		onSubtitleRef: w,
 		overlay: e.overlay,
 		controls: e.controls,
 		children: t
 	});
-}, ft = h`
+}, Vt = h`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -2370,17 +2662,17 @@ ${Z}
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, pt = (e) => /* @__PURE__ */ C("div", {
-	css: ft,
-	children: /* @__PURE__ */ C(V.Provider, { children: /* @__PURE__ */ C(dt, {
+`, Ht = (e) => /* @__PURE__ */ C("div", {
+	css: Vt,
+	children: /* @__PURE__ */ C(H.Provider, { children: /* @__PURE__ */ C(Bt, {
 		options: e,
 		children: e.children
 	}) })
-}), mt = (e) => !!e && typeof e == "object" && "at" in e, ht = (e) => !!e && typeof e == "object" && "selection" in e, gt = ({ blob: e, name: t }) => ({
+}), Ut = (e) => !!e && typeof e == "object" && "at" in e, Wt = (e) => !!e && typeof e == "object" && "selection" in e, Gt = ({ blob: e, name: t }) => ({
 	length: e.size,
 	name: t ?? (e instanceof File ? e.name : void 0),
 	read: (t, n) => e.slice(t, t + n).arrayBuffer()
-}), _t = async (e, t) => {
+}), Kt = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -2390,23 +2682,25 @@ ${Z}
 	if (!Number.isFinite(i) || i <= 0) throw Error("The source did not report its length");
 	if (!r && n.status !== 206) throw Error("The source does not support range requests");
 	return i;
-}, vt = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await _t(e, r);
+}, qt = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await Kt(e, r);
 	return {
 		length: i,
 		name: n,
 		read: async (t, n) => {
-			let a = await fetch(e, {
-				headers: { Range: `bytes=${t}-${Math.min(t + n, i) - 1}` },
+			let a = Math.min(t + n, i) - 1;
+			if (a < t) return /* @__PURE__ */ new ArrayBuffer(0);
+			let o = await fetch(e, {
+				headers: { Range: `bytes=${t}-${a}` },
 				credentials: r
 			});
-			if (!a.ok) throw Error(`The source could not be read: HTTP ${a.status}`);
-			return a.arrayBuffer();
+			if (!o.ok) throw Error(`The source could not be read: HTTP ${o.status}`);
+			return o.arrayBuffer();
 		}
 	};
-}, yt = async (e) => {
-	if ("blob" in e) return gt(e);
-	if ("url" in e) return vt(e);
+}, Jt = async (e) => {
+	if ("blob" in e) return Gt(e);
+	if ("url" in e) return qt(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -2415,4 +2709,4 @@ ${Z}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { pt as MediaPlayer, pt as default, V as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, yt as inputToRemuxerInput, ht as isDelegatedTracks, mt as isExternalThumbnails, ee as sourceFeature, i as startPlayback, me as usePictureInPicture, H as usePlayer, pe as useSeekThumbnails };
+export { Ht as MediaPlayer, Ht as default, H as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, Jt as inputToRemuxerInput, Wt as isDelegatedTracks, Ut as isExternalThumbnails, V as sourceFeature, i as startPlayback, de as usePictureInPicture, U as usePlayer, ue as useSeekThumbnails };