dsh-vidi 0.8.6 → 0.8.8

package/lib/client.js

@@ -33608,13 +33608,22 @@ const fmt = (s) => {
 * stage, so subtitles (sized in container units) and menus come along.
 */
 const Player = (0, react.forwardRef)(function Player(props, ref) {
-	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 { preview, 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);
 	const [ready, setReady] = (0, react.useState)(false);
 	const [playing, setPlaying] = (0, react.useState)(false);
 	const [muted, setMuted] = (0, react.useState)(false);
+	const [bigLive, setBigLive] = (0, react.useState)(true);
+	const liveBig = !!preview && bigLive;
+	(0, react.useEffect)(() => {
+		const el = video.current;
+		if (el && liveBig) {
+			el.muted = true;
+			setMuted(true);
+		}
+	}, [liveBig]);
 	const [volume, setVolume] = (0, react.useState)(1);
 	const [now, setNow] = (0, react.useState)(0);
 	const [edge, setEdge] = (0, react.useState)(0);
@@ -33806,6 +33815,7 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 		const pos = h?.liveSyncPosition ?? edge - delay;
 		if (pos != null && isFinite(pos)) el.currentTime = pos;
 		el.play();
+		setBigLive(true);
 	}, [edge, delay]);
 	const applyDelay = (0, react.useCallback)((v) => {
 		onDelay(v);
@@ -33878,13 +33888,20 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 	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) ?? (trail ? cues.filter((c) => c.start <= now && c.end > now - 8).at(-1) : void 0);
+	const textsOf = (cue) => {
+		const out = {};
+		if (!cue) return out;
+		out.src = noStop(cue.src);
+		for (const [k, v] of Object.entries(cue.tr ?? {})) if (v && v.trim() !== cue.src.trim()) out[k] = noStop(v);
+		if (spoken) out[spoken] = out.src;
+		return out;
+	};
+	const newest = cues.at(-1);
+	const liveCue = newest && (!newest.final || (subsAt ?? 0) - newest.end < 6) ? newest : void 0;
+	const liveTexts = ccOn ? textsOf(liveCue) : {};
 	const texts = {};
 	if (ccOn) {
-		if (current) {
-			texts.src = noStop(current.src);
-			for (const [k, v] of Object.entries(current.tr ?? {})) if (v && v.trim() !== current.src.trim()) texts[k] = noStop(v);
-			if (spoken) texts[spoken] = texts.src;
-		}
+		if (current) Object.assign(texts, textsOf(current));
 		for (const [k, list] of Object.entries(siteCues ?? {})) texts[k] = list.find((c) => c.start - .2 <= now && now <= c.end + .3)?.text;
 	}
 	const snapshot = async () => {
@@ -34027,16 +34044,52 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 			if (!e.target.closest(".dshl-controls, .dshl-menu")) toggleFull();
 		},
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
-				ref: video,
-				playsInline: true,
-				onClick: togglePlay
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `dshl-vbox ${liveBig ? "pip" : ""}`,
+				onClick: liveBig ? () => setBigLive(false) : void 0,
+				title: liveBig ? t("own.toDelayed") : void 0,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+						ref: video,
+						playsInline: true,
+						onClick: liveBig ? void 0 : togglePlay
+					}),
+					liveBig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubtitleOverlay, {
+						texts,
+						style,
+						draft: current ? !current.final : false
+					}),
+					liveBig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dshl-piplabel",
+						children: t("own.delayed")
+					})
+				]
 			}),
-			!ready && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			preview && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `dshl-livecam ${liveBig ? "" : "pip"}`,
+				onClick: liveBig ? void 0 : () => setBigLive(true),
+				title: liveBig ? void 0 : t("own.toLive"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: preview,
+						alt: ""
+					}),
+					!liveBig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubtitleOverlay, {
+						texts: liveTexts,
+						style,
+						draft: liveCue ? !liveCue.final : false
+					}),
+					!liveBig && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dshl-piplabel",
+						children: t("own.live")
+					})
+				]
+			}),
+			!ready && !liveBig && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dshl-overlay",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "dshl-spinner" }), waitingText]
 			}),
-			ready && held && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ready && held && !liveBig && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dshl-holdnote",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { className: "dshl-spinner sm" }),
@@ -34048,7 +34101,11 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 					})
 				]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubtitleOverlay, {
+			liveBig ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubtitleOverlay, {
+				texts: liveTexts,
+				style,
+				draft: liveCue ? !liveCue.final : false
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubtitleOverlay, {
 				texts,
 				style,
 				draft: current ? !current.final : false
@@ -34075,13 +34132,13 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 				]
 			}),
 			ready && live && !vod && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				className: `dshl-livebadge ${atLive ? "on" : ""}`,
+				className: `dshl-livebadge ${atLive || liveBig ? "on" : ""}`,
 				onClick: goLive,
 				title: t("player.goLive"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.live, {}),
 					" ",
