@banou/media-player 0.10.3 → 0.10.4

package/dist/index.js

@@ -20,6 +20,7 @@ var B = {
 	selectAudioTrack: () => {},
 	hideUI: !1,
 	setHideUI: () => {},
+	hasMedia: !1,
 	togglePictureInPicture: null,
 	pictureInPictureMode: null,
 	burnedInSubtitles: !1,
@@ -48,7 +49,7 @@ var B = {
 	} catch {
 		return;
 	}
-}, G = (e) => e?.replace(/_/g, " ").trim() || void 0, ee = (e) => {
+}, G = (e) => e?.replace(/_/g, " ").trim() || void 0, K = (e) => {
 	let t = e.map((e) => W(e.language) ?? G(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
 		...e,
 		[t]: (e[t] ?? 0) + 1
@@ -60,27 +61,27 @@ var B = {
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, K = (e) => ee(e).map(({ track: e, label: t }) => ({
+}, q = (e) => K(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), te = [
+})), ee = [
 	0,
 	250,
 	1e3,
 	3e3,
 	1e4
-], ne = 6e4, re = 500, ie = 15e3, ae = (e) => e instanceof Error ? e.message : String(e), oe = (e) => {
+], te = 6e4, ne = 500, re = 15e3, ie = (e) => e instanceof Error ? e.message : String(e), ae = (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(ae(n)), n = n?.cause;
+		t.push(ie(n)), n = n?.cause;
 	}
 	return t.length ? t.join("\n") : void 0;
-}, se = (e, t, r) => {
-	let a = U(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, chapters: b, seekPrepareBudgetMs: x = re } = r ?? {}, S = p(b);
+}, oe = (e, t, r) => {
+	let a = U(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, chapters: b, seekPrepareBudgetMs: x = ne } = r ?? {}, S = p(b);
 	S.current = b;
 	let [C, w] = m(void 0), [T, E] = m(0), D = p({
 		count: 0,
@@ -117,7 +118,7 @@ var B = {
 		a.setSourceState({ seekingTo: e });
 		let c = t.videoElement, l = () => {
 			c?.removeEventListener("seeked", l), clearTimeout(u), a.setSourceState({ seekingTo: void 0 });
-		}, u = setTimeout(l, ie);
+		}, u = setTimeout(l, re);
 		c?.addEventListener("seeked", l);
 		let d = setTimeout(() => {
 			o = "deadline", s();
@@ -147,7 +148,7 @@ var B = {
 			ready: !1
 		});
 		let u = (t, n) => {
-			let r = Date.now(), i = ae(t), o = oe(t), s = a.playbackErrors, c = s[s.length - 1];
+			let r = Date.now(), i = ie(t), o = ae(t), s = a.playbackErrors, c = s[s.length - 1];
 			if (c && c.message === i && c.detail === o && c.recovered === n) {
 				let e = {
 					...c,
@@ -172,11 +173,11 @@ var B = {
 			let t = n(e);
 			if (u(e, t), t) {
 				let t = performance.now();
-				t - D.current.at > ne && (D.current = {
+				t - D.current.at > te && (D.current = {
 					count: 0,
 					at: t
 				});
-				let n = te[Math.min(D.current.count, te.length - 1)];
+				let n = ee[Math.min(D.current.count, ee.length - 1)];
 				D.current = {
 					count: D.current.count + 1,
 					at: t
@@ -213,13 +214,13 @@ var B = {
 					onSeek: (e) => N.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || a.setSourceState({
-							subtitleTracks: K(e),
+							subtitleTracks: q(e),
 							...j.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || a.setSourceState({
-							audioTracks: K(e),
+							audioTracks: q(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -259,13 +260,13 @@ var B = {
 		y,
 		T
 	]);
-}, ce = 5e3, le = 6e4, ue = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
+}, se = 5e3, ce = 6e4, le = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
 	let [o, s] = m([]), c = p(null), l = p(i);
 	l.current = i;
 	let h = f(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), g = p(h);
 	return g.current = h, d(() => {
 		if (!n || !i || !e || !t) return;
-		let a = !1, o = null, u, d = ce, f = () => {
+		let a = !1, o = null, u, d = se, f = () => {
 			r({
 				publicPath: e,
 				workerUrl: t,
@@ -281,7 +282,7 @@ var B = {
 				}
 				o = e, c.current = e, e.update(g.current);
 			}, () => {
-				a || (u = setTimeout(f, d), d = Math.min(d * 2, le));
+				a || (u = setTimeout(f, d), d = Math.min(d * 2, ce));
 			});
 		};
 		return f(), () => {
@@ -299,7 +300,7 @@ var B = {
 			c.current?.prioritize(e);
 		}, [])
 	};
-}, de = (e, n) => {
+}, ue = (e, n) => {
 	let r = p(null), [i, o] = m(!1), [s] = m(() => t());
 	d(() => {
 		if (!e || !n || !s) return;
@@ -327,7 +328,7 @@ var B = {
 		mode: s,
 		burnedIn: i
 	};
-}, q = {
+}, J = {
 	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    ",
@@ -354,7 +355,7 @@ var B = {
 		medium: "\n      font-weight: 500;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    ",
 		regular: "\n      font-weight: 400;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    "
 	}
-}, fe = h`
+}, de = h`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -367,7 +368,7 @@ var B = {
     margin: auto;
     pointer-events: none;
   }
-`, pe = h`
+`, fe = h`
   position: absolute;
   top: 0;
   left: 0;
@@ -375,7 +376,7 @@ var B = {
   padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
   /* clears a notch once the player is fullscreen; resolves to zero everywhere else */
   padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-  ${q.headings.small}
+  ${J.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -396,7 +397,7 @@ var B = {
 
   background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
   transition: opacity 0.1s cubic-bezier(.4,0,1,1);
-`, me = h`
+`, pe = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -416,40 +417,40 @@ var B = {
   to { transform: rotate(360deg); }
 `} 0.8s linear infinite;
   }
-`, he = h`
+`, me = h`
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${q.bLarge.regular}
+  ${J.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, ge = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", _e = ({ onSubtitleRef: e }) => {
+`, he = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", ge = ({ onSubtitleRef: e }) => {
 	let t = U((e) => e.title), n = U((e) => e.hideUI), r = U((e) => e.playbackError), i = U((e) => e.ready), a = U((e) => e.size), o = U((e) => e.waiting), s = U((e) => e.seekingTo);
 	return /* @__PURE__ */ w(S, { children: [
 		t ? /* @__PURE__ */ C("div", {
 			className: "title",
-			css: pe,
+			css: fe,
 			style: { ...n ? {
 				opacity: "0",
 				pointerEvents: "none"
 			} : {} },
 			children: t
 		}) : void 0,
-		((a ? !i : o) || s !== void 0) && !r ? /* @__PURE__ */ C("div", { css: me }) : void 0,
+		((a ? !i : o) || s !== void 0) && !r ? /* @__PURE__ */ C("div", { css: pe }) : void 0,
 		r ? /* @__PURE__ */ C("div", {
-			css: he,
-			children: ge(r)
+			css: me,
+			children: he(r)
 		}) : void 0,
 		/* @__PURE__ */ C("div", {
 			className: "subtitles",
 			ref: e,
-			css: fe
+			css: de
 		})
 	] });
-}, ve = 1e-4, J = 1, ye = (e) => Math.max(ve, Math.min(J, e)) ** 2, be = (e) => Math.max(ve, Math.min(J, e)) ** (J / 2), Y = (e) => {
+}, _e = 1e-4, ve = 1, ye = (e) => Math.max(_e, Math.min(ve, e)) ** 2, be = (e) => Math.max(_e, Math.min(ve, e)) ** (ve / 2), Y = (e) => {
 	if (e === void 0) return "0:00";
 	let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
 	return t > 0 ? `${t}:${n < 10 ? "0" : ""}${n}:${r < 10 ? "0" : ""}${r}` : `${n}:${r < 10 ? "0" : ""}${r}`;
@@ -485,7 +486,7 @@ var B = {
   z-index: 3;
 
   * {
-    ${q.bMedium.regular}
+    ${J.bMedium.regular}
   }
 
   ${e === "sm" && h`
@@ -773,7 +774,7 @@ var B = {
     box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${q.bMedium.bold}
+    ${J.bMedium.bold}
 
     gap: calc(.6 * var(--mp-unit));
 
@@ -989,7 +990,7 @@ var B = {
 		V
 	]), W = f(() => V >= 0 ? je(z, (e) => e === V) : void 0, [z, V]), G = f(() => {
 		if (y !== void 0) return u.find(({ start: e, end: t }) => e <= y && y < t);
-	}, [u, y]), ee = f(() => {
+	}, [u, y]), K = f(() => {
 		if (y) {
 			if (c) return c(y);
 			if (s.length) return s.find(({ startTime: e, endTime: t }) => e <= y && y < t);
@@ -998,7 +999,7 @@ var B = {
 		s,
 		c,
 		y
-	]), K = (e, t) => /* @__PURE__ */ w("div", {
+	]), q = (e, t) => /* @__PURE__ */ w("div", {
 		className: e ? `track ${e}` : "track",
 		style: t ? { maskImage: t } : void 0,
 		children: [
@@ -1027,7 +1028,7 @@ var B = {
 		onMouseMove: P,
 		onMouseOut: F,
 		children: [
-			K(void 0, H),
+			q(void 0, H),
 			y ? /* @__PURE__ */ w("div", {
 				className: "cursor-time",
 				style: {
@@ -1044,7 +1045,7 @@ var B = {
 			}) : void 0,
 			/* @__PURE__ */ C("div", { className: "progress" }),
 			/* @__PURE__ */ C("div", { className: "hover" }),
-			W ? K("focus", W) : void 0,
+			W ? q("focus", W) : void 0,
 			/* @__PURE__ */ C("div", { className: "scrubber" }),
 			/* @__PURE__ */ C("div", {
 				className: "padding",
@@ -1056,7 +1057,7 @@ var B = {
 			/* @__PURE__ */ C("div", {
 				className: "thumbnail",
 				style: { left: `clamp(var(--thumbnail-half), ${I(y ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
-				children: ee?.url ? /* @__PURE__ */ C("img", { src: ee.url }) : void 0
+				children: K?.url ? /* @__PURE__ */ C("img", { src: K.url }) : void 0
 			})
 		]
 	});
@@ -1170,7 +1171,7 @@ var B = {
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${q.bMedium.regular}
+  ${J.bMedium.regular}
 
   z-index: 4;
 
@@ -1213,7 +1214,7 @@ var B = {
 
       .secondary {
         color: #eee;
-        ${q.bSmall.regular}
+        ${J.bSmall.regular}
       }
     }
   }
@@ -1255,7 +1256,7 @@ var B = {
   .failed {
     border-bottom: 1px solid #4D4D4E;
     color: #f66;
-    ${q.bSmall.regular}
+    ${J.bSmall.regular}
   }
 }
 `, it = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
@@ -1370,7 +1371,7 @@ ${rt}
 
     color: #fff;
     cursor: pointer;
-    ${q.bSmall.regular}
+    ${J.bSmall.regular}
 
     &:hover {
       background-color: rgba(255,255,255,.1);
@@ -1391,7 +1392,7 @@ ${rt}
 
     .when {
       color: #bbb;
-      ${q.bSmall.regular}
+      ${J.bSmall.regular}
 
       /* the one part of the line worth scanning for, so it is the one part at full brightness */
       .count {
@@ -1410,7 +1411,7 @@ ${rt}
       color: #ddd;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
-      ${q.bSmall.regular}
+      ${J.bSmall.regular}
     }
   }
 }
@@ -1874,7 +1875,7 @@ ${rt}
       border-radius: 4px;
 
       .volume-value {
-        ${q.bMedium.regular};
+        ${J.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -2060,7 +2061,7 @@ ${rt}
 
     .left {
       .time {
-        ${q.bMedium.regular}
+        ${J.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -2242,12 +2243,12 @@ ${rt}
   }
 
   .title {
-    ${q.bMedium.bold}
+    ${J.bMedium.bold}
     color: #fff;
   }
 
   .body {
-    ${q.bSmall.regular}
+    ${J.bSmall.regular}
     color: rgba(255, 255, 255, 0.75);
   }
 
@@ -2310,7 +2311,7 @@ ${rt}
     pointer-events: auto;
     cursor: pointer;
 
-    ${q.bMedium.bold}
+    ${J.bMedium.bold}
     color: #fff;
     padding: calc(1 * var(--mp-unit)) calc(1.8 * var(--mp-unit));
     border: 1px solid rgba(255, 255, 255, .55);
@@ -2447,49 +2448,53 @@ ${rt}
 		item: e
 	}];
 }), Bt = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
-	let o = U(), s = U((e) => e.hideUI), c = U((e) => e.setHideUI), l = p(void 0), u = p("mouse"), f = p({
+	let o = U(), s = U((e) => e.hideUI), c = U((e) => e.setHideUI), l = U((e) => e.hasMedia), u = p(void 0), f = p("mouse"), m = p({
 		x: -1,
 		y: -1
-	}), m = p(null);
-	d(() => () => clearTimeout(l.current), []);
-	let h = (t) => {
-		m.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
-	}, g = () => {
-		if (u.current !== "mouse") return !1;
-		let { x: e, y: t } = f.current;
-		if (!m.current || e < 0) return !1;
+	}), h = p(null);
+	d(() => () => clearTimeout(u.current), []), d(() => {
+		l || (clearTimeout(u.current), c(!1));
+	}, [l, c]);
+	let g = () => {
+		l && c(!0);
+	}, _ = (t) => {
+		h.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+	}, v = () => {
+		if (f.current !== "mouse") return !1;
+		let { x: e, y: t } = m.current;
+		if (!h.current || e < 0) return !1;
 		let n = document.elementFromPoint(e, t);
-		return !!n && m.current.contains(n) && !n.closest(".video");
-	}, _ = () => {
-		if (g()) {
-			l.current = setTimeout(_, It);
+		return !!n && h.current.contains(n) && !n.closest(".video");
+	}, y = () => {
+		if (v()) {
+			u.current = setTimeout(y, It);
 			return;
 		}
-		c(!0);
-	}, v = () => {
-		c(!1), clearTimeout(l.current), l.current = setTimeout(_, It);
+		g();
+	}, b = () => {
+		c(!1), clearTimeout(u.current), u.current = setTimeout(y, It);
 	};
 	return /* @__PURE__ */ w("div", {
 		css: Rt,
-		ref: h,
+		ref: _,
 		onPointerMove: (e) => {
-			u.current = e.pointerType, e.pointerType === "mouse" && (f.current = {
+			f.current = e.pointerType, e.pointerType === "mouse" && (m.current = {
 				x: e.clientX,
 				y: e.clientY
-			}, v());
+			}, b());
 		},
 		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(l.current), c(!0));
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(u.current), g());
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ C(_e, { onSubtitleRef: n }),
+			/* @__PURE__ */ C(ge, { onSubtitleRef: n }),
 			zt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
 				css: Lt,
 				style: { ...s ? {
@@ -2505,11 +2510,11 @@ ${rt}
 			/* @__PURE__ */ w("div", {
 				className: "video",
 				onClick: () => {
-					if (u.current === "mouse") {
+					if (f.current === "mouse") {
 						o.togglePaused();
 						return;
 					}
-					s ? v() : (clearTimeout(l.current), c(!0));
+					s ? b() : (clearTimeout(u.current), g());
 				},
 				children: [t ? /* @__PURE__ */ C("video", {
 					ref: t,
@@ -2538,31 +2543,33 @@ ${rt}
 		k,
 		A,
 		j
-	]), se(b, S, r);
-	let { thumbnails: M, requestThumbnail: N } = ue({
+	]), oe(b, S, r);
+	let { thumbnails: M, requestThumbnail: N } = le({
 		publicPath: c,
 		workerUrl: l,
 		length: h === !1 ? void 0 : o,
 		read: f ?? u,
 		downloadedRanges: s
-	}), P = n?.thumbnails?.all ?? M, { toggle: F, mode: I, burnedIn: L } = de(b, S), R = U((e) => e.setSourceState);
+	}), P = n?.thumbnails?.all ?? M, { toggle: F, mode: I, burnedIn: L } = ue(b, S), R = U((e) => e.setSourceState), z = n ? !!n.media : o !== void 0;
 	d(() => {
 		R({
 			title: i,
 			size: o,
-			downloadedRanges: s
+			downloadedRanges: s,
+			hasMedia: z
 		});
 	}, [
 		R,
 		i,
 		o,
-		s
+		s,
+		z
 	]);
-	let z = n?.thumbnails?.at;
+	let B = n?.thumbnails?.at;
 	d(() => {
 		R({
 			thumbnails: P,
-			thumbnailAt: z,
+			thumbnailAt: B,
 			requestThumbnail: N,
 			togglePictureInPicture: F,
 			pictureInPictureMode: I,
@@ -2571,35 +2578,35 @@ ${rt}
 	}, [
 		R,
 		P,
-		z,
+		B,
 		N,
 		F,
 		I,
 		L
 	]);
-	let B = n?.subtitles?.selection, V = n?.audioTracks?.selection;
+	let V = n?.subtitles?.selection, H = n?.audioTracks?.selection;
 	return d(() => {
-		B && R({
-			subtitleTracks: B.options.map(({ id: e, label: t, disabled: n }) => ({
+		V && R({
+			subtitleTracks: V.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedSubtitleTrack: B.selectedId ?? void 0,
-			selectSubtitleTrack: (e) => B.select(e == null ? null : String(e)),
-			subtitleOffLabel: B.offLabel
+			selectedSubtitleTrack: V.selectedId ?? void 0,
+			selectSubtitleTrack: (e) => V.select(e == null ? null : String(e)),
+			subtitleOffLabel: V.offLabel
 		});
-	}, [R, B]), d(() => {
-		V && R({
-			audioTracks: V.options.map(({ id: e, label: t, disabled: n }) => ({
+	}, [R, V]), d(() => {
+		H && R({
+			audioTracks: H.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedAudioTrack: V.selectedId ?? void 0,
-			selectAudioTrack: (e) => V.select(String(e))
+			selectedAudioTrack: H.selectedId ?? void 0,
+			selectAudioTrack: (e) => H.select(String(e))
 		});
-	}, [R, V]), d(() => {
+	}, [R, H]), d(() => {
 		a && R({ chapters: a });
 	}, [R, a]), /* @__PURE__ */ C(Bt, {
 		ref: _,
@@ -2726,4 +2733,4 @@ ${rt}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { Ut as MediaPlayer, Ut as default, H as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, Yt as inputToRemuxerInput, Gt as isDelegatedTracks, Wt as isExternalThumbnails, V as sourceFeature, i as startPlayback, de as usePictureInPicture, U as usePlayer, ue as useSeekThumbnails };
+export { Ut as MediaPlayer, Ut as default, H as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, Yt as inputToRemuxerInput, Gt as isDelegatedTracks, Wt as isExternalThumbnails, V as sourceFeature, i as startPlayback, ue as usePictureInPicture, U as usePlayer, le as useSeekThumbnails };

package/dist/react/player.d.ts

@@ -16,6 +16,7 @@ export declare const Player: import("@videojs/react").CreatePlayerResult<import(
     selectAudioTrack: (id: string | number) => void | Promise<void>;
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
+    hasMedia: boolean;
     togglePictureInPicture: (() => void) | null;
     pictureInPictureMode: import("../engine").PictureInPictureMode | null;
     burnedInSubtitles: boolean;

package/dist/react/source-feature.d.ts

@@ -116,6 +116,19 @@ export type SourceState = {
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
+    /**
+     * Whether there is anything loaded to play at all.
+     *
+     * Not the same question as `ready`, which is about a source that HAS been handed over and is still
+     * booting. This one separates that from having been given nothing, and the chrome needs the
+     * difference: idle-hiding with no media leaves a black rectangle with no controls, no title and no
+     * cursor, and no way back, since the only thing that reveals the chrome again is a pointer move over
+     * a player the viewer has no reason to think is there.
+     *
+     * Written by the React layer, which is the only place both arms are visible: bytes for a local
+     * source, an element for a media this player does not own.
+     */
+    hasMedia: boolean;
     /**
      * Owned here, not by `pip`: that watches the media element, and the window holds a mirror.
      *
@@ -234,6 +247,19 @@ export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
+    /**
+     * Whether there is anything loaded to play at all.
+     *
+     * Not the same question as `ready`, which is about a source that HAS been handed over and is still
+     * booting. This one separates that from having been given nothing, and the chrome needs the
+     * difference: idle-hiding with no media leaves a black rectangle with no controls, no title and no
+     * cursor, and no way back, since the only thing that reveals the chrome again is a pointer move over
+     * a player the viewer has no reason to think is there.
+     *
+     * Written by the React layer, which is the only place both arms are visible: bytes for a local
+     * source, an element for a media this player does not own.
+     */
+    hasMedia: boolean;
     /**
      * Owned here, not by `pip`: that watches the media element, and the window holds a mirror.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "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/chrome.tsx

@@ -119,6 +119,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
   const player = usePlayer()
   const hideUI = usePlayer((state) => state.hideUI)
   const setHideUI = usePlayer((state) => state.setHideUI)
+  const hasMedia = usePlayer((state) => state.hasMedia)
   const autoHide = useRef<ReturnType<typeof setTimeout>>(undefined)
   // a tap and a click mean different things, so the last pointer kind is remembered
   const lastPointerType = useRef<string>('mouse')
@@ -128,6 +129,27 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
 
   useEffect(() => () => clearTimeout(autoHide.current), [])
 
+  /*
+   * With nothing loaded the chrome never hides, and anything already hidden comes back.
+   *
+   * Hiding is only ever reversed by a pointer move over the player, which is a fair bet while a video
+   * is playing and a bad one when the box is empty: three seconds after mount the controls, the title
+   * and the cursor all go, leaving a black rectangle that gives the viewer no reason to think there is
+   * a player there to wave at. The effect covers the media going AWAY, which the guard below cannot:
+   * its timer may already be in flight, holding a `hasMedia` that was true when it was scheduled.
+   */
+  useEffect(() => {
+    if (hasMedia) return
+    clearTimeout(autoHide.current)
+    setHideUI(false)
+  }, [hasMedia, setHideUI])
+
+  /** The single door to hiding, so no path can bypass the empty-player case. */
+  const hide = () => {
+    if (!hasMedia) return
+    setHideUI(true)
+  }
+
   // The caller's ref still gets the element: video.js attaches the fullscreen container through it,
   // and this needs the same node to hit test against.
   const setRoot = (element: HTMLDivElement | null) => {
@@ -165,7 +187,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
       autoHide.current = setTimeout(hideUnlessTheMouseIsOnAControl, AUTO_HIDE_DELAY)
       return
     }
-    setHideUI(true)
+    hide()
   }
 
   const reveal = () => {
@@ -196,7 +218,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
     if (hideUI) reveal()
     else {
       clearTimeout(autoHide.current)
-      setHideUI(true)
+      hide()
     }
   }
 
@@ -209,7 +231,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
     const inside = ev.clientX >= left && ev.clientX < right && ev.clientY >= top && ev.clientY < bottom
     if (inside) return
     clearTimeout(autoHide.current)
-    setHideUI(true)
+    hide()
   }
 
   return (

package/src/lib/react/source-feature.ts

@@ -127,6 +127,20 @@ export type SourceState = {
   hideUI: boolean
   setHideUI: (hide: boolean) => void
 
+  /**
+   * Whether there is anything loaded to play at all.
+   *
+   * Not the same question as `ready`, which is about a source that HAS been handed over and is still
+   * booting. This one separates that from having been given nothing, and the chrome needs the
+   * difference: idle-hiding with no media leaves a black rectangle with no controls, no title and no
+   * cursor, and no way back, since the only thing that reveals the chrome again is a pointer move over
+   * a player the viewer has no reason to think is there.
+   *
+   * Written by the React layer, which is the only place both arms are visible: bytes for a local
+   * source, an element for a media this player does not own.
+   */
+  hasMedia: boolean
+
   /**
    * Owned here, not by `pip`: that watches the media element, and the window holds a mirror.
    *
@@ -210,6 +224,7 @@ const initialState: SourceState = {
   selectAudioTrack: () => {},
   hideUI: false,
   setHideUI: () => {},
+  hasMedia: false,
   togglePictureInPicture: null,
   pictureInPictureMode: null,
   burnedInSubtitles: false,

package/src/lib/react/video-player.tsx

@@ -269,9 +269,16 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
   // attaches: when attach swaps in the real setter the identity changes and these publish again.
   const setSourceState = usePlayer((state) => state.setSourceState)
 
+  /*
+   * Read here because this is the only place both arms are in scope: a local source is bytes, and a
+   * remote one is an element somebody else owns. `size` alone cannot answer it, since the remote arm
+   * legitimately has none, and the chrome would then treat every remote player as having no media.
+   */
+  const hasMedia = remote ? !!remote.media : size !== undefined
+
   useEffect(() => {
-    setSourceState({ title, size, downloadedRanges })
-  }, [setSourceState, title, size, downloadedRanges])
+    setSourceState({ title, size, downloadedRanges, hasMedia })
+  }, [setSourceState, title, size, downloadedRanges, hasMedia])
 
   const thumbnailAt = remote?.thumbnails?.at
   useEffect(() => {