@banou/media-player 0.8.4 → 0.8.6

package/dist/engine/index.d.ts

@@ -6,5 +6,5 @@ export { createThumbnailGenerator } from './thumbnails';
 export type { ThumbnailGenerator, ThumbnailGeneratorOptions, ThumbnailImage } from './thumbnails';
 export { getTimeRanges, updateSourceBuffer } from './source-buffer';
 export type { TimeRange } from './source-buffer';
-export { createPictureInPicture } from './picture-in-picture';
-export type { PictureInPictureController, PictureInPictureOptions } from './picture-in-picture';
+export { createPictureInPicture, pictureInPictureMode } from './picture-in-picture';
+export type { PictureInPictureController, PictureInPictureOptions, PictureInPictureMode } from './picture-in-picture';

package/dist/engine/index.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "../engine-Dmc7JSd9.js";
-export { o as DEFAULT_BUFFER_SIZE, a as SUBTITLES_OFF, c as createPictureInPicture, s as createSubtitleRenderer, i as createThumbnailGenerator, t as getTimeRanges, n as startPlayback, e as terminateRemuxer, r as updateSourceBuffer };
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "../engine--OlGG-Ve.js";
+export { n as DEFAULT_BUFFER_SIZE, s as SUBTITLES_OFF, c as createPictureInPicture, t as createSubtitleRenderer, o as createThumbnailGenerator, r as getTimeRanges, i as pictureInPictureMode, e as startPlayback, a as terminateRemuxer, l as updateSourceBuffer };

package/dist/engine/picture-in-picture.d.ts

@@ -6,22 +6,34 @@
  * `captureStream()` backs a hidden mirror element, which is the one that enters the window. The
  * original element keeps playing and stays the only audio source.
  */
+/**
+ * `window` opens a real picture in picture window. `burn-in` cannot, and instead paints the
+ * composite into the player itself so the browser's OWN picture in picture control carries the
+ * subtitles with it.
+ */
+export type PictureInPictureMode = 'window' | 'burn-in';
 export type PictureInPictureOptions = {
     video: HTMLVideoElement;
     /** The subtitle canvas. jassub sizes it to the video's content rect, so it maps 1:1. */
     canvas: HTMLCanvasElement;
     maxWidth?: number;
-    /** Where the hidden mirror is mounted. It must be in the document. Defaults to the video's parent. */
+    /** Where the mirror is mounted. It must be in the document. Defaults to the video's parent. */
     container?: HTMLElement;
-    /**
-     * Toggle used when compositing is unavailable or fails. The React layer passes the player store's
-     * own action, which handles Safari and exits fullscreen first; the default here does neither.
-     */
-    fallback?: () => Promise<void>;
+    /** Overrides detection. Passing a mode the browser cannot honour is the caller's problem. */
+    mode?: PictureInPictureMode;
+    /** Burn-in only, so the chrome can light the control up and say what happened. */
+    onBurnedInChange?: (burnedIn: boolean) => void;
 };
 export type PictureInPictureController = {
     toggle: () => Promise<void>;
     destroy: () => void;
+    mode: PictureInPictureMode;
 };
+/**
+ * null means offer no control at all. That covers Safari, whose picture in picture is
+ * `webkitSetPresentationMode` and not the W3C API, so neither arm here can drive it. A dead button
+ * is worse than no button.
+ */
+export declare const pictureInPictureMode: () => PictureInPictureMode | null;
 /** Takes over the document's Media Session play/pause handlers while a session is open. */
 export declare const createPictureInPicture: (options: PictureInPictureOptions) => PictureInPictureController;

package/dist/{engine-Dmc7JSd9.js → engine--OlGG-Ve.js}

@@ -220,82 +220,82 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 				i(), n(/* @__PURE__ */ Error("The MediaSource closed before a SourceBuffer could be created"));
 			};
 			C.addEventListener("sourceopen", a, { once: !0 }), C.addEventListener("sourceclose", o, { once: !0 }), C.addEventListener("error", o, { once: !0 });
