dsh-vidi 0.9.5 → 0.10.1

package/lib/client.js

@@ -365,6 +365,22 @@ const Icon = {
 		...P,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7 4v5a5 5 0 0 0 5 5 5 5 0 0 1 5 5v1M17 4v5a5 5 0 0 1-3 4.6M12 17l-3 3M12 17l3 3" })
 	}),
+	/** A speaking head: the voiceover. */
+	voice: () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		width: "18",
+		height: "18",
+		...P,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "10",
+				cy: "8.5",
+				r: "3.5"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17 6.5a4 4 0 0 1 0 5M19.5 4a7.5 7.5 0 0 1 0 10" })
+		]
+	}),
 	timer: () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		viewBox: "0 0 24 24",
 		width: "18",
@@ -1280,6 +1296,660 @@ function LoginDialog(props) {
 	});
 }
 
+// src/client/DubPanel.tsx
+async function post$3(path, body) {
+	const r = await fetch(`/live/api/${path}`, {
+		method: "POST",
+		headers: { "content-type": "application/json" },
+		body: JSON.stringify(body)
+	});
+	const j = await r.json().catch(() => ({}));
+	if (!r.ok) throw new Error(j.error ?? `HTTP ${r.status}`);
+	return j;
+}
+function useVoices(ui) {
+	const [list, setList] = (0, react.useState)(null);
+	const reload = () => fetch(`/live/api/voices?ui=${ui}`).then((r) => r.json()).then(setList).catch(() => {});
+	(0, react.useEffect)(() => {
+		reload();
+	}, [ui]);
+	return {
+		list,
+		reload
+	};
+}
+const VENDOR_NAMES = {
+	openai: "OpenAI",
+	siliconflow: "SiliconFlow",
+	gemini: "Gemini",
+	elevenlabs: "ElevenLabs"
+};
+const vendorName = (v, t) => v === "siliconflow" ? t("dub.sf") : VENDOR_NAMES[v] ?? v;
+/** One test sentence at a time, played right here. */
+function useTry() {
+	const audio = (0, react.useRef)(null);
+	const [busy, setBusy] = (0, react.useState)(null);
+	const [error, setError] = (0, react.useState)("");
+	const play = async (voice, lang) => {
+		audio.current?.pause();
+		setBusy(voice);
+		setError("");
+		try {
+			const r = await fetch("/live/api/voices/try", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					voice,
+					lang
+				})
+			});
+			if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error ?? `HTTP ${r.status}`);
+			const url = URL.createObjectURL(await r.blob());
+			const a = new Audio(url);
+			audio.current = a;
+			a.onended = () => URL.revokeObjectURL(url);
+			await a.play();
+		} catch (e) {
+			setError(e.message);
+		}
+		setBusy(null);
+	};
+	(0, react.useEffect)(() => () => audio.current?.pause(), []);
+	return {
+		play,
+		busy,
+		error
+	};
+}
+/**
+* The player's voiceover menu: switch it on, which subtitle language is
+* spoken, with which voice (try it), and what happens to the original sound.
+*/
+function DubMenu(props) {
+	const { jobId, view, langs, voices, onMake, at, t } = props;
+	const [error, setError] = (0, react.useState)("");
+	const tryer = useTry();
+	const set = async (patch) => {
+		setError("");
+		try {
+			await post$3("dub", {
+				jobId,
+				at,
+				...patch
+			});
+		} catch (e) {
+			setError(e.message);
+		}
+	};
+	if (!view) return null;
+	const none = voices && !voices.vendors.length;
+	const options = [...(voices?.mine ?? []).map((v) => ({
+		value: v.id,
+		label: v.label,
+		hint: vendorName(v.vendor, t),
+		group: t("dub.mine"),
+		disabled: !v.ready
+	})), ...(voices?.presets ?? []).map((v) => ({
+		value: v.id,
+		label: v.label,
+		group: vendorName(v.vendor, t)
+	}))];
+	const lang = langs.some((l) => l.value === view.lang) ? view.lang : langs[0]?.value ?? view.lang;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dshl-submenu dshl-dubmenu",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			className: `dshl-switchrow ${view.on ? "on" : ""}`,
+			disabled: !view.on && (!!none || !langs.length),
+			onClick: () => void set({
+				on: !view.on,
+				lang
+			}),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "n",
+				children: t("dub.enable")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "sw",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {})
+			})]
+		}), none ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "mt",
+			children: t("dub.noKey")
+		}) : !langs.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "mt",
+			children: t("dub.noLang")
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "slots",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "slot",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("dub.lang") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+						value: lang,
+						onChange: (v) => void set({ lang: v }),
+						options: langs
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					className: "slot",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("dub.voice") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "vrow",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+							value: view.voice,
+							onChange: (v) => void set({ voice: v }),
+							options,
+							placeholder: t("dub.pick")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "ghost try",
+							title: t("dub.try"),
+							"aria-label": t("dub.try"),
+							disabled: !!tryer.busy,
+							onClick: () => void tryer.play(view.voice, lang),
+							children: tryer.busy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.play, {})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					className: "swap make",
+					onClick: onMake,
+					children: ["＋ ", t("dub.make")]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "opts",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "opt",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("dub.original") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "seg",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: view.original === "duck" ? "on" : "",
+							onClick: () => void set({ original: "duck" }),
+							children: t("dub.duck")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: view.original === "off" ? "on" : "",
+							onClick: () => void set({ original: "off" }),
+							children: t("dub.off")
+						})]
+					})]
+				}),
+				(error || tryer.error || view.error) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "err",
+					children: error || tryer.error || t("dub.failed").replace("{e}", view.error ?? "")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt",
+					children: t("dub.how")
+				})
+			]
+		})] })]
+	});
+}
+/**
+* Make a voice from a recording: read a passage into the microphone, give a
+* file, or take someone talking in this video. The sample is sent to a
+* service that learns voices (SiliconFlow or ElevenLabs), and the new voice
+* is chosen for this video.
+*/
+function VoiceMaker(props) {
+	const { jobId, at, voices, onDone, onClose, t } = props;
+	const [source, setSource] = (0, react.useState)("mic");
+	const [mics, setMics] = (0, react.useState)([]);
+	const [mic, setMic] = (0, react.useState)("");
+	const [rec, setRec] = (0, react.useState)(null);
+	const [sample, setSample] = (0, react.useState)(null);
+	const [text, setText] = (0, react.useState)(voices.readAloud);
+	const [name, setName] = (0, react.useState)("");
+	const [vendor, setVendor] = (0, react.useState)(voices.clone[0] ?? "");
+	const [busy, setBusy] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)("");
+	const file = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		fetch("/live/api/devices").then((r) => r.json()).then((j) => {
+			const m = (j.devices ?? []).filter((d) => d.kind === "mic");
+			setMics(m);
+			setMic(m.find((d) => d.preferred)?.id ?? m[0]?.id ?? "");
+		}).catch(() => {});
+	}, []);
+	(0, react.useEffect)(() => {
+		if (rec?.state !== "recording") return;
+		const timer = window.setInterval(() => {
+			fetch("/live/api/voices/record").then((r) => r.json()).then((j) => {
+				if (j.error) {
+					setError(t("dub.micFailed").replace("{e}", j.error));
+					stop("cancel");
+					return;
+				}
+				if (j.state === "recording") setRec({
+					state: "recording",
+					sec: j.sec,
+					level: j.level
+				});
+				if (j.sec >= 29.5) stop("stop");
+			}).catch(() => {});
+		}, 120);
+		return () => window.clearInterval(timer);
+	}, [rec?.state]);
+	const startRec = async () => {
+		setError("");
+		setSample(null);
+		try {
+			await post$3("voices/record", {
+				action: "start",
+				mic
+			});
+			setRec({
+				state: "recording",
+				sec: 0,
+				level: 0
+			});
+		} catch (e) {
+			setError(e.message);
+		}
+	};
+	const stop = async (action) => {
+		setRec((r) => r ? {
+			...r,
+			state: "stopping"
+		} : r);
+		try {
+			const j = await post$3("voices/record", { action });
+			if (j.sample) {
+				if (j.dur < 4) setError(t("dub.tooShort"));
+				else setSample({
+					id: j.sample,
+					dur: j.dur
+				});
+			}
+		} catch (e) {
+			setError(e.message);
+		}
+		setRec(null);
+	};
+	const upload = async (f) => {
+		setBusy(true);
+		setError("");
+		setSample(null);
+		try {
+			const r = await fetch("/live/api/voices/upload", {
+				method: "POST",
+				body: f
+			});
+			const j = await r.json();
+			if (!r.ok) throw new Error(j.error);
+			setSample({
+				id: j.sample,
+				dur: j.dur
+			});
+			setText("");
+			if (!name) setName(f.name.replace(/\.[^.]+$/, "").slice(0, 30));
+		} catch (e) {
+			setError(e.message);
+		}
+		setBusy(false);
+	};
+	const fromVideo = async () => {
+		if (!jobId) return;
+		setBusy(true);
+		setError("");
+		setSample(null);
+		try {
+			const j = await post$3("voices/fromVideo", {
+				jobId,
+				at
+			});
+			setSample({
+				id: j.sample,
+				dur: j.dur
+			});
+			setText(j.text);
+			if (!name) setName(t("dub.videoVoice"));
+		} catch (e) {
+			setError(e.message);
+		}
+		setBusy(false);
+	};
+	const save = async () => {
+		if (!sample) return;
+		setBusy(true);
+		setError("");
+		try {
+			const j = await post$3("voices/save", {
+				sample: sample.id,
+				name: name.trim() || t("dub.myVoice"),
+				text,
+				vendor
+			});
+			onDone(j.id);
+		} catch (e) {
+			setError(e.message);
+		}
+		setBusy(false);
+	};
+	const pickSource = (s) => {
+		if (rec) return;
+		setSource(s);
+		setSample(null);
+		setError("");
+		setText(s === "mic" ? voices.readAloud : "");
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "dshl-modal",
+		role: "dialog",
+		"aria-modal": "true",
+		onMouseDown: (e) => {
+			if (e.target === e.currentTarget && !rec) onClose();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "box dshl-voicemaker",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: "ghost x",
+					onClick: () => {
+						if (rec) stop("cancel");
+						onClose();
+					},
+					title: t("login.close"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.close, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("dub.makeTitle") }),
+				!voices.clone.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("dub.noClone") }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dshl-seg src",
+						children: [
+							"mic",
+							"file",
+							"video"
+						].filter((s) => s !== "video" || jobId).map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: source === s ? "on" : "",
+							onClick: () => pickSource(s),
+							children: t(`dub.src.${s}`)
+						}, s))
+					}),
+					source === "mic" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "lead",
+							children: t("dub.micLead")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("blockquote", {
+							className: "read",
+							children: voices.readAloud
+						}),
+						mics.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "row",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("dev.audio") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+								value: mic,
+								onChange: setMic,
+								options: mics.map((m) => ({
+									value: m.id,
+									label: m.name
+								}))
+							})]
+						}),
+						rec ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "recbar",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dot" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "sec",
+									children: [rec.sec.toFixed(0), "″"]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "meter",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { style: { width: `${Math.min(100, rec.level * 140)}%` } })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: "dshl-btn primary",
+									disabled: rec.state !== "recording",
+									onClick: () => void stop("stop"),
+									children: t("dub.recStop")
+								})
+							]
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							className: "dshl-btn primary rec",
+							onClick: () => void startRec(),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dot" }), sample ? t("dub.recAgain") : t("dub.recStart")]
+						})
+					] }),
+					source === "file" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "lead",
+							children: t("dub.fileLead")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: file,
+							type: "file",
+							accept: "audio/*,video/*",
+							hidden: true,
+							onChange: (e) => {
+								const f = e.target.files?.[0];
+								if (f) upload(f);
+								e.target.value = "";
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "dshl-btn",
+							disabled: busy,
+							onClick: () => file.current?.click(),
+							children: busy ? t("dub.working") : t("dub.pickFile")
+						})
+					] }),
+					source === "video" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "lead",
+						children: t("dub.videoLead")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "dshl-btn",
+						disabled: busy,
+						onClick: () => void fromVideo(),
+						children: busy ? t("dub.working") : t("dub.takeVideo")
+					})] }),
+					sample && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "got",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
+								controls: true,
+								src: `/live/api/voices/sample?sample=${encodeURIComponent(sample.id)}`
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "row",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("dub.name") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									className: "dshl-input",
+									value: name,
+									placeholder: t("dub.myVoice"),
+									onChange: (e) => setName(e.target.value)
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "row top",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("dub.said") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+									className: "dshl-input",
+									rows: 3,
+									value: text,
+									placeholder: t("dub.saidHint"),
+									onChange: (e) => setText(e.target.value)
+								})]
+							}),
+							voices.clone.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "row",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("dub.by") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
+									value: vendor,
+									onChange: setVendor,
+									options: voices.clone.map((v) => ({
+										value: v,
+										label: vendorName(v, t)
+									}))
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "note",
+								children: t("dub.privacy").replace("{s}", vendorName(vendor, t))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "acts",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: "dshl-btn primary",
+									disabled: busy || !text.trim(),
+									onClick: () => void save(),
+									children: busy ? t("dub.working") : t("dub.save")
+								})
+							})
+						]
+					}),
+					error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "err",
+						children: error
+					})
+				] })
+			]
+		})
+	});
+}
+
+// src/client/dub.ts
+/** How loud the original stays while a voice speaks (with the original kept). */
+const DUCK = .16;
+/** A voice that came in this late (a live stream) still plays, shifted (s). */
+const LATE_MAX = 4;
+/**
+* Plays the voiceover with the video: each line's voice starts when the
+* picture reaches it, follows pause, seek and speed, and the original sound
+* is turned down under it (or off). The video's sound goes through Web Audio
+* from the first time the voiceover is switched on (a click, so the browser
+* lets it play); from then on it is mixed here.
+*/
+function useVoiceover(video, jobId, view) {
+	const ctx = (0, react.useRef)(null);
+	const graph = (0, react.useRef)(null);
+	const buffers = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const playing = (0, react.useRef)(/* @__PURE__ */ new Map());
+	/** Clips already played (or skipped) in this stretch of playback: a late one plays once. */
+	const done = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const last = (0, react.useRef)({
+		t: 0,
+		wall: 0
+	});
+	/** Media time where this stretch of continuous playback began (a seek or a pause starts a new one). */
+	const stretch = (0, react.useRef)(0);
+	const viewRef = (0, react.useRef)(view);
+	viewRef.current = view;
+	/** Route the video's sound through Web Audio (once per element). */
+	const ensureGraph = () => {
+		const el = video();
+		if (!el) return false;
+		if (graph.current?.el === el) return true;
+		try {
+			ctx.current ??= new AudioContext({ latencyHint: "interactive" });
+			const c = ctx.current;
+			const src = c.createMediaElementSource(el);
+			const orig = c.createGain(), voice = c.createGain();
+			src.connect(orig).connect(c.destination);
+			voice.connect(c.destination);
+			graph.current = {
+				el,
+				orig,
+				voice
+			};
+			return true;
+		} catch {
+			return false;
+		}
+	};
+	const stopAll = () => {
+		for (const p of playing.current.values()) try {
+			p.src.stop();
+		} catch {}
+		playing.current.clear();
+	};
+	const load = (clip) => {
+		const key = `${clip.id}.${clip.v}`;
+		if (buffers.current.has(key) || !jobId || !ctx.current) return;
+		buffers.current.set(key, "loading");
+		const c = ctx.current;
+		fetch(`/live/api/dub/clip?jobId=${encodeURIComponent(jobId)}&id=${clip.id}&v=${clip.v}`).then((r) => r.ok ? r.arrayBuffer() : Promise.reject(new Error(String(r.status)))).then((b) => c.decodeAudioData(b)).then((buf) => {
+			buffers.current.set(key, buf);
+		}).catch(() => {
+			buffers.current.set(key, "failed");
+			window.setTimeout(() => buffers.current.delete(key), 5e3);
+		});
+	};
+	(0, react.useEffect)(() => {
+		if (!view?.on) return;
+		if (ensureGraph()) ctx.current?.resume();
+	}, [view?.on]);
+	(0, react.useEffect)(() => {
+		const tick = () => {
+			const el = video();
+			const v = viewRef.current;
+			const g = graph.current;
+			if (!g || !ctx.current || g.el !== el) {
+				stopAll();
+				return;
+			}
+			const c = ctx.current;
+			const on = !!v?.on;
+			const now = el.currentTime;
+			const expected = last.current.t + (el.paused ? 0 : (performance.now() - last.current.wall) / 1e3 * el.playbackRate);
+			if (Math.abs(now - expected) > .6) {
+				stopAll();
+				done.current.clear();
+				stretch.current = now;
+			}
+			last.current = {
+				t: now,
+				wall: performance.now()
+			};
+			if (!on || el.paused || el.ended || el.seeking || el.readyState < 3) {
+				for (const id of playing.current.keys()) done.current.delete(id);
+				stretch.current = now;
+				stopAll();
+				g.orig.gain.setTargetAtTime(on && v?.original === "off" ? 0 : 1, c.currentTime, .05);
+				return;
+			}
+			if (c.state === "suspended") c.resume();
+			const clips = v.clips;
+			g.voice.gain.setTargetAtTime(el.muted ? 0 : el.volume, c.currentTime, .03);
+			for (const clip of clips) {
+				if (clip.at > now + 8) break;
+				if (clip.at + clip.dur > now - 1) load(clip);
+			}
+			for (const clip of clips) {
+				if (clip.at > now + .05) break;
+				if (playing.current.has(clip.id) || done.current.has(clip.id)) continue;
+				const offset = now - clip.at;
+				if (offset >= clip.dur) continue;
+				const buf = buffers.current.get(`${clip.id}.${clip.v}`);
+				if (!buf || buf === "loading" || buf === "failed") {
+					if (offset > LATE_MAX) done.current.add(clip.id);
+					continue;
+				}
+				const src = c.createBufferSource();
+				src.buffer = buf;
+				src.playbackRate.value = el.playbackRate;
+				src.connect(g.voice);
+				const late = offset > .35 && clip.at >= stretch.current + .1;
+				src.start(0, late ? 0 : Math.max(0, offset));
+				playing.current.set(clip.id, {
+					src,
+					at: clip.at
+				});
+				done.current.add(clip.id);
+				src.onended = () => {
+					if (playing.current.get(clip.id)?.src === src) playing.current.delete(clip.id);
+				};
+			}
+			for (const p of playing.current.values()) p.src.playbackRate.value = el.playbackRate;
+			const target = v.original === "off" ? 0 : playing.current.size ? DUCK : 1;
+			g.orig.gain.setTargetAtTime(target, c.currentTime, playing.current.size ? .04 : .25);
+		};
+		const timer = window.setInterval(tick, 50);
+		return () => window.clearInterval(timer);
+	}, [jobId]);
+	(0, react.useEffect)(() => () => {
+		stopAll();
+		buffers.current.clear();
+		done.current.clear();
+	}, [jobId]);
+}
+
 // node_modules/hls.js/dist/hls.mjs
 const isFiniteNumber = Number.isFinite || function(value) {
 	return typeof value === "number" && isFinite(value);
@@ -33698,6 +34368,7 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 			if (video.current) video.current.currentTime = Math.max(0, time);
 		},
 		closeMenu: () => setMenu(null),
