dsh-vidi 0.7.0 → 0.7.1

package/lib/client.js

@@ -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",
@@ -34628,38 +34639,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
@@ -36299,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)(() => {
@@ -36801,6 +36823,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",
+	"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 +37204,9 @@ const zh = {
 	"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": "只要画面",
@@ -37966,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

@@ -5046,11 +5046,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 +5106,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 +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` });
+			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.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",