dsh-vidi 0.7.4 → 0.7.6

package/lib/client.js

@@ -73,6 +73,198 @@ function onOpenRequest(fn) {
 /** Video links worth offering to open in the player. */
 const VIDEO_LINK = /\bhttps?:\/\/(?:www\.|m\.|live\.)?(?:youtube\.com\/(?:watch|live|shorts)|youtu\.be\/|bilibili\.com\/(?:video|bangumi)|b23\.tv\/|live\.bilibili\.com\/|twitch\.tv\/|vimeo\.com\/|x\.com\/\S+\/status|twitter\.com\/\S+\/status|douyin\.com\/|v\.douyin\.com\/|ixigua\.com\/|weibo\.com\/tv|tiktok\.com\/|kick\.com\/|xiaoyuzhoufm\.com\/episode\/)\S*|\b\S+\.m3u8\b|\brtmps?:\/\/\S+|\bsrt:\/\/\S+/i;
 
+// src/client/Pick.tsx
+/** Theme tokens copied onto the list, so it looks like the place it opened from (light page, dark player menu). */
+const TOKENS = [
+	"--bg",
+	"--l1",
+	"--l2",
+	"--ink",
+	"--muted",
+	"--faint",
+	"--line",
+	"--hover",
+	"--accent"
+];
+/**
+* A drop-down in the page's own style, in place of the browser's <select>
+* (which draws a system menu as wide as the screen allows). The list is sized
+* to its options, scrolls when long, opens upward when there is no room
+* below, and works with the keyboard (arrows, Enter, Esc, typing a letter).
+*/
+function Pick(props) {
+	const { value, options, onChange, placeholder, disabled, className, title, label } = props;
+	const [open, setOpen] = (0, react.useState)(false);
+	const [active, setActive] = (0, react.useState)(-1);
+	const [place, setPlace] = (0, react.useState)({});
+	const btn = (0, react.useRef)(null);
+	const list = (0, react.useRef)(null);
+	const chosen = options.find((o) => o.value === value);
+	const usable = options.map((o, i) => o.disabled ? -1 : i).filter((i) => i >= 0);
+	const close = (focus = true) => {
+		setOpen(false);
+		if (focus) btn.current?.focus();
+	};
+	const choose = (o) => {
+		if (o.disabled) return;
+		onChange(o.value);
+		close();
+	};
+	(0, react.useLayoutEffect)(() => {
+		if (!open || !btn.current) return;
+		const r = btn.current.getBoundingClientRect();
+		const cs = getComputedStyle(btn.current);
+		const vars = Object.fromEntries(TOKENS.map((k) => [k, cs.getPropertyValue(k).trim()]).filter(([, v]) => v));
+		const room = window.innerHeight - r.bottom - 8, above = r.top - 8;
+		const up = room < 220 && above > room;
+		const maxH = Math.max(120, Math.min(320, up ? above - 4 : room - 4));
+		const minWidth = Math.min(Math.max(r.width, 180), window.innerWidth - 16);
+		const maxWidth = Math.max(minWidth, Math.min(380, window.innerWidth - 16));
+		const side = r.left + maxWidth > window.innerWidth - 8 ? { right: Math.max(8, window.innerWidth - r.right) } : { left: Math.max(8, r.left) };
+		setPlace({
+			...vars,
+			...side,
+			minWidth,
+			maxWidth,
+			maxHeight: maxH,
+			...up ? { bottom: window.innerHeight - r.top + 4 } : { top: r.bottom + 4 },
+			fontFamily: cs.fontFamily
+		});
+		setActive(Math.max(0, options.findIndex((o) => o.value === value)));
+	}, [open]);
+	(0, react.useEffect)(() => {
+		list.current?.querySelector(`[data-i="${active}"]`)?.scrollIntoView({ block: "nearest" });
+	}, [active, open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const away = (e) => {
+			if (!list.current?.contains(e.target) && !btn.current?.contains(e.target)) close(false);
+		};
+		const gone = (e) => {
+			const t = e.target;
+			if (list.current?.contains(t)) return;
+			if (e.type === "resize" || t === document || t === document.documentElement || t instanceof Node && btn.current && t.contains(btn.current)) close(false);
+		};
+		document.addEventListener("pointerdown", away, true);
+		window.addEventListener("resize", gone);
+		window.addEventListener("scroll", gone, true);
+		return () => {
+			document.removeEventListener("pointerdown", away, true);
+			window.removeEventListener("resize", gone);
+			window.removeEventListener("scroll", gone, true);
+		};
+	}, [open]);
+	const onKey = (e) => {
+		if (disabled) return;
+		const step = (d) => {
+			const at = usable.indexOf(active);
+			setActive(usable[Math.min(usable.length - 1, Math.max(0, (at < 0 ? d > 0 ? -1 : usable.length : at) + d))] ?? -1);
+		};
+		if (!open) {
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				"Enter",
+				" "
+			].includes(e.key)) {
+				e.preventDefault();
+				setOpen(true);
+			}
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			close();
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			step(1);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			step(-1);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			setActive(usable[0] ?? -1);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			setActive(usable.at(-1) ?? -1);
+		} else if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			const o = options[active];
+			if (o) choose(o);
+		} else if (e.key === "Tab") close(false);
+		else if (e.key.length === 1) {
+			const k = e.key.toLowerCase();
+			const from = usable.indexOf(active);
+			const hit = [...usable.slice(from + 1), ...usable.slice(0, from + 1)].find((i) => options[i].label.toLowerCase().startsWith(k));
+			if (hit !== void 0) setActive(hit);
+		}
+	};
+	let lastGroup;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		ref: btn,
+		type: "button",
+		className: `dshl-select ${open ? "open" : ""} ${className ?? ""}`,
+		disabled,
+		title,
+		"aria-haspopup": "listbox",
+		"aria-expanded": open,
+		onClick: () => setOpen((v) => !v),
+		onKeyDown: onKey,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "v",
+			children: label ?? chosen?.label ?? placeholder ?? ""
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+			className: "caret",
+			"aria-hidden": "true"
+		})]
+	}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: list,
+		className: "dshl-options",
+		role: "listbox",
+		style: place,
+		onKeyDown: onKey,
+		children: options.map((o, i) => {
+			const head = o.group && o.group !== lastGroup ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "grp",
+				children: o.group
+			}, `g:${o.group}`) : null;
+			lastGroup = o.group;
+			return [head, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-i": i,
+				role: "option",
+				"aria-selected": o.value === value,
+				"aria-disabled": o.disabled || void 0,
+				className: `opt ${o.value === value ? "on" : ""} ${i === active ? "act" : ""} ${o.disabled ? "off" : ""}`,
+				onPointerEnter: () => !o.disabled && setActive(i),
+				onClick: () => choose(o),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "l",
+						children: o.label
+					}),
+					o.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "h",
+						children: o.hint
+					}),
+					o.value === value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						className: "ok",
+						viewBox: "0 0 24 24",
+						width: "14",
+						height: "14",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2.4",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
+					})
+				]
+			}, o.value)];
+		})
+	}), document.fullscreenElement ?? document.body)] });
+}
+
 // src/client/icons.tsx
 /** Minimal stroke icons (24×24, currentColor). */
 const P = {
@@ -793,198 +985,6 @@ function langLabel(code, ui, fallback) {
 	return NAMES[code]?.[ui] ?? fallback ?? code;
 }
 
-// src/client/Pick.tsx
-/** Theme tokens copied onto the list, so it looks like the place it opened from (light page, dark player menu). */
-const TOKENS = [
-	"--bg",
-	"--l1",
-	"--l2",
-	"--ink",
-	"--muted",
-	"--faint",
-	"--line",
-	"--hover",
-	"--accent"
-];
-/**
-* A drop-down in the page's own style, in place of the browser's <select>
-* (which draws a system menu as wide as the screen allows). The list is sized
-* to its options, scrolls when long, opens upward when there is no room
-* below, and works with the keyboard (arrows, Enter, Esc, typing a letter).
-*/
-function Pick(props) {
-	const { value, options, onChange, placeholder, disabled, className, title, label } = props;
-	const [open, setOpen] = (0, react.useState)(false);
-	const [active, setActive] = (0, react.useState)(-1);
-	const [place, setPlace] = (0, react.useState)({});
-	const btn = (0, react.useRef)(null);
-	const list = (0, react.useRef)(null);
-	const chosen = options.find((o) => o.value === value);
-	const usable = options.map((o, i) => o.disabled ? -1 : i).filter((i) => i >= 0);
-	const close = (focus = true) => {
-		setOpen(false);
-		if (focus) btn.current?.focus();
-	};
-	const choose = (o) => {
-		if (o.disabled) return;
-		onChange(o.value);
-		close();
-	};
-	(0, react.useLayoutEffect)(() => {
-		if (!open || !btn.current) return;
-		const r = btn.current.getBoundingClientRect();
-		const cs = getComputedStyle(btn.current);
-		const vars = Object.fromEntries(TOKENS.map((k) => [k, cs.getPropertyValue(k).trim()]).filter(([, v]) => v));
-		const room = window.innerHeight - r.bottom - 8, above = r.top - 8;
-		const up = room < 220 && above > room;
-		const maxH = Math.max(120, Math.min(320, up ? above - 4 : room - 4));
-		const minWidth = Math.min(Math.max(r.width, 180), window.innerWidth - 16);
-		const maxWidth = Math.max(minWidth, Math.min(380, window.innerWidth - 16));
-		const side = r.left + maxWidth > window.innerWidth - 8 ? { right: Math.max(8, window.innerWidth - r.right) } : { left: Math.max(8, r.left) };
-		setPlace({
-			...vars,
-			...side,
-			minWidth,
-			maxWidth,
-			maxHeight: maxH,
-			...up ? { bottom: window.innerHeight - r.top + 4 } : { top: r.bottom + 4 },
-			fontFamily: cs.fontFamily
-		});
-		setActive(Math.max(0, options.findIndex((o) => o.value === value)));
-	}, [open]);
-	(0, react.useEffect)(() => {
-		list.current?.querySelector(`[data-i="${active}"]`)?.scrollIntoView({ block: "nearest" });
-	}, [active, open]);
-	(0, react.useEffect)(() => {
-		if (!open) return;
-		const away = (e) => {
-			if (!list.current?.contains(e.target) && !btn.current?.contains(e.target)) close(false);
-		};
-		const gone = (e) => {
-			const t = e.target;
-			if (list.current?.contains(t)) return;
-			if (e.type === "resize" || t === document || t === document.documentElement || t instanceof Node && btn.current && t.contains(btn.current)) close(false);
-		};
-		document.addEventListener("pointerdown", away, true);
-		window.addEventListener("resize", gone);
-		window.addEventListener("scroll", gone, true);
-		return () => {
-			document.removeEventListener("pointerdown", away, true);
-			window.removeEventListener("resize", gone);
-			window.removeEventListener("scroll", gone, true);
-		};
-	}, [open]);
-	const onKey = (e) => {
-		if (disabled) return;
-		const step = (d) => {
-			const at = usable.indexOf(active);
-			setActive(usable[Math.min(usable.length - 1, Math.max(0, (at < 0 ? d > 0 ? -1 : usable.length : at) + d))] ?? -1);
-		};
-		if (!open) {
-			if ([
-				"ArrowDown",
-				"ArrowUp",
-				"Enter",
-				" "
-			].includes(e.key)) {
-				e.preventDefault();
-				setOpen(true);
-			}
-			return;
-		}
-		if (e.key === "Escape") {
-			e.preventDefault();
-			e.stopPropagation();
-			close();
-		} else if (e.key === "ArrowDown") {
-			e.preventDefault();
-			step(1);
-		} else if (e.key === "ArrowUp") {
-			e.preventDefault();
-			step(-1);
-		} else if (e.key === "Home") {
-			e.preventDefault();
-			setActive(usable[0] ?? -1);
-		} else if (e.key === "End") {
-			e.preventDefault();
-			setActive(usable.at(-1) ?? -1);
-		} else if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			const o = options[active];
-			if (o) choose(o);
-		} else if (e.key === "Tab") close(false);
-		else if (e.key.length === 1) {
-			const k = e.key.toLowerCase();
-			const from = usable.indexOf(active);
-			const hit = [...usable.slice(from + 1), ...usable.slice(0, from + 1)].find((i) => options[i].label.toLowerCase().startsWith(k));
-			if (hit !== void 0) setActive(hit);
-		}
-	};
-	let lastGroup;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		ref: btn,
-		type: "button",
-		className: `dshl-select ${open ? "open" : ""} ${className ?? ""}`,
-		disabled,
-		title,
-		"aria-haspopup": "listbox",
-		"aria-expanded": open,
-		onClick: () => setOpen((v) => !v),
-		onKeyDown: onKey,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "v",
-			children: label ?? chosen?.label ?? placeholder ?? ""
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-			className: "caret",
-			"aria-hidden": "true"
-		})]
-	}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: list,
-		className: "dshl-options",
-		role: "listbox",
-		style: place,
-		onKeyDown: onKey,
-		children: options.map((o, i) => {
-			const head = o.group && o.group !== lastGroup ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "grp",
-				children: o.group
-			}, `g:${o.group}`) : null;
-			lastGroup = o.group;
-			return [head, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-i": i,
-				role: "option",
-				"aria-selected": o.value === value,
-				"aria-disabled": o.disabled || void 0,
-				className: `opt ${o.value === value ? "on" : ""} ${i === active ? "act" : ""} ${o.disabled ? "off" : ""}`,
-				onPointerEnter: () => !o.disabled && setActive(i),
-				onClick: () => choose(o),
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "l",
-						children: o.label
-					}),
-					o.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "h",
-						children: o.hint
-					}),
-					o.value === value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-						className: "ok",
-						viewBox: "0 0 24 24",
-						width: "14",
-						height: "14",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "2.4",
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
-					})
-				]
-			}, o.value)];
-		})
-	}), document.fullscreenElement ?? document.body)] });
-}
-
 // src/client/LineChips.tsx
 const MAX_TRANSLATIONS = 4;
 /**
@@ -35187,7 +35187,79 @@ function upload(file, onProgress) {
 		xhr.send(file);
 	});
 }
-/** A value to copy: plain text (not an input look-alike) and a text button. */
+/** Subtitle a camera (or the screen) and a microphone on this computer directly: pick both, press start. */
+function DeviceCard({ t, onStart }) {
+	const [devices, setDevices] = (0, react.useState)(null);
+	const [video, setVideoRaw] = (0, react.useState)(() => store.get("device.video", ""));
+	const [audio, setAudioRaw] = (0, react.useState)(() => store.get("device.audio", ""));
+	const setVideo = (v) => {
+		setVideoRaw(v);
+		store.set("device.video", v);
+	};
+	const setAudio = (v) => {
+		setAudioRaw(v);
+		store.set("device.audio", v);
+	};
+	(0, react.useEffect)(() => {
+		fetch("/live/api/devices").then((r) => r.json()).then((d) => setDevices(d.devices ?? [])).catch(() => setDevices([]));
+	}, []);
+	if (!devices) return null;
+	const cams = devices.filter((d) => d.kind !== "mic"), mics = devices.filter((d) => d.kind === "mic");
+	if (!mics.length) return null;
+	const v = video === "none" || cams.some((d) => d.id === video) ? video : cams.find((d) => d.kind === "camera")?.id ?? "none";
+	const a = mics.some((d) => d.id === audio) ? audio : mics[0].id;
+	const videoOptions = [...cams.map((d) => ({
+		value: d.id,
+		label: d.kind === "screen" ? d.name.replace(/^Screen (\d+)$/, (_, n) => t("dev.screen").replace("{n}", String(Number(n) + 1))) : d.name,
+		group: t(d.kind === "screen" ? "dev.screens" : "dev.cameras")
+	})), {
+		value: "none",
+		label: t("dev.noVideo"),
+		group: t("dev.other")
+	}];
+	const title = v === "none" ? mics.find((d) => d.id === a)?.name ?? "" : videoOptions.find((o) => o.value === v)?.label ?? "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dshl-pushinfo dshl-devices",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "title",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.camera, {}),
+					" ",
+					t("dev.title"),
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("dev.hint") })
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("dev.video") }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+					value: v,
+					options: videoOptions,
+					onChange: setVideo
+				}) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("dev.audio") }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+					value: a,
+					options: mics.map((d) => ({
+						value: d.id,
+						label: d.name
+					})),
+					onChange: setAudio
+				}) })
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: "dshl-btn primary",
+				onClick: () => onStart({
+					video: v === "none" ? void 0 : v,
+					audio: a,
+					title
+				}),
+				children: t("dev.start")
+			})
+		]
+	});
+}
 /** The push stream key: copy it, or change it (typed, or a new random one). */
 function KeyRow({ value, t, onChanged }) {
 	const [edit, setEdit] = (0, react.useState)(null);
@@ -35517,7 +35589,7 @@ function LiveView(props) {
 			url: target
 		} : classify(target);
 		if (!c) return;
-		if (props.onNewVideo && job && job.source !== "push" && job.url !== c.url && c.source !== "push" && await props.onNewVideo(target)) return;
+		if (props.onNewVideo && job && job.source !== "push" && job.url !== c.url && c.source !== "push" && c.source !== "device" && await props.onNewVideo(target)) return;
 		try {
 			const j = await post("start", {
 				...options(),
@@ -35577,24 +35649,26 @@ function LiveView(props) {
 		props.onTitle(job.title);
 	}, [job?.id, job?.title]);
 	const rateLog = (0, react.useRef)([]);
-	const [rate, setRate] = (0, react.useState)(null);
+	const [behindRec, setBehindRec] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
-		if (!job || job.vod || job.status !== "running" || subs.state !== "running") {
+		if (!job || job.vod || job.status !== "running" || subs.state !== "running" || job.recorded === void 0) {
 			rateLog.current = [];
-			setRate(null);
+			setBehindRec(null);
 			return;
 		}
 		const log = rateLog.current;
+		const gap = Math.max(0, job.recorded - subs.at);
 		log.push({
 			wall: Date.now(),
-			at: subs.at
+			gap
 		});
 		while (log.length > 2 && log[0].wall < Date.now() - 12e4) log.shift();
-		const first = log[0], last = log.at(-1);
-		setRate(last.wall - first.wall > 45e3 ? (last.at - first.at) / ((last.wall - first.wall) / 1e3) : null);
+		const first = log[0];
+		setBehindRec(Date.now() - first.wall > 45e3 && gap > 20 && gap - first.gap > 8 ? gap : null);
 	}, [
 		subs.at,
 		subs.state,
+		job?.recorded,
 		job?.status,
 		job?.id
 	]);
@@ -35839,6 +35913,10 @@ function LiveView(props) {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: t("empty.title") }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("empty.body") }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceCard, {
+				t,
+				onStart: (c) => void start(JSON.stringify(c), "device")
+			}),
 			armed?.rtmp && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dshl-pushinfo",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -36055,11 +36133,11 @@ function LiveView(props) {
 			onTerms: setTerms
 		})
 	] });