+		media: () => video.current,
 		hold: (text, onSkip) => {
 			const el = video.current;
 			if (!el) return;
@@ -35665,6 +36336,9 @@ function LiveView(props) {
 	const [job, setJob] = (0, react.useState)(null);
 	const [cues, setCues] = (0, react.useState)([]);
 	const [terms, setTerms] = (0, react.useState)([]);
+	/** Voiceover of this video (settings and the voices made so far), and the voices on offer. */
+	const [dub, setDub] = (0, react.useState)(null);
+	const [makingVoice, setMakingVoice] = (0, react.useState)(false);
 	const [tasks, setTasks] = (0, react.useState)([]);
 	const [armed, setArmed] = (0, react.useState)(null);
 	const [error, setError] = (0, react.useState)("");
@@ -35738,6 +36412,7 @@ function LiveView(props) {
 		store.set("device.audio", v);
 	};
 	const ui = t("view.live") === "Video" ? "en" : "zh";
+	const { list: voices, reload: reloadVoices } = useVoices(ui);
 	const langOptions = (0, react.useMemo)(() => Object.entries(langs).filter(([k]) => k !== "auto").map(([k, v]) => [k, langLabel(k, ui, v)]), [langs, ui]);
 	const langName = (0, react.useCallback)((k) => k === "src" ? t("sub.source") : langLabel(k, ui, langs[k]), [
 		langs,
@@ -35806,12 +36481,40 @@ function LiveView(props) {
 			}
 		}).catch(() => {});
 	}), [sessionId]);