-		}), { appendBuffer: L, unbufferRange: R, updateTimestampOffset: ee, endOfStream: te } = s(T, C);
+		}), { appendBuffer: L, unbufferRange: R, updateTimestampOffset: z, endOfStream: B } = s(T, C);
 		await L(e.data), e.subtitles?.length && o.pushFragments(e.subtitles), D?.();
-		let z = !1, B = !1, V = !1, H = 0, U = 0, W = null, G = 0, K = 0, q = !1, J = 0, Y = (e, t) => {
+		let V = !1, H = !1, U = !1, W = 0, G = 0, K = null, q = 0, J = 0, Y = !1, X = 0, Z = (e, t) => {
 			let n = e?.message === "Cancelled";
-			t && n || (console.error(e), !q && (q = !0, O?.(n ? Error("Reading the video file failed", { cause: e }) : e)));
-		}, X = async (e = !1) => {
+			t && n || (console.error(e), !Y && (Y = !0, O?.(n ? Error("Reading the video file failed", { cause: e }) : e)));
+		}, Q = async (e = !1) => {
 			let t = n.currentTime, r = e ? v : h, i = e ? y : g;
 			for (let { start: e, end: n } of a(T)) e < t + r && await R(e, t + r), n > t + i && await R(t + i, n);
-		}, ne = () => {
+		}, ee = () => {
 			let e = a(T);
 			if (!e.length) return !0;
 			let t = n.currentTime;
 			if (Math.max(...e.map((e) => e.end)) >= t + g) return !1;
 			let r = e.find((e) => e.start <= t + S && t < e.end);
 			return !r || r.end < t + _;
-		}, Z = () => {
+		}, $ = () => {
 			let e = n.currentTime;
 			return a(T).find((t) => t.start <= e + S && e < t.end);
-		}, re = () => {
-			let e = Z();
-			return !!e && e.end >= K - .1;
-		}, Q = () => {
+		}, te = () => {
+			let e = $();
+			return !!e && e.end >= J - .1;
+		}, ne = () => {
 			let e = a(T).map((e) => e.end);
-			e.length && (K = Math.max(K, ...e));
-		}, $ = async (e) => {
-			B = !0, W = null, G = 0, J = e;
-			let t = ++U;
+			e.length && (J = Math.max(J, ...e));
+		}, re = async (e) => {
+			H = !0, K = null, q = 0, X = e;
+			let t = ++G;
 			try {
 				let { data: n, pts: r, subtitles: i } = await N.seek(e);
-				if (F || t !== U || (i?.length && o.pushFragments(i), await ee(r), F || t !== U)) return;
-				n.byteLength && (await L(n), Q());
+				if (F || t !== G || (i?.length && o.pushFragments(i), await z(r), F || t !== G)) return;
+				n.byteLength && (await L(n), ne());
 			} catch (e) {
-				Y(e, F || t !== U);
+				Z(e, F || t !== G);
 			} finally {
-				t === U && (B = !1);
+				t === G && (H = !1);
 			}
 		}, ie = async () => {
-			let e = W;
+			let e = K;
 			if (e) try {
-				await L(e), Q(), W === e && (W = null, G = 0);
+				await L(e), ne(), K === e && (K = null, q = 0);
 			} catch (t) {
-				if (W !== e) return;
+				if (K !== e) return;
 				if (t?.name === "QuotaExceededError") {
-					let t = await X(!0).then(() => !0, () => !1);
-					if (W !== e) return;
+					let t = await Q(!0).then(() => !0, () => !1);
+					if (K !== e) return;
 					if (t) {
-						V = !1, await $(Z()?.end ?? n.currentTime);
+						U = !1, await re($()?.end ?? n.currentTime);
 						return;
 					}
 				}
-				if (G += 1, G < b) return;
-				throw W = null, t;
+				if (q += 1, q < b) return;
+				throw K = null, t;
 			}
 		}, ae = async () => {
-			if (z || B || F || !W && (V || !ne())) return;
-			let e = ++H, t = U, n = () => F || e !== H || t !== U;
-			z = !0;
+			if (V || H || F || !K && (U || !ee())) return;
+			let e = ++W, t = G, n = () => F || e !== W || t !== G;
+			V = !0;
 			try {
-				if (!W) {
+				if (!K) {
 					let { data: e, subtitles: t, finished: r } = await N.read();
-					if (n() || (r && (V = !0), t?.length && o.pushFragments(t), !e.byteLength)) return;
-					W = e, G = 0;
+					if (n() || (r && (U = !0), t?.length && o.pushFragments(t), !e.byteLength)) return;
+					K = e, q = 0;
 				}
-				await ie(), !n() && q && (q = !1, k?.());
+				await ie(), !n() && Y && (Y = !1, k?.());
 			} catch (e) {
-				Y(e, n());
+				Z(e, n());
 			} finally {
-				e === H && (z = !1);
+				e === W && (V = !1);
 			}
-		}, oe = (e) => e >= J && !!Z(), se = () => {
+		}, oe = (e) => e >= X && !!$(), se = () => {
 			let t = n.currentTime, r = e.info.input.duration || n.duration;
-			r > 0 && A?.(Math.min(Math.max(t / r, 0), 1)), !oe(t) && (V = !1, $(t));
+			r > 0 && A?.(Math.min(Math.max(t / r, 0), 1)), !oe(t) && (U = !1, re(t));
 		};
 		n.addEventListener("seeking", se), P.push(() => n.removeEventListener("seeking", se));
 		let ce = setInterval(() => {
-			X().catch(() => {}), ae().catch((e) => Y(e, !1)), V && !W && re() && C.readyState === "open" && te().catch(() => {});
+			Q().catch(() => {}), ae().catch((e) => Z(e, !1)), U && !K && te() && C.readyState === "open" && B().catch(() => {});
 		}, 100);
 		return P.push(() => clearInterval(ce)), {
 			destroy: I,
@@ -383,88 +383,119 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	} catch (e) {
 		throw w(c), e;
 	}
-}, N = 1280, P = 250, F = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype && typeof document < "u" && document.pictureInPictureEnabled, I = (e) => {
-	let { video: t, canvas: n, maxWidth: r = N } = e, i, a, o, s = !1, c = !1, l = !1, u = () => !!i && document.pictureInPictureElement === i.mirror, d = (e, r) => {
+}, N = 1280, P = 1920, F = 250, I = 100, L = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, R = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, z = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, B = () => L() ? R() ? "window" : z() ? "burn-in" : null : null, V = (e) => {
+	let { video: t, canvas: n } = e, r = e.mode ?? B() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? P : N), a, o, s, c = !1, l = !1, u = !1, d = !1, f, p = () => r === "burn-in" ? !!a : !!a && document.pictureInPictureElement === a.mirror, m = (e, r) => {
 		r.drawImage(t, 0, 0, e.width, e.height), n.width > 0 && n.height > 0 && r.drawImage(n, 0, 0, e.width, e.height);
-	}, f = () => {
-		i && d(i.composite, i.context);
-	}, p = "requestVideoFrameCallback" in t, m = () => {
-		f(), h();
 	}, h = () => {
-		l || !i || (a = p ? t.requestVideoFrameCallback(m) : requestAnimationFrame(m));
-	}, g = () => {
-		a !== void 0 && (p ? t.cancelVideoFrameCallback(a) : cancelAnimationFrame(a)), o !== void 0 && clearInterval(o), a = void 0, o = void 0;
-	}, _ = () => {
-		"mediaSession" in navigator && (navigator.mediaSession.playbackState = t.paused ? "paused" : "playing");
+		a && m(a.composite, a.context);
+	}, g = "requestVideoFrameCallback" in t, _ = () => {
+		h(), v();
 	}, v = () => {
-		s || !t.paused || t.play().catch(() => {});
+		d || !a || (o = g ? t.requestVideoFrameCallback(_) : requestAnimationFrame(_));
 	}, y = () => {
-		s || (t.paused || t.pause(), s = !0, i?.mirror.play().catch(() => {}).finally(() => {
-			s = !1;
-		}));
+		o !== void 0 && (g ? t.cancelVideoFrameCallback(o) : cancelAnimationFrame(o)), s !== void 0 && clearInterval(s), o = void 0, s = void 0;
 	}, b = () => {
-		_(), i?.mirror.play().catch(() => {});
+		"mediaSession" in navigator && (navigator.mediaSession.playbackState = t.paused ? "paused" : "playing");
 	}, x = () => {
-		_();
-	}, S = [["play", () => {
+		c || l || !t.paused || t.play().catch(() => {});
+	}, S = () => {
+		c || l || (t.paused || t.pause(), r !== "burn-in" && (c = !0, a?.mirror.play().catch(() => {}).finally(() => {
+			c = !1;
+		})));
+	}, C = () => {
+		b(), a?.mirror.play().catch(() => {});
+	}, w = () => {
+		b(), r === "burn-in" && a?.mirror.pause();
+	}, T = () => {
+		if (r !== "burn-in" || !a || !t.paused || l) return;
+		l = !0;
+		let { mirror: e } = a;
+		h(), e.play().then(() => new Promise((e) => {
+			setTimeout(e, I);
+		})).catch(() => {}).finally(() => {
+			e.pause(), setTimeout(() => {
+				l = !1;
+			}, I);
+		});
+	}, E = [["play", () => {
 		t.play().catch(() => {});
-	}], ["pause", () => t.pause()]], C = (e) => {
-		if ("mediaSession" in navigator) for (let [t, n] of S) try {
+	}], ["pause", () => t.pause()]], D = (e) => {
+		if ("mediaSession" in navigator) for (let [t, n] of E) try {
 			navigator.mediaSession.setActionHandler(t, e ? n : null);
 		} catch {}
-	}, w = () => {
-		if (g(), C(!1), t.removeEventListener("play", b), t.removeEventListener("pause", x), !i) return;
-		let { stream: e, mirror: n } = i;
-		n.removeEventListener("play", v), n.removeEventListener("pause", y), n.removeEventListener("leavepictureinpicture", T);
+	}, O = () => {
+		if (y(), D(!1), t.removeEventListener("play", C), t.removeEventListener("pause", w), t.removeEventListener("seeked", T), !a) {
+			f?.();
+			return;
+		}
+		let { stream: e, mirror: n } = a;
+		n.removeEventListener("play", x), n.removeEventListener("pause", S), n.removeEventListener("leavepictureinpicture", k);
 		for (let t of e.getTracks()) t.stop();
-		n.remove(), i = void 0;
-	}, T = () => w(), E = e.fallback ?? (async () => {
-		document.pictureInPictureElement === t ? await document.exitPictureInPicture() : await t.requestPictureInPicture();
-	}), D = async () => {
-		let n = Math.min(t.videoWidth || r, r), a = Math.round(n * ((t.videoHeight || 9) / (t.videoWidth || 16))), s = document.createElement("canvas");
-		s.width = n, s.height = a;
-		let c = s.getContext("2d");
-		if (!c) throw Error("the picture in picture composite has no 2d context");
-		let l = document.createElement("video");
-		l.muted = !0, l.playsInline = !0, l.style.cssText = "position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-1px;top:-1px", d(s, c), i = {
-			composite: s,
-			context: c,
-			stream: s.captureStream(),
-			mirror: l
-		}, l.srcObject = i.stream, (e.container ?? t.parentElement ?? document.body).appendChild(l), h(), o = setInterval(() => {
-			t.paused && f();
-		}, P), l.play().catch(() => {}), l.readyState === 0 && await new Promise((e) => {
+		n.remove(), a = void 0, f?.();
+	}, k = () => O(), A = (e) => {
+		let r = t.style.opacity, i = n.style.display;
+		e.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1", t.style.opacity = "0", n.style.display = "none", f = () => {
+			f = void 0, t.style.opacity = r, n.style.display = i;
+		};
+	}, j = async () => {
+		let n = Math.min(t.videoWidth || i, i), o = Math.round(n * ((t.videoHeight || 9) / (t.videoWidth || 16))), c = document.createElement("canvas");
+		c.width = n, c.height = o;
+		let l = c.getContext("2d");
+		if (!l) throw Error("the picture in picture composite has no 2d context");
+		let u = document.createElement("video");
+		u.muted = !0, u.playsInline = !0, r === "burn-in" ? A(u) : u.style.cssText = "position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-1px;top:-1px", m(c, l);
+		let f = {
+			composite: c,
+			context: l,
+			stream: c.captureStream(),
+			mirror: u
+		};
+		if (a = f, u.srcObject = f.stream, (e.container ?? t.parentElement ?? document.body).appendChild(u), v(), s = setInterval(() => {
+			t.paused && h();
+		}, F), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
 			let t = () => {
 				clearTimeout(n), e();
 			}, n = setTimeout(t, 1e3);
-			l.addEventListener("loadedmetadata", t, { once: !0 });
-		}), l.addEventListener("play", v), l.addEventListener("pause", y), l.addEventListener("leavepictureinpicture", T), t.addEventListener("play", b), t.addEventListener("pause", x), C(!0), _(), await l.requestPictureInPicture();
+			u.addEventListener("loadedmetadata", t, { once: !0 });
+		}), d || a !== f) {
+			u.remove();
+			return;
+		}
+		if (u.addEventListener("play", x), u.addEventListener("pause", S), u.addEventListener("leavepictureinpicture", k), t.addEventListener("play", C), t.addEventListener("pause", w), t.addEventListener("seeked", T), D(!0), b(), r === "burn-in") {
+			t.paused && u.pause(), e.onBurnedInChange?.(!0);
+			return;
+		}
+		await u.requestPictureInPicture();
 	};
 	return {
 		toggle: async () => {
-			if (!(l || c)) {
-				if (u()) {
-					await document.exitPictureInPicture().catch(() => {});
-					return;
-				}
-				if (!F()) {
-					await E();
-					return;
-				}
-				document.pictureInPictureElement && await document.exitPictureInPicture().catch(() => {}), c = !0;
+			if (!(d || u)) {
+				u = !0;
 				try {
-					await D();
-				} catch (e) {
-					console.warn("subtitle compositing for picture in picture failed, falling back", e), w(), await E().catch(() => {});
+					if (p()) {
+						if (r === "burn-in") {
+							O(), e.onBurnedInChange?.(!1);
+							return;
+						}
+						await document.exitPictureInPicture().catch(() => {});
+						return;
+					}
+					r !== "burn-in" && document.pictureInPictureElement && await document.exitPictureInPicture().catch(() => {});
+					try {
+						await j();
+					} catch (t) {
+						console.warn("subtitle compositing for picture in picture failed", t), O(), r === "burn-in" && e.onBurnedInChange?.(!1);
+					}
 				} finally {
-					c = !1;
+					u = !1;
 				}
 			}
 		},
+		mode: r,
 		destroy: () => {
-			l = !0, u() && document.exitPictureInPicture().catch(() => {}), w();
+			d = !0, r !== "burn-in" && p() && document.exitPictureInPicture().catch(() => {}), O(), r === "burn-in" && e.onBurnedInChange?.(!1);
 		}
 	};
 };
 //#endregion
-export { w as a, a as c, T as i, s as l, M as n, c as o, C as r, m as s, I as t };
+export { T as a, m as c, C as i, a as l, B as n, w as o, M as r, c as s, V as t, s as u };