@vplayer/core 0.1.8 → 0.2.1

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export type { GestureEngineCallbacks, GestureHandlers } from './gesture-engine';
 export { EventBus } from './event-bus';
 export type { PlayerEventName, PlayerEventHandler } from './event-bus';
 export { Storage, STORAGE_KEYS } from './storage';
+export { LocalPlaybackProgressStore } from './playback-progress';
+export type { PlaybackProgress, PlaybackProgressStore, PlaybackProgressOptions } from './playback-progress';
 export { I18n } from './i18n';
 export type { LanguageDict } from './i18n';
 export { HotkeyRegistry } from './hotkey-registry';

package/dist/index.js

@@ -188,8 +188,76 @@ function f(e) {
 	return Number.isFinite(e) && e > 0;
 }
 //#endregion
-//#region src/media-engine/base-engine.ts
-var p = class {
+//#region src/storage.ts
+var p = "vplayer", m = class {
+	fallback = /* @__PURE__ */ new Map();
+	prefix;
+	constructor(e = {}) {
+		this.prefix = e.prefix ?? p;
+	}
+	fullKey(e) {
+		return `${this.prefix}:${e}`;
+	}
+	get(e) {
+		let t = this.fullKey(e);
+		try {
+			let e = window.localStorage.getItem(t);
+			return e === null ? void 0 : JSON.parse(e);
+		} catch {
+			let e = this.fallback.get(t);
+			return e === void 0 ? void 0 : JSON.parse(e);
+		}
+	}
+	set(e, t) {
+		let n = this.fullKey(e);
+		try {
+			window.localStorage.setItem(n, JSON.stringify(t));
+		} catch {
+			this.fallback.set(n, JSON.stringify(t));
+		}
+	}
+	remove(e) {
+		let t = this.fullKey(e);
+		try {
+			window.localStorage.removeItem(t);
+		} catch {}
+		this.fallback.delete(t);
+	}
+	clear() {
+		try {
+			let e = [];
+			for (let t = 0; t < window.localStorage.length; t++) {
+				let n = window.localStorage.key(t);
+				n?.startsWith(this.prefix + ":") && e.push(n);
+			}
+			e.forEach((e) => window.localStorage.removeItem(e));
+		} catch {}
+		this.fallback.clear();
+	}
+}, h = {
+	VOLUME: "volume",
+	MUTED: "muted",
+	PLAYBACK_RATE: "playbackRate",
+	SUBTITLE_LANG: "subtitleLang",
+	QUALITY: "quality",
+	LOOP: "loop",
+	FLIP: "flip",
+	ASPECT_RATIO: "aspectRatio"
+}, g = class {
+	storage;
+	constructor(e = new m({ prefix: "vplayer:progress" })) {
+		this.storage = e;
+	}
+	async load(e) {
+		return this.storage.get(encodeURIComponent(e)) ?? null;
+	}
+	async save(e, t) {
+		this.storage.set(encodeURIComponent(e), t);
+	}
+	async clear(e) {
+		this.storage.remove(encodeURIComponent(e));
+	}
+}, _ = class {
 	element;
 	destroyed = !1;
 	listeners = /* @__PURE__ */ new Map();
@@ -339,7 +407,7 @@ var p = class {
 	destroy() {
 		this.destroyed || (this.destroyed = !0, this.detachDOMListeners(), this.listeners.clear());
 	}
-}, m = class extends p {}, h = class extends p {
+}, v = class extends _ {}, y = class extends _ {
 	hls = null;
 	hlsSrc;
 	hlsConfig;
@@ -379,7 +447,7 @@ var p = class {
 	destroy() {
 		this.destroyed || (super.destroy(), this.hls &&= (this.hls.destroy(), null));
 	}
-}, g = class extends p {
+}, b = class extends _ {
 	dashPlayer = null;
 	dashSrc;
 	dashConfig;
@@ -407,40 +475,40 @@ var p = class {
 };
 //#endregion
 //#region src/source-resolver.ts
-function _(e) {
+function x(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 v(e) {
-	let t = e.type?.toLowerCase() ?? "", n = _(e.src);
+function S(e) {
+	let t = e.type?.toLowerCase() ?? "", n = x(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 y(e) {
+function C(e) {
 	return {
 		src: e.src,
 		type: e.type
 	};
 }
-function b(e, t) {
+function ee(e, t) {
 	if (t.engine) return typeof t.engine == "function" ? t.engine(e) : t.engine;
-	let n = y(t), r = v(n);
-	return r === "hls" && !s(e) ? new h(e, {
+	let n = C(t), r = S(n);
+	return r === "hls" && !s(e) ? new y(e, {
 		src: n.src,
 		hlsConfig: t.hlsConfig
-	}) : r === "dash" ? new g(e, {
+	}) : r === "dash" ? new b(e, {
 		src: n.src,
 		dashConfig: t.dashConfig
-	}) : (e.src = n.src, new m(e));
+	}) : (e.src = n.src, new v(e));
 }
 //#endregion
 //#region src/state/slices.ts
-function x() {
-	return new e(S());
+function w() {
+	return new e(T());
 }
-function S() {
+function T() {
 	return {
 		status: "idle",
 		source: null,
@@ -479,10 +547,11 @@ function S() {
 		contextMenuItems: [],
 		contextMenuEnabled: !0,
 		thumbnailCues: [],
-		error: null
+		error: null,
+		resumeProgress: null
 	};
 }
-var C = (e) => ({
+var E = (e) => ({
 	status: e.status,
 	source: e.source,
 	isPlaying: e.isPlaying,
@@ -493,11 +562,12 @@ var C = (e) => ({
 	duration: e.duration,
 	bufferedPercent: e.bufferedPercent,
 	playbackRate: e.playbackRate,
-	isLive: e.isLive
-}), w = (e) => ({
+	isLive: e.isLive,
+	resumeProgress: e.resumeProgress
+}), D = (e) => ({
 	volume: e.volume,
 	isMuted: e.isMuted
-}), T = (e) => ({
+}), O = (e) => ({
 	isLooping: e.isLooping,
 	flip: e.flip,
 	aspectRatio: e.aspectRatio,
@@ -505,74 +575,19 @@ var C = (e) => ({
 	subtitleTracks: e.subtitleTracks,
 	activeQuality: e.activeQuality,
 	qualities: e.qualities
-}), E = (e) => ({
+}), k = (e) => ({
 	controlsVisible: e.controlsVisible,
 	capabilities: e.capabilities,
 	isFullscreen: e.isFullscreen,
 	infoPanelVisible: e.infoPanelVisible,
 	notification: e.notification
-}), D = (e) => ({
+}), A = (e) => ({
 	controls: e.controls,
 	settings: e.settings,
 	layers: e.layers,
 	contextMenuItems: e.contextMenuItems,
 	contextMenuEnabled: e.contextMenuEnabled
-}), O = (e) => ({ thumbnailCues: e.thumbnailCues }), k = (e) => e.error, A = "vplayer", j = class {
-	fallback = /* @__PURE__ */ new Map();
-	prefix;
-	constructor(e = {}) {
-		this.prefix = e.prefix ?? A;
-	}
-	fullKey(e) {
-		return `${this.prefix}:${e}`;
-	}
-	get(e) {
-		let t = this.fullKey(e);
-		try {
-			let e = window.localStorage.getItem(t);
-			return e === null ? void 0 : JSON.parse(e);
-		} catch {
-			let e = this.fallback.get(t);
-			return e === void 0 ? void 0 : JSON.parse(e);
-		}
-	}
-	set(e, t) {
-		let n = this.fullKey(e);
-		try {
-			window.localStorage.setItem(n, JSON.stringify(t));
-		} catch {
-			this.fallback.set(n, JSON.stringify(t));
-		}
-	}
-	remove(e) {
-		let t = this.fullKey(e);
-		try {
-			window.localStorage.removeItem(t);
-		} catch {}
-		this.fallback.delete(t);
-	}
-	clear() {
-		try {
-			let e = [];
-			for (let t = 0; t < window.localStorage.length; t++) {
-				let n = window.localStorage.key(t);
-				n?.startsWith(this.prefix + ":") && e.push(n);
-			}
-			e.forEach((e) => window.localStorage.removeItem(e));
-		} catch {}
-		this.fallback.clear();
-	}
-}, M = {
-	VOLUME: "volume",
-	MUTED: "muted",
-	PLAYBACK_RATE: "playbackRate",
-	SUBTITLE_LANG: "subtitleLang",
-	QUALITY: "quality",
-	PLAYBACK_PROGRESS: "playbackProgress",
-	LOOP: "loop",
-	FLIP: "flip",
-	ASPECT_RATIO: "aspectRatio"
-};
+}), j = (e) => ({ thumbnailCues: e.thumbnailCues }), M = (e) => e.error;
 //#endregion
 //#region src/subtitle-parser.ts
 function N(e) {
@@ -620,7 +635,7 @@ async function I(e) {
 	let t = await (await fetch(e.src)).text();
 	return e.src.endsWith(".srt") ? P(t) : F(t);
 }
-function L(e, t) {
+function te(e, t) {
 	let n = 0, r = e.length - 1;
 	for (; n <= r;) {
 		let i = n + r >> 1, a = e[i];
@@ -630,7 +645,7 @@ function L(e, t) {
 	}
 	return null;
 }
-function R(e) {
+function L(e) {
 	let t = e.match(/#xywh=(\d+),(\d+),(\d+),(\d+)/);
 	return t ? {
 		src: e.replace(/#xywh=.*$/, ""),
@@ -640,7 +655,7 @@ function R(e) {
 		h: Number(t[4])
 	} : null;
 }
-function z(e) {
+function R(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("-->"));
@@ -649,7 +664,7 @@ function z(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 = R(a), s = N(r[1]), c = N(r[2]);
+		let a = i.trim(), o = L(a), s = N(r[1]), c = N(r[2]);
 		return o ? {
 			start: s,
 			end: c,
@@ -669,20 +684,20 @@ function z(e) {
 		};
 	}).filter((e) => e !== null);
 }
-function B(e, t) {
+function z(e, t) {
 	try {
 		return new URL(e, t).toString();
 	} catch {
 		return e;
 	}
 }
-async function V(e, t, n) {
+async function B(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 z(n ? await n(a, i) : a).map((e) => (e.src = B(e.src, i), e));
+	return R(n ? await n(a, i) : a).map((e) => (e.src = z(e.src, i), e));
 }
-function H(e, t) {
+function V(e, t) {
 	if (e.length === 0) return null;
 	let n = 0, r = e.length - 1;
 	for (; n <= r;) {
@@ -695,18 +710,18 @@ function H(e, t) {
 }
 //#endregion
 //#region src/player.ts
-var U = [
+var H = [
 	"default",
 	"16:9",
 	"4:3",
 	"21:9",
 	"cover",
 	"fill"
-], W = {
+], ne = {
 	"16:9": "16 / 9",
 	"4:3": "4 / 3",
 	"21:9": "21 / 9"
-}, G = {
+}, re = {
 	default: "default",
 	"16:9": "16-9",
 	"4:3": "4-3",
@@ -714,89 +729,143 @@ var U = [
 	cover: "cover",
 	fill: "fill"
 };
-function K(e) {
+function ie(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 q(e) {
-	return typeof e == "string" && e in G ? e : "default";
+function ae(e) {
+	return typeof e == "string" && e in re ? e : "default";
 }
-function J(e) {
+function U(e) {
 	return e === "cover" ? "cover" : e === "fill" ? "fill" : "contain";
 }
-function Y(e) {
-	let r = x(), i = { ...e }, o = new t(), s = new j(), c = new a(i.lang);
+function W(e) {
+	let r = w(), i = { ...e }, o = new t(), s = new m(), 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, w = null;
-	function T() {
-		w && typeof navigator < "u" && "mediaSession" in navigator && navigator.mediaSession.metadata === w && (navigator.mediaSession.metadata = null), w = null;
+	let l = new n(), u = i.reconnectMax ?? 3, p = i.reconnectSleep ?? 1500, _ = null, v = null, y = null, b = null, x = null, S = 0, T = null, E = null, D = new g(), O = 0, k = !1, A = !1, j = null, M = [], N = !1;
+	function P(e) {
+		return {
+			generation: O,
+			id: e.playbackProgress?.id ?? e.src,
+			store: e.playbackProgress?.store ?? D
+		};
+	}
+	let F = P(i);
+	function I() {
+		if (N) return;
+		let e = M.shift();
+		e && (N = !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(() => {
+			N = !1, I();
+		}));
+	}
+	function te(e, t) {
+		let n = M.at(-1);
+		n?.kind === "save" && n.target.generation === e.generation ? n.progress = t : M.push({
+			kind: "save",
+			target: e,
+			progress: t
+		}), I();
+	}
+	function L(e) {
+		M.push({
+			kind: "clear",
+			target: e
+		}), I();
+	}
+	function R(e = F, t = v) {
+		!t || t.ended || !Number.isFinite(t.currentTime) || t.currentTime < 0 || !f(t.duration) || te(e, {
+			time: t.currentTime,
+			duration: t.duration
+		});
+	}
+	function z() {
+		O++, F = P(i), k = !1, A = !1, Y(), r.setState((e) => ({
+			...e,
+			resumeProgress: null
+		}));
+	}
+	function V(e) {
+		if (k || !f(e.duration)) return;
+		k = !0;
+		let t = F, n = e.duration;
+		t.store.load(t.id).then((i) => {
+			!i || t.generation !== O || e !== v || A || e.currentTime !== 0 || !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,
+				resumeProgress: i
+			}));
+		}).catch((e) => console.warn("[vplayer] playback progress load failed:", e));
+	}
+	function W() {
+		E && typeof navigator < "u" && "mediaSession" in navigator && navigator.mediaSession.metadata === E && (navigator.mediaSession.metadata = null), E = null;
 	}
-	function E() {
+	function G() {
 		if (typeof navigator > "u" || !("mediaSession" in navigator) || typeof MediaMetadata > "u") return;
 		let e = i.title?.trim();
 		if (!e) {
-			T();
+			W();
 			return;
 		}
 		let t = new MediaMetadata({
 			title: e,
 			artwork: i.poster ? [{ src: i.poster }] : []
 		});
-		navigator.mediaSession.metadata = t, w = t;
+		navigator.mediaSession.metadata = t, E = t;
 	}
-	function D() {
+	function K() {
 		l.register({
 			key: "Space",
 			description: "Toggle play/pause",
 			handler: (e) => {
-				e.preventDefault(), k.togglePlay();
+				e.preventDefault(), J.togglePlay();
 			}
 		}), l.register({
 			key: "KeyK",
 			description: "Toggle play/pause",
 			handler: (e) => {
-				e.preventDefault(), k.togglePlay();
+				e.preventDefault(), J.togglePlay();
 			}
 		}), l.register({
 			key: "KeyL",
 			description: "Toggle loop",
 			handler: (e) => {
-				e.preventDefault(), k.toggleLoop();
+				e.preventDefault(), J.toggleLoop();
 			}
 		}), l.register({
 			key: "KeyI",
 			description: "Toggle info panel",
 			handler: (e) => {
-				e.preventDefault(), k.toggleInfoPanel();
+				e.preventDefault(), J.toggleInfoPanel();
 			}
 		}), l.register({
 			key: "KeyF",
 			description: "Toggle fullscreen",
 			handler: (e) => {
-				e.preventDefault(), k.toggleFullscreen();
+				e.preventDefault(), J.toggleFullscreen();
 			}
 		}), l.register({
 			key: "KeyA",
 			description: "Cycle aspect ratio",
 			handler: (e) => {
-				e.preventDefault(), k.cycleAspectRatio();
+				e.preventDefault(), J.cycleAspectRatio();
 			}
 		}), l.register({
 			key: "KeyM",
 			description: "Toggle mute",
 			handler: (e) => {
-				e.preventDefault(), k.toggleMute();
+				e.preventDefault(), J.toggleMute();
 			}
 		}), l.register({
 			key: "ArrowLeft",
 			description: "Seek backward 5s",
 			handler: (e) => {
-				e.preventDefault(), k.skip(-5);
+				e.preventDefault(), J.skip(-5);
 			}
 		}), l.register({
 			key: "ArrowRight",
 			description: "Seek forward 5s",
 			handler: (e) => {
-				e.preventDefault(), k.skip(5);
+				e.preventDefault(), J.skip(5);
 			}
 		}), l.register({
 			key: "ArrowUp",
@@ -804,7 +873,7 @@ function Y(e) {
 			handler: (e) => {
 				e.preventDefault();
 				let t = Math.min(1, r.state.volume + .1);
-				k.setVolume(t);
+				J.setVolume(t);
 			}
 		}), l.register({
 			key: "ArrowDown",
@@ -812,38 +881,52 @@ function Y(e) {
 			handler: (e) => {
 				e.preventDefault();
 				let t = Math.max(0, r.state.volume - .1);
-				k.setVolume(t);
+				J.setVolume(t);
 			}
 		});
 	}
-	i.defaultHotkeys !== !1 && D();
-	function O() {
+	i.defaultHotkeys !== !1 && K();
+	function q() {
 		if (typeof document > "u") return;
 		let e = document;
 		r.setState((t) => ({
 			...t,
 			isFullscreen: !!(document.fullscreenElement || e.webkitFullscreenElement),
-			capabilities: d(h?.element ?? void 0, m)
+			capabilities: d(v?.element ?? void 0, _)
 		}));
 	}
-	let k = {
+	let J = {
 		play: () => {
-			h?.play();
+			v?.play();
 		},
-		pause: () => h?.pause(),
+		pause: () => v?.pause(),
 		togglePlay: () => {
-			let e = h;
+			let e = v;
 			e && (e.paused || e.ended ? e.play() : e.pause());
 		},
-		seek: (e) => h?.seek(e),
+		resumeFromSavedProgress: () => {
+			let e = r.state.resumeProgress;
+			e && (r.setState((e) => ({
+				...e,
+				resumeProgress: null
+			})), v?.seek(e.time), v?.play());
+		},
+		startPlaybackOver: () => {
+			let e = F;
+			r.setState((e) => ({
+				...e,
+				resumeProgress: null
+			})), v?.seek(0), L(e);
+		},
+		seek: (e) => v?.seek(e),
 		skip: (e) => {
-			let t = h;
+			let t = v;
 			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 = h;
+			let t = v;
 			if (!t) return;
 			let n = Math.max(0, Math.min(1, e));
 			t.setVolume(n), n > 0 && t.setMuted(!1), r.setState((e) => ({
@@ -853,28 +936,28 @@ function Y(e) {
 			}));
 		},
 		toggleMute: () => {
-			let e = h;
+			let e = v;
 			e && (e.setMuted(!e.muted), r.setState((t) => ({
 				...t,
 				isMuted: e.muted
 			})));
 		},
 		setPlaybackRate: (e) => {
-			let t = h;
+			let t = v;
 			t && (t.setPlaybackRate(e), r.setState((e) => ({
 				...e,
 				playbackRate: t.playbackRate
 			})));
 		},
 		toggleFullscreen: () => {
-			if (!m || typeof document > "u") return;
-			let e = m, t = document, n = !!(document.fullscreenElement || t.webkitFullscreenElement), r = () => {
-				m?.focus({ preventScroll: !0 }), O();
-			}, i = n ? typeof document.exitFullscreen == "function" ? document.exitFullscreen() : t.webkitExitFullscreen?.() : typeof m.requestFullscreen == "function" ? m.requestFullscreen() : e.webkitRequestFullscreen?.();
+			if (!_ || typeof document > "u") return;
+			let e = _, t = document, n = !!(document.fullscreenElement || t.webkitFullscreenElement), r = () => {
+				_?.focus({ preventScroll: !0 }), q();
+			}, i = n ? typeof document.exitFullscreen == "function" ? document.exitFullscreen() : t.webkitExitFullscreen?.() : typeof _.requestFullscreen == "function" ? _.requestFullscreen() : e.webkitRequestFullscreen?.();
 			Promise.resolve(i).then(r, r);
 		},
 		togglePiP: () => {
-			let e = h;
+			let e = v;
 			!e || typeof document > "u" || (document.pictureInPictureElement ? e.exitPictureInPicture() : e.requestPictureInPicture());
 		},
 		setActiveSubtitle: (e) => {
@@ -890,7 +973,7 @@ function Y(e) {
 			}));
 		},
 		takeScreenshot: async () => {
-			let e = h;
+			let e = v;
 			if (!e) return;
 			let t = await e.screenshot();
 			if (!t) return;
@@ -898,7 +981,7 @@ function Y(e) {
 			r.href = n, r.download = `vplayer-screenshot-${Date.now()}.png`, r.click(), URL.revokeObjectURL(n);
 		},
 		setFlip: (e) => {
-			let t = h?.element;
+			let t = v?.element;
 			if (!t) return;
 			let n = "";
 			e === "horizontal" && (n = "scaleX(-1)"), e === "vertical" && (n = "scaleY(-1)"), t.style.transform = n, r.setState((t) => ({
@@ -907,20 +990,20 @@ function Y(e) {
 			}));
 		},
 		setAspectRatio: (e) => {
-			let t = q(e), n = h?.element;
+			let t = ae(e), n = v?.element;
 			if (!n) return;
-			let i = W[t];
-			i ? n.style.setProperty("--vplayer-media-aspect-ratio", i) : n.style.removeProperty("--vplayer-media-aspect-ratio"), n.style.objectFit = J(t), n.style.setProperty("--vplayer-media-object-fit", J(t)), m && (K(m), m.classList.add(`vplayer--media-${G[t]}`)), r.setState((e) => ({
+			let i = ne[t];
+			i ? n.style.setProperty("--vplayer-media-aspect-ratio", i) : n.style.removeProperty("--vplayer-media-aspect-ratio"), n.style.objectFit = U(t), n.style.setProperty("--vplayer-media-object-fit", U(t)), _ && (ie(_), _.classList.add(`vplayer--media-${re[t]}`)), r.setState((e) => ({
 				...e,
 				aspectRatio: t
 			}));
 		},
 		cycleAspectRatio: () => {
-			let e = r.state.aspectRatio, t = U[(U.indexOf(e) + 1) % U.length] ?? "default";
-			k.setAspectRatio(t);
+			let e = r.state.aspectRatio, t = H[(H.indexOf(e) + 1) % H.length] ?? "default";
+			J.setAspectRatio(t);
 		},
 		toggleLoop: () => {
-			let e = h;
+			let e = v;
 			e && (e.setLooping(!e.looping), r.setState((t) => ({
 				...t,
 				isLooping: e.looping
@@ -933,10 +1016,13 @@ function Y(e) {
 			}));
 		}
 	};
-	function A(e) {
+	function oe(e) {
 		return [
 			e.on("play", () => {
-				E(), r.setState((e) => ({
+				A = !0, r.setState((e) => ({
+					...e,
+					resumeProgress: null
+				})), G(), r.setState((e) => ({
 					...e,
 					status: "playing",
 					isPlaying: !0,
@@ -954,17 +1040,23 @@ function Y(e) {
 					isPaused: !e.isEnded,
 					isBuffering: !1,
 					controlsVisible: !0
-				}));
+				})), e.ended || R(F, e);
 			}),
 			e.on("ended", () => {
-				r.setState((e) => ({
+				Y();
+				for (let e = M.length - 1; e >= 0; e--) {
+					let t = M[e];
+					t?.kind === "save" && t.target.generation === F.generation && M.splice(e, 1);
+				}
+				L(F), r.setState((e) => ({
 					...e,
 					status: "ended",
 					isPlaying: !1,
 					isPaused: !1,
 					isBuffering: !1,
 					isEnded: !0,
-					controlsVisible: !0
+					controlsVisible: !0,
+					resumeProgress: null
 				})), i.onEnded?.();
 			}),
 			e.on("timeupdate", () => {
@@ -974,7 +1066,7 @@ function Y(e) {
 				})), i.onTimeUpdate?.(e.currentTime);
 			}),
 			e.on("loadedmetadata", () => {
-				v !== null && (clearTimeout(v), v = null), S = 0, r.setState((t) => ({
+				x !== null && (clearTimeout(x), x = null), S = 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,
@@ -983,7 +1075,7 @@ function Y(e) {
 					isMuted: e.muted,
 					playbackRate: e.playbackRate,
 					error: null
-				}));
+				})), V(e);
 			}),
 			e.on("progress", () => {
 				let t = e.buffered;
@@ -1002,7 +1094,7 @@ function Y(e) {
 				}));
 			}),
 			e.on("canplay", () => {
-				v !== null && (clearTimeout(v), v = null), S = 0, r.setState((e) => ({
+				x !== null && (clearTimeout(x), x = null), S = 0, r.setState((e) => ({
 					...e,
 					status: e.isPlaying ? "playing" : "ready",
 					isBuffering: !1,
@@ -1014,7 +1106,7 @@ function Y(e) {
 					...t,
 					duration: f(e.duration) ? e.duration : 0,
 					isLive: !f(e.duration)
-				}));
+				})), V(e);
 			}),
 			e.on("seeking", () => {
 				r.setState((e) => ({
@@ -1079,31 +1171,25 @@ function Y(e) {
 						reconnectAttempt: S,
 						isReconnecting: !0
 					}
-				})), o.emit("video:reconnecting", { attempt: S + 1 }), v !== null && clearTimeout(v), v = setTimeout(() => {
-					v = null, S++, o.emit("video:reconnect", { attempt: S }), e.load();
+				})), o.emit("video:reconnecting", { attempt: S + 1 }), x !== null && clearTimeout(x), x = setTimeout(() => {
+					x = null, S++, o.emit("video:reconnect", { attempt: S }), e.load();
 				}, p));
 			})
 		];
 	}
-	function N() {
-		P(), _ = setInterval(() => {
-			let e = h;
-			e && s.set(M.PLAYBACK_PROGRESS, {
-				time: e.currentTime,
-				duration: e.duration
-			});
-		}, 5e3);
+	function se() {
+		Y(), b = setInterval(() => R(), 5e3);
 	}
-	function P() {
-		_ !== null && (clearInterval(_), _ = null);
+	function Y() {
+		b !== null && (clearInterval(b), b = null);
 	}
-	let F = r.subscribe(() => {
+	let ce = r.subscribe(() => {
 		let e = r.state;
-		e.isPlaying && e.duration > 0 ? _ === null && N() : P();
-	}), I = null;
-	function L() {
+		e.isPlaying && e.duration > 0 && !e.isLive ? b === null && se() : Y();
+	}), X = null;
+	function le() {
 		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);
+		let e = s.get(h.VOLUME), t = s.get(h.MUTED), n = s.get(h.PLAYBACK_RATE), a = s.get(h.LOOP), o = s.get(h.FLIP), c = s.get(h.ASPECT_RATIO);
 		r.setState((r) => ({
 			...r,
 			volume: e ?? r.volume,
@@ -1111,17 +1197,17 @@ function Y(e) {
 			playbackRate: n ?? r.playbackRate,
 			isLooping: a ?? r.isLooping,
 			flip: o ?? r.flip,
-			aspectRatio: q(c)
-		})), I = r.subscribe(() => {
+			aspectRatio: ae(c)
+		})), X = 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);
+			e.volume !== 1 && s.set(h.VOLUME, e.volume), e.isMuted && s.set(h.MUTED, !0), e.playbackRate !== 1 && s.set(h.PLAYBACK_RATE, e.playbackRate), e.isLooping ? s.set(h.LOOP, !0) : s.remove(h.LOOP), e.flip === "normal" ? s.remove(h.FLIP) : s.set(h.FLIP, e.flip), e.aspectRatio === "default" ? s.remove(h.ASPECT_RATIO) : s.set(h.ASPECT_RATIO, e.aspectRatio);
 		});
 	}
-	function R() {
-		I &&= (I(), null);
+	function ue() {
+		X &&= (X(), null);
 	}
-	function z(e) {
-		if (C?.abort(), C = null, !e) {
+	function Z(e) {
+		if (T?.abort(), T = null, !e) {
 			r.setState((e) => ({
 				...e,
 				thumbnailCues: []
@@ -1129,7 +1215,7 @@ function Y(e) {
 			return;
 		}
 		let t = new AbortController();
-		C = t, V(e, t.signal, i.transformThumbnailVTT).then((e) => {
+		T = t, B(e, t.signal, i.transformThumbnailVTT).then((e) => {
 			t.signal.aborted || r.setState((t) => ({
 				...t,
 				thumbnailCues: e
@@ -1141,21 +1227,21 @@ function Y(e) {
 			})));
 		});
 	}
-	function B(e) {
+	function de(e) {
 		return {
 			name: e,
 			store: r,
-			remote: k,
+			remote: J,
 			events: o,
 			storage: s,
 			hotkeys: l,
 			i18n: c,
 			context: {
 				containerRef: { get current() {
-					return m;
+					return _;
 				} },
 				videoRef: { get current() {
-					return h?.element;
+					return v?.element;
 				} }
 			},
 			addControl: (e) => (r.setState((t) => ({
@@ -1224,15 +1310,15 @@ function Y(e) {
 			}
 		};
 	}
-	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);
+	let Q = [];
+	function fe(e = !0) {
+		x !== null && (clearTimeout(x), x = null), S = 0;
+		for (let e of Q) e();
+		Q = [], v && (e && R(F, v), v.destroy(), v = null, $.engine = null);
 	}
-	function X(e) {
-		let t = y(i), n = b(e, i);
-		h = n, Q.engine = n, H = A(n), e.playsInline = !0, e.autoplay = !!i.autoPlay, e.preload = e.preload || "metadata", r.setState((n) => ({
+	function pe(e) {
+		let t = C(i), n = ee(e, i);
+		v = n, $.engine = n, Q = oe(n), e.playsInline = !0, e.autoplay = !!i.autoPlay, e.preload = e.preload || "metadata", r.setState((n) => ({
 			...n,
 			status: "loading",
 			source: t,
@@ -1243,31 +1329,31 @@ function Y(e) {
 			currentTime: 0,
 			duration: 0,
 			bufferedPercent: 0,
-			capabilities: d(e, m),
+			capabilities: d(e, _),
 			error: null
 		})), i.autoPlay && n.play();
 	}
-	function Z() {
-		let e = h?.element;
-		if (e) {
-			for (Y(), e.pause(), e.removeAttribute("src"); e.firstChild;) e.removeChild(e.firstChild);
-			e.load(), X(e);
+	function me(e = !0) {
+		let t = v?.element;
+		if (t) {
+			for (fe(e), t.pause(), t.removeAttribute("src"); t.firstChild;) t.removeChild(t.firstChild);
+			t.load(), pe(t);
 		}
 	}
-	let Q = {
+	let $ = {
 		store: r,
-		remote: k,
+		remote: J,
 		events: o,
 		storage: s,
 		i18n: c,
 		hotkeys: l,
 		engine: null,
 		updateOptions(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;
-			i = {
+			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 = {
 				...i,
 				...e
-			}, (r.state.isPlaying || w) && E(), r.setState((t) => {
+			}, c = P(s), l = c.id !== F.id || c.store !== F.store;
+			(t || l) && R(F, v), i = s, (t || l) && z(), (r.state.isPlaying || E) && G(), r.setState((t) => {
 				let n = e.subtitles ?? t.subtitleTracks, r = e.qualities ?? t.qualities;
 				return {
 					...t,
@@ -1276,18 +1362,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) && z(i.thumbnails), (t || n) && Z();
+			}), (a || o) && Z(i.thumbnails), t || n ? me(!(t || l)) : l && v && f(v.duration) && V(v);
 		},
 		setThumbnails(e) {
 			i = {
 				...i,
 				thumbnails: e
-			}, z(e);
+			}, Z(e);
 		},
 		initPlugins(e) {
 			let t = [];
 			for (let n of e) {
-				let e = B(n.name);
+				let e = de(n.name);
 				try {
 					let r = n.setup?.(e);
 					typeof r == "function" && t.push(r);
@@ -1304,10 +1390,10 @@ function Y(e) {
 			};
 		},
 		mount(e, t) {
-			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);
+			v && this.unmount(), _ = t, pe(e), y = q, document.addEventListener("fullscreenchange", y), document.addEventListener("webkitfullscreenchange", y), j = () => R(), window.addEventListener("pagehide", j), Z(i.thumbnails), le(), J.setAspectRatio(r.state.aspectRatio);
 		},
 		unmount() {
-			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) => ({
+			fe(), z(), W(), _ = null, T?.abort(), T = null, ue(), x !== null && (clearTimeout(x), x = null), y &&= (document.removeEventListener("fullscreenchange", y), document.removeEventListener("webkitfullscreenchange", y), null), j &&= (window.removeEventListener("pagehide", j), null), r.setState((e) => ({
 				...e,
 				status: "idle",
 				isPlaying: !1,
@@ -1317,14 +1403,14 @@ function Y(e) {
 			}));
 		},
 		destroy() {
-			this.unmount(), F(), o.clear();
+			this.unmount(), ce(), o.clear();
 		}
 	};
-	return Q;
+	return $;
 }
 //#endregion
 //#region src/gesture-engine.ts
-function X(e, t) {
+function G(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;
@@ -1384,14 +1470,14 @@ function X(e, t) {
 }
 //#endregion
 //#region src/utils.ts
-function Z(e) {
+function K(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 Q = {
+var q = {
 	play: "Play",
 	pause: "Pause",
 	replay: "Replay",
@@ -1422,7 +1508,7 @@ var Q = {
 	aspectRatioCover: "Crop / Cover",
 	aspectRatio21: "21 : 9",
 	continue: "Continue",
-	continuePlay: "Continue from",
+	continuePlay: "Continue playing at",
 	continueStartOver: "Start over",
 	error: "An error occurred",
 	retry: "Retry",
@@ -1433,4 +1519,4 @@ var Q = {
 	loop: "Loop"
 };
 //#endregion
-export { p as BaseMediaEngine, g as DashMediaEngine, t as EventBus, h as HlsMediaEngine, n as HotkeyRegistry, a as I18n, m as NativeVideoEngine, M as STORAGE_KEYS, j as Storage, c as canUseFullscreen, o as canUseMSE, s as canUseNativeHLS, l as canUsePictureInPicture, u as canUseTextTracks, X as createGestureEngine, x as createMediaStore, Y as createPlayer, b as createResolvedMediaEngine, Q as defaultPlayerLabels, v as detectSourceKind, I as fetchSubtitles, V as fetchThumbnails, Z as formatTime, L as getActiveCue, S as getInitialMediaState, d as getMediaCapabilities, H as getThumbnailAtTime, f as isFiniteDuration, P as parseSRT, z as parseThumbnailVTT, N as parseTimestamp, F as parseVTT, w as selectAudio, k as selectError, C as selectMedia, D as selectPlugins, T as selectPreferences, O as selectThumbnails, E as selectUI, y as toPlayerSource };
+export { _ as BaseMediaEngine, b as DashMediaEngine, t as EventBus, y as HlsMediaEngine, n as HotkeyRegistry, a as I18n, g as LocalPlaybackProgressStore, v as NativeVideoEngine, h as STORAGE_KEYS, m as Storage, c as canUseFullscreen, o as canUseMSE, s as canUseNativeHLS, l as canUsePictureInPicture, u as canUseTextTracks, G as createGestureEngine, w as createMediaStore, W as createPlayer, ee as createResolvedMediaEngine, q as defaultPlayerLabels, S as detectSourceKind, I as fetchSubtitles, B as fetchThumbnails, K as formatTime, te as getActiveCue, T as getInitialMediaState, d as getMediaCapabilities, V as getThumbnailAtTime, f as isFiniteDuration, P as parseSRT, R as parseThumbnailVTT, N as parseTimestamp, F as parseVTT, D as selectAudio, M as selectError, E as selectMedia, A as selectPlugins, O as selectPreferences, j as selectThumbnails, k as selectUI, C as toPlayerSource };

package/dist/playback-progress.d.ts

@@ -0,0 +1,21 @@
+import { Storage } from './storage';
+export interface PlaybackProgress {
+    time: number;
+    duration: number;
+}
+export interface PlaybackProgressStore {
+    load(mediaId: string): Promise<PlaybackProgress | null>;
+    save(mediaId: string, progress: PlaybackProgress): Promise<void>;
+    clear(mediaId: string): Promise<void>;
+}
+export interface PlaybackProgressOptions {
+    id?: string;
+    store?: PlaybackProgressStore;
+}
+export declare class LocalPlaybackProgressStore implements PlaybackProgressStore {
+    private readonly storage;
+    constructor(storage?: Storage);
+    load(mediaId: string): Promise<PlaybackProgress | null>;
+    save(mediaId: string, progress: PlaybackProgress): Promise<void>;
+    clear(mediaId: string): Promise<void>;
+}

package/dist/plugin-api.d.ts

@@ -8,6 +8,8 @@ export interface RemoteRef {
     pause: () => void;
     togglePlay: () => void;
     seek: (time: number) => void;
+    resumeFromSavedProgress: () => void;
+    startPlaybackOver: () => void;
     skip: (seconds: number) => void;
     setVolume: (v: number) => void;
     toggleMute: () => void;

package/dist/state/slices.d.ts

@@ -12,6 +12,7 @@
  */
 import { Store } from '@tanstack/store';
 import type { MediaCapabilitiesSnapshot } from '../media-capabilities';
+import type { PlaybackProgress } from '../playback-progress';
 import type { ControlRegistration, ContextMenuItem, FlipState, AspectRatioState } from '../plugin-api';
 import type { LayerRegistration, SettingRegistration } from '../plugin-api';
 import type { PlayerSource } from '../source-resolver';
@@ -70,13 +71,16 @@ export interface ErrorSlice {
         isReconnecting: boolean;
     } | null;
 }
+export interface PlaybackProgressSlice {
+    resumeProgress: PlaybackProgress | null;
+}
 /**
  * Full MediaState — flat at runtime, logically organized here.
  *
  * Consumers can reference MediaState or individual slices depending
  * on how granular they need to be.
  */
-export interface MediaState extends MediaSlice, AudioSlice, PreferencesSlice, UISlice, PluginSlice, ThumbnailSlice, ErrorSlice {
+export interface MediaState extends MediaSlice, AudioSlice, PreferencesSlice, UISlice, PluginSlice, ThumbnailSlice, ErrorSlice, PlaybackProgressSlice {
 }
 export type PlayerStore = Store<MediaState>;
 export declare function createMediaStore(): PlayerStore;
@@ -93,6 +97,7 @@ export declare const selectMedia: (s: MediaState) => {
     bufferedPercent: number;
     playbackRate: number;
     isLive: boolean;
+    resumeProgress: PlaybackProgress | null;
 };
 export declare const selectAudio: (s: MediaState) => {
     volume: number;

package/dist/storage.d.ts

@@ -18,7 +18,6 @@ export declare const STORAGE_KEYS: {
     readonly PLAYBACK_RATE: "playbackRate";
     readonly SUBTITLE_LANG: "subtitleLang";
     readonly QUALITY: "quality";
-    readonly PLAYBACK_PROGRESS: "playbackProgress";
     readonly LOOP: "loop";
     readonly FLIP: "flip";
     readonly ASPECT_RATIO: "aspectRatio";

package/dist/types.d.ts

@@ -4,6 +4,7 @@ import type { HotkeyRegistry } from './hotkey-registry';
 import type { I18n } from './i18n';
 import type { MediaCapabilitiesSnapshot } from './media-capabilities';
 import type { DashMediaEngineOptions, HlsMediaEngineOptions, MediaEngine } from './media-engine';
+import type { PlaybackProgressOptions } from './playback-progress';
 import type { PlayerPlugin } from './plugin-api';
 import type { AspectRatioState, FlipState } from './plugin-api';
 import type { PlayerSource } from './source-resolver';
@@ -28,6 +29,7 @@ export interface PlayerOptions {
     lang?: string;
     translations?: Record<string, string>;
     plugins?: PlayerPlugin[];
+    playbackProgress?: PlaybackProgressOptions;
     persistPreferences?: boolean;
     defaultHotkeys?: boolean;
     reconnectMax?: number;
@@ -76,6 +78,8 @@ export interface MediaRemote {
     play: () => void;
     pause: () => void;
     togglePlay: () => void;
+    resumeFromSavedProgress: () => void;
+    startPlaybackOver: () => void;
     seek: (time: number) => void;
     skip: (seconds: number) => void;
     setVolume: (v: number) => void;
@@ -148,7 +152,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' | 'qualities' | 'thumbnails' | 'transformThumbnailVTT'>>): void;
+    updateOptions(opts: Partial<Pick<PlayerOptions, 'src' | 'type' | 'title' | 'poster' | 'autoPlay' | 'subtitles' | '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.1.8",
+  "version": "0.2.1",
   "private": false,
   "repository": {
     "type": "git",