+	useVoiceover(() => player.current?.media() ?? null, job?.id, dub);
+	const dubAt = Math.floor(now / 5);
+	(0, react.useEffect)(() => {
+		if (!job?.id || !dub?.on) return;
+		fetch("/live/api/dub/focus", {
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				jobId: job.id,
+				at: now
+			})
+		}).catch(() => {});
+	}, [
+		job?.id,
+		dub?.on,
+		dubAt
+	]);
+	const dubLangs = (job?.tgtLangs ?? []).map((l) => ({
+		value: l,
+		label: langName(l)
+	}));
+	const makeVoice = () => {
+		player.current?.closeMenu();
+		reloadVoices();
+		setMakingVoice(true);
+	};
 	(0, react.useEffect)(() => {
 		if (!job?.id) return;
+		setDub(null);
 		const es = new EventSource(`/live/api/events?jobId=${encodeURIComponent(job.id)}`);
 		es.addEventListener("state", (e) => setJob(JSON.parse(e.data)));
 		es.addEventListener("cues", (e) => setCues(JSON.parse(e.data)));
 		es.addEventListener("glossary", (e) => setTerms(JSON.parse(e.data)));
+		es.addEventListener("dub", (e) => setDub(JSON.parse(e.data)));
 		es.addEventListener("cue", (e) => {
 			const cue = JSON.parse(e.data);
 			setCues((prev) => {
@@ -36913,6 +37616,22 @@ function LiveView(props) {
 										t
 									}) })
 								},
+								{
+									id: "dub",
+									icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.voice, {}),
+									title: t("menu.dub"),
+									label: dub?.on ? `${t("dub.title")} · ${langName(dub.lang)}` : void 0,
+									on: !!dub?.on,
+									content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DubMenu, {
+										jobId: job.id,
+										view: dub,
+										langs: dubLangs,
+										voices,
+										onMake: makeVoice,
+										at: now,
+										t
+									})
+								},
 								{
 									id: "how",
 									icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.timer, {}),
