@banou/media-player 0.8.17 → 0.8.18

package/dist/index.js

@@ -67,17 +67,17 @@ var re = {
 	1e3,
 	3e3,
 	1e4
-], ue = 6e4, de = 500, z = (e) => e instanceof Error ? e.message : String(e), fe = (e) => {
+], ue = 6e4, de = 500, fe = (e) => e instanceof Error ? e.message : String(e), pe = (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(z(n)), n = n?.cause;
+		t.push(fe(n)), n = n?.cause;
 	}
 	return t.length ? t.join("\n") : void 0;
-}, pe = (e, t, r) => {
+}, me = (e, t, r) => {
 	let a = R(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, seekPrepareBudgetMs: b = de } = r ?? {}, [x, S] = m(void 0), [C, w] = m(0), T = p({
 		count: 0,
 		at: 0
@@ -137,7 +137,7 @@ var re = {
 			ready: !1
 		});
 		let u = (t, n) => {
-			let r = Date.now(), i = z(t), o = fe(t), s = a.playbackErrors, c = s[s.length - 1];
+			let r = Date.now(), i = fe(t), o = pe(t), s = a.playbackErrors, c = s[s.length - 1];
 			if (c && c.message === i && c.detail === o && c.recovered === n) {
 				let e = {
 					...c,
@@ -246,13 +246,13 @@ var re = {
 		y,
 		C
 	]);
-}, me = 5e3, he = 6e4, B = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
+}, he = 5e3, ge = 6e4, _e = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
 	let [o, s] = m([]), c = p(null), l = p(i);
 	l.current = i;
 	let u = f(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = p(u);
 	return h.current = u, d(() => {
 		if (!n || !i || !e || !t) return;
-		let a = !1, o = null, u, d = me, f = () => {
+		let a = !1, o = null, u, d = he, f = () => {
 			r({
 				publicPath: e,
 				workerUrl: t,
@@ -268,7 +268,7 @@ var re = {
 				}
 				o = e, c.current = e, e.update(h.current);
 			}, () => {
-				a || (u = setTimeout(f, d), d = Math.min(d * 2, he));
+				a || (u = setTimeout(f, d), d = Math.min(d * 2, ge));
 			});
 		};
 		return f(), () => {
@@ -281,7 +281,7 @@ var re = {
 	]), d(() => {
 		c.current?.update(u);
 	}, [u]), o;
-}, V = (e, n) => {
+}, z = (e, n) => {
 	let r = p(null), [i, o] = m(!1), [s] = m(() => t());
 	d(() => {
 		if (!e || !n || !s) return;
@@ -309,7 +309,7 @@ var re = {
 		mode: s,
 		burnedIn: i
 	};
-}, H = {
+}, B = {
 	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    ",
@@ -336,14 +336,14 @@ var re = {
 		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    "
 	}
-}, ge = h`
+}, ve = h`
   top: unset !important;
   left: unset !important;
   width: 100%;
   height: 100%;
   margin: auto;
   pointer-events: none;
-`, _e = h`
+`, ye = h`
   position: absolute;
   top: 0;
   left: 0;
@@ -351,7 +351,7 @@ var re = {
   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));
-  ${H.headings.small}
+  ${B.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -372,7 +372,7 @@ var re = {
 
   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);
-`, ve = h`
+`, be = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -392,53 +392,75 @@ var re = {
   to { transform: rotate(360deg); }
 `} 0.8s linear infinite;
   }
-`, ye = h`
+`, xe = h`
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${H.bLarge.regular}
+  ${B.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, be = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", xe = ({ onCanvasRef: e }) => {
+`, Se = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", Ce = ({ onCanvasRef: e }) => {
 	let t = R((e) => e.title), n = R((e) => e.hideUI), r = R((e) => e.playbackError), i = R((e) => e.ready), a = R((e) => e.size), o = R((e) => e.waiting);
 	return /* @__PURE__ */ w(S, { children: [
 		t ? /* @__PURE__ */ C("div", {
 			className: "title",
-			css: _e,
+			css: ye,
 			style: { ...n ? {
 				opacity: "0",
 				pointerEvents: "none"
 			} : {} },
 			children: t
 		}) : void 0,
-		(a ? !i : o) && !r ? /* @__PURE__ */ C("div", { css: ve }) : void 0,
+		(a ? !i : o) && !r ? /* @__PURE__ */ C("div", { css: be }) : void 0,
 		r ? /* @__PURE__ */ C("div", {
-			css: ye,
-			children: be(r)
+			css: xe,
+			children: Se(r)
 		}) : void 0,
 		/* @__PURE__ */ C("canvas", {
 			ref: e,
-			css: ge
+			css: ve
 		})
 	] });
-}, U = 1e-4, W = 1, Se = (e) => Math.max(U, Math.min(W, e)) ** 2, G = (e) => Math.max(U, Math.min(W, e)) ** (W / 2), K = (e) => {
+}, 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) => {
 	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`
+}, we = (e, t) => `${G(e)} / ${G(t)}`, Te = (e) => h`
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
 
-  border-radius: calc(0.4 * var(--mp-unit));
+  /*
+   * Bounded here rather than at each call site.
+   *
+   * react-tooltip's own chip rule carries width: max-content, so with nothing opposing it a chip
+   * grows to the widest UNWRAPPED line of its content: a two sentence tooltip measured 1178px
+   * through this component. Both declarations are load bearing, since a bound with no wrapping only
+   * moves the overflow inside a narrow box. 26 units is the width control-bar.tsx was already
+   * imposing on its own two line tooltip by hand, so nothing in the bar changes shape.
+   */
+  max-width: min(calc(26 * var(--mp-unit)), calc(100vw - calc(2.4 * var(--mp-unit))));
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: left;
+
+  /*
+   * The radius carries !important for the same reason the paddings below do.
+   *
+   * react-tooltip injects its stylesheet from a passive effect while emotion inserts through
+   * useInsertionEffect, which runs earlier, so react-tooltip's sheet lands in the head LAST at
+   * exactly this specificity and wins every tie. Its own radius is 3px, which is what was drawn
+   * here until this was stated.
+   */
+  border-radius: calc(0.4 * var(--mp-unit))!important;
   user-select: none;
 
   z-index: 3;
 
   * {
-    ${H.bMedium.regular}
+    ${B.bMedium.regular}
   }
 
   ${e === "sm" && h`
@@ -450,20 +472,48 @@ var re = {
   ${e === "lg" && h`
     padding: calc(1.2 * var(--mp-unit))!important;
   `}
-`, q = ({ 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__ */ w(S, { children: [/* @__PURE__ */ C("div", {
-	"data-tooltip-id": e,
-	"data-open": !0,
-	"data-tooltip-offset": a,
-	"data-tooltip-delay-show": r,
-	"data-tooltip-delay-hide": i,
-	"data-tooltip-place": o,
-	children: n
-}), !s && /* @__PURE__ */ C(ne, {
-	css: we(c),
-	id: e,
-	noArrow: !0,
-	children: t
-})] }), J = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+`, K = {
+	x: -1,
+	y: -1,
+	anchors: 0
+}, Ee = (e) => {
+	K.x = e.clientX, K.y = e.clientY;
+}, De = () => (K.anchors++ === 0 && window.addEventListener("pointermove", Ee, {
+	capture: !0,
+	passive: !0
+}), () => {
+	--K.anchors === 0 && window.removeEventListener("pointermove", Ee, { capture: !0 });
+}), q = ({ 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 = De(), t = () => {
+			let e = l.current;
+			if (!e) return;
+			let { left: t, right: n, top: r, bottom: i } = e.getBoundingClientRect();
+			K.x >= t && K.x < n && K.y >= r && K.y < i || u.current?.close();
+		}, n = ["fullscreenchange", "webkitfullscreenchange"];
+		for (let e of n) document.addEventListener(e, t);
+		return () => {
+			e();
+			for (let e of n) document.removeEventListener(e, t);
+		};
+	}, []), /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("div", {
+		ref: l,
+		"data-tooltip-id": e,
+		"data-open": !0,
+		"data-tooltip-offset": a,
+		"data-tooltip-delay-show": r,
+		"data-tooltip-delay-hide": i,
+		"data-tooltip-place": o,
+		children: n
+	}), !s && /* @__PURE__ */ C(ne, {
+		ref: u,
+		css: Te(c),
+		id: e,
+		noArrow: !0,
+		children: t
+	})] });
+}, J = ({ 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) => {
@@ -502,7 +552,7 @@ var re = {
 			style: { touchAction: "none" }
 		}
 	};
-}, Te = h`
+}, Oe = h`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -556,7 +606,7 @@ var re = {
     box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${H.bMedium.bold}
+    ${B.bMedium.bold}
 
     position: absolute;
     /* Anchored on its bottom edge rather than its top: now that it has a background its height
@@ -673,14 +723,14 @@ var re = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, Ee = 4, De = () => {
+`, ke = 4, Ae = () => {
 	let e = R(), t = R((e) => e.currentTime), n = R((e) => e.requestSeek), r = R((e) => e.duration), i = R((e) => e.size), a = R((e) => e.downloadedRanges), o = R((e) => e.indexes), s = R((e) => e.thumbnails), c = R((e) => e.thumbnailAt), l = p(null), [u, h] = m(void 0), [g, _] = m(void 0), v = p(void 0), y = p(0), b = p(void 0), x = p(void 0), S = p(!1), { dragging: T, handlers: E } = J({
 		ref: l,
 		onChange: (e) => {
 			if (y.current += 1, b.current = e, x.current === void 0) x.current = e;
 			else if (!S.current) {
 				let t = l.current?.getBoundingClientRect().width ?? 0;
-				Math.abs(e - x.current) * t > Ee && (S.current = !0);
+				Math.abs(e - x.current) * t > ke && (S.current = !0);
 			}
 			h(e), v.current !== "mouse" && _(e * r);
 		}
@@ -742,7 +792,7 @@ var re = {
 		g
 	]);
 	return /* @__PURE__ */ w("div", {
-		css: Te,
+		css: Oe,
 		ref: l,
 		className: T ? "progress-bar dragging" : "progress-bar",
 		onMouseMove: A,
@@ -783,7 +833,7 @@ var re = {
 			})
 		]
 	});
-}, Oe = "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", Y = {
+}, je = "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", Y = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -793,7 +843,7 @@ var re = {
 	strokeWidth: 2,
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, ke = (e) => /* @__PURE__ */ w("svg", {
+}, Me = (e) => /* @__PURE__ */ w("svg", {
 	...Y,
 	...e,
 	children: [/* @__PURE__ */ C("rect", {
@@ -804,7 +854,7 @@ var re = {
 		rx: "2",
 		ry: "2"
 	}), /* @__PURE__ */ C("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" })]
-}), Ae = (e) => /* @__PURE__ */ w("svg", {
+}), Ne = (e) => /* @__PURE__ */ w("svg", {
 	...Y,
 	...e,
 	children: [
@@ -824,7 +874,7 @@ var re = {
 			y2: "22"
 		})
 	]
-}), je = (e) => /* @__PURE__ */ w("svg", {
+}), Pe = (e) => /* @__PURE__ */ w("svg", {
 	...Y,
 	...e,
 	children: [
@@ -839,6 +889,21 @@ var re = {
 		}),
 		/* @__PURE__ */ C("path", { d: "M14.5 18.5h2m2 0h1" })
 	]
+}), Fe = (e) => /* @__PURE__ */ w("svg", {
+	...Y,
+	...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" }),
+		/* @__PURE__ */ C("rect", {
+			x: "12",
+			y: "13",
+			width: "10",
+			height: "8",
+			rx: "1",
+			ry: "1"
+		}),
+		/* @__PURE__ */ C("path", { d: "M6 9h3m2 0h2" })
+	]
 }), X = h`
 .popover {
   position: absolute;
@@ -878,7 +943,7 @@ var re = {
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${H.bMedium.regular}
+  ${B.bMedium.regular}
 
   z-index: 4;
 
@@ -921,7 +986,7 @@ var re = {
 
       .secondary {
         color: #eee;
-        ${H.bSmall.regular}
+        ${B.bSmall.regular}
       }
     }
   }
@@ -963,10 +1028,10 @@ var re = {
   .failed {
     border-bottom: 1px solid #4D4D4E;
     color: #f66;
-    ${H.bSmall.regular}
+    ${B.bSmall.regular}
   }
 }
-`, Me = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
+`, Ie = ({ 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", {
@@ -1034,7 +1099,7 @@ var re = {
 			});
 		}
 	};
-}, Ne = h`
+}, Le = 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;
@@ -1078,7 +1143,7 @@ ${X}
 
     color: #fff;
     cursor: pointer;