-	const slow = !!job && job.status === "running" && !job.vod && rate !== null && rate < .95;
+	const slow = !!job && job.status === "running" && !job.vod && behindRec !== null;
 	const engineNow = providers.find((x) => x.id === usableEngine());
 	const liveNote = slow ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "dshl-lag warn",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(engineNow && !engineNow.online ? "lag.slowLocal" : "lag.slow").replace("{x}", rate.toFixed(2)) }), engineNow && !engineNow.online && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(engineNow && !engineNow.online ? "lag.slowLocal" : "lag.slow").replace("{s}", String(Math.round(behindRec))) }), engineNow && !engineNow.online && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			className: "dshl-link",
 			onClick: () => setSettingsOpen(true),
 			children: t("lag.settings")
@@ -36528,6 +36606,10 @@ function SubsStarter(props) {
 	});
 }
 const fmtTokens = (n, ui) => ui === "zh" && n >= 1e4 ? `${(n / 1e4).toFixed(n >= 1e5 ? 0 : 1)}万` : n >= 1e3 ? `${(n / 1e3).toFixed(n >= 1e5 ? 0 : 1)}k` : String(n);
+/** Engines billed by the minute of audio (no token counts come back): US$ per minute, from the provider's price list. */
+const PER_MINUTE = { "openai-translate": .034 };
+const audioCost = (audio) => audio.reduce((sum, [k, v]) => sum + (PER_MINUTE[k] ?? 0) * v / 60, 0);
+const usd = (v) => `$${v.toFixed(2)}`;
 /** Total tokens for this video; hover or click for per-model input / output / cache. */
 function UsagePill({ usage, t, ui }) {
 	const [open, setOpen] = (0, react.useState)(false);
@@ -36542,7 +36624,7 @@ function UsagePill({ usage, t, ui }) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			className: "dshl-pill",
 			onClick: () => setOpen((v) => !v),
-			children: t("usage.tokens").replace("{n}", n(total))
+			children: [total ? t("usage.tokens").replace("{n}", n(total)) : "", audioCost(audio) >= .01 ? usd(audioCost(audio)) : ""].filter(Boolean).join(" · ")
 		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "dshl-pop right up usage",
 			children: [
@@ -36569,10 +36651,21 @@ function UsagePill({ usage, t, ui }) {
 					className: "dshl-muted",
 					children: t("usage.none")
 				}),
-				audio.map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "dshl-muted small",
-					children: t("usage.audio").replace("{s}", engineLabel(t, k)).replace("{t}", CLOCK(v))
-				}, k))
+				audio.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+					className: "audio",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("usage.byAudio") }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("usage.duration") }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", { children: t("usage.cost") })
+					] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: audio.map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: engineLabel(t, k) }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { children: CLOCK(v) }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+							title: PER_MINUTE[k] ? t("usage.rate").replace("{p}", String(PER_MINUTE[k])) : void 0,
+							children: PER_MINUTE[k] ? "≈ " + usd(PER_MINUTE[k] * v / 60) : "—"
+						})
+					] }, k)) })]
+				})
 			]
 		})]
 	});
