dsh-vidi 0.6.2 → 0.7.1

package/lib/client.js

@@ -33589,7 +33589,7 @@ const fmt = (s) => {
 * stage, so subtitles (sized in container units) and menus come along.
 */
 const Player = (0, react.forwardRef)(function Player(props, ref) {
-	const { src, live, vod, duration, subsAt, waitingText, cues, siteCues, spoken, style, delay, onDelay, showDelay, theater, onTheater, onTime, action, menus = [], onSnapshot, onClip, onThumb, quality, t } = props;
+	const { trail, src, live, vod, duration, subsAt, waitingText, cues, siteCues, spoken, style, delay, onDelay, showDelay, theater, onTheater, onTime, action, menus = [], onSnapshot, onClip, onThumb, quality, t } = props;
 	const stage = (0, react.useRef)(null);
 	const video = (0, react.useRef)(null);
 	const hls = (0, react.useRef)(null);
@@ -33858,7 +33858,7 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 	const total = vod ? Math.max(duration ?? 0, edge) : edge;
 	const behind = Math.max(0, edge - now);
 	const atLive = behind < delay + 10;
-	const current = cues.filter((c) => c.start - .2 <= now && now <= c.end + 1.2).at(-1);
+	const current = cues.filter((c) => c.start - .2 <= now && now <= c.end + 1.2).at(-1) ?? (trail ? cues.filter((c) => c.start <= now && c.end > now - 8).at(-1) : void 0);
 	const texts = {};
 	if (ccOn) {
 		if (current) {
@@ -34066,10 +34066,21 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 				]
 			}),
 			openMenu && (() => {
+				const phone = narrow && window.innerWidth < 700 && !full && !pageFull;
+				const floating = narrow && !phone && !full && !pageFull;
+				const r = floating ? stage.current?.getBoundingClientRect() : void 0;
+				const place = r ? {
+					position: "fixed",
+					right: Math.max(8, window.innerWidth - r.right + 8),
+					bottom: Math.max(8, window.innerHeight - r.bottom + 56),
+					width: Math.min(360, window.innerWidth - 16),
+					maxHeight: Math.max(240, r.bottom - 56 - 12)
+				} : void 0;
 				const panel = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: `dshl-menu ${narrow ? "sheet" : ""}`,
+					className: `dshl-menu ${phone ? "sheet" : ""}`,
 					role: "dialog",
 					"aria-label": openMenu.title,
+					style: place,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "head",
 						children: [
@@ -34094,13 +34105,13 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 						children: openMenu.content
 					})]
 				});
-				return narrow && !full && !pageFull ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				return phone ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "dshl-sheetwrap",
 					onMouseDown: (e) => {
 						if (e.target === e.currentTarget) setMenu(null);
 					},
 					children: panel
-				}), document.body) : panel;
+				}), document.body) : floating ? (0, react_dom.createPortal)(panel, document.body) : panel;
 			})(),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dshl-controls",
@@ -34325,7 +34336,8 @@ function RestreamPanel(props) {
 			if (!list.length) setEditing({
 				platform: "bilibili",
 				server: "",
-				key: ""
+				key: "",
+				content: "burn"
 			});
 		}).catch(() => {});
 	}, []);
@@ -34438,6 +34450,28 @@ function RestreamPanel(props) {
 					className: "rs-hint",
 					children: t(`rs.h.${editing.platform}`)
 				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "rs-field",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("rs.content") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+						value: editing.content,
+						onChange: (v) => setEditing({
+							...editing,
+							content: v
+						}),
+						options: [
+							"burn",
+							"clean",
+							"subs"
+						].map((c) => ({
+							value: c,
+							label: t(`rs.c.${c}`)
+						}))
+					})]
+				}),
+				editing.content === "subs" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "rs-hint",
+					children: t("rs.c.subs.d")
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 					className: "rs-field",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("rs.server") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -34498,7 +34532,8 @@ function RestreamPanel(props) {
 					onClick: () => setEditing({
 						platform: "bilibili",
 						server: "",
-						key: ""
+						key: "",
+						content: "burn"
 					}),
 					children: ["+ ", t("rs.add")]
 				})]
@@ -34518,7 +34553,11 @@ function RestreamPanel(props) {
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: "rs-name",
-								children: [pname(x.platform), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: host(x.server) })]
+								children: [pname(x.platform), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("small", { children: [
+									host(x.server),
+									" · ",
+									t(`rs.c.${x.content ?? "burn"}`)
+								] })]
 							}),
 							running ? st ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: `rs-state ${st.state}`,
@@ -34537,7 +34576,8 @@ function RestreamPanel(props) {
 										id: x.id,
 										platform: x.platform,
 										server: x.server,
-										key: ""
+										key: "",
+										content: x.content ?? "burn"
 									}),
 									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.pencil, {})
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -34561,23 +34601,16 @@ function RestreamPanel(props) {
 				className: "rs-err",
 				children: status.targets.filter((x) => x.message && x.state !== "live").map((x) => `${pname(x.platform)}：${x.message}`).join("；")
 			}),
-			!running && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			!running && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "rs-opts",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-					className: "rs-check",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						type: "checkbox",
-						checked: burn,
-						onChange: (e) => setBurn(e.target.checked)
-					}), t("rs.burn")]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "seg",
 					children: [720, 1080].map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						className: height === h ? "on" : "",
 						onClick: () => setHeight(h),
 						children: [h, "p"]
 					}, h))
-				})]
+				})
 			}),
 			status?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "rs-hint",
@@ -34601,9 +34634,54 @@ function RestreamPanel(props) {
 			!running && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "rs-hint",
 				children: t("rs.note")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverlayLink, { t })
+		]
+	});
+}
+/** Subtitle pages: the overlay for OBS's Browser Source, and the big screen of subtitles only. */
+function OverlayLink({ t }) {
+	const [urls, setUrls] = (0, react.useState)({});
+	const [copied, setCopied] = (0, react.useState)("");
+	(0, react.useEffect)(() => {
+		fetch("/live/api/overlay").then((r) => r.json()).then(setUrls).catch(() => {});
+	}, []);
+	if (!urls.url) return null;
+	const row = (label, url, note, open) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "rs-overlay",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "rs-sub",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "rs-url",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: url }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "dshl-link",
+						onClick: () => void navigator.clipboard.writeText(url).then(() => {
+							setCopied(url);
+							setTimeout(() => setCopied(""), 1500);
+						}),
+						children: copied === url ? t("tr.copied") : t("rs.copy")
+					}),
+					open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+						className: "dshl-link",
+						href: url,
+						target: "_blank",
+						rel: "noreferrer",
+						children: t("rs.openPage")
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "rs-hint",
+				children: note
 			})
 		]
 	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [row(t("rs.overlay"), urls.url, t("rs.overlay.d")), urls.screen && row(t("rs.screen"), urls.screenLan ?? urls.screen, t("rs.screen.d").replace("{local}", urls.screen), true)] });
 }
 
 // src/client/Settings.tsx