-    ${H.bSmall.regular}
+    ${B.bSmall.regular}
 
     &:hover {
       background-color: rgba(255,255,255,.1);
@@ -1099,7 +1164,7 @@ ${X}
 
     .when {
       color: #bbb;
-      ${H.bSmall.regular}
+      ${B.bSmall.regular}
 
       /* the one part of the line worth scanning for, so it is the one part at full brightness */
       .count {
@@ -1118,27 +1183,27 @@ ${X}
       color: #ddd;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
-      ${H.bSmall.regular}
+      ${B.bSmall.regular}
     }
   }
 }
-`, Pe = (e) => new Date(e).toLocaleTimeString(), Q = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : K(Math.max(0, e)), Fe = (e) => e.reduce((e, t) => e + t.count, 0), Ie = (e) => e.map((e, t) => {
+`, Re = (e) => new Date(e).toLocaleTimeString(), Q = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : G(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();
 	return [
 		`${t + 1}. ${r}${n ? ` (at ${n})` : ""}${e.recovered ? " [recovered]" : ""}`,
 		e.message,
 		e.detail
 	].filter(Boolean).join("\n");
-}).join("\n\n"), Le = () => {
+}).join("\n\n"), Ve = () => {
 	let e = R((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = Z(), [i, a] = m(!1);
 	if (e.length === 0) return null;
 	let o = () => {
-		navigator.clipboard?.writeText(Ie(e)).then(() => {
+		navigator.clipboard?.writeText(Be(e)).then(() => {
 			a(!0), setTimeout(() => a(!1), 2e3);
 		}, (e) => console.warn("[media-player] could not copy the errors:", e));
-	}, s = `Playback errors (${Fe(e)})`;
+	}, s = `Playback errors (${ze(e)})`;
 	return /* @__PURE__ */ w("div", {
-		css: Ne,
+		css: Le,
 		ref: r,
 		children: [/* @__PURE__ */ C(q, {
 			id: "errors",
@@ -1169,8 +1234,8 @@ ${X}
 					/* @__PURE__ */ w("span", {
 						className: "when",
 						children: [
-							Pe(e.at),
-							e.count > 1 ? ` to ${Pe(e.lastAt)}` : "",
+							Re(e.at),
+							e.count > 1 ? ` to ${Re(e.lastAt)}` : "",
 							Q(e.atMediaTime) ? ` at ${Q(e.atMediaTime)}` : "",
 							e.recovered ? " recovered" : "",
 							e.count > 1 ? /* @__PURE__ */ C("span", {
@@ -1191,7 +1256,7 @@ ${X}
 			}, `${e.at}-${t}`))]
 		})]
 	});
-}, Re = h`
+}, He = h`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -1244,7 +1309,7 @@ width: 100%;
     }
   }
 }
-`, ze = () => {
+`, Ue = () => {
 	let e = R(), t = R((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 } = J({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(l(t))
@@ -1261,7 +1326,7 @@ width: 100%;
 	}, [t]);
 	let m = c(s);
 	return /* @__PURE__ */ w("div", {
-		css: Re,
+		css: He,
 		children: [/* @__PURE__ */ w("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ C("div", {
 			className: "playback-slider",
 			ref: n,
@@ -1279,7 +1344,7 @@ width: 100%;
 			})
 		})]
 	});
