@banou/media-player 0.10.13 → 0.10.14

package/dist/index.js

@@ -2123,15 +2123,6 @@ ${gt}
 		})]
 	});
 }, It = .05, Lt = 5, Rt = 50, zt = 1e3, Bt = g`
-  display: flex;
-  flex-direction: column;
-  gap: calc(0.4 * var(--mp-unit));
-
-  .hint {
-    opacity: 0.72;
-    font-size: 0.9em;
-  }
-`, Vt = g`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -2261,7 +2252,7 @@ ${gt}
       }
     }
   }
-`, Ht = () => {
+`, Vt = () => {
 	let e = G(), t = G((e) => e.paused), n = G((e) => e.currentTime), r = G((e) => e.duration), i = G((e) => e.seekingTo), a = G((e) => e.fullscreen), o = G((e) => e.hideUI), s = G((e) => e.togglePictureInPicture), c = G((e) => e.pictureInPictureMode), l = G((e) => e.burnedInSubtitles), f = G((e) => e.passThroughPictureInPicture), h = G((e) => e.subtitleTracks), g = G((e) => e.requestSeek), [_, v] = m(null), y = p(null), b = p(void 0), x = c === "burn-in", S = h.length > 0, C = r > 0 && n === r, w = u(({ direction: t, stepSize: n }) => {
 		let r = Ne(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
 		e.setVolume(Me(a)), o && !e.muted && e.toggleMuted();
@@ -2332,7 +2323,7 @@ ${gt}
 			e = Date.now() + zt;
 		};
 	}, [k]), d(() => () => clearInterval(b.current), []), /* @__PURE__ */ E("div", {
-		css: Vt,
+		css: Bt,
 		style: { ...o ? {
 			opacity: "0",
 			pointerEvents: "none"
@@ -2399,16 +2390,7 @@ ${gt}
 								alt: ""
 							})
 						}),
-						toolTipText: /* @__PURE__ */ E("span", {
-							css: Bt,
-							children: [/* @__PURE__ */ T("span", {
-								className: "lead",
-								children: x ? S ? l ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture"
-							}), x && S ? /* @__PURE__ */ T("span", {
-								className: "hint",
-								children: "Then hover the video and click your browser's own pop out button"
-							}) : null]
-						})
+						toolTipText: /* @__PURE__ */ T("span", { children: x ? S ? l ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture" })
 					}) : null,
 					/* @__PURE__ */ T($, {
 						id: "full-screen",
@@ -2427,7 +2409,7 @@ ${gt}
 			})]
 		})]
 	});
-}, Ut = 9e3, Wt = g`
+}, Ht = 9e3, Ut = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2458,22 +2440,11 @@ ${gt}
     opacity: 1;
   }
 
