@banou/media-player 0.6.2 → 0.8.0

package/dist/engine-Dmc7JSd9.js

@@ -0,0 +1,470 @@
+import { makeRemuxer as e, makeThumbnailer as t } from "libav-wasm";
+import n from "jassub";
+import { parse as r, stringify as i } from "ass-compiler";
+//#region src/lib/engine/source-buffer.ts
+var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
+	index: n,
+	start: e.buffered.start(n),
+	end: e.buffered.end(n)
+})), o = (e) => new Promise((t, n) => {
+	let r = () => {
+		e.removeEventListener("updateend", i), e.removeEventListener("abort", i), e.removeEventListener("error", a);
+	}, i = () => {
+		r(), t();
+	}, a = (e) => {
+		r(), n(Error("The browser rejected a media segment", { cause: e }));
+	};
+	e.addEventListener("updateend", i, { once: !0 }), e.addEventListener("abort", i, { once: !0 }), e.addEventListener("error", a, { once: !0 });
+}), s = (e, t) => {
+	let n = Promise.resolve(), r = (e) => {
+		let t = n.then(e, e);
+		return n = t.catch(() => {}), t;
+	};
+	return {
+		appendBuffer: (t) => r(() => (e.appendBuffer(t), o(e))),
+		unbufferRange: (t, n) => r(() => t >= n ? Promise.resolve() : (e.remove(t, n), o(e))),
+		updateTimestampOffset: (t) => r(async () => {
+			e.timestampOffset = t;
+		}),
+		endOfStream: () => r(async () => {
+			if (!(t.readyState !== "open" || e.updating)) try {
+				t.endOfStream();
+			} catch {}
+		})
+	};
+}, c = -1, l = (e) => new Date(e).toISOString().slice(11, 22), u = (e, t) => e.createStyle({
+	...t,
+	treat_fontname_as_pattern: 0,
+	Blur: 0,
+	Justify: 0,
+	FontName: t.Fontname,
+	FontSize: Number(t.Fontsize),
+	PrimaryColour: Number(t.PrimaryColour),
+	SecondaryColour: Number(t.SecondaryColour),
+	OutlineColour: Number(t.OutlineColour),
+	BackColour: Number(t.BackColour),
+	Bold: Number(t.Bold),
+	Italic: Number(t.Italic),
+	Underline: Number(t.Underline),
+	StrikeOut: Number(t.StrikeOut),
+	ScaleX: Number(t.ScaleX),
+	ScaleY: Number(t.ScaleY),
+	Spacing: Number(t.Spacing),
+	Angle: Number(t.Angle),
+	BorderStyle: Number(t.BorderStyle),
+	Outline: Number(t.Outline),
+	Shadow: Number(t.Shadow),
+	Alignment: Number(t.Alignment),
+	MarginL: Number(t.MarginL),
+	MarginR: Number(t.MarginR),
+	MarginV: Number(t.MarginV),
+	Encoding: Number(t.Encoding)
+}), d = (e) => {
+	let t = r(e);
+	return i({
+		...t,
+		info: {
+			...t.info,
+			ScaledBorderAndShadow: "no",
+			LayoutResX: "",
+			LayoutResY: ""
+		}
+	});
+}, f = (e) => {
+	let t = e.content.match(/\r?\n\[Events\]\r?\nFormat: (.*)/)?.[0];
+	return t ? {
+		type: "header",
+		streamIndex: e.streamIndex,
+		content: e.content,
+		eventsContent: t,
+		parsed: r(e.content)
+	} : (console.warn(`subtitle stream ${e.streamIndex} has no Events format, ignoring the track`), null);
+}, p = (e, t) => {
+	let [n, i] = t.content.split(","), a = Number(n), o = `Dialogue: ${i},${l(t.start)},${l(t.end)},${t.content.replace(`${a},${i},`, "")}`, s = r(`${e.eventsContent}\r\n${o}`).events.dialogue[0];
+	if (!s) throw Error("dialogue event is undefined");
+	return {
+		type: "dialogue",
+		streamIndex: t.streamIndex,
+		index: a,
+		assEvent: {
+			...s,
+			Effect: s.Effect ?? "",
+			Text: s.Text.raw,
+			Duration: (s.End - s.Start) * 1e3,
+			Start: s.Start * 1e3,
+			End: s.End * 1e3,
+			ReadOrder: a,
+			_index: a
+		}
+	};
+}, m = (e) => {
+	let { video: t, canvas: r, workerUrl: i, wasmUrl: a, legacyWasmUrl: o, defaultFontUrl: s } = e, c, l = [], m = /* @__PURE__ */ new Map(), h = [], g = /* @__PURE__ */ new Map(), _, v = e.onStreams, y = setInterval(() => {
+		c?.setCurrentTime(t.paused, t.currentTime, t.playbackRate);
+	}, 100), b = () => c?.setRate(t.playbackRate), x = (e) => {
+		c = new n({
+			onDemandRender: !1,
+			video: t,
+			canvas: r,
+			subContent: d(e.content),
+			workerUrl: i,
+			modernWasmUrl: a,
+			...o ? { wasmUrl: o } : {},
+			fonts: l.map(([, e]) => e),
+			availableFonts: {
+				...Object.fromEntries(l),
+				...s ? { "liberation sans": s } : {}
+			}
+		}), t.removeEventListener("ratechange", c._boundSetRate), t.addEventListener("ratechange", b);
+		for (let t of e.parsed.styles.style) u(c, t);
+	};
+	return {
+		pushAttachments: (e) => {
+			l = [...l, ...e.map((e) => [e.filename, new Uint8Array(e.data)])];
+		},
+		pushFragments: (e) => {
+			for (let t of e) if (t.type === "header") {
+				if (m.has(t.streamIndex)) continue;
+				let e = f(t);
+				if (!e) continue;
+				m.set(t.streamIndex, e), h.push({
+					streamIndex: t.streamIndex,
+					title: t.title,
+					language: t.language
+				}), v?.([...h]), _ === void 0 && (_ = t.streamIndex), c || x(e);
+			} else {
+				let e = m.get(t.streamIndex);
+				if (!e) continue;
+				let n = g.get(t.streamIndex);
+				n || (n = /* @__PURE__ */ new Map(), g.set(t.streamIndex, n));
+				let r = p(e, t);
+				if (n.has(r.index)) continue;
+				n.set(r.index, r), _ === t.streamIndex && c?.createEvent(r.assEvent);
+			}
+		},
+		selectStream: (e) => {
+			let n = e ?? -1;
+			if (n === _ || !c) return;
+			_ = n, c.freeTrack();
+			let r = m.get(n);
+			if (r) {
+				c.setTrack(d(r.content));
+				for (let e of r.parsed.styles.style) u(c, e);
+				for (let e of g.get(n)?.values() ?? []) c.createEvent(e.assEvent);
+				c.setCurrentTime(t.paused, t.currentTime, t.playbackRate);
+			}
+		},
+		getStreams: () => [...h],
+		getSelectedStream: () => _,
+		setOnStreams: (e) => {
+			v = e;
+		},
+		destroy: () => {
+			clearInterval(y), t.removeEventListener("ratechange", b), c?.destroy(), c = void 0;
+		}
+	};
+}, h = -20, g = 60, _ = 30, v = -5, y = 20, b = 5, x = 15e3, S = 1, C = 25e5, w = (e) => {
+	let { worker: t } = e, n = setTimeout(() => t.terminate(), 2e3);
+	e.destroy().catch(() => {}).finally(() => {
+		clearTimeout(n), t.terminate();
+	});
+}, T = async (t) => {
+	let { videoElement: n, canvasElement: r, read: i, length: o, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: T = C, audioStreamIndex: E, onReady: D, onError: O, onRecovered: k, onSeek: A, onSubtitleStreams: j, onAudioStreams: M } = t, N = await e({
+		publicPath: c,
+		workerUrl: l,
+		workerOptions: { type: "module" },
+		bufferSize: T,
+		length: o,
+		audioStreamIndex: E,
+		read: i
+	}), P = [], F = !1, I = () => {
+		if (!F) {
+			F = !0;
+			for (let e of [...P].reverse()) try {
+				e();
+			} catch {}
+		}
+	};
+	P.push(() => w(N));
+	try {
+		let e = await N.init(), t = e.audioStreams ?? [], i = t.some((e) => e.streamIndex === E) ? E : t[0]?.streamIndex ?? -1;
+		M?.(t, i);
+		let o = m({
+			video: n,
+			canvas: r,
+			workerUrl: u,
+			wasmUrl: d,
+			legacyWasmUrl: f,
+			defaultFontUrl: p,
+			onStreams: j
+		});
+		if (P.push(() => o.destroy()), e.attachments?.length && o.pushAttachments(e.attachments), !e.info.output.videoMimeType) throw Error("The video codec in this file could not be identified");
+		let c = [e.info.output.videoMimeType, e.info.output.audioMimeType].filter(Boolean).join(","), l = `video/mp4; codecs="${c}"`;
+		if (!MediaSource.isTypeSupported(l)) throw Error(`This browser cannot play the codecs in this file: ${c}`);
+		let C = new MediaSource(), w = URL.createObjectURL(C);
+		P.push(() => URL.revokeObjectURL(w)), n.src = w;
+		let T = await new Promise((t, n) => {
+			let r = setTimeout(() => {
+				i(), n(/* @__PURE__ */ Error("The MediaSource never opened"));
+			}, x), i = () => {
+				clearTimeout(r), C.removeEventListener("sourceopen", a), C.removeEventListener("sourceclose", o), C.removeEventListener("error", o);
+			}, a = () => {
+				try {
+					let n = C.addSourceBuffer(l);
+					n.mode = "segments";
+					let r = e.info.input.duration;
+					Number.isFinite(r) && r > 0 && (C.duration = r), i(), t(n);
+				} catch (e) {
+					i(), n(e);
+				}
+			}, o = () => {
+				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);
+		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 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) => {
+			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 = () => {
+			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 = () => {
+			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;
+			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());
+			} catch (e) {
+				Y(e, F || t !== U);
+			} finally {
+				t === U && (B = !1);
+			}
+		}, ie = async () => {
+			let e = W;
+			if (e) try {
+				await L(e), Q(), W === e && (W = null, G = 0);
+			} catch (t) {
+				if (W !== e) return;
+				if (t?.name === "QuotaExceededError") {
+					let t = await X(!0).then(() => !0, () => !1);
+					if (W !== e) return;
+					if (t) {
+						V = !1, await $(Z()?.end ?? n.currentTime);
+						return;
+					}
+				}
+				if (G += 1, G < b) return;
+				throw W = 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;
+			try {
+				if (!W) {
+					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;
+				}
+				await ie(), !n() && q && (q = !1, k?.());
+			} catch (e) {
+				Y(e, n());
+			} finally {
+				e === H && (z = !1);
+			}
+		}, oe = (e) => e >= J && !!Z(), 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));
+		};
+		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(() => {});
+		}, 100);
+		return P.push(() => clearInterval(ce)), {
+			destroy: I,
+			selectSubtitleStream: (e) => o.selectStream(e),
+			indexes: e.indexes ?? [],
+			duration: e.info.input.duration,
+			videoMimeType: e.info.output.videoMimeType,
+			audioMimeType: e.info.output.audioMimeType
+		};
+	} catch (e) {
+		throw I(), e;
+	}
+}, E = 5, D = 500, O = 320, k = 1e6, A = 3, j = 1e4, M = async (e) => {
+	let { publicPath: n, workerUrl: r, length: i, read: a, onThumbnails: o, width: s = O } = e, c = await t({
+		publicPath: n,
+		workerUrl: r,
+		workerOptions: { type: "module" },
+		length: i,
+		read: a
+	});
+	try {
+		let t = await c.init(), n = t.duration, r = Math.max(e.interval ?? E, n / D), a = [];
+		for (let [e, o] of t.indexes.entries()) {
+			let s = a.at(-1);
+			s && o.timestamp - s.timestamp < r || a.push({
+				timestamp: o.timestamp,
+				endTime: n,
+				startByte: o.pos,
+				endByte: Math.min((t.indexes[e + 1]?.pos ?? i) + k, i),
+				done: !1,
+				attempts: 0
+			});
+		}
+		for (let [e, t] of a.entries()) t.endTime = a[e + 1]?.timestamp ?? n;
+		a.length > 1 && a.at(-1).timestamp > n - r * 2 && a.pop();
+		let l = [], u = !1, d = Promise.resolve(), f = () => {
+			let e = [];
+			for (let [t, n] of l.entries()) {
+				n.startTime - (e.at(-1)?.endTime ?? 0) > .01 && e.push({
+					url: "",
+					startTime: e.at(-1)?.endTime ?? 0,
+					endTime: n.startTime
+				}), e.push(n);
+				let r = l[t + 1];
+				r && r.startTime - n.endTime > .01 && e.push({
+					url: "",
+					startTime: n.endTime,
+					endTime: r.startTime
+				});
+			}
+			let t = e.at(-1)?.endTime ?? 0;
+			n - t > .01 && e.push({
+				url: "",
+				startTime: t,
+				endTime: n
+			}), o(e);
+		}, p = (e) => {
+			e.done = !0, d = d.then(async () => {
+				if (u) return;
+				let t = await Promise.race([c.readKeyframe(e.timestamp), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), j))]), n = await createImageBitmap(new Blob([t], { type: "image/png" })), r = new OffscreenCanvas(s, Math.max(1, Math.round(n.height * (s / n.width))));
+				r.getContext("2d").drawImage(n, 0, 0, r.width, r.height), n.close();
+				let i = await r.convertToBlob({
+					type: "image/webp",
+					quality: .7
+				});
+				u || (l = [...l, {
+					url: URL.createObjectURL(i),
+					startTime: e.timestamp,
+					endTime: e.endTime
+				}].sort((e, t) => e.startTime - t.startTime), f());
+			}).catch(() => {
+				e.attempts += 1, e.done = e.attempts >= A;
+			});
+		};
+		return f(), {
+			update: (e) => {
+				if (!u) for (let t of a) t.done || (!e || e.some(([e, n]) => e <= t.startByte && t.endByte <= n)) && p(t);
+			},
+			destroy: () => {
+				u = !0;
+				for (let e of l) URL.revokeObjectURL(e.url);
+				l = [], w(c);
+			}
+		};
+	} 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) => {
+		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");
+	}, v = () => {
+		s || !t.paused || t.play().catch(() => {});
+	}, y = () => {
+		s || (t.paused || t.pause(), s = !0, i?.mirror.play().catch(() => {}).finally(() => {
+			s = !1;
+		}));
+	}, b = () => {
+		_(), i?.mirror.play().catch(() => {});
+	}, x = () => {
+		_();
+	}, S = [["play", () => {
+		t.play().catch(() => {});
+	}], ["pause", () => t.pause()]], C = (e) => {
+		if ("mediaSession" in navigator) for (let [t, n] of S) 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);
+		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) => {
+			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();
+	};
+	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;
+				try {
+					await D();
+				} catch (e) {
+					console.warn("subtitle compositing for picture in picture failed, falling back", e), w(), await E().catch(() => {});
+				} finally {
+					c = !1;
+				}
+			}
+		},
+		destroy: () => {
+			l = !0, u() && document.exitPictureInPicture().catch(() => {}), w();
+		}
+	};
+};
+//#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 };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { MediaPlayer, default } from './react/video-player';
+export type { MediaPlayerOptions, MediaPlayerLocalOptions, MediaPlayerRemoteOptions, MediaPlayerSource, } from './react/video-player';
+export { isDelegatedTracks, isExternalThumbnails } from './react/media';
+export type { DelegatedSelection, DelegatedTracks, ExternalThumbnails, PlayerMedia, TimeRangesLike, } from './react/media';
+export { Player, usePlayer } from './react/player';
+export type { PlayerStore } from './react/player';
+export { sourceFeature } from './react/source-feature';
+export type { DownloadedRange, SourceState } from './react/source-feature';
+export { useSeekThumbnails } from './react/hooks/use-thumbnails';
+export { usePictureInPicture } from './react/hooks/use-picture-in-picture';
+export { inputToRemuxerInput } from './utils/source';
+export type { RemuxerInput } from './utils/source';
+export type { AudioStream, MediaIndex, PictureInPictureController, PlaybackController, PlaybackOptions, SubtitleStream, ThumbnailImage, } from './engine';
+export { startPlayback, createThumbnailGenerator, createSubtitleRenderer, createPictureInPicture, SUBTITLES_OFF, } from './engine';