@@ -37012,7 +37105,10 @@ const en = {
 	"usage.cache": "Cache",
 	"usage.calls": "Calls",
 	"usage.reasoning": "incl. {n} thinking",
-	"usage.audio": "Recognised by {s}: {t}",
+	"usage.byAudio": "Billed by audio time",
+	"usage.duration": "Audio",
+	"usage.cost": "Cost",
+	"usage.rate": "US${p} per minute of audio (estimate from the price list)",
 	"usage.none": "Nothing used yet",
 	"set.mode": "Mode",
 	"st.loading": "Loading",
@@ -37039,8 +37135,8 @@ const en = {
 	"hold.polished": "Waiting for polished subtitles…",
 	"hold.skip": "Don’t wait",
 	"hold.behind": "(subtitles run {s}s behind the sound)",
-	"lag.slow": "Transcription runs slower than the stream ({x}×), so subtitles fall further behind.",
-	"lag.slowLocal": "This computer transcribes slower than the stream ({x}×), so subtitles fall further behind. An online service keeps up.",
+	"lag.slow": "Subtitles are {s} s behind the stream and falling further behind.",
+	"lag.slowLocal": "Subtitles are {s} s behind the stream and falling further behind: this computer transcribes too slowly. An online service keeps up.",
 	"lag.settings": "Choose one",
 	"in.uploading": "Uploading {p}%",
 	"in.drop": "Drop to start",
@@ -37058,6 +37154,16 @@ const en = {
 	"note.noModel": "No model set up, so subtitles stay in the original language.",
 	"note.install": "Install first:",
 	"push.title": "Stream here from OBS",
+	"dev.title": "Use a camera on this computer",
+	"dev.hint": "Subtitles as you speak",
+	"dev.video": "Picture",
+	"dev.audio": "Microphone",
+	"dev.cameras": "Cameras",
+	"dev.screens": "Screen",
+	"dev.screen": "Screen {n}",
+	"dev.other": "Other",
+	"dev.noVideo": "Sound only",
+	"dev.start": "Start",
 	"push.hint": "Service: Custom",
 	"push.copy": "Copy",
 	"push.copied": "Copied",
@@ -37400,7 +37506,10 @@ const zh = {
 	"usage.cache": "缓存",
 	"usage.calls": "次数",
 	"usage.reasoning": "含思考 {n}",
-	"usage.audio": "{s} 识别 {t}",
+	"usage.byAudio": "按音频时长计费",
+	"usage.duration": "时长",
+	"usage.cost": "费用",
+	"usage.rate": "按每分钟音频 {p} 美元估算（官方价目）",
 	"usage.none": "还没有用量",
 	"set.mode": "模式",
 	"st.loading": "加载中",
@@ -37427,8 +37536,8 @@ const zh = {
 	"hold.polished": "等精修字幕…",
 	"hold.skip": "不等了",
 	"hold.behind": "（字幕比声音晚 {s} 秒）",
-	"lag.slow": "转写比直播慢（{x} 倍速），字幕会越落越远。",
-	"lag.slowLocal": "本机转写比直播慢（{x} 倍速），字幕会越落越远。换成在线转写就能跟上。",
+	"lag.slow": "字幕比直播晚了 {s} 秒，还在越拉越远。",
+	"lag.slowLocal": "字幕比直播晚了 {s} 秒，还在越拉越远：本机转写太慢。换成在线转写就能跟上。",
 	"lag.settings": "去选一个",
 	"in.uploading": "上传中 {p}%",
 	"in.drop": "松手开始",
@@ -37446,6 +37555,16 @@ const zh = {
 	"note.noModel": "还没配置模型，字幕只显示原文",
 	"note.install": "需要先安装：",
 	"push.title": "用 OBS 推流到这里",
+	"dev.title": "用这台电脑的摄像头",
+	"dev.hint": "边说边出字幕",
+	"dev.video": "画面",
+	"dev.audio": "麦克风",
+	"dev.cameras": "摄像头",
+	"dev.screens": "屏幕",
+	"dev.screen": "屏幕 {n}",
+	"dev.other": "其他",
+	"dev.noVideo": "只要声音",
+	"dev.start": "开始",
 	"push.hint": "服务选「自定义」",
 	"push.copy": "复制",
 	"push.copied": "已复制",
@@ -37848,6 +37967,10 @@ const CSS = `
 .dshl-pushinfo dd .err { flex-basis: 100%; color: #d1434b; font-size: 12px; }
 .dshl-pushinfo .val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; user-select: all; }
 .dshl-pushinfo .dshl-link { flex: none; font-size: 12.5px; }
+.dshl-devices { display: grid; width: fit-content; max-width: 100%; margin: 32px auto 0; }
+.dshl-devices + .dshl-pushinfo { margin-top: 12px; }
+.dshl-devices dd .dshl-select { width: 240px; max-width: 100%; height: 30px; }
+.dshl-devices > .dshl-btn { justify-self: end; height: 32px; padding: 0 18px; border-radius: 8px; font-size: 13px; }
 
 /* ── Layout ── */
 .dshl-main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 400px); align-items: start; gap: 18px; padding: 18px 20px 28px; }
@@ -38303,6 +38426,8 @@ body > .dshl-menu { z-index: 2147483002; }
 .dshl-pop.usage td { padding: 4px 0 4px 10px; border-top: 1px solid var(--line-soft); text-align: right; }
 .dshl-pop.usage th:first-child, .dshl-pop.usage td:first-child { max-width: 140px; padding-left: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
 .dshl-pop.usage p { margin: 8px 0 0; }
+.dshl-pop.usage table + table { margin-top: 12px; }
+.dshl-pop.usage table.audio td:first-child { max-width: 180px; }
 @media (max-width: 600px) { .dshl-pop.settings.right { position: fixed; top: 58px; left: 12px; right: 12px; width: auto; max-width: none; } }
 
 /* ── Login dialog ── */

package/lib/index.mjs

@@ -1793,6 +1793,144 @@ var Restream = class extends EventEmitter {
 		this.changed();
 	}
 };
+// src/devices.ts
+function ffmpegList(args) {
+	return new Promise((resolve) => {
+		execFile("ffmpeg", ["-hide_banner", ...args], { timeout: 8e3 }, (_err, _out, err) => resolve(String(err ?? "")));
+	});
+}
+async function listDevices() {
+	if (process.platform === "darwin") {
+		const text = await ffmpegList([
+			"-f",
+			"avfoundation",
+			"-list_devices",
+			"true",
+			"-i",
+			""
+		]);
+		const out = [];
+		let section;
+		for (const line of text.split("\n")) {
+			if (/video devices:/i.test(line)) section = "video";
+			else if (/audio devices:/i.test(line)) section = "audio";
+			const m = /\]\s+\[(\d+)\]\s+(.+?)\s*$/.exec(line);
+			if (!m || !section) continue;
+			const [, index, name] = m;
+			const id = name.includes(":") ? index : name;
+			if (section === "audio") out.push({
+				id,
+				name,
+				kind: "mic"
+			});
+			else out.push({
+				id,
+				name: name.replace(/^Capture screen (\d+)$/, "Screen $1"),
+				kind: /^Capture screen/.test(name) ? "screen" : "camera"
+			});
+		}
+		return out.filter((d) => !(d.kind === "mic" && /speakers|audio device|blackhole|soundflower|loopback/i.test(d.name)));
+	}
+	if (process.platform === "win32") {
+		const text = await ffmpegList([
+			"-list_devices",
+			"true",
+			"-f",
+			"dshow",
+			"-i",
+			"dummy"
+		]);
+		const out = [];
+		let section;
+		for (const line of text.split("\n")) {
+			if (/DirectShow video devices/i.test(line)) section = "video";
+			else if (/DirectShow audio devices/i.test(line)) section = "audio";
+			if (/Alternative name/i.test(line)) continue;
+			const m = /"([^"]+)"\s*(?:\((video|audio)\))?/.exec(line);
+			if (!m) continue;
+			const kind = m[2] ?? section;
+			if (kind) out.push({
+				id: m[1],
+				name: m[1],
+				kind: kind === "audio" ? "mic" : "camera"
+			});
+		}
+		return out;
+	}
+	return [...(existsSync("/dev") ? readdirSync("/dev").filter((f) => /^video\d+$/.test(f)) : []).map((f) => {
+		let name = f;
+		try {
+			name = readFileSync(`/sys/class/video4linux/${f}/name`, "utf8").trim() || f;
+		} catch {}
+		return {
+			id: `/dev/${f}`,
+			name,
+			kind: "camera"
+		};
+	}), {
+		id: "default",
+		name: "Default microphone",
+		kind: "mic"
+	}];
+}
+/** ffmpeg input for the chosen devices: arguments plus which streams carry the picture and the sound. */
+function deviceInput(c, q) {
+	if (!c.audio) throw new Error("choose a microphone");
+	if (process.platform === "darwin") return {
+		args: [
+			...q,
+			"-f",
+			"avfoundation",
+			"-framerate",
+			"30",
+			...c.video ? ["-capture_cursor", "1"] : [],
+			"-i",
+			`${c.video ?? "none"}:${c.audio}`
+		],
+		audio: "0:a:0",
+		video: c.video ? "0:v:0" : void 0
+	};
+	if (process.platform === "win32") return {
+		args: [
+			...q,
+			"-f",
+			"dshow",
+			"-rtbufsize",
+			"256M",
+			"-i",
+			[c.video ? `video=${c.video}` : "", `audio=${c.audio}`].filter(Boolean).join(":")
+		],
+		audio: "0:a:0",
+		video: c.video ? "0:v:0" : void 0
+	};
+	return c.video ? {
+		args: [
+			...q,
+			"-f",
+			"v4l2",
+			"-framerate",
+			"30",
+			"-i",
+			c.video,
+			...q,
+			"-f",
+			"pulse",
+			"-i",
+			c.audio
+		],
+		audio: "1:a:0",
+		video: "0:v:0"
+	} : {
+		args: [
+			...q,
+			"-f",
+			"pulse",
+			"-i",
+			c.audio
+		],
+		audio: "0:a:0"
+	};
+}
 // src/job.ts
 const run$1 = promisify(execFile);
 /** URLs ffmpeg can open directly (no yt-dlp resolution). */
@@ -1902,6 +2040,7 @@ var LiveJob = class LiveJob extends EventEmitter {
 			ingest: this.ingest,
 			vod: this.vod,
 			duration: this.duration,
+			recorded: this.vod ? void 0 : this.recordedSec(),
 			loginBrowser: this.loginBrowser,
 			needsLogin: this.needsLogin,
 			hls: this.hlsName,
@@ -2054,6 +2193,14 @@ var LiveJob = class LiveJob extends EventEmitter {
 				vcodec: p.vcodec
 			};
 		}
+		if (source === "device") {
+			const c = JSON.parse(url);
+			this.title = c.title || "Camera";
+			return {
+				...deviceInput(c, q),
+				vcodec: "rawvideo"
+			};
+		}
 		if (source === "push") {
 			const key = this.deps.ingest.key ?? this.id.slice(-4);
 			const { host, rtmpPort, srtPort } = this.deps.ingest;
@@ -2200,6 +2347,8 @@ var LiveJob = class LiveJob extends EventEmitter {
 				"23",
 				"-vf",
 				"scale=-2:min(720\\,ih)",
+				"-pix_fmt",
+				"yuv420p",
 				"-g",
 				"50"
 			]
@@ -2317,6 +2466,21 @@ var LiveJob = class LiveJob extends EventEmitter {
 	get m3u8() {
 		return join(this.deps.dir, this.hlsName, "index.m3u8");
 	}
+	/** Seconds recorded so far (live), from the playlist; re-read at most once a second. */
+	recCache = {
+		at: 0,
+		sec: 0
+	};
+	recordedSec() {
+		if (Date.now() - this.recCache.at > 1e3) {
+			const last = this.segments().at(-1);
+			this.recCache = {
+				at: Date.now(),
+				sec: last ? last.start + last.dur : 0
+			};
+		}
+		return this.recCache.sec;
+	}
 	/** Recorded segments so far: start time on the playback timeline and duration. */
 	segments() {
 		if (!existsSync(this.m3u8)) return [];
@@ -6106,7 +6270,7 @@ function apply(ctx, config) {
 					provider: typeof b.provider === "string" ? b.provider : "local",
 					mode: modeOf(b.mode)
 				} });
-				const source = b.source === "push" || b.source === "file" ? b.source : "url";
+				const source = b.source === "push" || b.source === "file" || b.source === "device" ? b.source : "url";
 				await disarm();
 				const raw = b.url.trim();
 				return send(res, 200, (await startJob({
@@ -6219,6 +6383,10 @@ function apply(ctx, config) {
 				}
 				return send(res, 200, job.summary());
 			}
+			if (route === "devices") return send(res, 200, {
+				devices: await listDevices(),
+				platform: process.platform
+			});
 			if (route === "pushkey" && req.method === "POST") {
 				if ([...jobs.values()].some((j) => j.opts.source === "push" && j.status === "running" && !j.message)) return send(res, 409, { error: "a stream is coming in; change the key after it ends" });
 				const b = await readJson(req);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vidi",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description": "A video tool for DeepSeek Harness: watch live streams, videos and podcasts with real-time subtitles in any language, then clip and download",
   "type": "module",
   "license": "PolyForm-Noncommercial-1.0.0",