-}, Be = h`
+}, We = 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
@@ -1338,7 +1403,7 @@ ${X}
   }
 }
 
-`, Ve = () => {
+`, Ge = () => {
 	let e = R(), t = R((e) => e.playbackRate), n = R((e) => e.audioTracks), r = R((e) => e.selectedAudioTrack), i = R((e) => e.selectAudioTrack), [a, o] = m(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } = Z({ onReset: () => o(0) }), p = (t) => {
 		e.setPlaybackRate(t), o(0);
 	}, h = (e) => {
@@ -1347,7 +1412,7 @@ ${X}
 		o(e);
 	};
 	return /* @__PURE__ */ w("div", {
-		css: Be,
+		css: We,
 		ref: l,
 		children: [
 			/* @__PURE__ */ C(q, {
@@ -1386,7 +1451,7 @@ ${X}
 					}),
 					/* @__PURE__ */ C("div", {
 						className: "slider no-hover",
-						children: /* @__PURE__ */ C(ze, {})
+						children: /* @__PURE__ */ C(Ue, {})
 					}),
 					/* @__PURE__ */ w("div", {
 						className: "options no-hover",
@@ -1411,7 +1476,7 @@ ${X}
 					})
 				]
 			}),
-			s && a === 2 && /* @__PURE__ */ C(Me, {
+			s && a === 2 && /* @__PURE__ */ C(Ie, {
 				title: "Audio",
 				tracks: n,
 				selected: r,
@@ -1422,7 +1487,7 @@ ${X}
 			})
 		]
 	});
-}, He = h`
+}, Ke = 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;
@@ -1439,12 +1504,12 @@ position: static;
 }
 
 ${X}