-  .words {
-    display: flex;
-    flex-direction: column;
-    gap: calc(0.3 * var(--mp-unit));
-  }
-
-  .title {
-    ${Z.bMedium.bold}
+  .text {
+    ${Z.bMedium.medium}
     color: #fff;
   }
 
-  .body {
-    ${Z.bSmall.regular}
-    color: rgba(255, 255, 255, 0.75);
-  }
-
   /* Points at the edge the browser's control lives on, which is the whole message. */
   .arrow {
     flex: none;
@@ -2481,7 +2452,7 @@ ${gt}
     line-height: 1;
     color: #fff;
   }
-`, Gt = () => {
+`, Wt = () => {
 	let e = G((e) => e.burnedInSubtitles), t = G((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
@@ -2489,23 +2460,17 @@ ${gt}
 			return;
 		}
 		r(!0);
-		let n = setTimeout(() => r(!1), Ut);
+		let n = setTimeout(() => r(!1), Ht);
 		return () => clearTimeout(n);
 	}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ T("div", {
-		css: Wt,
+		css: Ut,
 		className: n ? "show" : "",
 		role: "status",
 		children: /* @__PURE__ */ E("div", {
 			className: "card",
-			children: [/* @__PURE__ */ E("div", {
-				className: "words",
-				children: [/* @__PURE__ */ T("div", {
-					className: "title",
-					children: "Subtitles are in the picture"
-				}), /* @__PURE__ */ T("div", {
-					className: "body",
-					children: "Now hover the video and click your browser's own pop out button"
-				})]
+			children: [/* @__PURE__ */ T("div", {
+				className: "text",
+				children: "Now click your browser's pop out button"
 			}), /* @__PURE__ */ T("div", {
 				className: "arrow",
 				"aria-hidden": "true",
@@ -2513,10 +2478,10 @@ ${gt}
 			})]
 		})
 	});
-}, Kt = 1, qt = 6e3, Jt = 1, Yt = {
+}, Gt = 1, Kt = 6e3, qt = 1, Jt = {
 	opening: "Skip Opening",
 	ending: "Skip Ending"
-}, Xt = g`
+}, Yt = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2567,10 +2532,10 @@ ${gt}
       bottom: calc(9 * var(--mp-unit));
     }
   }
-`, Zt = () => {
+`, Xt = () => {
 	let e = G((e) => e.chapters), t = G((e) => e.currentTime), n = G((e) => e.requestSeek), r = G((e) => e.seekPreview), i = G(), a = f(() => ct(e), [e]), o = f(() => {
 		if (typeof t != "number") return;
-		let n = e.findIndex((e, n) => a[n] !== void 0 && e.start - Kt <= t && t < e.end), r = n >= 0 ? a[n] : void 0;
+		let n = e.findIndex((e, n) => a[n] !== void 0 && e.start - Gt <= t && t < e.end), r = n >= 0 ? a[n] : void 0;
 		return r ? {
 			kind: r,
 			end: e[n].end
@@ -2582,7 +2547,7 @@ ${gt}
 	]), s = p(0), [c, l] = m(0);
 	d(() => {
 		let e = typeof t == "number" ? t : 0, n = s.current;
-		s.current = e, e < n - Jt && l((e) => e + 1);
+		s.current = e, e < n - qt && l((e) => e + 1);
 	}, [t]);
 	let [u, h] = m(!1), g = o ? `${o.kind}@${o.end}` : "";
 	return d(() => {
@@ -2591,12 +2556,12 @@ ${gt}
 			return;
 		}
 		h(!0);
-		let e = setTimeout(() => h(!1), qt);
+		let e = setTimeout(() => h(!1), Kt);
 		return () => clearTimeout(e);
 	}, [g, c]), d(() => {
 		o || h(!1);
 	}, [o]), o ? /* @__PURE__ */ T("div", {
-		css: Xt,
+		css: Yt,
 		className: u && !r ? "show" : "",
 		children: /* @__PURE__ */ T("button", {
 			type: "button",
@@ -2604,10 +2569,10 @@ ${gt}
 			onClick: () => {
 				h(!1), n ? n(o.end) : i.seek(o.end);
 			},
-			children: Yt[o.kind]
+			children: Jt[o.kind]
 		})
 	}) : null;
-}, Qt = 3e3, $t = g`
+}, Zt = 3e3, Qt = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2618,10 +2583,10 @@ ${gt}
      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;
-`, en = (e, t) => {
+`, $t = (e, t) => {
 	let n = e.left - t.left, r = e.top - t.top;
 	return `path(evenodd, 'M0 0H${t.width}V${t.height}H0Z M${n} ${r}H${n + e.width}V${r + e.height}H${n}Z')`;
-}, tn = g`
+}, en = g`
   position: relative;
   background-color: black;
   display: flex;
@@ -2675,13 +2640,13 @@ ${gt}
   &.hide {
     cursor: none;
   }
-`, nn = (e, t = "") => s.toArray(e).flatMap((e, n) => {
+`, tn = (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 ? nn(e.props.children, `${r}/`) : [{
+	return l(e) && e.type === c ? tn(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), rn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
+}), nn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
 	let o = G(), s = G((e) => e.hideUI), c = G((e) => e.setHideUI), l = G((e) => e.hasMedia), u = G((e) => e.passThroughPictureInPicture), f = p(void 0), m = p("mouse"), h = p({
 		x: -1,
 		y: -1
@@ -2702,15 +2667,15 @@ ${gt}
 		return !!n && g.current.contains(n) && !n.closest(".video");
 	}, b = () => {
 		if (y()) {
-			f.current = setTimeout(b, Qt);
+			f.current = setTimeout(b, Zt);
 			return;
 		}
 		_();
 	}, x = () => {
-		c(!1), clearTimeout(f.current), f.current = setTimeout(b, Qt);
+		c(!1), clearTimeout(f.current), f.current = setTimeout(b, Zt);
 	};
 	return /* @__PURE__ */ E("div", {
-		css: tn,
+		css: en,
 		ref: v,
 		onPointerMove: (e) => {
 			m.current = e.pointerType, e.pointerType === "mouse" && (h.current = {
@@ -2730,8 +2695,8 @@ ${gt}
 		className: s ? "hide" : "",
 		children: [
 			/* @__PURE__ */ T(ke, { onSubtitleRef: n }),
-			nn(r).map(({ key: e, item: t }) => /* @__PURE__ */ T("div", {
-				css: $t,
+			tn(r).map(({ key: e, item: t }) => /* @__PURE__ */ T("div", {
+				css: Qt,
 				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
@@ -2739,12 +2704,12 @@ ${gt}
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ T(Ht, {}),
-			/* @__PURE__ */ T(Gt, {}),
-			/* @__PURE__ */ T(Zt, {}),
+			i === !1 ? null : /* @__PURE__ */ T(Vt, {}),
+			/* @__PURE__ */ T(Wt, {}),
+			/* @__PURE__ */ T(Xt, {}),
 			u?.armed && g.current ? /* @__PURE__ */ T("div", {
 				className: "pass-through",
-				style: { clipPath: en(u.armed, g.current.getBoundingClientRect()) },
+				style: { clipPath: $t(u.armed, g.current.getBoundingClientRect()) },
 				onPointerOver: u.disarm
 			}) : null,
 			/* @__PURE__ */ E("div", {
@@ -2763,7 +2728,7 @@ ${gt}
 			})
 		]
 	});
-}, an = ({ options: e, children: t }) => {
+}, rn = ({ 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: h, thumbnailsEnabled: g } = r ?? {}, _ = b(), v = y(), [x, S] = m(null), [C, w] = m(null), E = n?.media ?? x;
 	d(() => (_?.(E), () => _?.(null)), [E, _]);
 	let { expose: D } = e, O = D === !0 ? {} : D || void 0, k = p(O);
@@ -2868,7 +2833,7 @@ ${gt}
 		});
 	}, [K, X]), d(() => {
 		a && K({ chapters: a });
-	}, [K, a]), /* @__PURE__ */ T(rn, {
+	}, [K, a]), /* @__PURE__ */ T(nn, {
 		ref: v,
 		onVideoRef: n ? void 0 : S,
 		onSubtitleRef: w,
@@ -2876,7 +2841,7 @@ ${gt}
 		controls: e.controls,
 		children: t
 	});
-}, on = g`
+}, an = g`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -2946,17 +2911,17 @@ ${gt}
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, sn = (e) => /* @__PURE__ */ T("div", {
-	css: on,
-	children: /* @__PURE__ */ T(W.Provider, { children: /* @__PURE__ */ T(an, {
+`, on = (e) => /* @__PURE__ */ T("div", {
+	css: an,
+	children: /* @__PURE__ */ T(W.Provider, { children: /* @__PURE__ */ T(rn, {
 		options: e,
 		children: e.children
 	}) })
-}), cn = (e) => !!e && typeof e == "object" && "at" in e, ln = (e) => !!e && typeof e == "object" && "selection" in e, un = ({ blob: e, name: t }) => ({
+}), sn = (e) => !!e && typeof e == "object" && "at" in e, cn = (e) => !!e && typeof e == "object" && "selection" in e, ln = ({ 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()
-}), dn = async (e, t) => {
+}), un = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -2966,8 +2931,8 @@ ${gt}
 	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;
-}, fn = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await dn(e, r);
+}, dn = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await un(e, r);
 	return {
 		length: i,
 		name: n,
@@ -2982,9 +2947,9 @@ ${gt}
 			return o.arrayBuffer();
 		}
 	};
-}, pn = async (e) => {
-	if ("blob" in e) return un(e);
-	if ("url" in e) return fn(e);
+}, fn = async (e) => {
+	if ("blob" in e) return ln(e);
+	if ("url" in e) return dn(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -2993,4 +2958,4 @@ ${gt}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { sn as MediaPlayer, sn as default, W as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, pn as inputToRemuxerInput, ln as isDelegatedTracks, cn as isExternalThumbnails, U as sourceFeature, i as startPlayback, de as usePictureInPicture, G as usePlayer, ue as useSeekThumbnails };
+export { on as MediaPlayer, on as default, W as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, fn as inputToRemuxerInput, cn as isDelegatedTracks, sn as isExternalThumbnails, U as sourceFeature, i as startPlayback, de as usePictureInPicture, G as usePlayer, ue as useSeekThumbnails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.13",
+  "version": "0.10.14",
   "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

@@ -4,7 +4,6 @@ import { css } from '@emotion/react'
 import { fonts } from '../../utils/fonts'
 import { usePlayer } from '../player'
 
-/** Long enough to read twice, short enough not to sit over the picture. */
 const VISIBLE_MS = 9000
 
 const style = css`
@@ -38,22 +37,11 @@ const style = css`
     opacity: 1;
   }
 
-  .words {
-    display: flex;
-    flex-direction: column;
-    gap: calc(0.3 * var(--mp-unit));
-  }
-
-  .title {
-    ${fonts.bMedium.bold}
+  .text {
+    ${fonts.bMedium.medium}
     color: #fff;
   }
 
-  .body {
-    ${fonts.bSmall.regular}
-    color: rgba(255, 255, 255, 0.75);
-  }
-
   /* Points at the edge the browser's control lives on, which is the whole message. */
   .arrow {
     flex: none;
@@ -90,12 +78,7 @@ export const BurnInHint = () => {
   return (
     <div css={style} className={show ? 'show' : ''} role='status'>
       <div className='card'>
-        <div className='words'>
-          <div className='title'>Subtitles are in the picture</div>
-          <div className='body'>
-            Now hover the video and click your browser&apos;s own pop out button
-          </div>
-        </div>
+        <div className='text'>Now click your browser&apos;s pop out button</div>
         <div className='arrow' aria-hidden='true'>&rarr;</div>
       </div>
     </div>

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

@@ -25,23 +25,6 @@ const SEEK_STEP = 5
 const REFOCUS_POLL = 50
 const REFOCUS_AFTER = 1_000
 
-/**
- * Two stacked lines inside a tooltip.
- *
- * 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));
-
-  .hint {
-    opacity: 0.72;
-    font-size: 0.9em;
-  }
-`
-
 const style = css`
   position: absolute;
   bottom: 0;
@@ -384,7 +367,6 @@ export const ControlBar = () => {
             ? (
               <TooltipDisplay
                 id='picture-in-picture'
-                // anchored to its end, or the two-line burn-in copy runs off the right of the player
                 tooltipPlace='top-end'
                 text={
                   <button
@@ -409,26 +391,14 @@ export const ControlBar = () => {
                   </button>
                 }
                 toolTipText={
-                  // 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
-                        ? 'Picture in picture'
-                        : !hasSubtitles
-                            ? 'This file has no subtitles'
-                            : burnedInSubtitles
-                              ? 'Subtitles are in the picture'
-                              : 'Put the subtitles in the picture'}
-                    </span>
-                    {burnIn && hasSubtitles
-                      ? (
-                        <span className='hint'>
-                          Then hover the video and click your browser&apos;s own pop out button
-                        </span>
-                      )
-                      : null}
+                  <span>
+                    {!burnIn
+                      ? 'Picture in picture'
+                      : !hasSubtitles
+                          ? 'This file has no subtitles'
+                          : burnedInSubtitles
+                            ? 'Subtitles are in the picture'
+                            : 'Put the subtitles in the picture'}
                   </span>
                 }
               />