@@ -34972,7 +35050,7 @@ function Settings(props) {
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("set.mode") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "dshl-seg",
 							children: [
-								"site",
+								"live",
 								"realtime",
 								"polished"
 							].map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -35125,7 +35203,10 @@ function LiveView(props) {
 		setLinesRaw(l);
 		store.set("lines", l);
 	};
-	const [mode, setModeRaw] = (0, react.useState)(() => store.get("mode", "polished"));
+	const [mode, setModeRaw] = (0, react.useState)(() => {
+		const m = store.get("mode", "polished");
+		return m === "site" ? "live" : m;
+	});
 	const setMode = (m) => {
 		setModeRaw(m);
 		store.set("mode", m);
@@ -35178,13 +35259,12 @@ function LiveView(props) {
 		t,
 		ui
 	]);
-	const siteBest = (0, react.useMemo)(() => {
+	(0, react.useMemo)(() => {
 		const list = job?.site ?? [];
 		const base = (l) => l.replace(/-orig$/, "").split("-")[0];
 		return (list.find((x) => !x.auto && base(x.lang) === ui) ?? list.find((x) => !x.auto) ?? list.find((x) => base(x.lang) === ui) ?? list[0])?.key;
 	}, [job?.site, ui]);
-	const siteOnly = mode === "site" && !!job;
-	const screenLines = siteOnly && siteBest ? lines.some((l) => l.startsWith("site:")) ? lines.filter((l) => l.startsWith("site:")) : [siteBest] : lines;
+	const screenLines = lines;
 	const shownLines = lines;
 	/** The chosen recognition, or — when it can't run here (no key, not installed) — the first one that can. */
 	const usableEngine = () => {
@@ -35354,13 +35434,17 @@ function LiveView(props) {
 	(0, react.useEffect)(() => {
 		const p = player.current;
 		if (!p) return;
-		const waiting = !!job && job.status === "running" && !job.vod && mode !== "site" && subs.state === "running" && !noWait;
-		const ready = mode === "polished" ? Math.max(lastPolished, subs.at - 150) : subs.at;
-		if (waiting && now > ready + .5) p.hold(t(mode === "polished" ? "hold.polished" : "hold.realtime"), () => setNoWait(true));
+		const waiting = !!job && job.status === "running" && !job.vod && mode !== "live" && subs.state === "running" && !noWait;
+		const firstPass = subs.ready ?? subs.at;
+		const ready = mode === "polished" ? Math.max(lastPolished, firstPass - 150) : firstPass;
+		const behind = Math.max(0, subs.at - firstPass);
+		const text = t(mode === "polished" ? "hold.polished" : "hold.realtime") + (mode !== "polished" && behind >= 1 ? ` ${t("hold.behind").replace("{s}", behind.toFixed(1))}` : "");
+		if (waiting && now > ready + .5) p.hold(text, () => setNoWait(true));
 		else if (!waiting || ready > now + (mode === "polished" ? 20 : 4)) p.hold(null);
 	}, [
 		now,
 		subs.at,
+		subs.ready,
 		subs.state,
 		lastPolished,
 		mode,
@@ -35431,10 +35515,6 @@ function LiveView(props) {
 		if (m === mode) return;
 		setMode(m);
 		if (!job || job.status === "error") return;
-		if (m === "site") {
-			if (subs.state === "running") pauseSubs();
-			return;
-		}
 		startSubs(subs.state === "off" ? now : void 0, m);
 	};
 	const changeLines = async (next) => {
@@ -35860,16 +35940,9 @@ function LiveView(props) {
 			onTerms: setTerms
 		})
 	] });
-	const slow = !!job && job.status === "running" && !job.vod && mode !== "site" && rate !== null && rate < .95;
+	const slow = !!job && job.status === "running" && !job.vod && rate !== null && rate < .95;
 	const engineNow = providers.find((x) => x.id === usableEngine());
-	const liveNote = siteOnly && job && job.status !== "resolving" && !job.site?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "dshl-lag",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("site.none") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			className: "dshl-link",
-			onClick: () => changeMode("polished"),
-			children: t("site.switch")
-		})]
-	}) : slow ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	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", {
 			className: "dshl-link",