-`, Ue = () => {
+`, qe = () => {
 	let e = R((e) => e.subtitleTracks), t = R((e) => e.selectedSubtitleTrack), n = R((e) => e.selectSubtitleTrack), r = R((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Z();
 	if (e.length === 0) return null;
 	let u = t !== void 0;
 	return /* @__PURE__ */ w("div", {
-		css: He,
+		css: Ke,
 		ref: o,
 		children: [/* @__PURE__ */ C(q, {
 			id: "subtitles",
@@ -1456,10 +1521,10 @@ ${X}
 				"aria-label": "Subtitles",
 				"aria-expanded": i,
 				"aria-pressed": u,
-				children: u ? /* @__PURE__ */ C(ke, { className: "captions" }) : /* @__PURE__ */ C(Ae, { className: "captions-off" })
+				children: u ? /* @__PURE__ */ C(Me, { className: "captions" }) : /* @__PURE__ */ C(Ne, { className: "captions-off" })
 			}),
 			toolTipText: /* @__PURE__ */ C("span", { children: "Subtitles" })
-		}), i && /* @__PURE__ */ C(Me, {
+		}), i && /* @__PURE__ */ C(Ie, {
 			title: "Subtitles",
 			tracks: e,
 			selected: t,
@@ -1469,14 +1534,13 @@ ${X}
 			failed: c
 		})]
 	});
-}, We = {
+}, Je = {
 	primary: "#EAEBEE",
 	secondary: "#D0D0D9",
 	hover: "rgba(255, 255, 255, 0.13)",
-	accent: "#6EA8FE",
 	borderPrimary: "#384F70",
 	backgroundTooltip: "#222222"
-}, Ge = h`
+}, Ye = h`
   display: flex;
   align-items: center;
 
@@ -1519,7 +1583,7 @@ ${X}
     width: 10px;
     height: 10px;
   }
-`, Ke = ({ value: e, onChange: t }) => {
+`, Xe = ({ value: e, onChange: t }) => {
 	let n = R((e) => e.volume), r = R((e) => e.muted), i = p(null), a = p(null), { handlers: o } = J({
 		ref: a,
 		onChange: t
@@ -1534,12 +1598,12 @@ ${X}
 			e && e.removeEventListener("wheel", s);
 		};
 	}, [e]);
-	let c = e * 100, l = f(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
+	let c = e * 100, l = f(() => Math.round(r ? 0 : W(n) * 100), [n, r]);
 	return /* @__PURE__ */ C(q, {
 		id: "volume-slider",
 		text: /* @__PURE__ */ C("div", {
 			ref: i,
-			css: Ge,
+			css: Ye,
 			...o,
 			children: /* @__PURE__ */ C("div", {
 				ref: a,
@@ -1558,7 +1622,7 @@ ${X}
 			children: [l, "%"]
 		})
 	});
-}, qe = h`
+}, Ze = h`
   position: relative;
   display: flex;
   align-items: center;
@@ -1583,7 +1647,7 @@ ${X}
       border-radius: 4px;
 
       .volume-value {
-        ${H.bMedium.regular};
+        ${B.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -1621,10 +1685,10 @@ ${X}
     }
   }
 
-`, Je = ({ ref: e }) => {
-	let t = R(), n = R((e) => e.volume), r = R((e) => e.muted), i = f(() => G(n), [n]);
+`, Qe = ({ ref: e }) => {
+	let t = R(), n = R((e) => e.volume), r = R((e) => e.muted), i = f(() => W(n), [n]);
 	return /* @__PURE__ */ w("div", {
-		css: qe,
+		css: Ze,
 		children: [/* @__PURE__ */ C(q, {
 			id: "sound",
 			text: /* @__PURE__ */ C("button", {
@@ -1644,27 +1708,25 @@ ${X}
 			className: "volume-slider-container",
 			children: /* @__PURE__ */ C("div", {
 				className: "volume-slider-background",
-				children: /* @__PURE__ */ C(Ke, {
+				children: /* @__PURE__ */ C(Xe, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(Se(e));
+						t.setVolume(U(e));
 					}
 				})
 			})
 		})]
 	});
-}, $ = .05, Ye = 5, Xe = h`
+}, $ = .05, $e = 5, et = h`
   display: flex;
   flex-direction: column;
   gap: calc(0.4 * var(--mp-unit));
-  max-width: calc(26 * var(--mp-unit));
-  white-space: normal;
 
   .hint {
     opacity: 0.72;
     font-size: 0.9em;
   }
-`, Ze = h`
+`, tt = h`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -1722,16 +1784,6 @@ ${X}
         }
       }
 
-      /**
-       * The burn-in control's own on state.
-       *
-       * Not \`colors.hover\`: the pointer is on the button at the moment of the click, so an on state
-       * drawn in the hover colour is invisible exactly when it is being looked for.
-       */
-      button[aria-pressed='true'] svg {
-        stroke: ${We.accent};
-      }
-
       .play, .sound, .time, .errors, .subtitles, .settings, .picture-in-picture, .full-screen {
         display: flex;
         align-items: center;
@@ -1764,7 +1816,7 @@ ${X}
         cursor: pointer;
 
         :hover {
-          background-color: ${We.hover};
+          background-color: ${Je.hover};
         }
 
         /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -1781,7 +1833,7 @@ ${X}
 
     .left {
       .time {
-        ${H.bMedium.regular}
+        ${B.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -1802,10 +1854,10 @@ ${X}
       }
     }
   }
-`, Qe = () => {
+`, nt = () => {
 	let e = R(), t = R((e) => e.paused), n = R((e) => e.currentTime), r = R((e) => e.duration), i = R((e) => e.fullscreen), a = R((e) => e.hideUI), o = R((e) => e.togglePictureInPicture), s = R((e) => e.pictureInPictureMode), c = R((e) => e.burnedInSubtitles), l = R((e) => e.subtitleTracks), f = R((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();
+		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();
 	}, [e]);
 	d(() => {
 		let t = (t) => f ? f(t) : e.seek(t), n = (n) => {
@@ -1826,8 +1878,8 @@ ${X}
 			});
 			else if (n.key === "ArrowRight") {
 				if (!e.duration) return;
-				t(Math.min(e.currentTime + Ye, e.duration));
-			} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - Ye, 0)) : i = !1;
+				t(Math.min(e.currentTime + $e, e.duration));
+			} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - $e, 0)) : i = !1;
 			i && n.preventDefault();
 		};
 		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
