mpegts-vue3 0.3.0 → 0.4.1

package/dist/index.js

@@ -1,18 +1,28 @@
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, defineComponent, normalizeStyle, onMounted, onUnmounted, openBlock, ref, watch, withModifiers } from "vue";
-import Mpegts from "mpegts.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onMounted, onUnmounted, openBlock, ref, watch, withModifiers } from "vue";
+import Mpegts, { default as Mpegts$1 } from "mpegts.js";
 //#region src/components/MpegtsPlayer.vue
-const _hoisted_1 = { class: "relative w-full h-full bg-black overflow-hidden" };
-const _hoisted_2 = {
-	key: 0,
-	class: "absolute inset-0 flex flex-col items-center justify-center bg-gray-900/90"
-};
-const _hoisted_3 = {
-	key: 1,
-	class: "absolute inset-0 flex items-center justify-center bg-black/60"
+const _hoisted_1 = {
+	style: {
+		width: "2.5rem",
+		height: "2.5rem",
+		marginBottom: "0.75rem",
+		color: "#9ca3af"
+	},
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.5",
+	viewBox: "0 0 24 24"
 };
-const _hoisted_4 = {
-	key: 2,
-	class: "absolute inset-0 flex items-center justify-center bg-black/60"
+const _hoisted_2 = {
+	style: {
+		width: "2rem",
+		height: "2rem",
+		color: "#f87171"
+	},
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.5",
+	viewBox: "0 0 24 24"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "MpegtsPlayer",
@@ -34,18 +44,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		type: { default: "mse" },
 		cors: { type: Boolean },
 		withCredentials: { type: Boolean },
-		hasAudio: { type: Boolean },
+		hasAudio: {
+			type: Boolean,
+			default: true
+		},
 		hasVideo: {
 			type: Boolean,
 			default: true
 		},
 		duration: {},
 		filesize: {},
-		config: { default: () => ({}) }
+		showLoading: {
+			type: Boolean,
+			default: true
+		},
+		config: { default: () => ({}) },
+		autoReconnect: {
+			type: Boolean,
+			default: true
+		},
+		reconnect: { default: () => ({
+			retries: 5,
+			minDelay: 1e3,
+			maxDelay: 16e3
+		}) }
 	},
-	emits: ["error", "status"],
+	emits: [
+		"error",
+		"status",
+		"statistics",
+		"mediaInfo",
+		"recovered",
+		"ended"
+	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const DEFAULT_CONFIG = {
+			enableWorker: true,
+			reuseRedirectedURL: true,
 			enableStashBuffer: false,
 			liveBufferLatencyChasing: true,
 			liveBufferLatencyChasingOnPaused: true,
@@ -59,15 +94,135 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			autoCleanupMinBackwardDuration: 10,
 			fixAudioTimestampGap: true
 		};
+		const MSE_REQUIRED_TYPES = [
+			"mse",
+			"mpegts",
+			"m2ts",
+			"flv"
+		];
 		const props = __props;
 		const emit = __emit;
 		const videoRef = ref();
 		const status = ref("nosignal");
 		let player = null;
-		const videoStyle = computed(() => ({ objectFit: props.objectFit ?? "fill" }));
-		function destroyPlayer() {
+		let gen = 0;
+		let recreateTimer = null;
+		function scheduleRecreate() {
+			if (recreateTimer) clearTimeout(recreateTimer);
+			recreateTimer = setTimeout(() => {
+				recreateTimer = null;
+				createPlayer();
+			}, 300);
+		}
+		const RECONNECTABLE_ERRORS = new Set([
+			"Exception",
+			"ConnectingTimeout",
+			"UnrecoverableEarlyEof"
+		]);
+		let reconnectAttempts = 0;
+		let reconnectTimer = null;
+		function markPlaying() {
+			reconnectAttempts = 0;
+			status.value = "playing";
+			emit("status", "playing");
+		}
+		function scheduleReconnect() {
+			const { retries = 5, minDelay = 1e3, maxDelay = 16e3 } = props.reconnect;
+			if (reconnectAttempts >= retries) return false;
+			const delay = Math.min(maxDelay, minDelay * 2 ** reconnectAttempts);
+			reconnectAttempts++;
+			status.value = "reconnecting";
+			emit("status", "reconnecting");
+			reconnectTimer = setTimeout(() => {
+				reconnectTimer = null;
+				createPlayer();
+			}, delay);
+			return true;
+		}
+		const videoStyle = computed(() => ({
+			position: "absolute",
+			inset: 0,
+			width: "100%",
+			height: "100%",
+			objectFit: props.objectFit ?? "fill"
+		}));
+		const containerStyle = {
+			position: "relative",
+			width: "100%",
+			height: "100%",
+			backgroundColor: "#000",
+			overflow: "hidden"
+		};
+		const overlayBase = {
+			position: "absolute",
+			inset: 0,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		};
+		const noSignalOverlay = {
+			...overlayBase,
+			flexDirection: "column",
+			backgroundColor: "rgb(17 24 39 / 0.9)"
+		};
+		const maskOverlay = {
+			...overlayBase,
+			backgroundColor: "rgb(0 0 0 / 0.6)"
+		};
+		const connectingInner = {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: "0.75rem"
+		};
+		const errorInner = {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: "0.5rem"
+		};
+		const spinnerStyle = {
+			width: "2rem",
+			height: "2rem",
+			borderRadius: "9999px",
+			border: "2px solid #3b82f6",
+			borderTopColor: "transparent",
+			animation: "mpegts-spin 1s linear infinite"
+		};
+		const noSignalTextStyle = {
+			fontSize: "0.875rem",
+			fontWeight: 500,
+			color: "#9ca3af",
+			letterSpacing: "0.05em",
+			textTransform: "uppercase"
+		};
+		const connectingTextStyle = {
+			fontSize: "0.875rem",
+			color: "#d1d5db"
+		};
+		const errorTextStyle = {
+			fontSize: "0.875rem",
+			color: "#f87171"
+		};
+		let keyframeInjected = false;
+		function ensureKeyframe() {
+			if (keyframeInjected || typeof document === "undefined") return;
+			keyframeInjected = true;
+			const el = document.createElement("style");
+			el.textContent = "@keyframes mpegts-spin { to { transform: rotate(360deg) } }";
+			document.head.appendChild(el);
+		}
+		function destroyPlayer(silent = false) {
+			gen++;
+			if (recreateTimer) {
+				clearTimeout(recreateTimer);
+				recreateTimer = null;
+			}
+			if (reconnectTimer) {
+				clearTimeout(reconnectTimer);
+				reconnectTimer = null;
+			}
 			if (!player) return;
-			status.value = "destroying";
 			try {
 				player.pause();
 				player.unload();
@@ -75,23 +230,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 				player.destroy();
 			} catch {}
 			player = null;
-			status.value = "nosignal";
+			if (!silent) {
+				status.value = "nosignal";
+				emit("status", "nosignal");
+			}
 		}
 		function play() {
 			if (!player) return;
+			const myGen = gen;
 			videoRef.value.muted = props.muted;
 			const result = player.play();
 			if (result instanceof Promise) result.then(() => {
-				status.value = "playing";
-				emit("status", "playing");
+				if (myGen !== gen) return;
+				markPlaying();
 			}).catch(() => {
+				if (myGen !== gen) return;
 				status.value = "stopped";
 				emit("status", "stopped");
 			});
-			else {
-				status.value = "playing";
-				emit("status", "playing");
-			}
+			else markPlaying();
 		}
 		function pause() {
 			if (!player) return;
@@ -99,9 +256,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			status.value = "stopped";
 			emit("status", "stopped");
 		}
+		function reload() {
+			createPlayer();
+		}
+		function setMuted(muted) {
+			if (videoRef.value) videoRef.value.muted = muted;
+		}
+		function getPlayer() {
+			return player;
+		}
+		function getVolume() {
+			return videoRef.value?.volume ?? 0;
+		}
+		function setVolume(volume) {
+			if (videoRef.value) videoRef.value.volume = volume;
+		}
+		function seek(seconds) {
+			if (player) player.currentTime = seconds;
+		}
+		function getCurrentTime() {
+			return videoRef.value?.currentTime ?? 0;
+		}
+		function getBufferedRanges() {
+			return videoRef.value?.buffered ?? null;
+		}
+		function getStatistics() {
+			return player?.statisticsInfo ?? null;
+		}
 		__expose({
 			play,
-			pause
+			pause,
+			reload,
+			setMuted,
+			getPlayer,
+			getVolume,
+			setVolume,
+			seek,
+			getCurrentTime,
+			getBufferedRanges,
+			getStatistics
 		});
 		function buildMediaDataSource() {
 			const source = {
@@ -111,18 +304,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			};
 			if (props.cors !== void 0) source.cors = props.cors;
 			if (props.withCredentials !== void 0) source.withCredentials = props.withCredentials;
-			if (props.hasAudio !== void 0) source.hasAudio = props.hasAudio;
-			if (props.hasVideo !== void 0) source.hasVideo = props.hasVideo;
+			source.hasAudio = props.hasAudio;
+			source.hasVideo = props.hasVideo;
 			if (props.duration !== void 0) source.duration = props.duration;
 			if (props.filesize !== void 0) source.filesize = props.filesize;
 			return source;
 		}
 		function createPlayer() {
-			destroyPlayer();
+			destroyPlayer(true);
+			const myGen = gen;
 			if (!props.url || !videoRef.value) return;
-			if (!Mpegts.isSupported()) {
+			if (MSE_REQUIRED_TYPES.includes(props.type) && !Mpegts$1.isSupported()) {
 				status.value = "error";
 				emit("status", "error");
+				emit("error", "NotSupportedError", "MediaSource Extensions (MSE) are not supported by this browser", { type: props.type });
 				return;
 			}
 			status.value = "connecting";
@@ -132,40 +327,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 				...props.config
 			};
 			const mediaSource = buildMediaDataSource();
-			player = Mpegts.createPlayer(mediaSource, mergedConfig);
+			player = Mpegts$1.createPlayer(mediaSource, mergedConfig);
 			player.attachMediaElement(videoRef.value);
-			player.on(Mpegts.Events.ERROR, (errorType, errorDetail, errorInfo) => {
+			player.on(Mpegts$1.Events.ERROR, (errorType, errorDetail, errorInfo) => {
+				if (myGen !== gen) return;
+				emit("error", errorType, errorDetail, errorInfo);
+				if (props.autoReconnect && errorType === "NetworkError" && RECONNECTABLE_ERRORS.has(errorDetail) && scheduleReconnect()) return;
 				status.value = "error";
 				emit("status", "error");
-				emit("error", errorType, errorDetail, errorInfo);
+			});
+			player.on(Mpegts$1.Events.STATISTICS_INFO, (info) => {
+				if (myGen !== gen) return;
+				emit("statistics", info);
+			});
+			player.on(Mpegts$1.Events.MEDIA_INFO, (info) => {
+				if (myGen !== gen) return;
+				emit("mediaInfo", info);
+			});
+			player.on(Mpegts$1.Events.RECOVERED_EARLY_EOF, () => {
+				if (myGen !== gen) return;
+				emit("recovered");
+			});
+			player.on(Mpegts$1.Events.LOADING_COMPLETE, () => {
+				if (myGen !== gen) return;
+				emit("ended");
 			});
 			player.load();
 			if (props.autoplay) {
 				videoRef.value.muted = props.muted;
 				const result = player.play();
 				if (result instanceof Promise) result.then(() => {
-					status.value = "playing";
-					emit("status", "playing");
+					if (myGen !== gen) return;
+					markPlaying();
 				}).catch(() => {
-					status.value = "stopped";
-					emit("status", "stopped");
+					if (myGen !== gen) return;
+					if (!props.muted && videoRef.value && player) {
+						videoRef.value.muted = true;
+						const fallbackResult = player.play();
+						if (fallbackResult instanceof Promise) fallbackResult.then(() => {
+							if (myGen !== gen) return;
+							markPlaying();
+						}).catch(() => {
+							if (myGen !== gen) return;
+							status.value = "stopped";
+							emit("status", "stopped");
+						});
+						else markPlaying();
+					} else {
+						status.value = "stopped";
+						emit("status", "stopped");
+					}
 				});
-				else {
-					status.value = "playing";
-					emit("status", "playing");
-				}
+				else markPlaying();
 			}
 		}
 		watch(() => props.url, (newUrl) => {
-			if (newUrl) createPlayer();
-			else {
-				destroyPlayer();
-				status.value = "nosignal";
-				emit("status", "nosignal");
-			}
+			if (newUrl) scheduleRecreate();
+			else destroyPlayer();
 		});
 		watch(() => props.config, () => {
-			if (props.url) createPlayer();
+			if (props.url) scheduleRecreate();
 		}, { deep: true });
 		watch(() => [
 			props.type,
@@ -177,9 +398,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			props.duration,
 			props.filesize
 		], () => {
-			if (props.url) createPlayer();
+			if (props.url) scheduleRecreate();
 		});
 		onMounted(() => {
+			ensureKeyframe();
 			if (props.url) createPlayer();
 		});
 		watch(() => props.muted, (val) => {
@@ -189,31 +411,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			destroyPlayer();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [
+			return openBlock(), createElementBlock("div", {
+				class: "mpegts-player",
+				style: containerStyle
+			}, [
 				createElementVNode("video", {
 					ref_key: "videoRef",
 					ref: videoRef,
-					class: "absolute inset-0 w-full h-full",
 					style: normalizeStyle(videoStyle.value),
 					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
 					onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
 				}, null, 36),
-				status.value === "nosignal" || !__props.url ? (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[2] || (_cache[2] = [createStaticVNode("<div class=\"mb-3 flex items-center gap-2 text-gray-400\"><svg class=\"size-10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\"><path d=\"m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M18 12 6 12M18 8 6 8M18 16l-12 0\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></div><span class=\"text-sm font-medium text-gray-400 tracking-wider uppercase\"> No Signal </span>", 2)])])) : createCommentVNode("v-if", true),
-				status.value === "connecting" ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[3] || (_cache[3] = [createElementVNode("div", { class: "flex flex-col items-center gap-3" }, [createElementVNode("div", { class: "size-8 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" }), createElementVNode("span", { class: "text-sm text-gray-300" }, "Connecting...")], -1)])])) : createCommentVNode("v-if", true),
-				status.value === "error" && __props.url ? (openBlock(), createElementBlock("div", _hoisted_4, [..._cache[4] || (_cache[4] = [createElementVNode("div", { class: "flex flex-col items-center gap-2" }, [createElementVNode("svg", {
-					class: "size-8 text-red-400",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "1.5",
-					viewBox: "0 0 24 24"
-				}, [createElementVNode("path", {
+				status.value === "nosignal" || !__props.url ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					style: noSignalOverlay
+				}, [(openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[2] || (_cache[2] = [createElementVNode("path", {
+					d: "m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, null, -1), createElementVNode("path", {
+					d: "M18 12 6 12M18 8 6 8M18 16l-12 0",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, null, -1)])])), createElementVNode("span", { style: noSignalTextStyle }, "No Signal")])) : createCommentVNode("v-if", true),
+				status.value === "connecting" && __props.showLoading ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					style: maskOverlay
+				}, [createElementVNode("div", { style: connectingInner }, [createElementVNode("div", { style: spinnerStyle }), createElementVNode("span", { style: connectingTextStyle }, "Connecting...")])])) : createCommentVNode("v-if", true),
+				status.value === "error" && __props.url ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					style: maskOverlay
+				}, [createElementVNode("div", { style: errorInner }, [(openBlock(), createElementBlock("svg", _hoisted_2, [..._cache[3] || (_cache[3] = [createElementVNode("path", {
 					d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				})]), createElementVNode("span", { class: "text-sm text-red-400" }, "Connection Failed")], -1)])])) : createCommentVNode("v-if", true)
+				}, null, -1)])])), createElementVNode("span", { style: errorTextStyle }, "Connection Failed")])])) : createCommentVNode("v-if", true)
 			]);
 		};
 	}
 });
 //#endregion
