dsh-vidi 0.7.0 → 0.7.2

package/lib/client.js

@@ -255,6 +255,23 @@ const Icon = {
 		strokeWidth: 2.6,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
 	}),
+	sidePanel: () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		width: "18",
+		height: "18",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			x: "3",
+			y: "4",
+			width: "18",
+			height: "16",
+			rx: "2.5"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M15 4v16" })]
+	}),
 	plus: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		viewBox: "0 0 24 24",
 		width: "14",
@@ -844,7 +861,9 @@ function Pick(props) {
 			if (!list.current?.contains(e.target) && !btn.current?.contains(e.target)) close(false);
 		};
 		const gone = (e) => {
-			if (!list.current?.contains(e.target)) close(false);
+			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);
@@ -34066,10 +34085,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 +34124,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",
@@ -34628,38 +34658,49 @@ function RestreamPanel(props) {
 		]
 	});
 }
-/** The subtitle page for OBS's Browser Source: lay the subtitles over your own picture without encoding anything. */
+/** Subtitle pages: the overlay for OBS's Browser Source, and the big screen of subtitles only. */
 function OverlayLink({ t }) {
-	const [url, setUrl] = (0, react.useState)("");
-	const [copied, setCopied] = (0, react.useState)(false);
+	const [urls, setUrls] = (0, react.useState)({});
+	const [copied, setCopied] = (0, react.useState)("");
 	(0, react.useEffect)(() => {
-		fetch("/live/api/overlay").then((r) => r.json()).then((j) => setUrl(j.url ?? "")).catch(() => {});
+		fetch("/live/api/overlay").then((r) => r.json()).then(setUrls).catch(() => {});
 	}, []);
-	if (!url) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	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: t("rs.overlay")
+				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(true);
-						setTimeout(() => setCopied(false), 1500);
+				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")
 					}),
-					children: copied ? 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: t("rs.overlay.d")
+				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
@@ -35217,6 +35258,29 @@ function LiveView(props) {
 	const [subStyle, setSubStyle] = (0, react.useState)(() => loadStyle(lines));
 	const [delay, setDelay] = (0, react.useState)(8);
 	const [theater, setTheater] = (0, react.useState)(false);
+	const [sideOpen, setSideOpenRaw] = (0, react.useState)(() => store.get("sideOpen", true));
+	const setSideOpen = (v) => {
+		setSideOpenRaw(v);
+		store.set("sideOpen", v);
+	};
+	const [sideW, setSideWRaw] = (0, react.useState)(() => store.get("sideW", 380));
+	const mainRef = (0, react.useRef)(null);
+	const dragSide = (e) => {
+		e.preventDefault();
+		const box = mainRef.current?.getBoundingClientRect();
+		if (!box) return;
+		const move = (ev) => setSideWRaw(Math.round(Math.min(box.width * .6, Math.max(280, box.right - ev.clientX - 8))));
+		const up = () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+			setSideWRaw((w) => {
+				store.set("sideW", w);
+				return w;
+			});
+		};
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+	};
 	const [tab, setTab] = (0, react.useState)("transcript");
 	const [query, setQuery] = (0, react.useState)("");
 	const [trMode, setTrMode] = (0, react.useState)("lines");
@@ -35929,7 +35993,8 @@ function LiveView(props) {
 		})]
 	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `dshl ${theater && !activeBench ? "theater" : ""} ${pageMode ? "page" : ""} ${activeBench ? "bench" : ""}`,
+		className: `dshl ${theater && !activeBench ? "theater" : ""} ${pageMode ? "page" : ""} ${activeBench ? "bench" : ""} ${pageMode && !sideOpen && !activeBench ? "noside" : ""}`,
+		style: pageMode ? { ["--side-w"]: `${sideW}px` } : void 0,
 		"data-dsh-own-drop": "dsh-vidi",
 		onDragEnter: (e) => {
 			if (e.dataTransfer.types.includes("Files")) e.stopPropagation();
@@ -36031,6 +36096,13 @@ function LiveView(props) {
 							open: settingsOpen,
 							onOpen: setSettingsOpen,
 							t
+						}),
+						pageMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: `dshl-ctl icon ${sideOpen ? "on" : ""}`,
+							title: t(sideOpen ? "side.hide" : "side.show"),
+							"aria-pressed": sideOpen,
+							onClick: () => setSideOpen(!sideOpen),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.sidePanel, {})
 						})
 					]
 				})