@@ -1848,12 +1900,12 @@ ${X}
 	return d(() => {
 		if (p) return p.addEventListener("wheel", b, { passive: !1 }), () => p.removeEventListener("wheel", b);
 	}, [p, b]), /* @__PURE__ */ w("div", {
-		css: Ze,
+		css: tt,
 		style: { ...a ? {
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ C(De, {}), /* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ C(Ae, {}), /* @__PURE__ */ w("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ w("div", {
 				className: "left",
@@ -1870,18 +1922,18 @@ ${X}
 						}),
 						toolTipText: /* @__PURE__ */ C("span", { children: v ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ C(Je, { ref: h }),
+					/* @__PURE__ */ C(Qe, { ref: h }),
 					/* @__PURE__ */ C("div", {
 						className: "time",
-						children: Ce(n, r)
+						children: we(n, r)
 					})
 				]
 			}), /* @__PURE__ */ w("div", {
 				className: "right",
 				children: [
-					/* @__PURE__ */ C(Le, {}),
-					/* @__PURE__ */ C(Ue, {}),
 					/* @__PURE__ */ C(Ve, {}),
+					/* @__PURE__ */ C(qe, {}),
+					/* @__PURE__ */ C(Ge, {}),
 					o ? /* @__PURE__ */ C(q, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
@@ -1892,13 +1944,13 @@ ${X}
 							disabled: g && !_,
 							"aria-label": g ? "Put the subtitles in the video" : "Picture in picture",
 							"aria-pressed": g ? c : void 0,
-							children: g ? /* @__PURE__ */ C(je, {}) : /* @__PURE__ */ C("img", {
-								src: Oe,
+							children: g ? C(c ? Pe : Fe, {}) : /* @__PURE__ */ C("img", {
+								src: je,
 								alt: ""
 							})
 						}),
 						toolTipText: /* @__PURE__ */ w("span", {
-							css: Xe,
+							css: et,
 							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"
@@ -1925,7 +1977,7 @@ ${X}
 			})]
 		})]
 	});
-}, $e = 9e3, et = h`
+}, rt = 9e3, it = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -1963,12 +2015,12 @@ ${X}
   }
 
   .title {
-    ${H.bMedium.bold}
+    ${B.bMedium.bold}
     color: #fff;
   }
 
   .body {
-    ${H.bSmall.regular}
+    ${B.bSmall.regular}
     color: rgba(255, 255, 255, 0.75);
   }
 
@@ -1977,9 +2029,9 @@ ${X}
     flex: none;
     font-size: calc(2.6 * var(--mp-unit));
     line-height: 1;
-    color: #6EA8FE;
+    color: #fff;
   }
-`, tt = () => {
+`, at = () => {
 	let e = R((e) => e.burnedInSubtitles), t = R((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
@@ -1987,10 +2039,10 @@ ${X}
 			return;
 		}
 		r(!0);
-		let n = setTimeout(() => r(!1), $e);
+		let n = setTimeout(() => r(!1), rt);
 		return () => clearTimeout(n);
 	}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ C("div", {
-		css: et,
+		css: it,
 		className: n ? "show" : "",
 		role: "status",
 		children: /* @__PURE__ */ w("div", {
@@ -2011,7 +2063,7 @@ ${X}
 			})]
 		})
 	});
-}, nt = 3e3, rt = h`
+}, ot = 3e3, st = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2022,7 +2074,7 @@ ${X}
      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;
-`, it = h`
+`, ct = h`
   position: relative;
   background-color: black;
   display: flex;
@@ -2054,20 +2106,20 @@ ${X}
   &.hide {
     cursor: none;
   }
