@banou/media-player 0.8.3 → 0.8.5

package/dist/index.js

@@ -305,7 +305,7 @@ var re = {
   ${z.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, pe = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", B = ({ onCanvasRef: e }) => {
+`, pe = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", me = ({ onCanvasRef: e }) => {
 	let t = P((e) => e.title), n = P((e) => e.hideUI), r = P((e) => e.playbackError), i = P((e) => e.ready), a = P((e) => e.size), o = P((e) => e.waiting);
 	return /* @__PURE__ */ S(b, { children: [
 		t ? /* @__PURE__ */ x("div", {
@@ -327,11 +327,11 @@ var re = {
 			css: le
 		})
 	] });
-}, V = 1e-4, H = 1, U = (e) => Math.max(V, Math.min(H, e)) ** 2, W = (e) => Math.max(V, Math.min(H, e)) ** (H / 2), G = (e) => {
+}, B = 1e-4, V = 1, H = (e) => Math.max(B, Math.min(V, e)) ** 2, U = (e) => Math.max(B, Math.min(V, e)) ** (V / 2), W = (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}`;
-}, me = (e, t) => `${G(e)} / ${G(t)}`, he = (e) => p`
+}, he = (e, t) => `${W(e)} / ${W(t)}`, ge = (e) => p`
   display: flex;
   justify-content: flex-end;
 
@@ -353,7 +353,7 @@ var re = {
   ${e === "lg" && p`
     padding: calc(1.2 * var(--mp-unit))!important;
   `}
-`, K = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
+`, G = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
 	"data-tooltip-id": e,
 	"data-open": !0,
 	"data-tooltip-offset": a,
@@ -362,11 +362,11 @@ var re = {
 	"data-tooltip-place": o,
 	children: n
 }), !s && /* @__PURE__ */ x(ne, {
-	css: he(c),
+	css: ge(c),
 	id: e,
 	noArrow: !0,
 	children: t
-})] }), q = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+})] }), K = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
 	let [i, a] = f(!1), o = d(t);
 	o.current = t;
 	let s = d(null), u = c((t, r) => {
@@ -393,7 +393,7 @@ var re = {
 			style: { touchAction: "none" }
 		}
 	};
-}, ge = p`
+}, _e = p`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -437,14 +437,28 @@ var re = {
     display: flex;
     justify-content: center;
 
+    /* The seekbar's other hover affordance, the thumbnail below, gets a rounded box and a drop
+       shadow. A source that ships no thumbnails, which is every source whose media the player does
+       not own, leaves this readout as the entire preview, so it carries the same treatment instead
+       of sitting as bare text on the picture. The ink comes from the player root. */
+    background-color: rgba(28, 28, 28, .95);
+    border-radius: calc(.4 * var(--mp-unit));
+    padding: 0 calc(.6 * var(--mp-unit));
+    box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
+
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
     ${z.bMedium.bold}
 
     position: absolute;
-    top: calc(-2.5 * var(--mp-unit));
-    width: calc(5 * var(--mp-unit));
+    /* Anchored on its bottom edge rather than its top: now that it has a background its height
+       follows the font size, and a top-anchored box would grow downward into the track. */
+    bottom: calc(1.2 * var(--mp-unit));
+    /* Sized to its content, replacing a fixed 5 unit box that \`1:04:09\` overflows. Transparent, that
+       overflow was invisible; filled, it would not be. */
+    width: max-content;
+    white-space: nowrap;
+    transform: translateX(-50%);
 
-    margin-left: calc(-2.5 * var(--mp-unit));
     pointer-events: none;
   }
 