@@ -36060,6 +36132,7 @@ function LiveView(props) {
 				children: emptyBox
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
 				className: "dshl-main",
+				ref: mainRef,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "dshl-col",
 					children: !hasMain || !job ? emptyBox : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
@@ -36211,9 +36284,13 @@ function LiveView(props) {
 							children: transcriptBox
 						})
 					] })
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
 					className: "dshl-side",
-					children: activeBench && view ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					children: [pageMode && !activeBench && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dshl-resize",
+						onPointerDown: dragSide,
+						title: t("side.resize")
+					}), activeBench && view ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dshl-benchbox",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Guard, {
 							name: `workbench ${activeBench.id}`,
@@ -36230,7 +36307,7 @@ function LiveView(props) {
 						hasVideo: !!job,
 						jobsDir,
 						t
-					}) : transcriptBox
+					}) : transcriptBox]
 				})]
 			}),
 			dragging && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -36299,7 +36376,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)(() => {
@@ -36801,6 +36878,12 @@ const en = {
 	"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",
+	"side.hide": "Hide the chat",
+	"side.show": "Show the chat",
+	"side.resize": "Drag to change the width",
+	"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",
@@ -37179,6 +37262,12 @@ const zh = {
 	"rs.overlay": "OBS 字幕叠加（浏览器源）",
 	"rs.overlay.d": "在 OBS 里加一个「浏览器源」，填这个地址（1920×1080）：透明背景上只有最新的字幕，叠在摄像头或任何画面上。地址后加 ?lines=zh,src&size=4.5 可以选行和字号。",
 	"rs.copy": "复制",
+	"side.hide": "收起对话",
+	"side.show": "展开对话",
+	"side.resize": "拖动调整宽度",
+	"rs.openPage": "打开",
+	"rs.screen": "字幕大屏（16:9）",
+	"rs.screen.d": "只有字幕、字很大，适合大屏和投影：在同一网络里任何浏览器打开、全屏即可（本机用 {local}）。地址后加 ?theme=light 换浅色；也可以作为 OBS 的一个独立画面来源。",
 	"rs.content": "内容",
 	"rs.c.burn": "画面 + 字幕",
 	"rs.c.clean": "只要画面",
@@ -37708,12 +37797,18 @@ html[data-platform='darwin'] .dshl-panelwrap .dshl.page .dshl-top { padding-top:
 html[data-platform='darwin'] .dshl.page .dshl-top { -webkit-app-region: drag; app-region: drag; }
 html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, .dshl-select, .dshl-pick) { -webkit-app-region: no-drag; app-region: no-drag; }
 .dshl.page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
-.dshl.page .dshl-main { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 420px); align-items: stretch; padding-bottom: 16px; }
+.dshl.page .dshl-main { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) var(--side-w, clamp(320px, 30vw, 420px)); align-items: stretch; padding-bottom: 16px; }
 /* Video page: player on top, then the status row, then subtitles/glossary filling what is left; chat on the right. */
 .dshl.page .dshl-col { display: flex; flex-direction: column; min-height: 0; container-type: size; }
 .dshl.page .dshl-col > .dshl-drop { flex: 1; aspect-ratio: auto; min-height: 0; }
 .dshl.page .dshl-stage { flex: none; width: 100%; max-height: max(240px, calc(100cqh - 270px)); }
-.dshl.page .dshl-side { position: static; height: 100%; max-height: none; }
+.dshl.page .dshl-side { position: relative; top: auto; height: 100%; max-height: none; }
+.dshl.page.noside .dshl-main { grid-template-columns: minmax(0, 1fr); }
+.dshl.page.noside .dshl-side { display: none; }
+/* Drag the chat panel's left edge to change its width; the player and subtitles take the rest. */
+.dshl-resize { position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 8px; cursor: col-resize; }
+.dshl-resize::after { content: ''; position: absolute; top: 50%; left: 2px; width: 3px; height: 36px; border-radius: 2px; background: var(--line); transform: translateY(-50%); opacity: 0; transition: opacity .15s; }
+.dshl-resize:hover::after { opacity: 1; }
 /* Workbench open: the video and its subtitles keep a column on the left; the bench takes the rest. */
 .dshl.page.bench .dshl-main { grid-template-columns: clamp(340px, 32vw, 520px) minmax(0, 1fr); }
 .dshl-lag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -2px 0 8px; padding: 7px 12px; border-radius: 8px; background: var(--l1, rgba(0,0,0,.04)); color: var(--muted); font-size: 12.5px; }
@@ -37734,6 +37829,7 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, .
 .dshl.page.theater .dshl-stage { max-height: 100cqh; }
 @media (max-width: 1000px) {
   .dshl.page { display: block; overflow: auto; }
+  .dshl-resize { display: none; }
   .dshl.page.bench .dshl-main { grid-template-columns: minmax(0, 1fr); }
   .dshl.page.bench .dshl-side { height: auto; min-height: 0; }
   .dshl-benchbox { overflow: visible; }
@@ -37966,8 +38062,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

@@ -4725,6 +4725,8 @@ var Stream = class {
 	cjk;
 	open = [];
 	done = [];
+	/** When the last piece arrived (wall clock, ms). */
+	lastWall = 0;
 	constructor(cjk) {
 		this.cjk = cjk;
 	}
@@ -4754,18 +4756,51 @@ var Stream = class {
 		this.push(p);
 	}
 	push(p) {
+		this.lastWall = Date.now();
 		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();
 	}
+	/** End the sentence at its last comma or full stop (the rest starts the next one); false when it has none. */
+	closeAtPause() {
+		const text = this.text;
+		let cut = -1;
+		for (let i = text.length - 2; i > 0; i--) if (/[，。、；：！？,;:!?]/.test(text[i])) {
+			cut = i + 1;
+			break;
+		}
+		if (cut <= 0) return false;
+		const head = [], tail = [];
+		let n = 0;
+		for (const p of this.open) {
+			if (n + p.text.length <= cut) head.push(p);
+			else if (n >= cut) tail.push(p);
+			else {
+				head.push({
+					t: p.t,
+					text: p.text.slice(0, cut - n)
+				});
+				tail.push({
+					t: p.t,
+					text: p.text.slice(cut - n)
+				});
+			}
+			n += p.text.length;
+		}
+		this.open = head;
+		this.close();
+		this.open = tail;
+		return true;
+	}
 	close() {
 		const text = this.text.trim();
 		if (text) this.done.push({
 			text,
 			start: this.open[0].t,
-			end: this.open.at(-1).t
+			end: this.open.at(-1).t,
+			wall: Date.now()
 		});
 		this.open = [];
 	}
@@ -4791,6 +4826,11 @@ var OpenAITranslateProvider = class {
 	reconnects = 0;
 	/** Audio sent so far (s); a session's positions count from `base`. */
 	sent = 0;
+	/** Audio waiting to be sent: the service listens in real time, so bursts (a recording read from its
+	* start) go up at most a little faster than that. */
+	queue = [];
+	queued = 0;
+	drain;
 	base = 0;
 	src = new Stream(false);
 	tr;
@@ -4801,6 +4841,8 @@ var OpenAITranslateProvider = class {
 	seq = 0;
 	/** End of the last finished line (s): everything before it is on screen. */
 	readyAt = 0;
+	/** Where the last line ends on screen (lines never overlap). */
+	lastEnd = 0;
 	/** Arrival delay of text after its audio position, for the page (s). */
 	lag = 0;
 	connectedAt = 0;
@@ -4821,6 +4863,7 @@ var OpenAITranslateProvider = class {
 		this.onError = onError;
 		await this.connect();
 		this.quiet = setInterval(() => this.settle(), 400);
+		this.drain = setInterval(() => this.sendDue(), 100);
 	}
 	connect() {
 		return new Promise((resolve, reject) => {
@@ -4874,35 +4917,52 @@ var OpenAITranslateProvider = class {
 	}
 	push(pcm) {
 		if (this.stopped) return;
-		this.send({
-			type: "session.input_audio_buffer.append",
-			audio: this.up.push(Buffer.from(pcm)).toString("base64")
-		});
-		this.sent += pcm.length / BYTES_PER_SEC;
+		this.queue.push(Buffer.from(pcm));
+		this.queued += pcm.length / BYTES_PER_SEC;
+		this.sendDue();
+	}
+	/** Send queued audio, everything including silence, no faster than 1.5× real time since the session began. */
+	sendDue() {
+		if (this.ws?.readyState !== WebSocket.OPEN) return;
+		const allowed = this.base + (Date.now() - this.connectedAt) / 1e3 * 1.5 + 2;
+		while (this.queue.length && this.sent < allowed) {
+			const pcm = this.queue.shift();
+			this.queued -= pcm.length / BYTES_PER_SEC;
+			this.send({
+				type: "session.input_audio_buffer.append",
+				audio: this.up.push(pcm).toString("base64")
+			});
+			this.sent += pcm.length / BYTES_PER_SEC;
+		}
 	}
-	/** Audio sent but not yet in a finished line. */
+	/** Audio received but not yet in a finished line (queued, or sent and still being worked on). */
 	backlog() {
-		return Math.max(0, this.sent - this.readyAt);
+		return this.queued + Math.max(0, this.sent - this.readyAt);
 	}
 	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 behind = Math.max(0, this.sent - t);
+			this.lag = this.lag ? this.lag * .9 + behind * .1 : behind;
 			const piece = {
 				t,
 				text: String(ev.delta ?? "")
 			};
 			if (ev.type === "session.input_transcript.delta") this.src.add(piece);
-			else this.tr.add(piece);
+			else {
+				const next = this.src.done[this.srcUsed];
+				if (next && this.tr.text.trim() && t - next.end >= 1.2) {
+					if (!this.tr.closeAtPause() && t - next.end >= 3) this.tr.close();
+				}
+				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();
+		for (const s of [this.src, this.tr]) if (s.last !== void 0 && Date.now() - s.lastWall > QUIET_SEC * 1e3) s.close();
 		this.pair(false);
 		this.draft();
 	}
@@ -4913,7 +4973,10 @@ var OpenAITranslateProvider = class {
 	*/
 	pair(all) {
 		while (this.tr.done.length) {
-			const t = this.tr.done.shift();
+			const t = this.tr.done[0];
+			const srcReady = this.srcUsed < this.src.done.length && this.src.done[this.srcUsed].end <= t.end + .5;
+			if (!all && !srcReady && this.src.text.trim() && Date.now() - t.wall < 1500) break;
+			this.tr.done.shift();
 			const want = Array.from(t.text).length * this.ratio;
 			const src = [];
 			let len = 0;
@@ -4936,28 +4999,37 @@ var OpenAITranslateProvider = class {
 	}
 	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);
+		const spoken = src.length ? {
+			start: src[0].start - .6,
+			end: src.at(-1).end - .2
+		} : {
+			start: (t?.start ?? 0) - 1.4,
+			end: (t?.end ?? 0) - .8
+		};
+		const start = Math.max(0, this.lastEnd, spoken.start);
+		const end = Math.max(start + 1, spoken.end);
+		this.lastEnd = end;
 		this.emit?.({
 			key: `ot:${this.seq++}`,
 			start,
-			end: Math.max(end, start + .8),
+			end,
 			src: srcText,
 			tr: t ? { [this.opts.target]: t.text } : void 0,
 			final: true
 		});
-		this.readyAt = Math.max(this.readyAt, end);
+		this.readyAt = Math.max(this.readyAt, t?.end ?? end, end);
 	}
 	/** 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);
+		const from = this.src.done[this.srcUsed]?.start ?? this.src.start;
+		const start = Math.max(0, this.lastEnd, from !== void 0 ? from - .6 : (this.tr.start ?? 0) - 1.4);
 		this.emit?.({
 			key: `ot:${this.seq}`,
 			start,
-			end: Math.max(this.tr.last ?? start, start + .8),
+			end: Math.max(start + 1, (this.src.last ?? this.tr.last ?? start) - .2),
 			src: srcText,
 			tr: { [this.opts.target]: tr },
 			final: false
@@ -4970,6 +5042,7 @@ var OpenAITranslateProvider = class {
 	async stop() {
 		await new Promise((r) => setTimeout(r, 2500));
 		if (this.quiet) clearInterval(this.quiet);
+		if (this.drain) clearInterval(this.drain);
 		this.src.close();
 		this.tr.close();
 		this.pair(true);
@@ -5046,11 +5119,19 @@ function startOverlay(port, current, onJob, log) {
 			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, "127.0.0.1", () => log(`overlay: http://127.0.0.1:${port}/overlay`));
+	server.listen(port, () => log(`overlay: http://127.0.0.1:${port}/overlay, /screen`));
 	return () => {
 		offJob();
 		detach?.();
@@ -5098,6 +5179,63 @@ function connect() {
 }
 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);
@@ -5865,7 +6003,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` });
+			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) => [

package/package.json

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