@vplayer/core 0.2.3 → 0.4.0

package/dist/index.d.ts

@@ -18,8 +18,10 @@ export { canUseMSE, canUseNativeHLS, canUseFullscreen, canUsePictureInPicture, c
 export type { MediaCapabilitiesSnapshot } from './media-capabilities';
 export { formatTime } from './utils';
 export { defaultPlayerLabels } from './defaults';
+export { createMediaSessionController } from './media-session';
+export type { MediaSessionController } from './media-session';
 export { BaseMediaEngine, NativeVideoEngine, HlsMediaEngine, DashMediaEngine } from './media-engine';
 export type { MediaEngine, MediaEngineDimensions, MediaEngineError, MediaEngineEvent, MediaEngineEventHandler, HlsMediaEngineOptions, DashMediaEngineOptions, } from './media-engine';
 export { createMediaStore, getInitialMediaState, selectMedia, selectAudio, selectPreferences, selectUI, selectPlugins, selectThumbnails, selectError, } from './state/slices';
-export type { PlayerOptions, TransformThumbnailVTT, MediaState, ResumeState, MediaRemote, PlayerLabels, PlayerInstance, PlayerSystems, PlayerError, PlaybackStatus, } from './types';
+export type { PlayerOptions, MediaSessionMetadataOptions, TransformThumbnailVTT, MediaState, ResumeState, MediaRemote, PlayerLabels, PlayerInstance, PlayerSystems, PlayerError, PlaybackStatus, } from './types';
 export type { ControlRegistration, SettingRegistration, LayerRegistration, ContextMenuItem, ContextMenuRegistration, PlayerPlugin, PluginAPI, RemoteRef, PlayerContextRef, FlipState, AspectRatioState, SettingItem, } from './plugin-api';

package/dist/index.js

@@ -188,12 +188,98 @@ function f(e) {
 	return Number.isFinite(e) && e > 0;
 }
 //#endregion
+//#region src/media-session.ts
+var p = 10, m = 1, h = [
+	"play",
+	"pause",
+	"seekbackward",
+	"seekforward",
+	"seekto"
+];
+function g() {
+	return typeof navigator > "u" || !("mediaSession" in navigator) ? null : navigator.mediaSession;
+}
+function _(e, t, n) {
+	if (typeof e.setActionHandler == "function") try {
+		e.setActionHandler(t, n);
+	} catch {}
+}
+function v() {
+	let e = null, t, n, r, i, a = !1, o = NaN, s = NaN, c = NaN;
+	function l() {
+		let a = g();
+		a && e && a.metadata === e && (a.metadata = null), e = null, t = void 0, n = void 0, r = void 0, i = void 0;
+	}
+	function u(e) {
+		let t = g();
+		!t || a || (_(t, "play", () => e.play()), _(t, "pause", () => e.pause()), _(t, "seekbackward", (t) => {
+			e.skip(-(t.seekOffset ?? p));
+		}), _(t, "seekforward", (t) => {
+			e.skip(t.seekOffset ?? p);
+		}), _(t, "seekto", (t) => {
+			typeof t.seekTime == "number" && e.seek(t.seekTime);
+		}), a = !0);
+	}
+	function d(a, o, s) {
+		let c = g();
+		if (!c || typeof MediaMetadata > "u") return;
+		let u = a?.trim() || void 0, d = o?.artwork ?? s, f = o?.artist?.trim() || void 0, p = o?.album?.trim() || void 0;
+		if (!u) {
+			l();
+			return;
+		}
+		if (e && c.metadata === e && t === u && n === d && r === f && i === p) return;
+		let m = new MediaMetadata({
+			title: u,
+			...f ? { artist: f } : {},
+			...p ? { album: p } : {},
+			artwork: d ? [{ src: d }] : []
+		});
+		c.metadata = m, e = m, t = u, n = d, r = f, i = p;
+	}
+	function v(e) {
+		let t = g();
+		t && (t.playbackState = e);
+	}
+	function y(e, t, n, r = !1) {
+		let i = g();
+		if (!(!i || typeof i.setPositionState != "function") && !(!f(e) || !Number.isFinite(t) || t < 0) && !(!r && Number.isFinite(o) && Math.abs(t - o) < m && e === s && n === c)) try {
+			i.setPositionState({
+				duration: e,
+				playbackRate: n,
+				position: Math.min(t, e)
+			}), o = t, s = e, c = n;
+		} catch {}
+	}
+	function b() {
+		let e = g();
+		if (e) {
+			if (a) {
+				for (let t of h) _(e, t, null);
+				a = !1;
+			}
+			e.playbackState = "none";
+		}
+		l(), o = NaN, s = NaN, c = NaN;
+	}
+	return {
+		setup: u,
+		syncMetadata: d,
+		setPlaybackState: v,
+		syncPosition: y,
+		get hasMetadata() {
+			return e !== null;
+		},
+		teardown: b
+	};
+}
+//#endregion
 //#region src/storage.ts
-var ee = "vplayer", p = class {
+var y = "vplayer", b = class {
 	fallback = /* @__PURE__ */ new Map();
 	prefix;
 	constructor(e = {}) {
-		this.prefix = e.prefix ?? ee;
+		this.prefix = e.prefix ?? y;
 	}
 	fullKey(e) {
 		return `${this.prefix}:${e}`;
@@ -234,7 +320,7 @@ var ee = "vplayer", p = class {
 		} catch {}
 		this.fallback.clear();
 	}
-}, m = {
+}, x = {
 	VOLUME: "volume",
 	MUTED: "muted",
 	PLAYBACK_RATE: "playbackRate",
@@ -244,10 +330,10 @@ var ee = "vplayer", p = class {
 	LOOP: "loop",
 	FLIP: "flip",
 	ASPECT_RATIO: "aspectRatio"
-}, te = class {
+}, ee = class {
 	storage;
 	maxEntries;
-	constructor(e = new p(), t = 100) {
+	constructor(e = new b(), t = 100) {
 		this.storage = e, this.maxEntries = t;
 	}
 	async load(e) {
@@ -267,7 +353,7 @@ var ee = "vplayer", p = class {
 		let t = this.storage.get("progress") ?? {};
 		delete t[e], Object.keys(t).length === 0 ? this.storage.remove("progress") : this.storage.set("progress", t);
 	}
-}, h = class {
+}, S = class {
 	element;
 	destroyed = !1;
 	listeners = /* @__PURE__ */ new Map();
@@ -415,9 +501,9 @@ var ee = "vplayer", p = class {
 		this.domListeners = [];
 	}
 	destroy() {
-		this.destroyed || (this.destroyed = !0, this.detachDOMListeners(), this.listeners.clear());
+		this.destroyed || (this.destroyed = !0, this.element.pause(), this.detachDOMListeners(), this.listeners.clear());
 	}
-}, g = class extends h {}, _ = class extends h {
+}, C = class extends S {}, w = class extends S {
 	hls = null;
 	hlsSrc;
 	hlsConfig;
@@ -455,7 +541,7 @@ var ee = "vplayer", p = class {
 	destroy() {
 		this.destroyed || (super.destroy(), this.hls &&= (this.hls.destroy(), null));
 	}
-}, v = class extends h {
+}, T = class extends S {
 	dashPlayer = null;
 	dashSrc;
 	dashConfig;
@@ -483,37 +569,37 @@ var ee = "vplayer", p = class {
 };
 //#endregion
 //#region src/source-resolver.ts
-function y(e) {
+function E(e) {
 	try {
 		return new URL(e, typeof window < "u" ? window.location.href : "http://localhost").pathname.toLowerCase();
 	} catch {
 		return e.toLowerCase().split("?")[0].split("#")[0];
 	}
 }
-function b(e) {
-	let t = e.type?.toLowerCase() ?? "", n = y(e.src);
+function D(e) {
+	let t = e.type?.toLowerCase() ?? "", n = E(e.src);
 	return t.includes("mpegurl") || t.includes("hls") || n.endsWith(".m3u8") ? "hls" : t.includes("dash") || n.endsWith(".mpd") ? "dash" : /\.(mp4|m4v|webm|ogv|ogg|mov)$/i.test(n) || t.startsWith("video/") ? "native" : "unknown";
 }
-function x(e) {
+function O(e) {
 	return {
 		src: e.src,
 		type: e.type
 	};
 }
-function ne(e, t) {
+function te(e, t) {
 	if (t.engine) return typeof t.engine == "function" ? t.engine(e) : t.engine;
-	let n = x(t), r = b(n);
-	return r === "hls" && !s(e) ? new _(e, {
+	let n = O(t), r = D(n);
+	return r === "hls" && !s(e) ? new w(e, {
 		src: n.src,
 		hlsConfig: t.hlsConfig
-	}) : r === "dash" ? new v(e, {
+	}) : r === "dash" ? new T(e, {
 		src: n.src,
 		dashConfig: t.dashConfig
-	}) : (e.src = n.src, new g(e));
+	}) : (e.src = n.src, new C(e));
 }
 //#endregion
 //#region src/subtitle-parser.ts
-var S = {
+var k = {
 	fontSize: "medium",
 	fontScale: 100,
 	fontFamily: "sans",
@@ -526,16 +612,16 @@ var S = {
 	position: 0,
 	lineHeight: 1.35,
 	delay: 0
-}, C = "(?:\\d{2}:)?\\d{2}:\\d{2}[.,]\\d{3}", w = RegExp(`^(${C})\\s*-->\\s*(${C})(?:\\s+(.*))?$`);
-function T(e) {
+}, A = "(?:\\d{2}:)?\\d{2}:\\d{2}[.,]\\d{3}", j = RegExp(`^(${A})\\s*-->\\s*(${A})(?:\\s+(.*))?$`);
+function M(e) {
 	return e.replace(/^\uFEFF/, "").replace(/\r\n?/g, "\n");
 }
-function E(e) {
+function N(e) {
 	let t = e.replace(",", ".").split(":").map(Number);
 	return t.some((e) => !Number.isFinite(e)) ? NaN : t.length === 3 ? t[0] * 3600 + t[1] * 60 + t[2] : t.length === 2 ? t[0] * 60 + t[1] : t[0];
 }
-function D(e, t) {
-	let n = T(e).trim();
+function P(e, t) {
+	let n = M(e).trim();
 	if (t === "vtt") {
 		let e = n.indexOf("\n");
 		n = (e === -1 ? "" : n.slice(e + 1)).trim();
@@ -544,11 +630,11 @@ function D(e, t) {
 	for (let e of n.split(/\n{2,}/)) {
 		let t = e.split("\n").map((e) => e.trimEnd()), n = t[0]?.trim();
 		if (!n || n.startsWith("NOTE") || n === "STYLE" || n === "REGION") continue;
-		let i = t.findIndex((e) => w.test(e.trim()));
+		let i = t.findIndex((e) => j.test(e.trim()));
 		if (i === -1) continue;
-		let a = w.exec(t[i].trim());
+		let a = j.exec(t[i].trim());
 		if (!a) continue;
-		let o = E(a[1]), s = E(a[2]), c = t.slice(i + 1).filter((e) => e.trim().length > 0).join("\n");
+		let o = N(a[1]), s = N(a[2]), c = t.slice(i + 1).filter((e) => e.trim().length > 0).join("\n");
 		if (!Number.isFinite(o) || !Number.isFinite(s) || s <= o || !c) continue;
 		let l = i > 0 ? t[i - 1]?.trim() : void 0;
 		r.push({
@@ -562,14 +648,14 @@ function D(e, t) {
 	}
 	return r;
 }
-function O(e) {
-	return D(e, "srt");
+function F(e) {
+	return P(e, "srt");
 }
-function k(e) {
-	return D(e, "vtt");
+function I(e) {
+	return P(e, "vtt");
 }
-function A(e, t = {}) {
-	let n = T(e).trimStart(), r = t.fileName?.toLowerCase().match(/\\.(vtt|srt)$/)?.[1], i = t.mimeType === "text/vtt" ? "vtt" : t.mimeType === "application/x-subrip" ? "srt" : void 0, a = n.startsWith("WEBVTT") ? "vtt" : w.test(n.split("\n")[0] ?? "") ? "srt" : void 0, o = t.format ?? i ?? r ?? a;
+function L(e, t = {}) {
+	let n = M(e).trimStart(), r = t.fileName?.toLowerCase().match(/\\.(vtt|srt)$/)?.[1], i = t.mimeType === "text/vtt" ? "vtt" : t.mimeType === "application/x-subrip" ? "srt" : void 0, a = n.startsWith("WEBVTT") ? "vtt" : j.test(n.split("\n")[0] ?? "") ? "srt" : void 0, o = t.format ?? i ?? r ?? a;
 	if (!o) return {
 		ok: !1,
 		error: {
@@ -577,7 +663,7 @@ function A(e, t = {}) {
 			message: "Expected a WebVTT or SRT subtitle file."
 		}
 	};
-	let s = o === "vtt" ? k(n) : O(n);
+	let s = o === "vtt" ? I(n) : F(n);
 	return s.length === 0 ? {
 		ok: !1,
 		error: {
@@ -590,9 +676,9 @@ function A(e, t = {}) {
 		cues: s
 	};
 }
-async function j(e, t) {
+async function R(e, t) {
 	if (e.content !== void 0) {
-		let t = A(e.content, {
+		let t = L(e.content, {
 			format: e.format,
 			fileName: e.label
 		});
@@ -602,7 +688,7 @@ async function j(e, t) {
 	if (!e.src) throw Error("Subtitle track has no source.");
 	let n = await fetch(e.src, { signal: t });
 	if (!n.ok) throw Error(`Failed to fetch subtitles: ${n.status}`);
-	let r = A(await n.text(), {
+	let r = L(await n.text(), {
 		format: e.format,
 		fileName: e.src,
 		mimeType: n.headers.get("content-type")?.split(";")[0]
@@ -610,7 +696,7 @@ async function j(e, t) {
 	if (!r.ok) throw Error(r.error.message);
 	return r.cues;
 }
-function M(e, t) {
+function z(e, t) {
 	let n = 0, r = e.length - 1;
 	for (; n <= r;) {
 		let i = n + r >> 1, a = e[i];
@@ -620,7 +706,7 @@ function M(e, t) {
 	}
 	return null;
 }
-function N(e) {
+function ne(e) {
 	let t = e.match(/#xywh=(\d+),(\d+),(\d+),(\d+)/);
 	return t ? {
 		src: e.replace(/#xywh=.*$/, ""),
@@ -630,7 +716,7 @@ function N(e) {
 		h: Number(t[4])
 	} : null;
 }
-function P(e) {
+function B(e) {
 	let t = e.replace(/\r\n/g, "\n"), n = t.indexOf("\n\n");
 	return n > 0 && (t = t.slice(n + 2)), t.trim().split(/\n\n+/).map((e) => {
 		let t = e.split("\n"), n = t.findIndex((e) => e.includes("-->"));
@@ -639,7 +725,7 @@ function P(e) {
 		if (!r) return null;
 		let i = t.slice(n + 1).find((e) => e.trim().length > 0);
 		if (!i) return null;
-		let a = i.trim(), o = N(a), s = E(r[1]), c = E(r[2]);
+		let a = i.trim(), o = ne(a), s = N(r[1]), c = N(r[2]);
 		return o ? {
 			start: s,
 			end: c,
@@ -659,20 +745,20 @@ function P(e) {
 		};
 	}).filter((e) => e !== null);
 }
-function F(e, t) {
+function V(e, t) {
 	try {
 		return new URL(e, t).toString();
 	} catch {
 		return e;
 	}
 }
-async function I(e, t, n) {
+async function re(e, t, n) {
 	let r = await fetch(e, { signal: t });
 	if (!r.ok) throw Error(`Failed to fetch thumbnail VTT: ${r.status}`);
 	let i = r.url || e, a = await r.text();
-	return P(n ? await n(a, i) : a).map((e) => (e.src = F(e.src, i), e));
+	return B(n ? await n(a, i) : a).map((e) => (e.src = V(e.src, i), e));
 }
-function L(e, t) {
+function ie(e, t) {
 	if (e.length === 0) return null;
 	let n = 0, r = e.length - 1;
 	for (; n <= r;) {
@@ -685,10 +771,10 @@ function L(e, t) {
 }
 //#endregion
 //#region src/state/slices.ts
-function re() {
-	return new e(R());
+function ae() {
+	return new e(H());
 }
-function R() {
+function H() {
 	return {
 		status: "idle",
 		source: null,
@@ -715,7 +801,7 @@ function R() {
 		subtitleSearchResults: [],
 		subtitleSearchStatus: "idle",
 		subtitleSearchError: null,
-		captionSettings: { ...S },
+		captionSettings: { ...k },
 		activeQuality: "Auto",
 		qualities: [],
 		controlsVisible: !0,
@@ -739,7 +825,7 @@ function R() {
 		resumeState: { status: "idle" }
 	};
 }
-var ie = (e) => ({
+var U = (e) => ({
 	status: e.status,
 	source: e.source,
 	isPlaying: e.isPlaying,
@@ -752,10 +838,10 @@ var ie = (e) => ({
 	playbackRate: e.playbackRate,
 	isLive: e.isLive,
 	resumeState: e.resumeState
-}), z = (e) => ({
+}), W = (e) => ({
 	volume: e.volume,
 	isMuted: e.isMuted
-}), B = (e) => ({
+}), G = (e) => ({
 	isLooping: e.isLooping,
 	flip: e.flip,
 	aspectRatio: e.aspectRatio,
@@ -771,27 +857,27 @@ var ie = (e) => ({
 	captionSettings: e.captionSettings,
 	activeQuality: e.activeQuality,
 	qualities: e.qualities
-}), ae = (e) => ({
+}), K = (e) => ({
 	controlsVisible: e.controlsVisible,
 	capabilities: e.capabilities,
 	isFullscreen: e.isFullscreen,
 	infoPanelVisible: e.infoPanelVisible,
 	notification: e.notification
-}), V = (e) => ({
+}), oe = (e) => ({
 	controls: e.controls,
 	settings: e.settings,
 	layers: e.layers,
 	contextMenuItems: e.contextMenuItems,
 	contextMenuEnabled: e.contextMenuEnabled
-}), H = (e) => ({ thumbnailCues: e.thumbnailCues }), U = (e) => e.error, W = [
+}), se = (e) => ({ thumbnailCues: e.thumbnailCues }), ce = (e) => e.error, q = [
 	"default",
 	"16:9",
 	"4:3",
 	"21:9",
 	"cover",
 	"fill"
-], oe = 5e3, se = 2;
-function ce(e) {
+], le = 5e3, ue = 2;
+function de(e) {
 	try {
 		let t = new URL(e, typeof document > "u" ? void 0 : document.baseURI);
 		return t.search = "", t.hash = "", t.href;
@@ -799,11 +885,11 @@ function ce(e) {
 		return e.split(/[?#]/, 1)[0] ?? e;
 	}
 }
-var le = {
+var fe = {
 	"16:9": "16 / 9",
 	"4:3": "4 / 3",
 	"21:9": "21 / 9"
-}, G = {
+}, pe = {
 	default: "default",
 	"16:9": "16-9",
 	"4:3": "4-3",
@@ -811,81 +897,81 @@ var le = {
 	cover: "cover",
 	fill: "fill"
 };
-function ue(e) {
+function me(e) {
 	e.classList.remove("vplayer--media-default", "vplayer--media-16-9", "vplayer--media-4-3", "vplayer--media-21-9", "vplayer--media-cover", "vplayer--media-fill");
 }
-function de(e) {
-	return typeof e == "string" && e in G ? e : "default";
+function he(e) {
+	return typeof e == "string" && e in pe ? e : "default";
 }
-function fe(e) {
+function ge(e) {
 	return e === "cover" ? "cover" : e === "fill" ? "fill" : "contain";
 }
-function K(e) {
+function J(e) {
 	return {
 		...e,
 		id: e.id ?? `${e.local ? "local" : "track"}:${e.src ?? e.label}:${e.lang}`
 	};
 }
-function q(e) {
-	let r = re(), i = { ...e }, o = new t(), s = new p(), c = new a(i.lang);
+function Y(e) {
+	let r = ae(), i = { ...e }, o = new t(), s = new b(), c = new a(i.lang);
 	i.translations && c.addTranslations(i.lang ?? "en", i.translations);
-	let l = new n(), u = i.reconnectMax ?? 3, ee = i.reconnectSleep ?? 1500, h = null, g = null, _ = null, v = 0, y = NaN, b = null, C = 0, w = null, T = null, E = null, D = null, O = new te(), k = 0, A = !1, M = null, N = [], P = !1;
-	function F(e) {
-		let t = e.playbackProgress?.id ?? (e.playbackProgress?.normalizeUrl === !1 ? e.src : ce(e.src));
+	let l = new n(), u = i.reconnectMax ?? 3, p = i.reconnectSleep ?? 1500, m = null, h = null, g = null, _ = 0, y = NaN, S = null, C = 0, w = null, T = null, E = null, D = v(), A = new ee(), j = 0, M = !1, N = null, P = [], F = !1;
+	function I(e) {
+		let t = e.playbackProgress?.id ?? (e.playbackProgress?.normalizeUrl === !1 ? e.src : de(e.src));
 		return {
-			generation: k,
+			generation: j,
 			id: t,
-			store: e.playbackProgress?.store ?? O
+			store: e.playbackProgress?.store ?? A
 		};
 	}
-	let L = F(i);
-	function R() {
-		if (P) return;
-		let e = N.shift();
-		e && (P = !0, (e.kind === "save" ? e.target.store.save(e.target.id, e.progress) : e.target.store.clear(e.target.id)).catch((t) => {
+	let L = I(i);
+	function z() {
+		if (F) return;
+		let e = P.shift();
+		e && (F = !0, (e.kind === "save" ? e.target.store.save(e.target.id, e.progress) : e.target.store.clear(e.target.id)).catch((t) => {
 			console.warn(e.kind === "save" ? "[vplayer] playback progress save failed:" : "[vplayer] playback progress clear failed:", t);
 		}).finally(() => {
-			P = !1, R();
+			F = !1, z();
 		}));
 	}
-	function ie(e, t) {
-		let n = N.at(-1);
-		n?.kind === "save" && n.target.generation === e.generation ? n.progress = t : N.push({
+	function ne(e, t) {
+		let n = P.at(-1);
+		n?.kind === "save" && n.target.generation === e.generation ? n.progress = t : P.push({
 			kind: "save",
 			target: e,
 			progress: t
-		}), R();
+		}), z();
 	}
-	function z(e) {
-		N.push({
+	function B(e) {
+		P.push({
 			kind: "clear",
 			target: e
-		}), R();
+		}), z();
 	}
-	function B(e = L, t = g) {
-		!t || t.ended || r.state.resumeState.status === "prompt" || !Number.isFinite(t.currentTime) || t.currentTime <= 3 || !f(t.duration) || (v = Date.now(), y = t.currentTime, ie(e, {
+	function V(e = L, t = h) {
+		!t || t.ended || r.state.resumeState.status === "prompt" || !Number.isFinite(t.currentTime) || t.currentTime <= 3 || !f(t.duration) || (_ = Date.now(), y = t.currentTime, ne(e, {
 			time: t.currentTime,
 			duration: t.duration
 		}));
 	}
-	function ae(e) {
-		!r.state.isPlaying || Date.now() - v < oe || Number.isFinite(y) && Math.abs(e.currentTime - y) < se || B(L, e);
+	function ie(e) {
+		!r.state.isPlaying || Date.now() - _ < le || Number.isFinite(y) && Math.abs(e.currentTime - y) < ue || V(L, e);
 	}
-	function V() {
-		k++, L = F(i), A = !1, v = 0, y = NaN, r.setState((e) => ({
+	function H() {
+		j++, L = I(i), M = !1, _ = 0, y = NaN, r.setState((e) => ({
 			...e,
 			resumeState: { status: "idle" }
 		}));
 	}
-	function H(e) {
-		if (A || !f(e.duration)) return;
-		A = !0;
+	function U(e) {
+		if (M || !f(e.duration)) return;
+		M = !0;
 		let t = L, n = e.duration;
 		r.setState((e) => ({
 			...e,
 			resumeState: { status: "loading" }
 		})), t.store.load(t.id).then((i) => {
-			if (t.generation === k && e === g) {
+			if (t.generation === j && e === h) {
 				if (!i || !Number.isFinite(i.time) || !Number.isFinite(i.duration) || i.time <= 3 || i.time >= n - 3 || Math.abs(i.duration - n) > Math.max(1, n * .01)) {
 					r.setState((e) => ({
 						...e,
@@ -902,17 +988,17 @@ function q(e) {
 				}));
 			}
 		}).catch((n) => {
-			t.generation === k && e === g && r.setState((e) => ({
+			t.generation === j && e === h && r.setState((e) => ({
 				...e,
 				resumeState: { status: "idle" }
 			})), console.warn("[vplayer] playback progress load failed:", n);
 		});
 	}
-	function U(e) {
+	function W(e) {
 		r.setState((t) => {
 			let n = new Map(t.subtitleTracks.map((e) => [e.id, e]));
 			for (let t of e) {
-				let e = K(t);
+				let e = J(t);
 				n.set(e.id, e);
 			}
 			return {
@@ -921,7 +1007,7 @@ function q(e) {
 			};
 		});
 	}
-	function q(e) {
+	function G(e) {
 		T?.abort();
 		let t = new AbortController();
 		T = t, r.setState((t) => ({
@@ -930,7 +1016,7 @@ function q(e) {
 			subtitleCues: [],
 			subtitleStatus: "loading",
 			subtitleError: null
-		})), j(e, t.signal).then((e) => {
+		})), R(e, t.signal).then((e) => {
 			t.signal.aborted || r.setState((t) => ({
 				...t,
 				subtitleCues: e,
@@ -946,7 +1032,7 @@ function q(e) {
 			}));
 		});
 	}
-	function J() {
+	function K() {
 		let e = (i.subtitleProviders ?? []).map(({ id: e, label: t }) => ({
 			id: e,
 			label: t
@@ -959,7 +1045,7 @@ function q(e) {
 			subtitleSearchError: null
 		}));
 	}
-	function pe(e = {}) {
+	function oe(e = {}) {
 		E?.abort();
 		let t = i.subtitleProviders ?? [], n = e.providerId ? t.filter((t) => t.id === e.providerId) : t;
 		if (n.length === 0) {
@@ -999,7 +1085,7 @@ function q(e) {
 			}));
 		});
 	}
-	function me(e) {
+	function se(e) {
 		T?.abort();
 		let t = (i.subtitleProviders ?? []).find((t) => t.id === e.providerId);
 		if (!t) {
@@ -1019,15 +1105,15 @@ function q(e) {
 			subtitleError: null
 		})), (async () => {
 			try {
-				let i = await t.fetch(e, n.signal), a = K({
+				let i = await t.fetch(e, n.signal), a = J({
 					id: `provider:${t.id}:${e.id}`,
 					lang: e.language,
 					label: e.label,
 					format: i.format ?? e.format,
 					...i.content === void 0 ? { src: i.src } : { content: i.content }
-				}), o = await j(a, n.signal);
+				}), o = await R(a, n.signal);
 				if (n.signal.aborted) return;
-				U([a]), r.setState((e) => ({
+				W([a]), r.setState((e) => ({
 					...e,
 					activeSubtitle: a,
 					subtitleCues: o,
@@ -1045,77 +1131,61 @@ function q(e) {
 			}
 		})();
 	}
-	i.subtitles?.length && U(i.subtitles), J();
-	function he() {
-		D && typeof navigator < "u" && "mediaSession" in navigator && navigator.mediaSession.metadata === D && (navigator.mediaSession.metadata = null), D = null;
-	}
-	function ge() {
-		if (typeof navigator > "u" || !("mediaSession" in navigator) || typeof MediaMetadata > "u") return;
-		let e = i.title?.trim();
-		if (!e) {
-			he();
-			return;
-		}
-		let t = new MediaMetadata({
-			title: e,
-			artwork: i.poster ? [{ src: i.poster }] : []
-		});
-		navigator.mediaSession.metadata = t, D = t;
-	}
-	function _e() {
+	i.subtitles?.length && W(i.subtitles), K();
+	function ce() {
 		l.register({
 			key: "Space",
 			description: "Toggle play/pause",
 			handler: (e) => {
-				e.preventDefault(), Y.togglePlay();
+				e.preventDefault(), X.togglePlay();
 			}
 		}), l.register({
 			key: "KeyK",
 			description: "Toggle play/pause",
 			handler: (e) => {
-				e.preventDefault(), Y.togglePlay();
+				e.preventDefault(), X.togglePlay();
 			}
 		}), l.register({
 			key: "KeyL",
 			description: "Toggle loop",
 			handler: (e) => {
-				e.preventDefault(), Y.toggleLoop();
+				e.preventDefault(), X.toggleLoop();
 			}
 		}), l.register({
 			key: "KeyI",
 			description: "Toggle info panel",
 			handler: (e) => {
-				e.preventDefault(), Y.toggleInfoPanel();
+				e.preventDefault(), X.toggleInfoPanel();
 			}
 		}), l.register({
 			key: "KeyF",
 			description: "Toggle fullscreen",
 			handler: (e) => {
-				e.preventDefault(), Y.toggleFullscreen();
+				e.preventDefault(), X.toggleFullscreen();
 			}
 		}), l.register({
 			key: "KeyA",
 			description: "Cycle aspect ratio",
 			handler: (e) => {
-				e.preventDefault(), Y.cycleAspectRatio();
+				e.preventDefault(), X.cycleAspectRatio();
 			}
 		}), l.register({
 			key: "KeyM",
 			description: "Toggle mute",
 			handler: (e) => {
-				e.preventDefault(), Y.toggleMute();
+				e.preventDefault(), X.toggleMute();
 			}
 		}), l.register({
 			key: "ArrowLeft",
 			description: "Seek backward 5s",
 			handler: (e) => {
-				e.preventDefault(), Y.skip(-5);
+				e.preventDefault(), X.skip(-5);
 			}
 		}), l.register({
 			key: "ArrowRight",
 			description: "Seek forward 5s",
 			handler: (e) => {
-				e.preventDefault(), Y.skip(5);
+				e.preventDefault(), X.skip(5);
 			}
 		}), l.register({
 			key: "ArrowUp",
@@ -1123,7 +1193,7 @@ function q(e) {
 			handler: (e) => {
 				e.preventDefault();
 				let t = Math.min(1, r.state.volume + .1);
-				Y.setVolume(t);
+				X.setVolume(t);
 			}
 		}), l.register({
 			key: "ArrowDown",
@@ -1131,27 +1201,27 @@ function q(e) {
 			handler: (e) => {
 				e.preventDefault();
 				let t = Math.max(0, r.state.volume - .1);
-				Y.setVolume(t);
+				X.setVolume(t);
 			}
 		});
 	}
-	i.defaultHotkeys !== !1 && _e();
-	function ve() {
+	i.defaultHotkeys !== !1 && ce();
+	function Y() {
 		if (typeof document > "u") return;
 		let e = document;
 		r.setState((t) => ({
 			...t,
 			isFullscreen: !!(document.fullscreenElement || e.webkitFullscreenElement),
-			capabilities: d(g?.element ?? void 0, h)
+			capabilities: d(h?.element ?? void 0, m)
 		}));
 	}
-	let Y = {
+	let X = {
 		play: () => {
-			g?.play();
+			h?.play();
 		},
-		pause: () => g?.pause(),
+		pause: () => h?.pause(),
 		togglePlay: () => {
-			let e = g;
+			let e = h;
 			e && (e.paused || e.ended ? e.play() : e.pause());
 		},
 		resumeFromSavedProgress: () => {
@@ -1159,14 +1229,14 @@ function q(e) {
 			e.status === "prompt" && (r.setState((e) => ({
 				...e,
 				resumeState: { status: "idle" }
-			})), g?.seek(e.progress.time), g?.play());
+			})), h?.seek(e.progress.time), h?.play());
 		},
 		startPlaybackOver: () => {
 			let e = L;
 			r.setState((e) => ({
 				...e,
 				resumeState: { status: "idle" }
-			})), g?.seek(0), z(e);
+			})), h?.seek(0), B(e);
 		},
 		dismissSavedProgress: () => {
 			r.setState((e) => ({
@@ -1174,15 +1244,15 @@ function q(e) {
 				resumeState: { status: "idle" }
 			}));
 		},
-		seek: (e) => g?.seek(e),
+		seek: (e) => h?.seek(e),
 		skip: (e) => {
-			let t = g;
+			let t = h;
 			if (!t) return;
 			let n = f(t.duration) ? t.duration : Infinity, r = Math.max(0, Math.min(t.currentTime + e, n));
 			t.seek(r);
 		},
 		setVolume: (e) => {
-			let t = g;
+			let t = h;
 			if (!t) return;
 			let n = Math.max(0, Math.min(1, e));
 			t.setVolume(n), n > 0 && t.setMuted(!1), r.setState((e) => ({
@@ -1192,28 +1262,28 @@ function q(e) {
 			}));
 		},
 		toggleMute: () => {
-			let e = g;
+			let e = h;
 			e && (e.setMuted(!e.muted), r.setState((t) => ({
 				...t,
 				isMuted: e.muted
 			})));
 		},
 		setPlaybackRate: (e) => {
-			let t = g;
+			let t = h;
 			t && (t.setPlaybackRate(e), r.setState((e) => ({
 				...e,
 				playbackRate: t.playbackRate
 			})));
 		},
 		toggleFullscreen: () => {
-			if (!h || typeof document > "u") return;
-			let e = h, t = document, n = !!(document.fullscreenElement || t.webkitFullscreenElement), r = () => {
-				h?.focus({ preventScroll: !0 }), ve();
-			}, i = n ? typeof document.exitFullscreen == "function" ? document.exitFullscreen() : t.webkitExitFullscreen?.() : typeof h.requestFullscreen == "function" ? h.requestFullscreen() : e.webkitRequestFullscreen?.();
+			if (!m || typeof document > "u") return;
+			let e = m, t = document, n = !!(document.fullscreenElement || t.webkitFullscreenElement), r = () => {
+				m?.focus({ preventScroll: !0 }), Y();
+			}, i = n ? typeof document.exitFullscreen == "function" ? document.exitFullscreen() : t.webkitExitFullscreen?.() : typeof m.requestFullscreen == "function" ? m.requestFullscreen() : e.webkitRequestFullscreen?.();
 			Promise.resolve(i).then(r, r);
 		},
 		togglePiP: () => {
-			let e = g;
+			let e = h;
 			!e || typeof document > "u" || (document.pictureInPictureElement ? e.exitPictureInPicture() : e.requestPictureInPicture());
 		},
 		setActiveSubtitle: (e) => {
@@ -1227,20 +1297,20 @@ function q(e) {
 				}));
 				return;
 			}
-			q(e);
+			G(e);
 		},
 		addSubtitleTrack: (e) => {
-			let t = K(e);
-			U([t]), q(t);
+			let t = J(e);
+			W([t]), G(t);
 		},
 		removeSubtitleTrack: (e) => {
-			r.state.activeSubtitle?.id === e && Y.setActiveSubtitle(null), r.setState((t) => ({
+			r.state.activeSubtitle?.id === e && X.setActiveSubtitle(null), r.setState((t) => ({
 				...t,
 				subtitleTracks: t.subtitleTracks.filter((t) => t.id !== e)
 			}));
 		},
-		searchSubtitles: pe,
-		selectSubtitleResult: me,
+		searchSubtitles: oe,
+		selectSubtitleResult: se,
 		clearSubtitleSearch: () => {
 			E?.abort(), E = null, r.setState((e) => ({
 				...e,
@@ -1267,9 +1337,12 @@ function q(e) {
 		resetCaptionSettings: () => {
 			r.setState((e) => ({
 				...e,
-				captionSettings: { ...S }
+				captionSettings: { ...k }
 			}));
 		},
+		saveCaptionSettings: () => {
+			s.set(x.CAPTION_SETTINGS, r.state.captionSettings);
+		},
 		setActiveQuality: (e) => {
 			r.setState((t) => ({
 				...t,
@@ -1277,7 +1350,7 @@ function q(e) {
 			}));
 		},
 		takeScreenshot: async () => {
-			let e = g;
+			let e = h;
 			if (!e) return;
 			let t = await e.screenshot();
 			if (!t) return;
@@ -1285,7 +1358,7 @@ function q(e) {
 			r.href = n, r.download = `vplayer-screenshot-${Date.now()}.png`, r.click(), URL.revokeObjectURL(n);
 		},
 		setFlip: (e) => {
-			let t = g?.element;
+			let t = h?.element;
 			if (!t) return;
 			let n = "";
 			e === "horizontal" && (n = "scaleX(-1)"), e === "vertical" && (n = "scaleY(-1)"), t.style.transform = n, r.setState((t) => ({
@@ -1294,20 +1367,20 @@ function q(e) {
 			}));
 		},
 		setAspectRatio: (e) => {
-			let t = de(e), n = g?.element;
+			let t = he(e), n = h?.element;
 			if (!n) return;
-			let i = le[t];
-			i ? n.style.setProperty("--vplayer-media-aspect-ratio", i) : n.style.removeProperty("--vplayer-media-aspect-ratio"), n.style.objectFit = fe(t), n.style.setProperty("--vplayer-media-object-fit", fe(t)), h && (ue(h), h.classList.add(`vplayer--media-${G[t]}`)), r.setState((e) => ({
+			let i = fe[t];
+			i ? n.style.setProperty("--vplayer-media-aspect-ratio", i) : n.style.removeProperty("--vplayer-media-aspect-ratio"), n.style.objectFit = ge(t), n.style.setProperty("--vplayer-media-object-fit", ge(t)), m && (me(m), m.classList.add(`vplayer--media-${pe[t]}`)), r.setState((e) => ({
 				...e,
 				aspectRatio: t
 			}));
 		},
 		cycleAspectRatio: () => {
-			let e = r.state.aspectRatio, t = W[(W.indexOf(e) + 1) % W.length] ?? "default";
-			Y.setAspectRatio(t);
+			let e = r.state.aspectRatio, t = q[(q.indexOf(e) + 1) % q.length] ?? "default";
+			X.setAspectRatio(t);
 		},
 		toggleLoop: () => {
-			let e = g;
+			let e = h;
 			e && (e.setLooping(!e.looping), r.setState((t) => ({
 				...t,
 				isLooping: e.looping
@@ -1320,10 +1393,10 @@ function q(e) {
 			}));
 		}
 	};
-	function ye(e) {
+	function _e(e) {
 		return [
 			e.on("play", () => {
-				ge(), r.setState((e) => ({
+				D.syncMetadata(i.title, i.mediaSession, i.poster), D.setPlaybackState("playing"), r.setState((e) => ({
 					...e,
 					status: "playing",
 					isPlaying: !0,
@@ -1341,15 +1414,15 @@ function q(e) {
 					isPaused: !e.isEnded,
 					isBuffering: !1,
 					controlsVisible: !0
-				})), e.ended || B(L, e);
+				})), D.setPlaybackState("paused"), D.syncPosition(e.duration, e.currentTime, e.playbackRate, !0), e.ended || V(L, e);
 			}),
 			e.on("ended", () => {
-				v = 0, y = NaN;
-				for (let e = N.length - 1; e >= 0; e--) {
-					let t = N[e];
-					t?.kind === "save" && t.target.generation === L.generation && N.splice(e, 1);
+				_ = 0, y = NaN;
+				for (let e = P.length - 1; e >= 0; e--) {
+					let t = P[e];
+					t?.kind === "save" && t.target.generation === L.generation && P.splice(e, 1);
 				}
-				z(L), r.setState((e) => ({
+				B(L), D.setPlaybackState("paused"), D.syncPosition(e.duration, e.currentTime, e.playbackRate, !0), r.setState((e) => ({
 					...e,
 					status: "ended",
 					isPlaying: !1,
@@ -1364,10 +1437,10 @@ function q(e) {
 				r.setState((t) => ({
 					...t,
 					currentTime: e.currentTime
-				})), i.onTimeUpdate?.(e.currentTime), ae(e);
+				})), i.onTimeUpdate?.(e.currentTime), D.syncPosition(e.duration, e.currentTime, e.playbackRate), ie(e);
 			}),
 			e.on("loadedmetadata", () => {
-				b !== null && (clearTimeout(b), b = null), C = 0, r.setState((t) => ({
+				S !== null && (clearTimeout(S), S = null), C = 0, r.setState((t) => ({
 					...t,
 					status: t.status === "idle" || t.status === "loading" || t.status === "error" ? "ready" : t.status,
 					duration: f(e.duration) ? e.duration : 0,
@@ -1376,7 +1449,7 @@ function q(e) {
 					isMuted: e.muted,
 					playbackRate: e.playbackRate,
 					error: null
-				})), H(e);
+				})), U(e);
 			}),
 			e.on("progress", () => {
 				let t = e.buffered;
@@ -1395,7 +1468,7 @@ function q(e) {
 				}));
 			}),
 			e.on("canplay", () => {
-				b !== null && (clearTimeout(b), b = null), C = 0, r.setState((e) => ({
+				S !== null && (clearTimeout(S), S = null), C = 0, r.setState((e) => ({
 					...e,
 					status: e.isPlaying ? "playing" : "ready",
 					isBuffering: !1,
@@ -1407,7 +1480,7 @@ function q(e) {
 					...t,
 					duration: f(e.duration) ? e.duration : 0,
 					isLive: !f(e.duration)
-				})), H(e);
+				})), U(e);
 			}),
 			e.on("seeking", () => {
 				r.setState((e) => ({
@@ -1419,7 +1492,7 @@ function q(e) {
 				r.setState((e) => ({
 					...e,
 					status: e.isPlaying ? "playing" : "ready"
-				})), B(L, e);
+				})), D.syncPosition(e.duration, e.currentTime, e.playbackRate, !0), V(L, e);
 			}),
 			e.on("playing", () => {
 				r.setState((e) => ({
@@ -1472,16 +1545,27 @@ function q(e) {
 						reconnectAttempt: C,
 						isReconnecting: !0
 					}
-				})), o.emit("video:reconnecting", { attempt: C + 1 }), b !== null && clearTimeout(b), b = setTimeout(() => {
-					b = null, C++, o.emit("video:reconnect", { attempt: C }), e.load();
-				}, ee));
+				})), o.emit("video:reconnecting", { attempt: C + 1 }), S !== null && clearTimeout(S), S = setTimeout(() => {
+					S = null, C++, o.emit("video:reconnect", { attempt: C }), e.load();
+				}, p));
 			})
 		];
 	}
-	let X = null;
-	function be() {
+	let Z = null;
+	function ve() {
+		let e = s.get(x.CAPTION_SETTINGS);
+		e && r.setState((t) => ({
+			...t,
+			captionSettings: {
+				...k,
+				...e,
+				backgroundOpacity: Math.max(0, Math.min(1, e.backgroundOpacity))
+			}
+		}));
+	}
+	function ye() {
 		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), l = s.get(m.CAPTION_SETTINGS);
+		let e = s.get(x.VOLUME), t = s.get(x.MUTED), n = s.get(x.PLAYBACK_RATE), a = s.get(x.LOOP), o = s.get(x.FLIP), c = s.get(x.ASPECT_RATIO);
 		r.setState((r) => ({
 			...r,
 			volume: e ?? r.volume,
@@ -1489,24 +1573,19 @@ function q(e) {
 			playbackRate: n ?? r.playbackRate,
 			isLooping: a ?? r.isLooping,
 			flip: o ?? r.flip,
-			aspectRatio: de(c),
-			captionSettings: l ? {
-				...S,
-				...l,
-				backgroundOpacity: Math.max(0, Math.min(1, l.backgroundOpacity))
-			} : r.captionSettings
-		})), X = r.subscribe(() => {
+			aspectRatio: he(c)
+		})), ve(), Z = 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), s.set(m.CAPTION_SETTINGS, e.captionSettings);
+			e.volume !== 1 && s.set(x.VOLUME, e.volume), e.isMuted && s.set(x.MUTED, !0), e.playbackRate !== 1 && s.set(x.PLAYBACK_RATE, e.playbackRate), e.isLooping ? s.set(x.LOOP, !0) : s.remove(x.LOOP), e.flip === "normal" ? s.remove(x.FLIP) : s.set(x.FLIP, e.flip), e.aspectRatio === "default" ? s.remove(x.ASPECT_RATIO) : s.set(x.ASPECT_RATIO, e.aspectRatio), s.set(x.CAPTION_SETTINGS, e.captionSettings);
 		});
 	}
-	function xe() {
-		if (X) {
-			let e = X;
-			typeof e == "function" ? e() : e.unsubscribe(), X = null;
+	function be() {
+		if (Z) {
+			let e = Z;
+			typeof e == "function" ? e() : e.unsubscribe(), Z = null;
 		}
 	}
-	function Z(e) {
+	function Q(e) {
 		if (w?.abort(), w = null, !e) {
 			r.setState((e) => ({
 				...e,
@@ -1515,7 +1594,7 @@ function q(e) {
 			return;
 		}
 		let t = new AbortController();
-		w = t, I(e, t.signal, i.transformThumbnailVTT).then((e) => {
+		w = t, re(e, t.signal, i.transformThumbnailVTT).then((e) => {
 			t.signal.aborted || r.setState((t) => ({
 				...t,
 				thumbnailCues: e
@@ -1527,21 +1606,21 @@ function q(e) {
 			})));
 		});
 	}
-	function Se(e) {
+	function xe(e) {
 		return {
 			name: e,
 			store: r,
-			remote: Y,
+			remote: X,
 			events: o,
 			storage: s,
 			hotkeys: l,
 			i18n: c,
 			context: {
 				containerRef: { get current() {
-					return h;
+					return m;
 				} },
 				videoRef: { get current() {
-					return g?.element;
+					return h?.element;
 				} }
 			},
 			addControl: (e) => (r.setState((t) => ({
@@ -1610,15 +1689,15 @@ function q(e) {
 			}
 		};
 	}
-	let Q = [];
-	function Ce(e = !0) {
-		b !== null && (clearTimeout(b), b = null), C = 0;
-		for (let e of Q) e();
-		Q = [], g && (e && B(L, g), g.destroy(), g = null, $.engine = null);
+	let $ = [];
+	function Se(e = !0) {
+		S !== null && (clearTimeout(S), S = null), C = 0;
+		for (let e of $) e();
+		$ = [], h && (e && V(L, h), h.pause(), h.destroy(), h = null, Te.engine = null);
 	}
-	function we(e) {
-		let t = x(i), n = ne(e, i);
-		g = n, $.engine = n, Q = ye(n), e.playsInline = !0, e.autoplay = !!i.autoPlay, e.preload = e.preload || "metadata", r.setState((n) => ({
+	function Ce(e) {
+		let t = O(i), n = te(e, i);
+		h = n, Te.engine = n, $ = _e(n), e.playsInline = !0, e.autoplay = !!i.autoPlay, e.preload = e.preload || "metadata", D.setPlaybackState("paused"), r.setState((n) => ({
 			...n,
 			status: "loading",
 			source: t,
@@ -1629,20 +1708,20 @@ function q(e) {
 			currentTime: 0,
 			duration: 0,
 			bufferedPercent: 0,
-			capabilities: d(e, h),
+			capabilities: d(e, m),
 			error: null
 		})), i.autoPlay && n.play();
 	}
-	function Te(e = !0) {
-		let t = g?.element;
+	function we(e = !0) {
+		let t = h?.element;
 		if (t) {
-			for (Ce(e), t.pause(), t.removeAttribute("src"); t.firstChild;) t.removeChild(t.firstChild);
-			t.load(), we(t);
+			for (Se(e), t.pause(), t.removeAttribute("src"); t.firstChild;) t.removeChild(t.firstChild);
+			t.load(), Ce(t);
 		}
 	}
-	let $ = {
+	let Te = {
 		store: r,
-		remote: Y,
+		remote: X,
 		events: o,
 		storage: s,
 		i18n: c,
@@ -1652,30 +1731,30 @@ function q(e) {
 			let t = typeof e.src == "string" && e.src !== i.src, n = Object.hasOwn(e, "type") && e.type !== i.type, a = Object.hasOwn(e, "thumbnails") && e.thumbnails !== i.thumbnails, o = Object.hasOwn(e, "transformThumbnailVTT") && e.transformThumbnailVTT !== i.transformThumbnailVTT, s = Object.hasOwn(e, "subtitleProviders") && e.subtitleProviders !== i.subtitleProviders, c = {
 				...i,
 				...e
-			}, l = F(c), u = l.id !== L.id || l.store !== L.store;
-			if ((t || u) && B(L, g), i = c, (t || u) && V(), (r.state.isPlaying || D) && ge(), r.setState((t) => {
+			}, l = I(c), u = l.id !== L.id || l.store !== L.store;
+			if ((t || u) && V(L, h), i = c, (t || u) && H(), (r.state.isPlaying || D.hasMetadata) && D.syncMetadata(i.title, i.mediaSession, i.poster), r.setState((t) => {
 				let n = e.qualities ?? t.qualities;
 				return {
 					...t,
 					qualities: n,
 					activeQuality: e.qualities ? e.qualities.includes(t.activeQuality) ? t.activeQuality : e.qualities[0] ?? "Auto" : t.activeQuality
 				};
-			}), e.subtitles && (U(e.subtitles), !r.state.activeSubtitle)) {
+			}), e.subtitles && (W(e.subtitles), !r.state.activeSubtitle)) {
 				let t = e.subtitles.find((e) => e.default) ?? null;
-				t && Y.setActiveSubtitle(K(t));
+				t && X.setActiveSubtitle(J(t));
 			}
-			s && (E?.abort(), E = null, J()), (a || o) && Z(i.thumbnails), t || n ? Te(!(t || u)) : u && g && f(g.duration) && H(g);
+			s && (E?.abort(), E = null, K()), (a || o) && Q(i.thumbnails), t || n ? we(!(t || u)) : u && h && f(h.duration) && U(h);
 		},
 		setThumbnails(e) {
 			i = {
 				...i,
 				thumbnails: e
-			}, Z(e);
+			}, Q(e);
 		},
 		initPlugins(e) {
 			let t = [];
 			for (let n of e) {
-				let e = Se(n.name);
+				let e = xe(n.name);
 				try {
 					let r = n.setup?.(e);
 					typeof r == "function" && t.push(r);
@@ -1692,12 +1771,12 @@ function q(e) {
 			};
 		},
 		mount(e, t) {
-			g && this.unmount(), h = t, we(e), _ = ve, document.addEventListener("fullscreenchange", _), document.addEventListener("webkitfullscreenchange", _), M = () => B(), window.addEventListener("pagehide", M), Z(i.thumbnails);
+			h && this.unmount(), m = t, Ce(e), g = Y, document.addEventListener("fullscreenchange", g), document.addEventListener("webkitfullscreenchange", g), N = () => V(), window.addEventListener("pagehide", N), D.setup(X), Q(i.thumbnails);
 			let n = r.state.subtitleTracks.find((e) => e.default);
-			n && Y.setActiveSubtitle(n), be(), Y.setAspectRatio(r.state.aspectRatio);
+			n && X.setActiveSubtitle(n), ve(), ye(), X.setAspectRatio(r.state.aspectRatio);
 		},
 		unmount() {
-			Ce(), V(), he(), h = null, w?.abort(), w = null, T?.abort(), T = null, E?.abort(), E = null, xe(), b !== null && (clearTimeout(b), b = null), _ &&= (document.removeEventListener("fullscreenchange", _), document.removeEventListener("webkitfullscreenchange", _), null), M &&= (window.removeEventListener("pagehide", M), null), r.setState((e) => ({
+			Se(), H(), D.teardown(), m = null, w?.abort(), w = null, T?.abort(), T = null, E?.abort(), E = null, be(), S !== null && (clearTimeout(S), S = null), g &&= (document.removeEventListener("fullscreenchange", g), document.removeEventListener("webkitfullscreenchange", g), null), N &&= (window.removeEventListener("pagehide", N), null), r.setState((e) => ({
 				...e,
 				activeSubtitle: null,
 				subtitleTracks: e.subtitleTracks.filter((e) => !e.local),
@@ -1715,11 +1794,11 @@ function q(e) {
 			this.unmount(), o.clear();
 		}
 	};
-	return $;
+	return Te;
 }
 //#endregion
 //#region src/gesture-engine.ts
-function J(e, t) {
+function X(e, t) {
 	let n = null, r = null, i = null, a = typeof window < "u" && "ontouchstart" in window;
 	function o(t) {
 		if (!a || t.touches.length !== 1) return;
@@ -1779,14 +1858,14 @@ function J(e, t) {
 }
 //#endregion
 //#region src/utils.ts
-function pe(e) {
+function _e(e) {
 	if (!Number.isFinite(e) || e < 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}:${String(n).padStart(2, "0")}:${String(r).padStart(2, "0")}` : `${n}:${String(r).padStart(2, "0")}`;
 }
 //#endregion
 //#region src/defaults.ts
-var me = {
+var Z = {
 	play: "Play",
 	pause: "Pause",
 	replay: "Replay",
@@ -1822,6 +1901,8 @@ var me = {
 	captionMedium: "Default",
 	captionLarge: "Large",
 	captionReset: "Reset",
+	captionSave: "Save",
+	captionSaved: "Saved",
 	captionFontFamily: "Font",
 	captionFontScale: "Scale",
 	captionTextOpacity: "Text opacity",
@@ -1861,4 +1942,4 @@ var me = {
 	loop: "Loop"
 };
 //#endregion
-export { h as BaseMediaEngine, v as DashMediaEngine, t as EventBus, _ as HlsMediaEngine, n as HotkeyRegistry, a as I18n, te as LocalPlaybackProgressStore, g as NativeVideoEngine, m as STORAGE_KEYS, p as Storage, c as canUseFullscreen, o as canUseMSE, s as canUseNativeHLS, l as canUsePictureInPicture, u as canUseTextTracks, J as createGestureEngine, re as createMediaStore, q as createPlayer, ne as createResolvedMediaEngine, me as defaultPlayerLabels, b as detectSourceKind, j as fetchSubtitles, I as fetchThumbnails, pe as formatTime, M as getActiveCue, R as getInitialMediaState, d as getMediaCapabilities, L as getThumbnailAtTime, f as isFiniteDuration, O as parseSRT, A as parseSubtitles, P as parseThumbnailVTT, E as parseTimestamp, k as parseVTT, z as selectAudio, U as selectError, ie as selectMedia, V as selectPlugins, B as selectPreferences, H as selectThumbnails, ae as selectUI, x as toPlayerSource };
+export { S as BaseMediaEngine, T as DashMediaEngine, t as EventBus, w as HlsMediaEngine, n as HotkeyRegistry, a as I18n, ee as LocalPlaybackProgressStore, C as NativeVideoEngine, x as STORAGE_KEYS, b as Storage, c as canUseFullscreen, o as canUseMSE, s as canUseNativeHLS, l as canUsePictureInPicture, u as canUseTextTracks, X as createGestureEngine, v as createMediaSessionController, ae as createMediaStore, Y as createPlayer, te as createResolvedMediaEngine, Z as defaultPlayerLabels, D as detectSourceKind, R as fetchSubtitles, re as fetchThumbnails, _e as formatTime, z as getActiveCue, H as getInitialMediaState, d as getMediaCapabilities, ie as getThumbnailAtTime, f as isFiniteDuration, F as parseSRT, L as parseSubtitles, B as parseThumbnailVTT, N as parseTimestamp, I as parseVTT, W as selectAudio, ce as selectError, U as selectMedia, oe as selectPlugins, G as selectPreferences, se as selectThumbnails, K as selectUI, O as toPlayerSource };

package/dist/media-session.d.ts

@@ -0,0 +1,20 @@
+/**
+ * media-session — Media Session API integration.
+ *
+ * Browsers project this to OS media controls (MPRIS on Linux desktops),
+ * which drive system notifications, lock-screen controls, and media keys.
+ * Metadata alone is not enough: without `playbackState` and action
+ * handlers the OS entry goes stale and its buttons are dead.
+ */
+import type { MediaRemote, MediaSessionMetadataOptions } from './types';
+type SessionPlaybackState = 'playing' | 'paused';
+export interface MediaSessionController {
+    setup(remote: MediaRemote): void;
+    syncMetadata(title: string | undefined, metadata?: MediaSessionMetadataOptions, poster?: string): void;
+    setPlaybackState(state: SessionPlaybackState): void;
+    syncPosition(duration: number, currentTime: number, playbackRate: number, force?: boolean): void;
+    readonly hasMetadata: boolean;
+    teardown(): void;
+}
+export declare function createMediaSessionController(): MediaSessionController;
+export {};

package/dist/types.d.ts

@@ -12,6 +12,15 @@ import type { MediaState, PlaybackStatus, ResumeState } from './state/slices';
 import type { Storage } from './storage';
 import type { CaptionSettings, SubtitleProvider, SubtitleProviderResult, SubtitleSearchQuery, SubtitleTrack } from './subtitle-parser';
 export type { MediaState, ResumeState };
+/** OS media-control metadata overrides (Media Session → MPRIS). */
+export interface MediaSessionMetadataOptions {
+    /** Overrides the artwork sent to OS controls; falls back to `poster`. */
+    artwork?: string;
+    /** Artist line shown under the title (e.g. studio or channel name). */
+    artist?: string;
+    /** Album line; rarely meaningful for video, supported for completeness. */
+    album?: string;
+}
 export interface PlayerOptions {
     src: string;
     /** MIME/content type hint used by source provider selection. */
@@ -19,6 +28,12 @@ export interface PlayerOptions {
     /** Title exposed to browser and operating-system media controls. */
     title?: string;
     poster?: string;
+    /**
+     * OS media-control overrides (Media Session → MPRIS), e.g. a scaled-down
+     * artwork image when full-size posters are too big, or a studio name as
+     * the artist line. Artwork falls back to `poster` when omitted.
+     */
+    mediaSession?: MediaSessionMetadataOptions;
     subtitles?: SubtitleTrack[];
     subtitleProviders?: SubtitleProvider[];
     qualities?: string[];
@@ -96,6 +111,7 @@ export interface MediaRemote {
     clearSubtitleSearch: () => void;
     setCaptionSettings: (patch: Partial<CaptionSettings>) => void;
     resetCaptionSettings: () => void;
+    saveCaptionSettings: () => void;
     setActiveQuality: (q: string) => void;
     takeScreenshot: () => void;
     setFlip: (flip: FlipState) => void;
@@ -152,6 +168,8 @@ export interface PlayerLabels {
     captionDelay: string;
     captionPreview: string;
     captionReset: string;
+    captionSave: string;
+    captionSaved: string;
     subtitleLoadError: string;
     endedTitle: string;
     screenshot: string;
@@ -193,7 +211,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' | 'title' | 'poster' | 'autoPlay' | 'subtitles' | 'subtitleProviders' | 'qualities' | 'thumbnails' | 'transformThumbnailVTT' | 'playbackProgress'>>): void;
+    updateOptions(opts: Partial<Pick<PlayerOptions, 'src' | 'type' | 'title' | 'poster' | 'mediaSession' | 'autoPlay' | 'subtitles' | 'subtitleProviders' | 'qualities' | 'thumbnails' | 'transformThumbnailVTT' | 'playbackProgress'>>): 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.2.3",
+  "version": "0.4.0",
   "private": false,
   "repository": {
     "type": "git",