-`, at = (e, t = "") => s.toArray(e).flatMap((e, n) => {
+`, lt = (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 ? at(e.props.children, `${r}/`) : [{
+	return l(e) && e.type === c ? lt(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), ot = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
+}), ut = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
 	let o = R(), s = R((e) => e.hideUI), c = R((e) => e.setHideUI), l = p(void 0), u = p("mouse");
 	d(() => () => clearTimeout(l.current), []);
 	let f = () => {
-		c(!1), clearTimeout(l.current), l.current = setTimeout(() => c(!0), nt);
+		c(!1), clearTimeout(l.current), l.current = setTimeout(() => c(!0), ot);
 	};
 	return /* @__PURE__ */ w("div", {
-		css: it,
+		css: ct,
 		ref: e,
 		onPointerMove: (e) => {
 			u.current = e.pointerType, e.pointerType === "mouse" && f();
@@ -2083,9 +2135,9 @@ ${X}
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ C(xe, { onCanvasRef: n }),
-			at(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
-				css: rt,
+			/* @__PURE__ */ C(Ce, { onCanvasRef: n }),
+			lt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
+				css: st,
 				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
@@ -2093,8 +2145,8 @@ ${X}
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ C(Qe, {}),
-			/* @__PURE__ */ C(tt, {}),
+			i === !1 ? null : /* @__PURE__ */ C(nt, {}),
+			/* @__PURE__ */ C(at, {}),
 			/* @__PURE__ */ w("div", {
 				className: "video",
 				onClick: () => {
@@ -2111,16 +2163,16 @@ ${X}
 			})
 		]
 	});
-}, st = ({ options: e, children: t }) => {
+}, 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 ?? {}, p = y(), h = v(), [g, _] = m(null), [b, x] = m(null), S = n?.media ?? g;
-	d(() => (p?.(S), () => p?.(null)), [S, p]), pe(g, b, r);
-	let w = B({
+	d(() => (p?.(S), () => p?.(null)), [S, p]), me(g, b, r);
+	let w = _e({
 		publicPath: s,
 		workerUrl: c,
 		length: f === !1 ? void 0 : a,
 		read: u ?? l,
 		downloadedRanges: o
-	}), T = n?.thumbnails?.all ?? w, { toggle: E, mode: D, burnedIn: O } = V(g, b), k = R((e) => e.setSourceState);
+	}), T = n?.thumbnails?.all ?? w, { toggle: E, mode: D, burnedIn: O } = z(g, b), k = R((e) => e.setSourceState);
 	d(() => {
 		k({
 			title: i,
@@ -2172,7 +2224,7 @@ ${X}
 			selectedAudioTrack: M.selectedId ?? void 0,
 			selectAudioTrack: (e) => M.select(String(e))
 		});
-	}, [k, M]), /* @__PURE__ */ C(ot, {
+	}, [k, M]), /* @__PURE__ */ C(ut, {
 		ref: h,
 		onVideoRef: n ? void 0 : _,
 		onCanvasRef: x,
@@ -2180,7 +2232,7 @@ ${X}
 		controls: e.controls,
 		children: t
 	});
-}, ct = h`
+}, ft = h`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -2250,17 +2302,17 @@ ${X}
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, lt = (e) => /* @__PURE__ */ C("div", {
-	css: ct,
-	children: /* @__PURE__ */ C(L.Provider, { children: /* @__PURE__ */ C(st, {
+`, pt = (e) => /* @__PURE__ */ C("div", {
+	css: ft,
+	children: /* @__PURE__ */ C(L.Provider, { children: /* @__PURE__ */ C(dt, {
 		options: e,
 		children: e.children
 	}) })
-}), ut = (e) => !!e && typeof e == "object" && "at" in e, dt = (e) => !!e && typeof e == "object" && "selection" in e, ft = ({ blob: e, name: t }) => ({
+}), mt = (e) => !!e && typeof e == "object" && "at" in e, ht = (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()
-}), pt = async (e, t) => {
+}), _t = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -2270,8 +2322,8 @@ ${X}
 	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;
-}, mt = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await pt(e, r);
+}, vt = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await _t(e, r);
 	return {
 		length: i,
 		name: n,
@@ -2284,9 +2336,9 @@ ${X}
 			return a.arrayBuffer();
 		}
 	};
-}, ht = async (e) => {
-	if ("blob" in e) return ft(e);
-	if ("url" in e) return mt(e);
+}, yt = async (e) => {
+	if ("blob" in e) return gt(e);
+	if ("url" in e) return vt(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -2295,4 +2347,4 @@ ${X}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { lt as MediaPlayer, lt as default, L as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, ht as inputToRemuxerInput, dt as isDelegatedTracks, ut as isExternalThumbnails, ie as sourceFeature, i as startPlayback, V as usePictureInPicture, R as usePlayer, B as useSeekThumbnails };
+export { pt as MediaPlayer, pt as default, L as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, yt as inputToRemuxerInput, ht as isDelegatedTracks, mt as isExternalThumbnails, ie as sourceFeature, i as startPlayback, z as usePictureInPicture, R as usePlayer, _e as useSeekThumbnails };

package/dist/react/components/icons.d.ts

@@ -10,3 +10,12 @@ export declare const CaptionsOff: (props: SVGProps<SVGSVGElement>) => import("@e
  * captions glyph either, because the button beside it already is one.
  */
 export declare const SubtitlesInPicture: (props: SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * The same frame with the captions still on the MAIN picture: burn-in is available but off.
+ *
+ * The pair exists because that control is the one button in the bar whose glyph did not move with its
+ * state, so the state was carried by an accent colour and by nothing else. A pair, not a slash: a
+ * slashed resting state reads as unavailable, and the subtitles button beside it already draws
+ * Feather's slash for its own off state.
+ */
+export declare const SubtitlesOutsidePicture: (props: SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/utils/colors.d.ts

@@ -2,8 +2,6 @@ declare const colors: {
     primary: string;
     secondary: string;
     hover: string;
-    /** A control that is ON. Distinct from `hover`, which the pointer is already painting. */
-    accent: string;
     borderPrimary: string;
     backgroundTooltip: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.17",
+  "version": "0.8.18",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",

package/src/lib/react/components/burn-in-hint.tsx

@@ -59,7 +59,7 @@ const style = css`
     flex: none;
     font-size: calc(2.6 * var(--mp-unit));
     line-height: 1;
-    color: #6EA8FE;
+    color: #fff;
   }
 `
 

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

@@ -10,7 +10,7 @@ import { usePlayer } from '../player'
 import { TooltipDisplay } from './tooltip-display'
 import { ProgressBar } from './progress-bar'
 import pictureInPicture from '../../assets/picture-in-picture.svg'
-import { SubtitlesInPicture } from './icons'
+import { SubtitlesInPicture, SubtitlesOutsidePicture } from './icons'
 import ErrorsAction from './errors'
 import SettingsAction from './settings'
 import SubtitlesAction from './subtitles'
@@ -21,17 +21,15 @@ const VOLUME_STEP = 0.05
 const SEEK_STEP = 5
 
 /**
- * Two stacked lines inside a tooltip, with a width to wrap against.
+ * Two stacked lines inside a tooltip.
  *
- * Applied to the content rather than to the tooltip, because react-tooltip renders into a portal and
- * an unconstrained tooltip grows to one long line that runs off the side of the player.
+ * The width to wrap against is no longer here: TooltipDisplay bounds every chip it draws, at the
+ * same 26 units this had imposed by hand, so a call site only says what its content is.
  */
 const tooltipLinesStyle = css`
   display: flex;
   flex-direction: column;
   gap: calc(0.4 * var(--mp-unit));
-  max-width: calc(26 * var(--mp-unit));
-  white-space: normal;
 
   .hint {
     opacity: 0.72;
@@ -97,16 +95,6 @@ const style = css`
         }
       }
 
-      /**
-       * The burn-in control's own on state.
-       *
-       * Not \`colors.hover\`: the pointer is on the button at the moment of the click, so an on state
-       * drawn in the hover colour is invisible exactly when it is being looked for.
-       */
-      button[aria-pressed='true'] svg {
-        stroke: ${colors.accent};
-      }
-
       .play, .sound, .time, .errors, .subtitles, .settings, .picture-in-picture, .full-screen {
         display: flex;
         align-items: center;
@@ -333,15 +321,20 @@ export const ControlBar = () => {
                     aria-label={burnIn ? 'Put the subtitles in the video' : 'Picture in picture'}
                     aria-pressed={burnIn ? burnedInSubtitles : undefined}
                   >
+                    {/* The glyph carries the on state, which is what every other toggle in this bar
+                        does. It used to be carried by an accent stroke instead, and that was the only
+                        blue in the chrome. */}
                     {burnIn
-                      ? <SubtitlesInPicture />
+                      ? burnedInSubtitles
+                        ? <SubtitlesInPicture />
+                        : <SubtitlesOutsidePicture />
                       : <img src={pictureInPicture} alt='' />}
                   </button>
                 }
                 toolTipText={
-                  // The tooltip is portaled out of this subtree, so the control bar's own rules
-                  // never reach it: a bare `small` stays inline and runs straight on from the line
-                  // above it. Both lines carry their layout themselves.
+                  // The chip is drawn in its own subtree, where the control bar's rules never
+                  // reach it: a bare `small` stays inline and runs straight on from the line above
+                  // it. Both lines carry their layout themselves.
                   <span css={tooltipLinesStyle}>
                     <span className='lead'>
                       {!burnIn

package/src/lib/react/components/icons.tsx

@@ -51,3 +51,19 @@ export const SubtitlesInPicture = (props: SVGProps<SVGSVGElement>) => (
     <path d='M14.5 18.5h2m2 0h1' />
   </svg>
 )
+
+/**
+ * The same frame with the captions still on the MAIN picture: burn-in is available but off.
+ *
+ * The pair exists because that control is the one button in the bar whose glyph did not move with its
+ * state, so the state was carried by an accent colour and by nothing else. A pair, not a slash: a
+ * slashed resting state reads as unavailable, and the subtitles button beside it already draws
+ * Feather's slash for its own off state.
+ */
+export const SubtitlesOutsidePicture = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...iconProps} {...props}>
+    <path d='M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5' />
+    <rect x='12' y='13' width='10' height='8' rx='1' ry='1' />
+    <path d='M6 9h3m2 0h2' />
+  </svg>
+)

package/src/lib/react/components/tooltip-display.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react'
+import type { TooltipRefProps } from 'react-tooltip'
 
+import { useEffect, useRef } from 'react'
 import { css } from '@emotion/react'
 import { PlacesType, Tooltip } from 'react-tooltip'
 
@@ -13,9 +15,31 @@ export enum buttonSize {
 
 const style = (size: buttonSize) => css`
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
 
-  border-radius: calc(0.4 * var(--mp-unit));
+  /*
+   * Bounded here rather than at each call site.
+   *
+   * react-tooltip's own chip rule carries width: max-content, so with nothing opposing it a chip
+   * grows to the widest UNWRAPPED line of its content: a two sentence tooltip measured 1178px
+   * through this component. Both declarations are load bearing, since a bound with no wrapping only
+   * moves the overflow inside a narrow box. 26 units is the width control-bar.tsx was already
+   * imposing on its own two line tooltip by hand, so nothing in the bar changes shape.
+   */
+  max-width: min(calc(26 * var(--mp-unit)), calc(100vw - calc(2.4 * var(--mp-unit))));
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: left;
+
+  /*
+   * The radius carries !important for the same reason the paddings below do.
+   *
+   * react-tooltip injects its stylesheet from a passive effect while emotion inserts through
+   * useInsertionEffect, which runs earlier, so react-tooltip's sheet lands in the head LAST at
+   * exactly this specificity and wins every tie. Its own radius is 3px, which is what was drawn
+   * here until this was stated.
+   */
+  border-radius: calc(0.4 * var(--mp-unit))!important;
   user-select: none;
 
   z-index: 3;
@@ -35,6 +59,25 @@ const style = (size: buttonSize) => css`
   `}
 `
 
+/**
+ * Where the pointer is, shared by every anchor rather than tracked once per tooltip.
+ *
+ * The chrome mounts eight of these, and each only needs to answer one question at one moment, so a
+ * single refcounted listener answers it for all of them. Installed on the first mount rather than at
+ * module scope, so importing this library still does nothing to the document.
+ */
+const pointer = { x: -1, y: -1, anchors: 0 }
+const trackPointer = (event: PointerEvent) => { pointer.x = event.clientX; pointer.y = event.clientY }
+
+const watchPointer = () => {
+  if (pointer.anchors++ === 0) {
+    window.addEventListener('pointermove', trackPointer, { capture: true, passive: true })
+  }
+  return () => {
+    if (--pointer.anchors === 0) window.removeEventListener('pointermove', trackPointer, { capture: true })
+  }
+}
+
 interface TooltipDisplayProps {
   id: string
   toolTipText: ReactNode
@@ -57,30 +100,77 @@ export const TooltipDisplay = ({
   tooltipPlace = 'top',
   disabled = false,
   size = buttonSize.md
-}: TooltipDisplayProps) => (
-  <>
-    <div
-      data-tooltip-id={id}
-      data-open={true}
-      data-tooltip-offset={offset}
-      data-tooltip-delay-show={delayShow}
-      data-tooltip-delay-hide={closeDelay}
-      data-tooltip-place={tooltipPlace}
-    >
-      {text}
-    </div>
-    {
-      !disabled && (
-        <Tooltip
-          css={style(size)}
-          id={id}
-          noArrow={true}
-        >
-          {toolTipText}
-        </Tooltip>
-      )
+}: TooltipDisplayProps) => {
+  const anchor = useRef<HTMLDivElement>(null)
+  const tooltip = useRef<TooltipRefProps>(null)
+
+  /**
+   * Close on a fullscreen transition, unless the pointer really is still on the anchor.
+   *
+   * Going fullscreen relays the whole chrome out from under a pointer that never moved, and the
+   * browser recomputes the hover chain for that SILENTLY: the :hover flag flips a frame later, so
+   * the grey pill corrects itself in about 14ms, but no boundary event is dispatched at all.
+   * react-tooltip closes on mouseout and on nothing else, so it never learns the pointer left and
+   * the chip stays painted for the rest of the session. It survives arbitrary pointer movement,
+   * because the browser has already updated its own element-under-pointer, and it survives the
+   * chrome's auto-hide, coming back the moment the controls wake.
+   *
+   * Scoped to the fullscreen transition on purpose: the same layout move made by ordinary CSS does
+   * dispatch mouseout and closes the chip by itself, so no other reflow needs this and widening it
+   * would only add ways to close a tooltip that should be open.
+   *
+   * Tested against the anchor's rect rather than closed outright, because a player that already
+   * fills the window moves nothing, and the tooltip under the pointer is then legitimately open.
+   * That is the same test chrome.tsx's onMouseOut makes when relatedTarget comes back null. The rect
+   * is already the post-transition one when fullscreenchange fires, where matches(':hover') is not,
+   * which is why the pointer is tracked rather than asked for.
+   */
+  useEffect(() => {
+    const untrack = watchPointer()
+    const closeIfPointerLeft = () => {
+      const element = anchor.current
+      if (!element) return
+      const { left, right, top, bottom } = element.getBoundingClientRect()
+      if (pointer.x >= left && pointer.x < right && pointer.y >= top && pointer.y < bottom) return
+      tooltip.current?.close()
+    }
+    // webkit's own name as well, the way @videojs/core's fullscreen feature listens for both. Typed
+    // as string so the prefixed name checks against the DOM lib's event map.
+    const changeEvents: string[] = ['fullscreenchange', 'webkitfullscreenchange']
+    for (const type of changeEvents) document.addEventListener(type, closeIfPointerLeft)
+    return () => {
+      untrack()
+      for (const type of changeEvents) document.removeEventListener(type, closeIfPointerLeft)
     }
-  </>
-)
+  }, [])
+
+  return (
+    <>
+      <div
+        ref={anchor}
+        data-tooltip-id={id}
+        data-open={true}
+        data-tooltip-offset={offset}
+        data-tooltip-delay-show={delayShow}
+        data-tooltip-delay-hide={closeDelay}
+        data-tooltip-place={tooltipPlace}
+      >
+        {text}
+      </div>
+      {
+        !disabled && (
+          <Tooltip
+            ref={tooltip}
+            css={style(size)}
+            id={id}
+            noArrow={true}
+          >
+            {toolTipText}
+          </Tooltip>
+        )
+      }
+    </>
+  )
+}
 
 export default TooltipDisplay

package/src/lib/utils/colors.ts

@@ -2,8 +2,6 @@ const colors = {
   primary: '#EAEBEE',
   secondary: '#D0D0D9',
   hover: 'rgba(255, 255, 255, 0.13)',
-  /** A control that is ON. Distinct from `hover`, which the pointer is already painting. */
-  accent: '#6EA8FE',
   borderPrimary: '#384F70',
   backgroundTooltip: '#222222',
 }