@@ -36029,10 +36102,11 @@ function LiveView(props) {
 							subsAt: subs.state === "off" ? void 0 : subs.at,
 							waitingText: job.status === "resolving" ? statusText : t("player.waiting"),
 							cues,
+							trail: mode === "live" && !job.vod,
 							siteCues: shownSite,
 							spoken: spokenBase,
 							style: subStyle,
-							delay: job.vod ? delay : mode === "polished" ? Math.max(delay, 75) : mode === "site" ? 3 : delay,
+							delay: job.vod ? delay : mode === "polished" ? Math.max(delay, 75) : mode === "live" ? 3 : delay,
 							onDelay: setDelay,
 							showDelay: job.status === "running" && !job.vod,
 							onSnapshot: saveSnapshot,
@@ -36247,7 +36321,7 @@ function SubsStarter(props) {
 	const box = (0, react.useRef)(null);
 	const pop = (0, react.useRef)(null);
 	const toggle = () => {
-		setSheet((box.current?.closest(".dshl-stage")?.clientWidth ?? 999) < 560 && !document.fullscreenElement);
+		setSheet(window.innerWidth < 700 && !document.fullscreenElement);
 		setOpen((v) => !v);
 	};
 	(0, react.useEffect)(() => {
@@ -36746,6 +36820,17 @@ const en = {
 	"rs.keyPh": "Paste the stream key",
 	"rs.keyKeep": "Leave empty to keep the saved key",
 	"rs.save": "Save",
+	"rs.overlay": "Subtitles for OBS (Browser Source)",
+	"rs.overlay.d": "Add a Browser Source in OBS with this address (1920×1080): the newest subtitles on a transparent background, over your camera or any picture. Add ?lines=zh,src&size=4.5 to choose lines and size.",
+	"rs.copy": "Copy",
+	"rs.openPage": "Open",
+	"rs.screen": "Subtitle screen (16:9)",
+	"rs.screen.d": "Only the subtitles, large, for a big screen or projector: open it in any browser on this network and go full screen (on this computer: {local}). Add ?theme=light for a light screen; it can also be an OBS source of its own.",
+	"rs.content": "Sends",
+	"rs.c.burn": "Picture + subtitles",
+	"rs.c.clean": "Picture only",
+	"rs.c.subs": "Subtitles only (green screen)",
+	"rs.c.subs.d": "Subtitles on a green background, no sound: key out the green in OBS or a broadcast console to lay them over your own picture.",
 	"rs.burn": "Subtitles in the picture",
 	"rs.start": "Start restreaming ({n})",
 	"rs.pick": "Tick where to stream",
@@ -36807,17 +36892,18 @@ const en = {
 	"in.subs": "Subtitles",
 	"in.addLang": "Add a language",
 	"in.remove": "Remove",
-	"mode.realtime": "Real-time",
+	"mode.realtime": "In sync",
 	"mode.polished": "Polished",
-	"mode.site": "No delay",
-	"mode.site.tip": "The site’s own subtitles only: nothing is transcribed or translated, the picture is not held back",
-	"mode.realtime.tip": "A few seconds behind: transcribed and translated as it is heard",
+	"mode.live": "Picture first",
+	"mode.live.tip": "The picture does not wait; subtitles follow a few seconds later",
+	"mode.realtime.tip": "Picture a few seconds behind, in step with its subtitles (OpenAI live translation when transcribing with OpenAI)",
 	"mode.polished.tip": "1–2 minutes behind: misheard words fixed with context and the picture — the most accurate (default)",
 	"site.none": "This video has no subtitles of its own.",
 	"site.switch": "Switch to Polished",
 	"hold.realtime": "Waiting for subtitles…",
 	"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.settings": "Choose one",
@@ -37115,6 +37201,17 @@ const zh = {
 	"rs.keyPh": "粘贴推流码",
 	"rs.keyKeep": "留空则沿用已保存的推流码",
 	"rs.save": "保存",
+	"rs.overlay": "OBS 字幕叠加（浏览器源）",
+	"rs.overlay.d": "在 OBS 里加一个「浏览器源」，填这个地址（1920×1080）：透明背景上只有最新的字幕，叠在摄像头或任何画面上。地址后加 ?lines=zh,src&size=4.5 可以选行和字号。",
+	"rs.copy": "复制",
+	"rs.openPage": "打开",
+	"rs.screen": "字幕大屏（16:9）",
+	"rs.screen.d": "只有字幕、字很大，适合大屏和投影：在同一网络里任何浏览器打开、全屏即可（本机用 {local}）。地址后加 ?theme=light 换浅色；也可以作为 OBS 的一个独立画面来源。",
+	"rs.content": "内容",
+	"rs.c.burn": "画面 + 字幕",
+	"rs.c.clean": "只要画面",
+	"rs.c.subs": "只要字幕（绿幕）",
+	"rs.c.subs.d": "绿色背景上只有字幕、没有声音：在 OBS 或导播台里抠掉绿色，就能把字幕叠在你自己的画面上。",
 	"rs.burn": "字幕显示在画面里",
 	"rs.start": "开始转播（{n} 个平台）",
 	"rs.pick": "先勾选要推到哪里",
@@ -37176,17 +37273,18 @@ const zh = {
 	"in.subs": "字幕",
 	"in.addLang": "添加语言",
 	"in.remove": "移除",
-	"mode.realtime": "实时",
+	"mode.realtime": "同步",
 	"mode.polished": "精修",
-	"mode.site": "无延迟",
-	"mode.site.tip": "只看网站自带的字幕：不转写、不翻译，画面也不往后拖",
-	"mode.realtime.tip": "晚几秒：听到就转写、翻译",
+	"mode.live": "抢先",
+	"mode.live.tip": "画面不等，和直播一样快；字幕晚几秒跟上",
+	"mode.realtime.tip": "画面晚几秒，和字幕对齐（转写选 OpenAI 时用实时翻译模型）",
 	"mode.polished.tip": "晚 1–2 分钟：结合上下文和画面改正听错的词，字幕最准（默认）",
 	"site.none": "这个视频没有网站自带的字幕。",
 	"site.switch": "换成精修",
 	"hold.realtime": "等字幕…",
 	"hold.polished": "等精修字幕…",
 	"hold.skip": "不等了",
+	"hold.behind": "（字幕比声音晚 {s} 秒）",
 	"lag.slow": "转写比直播慢（{x} 倍速），字幕会越落越远。",
 	"lag.slowLocal": "本机转写比直播慢（{x} 倍速），字幕会越落越远。换成在线转写就能跟上。",
 	"lag.settings": "去选一个",
@@ -37867,6 +37965,10 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, .
 .dshl-rs .rs-hint { margin: 0; color: var(--faint); font-size: 12px; line-height: 1.55; }
 .dshl-rs .rs-err { margin: 0; color: #ff8f92; font-size: 12px; line-height: 1.55; }
 .dshl-rs .rs-field { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
+.dshl-rs .rs-overlay { display: grid; gap: 4px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
+.dshl-rs .rs-sub { color: var(--muted); font-size: 12.5px; font-weight: 550; }
+.dshl-rs .rs-url { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.dshl-rs .rs-url code { overflow: hidden; color: var(--ink); font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
 .dshl-rs .rs-field .dshl-select { width: 100%; height: 34px; background: var(--l1); }
 .dshl-rs .rs-field input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--l1); color: var(--ink); font: inherit; font-size: 13px; }
 .dshl-rs .rs-field input:focus { outline: none; border-color: var(--accent); }
@@ -37892,8 +37994,9 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, .
 .dshl-dl .dshl-chips .chip { background: transparent; }
 
 /* Menus as a bottom sheet on small players (phones) */
-.dshl-sheetwrap { position: fixed; inset: 0; z-index: 2147483002; display: flex; align-items: flex-end; background: rgba(0,0,0,.4); }
-.dshl-menu.sheet { position: relative; right: auto; bottom: auto; width: 100%; max-height: 78vh; padding-bottom: env(safe-area-inset-bottom); border: 0; border-radius: 16px 16px 0 0;
+.dshl-sheetwrap { position: fixed; inset: 0; z-index: 2147483002; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.4); }
+body > .dshl-menu { z-index: 2147483002; }
+.dshl-menu.sheet { position: relative; right: auto; bottom: auto; width: 100%; max-width: 560px; max-height: 78vh; padding-bottom: env(safe-area-inset-bottom); border: 0; border-radius: 16px 16px 0 0;
   font-family: system-ui, -apple-system, "PingFang SC", sans-serif; font-size: 15px; }
 .dshl-menu.sheet .head { padding: 14px 12px 8px 18px; font-size: 16px; }
 .dshl-menu.sheet .body { padding: 4px 14px 16px; }

package/lib/index.mjs

@@ -7,6 +7,7 @@ import { promisify } from "node:util";
 import { EventEmitter } from "node:events";
 import { BlockAssembler, createUserMessage } from "@deepseek-ai/dsh-llm";
 import { createServer } from "node:net";
+import { createServer as createServer$1 } from "node:http";
 // src/deps.ts
 const run$4 = promisify(execFile);
 async function which(bin) {
@@ -1260,6 +1261,11 @@ const PLATFORMS = [
 	"twitch",
 	"custom"
 ];
+const CONTENTS = [
+	"burn",
+	"clean",
+	"subs"
+];
 const mask$1 = (k) => !k ? "" : k.length > 10 ? `${k.slice(0, 3)}…${k.slice(-4)}` : "••••";
 /** The full push address: the server plus the key, unless the server already ends with it. */
 function pushUrl(t) {
@@ -1286,7 +1292,8 @@ var Targets = class {
 			id: t.id,
 			platform: t.platform,
 			server: t.server,
-			key: mask$1(t.key)
+			key: mask$1(t.key),
+			content: t.content ?? "burn"
 		}));
 	}
 	/** Add or change one (an empty key keeps the saved one); returns the saved list. */
@@ -1297,11 +1304,13 @@ var Targets = class {
 		if (!/^(rtmps?|srt):\/\//i.test(server)) throw new Error("the server address should start with rtmp://, rtmps:// or srt://");
 		const old = input.id ? all.find((t) => t.id === input.id) : void 0;
 		const key = String(input.key ?? "").trim() || old?.key || "";
+		const content = CONTENTS.includes(String(input.content)) ? input.content : old?.content ?? "burn";
 		const next = {
 			id: old?.id ?? Math.random().toString(36).slice(2, 10),
 			platform,
 			server,
-			key
+			key,
+			content
 		};
 		this.write(old ? all.map((t) => t.id === old.id ? next : t) : [...all, next]);
 		return this.view();
@@ -1417,6 +1426,8 @@ var Restream = class extends EventEmitter {
 	watchdog;
 	lastOut = 0;
 	stuckSince = Date.now();
+	/** The encoder's outputs, in order (first on stdout, the next on pipes 4 and 5). */
+	outs = [];
 	constructor(source, opts, targets, log) {
 		super();
 		this.source = source;
@@ -1437,10 +1448,15 @@ var Restream = class extends EventEmitter {
 				id: t.id,
 				platform: t.platform,
 				server: t.server,
+				content: this.contentOf(t),
 				state: "connecting",
 				since: Date.now()
 			}
 		});
+		this.outs = CONTENTS.filter((c) => targets.some((t) => this.contentOf(t) === c));
+	}
+	contentOf(t) {
+		return t.content ?? (this.opts.burn ? "burn" : "clean");
 	}
 	get summary() {
 		return {
@@ -1456,39 +1472,26 @@ var Restream = class extends EventEmitter {
 		const { args: input, at } = this.source.input(this.opts.from);
 		this.startAt = at;
 		this.status.at = at;
-		const burn = this.opts.burn && !!await loadCanvas();
-		if (this.opts.burn && !burn) this.status.message = "no-burn";
-		this.status.burn = burn;
-		if (burn) this.blank = await drawSubtitles([], this.opts.style, w, h);
-		const video = `[0:v]scale=${w}:${h}:force_original_aspect_ratio=decrease,pad=${w}:${h}:(ow-iw)/2:(oh-ih)/2,setsar=1,fps=25,setpts=PTS-STARTPTS`;
-		const filter = burn ? `${video}[v];[1:v]format=rgba,setpts=PTS-STARTPTS[s];[v][s]overlay=0:0:eof_action=repeat:shortest=1,format=yuv420p[o]` : `${video},format=yuv420p[o]`;
+		if (!!!await loadCanvas() && this.outs.some((o) => o !== "clean")) {
+			this.status.message = "no-burn";
+			this.outs = [...new Set(this.outs.map((o) => o === "burn" ? "clean" : o).filter((o) => o !== "subs"))];
+			for (const p of this.pushes.values()) if (this.contentOf(p.target) === "burn") p.target = {
+				...p.target,
+				content: "clean"
+			};
+		}
+		const subs = this.outs.some((o) => o !== "clean");
+		this.status.burn = this.outs.includes("burn");
+		if (subs) this.blank = await drawSubtitles([], this.opts.style, w, h);
+		const vids = this.outs.filter((o) => o !== "subs"), subUses = this.outs.filter((o) => o !== "clean");
+		const parts = [`[0:v]scale=${w}:${h}:force_original_aspect_ratio=decrease,pad=${w}:${h}:(ow-iw)/2:(oh-ih)/2,setsar=1,fps=25,setpts=PTS-STARTPTS${vids.length > 1 ? `,split=${vids.length}${vids.map((o) => `[v_${o}]`).join("")}` : vids.length ? `[v_${vids[0]}]` : ""}`];
+		if (!vids.length) parts[0] = `[0:v]nullsink`;
+		if (subUses.length) parts.push(`[1:v]format=rgba,setpts=PTS-STARTPTS${subUses.length > 1 ? `,split=${subUses.length}${subUses.map((o) => `[s_${o}]`).join("")}` : `[s_${subUses[0]}]`}`);
+		if (this.outs.includes("burn")) parts.push(`[v_burn][s_burn]overlay=0:0:eof_action=repeat:shortest=1,format=yuv420p[o_burn]`);
+		if (this.outs.includes("clean")) parts.push(`[v_clean]format=yuv420p[o_clean]`);
+		if (this.outs.includes("subs")) parts.push(`color=c=0x00FF00:s=${w}x${h}:r=25[g];[g][s_subs]overlay=0:0:eof_action=repeat:shortest=1,format=yuv420p[o_subs]`);
 		const b = this.opts.bitrateK;
-		const args = [
-			"-hide_banner",
-			"-loglevel",
-			"error",
-			"-re",
-			...input,
-			...burn ? [
-				"-probesize",
-				"65536",
-				"-analyzeduration",
-				"0",
-				"-f",
-				"image2pipe",
-				"-framerate",
-				String(FPS_SUBS),
-				"-c:v",
-				"png",
-				"-i",
-				"pipe:0"
-			] : [],
-			"-filter_complex",
-			filter,
-			"-map",
-			"[o]",
-			"-map",
-			"0:a:0?",
+		const video = [
 			"-c:v",
 			"libx264",
 			"-preset",
@@ -1508,7 +1511,11 @@ var Restream = class extends EventEmitter {
 			"-keyint_min",
 			"50",
 			"-sc_threshold",
-			"0",
+			"0"
+		];
+		const audio = [
+			"-map",
+			"0:a:0?",
 			"-c:a",
 			"aac",
 			"-b:a",
@@ -1516,14 +1523,46 @@ var Restream = class extends EventEmitter {
 			"-ar",
 			"44100",
 			"-ac",
-			"2",
+			"2"
+		];
+		const fd = (i) => i === 0 ? 1 : i + 3;
+		const args = [
+			"-hide_banner",
+			"-loglevel",
+			"error",
+			"-re",
+			...input,
+			...subs ? [
+				"-probesize",
+				"65536",
+				"-analyzeduration",
+				"0",
+				"-f",
+				"image2pipe",
+				"-framerate",
+				String(FPS_SUBS),
+				"-c:v",
+				"png",
+				"-i",
+				"pipe:0"
+			] : [],
+			"-filter_complex",
+			parts.join(";"),
 			"-progress",
 			"pipe:3",
-			"-f",
-			"mpegts",
-			"pipe:1"
+			...this.outs.flatMap((o, i) => [
+				"-map",
+				`[o_${o}]`,
+				...video,
+				...o === "subs" ? ["-an"] : audio,
+				"-f",
+				"mpegts",
+				`pipe:${fd(i)}`
+			])
 		];
 		const enc = spawn("ffmpeg", args, { stdio: [
+			"pipe",
+			"pipe",
 			"pipe",
 			"pipe",
 			"pipe",
@@ -1546,11 +1585,14 @@ var Restream = class extends EventEmitter {
 			}
 		});
 		enc.stdin.on("error", () => {});
-		enc.stdout.on("data", (chunk) => {
-			for (const p of this.pushes.values()) {
-				const sin = p.proc?.stdin;
-				if (sin && !sin.destroyed && sin.writableLength < 8 << 20) sin.write(chunk);
-			}
+		this.outs.forEach((o, i) => {
+			(i === 0 ? enc.stdout : enc.stdio[i + 3]).on("data", (chunk) => {
+				for (const p of this.pushes.values()) {
+					if (this.contentOf(p.target) !== o) continue;
+					const sin = p.proc?.stdin;
+					if (sin && !sin.destroyed && sin.writableLength < 8 << 20) sin.write(chunk);
+				}
+			});
 		});
 		enc.on("exit", (code) => {
 			if (this.stopped) return;
@@ -1558,7 +1600,7 @@ var Restream = class extends EventEmitter {
 			this.log(`restream: ${reason}`);
 			this.stop(reason);
 		});
-		if (burn) this.feedSubtitles(w, h);
+		if (subs) this.feedSubtitles(w, h);
 		for (const p of this.pushes.values()) this.connect(p.target.id);
 		this.watchdog = setInterval(() => {
 			if (this.stopped) return;
@@ -1682,9 +1724,10 @@ var Restream = class extends EventEmitter {
 		});
 		this.changed();
 	}
-	/** Add a destination while running (no interruption for the others). */
+	/** Add a destination while running (no interruption for the others); false when it needs an output this run does not make. */
 	add(t) {
-		if (this.pushes.has(t.id) || this.stopped) return;
+		if (this.pushes.has(t.id) || this.stopped) return true;
+		if (!this.outs.includes(this.contentOf(t))) return false;
 		this.pushes.set(t.id, {
 			target: t,
 			tries: 0,
@@ -1692,11 +1735,17 @@ var Restream = class extends EventEmitter {
 				id: t.id,
 				platform: t.platform,
 				server: t.server,
+				content: this.contentOf(t),
 				state: "connecting",
 				since: Date.now()
 			}
 		});
 		this.connect(t.id);
+		return true;
+	}
+	/** The destinations this run sends to. */
+	get targets() {
+		return [...this.pushes.values()].map((p) => p.target);
 	}
 	/** Stop one destination; the rest keep going. Returns true when none are left. */
 	drop(id) {
@@ -1859,7 +1908,11 @@ var LiveJob = class LiveJob extends EventEmitter {
 			height: this.height,
 			heights: this.heights,
 			restream: this.restream,
-			subs: { ...this.subs },
+			subs: {
+				...this.subs,
+				ready: this.readyAt(),
+				latency: this.provider?.latency?.()
+			},
 			usage: this.deps.usage.summary(),
 			site: this.siteTracks,
 			spoken: this.spokenLang()
@@ -2441,6 +2494,20 @@ var LiveJob = class LiveJob extends EventEmitter {
 		this.persist();
 		this.emit("state", this.summary());
 	}
+	/**
+	* How far the subtitles are complete (media s): audio read minus what the
+	* recogniser still holds, and before the first line still waiting for its
+	* real-time translation. The page lets the picture wait for this.
+	*/
+	readyAt() {
+		let ready = this.subs.at - (this.provider?.backlog?.() ?? 0);
+		if (this.opts.mode === "realtime" && this.pendingTranslations > 0) {
+			const targets = this.targets();
+			const waiting = this.cues.find((c) => c.final && targets.some((t) => !c.tr?.[t]) && c.start > ready - 60);
+			if (waiting) ready = Math.min(ready, waiting.start);
+		}
+		return Math.max(0, ready);
+	}
 	/** Is recognition or translation too far behind the media read so far? (`slack` < 1 waits until it is well caught up.) */
 	behind(slack = 1) {
 		return (this.provider?.backlog?.() ?? 0) > AHEAD_MAX_SEC * slack || this.pendingTranslations > AHEAD_MAX_LINES * slack || this.polisher.backlog > 30 * slack;
@@ -2574,8 +2641,16 @@ var LiveJob = class LiveJob extends EventEmitter {
 	/** Push this video (from media time `from`, subtitles drawn in) to the chosen destinations. */
 	async startRestream(targets, opts) {
 		if (this.restreamer?.summary.running) {
-			for (const t of targets) this.restreamer.add(t);
-			return;
+			const r = this.restreamer;
+			const misfits = targets.filter((t) => !r.add(t));
+			if (!misfits.length) return;
+			const all = [...r.targets, ...misfits];
+			const at = r.summary.at;
+			await r.stop();
+			return this.startRestream(all, {
+				...opts,
+				from: at
+			});
 		}
 		if (!this.segments().length) throw new Error("nothing recorded yet");
 		if (this.vod && this.duration && opts.from >= this.duration - 1.5) opts = {
@@ -4630,40 +4705,122 @@ const TRANSLATE_TARGETS = [
 	"it",
 	"en"
 ];
+/** Sentence ends; for CJK targets also the full-width ones. */
+const END = /[.!?。！？]["'”’」』)）]*\s*$/;
+/** Long enough to cut at a comma (characters for CJK, letters otherwise). */
+const SOFT_CJK = 22;
+const SOFT_LATIN = 70;
+/** Never longer than this on one subtitle. */
+const HARD_CJK = 34;
+const HARD_LATIN = 110;
+/** A stream quiet this long ends its sentence (a pause without punctuation). */
+const QUIET_SEC = 1.6;
+/**
+* Builds sentences from one text stream. The service stamps every delta
+* with the audio position it was produced at (elapsed_ms); a sentence's
+* times come from those stamps, so lines line up with the picture without
+* guessing from pauses.
+*/
+var Stream = class {
+	cjk;
+	open = [];
+	done = [];
+	constructor(cjk) {
+		this.cjk = cjk;
+	}
+	get text() {
+		return this.open.map((p) => p.text).join("");
+	}
+	get start() {
+		return this.open[0]?.t;
+	}
+	get last() {
+		return this.open.at(-1)?.t;
+	}
+	add(p) {
+		const m = /^(.*?[.!?。！？]["'”’」』)）]*)(\s*\S.*)$/s.exec(p.text);
+		if (m && !/^\d/.test(m[2].trim())) {
+			this.push({
+				t: p.t,
+				text: m[1]
+			});
+			this.close();
+			this.add({
+				t: p.t,
+				text: m[2]
+			});
+			return;
+		}
+		this.push(p);
+	}
+	push(p) {
+		this.open.push(p);
+		const text = this.text.trim();
+		const len = this.cjk ? Array.from(text).length : text.length;
+		const soft = this.cjk ? SOFT_CJK : SOFT_LATIN, hard = this.cjk ? HARD_CJK : HARD_LATIN;
+		if (END.test(text) || len >= soft && /[,，、;；:：]\s*$/.test(text) || len >= hard) this.close();
+	}
+	close() {
+		const text = this.text.trim();
+		if (text) this.done.push({
+			text,
+			start: this.open[0].t,
+			end: this.open.at(-1).t
+		});
+		this.open = [];
+	}
+};
 /**
 * OpenAI live interpretation (gpt-realtime-translate): audio streams in, the
-* translation and the source transcript stream back as text, so no separate
-* translation pass is needed. The service has no turns of its own, so the
-* shared pause detector decides where a subtitle ends; text that arrives
-* shortly after a pause still belongs to the line before it.
+* source transcript and the translation stream back as text with audio
+* positions, so no separate translation pass is needed. A subtitle is one
+* sentence of translation with the source sentence(s) it renders: the
+* translation trails the speech by one to three seconds (it waits for enough
+* meaning), so source sentences are attached in order as each translated
+* sentence completes.
 */
 var OpenAITranslateProvider = class {
 	opts;
 	name = "openai-translate";
 	translates = true;
 	ws;
-	chunker;
 	up = new Upsampler();
 	emit;
 	onError;
 	stopped = false;
 	reconnects = 0;
-	/** Text of the line being collected (source transcript and translation). */
-	src = "";
-	tr = "";
-	lineStart = 0;
+	/** Audio sent so far (s); a session's positions count from `base`. */
+	sent = 0;
+	base = 0;
+	src = new Stream(false);
+	tr;
+	/** Source sentences not yet shown with a translation. */
+	srcUsed = 0;
+	/** Source characters per translated character, learned as lines pair up (English is about 3× Chinese). */
+	ratio;
 	seq = 0;
-	/** A finished stretch of audio whose text may still be arriving. */
-	closing;
+	/** End of the last finished line (s): everything before it is on screen. */
+	readyAt = 0;
+	/** Arrival delay of text after its audio position, for the page (s). */
+	lag = 0;
+	connectedAt = 0;
+	quiet;
 	constructor(opts) {
 		this.opts = opts;
 		if (!TRANSLATE_TARGETS.includes(opts.target)) throw new Error(`OpenAI live translation speaks only ${TRANSLATE_TARGETS.join(", ")}; choose one of these as the subtitle language, or another engine`);
-		this.chunker = new PauseChunker(opts.minSec, opts.maxSec, (c) => this.onChunk(c));
+		const cjk = [
+			"zh",
+			"ja",
+			"ko"
+		].includes(opts.target);
+		this.tr = new Stream(cjk);
+		this.ratio = cjk ? 3.2 : 1;
 	}
 	async start(emit, onError) {
 		this.emit = emit;
 		this.onError = onError;
 		await this.connect();
+		this.quiet = setInterval(() => this.settle(), 400);
 	}
 	connect() {
 		return new Promise((resolve, reject) => {
@@ -4674,6 +4831,8 @@ var OpenAITranslateProvider = class {
 			ws.onopen = () => {
 				opened = true;
 				this.reconnects = 0;
+				this.base = this.sent;
+				this.connectedAt = Date.now();
 				this.send({
 					type: "session.update",
 					session: { audio: {
@@ -4697,6 +4856,9 @@ var OpenAITranslateProvider = class {
 			ws.onclose = (ev) => {
 				if (!opened || this.stopped || this.ws !== ws) return;
 				this.opts.log?.(`openai-translate: connection closed (${ev.code} ${ev.reason || ""}), reconnecting`);
+				this.src.close();
+				this.tr.close();
+				this.pair(true);
 				if (++this.reconnects > 5) {
 					this.onError?.(/* @__PURE__ */ new Error("OpenAI live translation keeps dropping"));
 					return;
@@ -4716,82 +4878,291 @@ var OpenAITranslateProvider = class {
 			type: "session.input_audio_buffer.append",
 			audio: this.up.push(Buffer.from(pcm)).toString("base64")
 		});
-		this.chunker.push(pcm);
+		this.sent += pcm.length / BYTES_PER_SEC;
 	}
+	/** Audio sent but not yet in a finished line. */
 	backlog() {
-		return this.closing ? this.chunker.now - this.closing.start : 0;
+		return Math.max(0, this.sent - this.readyAt);
 	}
-	draft() {
-		if (!this.src.trim() && !this.tr.trim()) return;
-		this.emit?.({
-			key: `ot:${this.seq}`,
-			start: this.lineStart,
-			end: Math.max(this.chunker.now, this.lineStart + .5),
-			src: this.src.trim(),
-			tr: this.tr.trim() ? { [this.opts.target]: this.tr.trim() } : void 0,
-			final: false
-		});
+	onEvent(ev) {
+		if (ev.type === "session.input_transcript.delta" || ev.type === "session.output_transcript.delta") {
+			const t = this.base + (ev.elapsed_ms ?? 0) / 1e3;
+			const arrived = this.base + (Date.now() - this.connectedAt) / 1e3;
+			this.lag = this.lag ? this.lag * .9 + (arrived - t) * .1 : arrived - t;
+			const piece = {
+				t,
+				text: String(ev.delta ?? "")
+			};
+			if (ev.type === "session.input_transcript.delta") this.src.add(piece);
+			else this.tr.add(piece);
+			this.pair(false);
+			this.draft();
+		} else if (ev.type === "error") this.onError?.(/* @__PURE__ */ new Error(`OpenAI: ${ev.error?.message ?? "error"}`));
+	}
+	/** Close streams that went quiet (a pause without punctuation), then pair what is complete. */
+	settle() {
+		const now = this.sent;
+		for (const s of [this.src, this.tr]) if (s.last !== void 0 && now - s.last > QUIET_SEC + this.lag) s.close();
+		this.pair(false);
+		this.draft();
 	}
-	/** A pause ended a stretch: wait a moment for its last words, then finish the line. */
-	onChunk({ start, end }) {
-		if (this.closing) this.finish();
-		if (!this.src.trim() && !this.tr.trim()) {
-			this.lineStart = end;
-			return;
+	/**
+	* One line per finished translation sentence, with the source sentences
+	* that ended by then. With `all`, everything left becomes lines (stopping,
+	* reconnecting).
+	*/
+	pair(all) {
+		while (this.tr.done.length) {
+			const t = this.tr.done.shift();
+			const want = Array.from(t.text).length * this.ratio;
+			const src = [];
+			let len = 0;
+			while (this.srcUsed < this.src.done.length) {
+				const next = this.src.done[this.srcUsed];
+				if (next.end > t.end + .5) break;
+				if (src.length && Math.abs(len + next.text.length - want) >= Math.abs(len - want)) break;
+				src.push(next);
+				len += next.text.length;
+				this.srcUsed++;
+			}
+			if (src.length) this.ratio = Math.min(6, Math.max(.5, this.ratio * .8 + len / Math.max(1, Array.from(t.text).length) * .2));
+			this.line(t, src);
+		}
+		if (all) {
+			const rest = this.src.done.slice(this.srcUsed);
+			this.srcUsed = this.src.done.length;
+			if (rest.length) this.line(void 0, rest);
 		}
-		this.lineStart = start;
-		this.closing = {
+	}
+	line(t, src) {
+		const srcText = src.map((s) => s.text).join(" ").trim();
+		const start = Math.max(0, Math.min(t?.start ?? Infinity, src[0]?.start ?? Infinity) - .4);
+		const end = Math.max(t?.end ?? 0, src.at(-1)?.end ?? 0);
+		this.emit?.({
+			key: `ot:${this.seq++}`,
 			start,
-			end,
-			timer: setTimeout(() => this.finish(), 1500)
-		};
+			end: Math.max(end, start + .8),
+			src: srcText,
+			tr: t ? { [this.opts.target]: t.text } : void 0,
+			final: true
+		});
+		this.readyAt = Math.max(this.readyAt, end);
 	}
-	finish() {
-		const c = this.closing;
-		if (!c) return;
-		clearTimeout(c.timer);
-		this.closing = void 0;
-		const src = this.src.trim(), tr = this.tr.trim();
-		if (src || tr) this.emit?.({
+	/** The sentence being translated, as a draft line. */
+	draft() {
+		const tr = this.tr.text.trim();
+		if (!tr) return;
+		const srcText = [...this.src.done.slice(this.srcUsed).map((s) => s.text), this.src.text.trim()].filter(Boolean).join(" ");
+		const start = Math.max(0, Math.min(this.tr.start ?? Infinity, this.src.done[this.srcUsed]?.start ?? this.src.start ?? Infinity) - .4);
+		this.emit?.({
 			key: `ot:${this.seq}`,
-			start: c.start,
-			end: Math.max(c.end, c.start + .5),
-			src: src || tr,
-			tr: tr ? { [this.opts.target]: tr } : void 0,
-			final: true
+			start,
+			end: Math.max(this.tr.last ?? start, start + .8),
+			src: srcText,
+			tr: { [this.opts.target]: tr },
+			final: false
 		});
-		this.seq++;
-		this.src = "";
-		this.tr = "";
-		this.lineStart = c.end;
 	}
-	onEvent(ev) {
-		switch (ev.type) {
-			case "session.input_transcript.delta":
-				this.src += String(ev.delta ?? "");
-				this.draft();
-				break;
-			case "session.output_transcript.delta":
-				this.tr += String(ev.delta ?? "");
-				this.draft();
-				break;
-			case "error": {
-				const err = ev.error ?? {};
-				this.onError?.(/* @__PURE__ */ new Error(`OpenAI: ${err.message ?? "error"}`));
-				break;
-			}
-		}
+	/** Seconds between audio and its text arriving, as measured (for the page). */
+	latency() {
+		return this.lag;
 	}
 	async stop() {
-		this.chunker.flush(.5);
-		await new Promise((r) => setTimeout(r, 1500));
-		this.finish();
+		await new Promise((r) => setTimeout(r, 2500));
+		if (this.quiet) clearInterval(this.quiet);
+		this.src.close();
+		this.tr.close();
+		this.pair(true);
 		this.stopped = true;
 		try {
 			this.ws?.close();
 		} catch {}
 	}
 };
+// src/overlay.ts
+/**
+* Subtitles as a page of their own, for OBS's Browser Source (or any
+* broadcast tool that layers a web page): transparent background, the newest
+* line of the video being worked on, styled like the player. It lives on a
+* fixed local port so the address in OBS keeps working across restarts.
+*
+*   http://127.0.0.1:<port>/overlay                     newest running video
+*   …/overlay?lines=zh,src&size=4.5&pos=bottom&bg=0.55  lines, size (% of width), position, box opacity
+*/
+function startOverlay(port, current, onJob, log) {
+	const clients = /* @__PURE__ */ new Set();
+	let watched;
+	let detach;
+	const send = (cue) => {
+		const data = `data: ${JSON.stringify(cue ? {
+			src: cue.src,
+			tr: cue.tr ?? {},
+			final: cue.final,
+			lang: cue.lang
+		} : null)}\n\n`;
+		for (const c of clients) c.write(data);
+	};
+	const follow = (job) => {
+		if (job === watched) return;
+		detach?.();
+		watched = job;
+		if (!job) return;
+		const onCue = (c) => send(c);
+		job.on("cue", onCue);
+		detach = () => job.off("cue", onCue);
+	};
+	follow(current());
+	const offJob = onJob((job) => follow(job));
+	const server = createServer$1((req, res) => {
+		const url = new URL(req.url ?? "/", "http://127.0.0.1");
+		if (url.pathname === "/overlay/events") {
+			res.writeHead(200, {
+				"content-type": "text/event-stream",
+				"cache-control": "no-store",
+				connection: "keep-alive",
+				"access-control-allow-origin": "*"
+			});
+			const c = { write: (s) => res.write(s) };
+			clients.add(c);
+			const last = watched?.cues.at(-1);
+			if (last) res.write(`data: ${JSON.stringify({
+				src: last.src,
+				tr: last.tr ?? {},
+				final: last.final,
+				lang: last.lang
+			})}\n\n`);
+			const ping = setInterval(() => res.write(": ping\n\n"), 15e3);
+			req.on("close", () => {
+				clearInterval(ping);
+				clients.delete(c);
+			});
+			return;
+		}
+		if (url.pathname === "/overlay" || url.pathname === "/overlay/") {
+			res.writeHead(200, {
+				"content-type": "text/html; charset=utf-8",
+				"cache-control": "no-store"
+			});
+			res.end(PAGE);
+			return;
+		}
+		if (url.pathname === "/screen" || url.pathname === "/screen/") {
+			res.writeHead(200, {
+				"content-type": "text/html; charset=utf-8",
+				"cache-control": "no-store"
+			});
+			res.end(SCREEN);
+			return;
+		}
+		res.writeHead(404);
+		res.end();
+	});
+	server.on("error", (err) => log(`overlay: port ${port} unavailable (${err.message})`));
+	server.listen(port, () => log(`overlay: http://127.0.0.1:${port}/overlay, /screen`));
+	return () => {
+		offJob();
+		detach?.();
+		server.close();
+	};
+}
+const PAGE = `<!doctype html><html><head><meta charset="utf-8"><title>Vidi subtitles</title>
+<style>
+html,body{margin:0;height:100%;background:transparent;overflow:hidden}
+#box{position:absolute;left:50%;width:92%;transform:translateX(-50%);text-align:center;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;transition:opacity .3s}
+#box div{text-wrap:balance;line-break:strict}#box div+div{margin-top:.3em}
+#box span{display:inline;padding:.08em .45em;border-radius:.22em;color:#fff;line-height:1.55;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:0 1px 2px rgba(0,0,0,.45)}
+#box .main{font-weight:600}
+#box .sub{color:#e8e8e8}
+</style></head><body><div id="box"></div>
+<script>
+const q = new URLSearchParams(location.search)
+const lines = (q.get('lines') || 'zh,src').split(',')
+const size = Number(q.get('size') || 4.5), bg = q.get('bg') || '0.55', pos = q.get('pos') || 'bottom', offset = Number(q.get('offset') || 6)
+const box = document.getElementById('box')
+box.style[pos === 'top' ? 'top' : 'bottom'] = offset + '%'
+let hide
+function show(c) {
+  clearTimeout(hide)
+  if (!c) { box.style.opacity = 0; return }
+  const seen = new Set()
+  const rows = lines.map(k => (k === 'src' ? c.src : (c.tr || {})[k]) || '').map(s => s.trim()).filter(s => s && !seen.has(s) && seen.add(s))
+  box.innerHTML = ''
+  rows.forEach((text, i) => {
+    const d = document.createElement('div'), s = document.createElement('span')
+    s.className = i ? 'sub' : 'main'
+    s.style.fontSize = (i ? size * 0.68 : size) + 'vw'
+    s.style.background = 'rgba(0,0,0,' + bg + ')'
+    s.textContent = text
+    d.appendChild(s); box.appendChild(d)
+  })
+  box.style.opacity = rows.length ? 1 : 0
+  // A line stays up a while after it is finished, then the screen clears.
+  if (c.final) hide = setTimeout(() => { box.style.opacity = 0 }, 6000)
+}
+function connect() {
+  const es = new EventSource('/overlay/events')
+  es.onmessage = e => { try { show(JSON.parse(e.data)) } catch {} }
+  es.onerror = () => { es.close(); setTimeout(connect, 2000) }
+}
+connect()
+<\/script></body></html>`;
+/**
+* Subtitles as the whole picture, for a big screen (a hall, a projector, a
+* second monitor, or OBS as a source of its own): 16:9, the current line large
+* with the original under it, the two before it smaller and dimmed above.
+*   …/screen?lines=zh,src&theme=dark|light
+*/
+const SCREEN = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vidi · subtitles</title>
+<style>
+html,body{margin:0;height:100%;background:#000;overflow:hidden;cursor:none}
+body.light{background:#f4f3ef}
+#stage{position:absolute;inset:0;margin:auto;width:min(100vw,177.78vh);height:min(56.25vw,100vh);display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;padding:4% 6% 7%;
+  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;color:#fff;container-type:inline-size}
+body.light #stage{color:#151513}
+.cue{text-align:center;text-wrap:balance;line-break:strict;transition:opacity .4s,font-size .3s}
+.cue+.cue{margin-top:3.2cqw}
+.cue .main{display:block;font-weight:600;line-height:1.35}
+.cue .sub{display:block;margin-top:.8cqw;opacity:.62;line-height:1.4}
+.cue.now .main{font-size:5.4cqw}.cue.now .sub{font-size:2.9cqw}
+.cue.old .main{font-size:3cqw}.cue.old .sub{font-size:1.9cqw}
+.cue.old{opacity:.38}.cue.old2{opacity:.2}
+.cue.draft .main{opacity:.75}
+</style></head><body><div id="stage"></div>
+<script>
+const q = new URLSearchParams(location.search)
+const lines = (q.get('lines') || 'zh,src').split(',')
+if (q.get('theme') === 'light') document.body.classList.add('light')
+const stage = document.getElementById('stage')
+let done = [], draft = null
+function texts(c) {
+  const seen = new Set()
+  return lines.map(k => (k === 'src' ? c.src : (c.tr || {})[k]) || '').map(s => s.trim()).filter(s => s && !seen.has(s) && seen.add(s))
+}
+function render() {
+  const list = [...done.slice(-3), ...(draft ? [draft] : [])].slice(-3)
+  stage.innerHTML = ''
+  list.forEach((c, i) => {
+    const t = texts(c); if (!t.length) return
+    const d = document.createElement('div')
+    const age = list.length - 1 - i
+    d.className = 'cue ' + (age === 0 ? 'now' : age === 1 ? 'old' : 'old old2') + (c.final ? '' : ' draft')
+    const m = document.createElement('span'); m.className = 'main'; m.textContent = t[0]; d.appendChild(m)
+    if (t[1]) { const s = document.createElement('span'); s.className = 'sub'; s.textContent = t[1]; d.appendChild(s) }
+    stage.appendChild(d)
+  })
+}
+function connect() {
+  const es = new EventSource('/overlay/events')
+  es.onmessage = e => {
+    let c; try { c = JSON.parse(e.data) } catch { return }
+    if (!c) return
+    if (c.final) { draft = null; if (!done.length || done.at(-1).src !== c.src) done.push(c); done = done.slice(-6) } else draft = c
+    render()
+  }
+  es.onerror = () => { es.close(); setTimeout(connect, 2000) }
+}
+connect()
+<\/script></body></html>`;
 // src/tools.ts
 const CLOCK = (s) => {
 	const h = Math.floor(s / 3600), m = Math.floor(s / 60) % 60, ss = Math.floor(s % 60);
@@ -5151,6 +5522,7 @@ const Config = z.object({
 	glossary: z.string().role("textarea").default("").description("Terms to keep consistent, one per line (e.g. \"Dots = Dots\"). Each stream also builds its own glossary automatically."),
 	rtmpPort: z.number().default(1935).description("Port for incoming RTMP pushes (OBS → rtmp://<this machine>/live)."),
 	srtPort: z.number().default(9e3).description("Port for incoming SRT pushes."),
+	overlayPort: z.number().default(19380).description("Local port of the subtitle overlay page for OBS (http://127.0.0.1:<port>/overlay)."),
 	openaiApiKey: z.string().role("secret").default("").description("OpenAI API key for online subtitles. Usually not needed here: keys saved in DSH (Models page) or on the video page are used."),
 	openaiModel: z.string().default("gpt-live-transcribe").description("OpenAI realtime transcription model."),
 	geminiModel: z.string().default("auto").description("Gemini model for online subtitles (\"auto\" picks the newest Flash model your key can use).")
@@ -5365,6 +5737,17 @@ function apply(ctx, config) {
 		const svc = service(opts.provider);
 		if (svc) {
 			if (!keys.get(svc.key)) throw new Error(`no ${svc.label} key yet: add one in the video page settings or on the DSH Models page`);
+			const target = opts.tgtLangs.find((l) => l !== opts.srcLang);
+			if (svc.kind === "realtime" && opts.mode === "realtime" && target && TRANSLATE_TARGETS.includes(target)) {
+				const tr = service("openai-translate");
+				log(`subtitles in step: ${tr.model} into ${target}`);
+				return new OpenAITranslateProvider({
+					apiKey: keys.get("openai"),
+					model: tr.model,
+					target,
+					log
+				});
+			}
 			if (svc.kind === "realtime") return new OpenAIProvider({
 				apiKey: keys.get("openai"),
 				model: config.openaiModel,
@@ -5383,8 +5766,6 @@ function apply(ctx, config) {
 					apiKey: keys.get("openai"),
 					model: svc.model,
 					target,
-					minSec: 2,
-					maxSec: 8,
 					log
 				});
 			}
@@ -5528,7 +5909,7 @@ function apply(ctx, config) {
 			return job;
 		}
 	}
-	const modeOf = (m) => m === "polished" || m === "site" ? m : "realtime";
+	const modeOf = (m) => m === "polished" ? "polished" : m === "live" || m === "site" ? "live" : "realtime";
 	async function startJob(opts, waiting = false) {
 		const prev = waiting ? void 0 : byConversation.get(opts.conversationId);
 		if (prev) await jobs.get(prev)?.close("replaced");
@@ -5539,7 +5920,7 @@ function apply(ctx, config) {
 		job = new LiveJob(id, opts, jobDeps(dir, opts, () => job, waiting));
 		jobs.set(id, job);
 		if (!waiting) byConversation.set(opts.conversationId, id);
-		job.autoSubs = opts.mode !== "site";
+		job.autoSubs = true;
 		bus.emit("job", job);
 		job.start();
 		return job;
@@ -5549,6 +5930,11 @@ function apply(ctx, config) {
 		const url = new URL(req.url ?? "/", "http://127.0.0.1");
 		const route = url.pathname.replace(/^\/live\/api\/?/, "");
 		try {
+			if (route === "overlay") return send(res, 200, {
+				url: `http://127.0.0.1:${config.overlayPort}/overlay`,
+				screen: `http://127.0.0.1:${config.overlayPort}/screen`,
+				screenLan: `http://${lanAddress()}:${config.overlayPort}/screen`
+			});
 			if (route === "deps") {
 				const [deps] = await Promise.all([checkDeps(config.whisperModel), keys.refresh()]);
 				localReady = deps.filter((d) => [
@@ -5709,7 +6095,7 @@ function apply(ctx, config) {
 					if (Array.isArray(b.tgtLangs)) opts.tgtLangs = b.tgtLangs.map(String).slice(0, 4);
 					if (typeof b.srcLang === "string") opts.srcLang = b.srcLang;
 					if (typeof b.provider === "string") opts.provider = b.provider;
-					if (b.mode === "realtime" || b.mode === "polished" || b.mode === "site") opts.mode = b.mode;
+					if (typeof b.mode === "string") opts.mode = modeOf(b.mode);
 					const svc = opts.provider ? service(opts.provider) : void 0;
 					if (svc) {
 						await keys.refresh();
@@ -6145,6 +6531,12 @@ function apply(ctx, config) {
 		path: "/live/media",
 		handler: media
 	}), "dsh-vidi: media route");
+	ctx.effect(() => startOverlay(config.overlayPort, () => [...jobs.values()].filter((j) => j.summary().status === "running").at(-1) ?? [...jobs.values()].at(-1), (fn) => {
+		bus.on("job", fn);
+		return () => {
+			bus.off("job", fn);
+		};
+	}, log), "dsh-vidi: subtitle overlay");
 	ctx.effect(() => () => {
 		for (const job of jobs.values()) job.close("plugin unloaded");
 		whisper.stop();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vidi",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "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",