-					atLive ? t("player.live") : t("player.behind").replace("{s}", fmt(behind))
+					atLive || liveBig ? t("player.live") : t("player.behind").replace("{s}", fmt(behind))
 				]
 			}),
 			openMenu && (() => {
@@ -34162,6 +34219,7 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 							value: Math.min(now, total),
 							onChange: (e) => {
 								if (video.current) video.current.currentTime = Math.min(Number(e.target.value), edge);
+								setBigLive(false);
 							},
 							"aria-label": "seek"
 						})
@@ -36474,6 +36532,7 @@ function LiveView(props) {
 							duration: job.duration,
 							subsAt: subs.state === "off" ? void 0 : subs.at,
 							waitingText: job.status === "resolving" ? statusText : t("player.waiting"),
+							preview: job.preview && job.status === "running" ? `/live/api/preview?jobId=${encodeURIComponent(job.id)}` : void 0,
 							cues,
 							trail: mode === "live" && !job.vod,
 							siteCues: shownSite,
@@ -37359,6 +37418,10 @@ const en = {
 	"dev.blocked": "No picture or sound from the device: DeepSeek Harness needs the system’s permission. Open System Settings, switch DeepSeek Harness on, then retry.",
 	"dev.denied": "DeepSeek Harness needs permission to use the {d}. Open System Settings, switch it on in the list, then retry.",
 	"dev.and": " and ",
+	"own.live": "Live",
+	"own.delayed": "As pushed out",
+	"own.toLive": "Show the live picture large",
+	"own.toDelayed": "Show what is pushed out (with the subtitle delay) large",
 	"dev.stalled": "The camera sent pictures but they could not be recorded. Retry; if it happens again, pick another camera.",
 	"st.failedEarlier": "This one did not finish last time.",
 	"dev.k.camera": "camera",
@@ -37799,6 +37862,10 @@ const zh = {
 	"dev.blocked": "设备没有传来画面和声音：DeepSeek Harness 需要系统授权。点「打开系统设置」，在列表里打开 DeepSeek Harness，再点重试。",
 	"dev.denied": "DeepSeek Harness 需要{d}权限。点「打开系统设置」，在列表里打开它，再点重试。",
 	"dev.and": "和",
+	"own.live": "实时画面",
+	"own.delayed": "推流画面",
+	"own.toLive": "放大实时画面",
+	"own.toDelayed": "放大推流画面（按字幕模式延迟）",
 	"dev.stalled": "摄像头有画面传来，但没能录下来。点重试；还不行就换一个摄像头试试。",
 	"st.failedEarlier": "上次这个没有成功。",
 	"dev.k.camera": "摄像头",
@@ -38327,6 +38394,15 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, .
 .dshl-stage.full { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
 .dshl-stage.pagefull { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
 .dshl-stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
+/* Own camera: the recording sits in a box that becomes a small window while the real-time picture is large. */
+.dshl-vbox { position: absolute; inset: 0; container-type: inline-size; }
+.dshl-livecam { position: absolute; inset: 0; z-index: 1; container-type: inline-size; background: #000; }
+.dshl-livecam img { display: block; width: 100%; height: 100%; object-fit: contain; }
+.dshl-vbox.pip, .dshl-livecam.pip { inset: auto 14px 74px auto; z-index: 3; width: 28%; min-width: 180px; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px;
+  outline: 1px solid rgba(255,255,255,.28); box-shadow: 0 6px 24px rgba(0,0,0,.5); cursor: pointer; transition: bottom .25s; }
+.dshl-stage.idle .dshl-vbox.pip, .dshl-stage.idle .dshl-livecam.pip { bottom: 14px; }
+.dshl-stage .pip .dshl-sub { transform: translateX(-50%) !important; }
+.dshl-piplabel { position: absolute; top: 6px; left: 6px; z-index: 3; padding: 2px 7px; border-radius: 5px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; pointer-events: none; }
 .dshl-stage.idle { cursor: none; }
 .dshl-holdnote { position: absolute; top: 14px; left: 50%; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; transform: translateX(-50%);
   background: rgba(20,20,22,.78); color: #f2f2f3; font-size: 12.5px; white-space: nowrap; backdrop-filter: blur(8px); }
@@ -38350,11 +38426,11 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, .
 .dshl-stage:not(.idle) .dshl-sub[data-pos=bottom] { transform: translate(-50%, -64px); }
 .dshl-stage:not(.idle) .dshl-sub[data-pos=top] { transform: translate(-50%, 34px); }
 
-.dshl-livebadge { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: 6px;
-  background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: opacity .25s; }
-.dshl-livebadge svg { color: #9a9a9a; }
-.dshl-livebadge.on { background: var(--live); }
-.dshl-livebadge.on svg { color: #fff; animation: dshl-pulse 1.6s ease-in-out infinite; }
+.dshl-livebadge { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border: 0; border-radius: 999px;
+  background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff !important; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; line-height: 1; cursor: pointer; transition: opacity .25s, background .15s; }
+.dshl-livebadge:hover { background: rgba(0,0,0,.6); }
+.dshl-livebadge svg { width: 10px; height: 10px; flex: none; color: rgba(255,255,255,.5); }
+.dshl-livebadge.on svg { color: #ff4d4f; filter: drop-shadow(0 0 3px rgba(255,77,79,.8)); animation: dshl-pulse 1.6s ease-in-out infinite; }
 
 .dshl-toast { position: absolute; top: 12px; left: 50%; z-index: 6; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 14px;
   border-radius: 10px; background: rgba(20,20,22,.86); color: #fff; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.3); transform: translateX(-50%); }

package/lib/index.mjs

@@ -1990,9 +1990,14 @@ const AHEAD_MAX_LINES = 10;
 */
 /** Drop the first `skip` seconds after decoding (an output -ss; empty when there is nothing to drop). */
 const seekAfter = (skip) => skip > .01 ? ["-ss", skip.toFixed(3)] : [];
+const SOI = Buffer.from([255, 216]);
+const EOI = Buffer.from([255, 217]);
 var LiveJob = class LiveJob extends EventEmitter {
 	opts;
 	deps;
+	/** Real-time picture (own sources): the newest JPEG frame, and whether frames are coming. */
+	lastFrame;
+	previewOn = false;
 	id;
 	status = "resolving";
 	message;
@@ -2076,6 +2081,7 @@ var LiveJob = class LiveJob extends EventEmitter {
 			vod: this.vod,
 			duration: this.duration,
 			recorded: this.vod ? void 0 : this.recordedSec(),
+			preview: this.previewOn,
 			loginBrowser: this.loginBrowser,
 			needsLogin: this.needsLogin,
 			hls: this.hlsName,
@@ -2463,11 +2469,43 @@ var LiveJob = class LiveJob extends EventEmitter {
 			join(hls, "seg_%05d.ts"),
 			join(hls, "index.m3u8")
 		];
+		const preview = (this.opts.source === "device" || this.opts.source === "push") && !!input.video;
+		if (preview) args.push("-map", input.video, "-an", "-vf", "scale=-2:540,fps=15", "-c:v", "mjpeg", "-q:v", "6", "-f", "image2pipe", "pipe:3");
 		const ff = spawn("ffmpeg", args, { stdio: [
 			"ignore",
 			"ignore",
-			"pipe"
+			"pipe",
+			preview ? "pipe" : "ignore"
 		] });
+		this.previewOn = false;
+		if (preview) {
+			let tail = Buffer.alloc(0);
+			ff.stdio[3].on("data", (chunk) => {
+				if (this.ffmpeg !== ff) return;
+				let buf = tail.length ? Buffer.concat([tail, chunk]) : chunk;
+				for (;;) {
+					const start = buf.indexOf(SOI);
+					if (start < 0) {
+						buf = Buffer.alloc(0);
+						break;
+					}
+					const end = buf.indexOf(EOI, start + 2);
+					if (end < 0) {
+						buf = buf.subarray(start);
+						break;
+					}
+					const frame = Buffer.from(buf.subarray(start, end + 2));
+					buf = buf.subarray(end + 2);
+					this.lastFrame = frame;
+					if (!this.previewOn) {
+						this.previewOn = true;
+						this.emit("state", this.summary());
+					}
+					this.emit("frame", frame);
+				}
+				tail = buf.length > 4e6 ? Buffer.alloc(0) : Buffer.from(buf);
+			});
+		}
 		this.ffmpeg = ff;
 		if (this.opts.source === "device") setTimeout(() => {
 			if (this.ffmpeg !== ff || this.segments().length) return;
@@ -2498,6 +2536,10 @@ var LiveJob = class LiveJob extends EventEmitter {
 			}
 		});
 		ff.on("exit", (code) => {
+			if (this.previewOn && this.ffmpeg === ff) {
+				this.previewOn = false;
+				this.lastFrame = void 0;
+			}
 			if (this.ffmpeg !== ff) return;
 			this.ffmpeg = void 0;
 			if (this.status !== "running") return;
@@ -6846,6 +6888,25 @@ function apply(ctx, config) {
 					saveAs: typeof b.saveAs === "string" ? b.saveAs.replace(/[\\/:*?"<>|]+/g, " ").slice(0, 150) : "audio"
 				}));
 			}
+			if (route === "preview") {
+				const job = jobs.get(url.searchParams.get("jobId") ?? "");
+				if (!job) return send(res, 404, { error: "no such job" });
+				res.writeHead(200, {
+					"content-type": "multipart/x-mixed-replace; boundary=vidiframe",
+					"cache-control": "no-store",
+					connection: "keep-alive"
+				});
+				const write = (f) => {
+					if (res.writableLength > 2e6) return;
+					res.write(`--vidiframe\r\nContent-Type: image/jpeg\r\nContent-Length: ${f.length}\r\n\r\n`);
+					res.write(f);
+					res.write("\r\n");
+				};
+				if (job.lastFrame) write(job.lastFrame);
+				job.on("frame", write);
+				req.on("close", () => job.off("frame", write));
+				return;
+			}
 			if (route === "job") {
 				const jid = url.searchParams.get("jobId");
 				const job = jid ? jobs.get(jid) : jobForConversation(url.searchParams.get("conversationId") ?? "");

package/package.json

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