dsh-vidi 0.7.1 → 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);
@@ -35239,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");
@@ -35951,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();
@@ -36053,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, {})
 						})
 					]
 				})
@@ -36082,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: [
@@ -36233,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}`,
@@ -36252,7 +36307,7 @@ function LiveView(props) {
 						hasVideo: !!job,
 						jobsDir,
 						t
-					}) : transcriptBox
+					}) : transcriptBox]
 				})]
 			}),
 			dragging && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -36823,6 +36878,9 @@ 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.",
@@ -37204,6 +37262,9 @@ 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 的一个独立画面来源。",
@@ -37736,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; }
@@ -37762,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; }

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);

package/package.json

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