@vplayer/core 0.1.5 → 0.1.7

package/dist/index.js

@@ -726,61 +726,77 @@ function J(e) {
 function Y(e) {
 	let r = x(), i = { ...e }, o = new t(), s = new j(), c = new a(i.lang);
 	i.translations && c.addTranslations(i.lang ?? "en", i.translations);
-	let l = new n(), u = i.reconnectMax ?? 3, p = i.reconnectSleep ?? 1500, m = null, h = null, g = null, _ = null, v = null, S = 0, C = null;
-	function w() {
+	let l = new n(), u = i.reconnectMax ?? 3, p = i.reconnectSleep ?? 1500, m = null, h = null, g = null, _ = null, v = null, S = 0, C = null, w = null;
+	function T() {
+		w && typeof navigator < "u" && "mediaSession" in navigator && navigator.mediaSession.metadata === w && (navigator.mediaSession.metadata = null), w = null;
+	}
+	function E() {
+		if (typeof navigator > "u" || !("mediaSession" in navigator) || typeof MediaMetadata > "u") return;
+		let e = i.title?.trim();
+		if (!e) {
+			T();
+			return;
+		}
+		let t = new MediaMetadata({
+			title: e,
+			artwork: i.poster ? [{ src: i.poster }] : []
+		});
+		navigator.mediaSession.metadata = t, w = t;
+	}
+	function D() {
 		l.register({
 			key: "Space",
 			description: "Toggle play/pause",
 			handler: (e) => {
-				e.preventDefault(), E.togglePlay();
+				e.preventDefault(), k.togglePlay();
 			}
 		}), l.register({
 			key: "KeyK",
 			description: "Toggle play/pause",
 			handler: (e) => {
-				e.preventDefault(), E.togglePlay();
+				e.preventDefault(), k.togglePlay();
 			}
 		}), l.register({
 			key: "KeyL",
 			description: "Toggle loop",
 			handler: (e) => {
-				e.preventDefault(), E.toggleLoop();
+				e.preventDefault(), k.toggleLoop();
 			}
 		}), l.register({
 			key: "KeyI",
 			description: "Toggle info panel",
 			handler: (e) => {
-				e.preventDefault(), E.toggleInfoPanel();
+				e.preventDefault(), k.toggleInfoPanel();
 			}
 		}), l.register({
 			key: "KeyF",
 			description: "Toggle fullscreen",
 			handler: (e) => {
-				e.preventDefault(), E.toggleFullscreen();
+				e.preventDefault(), k.toggleFullscreen();
 			}
 		}), l.register({
 			key: "KeyA",
 			description: "Cycle aspect ratio",
 			handler: (e) => {
-				e.preventDefault(), E.cycleAspectRatio();
+				e.preventDefault(), k.cycleAspectRatio();
 			}
 		}), l.register({
 			key: "KeyM",
 			description: "Toggle mute",
 			handler: (e) => {
-				e.preventDefault(), E.toggleMute();
+				e.preventDefault(), k.toggleMute();
 			}
 		}), l.register({
 			key: "ArrowLeft",
 			description: "Seek backward 5s",
 			handler: (e) => {
-				e.preventDefault(), E.skip(-5);
+				e.preventDefault(), k.skip(-5);
 			}
 		}), l.register({
 			key: "ArrowRight",
 			description: "Seek forward 5s",
 			handler: (e) => {
-				e.preventDefault(), E.skip(5);
+				e.preventDefault(), k.skip(5);
 			}
 		}), l.register({
 			key: "ArrowUp",
@@ -788,7 +804,7 @@ function Y(e) {
 			handler: (e) => {
 				e.preventDefault();
 				let t = Math.min(1, r.state.volume + .1);
-				E.setVolume(t);
+				k.setVolume(t);
 			}
 		}), l.register({
 			key: "ArrowDown",
@@ -796,12 +812,12 @@ function Y(e) {
 			handler: (e) => {
 				e.preventDefault();
 				let t = Math.max(0, r.state.volume - .1);
-				E.setVolume(t);
+				k.setVolume(t);
 			}
 		});
 	}
-	i.defaultHotkeys !== !1 && w();
-	function T() {
+	i.defaultHotkeys !== !1 && D();
+	function O() {
 		if (typeof document > "u") return;
 		let e = document;
 		r.setState((t) => ({
@@ -810,7 +826,7 @@ function Y(e) {
 			capabilities: d(h?.element ?? void 0, m)
 		}));
 	}
-	let E = {
+	let k = {
 		play: () => {
 			h?.play();
 		},
@@ -853,7 +869,7 @@ function Y(e) {
 		toggleFullscreen: () => {
 			if (!m || typeof document > "u") return;
 			let e = m, t = document, n = !!(document.fullscreenElement || t.webkitFullscreenElement), r = () => {
-				m?.focus({ preventScroll: !0 }), T();
+				m?.focus({ preventScroll: !0 }), O();
 			}, i = n ? typeof document.exitFullscreen == "function" ? document.exitFullscreen() : t.webkitExitFullscreen?.() : typeof m.requestFullscreen == "function" ? m.requestFullscreen() : e.webkitRequestFullscreen?.();
 			Promise.resolve(i).then(r, r);
 		},
@@ -901,7 +917,7 @@ function Y(e) {
 		},
 		cycleAspectRatio: () => {
 			let e = r.state.aspectRatio, t = U[(U.indexOf(e) + 1) % U.length] ?? "default";
-			E.setAspectRatio(t);
+			k.setAspectRatio(t);
 		},
 		toggleLoop: () => {
 			let e = h;
@@ -917,10 +933,10 @@ function Y(e) {
 			}));
 		}
 	};
-	function D(e) {
+	function A(e) {
 		return [
 			e.on("play", () => {
-				r.setState((e) => ({
+				E(), r.setState((e) => ({
 					...e,
 					status: "playing",
 					isPlaying: !0,
@@ -958,14 +974,15 @@ function Y(e) {
 				})), i.onTimeUpdate?.(e.currentTime);
 			}),
 			e.on("loadedmetadata", () => {
-				r.setState((t) => ({
+				v !== null && (clearTimeout(v), v = null), S = 0, r.setState((t) => ({
 					...t,
-					status: t.status === "idle" || t.status === "loading" ? "ready" : t.status,
+					status: t.status === "idle" || t.status === "loading" || t.status === "error" ? "ready" : t.status,
 					duration: f(e.duration) ? e.duration : 0,
 					isLive: !f(e.duration),
 					volume: e.volume,
 					isMuted: e.muted,
-					playbackRate: e.playbackRate
+					playbackRate: e.playbackRate,
+					error: null
 				}));
 			}),
 			e.on("progress", () => {
@@ -985,10 +1002,11 @@ function Y(e) {
 				}));
 			}),
 			e.on("canplay", () => {
-				r.setState((e) => ({
+				v !== null && (clearTimeout(v), v = null), S = 0, r.setState((e) => ({
 					...e,
 					status: e.isPlaying ? "playing" : "ready",
-					isBuffering: !1
+					isBuffering: !1,
+					error: null
 				}));
 			}),
 			e.on("durationchange", () => {
@@ -1062,20 +1080,13 @@ function Y(e) {
 						isReconnecting: !0
 					}
 				})), o.emit("video:reconnecting", { attempt: S + 1 }), v !== null && clearTimeout(v), v = setTimeout(() => {
-					v = null, S++, r.setState((e) => ({
-						...e,
-						error: {
-							message: t,
-							reconnectAttempt: S,
-							isReconnecting: !1
-						}
-					})), o.emit("video:reconnect", { attempt: S }), e.load();
+					v = null, S++, o.emit("video:reconnect", { attempt: S }), e.load();
 				}, p));
 			})
 		];
 	}
-	function O() {
-		k(), _ = setInterval(() => {
+	function N() {
+		P(), _ = setInterval(() => {
 			let e = h;
 			e && s.set(M.PLAYBACK_PROGRESS, {
 				time: e.currentTime,
@@ -1083,14 +1094,14 @@ function Y(e) {
 			});
 		}, 5e3);
 	}
-	function k() {
+	function P() {
 		_ !== null && (clearInterval(_), _ = null);
 	}
-	let A = r.subscribe(() => {
+	let F = r.subscribe(() => {
 		let e = r.state;
-		e.isPlaying && e.duration > 0 ? _ === null && O() : k();
-	}), N = null;
-	function P() {
+		e.isPlaying && e.duration > 0 ? _ === null && N() : P();
+	}), I = null;
+	function L() {
 		if (!i.persistPreferences) return;
 		let e = s.get(M.VOLUME), t = s.get(M.MUTED), n = s.get(M.PLAYBACK_RATE), a = s.get(M.LOOP), o = s.get(M.FLIP), c = s.get(M.ASPECT_RATIO);
 		r.setState((r) => ({
@@ -1101,15 +1112,15 @@ function Y(e) {
 			isLooping: a ?? r.isLooping,
 			flip: o ?? r.flip,
 			aspectRatio: q(c)
-		})), N = r.subscribe(() => {
+		})), I = r.subscribe(() => {
 			let e = r.state;
 			e.volume !== 1 && s.set(M.VOLUME, e.volume), e.isMuted && s.set(M.MUTED, !0), e.playbackRate !== 1 && s.set(M.PLAYBACK_RATE, e.playbackRate), e.isLooping ? s.set(M.LOOP, !0) : s.remove(M.LOOP), e.flip === "normal" ? s.remove(M.FLIP) : s.set(M.FLIP, e.flip), e.aspectRatio === "default" ? s.remove(M.ASPECT_RATIO) : s.set(M.ASPECT_RATIO, e.aspectRatio);
 		});
 	}
-	function F() {
-		N &&= (N(), null);
+	function R() {
+		I &&= (I(), null);
 	}
-	function I(e) {
+	function z(e) {
 		if (C?.abort(), C = null, !e) {
 			r.setState((e) => ({
 				...e,
@@ -1130,11 +1141,11 @@ function Y(e) {
 			})));
 		});
 	}
-	function L(e) {
+	function B(e) {
 		return {
 			name: e,
 			store: r,
-			remote: E,
+			remote: k,
 			events: o,
 			storage: s,
 			hotkeys: l,
@@ -1213,14 +1224,15 @@ function Y(e) {
 			}
 		};
 	}
-	let R = [];
-	function z() {
-		for (let e of R) e();
-		R = [], h && (h.destroy(), h = null, Y.engine = null);
+	let H = [];
+	function Y() {
+		v !== null && (clearTimeout(v), v = null), S = 0;
+		for (let e of H) e();
+		H = [], h && (h.destroy(), h = null, Q.engine = null);
 	}
-	function B(e) {
+	function X(e) {
 		let t = y(i), n = b(e, i);
-		h = n, Y.engine = n, R = D(n), e.playsInline = !0, e.autoplay = !!i.autoPlay, e.preload = e.preload || "metadata", r.setState((n) => ({
+		h = n, Q.engine = n, H = A(n), e.playsInline = !0, e.autoplay = !!i.autoPlay, e.preload = e.preload || "metadata", r.setState((n) => ({
 			...n,
 			status: "loading",
 			source: t,
@@ -1235,16 +1247,16 @@ function Y(e) {
 			error: null
 		})), i.autoPlay && n.play();
 	}
-	function H() {
+	function Z() {
 		let e = h?.element;
 		if (e) {
-			for (z(), e.pause(), e.removeAttribute("src"); e.firstChild;) e.removeChild(e.firstChild);
-			e.load(), B(e);
+			for (Y(), e.pause(), e.removeAttribute("src"); e.firstChild;) e.removeChild(e.firstChild);
+			e.load(), X(e);
 		}
 	}
-	let Y = {
+	let Q = {
 		store: r,
-		remote: E,
+		remote: k,
 		events: o,
 		storage: s,
 		i18n: c,
@@ -1255,7 +1267,7 @@ function Y(e) {
 			i = {
 				...i,
 				...e
-			}, r.setState((t) => {
+			}, (r.state.isPlaying || w) && E(), r.setState((t) => {
 				let n = e.subtitles ?? t.subtitleTracks, r = e.qualities ?? t.qualities;
 				return {
 					...t,
@@ -1264,18 +1276,18 @@ function Y(e) {
 					activeSubtitle: e.subtitles ? t.activeSubtitle && e.subtitles.some((e) => e.lang === t.activeSubtitle.lang) ? t.activeSubtitle : e.subtitles.find((e) => e.default) ?? e.subtitles[0] ?? null : t.activeSubtitle,
 					activeQuality: e.qualities ? e.qualities.includes(t.activeQuality) ? t.activeQuality : e.qualities[0] ?? "Auto" : t.activeQuality
 				};
-			}), (a || o) && I(i.thumbnails), (t || n) && H();
+			}), (a || o) && z(i.thumbnails), (t || n) && Z();
 		},
 		setThumbnails(e) {
 			i = {
 				...i,
 				thumbnails: e
-			}, I(e);
+			}, z(e);
 		},
 		initPlugins(e) {
 			let t = [];
 			for (let n of e) {
-				let e = L(n.name);
+				let e = B(n.name);
 				try {
 					let r = n.setup?.(e);
 					typeof r == "function" && t.push(r);
@@ -1292,10 +1304,10 @@ function Y(e) {
 			};
 		},
 		mount(e, t) {
-			h && this.unmount(), m = t, B(e), g = T, document.addEventListener("fullscreenchange", g), document.addEventListener("webkitfullscreenchange", g), I(i.thumbnails), P(), E.setAspectRatio(r.state.aspectRatio);
+			h && this.unmount(), m = t, X(e), g = O, document.addEventListener("fullscreenchange", g), document.addEventListener("webkitfullscreenchange", g), z(i.thumbnails), L(), k.setAspectRatio(r.state.aspectRatio);
 		},
 		unmount() {
-			z(), m = null, k(), C?.abort(), C = null, F(), v !== null && (clearTimeout(v), v = null), g &&= (document.removeEventListener("fullscreenchange", g), document.removeEventListener("webkitfullscreenchange", g), null), r.setState((e) => ({
+			Y(), T(), m = null, P(), C?.abort(), C = null, R(), v !== null && (clearTimeout(v), v = null), g &&= (document.removeEventListener("fullscreenchange", g), document.removeEventListener("webkitfullscreenchange", g), null), r.setState((e) => ({
 				...e,
 				status: "idle",
 				isPlaying: !1,
@@ -1305,10 +1317,10 @@ function Y(e) {
 			}));
 		},
 		destroy() {
-			this.unmount(), A(), o.clear();
+			this.unmount(), F(), o.clear();
 		}
 	};
-	return Y;
+	return Q;
 }
 //#endregion
 //#region src/gesture-engine.ts
@@ -1417,7 +1429,7 @@ var Q = {
 	contextMenuPlay: "Play",
 	contextMenuPause: "Pause",
 	contextMenuLoop: "Loop",
-	infoPanel: "Info",
+	infoPanel: "Debug stats",
 	loop: "Loop"
 }, $ = {
 	play: "lucide:play",

package/dist/types.d.ts

@@ -42,6 +42,8 @@ export interface PlayerOptions {
     src: string;
     /** MIME/content type hint used by source provider selection. */
     type?: string;
+    /** Title exposed to browser and operating-system media controls. */
+    title?: string;
     poster?: string;
     subtitles?: SubtitleTrack[];
     qualities?: string[];
@@ -172,7 +174,7 @@ export interface PlayerInstance {
     hotkeys: HotkeyRegistry;
     /** The active media engine. Null before mount and after unmount. */
     engine: MediaEngine | null;
-    updateOptions(opts: Partial<Pick<PlayerOptions, 'src' | 'type' | 'poster' | 'autoPlay' | 'subtitles' | 'qualities' | 'thumbnails' | 'transformThumbnailVTT'>>): void;
+    updateOptions(opts: Partial<Pick<PlayerOptions, 'src' | 'type' | 'title' | 'poster' | 'autoPlay' | 'subtitles' | 'qualities' | 'thumbnails' | 'transformThumbnailVTT'>>): void;
     setThumbnails(url?: string): void;
     initPlugins(plugins: PlayerPlugin[]): () => void;
     mount(videoEl: HTMLVideoElement, containerEl: HTMLDivElement): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vplayer/core",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "private": false,
   "repository": {
     "type": "git",