@@ -550,8 +564,8 @@ var re = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, J = () => {
-	let e = P(), t = P((e) => e.currentTime), n = P((e) => e.duration), r = P((e) => e.size), i = P((e) => e.downloadedRanges), a = P((e) => e.indexes), o = P((e) => e.thumbnails), s = P((e) => e.thumbnailAt), c = d(null), [p, m] = f(void 0), [h, g] = f(void 0), _ = d(void 0), { dragging: v, handlers: y } = q({
+`, ve = () => {
+	let e = P(), t = P((e) => e.currentTime), n = P((e) => e.duration), r = P((e) => e.size), i = P((e) => e.downloadedRanges), a = P((e) => e.indexes), o = P((e) => e.thumbnails), s = P((e) => e.thumbnailAt), c = d(null), [p, m] = f(void 0), [h, g] = f(void 0), _ = d(void 0), { dragging: v, handlers: y } = K({
 		ref: c,
 		onChange: (e) => {
 			m(e), _.current !== "mouse" && g(e * n);
@@ -609,7 +623,7 @@ var re = {
 		h
 	]);
 	return /* @__PURE__ */ S("div", {
-		css: ge,
+		css: _e,
 		ref: c,
 		className: v ? "progress-bar dragging" : "progress-bar",
 		onMouseMove: T,
@@ -618,7 +632,7 @@ var re = {
 			/* @__PURE__ */ x("div", { className: "background-bar" }),
 			h ? /* @__PURE__ */ x("div", {
 				className: "cursor-time",
-				style: { left: `clamp(calc(1.8 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(1.8 * var(--mp-unit))))` },
+				style: { left: `clamp(calc(3 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(3 * var(--mp-unit))))` },
 				children: k
 			}) : void 0,
 			/* @__PURE__ */ x("div", { className: "progress" }),
@@ -650,7 +664,7 @@ var re = {
 			})
 		]
 	});
-}, _e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", ve = p`
+}, ye = "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", be = p`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -703,8 +717,8 @@ width: 100%;
     }
   }
 }
-`, ye = () => {
-	let e = P(), t = P((e) => e.playbackRate), n = d(null), r = d(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, u = (e) => o(i + e * a), { handlers: f } = q({
+`, xe = () => {
+	let e = P(), t = P((e) => e.playbackRate), n = d(null), r = d(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, u = (e) => o(i + e * a), { handlers: f } = K({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(u(t))
 	}), p = (t) => {
@@ -720,7 +734,7 @@ width: 100%;
 	}, [t]);
 	let m = c(s);
 	return /* @__PURE__ */ S("div", {
-		css: ve,
+		css: be,
 		children: [/* @__PURE__ */ S("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ x("div", {
 			className: "playback-slider",
 			ref: n,
@@ -738,37 +752,38 @@ width: 100%;
 			})
 		})]
 	});
-}, be = p`
-position: relative;
-
-.settings {
-  /* the icon keeps its size, the pressable box grows around it */
-  @media (pointer: coarse) {
-    box-sizing: border-box;
-    justify-content: center;
-
-    min-width: 44px;
-    min-height: 44px;
-  }
-}
-
+}, q = p`
 .popover {
   position: absolute;
-  /* the gear sits a couple of buttons in from the right edge, so a centred popover hangs off that
-     edge on a phone. It anchors to the button instead until the viewport has room to centre it. */
-  right: 0;
-  transform: none;
+  /* Anchored to the PLAYER's right edge, never to the gear. The gear is not the last control in the
+     bar, so a menu centred on it puts its own edges wherever the button happens to sit: with no
+     picture-in-picture button, which is every source whose media the player does not own, an edge
+     landed outside the box, and the root's \`overflow: hidden\` cut it off, taking the rows under it
+     out of reach. The inset matches the bar's own padding so the menu lines up with the last button. */
+  right: calc(12px + env(safe-area-inset-right, 0px));
+  bottom: calc(100% + 8px);
 
   overflow-y: auto;
   width: 180px;
-  max-width: calc(100vw - 24px);
-  height: 160px;
-  top: -180px;
+  /* \`100%\` is the control bar, which is the width of the PLAYER. The old \`100vw\` was the viewport,
+     which equals the player only when the player is the whole document, and it is the wrong kind of
+     guard besides: a max-width shrinks the box, it never moves it back inside. */
+  max-width: calc(100% - 24px);
+  /* Sized to its rows, capped at what fits. A fixed height left the settings menu two thirds empty
+     once subtitles moved out to its own button, and a long track list scrolls at the cap either way. */
+  height: max-content;
+  /* The room actually above the bar. A short player had the top of the menu clipped by that same
+     \`overflow: hidden\`. With no size container in the ancestry this resolves against the small
+     viewport, so it can only ever shrink the box, never grow it. */
+  max-height: min(160px, calc(100cqh - 100% - 16px));
   @media (min-width: 768px) {
-    right: 50%;
-    transform: translateX(50%);
+    right: calc(16px + env(safe-area-inset-right, 0px));
     width: 250px;
-    height: 160px;
+    max-width: calc(100% - 32px);
+  }
+  @media (min-width: 2560px) {
+    right: calc(24px + env(safe-area-inset-right, 0px));
+    max-width: calc(100% - 48px);
   }
 
   display: flex;
@@ -843,6 +858,115 @@ position: relative;
   }
 }
 
+.track-list {
+  .description {
+    word-break: break-word;
+  }
+
+  /* Dimmed and inert, but still listed. A source that names a track it cannot serve right now is
+     saying the track exists, and dropping the row would read as the source having nothing. */
+  .unavailable {
+    opacity: 0.5;
+    cursor: default;
+    :hover {
+      background-color: transparent;
+    }
+  }
+
+  .failed {
+    border-bottom: 1px solid #4D4D4E;
+    color: #f66;
+    ${z.bSmall.regular}
+  }
+}
+`, J = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
+	let c = o !== void 0, l = (e, i, a) => {
+		let s = c && o === e, l = c || t.find((t) => t.id === e)?.disabled;
+		return /* @__PURE__ */ S("div", {
+			onClick: () => {
+				l || r(e ?? void 0);
+			},
+			className: [a, l ? "unavailable" : null].filter(Boolean).join(" ") || void 0,
+			children: [/* @__PURE__ */ x("span", { children: i }), /* @__PURE__ */ x("span", { children: s ? "…" : (n ?? null) === e ? "✓" : "" })]
+		}, e ?? "__off__");
+	};
+	return /* @__PURE__ */ S("div", {
+		className: "popover track-list",
+		children: [
+			/* @__PURE__ */ S("div", {
+				className: i ? "back" : "back no-hover",
+				onClick: i,
+				children: [i ? /* @__PURE__ */ x(C, {}) : null, /* @__PURE__ */ x("span", { children: e })]
+			}),
+			s ? /* @__PURE__ */ x("div", {
+				className: "no-hover failed",
+				children: "Could not switch. Try again."
+			}) : null,
+			a ? l(null, a) : null,
+			t.map(({ id: e, label: t }) => l(e, t, "description"))
+		]
+	});
+}, Y = ({ onReset: e } = {}) => {
+	let t = d(null), [n, r] = f(!1), [i, a] = f(void 0), [o, s] = f(!1), c = d(e);
+	c.current = e;
+	let u = () => {
+		r(!1), c.current?.();
+	};
+	return l(() => {
+		let e = (e) => {
+			n && t.current && !t.current.contains(e.target) && u();
+		};
+		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+	}, [n]), {
+		open: n,
+		toggle: () => {
+			r((e) => !e), s(!1), c.current?.();
+		},
+		close: u,
+		containerRef: t,
+		pending: i,
+		failed: o,
+		runSelect: (e, t) => {
+			if (i !== void 0) return;
+			s(!1);
+			let n;
+			try {
+				n = t();
+			} catch (e) {
+				console.warn("[media-player] track selection failed:", e), s(!0);
+				return;
+			}
+			if (!(n instanceof Promise)) {
+				u();
+				return;
+			}
+			a(e), n.then(() => {
+				a(void 0), u();
+			}, (e) => {
+				console.warn("[media-player] track selection failed:", e), a(void 0), s(!0);
+			});
+		}
+	};
+}, Se = p`
+/* 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
+   tooltips already resolve against the control bar with no positioned wrapper of their own. */
+position: static;
+
+.settings {
+  /* the icon keeps its size, the pressable box grows around it */
+  @media (pointer: coarse) {
+    box-sizing: border-box;
+    justify-content: center;
+
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+${q}
+
 .playback-rate {
   .slider {
     width: 100%;
@@ -882,142 +1006,178 @@ position: relative;
   }
 }
 
-.track-list {
-  .description {
-    word-break: break-word;
-  }
-}
-`, Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, allowDisable: a }) => /* @__PURE__ */ S("div", {
-	className: "popover track-list",
-	children: [
-		/* @__PURE__ */ S("div", {
-			className: "back",
-			onClick: i,
-			children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: e })]
-		}),
-		a ? /* @__PURE__ */ S("div", {
-			onClick: () => r(void 0),
-			children: [/* @__PURE__ */ x("span", { children: "Disable" }), /* @__PURE__ */ x("span", { children: n === void 0 ? "✓" : "" })]
-		}) : null,
-		t.map(({ id: e, label: t }) => /* @__PURE__ */ S("div", {
-			onClick: () => r(e),
-			className: "description",
-			children: [/* @__PURE__ */ x("span", { children: t }), /* @__PURE__ */ x("span", { children: n === e ? "✓" : "" })]
-		}, e))
-	]
-}), xe = () => {
-	let e = P(), t = P((e) => e.playbackRate), n = P((e) => e.subtitleTracks), r = P((e) => e.selectedSubtitleTrack), i = P((e) => e.selectSubtitleTrack), a = P((e) => e.audioTracks), o = P((e) => e.selectedAudioTrack), s = P((e) => e.selectAudioTrack), [c, u] = f(!1), [p, m] = f(0), h = d(null), g = () => {
-		u(!c), m(0);
-	}, _ = (t) => {
-		e.setPlaybackRate(t), m(0);
-	};
-	l(() => {
-		let e = (e) => {
-			c && h.current && !h.current.contains(e.target) && g();
-		};
-		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-	}, [c]);
-	let v = (e) => {
-		i(e), g();
-	}, y = (e) => {
-		e !== void 0 && s(e), g();
-	}, b = (e) => () => {
-		m(e);
+`, Ce = () => {
+	let e = P(), t = P((e) => e.playbackRate), n = P((e) => e.audioTracks), r = P((e) => e.selectedAudioTrack), i = P((e) => e.selectAudioTrack), [a, o] = f(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: p } = Y({ onReset: () => o(0) }), m = (t) => {
+		e.setPlaybackRate(t), o(0);
+	}, h = (e) => {
+		e !== void 0 && p(e, () => i(e));
+	}, g = (e) => () => {
+		o(e);
 	};
 	return /* @__PURE__ */ S("div", {
-		css: be,
-		ref: h,
+		css: Se,
+		ref: l,
 		children: [
-			/* @__PURE__ */ x(K, {
+			/* @__PURE__ */ x(G, {
 				id: "settings",
-				disabled: c,
+				disabled: s,
 				text: /* @__PURE__ */ x("button", {
 					className: "settings",
 					type: "button",
-					onClick: g,
+					onClick: c,
 					children: /* @__PURE__ */ x(A, {})
 				}),
 				toolTipText: /* @__PURE__ */ x("span", { children: "Settings" })
 			}),
-			c && p === 0 && /* @__PURE__ */ S("div", {
+			s && a === 0 && /* @__PURE__ */ S("div", {
 				className: "popover menu",
-				children: [
-					a.length > 1 ? /* @__PURE__ */ S("div", {
-						onClick: b(3),
-						children: [/* @__PURE__ */ x("div", { children: "Audio" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
-					}) : null,
-					n.length > 0 ? /* @__PURE__ */ S("div", {
-						onClick: b(2),
-						children: [/* @__PURE__ */ x("div", { children: "Subtitles" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
-					}) : null,
-					/* @__PURE__ */ S("div", {
-						onClick: b(1),
-						children: [/* @__PURE__ */ x("div", { children: "Playback speed" }), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("span", {
-							className: "secondary",
-							children: t === 1 ? "(Default)" : t.toFixed(2)
-						}), /* @__PURE__ */ x(w, {})] })]
-					})
-				]
+				children: [n.length > 1 ? /* @__PURE__ */ S("div", {
+					onClick: g(2),
+					children: [/* @__PURE__ */ x("div", { children: "Audio" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
+				}) : null, /* @__PURE__ */ S("div", {
+					onClick: g(1),
+					children: [/* @__PURE__ */ x("div", { children: "Playback speed" }), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("span", {
+						className: "secondary",
+						children: t === 1 ? "(Default)" : t.toFixed(2)
+					}), /* @__PURE__ */ x(w, {})] })]
+				})]
 			}),
-			c && p === 1 && /* @__PURE__ */ S("div", {
+			s && a === 1 && /* @__PURE__ */ S("div", {
 				className: "popover playback-rate",
 				children: [
 					/* @__PURE__ */ S("div", {
 						className: "back",
-						onClick: b(0),
+						onClick: g(0),
 						children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: "Playback speed" })]
 					}),
 					/* @__PURE__ */ x("div", {
 						className: "slider no-hover",
-						children: /* @__PURE__ */ x(ye, {})
+						children: /* @__PURE__ */ x(xe, {})
 					}),
 					/* @__PURE__ */ S("div", {
 						className: "options no-hover",
 						children: [
 							/* @__PURE__ */ x("div", {
-								onClick: () => _(.5),
+								onClick: () => m(.5),
 								children: "0.5x"
 							}),
 							/* @__PURE__ */ x("div", {
-								onClick: () => _(1),
+								onClick: () => m(1),
 								children: "1x"
 							}),
 							/* @__PURE__ */ x("div", {
-								onClick: () => _(1.5),
+								onClick: () => m(1.5),
 								children: "1.5x"
 							}),
 							/* @__PURE__ */ x("div", {
-								onClick: () => _(2),
+								onClick: () => m(2),
 								children: "2x"
 							})
 						]
 					})
 				]
 			}),
-			c && p === 2 && /* @__PURE__ */ x(Y, {
-				title: "Subtitles",
+			s && a === 2 && /* @__PURE__ */ x(J, {
+				title: "Audio",
 				tracks: n,
 				selected: r,
-				onSelect: v,
-				onBack: b(0),
-				allowDisable: !0
-			}),
-			c && p === 3 && /* @__PURE__ */ x(Y, {
-				title: "Audio",
-				tracks: a,
-				selected: o,
-				onSelect: y,
-				onBack: b(0)
+				onSelect: h,
+				onBack: g(0),
+				pending: u,
+				failed: d
 			})
 		]
 	});
-}, Se = {
+}, X = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}, we = (e) => /* @__PURE__ */ S("svg", {
+	...X,
+	...e,
+	children: [/* @__PURE__ */ x("rect", {
+		x: "3",
+		y: "5",
+		width: "18",
+		height: "14",
+		rx: "2",
+		ry: "2"
+	}), /* @__PURE__ */ x("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" })]
+}), Te = (e) => /* @__PURE__ */ S("svg", {
+	...X,
+	...e,
+	children: [
+		/* @__PURE__ */ x("rect", {
+			x: "3",
+			y: "5",
+			width: "18",
+			height: "14",
+			rx: "2",
+			ry: "2"
+		}),
+		/* @__PURE__ */ x("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" }),
+		/* @__PURE__ */ x("line", {
+			x1: "2",
+			y1: "2",
+			x2: "22",
+			y2: "22"
+		})
+	]
+}), Ee = p`
+/* 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;
+
+.subtitles {
+  /* the icon keeps its size, the pressable box grows around it */
+  @media (pointer: coarse) {
+    box-sizing: border-box;
+    justify-content: center;
+
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+${q}
+`, De = () => {
+	let e = P((e) => e.subtitleTracks), t = P((e) => e.selectedSubtitleTrack), n = P((e) => e.selectSubtitleTrack), r = P((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Y();
+	return e.length === 0 ? null : /* @__PURE__ */ S("div", {
+		css: Ee,
+		ref: o,
+		children: [/* @__PURE__ */ x(G, {
+			id: "subtitles",
+			disabled: i,
+			text: /* @__PURE__ */ x("button", {
+				className: "subtitles",
+				type: "button",
+				onClick: a,
+				children: t === void 0 ? /* @__PURE__ */ x(Te, { className: "captions-off" }) : /* @__PURE__ */ x(we, { className: "captions" })
+			}),
+			toolTipText: /* @__PURE__ */ x("span", { children: "Subtitles" })
+		}), i && /* @__PURE__ */ x(J, {
+			title: "Subtitles",
+			tracks: e,
+			selected: t,
+			onSelect: (e) => l(e ?? null, () => n(e)),
+			offLabel: r ?? "Disable",
+			pending: s,
+			failed: c
+		})]
+	});
+}, Oe = {
 	primary: "#EAEBEE",
 	secondary: "#D0D0D9",
 	hover: "rgba(255, 255, 255, 0.13)",
 	borderPrimary: "#384F70",
 	backgroundTooltip: "#222222"
-}, Ce = p`
+}, ke = p`
   display: flex;
   align-items: center;
 
@@ -1060,8 +1220,8 @@ position: relative;
     width: 10px;
     height: 10px;
   }
-`, we = ({ value: e, onChange: t }) => {
-	let n = P((e) => e.volume), r = P((e) => e.muted), i = d(null), a = d(null), { handlers: o } = q({
+`, Ae = ({ value: e, onChange: t }) => {
+	let n = P((e) => e.volume), r = P((e) => e.muted), i = d(null), a = d(null), { handlers: o } = K({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -1075,12 +1235,12 @@ position: relative;
 			e && e.removeEventListener("wheel", s);
 		};
 	}, [e]);
-	let c = e * 100, f = u(() => Math.round(r ? 0 : W(n) * 100), [n, r]);
-	return /* @__PURE__ */ x(K, {
+	let c = e * 100, f = u(() => Math.round(r ? 0 : U(n) * 100), [n, r]);
+	return /* @__PURE__ */ x(G, {
 		id: "volume-slider",
 		text: /* @__PURE__ */ x("div", {
 			ref: i,
-			css: Ce,
+			css: ke,
 			...o,
 			children: /* @__PURE__ */ x("div", {
 				ref: a,
@@ -1099,7 +1259,7 @@ position: relative;
 			children: [f, "%"]
 		})
 	});
-}, Te = p`
+}, je = p`
   position: relative;
   display: flex;
   align-items: center;
@@ -1162,11 +1322,11 @@ position: relative;
     }
   }
 
-`, Ee = ({ ref: e }) => {
-	let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = u(() => W(n), [n]);
+`, Me = ({ ref: e }) => {
+	let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = u(() => U(n), [n]);
 	return /* @__PURE__ */ S("div", {
-		css: Te,
-		children: [/* @__PURE__ */ x(K, {
+		css: je,
+		children: [/* @__PURE__ */ x(G, {
 			id: "sound",
 			text: /* @__PURE__ */ x("button", {
 				className: "sound",
@@ -1183,16 +1343,16 @@ position: relative;
 			className: "volume-slider-container",
 			children: /* @__PURE__ */ x("div", {
 				className: "volume-slider-background",
-				children: /* @__PURE__ */ x(we, {
+				children: /* @__PURE__ */ x(Ae, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(U(e));
+						t.setVolume(H(e));
 					}
 				})
 			})
 		})]
 	});
-}, X = .05, Z = 5, De = p`
+}, Z = .05, Q = 5, Ne = p`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -1244,7 +1404,7 @@ position: relative;
         }
       }
 
-      .play, .sound, .time, .settings, .picture-in-picture, .full-screen {
+      .play, .sound, .time, .subtitles, .settings, .picture-in-picture, .full-screen {
         display: flex;
         align-items: center;
 
@@ -1262,7 +1422,7 @@ position: relative;
         }
       }
 
-      .play, .sound, .settings, .picture-in-picture, .full-screen {
+      .play, .sound, .subtitles, .settings, .picture-in-picture, .full-screen {
         border-radius: 4px;
 
         padding: 8px;
@@ -1276,7 +1436,7 @@ position: relative;
         cursor: pointer;
 
         :hover {
-          background-color: ${Se.hover};
+          background-color: ${Oe.hover};
         }
 
         /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -1314,10 +1474,10 @@ position: relative;
       }
     }
   }
-`, Oe = () => {
+`, Pe = () => {
 	let e = P(), t = P((e) => e.paused), n = P((e) => e.currentTime), r = P((e) => e.duration), i = P((e) => e.fullscreen), a = P((e) => e.hideUI), o = P((e) => e.togglePictureInPicture), [s, u] = f(null), d = r > 0 && n === r, p = c(({ direction: t, stepSize: n }) => {
-		let r = W(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
-		e.setVolume(U(a)), o && !e.muted && e.toggleMuted();
+		let r = U(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
+		e.setVolume(H(a)), o && !e.muted && e.toggleMuted();
 	}, [e]);
 	l(() => {
 		let t = (t) => {
@@ -1330,16 +1490,16 @@ position: relative;
 			else if (t.key === "m") e.toggleMuted();
 			else if (t.key === "ArrowUp") p({
 				direction: "up",
-				stepSize: X
+				stepSize: Z
 			});
 			else if (t.key === "ArrowDown") p({
 				direction: "down",
-				stepSize: X
+				stepSize: Z
 			});
 			else if (t.key === "ArrowRight") {
 				if (!e.duration) return;
-				e.seek(Math.min(e.currentTime + Z, e.duration));
-			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - Z, 0)) : r = !1;
+				e.seek(Math.min(e.currentTime + Q, e.duration));
+			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - Q, 0)) : r = !1;
 			r && t.preventDefault();
 		};
 		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
@@ -1347,26 +1507,26 @@ position: relative;
 	let m = c((e) => {
 		e.preventDefault(), e.deltaY < 0 ? p({
 			direction: "up",
-			stepSize: X
+			stepSize: Z
 		}) : p({
 			direction: "down",
-			stepSize: X
+			stepSize: Z
 		});
 	}, [p]);
 	return l(() => {
 		if (s) return s.addEventListener("wheel", m, { passive: !1 }), () => s.removeEventListener("wheel", m);
 	}, [s, m]), /* @__PURE__ */ S("div", {
-		css: De,
+		css: Ne,
 		style: { ...a ? {
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ x(J, {}), /* @__PURE__ */ S("div", {
+		children: [/* @__PURE__ */ x(ve, {}), /* @__PURE__ */ S("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ S("div", {
 				className: "left",
 				children: [
-					/* @__PURE__ */ x(K, {
+					/* @__PURE__ */ x(G, {
 						id: "play",
 						tooltipPlace: "top-start",
 						text: /* @__PURE__ */ x("button", {
@@ -1377,27 +1537,28 @@ position: relative;
 						}),
 						toolTipText: /* @__PURE__ */ x("span", { children: d ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ x(Ee, { ref: u }),
+					/* @__PURE__ */ x(Me, { ref: u }),
 					/* @__PURE__ */ x("div", {
 						className: "time",
-						children: me(n, r)
+						children: he(n, r)
 					})
 				]
 			}), /* @__PURE__ */ S("div", {
 				className: "right",
 				children: [
-					/* @__PURE__ */ x(xe, {}),
-					o ? /* @__PURE__ */ x(K, {
+					/* @__PURE__ */ x(De, {}),
+					/* @__PURE__ */ x(Ce, {}),
+					o ? /* @__PURE__ */ x(G, {
 						id: "picture-in-picture",
 						text: /* @__PURE__ */ x("button", {
 							className: "picture-in-picture",
 							type: "button",
 							onClick: o,
-							children: /* @__PURE__ */ x("img", { src: _e })
+							children: /* @__PURE__ */ x("img", { src: ye })
 						}),
 						toolTipText: /* @__PURE__ */ x("span", { children: "Picture in picture" })
 					}) : null,
-					/* @__PURE__ */ x(K, {
+					/* @__PURE__ */ x(G, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ x("button", {
@@ -1412,7 +1573,7 @@ position: relative;
 			})]
 		})]
 	});
-}, ke = 3e3, Ae = p`
+}, Fe = 3e3, Ie = p`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -1423,7 +1584,7 @@ position: relative;
      hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events does
      not, and transitioning it holds the item on screen for the length of the fade. */
   transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
-`, je = p`
+`, Le = p`
   position: relative;
   background-color: black;
   display: flex;
@@ -1455,63 +1616,63 @@ position: relative;
   &.hide {
     cursor: none;
   }
-`, Q = (e, t = "") => a.toArray(e).flatMap((e, n) => {
+`, $ = (e, t = "") => a.toArray(e).flatMap((e, n) => {
 	let r = `${t}${s(e) && e.key != null ? e.key : n}`;
-	return s(e) && e.type === o ? Q(e.props.children, `${r}/`) : [{
+	return s(e) && e.type === o ? $(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), Me = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, children: i }) => {
-	let a = P(), o = P((e) => e.hideUI), s = P((e) => e.setHideUI), c = d(void 0), u = d("mouse");
-	l(() => () => clearTimeout(c.current), []);
-	let f = () => {
-		s(!1), clearTimeout(c.current), c.current = setTimeout(() => s(!0), ke);
+}), Re = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
+	let o = P(), s = P((e) => e.hideUI), c = P((e) => e.setHideUI), u = d(void 0), f = d("mouse");
+	l(() => () => clearTimeout(u.current), []);
+	let p = () => {
+		c(!1), clearTimeout(u.current), u.current = setTimeout(() => c(!0), Fe);
 	};
 	return /* @__PURE__ */ S("div", {
-		css: je,
+		css: Le,
 		ref: e,
 		onPointerMove: (e) => {
-			u.current = e.pointerType, e.pointerType === "mouse" && f();
+			f.current = e.pointerType, e.pointerType === "mouse" && p();
 		},
 		onPointerDown: (e) => {
-			u.current = e.pointerType;
+			f.current = e.pointerType;
 		},
 		onMouseOut: (e) => {
 			let t = e.relatedTarget;
 			if (t && e.currentTarget.contains(t)) return;
 			let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
-			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(c.current), s(!0));
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(u.current), c(!0));
 		},
-		className: o ? "hide" : "",
+		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ x(B, { onCanvasRef: n }),
-			Q(r).map(({ key: e, item: t }) => /* @__PURE__ */ x("div", {
-				css: Ae,
-				style: { ...o ? {
+			/* @__PURE__ */ x(me, { onCanvasRef: n }),
+			$(r).map(({ key: e, item: t }) => /* @__PURE__ */ x("div", {
+				css: Ie,
+				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
 					pointerEvents: "none"
 				} : {} },
 				children: t
 			}, e)),
-			/* @__PURE__ */ x(Oe, {}),
+			i === !1 ? null : /* @__PURE__ */ x(Pe, {}),
 			/* @__PURE__ */ S("div", {
 				className: "video",
 				onClick: () => {
-					if (u.current === "mouse") {
-						a.togglePaused();
+					if (f.current === "mouse") {
+						o.togglePaused();
 						return;
 					}
-					o ? f() : (clearTimeout(c.current), s(!0));
+					s ? p() : (clearTimeout(u.current), c(!0));
 				},
 				children: [t ? /* @__PURE__ */ x("video", {
 					ref: t,
 					playsInline: !0
-				}) : null, i]
+				}) : null, a]
 			})
 		]
 	});
-}, Ne = ({ options: e, children: t }) => {
+}, ze = ({ options: e, children: t }) => {
 	let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: o, publicPath: s, libavWorkerUrl: c, read: u, thumbnailRead: d, thumbnailsEnabled: p } = r ?? {}, m = _(), h = g(), [v, y] = f(null), [b, S] = f(null), C = n?.media ?? v;
 	l(() => (m?.(C), () => m?.(null)), [C, m]), oe(v, b, r);
 	let w = L({
@@ -1549,30 +1710,34 @@ position: relative;
 	let k = n?.subtitles?.selection, A = n?.audioTracks?.selection;
 	return l(() => {
 		k && D({
-			subtitleTracks: k.options.map(({ id: e, label: t }) => ({
+			subtitleTracks: k.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
-				label: t
+				label: t,
+				disabled: n
 			})),
 			selectedSubtitleTrack: k.selectedId ?? void 0,
-			selectSubtitleTrack: (e) => k.select(e == null ? null : String(e))
+			selectSubtitleTrack: (e) => k.select(e == null ? null : String(e)),
+			subtitleOffLabel: k.offLabel
 		});
 	}, [D, k]), l(() => {
 		A && D({
-			audioTracks: A.options.map(({ id: e, label: t }) => ({
+			audioTracks: A.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
-				label: t
+				label: t,
+				disabled: n
 			})),
 			selectedAudioTrack: A.selectedId ?? void 0,
 			selectAudioTrack: (e) => A.select(String(e))
 		});
-	}, [D, A]), /* @__PURE__ */ x(Me, {
+	}, [D, A]), /* @__PURE__ */ x(Re, {
 		ref: h,
 		onVideoRef: n ? void 0 : y,
 		onCanvasRef: S,
 		overlay: e.overlay,
+		controls: e.controls,
 		children: t
 	});
-}, Pe = p`
+}, Be = p`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -1584,6 +1749,45 @@ position: relative;
    */
   --mp-unit: 10px;
 
+  /**
+   * The chrome's own typeface, for exactly the reason the unit above exists.
+   *
+   * \`font-family\` inherits, and this library declared it nowhere, so every label drew in whatever the
+   * embedding document happened to set, and in the UA's serif where it set nothing. Not hypothetical:
+   * stub mounts the player in a second document, \`embed.html\`, which sets no font and loads no face,
+   * and the entire settings menu came out in Times New Roman.
+   *
+   * Named faces only, no bundled webfont. The chrome is a handful of short labels, so a font request
+   * on the critical path of a document whose job is to paint video buys a round trip and a flash of
+   * unstyled text for nothing.
+   *
+   * Read through \`var()\` so a host with a brand face sets \`--mp-font-family\` on any ancestor and it
+   * inherits in. A bare \`font-family\` on the host can no longer reach the chrome: this declaration is
+   * on the player element itself and beats anything inherited.
+   */
+  font-family: var(
+    --mp-font-family,
+    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'
+  );
+
+  /**
+   * The chrome's default ink, same argument again.
+   *
+   * Most text here names its own colour, but the two time readouts do not: the elapsed/duration pair
+   * and the seekbar's hover time carry a font token and a black text-shadow and nothing else.
+   * Inherited from a host that declares none that resolves to \`canvastext\`, which is black text under
+   * a black halo on a dark gradient.
+   */
+  color: #fff;
+
+  /**
+   * The settings menu scrolls, and a UA that has not been told the surface is dark paints that
+   * scrollbar in its light theme: a white track down the side of a #1c1c1c menu. Declared here rather
+   * than asked of the host, so it reaches the menu and nothing outside the player.
+   */
+  color-scheme: dark;
+
   /**
    * The other half of owning the chrome's own scale.
    *
@@ -1603,17 +1807,17 @@ position: relative;
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, $ = (e) => /* @__PURE__ */ x("div", {
-	css: Pe,
-	children: /* @__PURE__ */ x(N.Provider, { children: /* @__PURE__ */ x(Ne, {
+`, Ve = (e) => /* @__PURE__ */ x("div", {
+	css: Be,
+	children: /* @__PURE__ */ x(N.Provider, { children: /* @__PURE__ */ x(ze, {
 		options: e,
 		children: e.children
 	}) })
-}), Fe = (e) => !!e && typeof e == "object" && "at" in e, Ie = (e) => !!e && typeof e == "object" && "selection" in e, Le = ({ blob: e, name: t }) => ({
+}), He = (e) => !!e && typeof e == "object" && "at" in e, Ue = (e) => !!e && typeof e == "object" && "selection" in e, We = ({ 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()
-}), Re = async (e, t) => {
+}), Ge = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -1623,8 +1827,8 @@ position: relative;
 	if (!Number.isFinite(i) || i <= 0) throw Error("The source did not report its length");
 	if (!r && n.status !== 206) throw Error("The source does not support range requests");
 	return i;
-}, ze = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await Re(e, r);
+}, Ke = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await Ge(e, r);
 	return {
 		length: i,
 		name: n,
@@ -1637,9 +1841,9 @@ position: relative;
 			return a.arrayBuffer();
 		}
 	};
-}, Be = async (e) => {
-	if ("blob" in e) return Le(e);
-	if ("url" in e) return ze(e);
+}, qe = async (e) => {
+	if ("blob" in e) return We(e);
+	if ("url" in e) return Ke(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -1648,4 +1852,4 @@ position: relative;
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { $ as MediaPlayer, $ as default, N as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, Be as inputToRemuxerInput, Ie as isDelegatedTracks, Fe as isExternalThumbnails, M as sourceFeature, e as startPlayback, R as usePictureInPicture, P as usePlayer, L as useSeekThumbnails };
+export { Ve as MediaPlayer, Ve as default, N as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, qe as inputToRemuxerInput, Ue as isDelegatedTracks, He as isExternalThumbnails, M as sourceFeature, e as startPlayback, R as usePictureInPicture, P as usePlayer, L as useSeekThumbnails };