-export { _sfc_main as MpegtsPlayer };
+export { Mpegts, _sfc_main as MpegtsPlayer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mpegts-vue3",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "type": "module",
   "description": "Vue 3 component for mpegts.js video streaming player",
   "keywords": [
@@ -15,7 +15,7 @@
   "author": "",
   "repository": {
     "type": "git",
-    "url": "https://github.com/huangzida/mpegts-vue3"
+    "url": "git+https://github.com/huangzida/mpegts-vue3.git"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -37,14 +37,18 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsdown && node -e \"const fs=require('fs'),d='dist';fs.readdirSync(d).filter(f=>f.startsWith('index-')&&f.endsWith('.d.ts')).forEach(f=>fs.renameSync(d+'/'+f,d+'/index.d.ts'));fs.readdirSync(d).filter(f=>f.startsWith('index-')&&f.endsWith('.d.cts')).forEach(f=>fs.renameSync(d+'/'+f,d+'/index.d.cts'))\"",
-    "dev": "tsdown --watch"
+    "build": "tsdown && node ../../scripts/fix-dts.mjs",
+    "dev": "tsdown --watch",
+    "test": "vitest run",
+    "typecheck": "vue-tsc --noEmit"
   },
   "peerDependencies": {
     "mpegts.js": "^1.8.0",
     "vue": "^3.4.0"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vue/test-utils": "^2.4.11",
     "mpegts.js": "^1.8.0",
     "tsdown": "^0.12.0",
     "typescript": "^5.8.0",