@@ -37072,6 +37791,23 @@ function LiveView(props) {
 				className: "dshl-dropzone",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("in.drop") })
 			}),
+			makingVoice && voices && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoiceMaker, {
+				jobId: job?.id,
+				at: now,
+				voices,
+				t,
+				onClose: () => setMakingVoice(false),
+				onDone: (id) => {
+					setMakingVoice(false);
+					reloadVoices();
+					if (job) post("dub", {
+						jobId: job.id,
+						voice: id,
+						on: true,
+						at: now
+					}).catch((e) => setError(e.message));
+				}
+			}),
 			loginFor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoginDialog, {
 				site: loginFor.need.site,
 				browser: loginBrowser,
@@ -37225,7 +37961,12 @@ function SubsStarter(props) {
 }
 const fmtTokens = (n, ui) => ui === "zh" && n >= 1e4 ? `${(n / 1e4).toFixed(n >= 1e5 ? 0 : 1)}万` : n >= 1e3 ? `${(n / 1e3).toFixed(n >= 1e5 ? 0 : 1)}k` : String(n);
 /** Engines billed by the minute of audio (no token counts come back): US$ per minute, from the provider's price list. */
-const PER_MINUTE = { "openai-translate": .034 };
+/** Rough prices per minute of audio: OpenAI interpretation, and spoken voiceover (OpenAI, Gemini speech). */
+const PER_MINUTE = {
+	"openai-translate": .034,
+	"voice-openai": .015,
+	"voice-gemini": .015
+};
 const audioCost = (audio) => audio.reduce((sum, [k, v]) => sum + (PER_MINUTE[k] ?? 0) * v / 60, 0);
 const usd = (v) => `$${v.toFixed(2)}`;
 /** Total tokens for this video; hover or click for per-model input / output / cache. */
@@ -37647,6 +38388,47 @@ const en = {
 	"sub.bg.light": "Light",
 	"sub.bg.dark": "Dark",
 	"menu.restream": "Restream",
+	"menu.dub": "Voiceover",
+	"dub.title": "Voiceover",
+	"dub.sf": "SiliconFlow",
+	"dub.mine": "My voices",
+	"dub.noKey": "A voiceover needs a key for OpenAI, SiliconFlow, Gemini or ElevenLabs (settings, or the DSH Models page).",
+	"dub.noLang": "Choose a subtitle language first: the voiceover speaks the subtitles.",
+	"dub.lang": "Language",
+	"dub.enable": "Voice the subtitles",
+	"dub.voice": "Voice",
+	"dub.pick": "Choose a voice",
+	"dub.try": "Hear this voice",
+	"dub.make": "Make a voice from a recording…",
+	"dub.original": "Original sound",
+	"dub.duck": "Lower it",
+	"dub.off": "Off",
+	"dub.failed": "Some lines could not be voiced: {e}",
+	"dub.how": "Each subtitle line is spoken when the picture reaches it; only the part you watch or push out is voiced. Pushed streams and clips carry the voiceover too.",
+	"dub.makeTitle": "Make a voice",
+	"dub.noClone": "Learning a voice needs a SiliconFlow or ElevenLabs key (settings, or the DSH Models page).",
+	"dub.src.mic": "Microphone",
+	"dub.src.file": "Audio file",
+	"dub.src.video": "From this video",
+	"dub.micLead": "Read this aloud in your normal voice, in a quiet place (10–20 seconds).",
+	"dub.recStart": "Start recording",
+	"dub.recAgain": "Record again",
+	"dub.recStop": "Done",
+	"dub.micFailed": "The microphone could not be used: {e}",
+	"dub.tooShort": "That was too short: record at least 5 seconds.",
+	"dub.fileLead": "One person talking, clear, 10–30 seconds (longer files are cut).",
+	"dub.pickFile": "Choose a file",
+	"dub.videoLead": "Takes about ten seconds of someone talking near the current moment, with what they say from the subtitles.",
+	"dub.takeVideo": "Take the voice from here",
+	"dub.working": "Working…",
+	"dub.name": "Name",
+	"dub.said": "What is said",
+	"dub.saidHint": "Type what the recording says (the service matches voice and words).",
+	"dub.by": "Learned by",
+	"dub.privacy": "The recording goes to {s} to learn the voice.",
+	"dub.save": "Use this voice",
+	"dub.myVoice": "My voice",
+	"dub.videoVoice": "Voice from the video",
 	"rs.live": "Live",
 	"rs.title": "Push this video, with subtitles, to live platforms",
 	"rs.running": "Restreaming · {t}",
@@ -38023,6 +38805,10 @@ const en = {
 	"engine.local": "This computer (Whisper)",
 	"engine.openai": "OpenAI",
 	"engine.openai-translate": "OpenAI live translation",
+	"engine.voice-openai": "Voiceover · OpenAI",
+	"engine.voice-siliconflow": "Voiceover · SiliconFlow",
+	"engine.voice-gemini": "Voiceover · Gemini",
+	"engine.voice-elevenlabs": "Voiceover · ElevenLabs",
 	"set.engine.intl": "Online",
 	"set.recommended": "Recommended",
 	"set.others": "Other",
@@ -38118,6 +38904,47 @@ const zh = {
 	"sub.bg.light": "浅",
 	"sub.bg.dark": "深",
 	"menu.restream": "转播",
+	"menu.dub": "配音",
+	"dub.title": "配音",
+	"dub.sf": "硅基流动",
+	"dub.mine": "我的声音",
+	"dub.noKey": "配音需要 OpenAI、硅基流动、Gemini 或 ElevenLabs 的密钥（在设置里，或 DSH 的模型页面添加）。",
+	"dub.noLang": "先选一种字幕语言：配音读的就是字幕。",
+	"dub.lang": "语言",
+	"dub.enable": "给字幕配上声音",
+	"dub.voice": "声音",
+	"dub.pick": "选一个声音",
+	"dub.try": "试听这个声音",
+	"dub.make": "用一段录音做个声音…",
+	"dub.original": "原声",
+	"dub.duck": "压低",
+	"dub.off": "关掉",
+	"dub.failed": "有几句没配上：{e}",
+	"dub.how": "画面放到哪一句，就念哪一句；只给正在看或正在推流的部分配音。推流和剪下的片段也带配音。",
+	"dub.makeTitle": "做一个声音",
+	"dub.noClone": "学声音需要硅基流动或 ElevenLabs 的密钥（在设置里，或 DSH 的模型页面添加）。",
+	"dub.src.mic": "麦克风录",
+	"dub.src.file": "音频文件",
+	"dub.src.video": "视频里的人声",
+	"dub.micLead": "找个安静的地方，用平时说话的语气读下面这段（10–20 秒）。",
+	"dub.recStart": "开始录音",
+	"dub.recAgain": "重新录",
+	"dub.recStop": "录好了",
+	"dub.micFailed": "麦克风用不了：{e}",
+	"dub.tooShort": "太短了，至少录 5 秒。",
+	"dub.fileLead": "一个人在说话、声音清楚，10–30 秒（更长的只取前 30 秒）。",
+	"dub.pickFile": "选择文件",
+	"dub.videoLead": "从当前画面附近取十秒左右一个人说话的声音，说的内容取自字幕。",
+	"dub.takeVideo": "取这里的人声",
+	"dub.working": "处理中…",
+	"dub.name": "名字",
+	"dub.said": "说的内容",
+	"dub.saidHint": "写下录音里说的话（服务会把声音和文字对上）。",
+	"dub.by": "交给",
+	"dub.privacy": "录音会发给{s}，用来学这个声音。",
+	"dub.save": "用这个声音",
+	"dub.myVoice": "我的声音",
+	"dub.videoVoice": "视频里的声音",
 	"rs.live": "转播中",
 	"rs.title": "把这个视频连同字幕推到直播平台",
 	"rs.running": "转播中 · {t}",
@@ -38494,6 +39321,10 @@ const zh = {
 	"engine.local": "本机（Whisper）",
 	"engine.openai": "OpenAI",
 	"engine.openai-translate": "OpenAI 实时翻译",
+	"engine.voice-openai": "配音 · OpenAI",
+	"engine.voice-siliconflow": "配音 · 硅基流动",
+	"engine.voice-gemini": "配音 · Gemini",
+	"engine.voice-elevenlabs": "配音 · ElevenLabs",
 	"set.engine.intl": "在线 · 海外",
 	"set.recommended": "推荐",
 	"set.others": "其他",
@@ -39033,6 +39864,54 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, .
 .dshl-submenu .seg button { flex: 1; min-width: 0; height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; }
 .dshl-submenu .seg button.on { background: rgba(255,255,255,.92); color: #111; font-weight: 600; }
 
+/* Voiceover (player menu) */
+.dshl-dubmenu { width: 320px; max-width: 100%; }
+.dshl-dubmenu .opts { position: static; margin: 0 -8px -10px; }
+.dshl-dubmenu .opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 0 6px; color: var(--muted); }
+.dshl-dubmenu .mt { margin: 4px 6px 2px; color: rgba(255,255,255,.45); font-size: 11.5px; line-height: 1.5; }
+.dshl-dubmenu .err { margin: 4px 6px; color: #ff8a8d; font-size: 12px; line-height: 1.45; }
+.dshl-dubmenu .vrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.dshl-dubmenu .vrow > :first-child { flex: 1; min-width: 0; }
+.dshl-dubmenu .try { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--l2); color: var(--ink); cursor: pointer; }
+.dshl-dubmenu .try:hover:not(:disabled) { background: rgba(255,255,255,.18); }
+.dshl-dubmenu .try svg { width: 16px; height: 16px; }
+.dshl-dubmenu .spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: dshl-spin .8s linear infinite; }
+@keyframes dshl-spin { to { transform: rotate(360deg); } }
+.dshl-switchrow { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 6px 10px; border: 0; background: none; color: inherit; cursor: pointer; }
+.dshl-switchrow:disabled { opacity: .5; cursor: default; }
+.dshl-switchrow .n { font-size: 13.5px; font-weight: 600; }
+.dshl-switchrow .sw { position: relative; width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.22); transition: background .15s; }
+.dshl-switchrow .sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
+.dshl-switchrow.on .sw { background: #3d6df2; }
+.dshl-switchrow.on .sw i { transform: translateX(14px); }
+
+/* Making a voice (dialog) */
+.dshl-voicemaker { width: min(440px, 100%) !important; text-align: left !important; }
+.dshl-voicemaker h3 { text-align: center; }
+.dshl-voicemaker .src { display: flex; width: 100%; margin: 6px 0 14px; }
+.dshl-voicemaker .src button { flex: 1; }
+.dshl-voicemaker .src button.on { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+.dshl-voicemaker .lead { margin: 0 0 10px; text-align: left; }
+.dshl-voicemaker .read { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--l1); color: var(--ink); font-size: 15px; line-height: 1.75; }
+.dshl-voicemaker .row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--muted); font-size: 13px; }
+.dshl-voicemaker .row.top { align-items: start; }
+.dshl-voicemaker .row.top > span { padding-top: 8px; }
+.dshl-voicemaker .dshl-input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; resize: vertical; outline: 0; box-sizing: border-box; }
+.dshl-voicemaker .dshl-input:focus { border-color: var(--accent); }
+.dshl-voicemaker > .dshl-btn { width: 100%; height: 40px; }
+.dshl-voicemaker .rec .dot, .dshl-voicemaker .recbar .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
+.dshl-voicemaker .recbar { display: flex; align-items: center; gap: 10px; height: 40px; }
+.dshl-voicemaker .recbar .dot { background: var(--live); animation: dshl-pulse 1.4s ease-in-out infinite; }
+.dshl-voicemaker .recbar .sec { width: 30px; color: var(--ink); font-variant-numeric: tabular-nums; }
+.dshl-voicemaker .recbar .meter { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--l2); }
+.dshl-voicemaker .recbar .meter i { display: block; height: 100%; border-radius: inherit; background: var(--ok); transition: width .1s; }
+.dshl-voicemaker .recbar .dshl-btn { height: 36px; }
+.dshl-voicemaker .got { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
+.dshl-voicemaker .got audio { display: block; width: 100%; height: 36px; margin-bottom: 12px; }
+.dshl-voicemaker .note { margin: 2px 0 0; color: var(--faint); font-size: 12px; text-align: left; }
+.dshl-voicemaker .acts { margin-top: 12px; }
+.dshl-voicemaker .err { margin: 10px 0 0; color: var(--live); font-size: 12.5px; text-align: left; }
+
 /* Download (inside the dark menu) */
 /* Restream (player menu) */
 .dshl-rs { display: grid; gap: 10px; padding: 0 6px; }