dsh-vidi 0.4.2 → 0.5.0

package/lib/client.js

@@ -776,6 +776,194 @@ function langLabel(code, ui, fallback) {
 	return NAMES[code]?.[ui] ?? fallback ?? code;
 }
 
+// src/client/Pick.tsx
+/** Theme tokens copied onto the list, so it looks like the place it opened from (light page, dark player menu). */
+const TOKENS = [
+	"--bg",
+	"--l1",
+	"--l2",
+	"--ink",
+	"--muted",
+	"--faint",
+	"--line",
+	"--hover",
+	"--accent"
+];
+/**
+* A drop-down in the page's own style, in place of the browser's <select>
+* (which draws a system menu as wide as the screen allows). The list is sized
+* to its options, scrolls when long, opens upward when there is no room
+* below, and works with the keyboard (arrows, Enter, Esc, typing a letter).
+*/
+function Pick(props) {
+	const { value, options, onChange, placeholder, disabled, className, title, label } = props;
+	const [open, setOpen] = (0, react.useState)(false);
+	const [active, setActive] = (0, react.useState)(-1);
+	const [place, setPlace] = (0, react.useState)({});
+	const btn = (0, react.useRef)(null);
+	const list = (0, react.useRef)(null);
+	const chosen = options.find((o) => o.value === value);
+	const usable = options.map((o, i) => o.disabled ? -1 : i).filter((i) => i >= 0);
+	const close = (focus = true) => {
+		setOpen(false);
+		if (focus) btn.current?.focus();
+	};
+	const choose = (o) => {
+		if (o.disabled) return;
+		onChange(o.value);
+		close();
+	};
+	(0, react.useLayoutEffect)(() => {
+		if (!open || !btn.current) return;
+		const r = btn.current.getBoundingClientRect();
+		const cs = getComputedStyle(btn.current);
+		const vars = Object.fromEntries(TOKENS.map((k) => [k, cs.getPropertyValue(k).trim()]).filter(([, v]) => v));
+		const room = window.innerHeight - r.bottom - 8, above = r.top - 8;
+		const up = room < 220 && above > room;
+		const maxH = Math.max(120, Math.min(320, up ? above - 4 : room - 4));
+		const width = Math.min(Math.max(r.width, 180), window.innerWidth - 16);
+		const left = Math.min(Math.max(8, r.left), window.innerWidth - width - 8);
+		setPlace({
+			...vars,
+			left,
+			width,
+			maxHeight: maxH,
+			...up ? { bottom: window.innerHeight - r.top + 4 } : { top: r.bottom + 4 },
+			fontFamily: cs.fontFamily
+		});
+		setActive(Math.max(0, options.findIndex((o) => o.value === value)));
+	}, [open]);
+	(0, react.useEffect)(() => {
+		list.current?.querySelector(`[data-i="${active}"]`)?.scrollIntoView({ block: "nearest" });
+	}, [active, open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const away = (e) => {
+			if (!list.current?.contains(e.target) && !btn.current?.contains(e.target)) close(false);
+		};
+		const gone = (e) => {
+			if (!list.current?.contains(e.target)) close(false);
+		};
+		document.addEventListener("pointerdown", away, true);
+		window.addEventListener("resize", gone);
+		window.addEventListener("scroll", gone, true);
+		return () => {
+			document.removeEventListener("pointerdown", away, true);
+			window.removeEventListener("resize", gone);
+			window.removeEventListener("scroll", gone, true);
+		};
+	}, [open]);
+	const onKey = (e) => {
+		if (disabled) return;
+		const step = (d) => {
+			const at = usable.indexOf(active);
+			setActive(usable[Math.min(usable.length - 1, Math.max(0, (at < 0 ? d > 0 ? -1 : usable.length : at) + d))] ?? -1);
+		};
+		if (!open) {
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				"Enter",
+				" "
+			].includes(e.key)) {
+				e.preventDefault();
+				setOpen(true);
+			}
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			close();
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			step(1);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			step(-1);
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			setActive(usable[0] ?? -1);
+		} else if (e.key === "End") {
+			e.preventDefault();
+			setActive(usable.at(-1) ?? -1);
+		} else if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			const o = options[active];
+			if (o) choose(o);
+		} else if (e.key === "Tab") close(false);
+		else if (e.key.length === 1) {
+			const k = e.key.toLowerCase();
+			const from = usable.indexOf(active);
+			const hit = [...usable.slice(from + 1), ...usable.slice(0, from + 1)].find((i) => options[i].label.toLowerCase().startsWith(k));
+			if (hit !== void 0) setActive(hit);
+		}
+	};
+	let lastGroup;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		ref: btn,
+		type: "button",
+		className: `dshl-select ${open ? "open" : ""} ${className ?? ""}`,
+		disabled,
+		title,
+		"aria-haspopup": "listbox",
+		"aria-expanded": open,
+		onClick: () => setOpen((v) => !v),
+		onKeyDown: onKey,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "v",
+			children: label ?? chosen?.label ?? placeholder ?? ""
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+			className: "caret",
+			"aria-hidden": "true"
+		})]
+	}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: list,
+		className: "dshl-options",
+		role: "listbox",
+		style: place,
+		onKeyDown: onKey,
+		children: options.map((o, i) => {
+			const head = o.group && o.group !== lastGroup ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "grp",
+				children: o.group
+			}, `g:${o.group}`) : null;
+			lastGroup = o.group;
+			return [head, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-i": i,
+				role: "option",
+				"aria-selected": o.value === value,
+				"aria-disabled": o.disabled || void 0,
+				className: `opt ${o.value === value ? "on" : ""} ${i === active ? "act" : ""} ${o.disabled ? "off" : ""}`,
+				onPointerEnter: () => !o.disabled && setActive(i),
+				onClick: () => choose(o),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "l",
+						children: o.label
+					}),
+					o.hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "h",
+						children: o.hint
+					}),
+					o.value === value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						className: "ok",
+						viewBox: "0 0 24 24",
+						width: "14",
+						height: "14",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2.4",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12.5l4.5 4.5L19 7.5" })
+					})
+				]
+			}, o.value)];
+		})
+	}), document.fullscreenElement ?? document.body)] });
+}
+
 // src/client/LineChips.tsx
 const MAX_TRANSLATIONS = 4;
 /**
@@ -810,20 +998,18 @@ function LineChips(props) {
 						children: [i >= 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { children: i + 1 }), label(k)]
 					}, k);
 				}),
-				translations.length < MAX_TRANSLATIONS && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+				translations.length < MAX_TRANSLATIONS && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
 					className: "chip add",
 					value: "",
-					onChange: (e) => {
-						if (e.target.value) onChange([...lines, e.target.value]);
-					},
+					label: t("sub.addLang"),
 					title: t("in.addLang"),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "",
-						children: t("sub.addLang")
-					}), options.filter(([k]) => !lines.includes(k)).map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					onChange: (v) => {
+						if (v) onChange([...lines, v]);
+					},
+					options: options.filter(([k]) => !lines.includes(k)).map(([k, v]) => ({
 						value: k,
-						children: v
-					}, k))]
+						label: v
+					}))
 				}),
 				lines.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					className: "chip ghost",
@@ -860,30 +1046,26 @@ function SubtitleMenu(props) {
 	const second = lines[1] ?? "";
 	const label = (k) => site.find((s) => s.key === k)?.label ?? name(k);
 	const inUse = lines.filter((l) => l !== "src" && !l.startsWith("site:"));
-	const choices = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+	const choices = [
+		{
 			value: "src",
-			children: label("src")
-		}),
-		inUse.map((k) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+			label: label("src")
+		},
+		...inUse.map((k) => ({
 			value: k,
-			children: label(k)
-		}, k)),
-		site.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("optgroup", {
-			label: t("sub.siteGroup"),
-			children: site.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: s.key,
-				children: s.label
-			}, s.key))
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("optgroup", {
-			label: t("sub.translateTo"),
-			children: options.filter(([k]) => !inUse.includes(k)).map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: k,
-				children: v
-			}, k))
-		})
-	] });
+			label: label(k)
+		})),
+		...site.map((s) => ({
+			value: s.key,
+			label: s.label,
+			group: t("sub.siteGroup")
+		})),
+		...options.filter(([k]) => !inUse.includes(k)).map(([k, v]) => ({
+			value: k,
+			label: v,
+			group: t("sub.translateTo")
+		}))
+	];
 	const setMain = (v) => onLines(v === second ? [v, main] : second ? [v, second] : [v]);
 	const setSecond = (v) => onLines(!v ? [main] : v === main ? [main] : [main, v]);
 	const first = style.lines.find((l) => l.show)?.size ?? SIZES.m[0];
@@ -903,21 +1085,21 @@ function SubtitleMenu(props) {
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 					className: "slot",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sub.main") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sub.main") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
 						value: main,
-						onChange: (e) => setMain(e.target.value),
-						children: choices
+						onChange: setMain,
+						options: choices
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 					className: "slot",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sub.second") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sub.second") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
 						value: second,
-						onChange: (e) => setSecond(e.target.value),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						onChange: setSecond,
+						options: [{
 							value: "",
-							children: t("sub.none")
-						}), choices]
+							label: t("sub.none")
+						}, ...choices]
 					})]
 				}),
 				second && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -1016,13 +1198,13 @@ function LoginDialog(props) {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("login.body") }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "srow",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("login.from") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("login.from") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
 						value: browser,
-						onChange: (e) => onBrowser(e.target.value),
-						children: browsers.map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						onChange: onBrowser,
+						options: browsers.map((b) => ({
 							value: b.id,
-							children: b.label
-						}, b.id))
+							label: b.label
+						}))
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -33366,8 +33548,7 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 					backBufferLength: Infinity
 				} : {
 					liveSyncDuration: delay,
-					liveMaxLatencyDuration: delay + 60,
-					backBufferLength: 1800
+					backBufferLength: Infinity
 				});
 				hls.current = h;
 				h.loadSource(src);
@@ -33445,7 +33626,7 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 	(0, react.useEffect)(() => {
 		if (!menu) return;
 		const close = (e) => {
-			if (!e.target.closest?.(".dshl-menu, .dshl-menubtn")) setMenu(null);
+			if (!e.target.closest?.(".dshl-menu, .dshl-menubtn, .dshl-options")) setMenu(null);
 		};
 		window.addEventListener("mousedown", close);
 		return () => window.removeEventListener("mousedown", close);
@@ -33490,7 +33671,6 @@ const Player = (0, react.forwardRef)(function Player(props, ref) {
 		const h = hls.current, el = video.current;
 		if (h && el) {
 			h.config.liveSyncDuration = v;
-			h.config.liveMaxLatencyDuration = v + 60;
 			const pos = h.liveSyncPosition;
 			if (pos != null) el.currentTime = pos;
 		}
@@ -34107,17 +34287,17 @@ function RestreamPanel(props) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 					className: "rs-field",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("rs.platform") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("rs.platform") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
 						value: editing.platform,
-						onChange: (e) => setEditing({
+						onChange: (v) => setEditing({
 							...editing,
-							platform: e.target.value,
-							server: FIXED[e.target.value] ?? (FIXED[editing.platform] === editing.server ? "" : editing.server)
+							platform: v,
+							server: FIXED[v] ?? (FIXED[editing.platform] === editing.server ? "" : editing.server)
 						}),
-						children: PLATFORMS.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						options: PLATFORMS.map((p) => ({
 							value: p,
-							children: pname(p)
-						}, p))
+							label: pname(p)
+						}))
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -34319,7 +34499,7 @@ function Settings(props) {
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const close = (e) => {
-			if (!box.current?.contains(e.target)) onOpen(false);
+			if (!box.current?.contains(e.target) && !e.target.closest?.(".dshl-options")) onOpen(false);
 		};
 		window.addEventListener("mousedown", close);
 		return () => window.removeEventListener("mousedown", close);
@@ -34394,14 +34574,15 @@ function Settings(props) {
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						title: t("set.engine.tip"),
 						children: t("set.engine")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
 						value: engine,
 						disabled,
-						onChange: (e) => onEngine(e.target.value),
-						children: providers.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
+						onChange: onEngine,
+						options: providers.map((p) => ({
 							value: p.id,
-							children: [name(p.id), p.ready ? "" : ` · ${t(p.online ? "set.engine.noKey" : "set.engine.notInstalled")}`]
-						}, p.id))
+							label: name(p.id),
+							hint: p.ready ? void 0 : t(p.online ? "set.engine.noKey" : "set.engine.notInstalled")
+						}))
 					})]
 				}),
 				cur?.online && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -34475,19 +34656,18 @@ function Settings(props) {
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							title: t("set.model.tip"),
 							children: t("set.model")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
 							value: models?.chosen ? modelKey(models.chosen) : "",
-							onChange: (e) => chooseModel(e.target.value),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							onChange: chooseModel,
+							options: [{
 								value: "",
-								children: models?.fallback ? t("set.model.default").replace("{m}", modelName(models.fallback)) : t("set.model.dsh")
-							}), providersOf.map((pn) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("optgroup", {
-								label: pn,
-								children: models.models.filter((m) => m.providerName === pn).map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
-									value: modelKey(m),
-									children: [m.name, m.image ? ` · ${t("set.model.image")}` : ""]
-								}, modelKey(m)))
-							}, pn))]
+								label: models?.fallback ? t("set.model.default").replace("{m}", modelName(models.fallback)) : t("set.model.dsh")
+							}, ...providersOf.flatMap((pn) => models.models.filter((m) => m.providerName === pn).map((m) => ({
+								value: modelKey(m),
+								label: m.name,
+								hint: m.image ? t("set.model.image") : void 0,
+								group: pn
+							})))]
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "hint",
@@ -34495,56 +34675,61 @@ function Settings(props) {
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "srow",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("set.mode") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "dshl-seg",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							className: mode === "realtime" ? "on" : "",
-							title: t("mode.realtime.tip"),
-							onClick: () => onMode("realtime"),
-							children: t("mode.realtime")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							className: mode === "polished" ? "on" : "",
-							title: t("mode.polished.tip"),
-							onClick: () => onMode("polished"),
-							children: t("mode.polished")
+					className: "srow col",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "pair",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("set.mode") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dshl-seg",
+							children: [
+								"site",
+								"realtime",
+								"polished"
+							].map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: mode === m ? "on" : "",
+								title: t(`mode.${m}.tip`),
+								onClick: () => onMode(m),
+								children: t(`mode.${m}`)
+							}, m))
 						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "hint",
+						children: t(`mode.${mode}.tip`)
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "srow",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("set.spoken") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("set.spoken") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
 						value: spoken,
 						disabled,
-						onChange: (e) => onSpoken(e.target.value),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						onChange: onSpoken,
+						options: [{
 							value: "auto",
-							children: t("set.auto")
-						}), langOptions.map(([k, v]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							label: t("set.auto")
+						}, ...langOptions.map(([k, v]) => ({
 							value: k,
-							children: v
-						}, k))]
+							label: v
+						}))]
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "srow",
 					title: t("set.login.tip"),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("set.login") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("set.login") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pick, {
 						value: login,
-						onChange: (e) => onLogin(e.target.value),
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						onChange: onLogin,
+						options: [
+							{
 								value: "auto",
-								children: t("set.auto")
-							}),
-							browsers.map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								label: t("set.auto")
+							},
+							...browsers.map((b) => ({
 								value: b.id,
-								children: b.label
-							}, b.id)),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								label: b.label
+							})),
+							{
 								value: "none",
-								children: t("set.login.none")
-							})
+								label: t("set.login.none")
+							}
 						]
 					})]
 				})
@@ -34649,7 +34834,7 @@ function LiveView(props) {
 		setLinesRaw(l);
 		store.set("lines", l);
 	};
-	const [mode, setModeRaw] = (0, react.useState)(() => store.get("mode", "realtime"));
+	const [mode, setModeRaw] = (0, react.useState)(() => store.get("mode", "polished"));
 	const setMode = (m) => {
 		setModeRaw(m);
 		store.set("mode", m);
@@ -34702,6 +34887,13 @@ function LiveView(props) {
 		t,
 		ui
 	]);
+	const siteBest = (0, react.useMemo)(() => {
+		const list = job?.site ?? [];
+		const base = (l) => l.replace(/-orig$/, "").split("-")[0];
+		return (list.find((x) => !x.auto && base(x.lang) === ui) ?? list.find((x) => !x.auto) ?? list.find((x) => base(x.lang) === ui) ?? list[0])?.key;
+	}, [job?.site, ui]);
+	const siteOnly = mode === "site" && !!job;
+	const screenLines = siteOnly && siteBest ? lines.some((l) => l.startsWith("site:")) ? lines.filter((l) => l.startsWith("site:")) : [siteBest] : lines;
 	const shownLines = lines;
 	/** The chosen recognition, or — when it can't run here (no key, not installed) — the first one that can. */
 	const usableEngine = () => {
@@ -34738,8 +34930,8 @@ function LiveView(props) {
 		}).catch(() => {});
 	}, [sessionId]);
 	(0, react.useEffect)(() => {
-		setSubStyle((s) => reconcile(s, shownLines));
-	}, [shownLines.join(",")]);
+		setSubStyle((s) => reconcile(s, screenLines));
+	}, [screenLines.join(",")]);
 	(0, react.useEffect)(() => {
 		saveStyle(subStyle);
 	}, [subStyle]);
@@ -34838,6 +35030,7 @@ function LiveView(props) {
 			url: target
 		} : classify(target);
 		if (!c) return;
+		if (props.onNewVideo && job && job.source !== "push" && job.url !== c.url && c.source !== "push" && await props.onNewVideo(target)) return;
 		try {
 			const j = await post("start", {
 				...options(),
@@ -34862,7 +35055,39 @@ function LiveView(props) {
 		state: "off",
 		at: 0
 	};
-	const startSubs = async (from) => {
+	(0, react.useEffect)(() => {
+		if (!job?.title || !props.onTitle) return;
+		const key = `dsh-live.named.${sessionId}`;
+		try {
+			if (localStorage.getItem(key) === job.id) return;
+			localStorage.setItem(key, job.id);
+		} catch {}
+		props.onTitle(job.title);
+	}, [job?.id, job?.title]);
+	const rateLog = (0, react.useRef)([]);
+	const [rate, setRate] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!job || job.vod || job.status !== "running" || subs.state !== "running") {
+			rateLog.current = [];
+			setRate(null);
+			return;
+		}
+		const log = rateLog.current;
+		log.push({
+			wall: Date.now(),
+			at: subs.at
+		});
+		while (log.length > 2 && log[0].wall < Date.now() - 12e4) log.shift();
+		const first = log[0], last = log.at(-1);
+		setRate(last.wall - first.wall > 45e3 ? (last.at - first.at) / ((last.wall - first.wall) / 1e3) : null);
+	}, [
+		subs.at,
+		subs.state,
+		job?.status,
+		job?.id
+	]);
+	const emptyLines = subs.state === "running" && cues.length === 0 && subs.at > 15 ? t("tr.listening").replace("{t}", CLOCK(subs.at)) : t("tr.empty");
+	const startSubs = async (from, withMode) => {
 		if (!job) return;
 		setError("");
 		const p = providers.find((x) => x.id === usableEngine());
@@ -34874,6 +35099,7 @@ function LiveView(props) {
 		try {
 			setJob(await post("subs", {
 				...options(),
+				...withMode ? { mode: withMode } : {},
 				jobId: job.id,
 				action: "start",
 				from
@@ -34888,6 +35114,17 @@ function LiveView(props) {
 			action: "pause"
 		}).catch(() => job));
 	};
+	/** Switching modes while a video is open takes effect right away: no delay stops transcribing, the others (re)start it. */
+	const changeMode = (m) => {
+		if (m === mode) return;
+		setMode(m);
+		if (!job || job.status === "error") return;
+		if (m === "site") {
+			if (subs.state === "running") pauseSubs();
+			return;
+		}
+		startSubs(subs.state === "off" ? now : void 0, m);
+	};
 	const changeLines = async (next) => {
 		const before = translationsOf(lines).join(","), after = translationsOf(next).join(",");
 		setLines(next);
@@ -34901,6 +35138,16 @@ function LiveView(props) {
 	const stop = async () => {
 		if (job) await post("stop", { jobId: job.id }).catch(() => {});
 	};
+	/** Leave this video: everything for it stops, the page is empty again (its files stay in the video folder). */
+	const closeVideo = async () => {
+		if (!job) return;
+		await post("close", { jobId: job.id }).catch(() => {});
+		setJob(null);
+		setCues([]);
+		setTerms([]);
+		setInput("");
+		setBench(null);
+	};
 	const onFile = async (file) => {
 		setError("");
 		setUploading(0);
@@ -34932,7 +35179,7 @@ function LiveView(props) {
 	const translatable = langOptions.filter(([k]) => k !== spokenBase);
 	const nameWithSpoken = (k) => k === "src" && spokenBase ? `${t("sub.source")} · ${langName(spokenBase)}` : langName(k);
 	const [siteCues, setSiteCues] = (0, react.useState)({});
-	const siteKeys = lines.filter((l) => l.startsWith("site:") && job?.site?.some((s) => s.key === l));
+	const siteKeys = screenLines.filter((l) => l.startsWith("site:") && job?.site?.some((s) => s.key === l));
 	(0, react.useEffect)(() => {
 		if (!job) return;
 		for (const k of siteKeys) {
@@ -35231,7 +35478,7 @@ function LiveView(props) {
 					},
 					children: [shown.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dshl-muted pad",
-						children: t("tr.empty")
+						children: emptyLines
 					}), shown.map((c) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						className: `dshl-line ${c.id === activeId ? "active" : ""} ${c.polished ? "ok" : "raw"}`,
 						onClick: () => player.current?.seek(c.start),
@@ -35263,7 +35510,7 @@ function LiveView(props) {
 					children: [
 						paragraphs.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "dshl-muted pad",
-							children: t("tr.empty")
+							children: emptyLines
 						}),
 						paragraphs.some((p) => p.speaker) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: "dshl-muted small",
@@ -35301,6 +35548,32 @@ function LiveView(props) {
 			onTerms: setTerms
 		})
 	] });
+	const live = !!job && job.status === "running" && !job.vod;
+	const slow = live && mode !== "site" && rate !== null && rate < .95;
+	const behindBy = live && mode !== "site" && subs.state === "running" && cues.length > 0 ? now - subs.at : 0;
+	const engineNow = providers.find((x) => x.id === usableEngine());
+	const liveNote = siteOnly && job && job.status !== "resolving" && !job.site?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dshl-lag",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("site.none") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "dshl-link",
+			onClick: () => changeMode("polished"),
+			children: t("site.switch")
+		})]
+	}) : slow ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dshl-lag warn",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(engineNow && !engineNow.online ? "lag.slowLocal" : "lag.slow").replace("{x}", rate.toFixed(2)) }), engineNow && !engineNow.online && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "dshl-link",
+			onClick: () => setSettingsOpen(true),
+			children: t("lag.settings")
+		})]
+	}) : behindBy > 6 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "dshl-lag",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("lag.behind").replace("{t}", CLOCK(behindBy)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: "dshl-link",
+			onClick: () => player.current?.seek(Math.max(0, subs.at - 2)),
+			children: t("lag.wait")
+		})]
+	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: `dshl ${theater && !activeBench ? "theater" : ""} ${pageMode ? "page" : ""} ${activeBench ? "bench" : ""}`,
 		"data-dsh-own-drop": "dsh-vidi",
@@ -35383,7 +35656,7 @@ function LiveView(props) {
 							engine: engine || "local",
 							onEngine: setEngine,
 							mode,
-							onMode: setMode,
+							onMode: changeMode,
 							spoken,
 							onSpoken: setSpoken,
 							langOptions,
@@ -35456,7 +35729,7 @@ function LiveView(props) {
 							siteCues: shownSite,
 							spoken: spokenBase,
 							style: subStyle,
-							delay: job.mode === "polished" && !job.vod ? Math.max(delay, 75) : delay,
+							delay: job.vod ? delay : mode === "polished" ? Math.max(delay, 75) : mode === "site" ? 3 : delay,
 							onDelay: setDelay,
 							showDelay: job.status === "running" && !job.vod,
 							onSnapshot: saveSnapshot,
@@ -35567,9 +35840,17 @@ function LiveView(props) {
 									className: "dshl-btn small",
 									onClick: stop,
 									children: t("in.stop")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: "dshl-btn small icon quiet",
+									title: t("in.close"),
+									"aria-label": t("in.close"),
+									onClick: () => void closeVideo(),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon.close, {})
 								})
 							]
 						}),
+						liveNote,
 						pageMode && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 							className: "dshl-under",
 							children: transcriptBox
@@ -35632,6 +35913,10 @@ function SubsButton(props) {
 				className: "now",
 				children: pct !== void 0 ? t("subs.progress").replace("{p}", String(pct)) : t("subs.progressLive").replace("{t}", CLOCK(at))
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "short",
+				children: pct !== void 0 ? `${pct}%` : CLOCK(at)
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "act",
 				children: t("subs.pause")
@@ -35665,7 +35950,7 @@ function SubsStarter(props) {
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const close = (e) => {
-			if (!box.current?.contains(e.target) && !pop.current?.contains(e.target)) setOpen(false);
+			if (!box.current?.contains(e.target) && !pop.current?.contains(e.target) && !e.target.closest?.(".dshl-options")) setOpen(false);
 		};
 		window.addEventListener("mousedown", close);
 		return () => window.removeEventListener("mousedown", close);
@@ -36221,8 +36506,17 @@ const en = {
 	"in.remove": "Remove",
 	"mode.realtime": "Real-time",
 	"mode.polished": "Polished",
-	"mode.realtime.tip": "Subtitles right away",
-	"mode.polished.tip": "1–2 min behind, more accurate subtitles",
+	"mode.site": "No delay",
+	"mode.site.tip": "The site’s own subtitles only: nothing is transcribed or translated, the picture is not held back",
+	"mode.realtime.tip": "A few seconds behind: transcribed and translated as it is heard",
+	"mode.polished.tip": "1–2 minutes behind: misheard words fixed with context and the picture — the most accurate (default)",
+	"site.none": "This video has no subtitles of its own.",
+	"site.switch": "Switch to Polished",
+	"lag.behind": "Subtitles are {t} behind the picture.",
+	"lag.wait": "Wait for them",
+	"lag.slow": "Transcription runs slower than the stream ({x}×), so subtitles fall further behind.",
+	"lag.slowLocal": "This computer transcribes slower than the stream ({x}×), so subtitles fall further behind. An online service keeps up.",
+	"lag.settings": "Choose one",
 	"in.uploading": "Uploading {p}%",
 	"in.drop": "Drop to start",
 	"empty.title": "Subtitles for any video",
@@ -36359,6 +36653,8 @@ const en = {
 	"tr.copyShort": "Copy",
 	"tr.copied": "Copied",
 	"tr.empty": "Subtitles show up here.",
+	"in.close": "Close this video (its files stay in the video folder)",
+	"tr.listening": "Listening — no speech yet (music or a break so far). Heard up to {t}.",
 	"gl.new": "New term",
 	"gl.add": "Add",
 	"gl.auto": "auto",
@@ -36545,8 +36841,17 @@ const zh = {
 	"in.remove": "移除",
 	"mode.realtime": "实时",
 	"mode.polished": "精修",
-	"mode.realtime.tip": "字幕最快出现",
-	"mode.polished.tip": "画面晚 1–2 分钟，字幕更准",
+	"mode.site": "无延迟",
+	"mode.site.tip": "只看网站自带的字幕：不转写、不翻译，画面也不往后拖",
+	"mode.realtime.tip": "晚几秒：听到就转写、翻译",
+	"mode.polished.tip": "晚 1–2 分钟：结合上下文和画面改正听错的词，字幕最准（默认）",
+	"site.none": "这个视频没有网站自带的字幕。",
+	"site.switch": "换成精修",
+	"lag.behind": "字幕比画面慢了 {t}。",
+	"lag.wait": "等等字幕",
+	"lag.slow": "转写比直播慢（{x} 倍速），字幕会越落越远。",
+	"lag.slowLocal": "本机转写比直播慢（{x} 倍速），字幕会越落越远。换成在线转写就能跟上。",
+	"lag.settings": "去选一个",
 	"in.uploading": "上传中 {p}%",
 	"in.drop": "松手开始",
 	"empty.title": "给任何视频配字幕",
@@ -36683,6 +36988,8 @@ const zh = {
 	"tr.copyShort": "复制",
 	"tr.copied": "已复制",
 	"tr.empty": "字幕会出现在这里",
+	"in.close": "关闭这个视频（文件还留在视频目录里）",
+	"tr.listening": "正在听，还没有人说话（目前是音乐或插播）。已听到 {t}。",
 	"gl.new": "新词条",
 	"gl.add": "添加",
 	"gl.auto": "自动",
@@ -36816,6 +37123,7 @@ const CSS = `
 .dshl-btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.06); }
 .dshl-btn.stop { background: var(--live); border-color: var(--live); color: #fff; }
 .dshl-btn.icon { width: 40px; padding: 0; }
+.dshl-btn.small.icon { width: 30px; }
 .dshl-btn.icon.back { color: var(--muted); }
 .dshl-btn.icon.back svg { transform: rotate(180deg); }
 .dshl-btn.block { display: flex; width: 100%; }
@@ -36843,10 +37151,25 @@ const CSS = `
 .dshl-switch.on { background: var(--accent); }
 .dshl-switch.on i { left: 16px; }
 
-.dshl select { height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
-  appearance: none; -webkit-appearance: none;
-  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9993' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; }
-.dshl select:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }
+.dshl-select { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
+  background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
+.dshl-select .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dshl-select .caret { flex: none; width: 6px; height: 6px; margin: -3px 1px 0 0; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: rotate(45deg); transition: transform .15s; }
+.dshl-select.open .caret { margin-top: 3px; transform: rotate(-135deg); }
+.dshl-select:hover:not(:disabled), .dshl-select.open { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }
+.dshl-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
+.dshl-select:disabled { opacity: .5; cursor: default; }
+/* The list: drawn at the page's top level (so no panel clips it), in the colours of where it opened. */
+.dshl-options { position: fixed; z-index: 2147483000; overflow: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--line, #e4e3de); border-radius: 10px;
+  background: var(--bg, #fff); color: var(--ink, #1b1b19); box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); font-size: 13px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
+.dshl-options .grp { padding: 8px 10px 4px; color: var(--faint, #9a9993); font-size: 11.5px; font-weight: 600; }
+.dshl-options .opt { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
+.dshl-options .opt.act { background: var(--hover, rgba(0,0,0,.05)); }
+.dshl-options .opt.on { font-weight: 550; }
+.dshl-options .opt.off { opacity: .45; cursor: default; }
+.dshl-options .opt .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dshl-options .opt .h { flex: none; color: var(--faint, #9a9993); font-size: 12px; }
+.dshl-options .opt .ok { flex: none; margin-left: auto; color: var(--accent, #3b6ef5); }
 
 /* Toggle chips (several can be on): languages to show or download */
 .dshl-chips .row, .dshl-checks2 { display: flex; flex-wrap: wrap; gap: 6px; }
@@ -36857,7 +37180,8 @@ const CSS = `
 .dshl-chips .chip i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: -3px; border-radius: 50%;
   background: var(--accent); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 600; }
 .dshl-chips .chip.site:not(.on) { border-style: dashed; }
-.dshl-chips select.chip.add { appearance: none; -webkit-appearance: none; height: 28px; border-style: dashed; padding: 0 10px; }
+.dshl-chips .dshl-select.chip.add { height: 28px; border-style: dashed; padding: 0 10px; background: transparent; }
+.dshl-chips .dshl-select.chip.add .caret { display: none; }
 .dshl-chips .chip.ghost { width: 28px; padding: 0; justify-content: center; }
 .dshl-checks2 { margin: 0 0 10px; }
 .dshl-checks2 button i { width: 14px; height: 14px; margin-left: -2px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .55; flex: none; }
@@ -36941,7 +37265,7 @@ html:not([data-platform]) [data-sidebar-drawer] .dshl-panelwrap .dshl.page .dshl
    every state, full screen included; the bar's 40px row is centred on the same line. */
 html[data-platform='darwin'] .dshl-panelwrap .dshl.page .dshl-top { padding-top: 5px; padding-bottom: 8px; }
 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, select, .dshl-pick) { -webkit-app-region: no-drag; app-region: no-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; }
 /* Video page: player on top, then the status row, then subtitles/glossary filling what is left; chat on the right. */
@@ -36951,6 +37275,8 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, s
 .dshl.page .dshl-side { position: static; height: 100%; max-height: none; }
 /* 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; }
+.dshl-lag.warn { background: color-mix(in srgb, #f5a524 14%, transparent); color: var(--ink); }
 .dshl-guard { display: grid; gap: 8px; margin: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #d1434b 35%, var(--line)); border-radius: 10px; color: var(--ink); font-size: 13px; }
 .dshl-guard p { margin: 0; line-height: 1.6; }
 .dshl-guard code { color: var(--muted); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
@@ -37050,7 +37376,12 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, s
 .dshl-ctrlrow .pill svg { flex: none; width: 18px; height: 18px; }
 .dshl-ctrlrow .pill .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dshl-ctrlrow .pill .caret { flex: none; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .8; transform: translateY(1px) rotate(-135deg); }
-@container (max-width: 640px) { .dshl-ctrlrow .pill .txt, .dshl-ctrlrow .pill .caret { display: none; } .dshl-ctrlrow .pill { padding: 0 6px; } }
+@container (max-width: 640px) {
+  .dshl-ctrlrow .pill .txt, .dshl-ctrlrow .pill .caret { display: none; } .dshl-ctrlrow .pill { padding: 0 6px; }
+  /* Narrow player (a workbench beside it, a phone): fewer words, no volume slider (the mute button stays). */
+  .dshl-ctrlrow .vol, .dshl-ctrlrow .theater { display: none; }
+  .dshl-ctrlrow .ic { width: 32px; height: 32px; }
+}
 @container (max-width: 520px) {
   .dshl-ctrlrow { gap: 2px; }
   .dshl-ctrlrow .vol, .dshl-ctrlrow .mute, .dshl-ctrlrow .theater { display: none; }
@@ -37066,7 +37397,8 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, s
 .dshl-subsbtn:hover { filter: brightness(1.08); }
 .dshl-subsbtn.running { background: linear-gradient(to right, rgba(127,176,255,.45) var(--p, 0%), rgba(255,255,255,.14) var(--p, 0%)); font-weight: 500; }
 .dshl-subsbtn.running .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5a5f; animation: dshl-pulse 1.6s ease-in-out infinite; }
-.dshl-subsbtn.running .act { display: none; }
+.dshl-subsbtn.running .act, .dshl-subsbtn .short { display: none; }
+@container (max-width: 640px) { .dshl-subsbtn .now { display: none; } .dshl-subsbtn.running:not(:hover) .short { display: inline; } }
 .dshl-subsbtn.running:hover .now { display: none; }
 .dshl-subsbtn.running:hover .act { display: inline; }
 .dshl-subsbtn.running:hover .dot { width: 8px; height: 8px; border-radius: 1px; background: #fff; animation: none; }
@@ -37119,11 +37451,7 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, s
 .dshl-submenu { display: grid; gap: 4px; }
 .dshl-submenu .slots { display: grid; gap: 8px; padding: 4px 6px 10px; }
 .dshl-submenu .slot { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; color: var(--muted); }
-.dshl-submenu .slot select { width: 100%; min-width: 0; height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
-  appearance: none; -webkit-appearance: none;
-  background: var(--l1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b4b4ba' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; }
-.dshl-submenu .slot select:hover { border-color: rgba(255,255,255,.28); }
-.dshl-submenu .slot select option, .dshl-submenu .slot select optgroup { background: #fff; color: #111; }
+.dshl-submenu .slot .dshl-select { width: 100%; height: 34px; background: var(--l1); }
 .dshl-submenu .swap { justify-self: start; height: 26px; margin-left: 66px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--l2); color: var(--muted); font-size: 12px; cursor: pointer; }
 .dshl-submenu .swap:hover { color: var(--ink); }
 .dshl-submenu .opts { position: sticky; bottom: -10px; display: grid; gap: 2px; margin: 0 -8px -10px; padding: 6px 8px 10px; border-top: 1px solid var(--line-soft); background: rgb(28,28,31); }
@@ -37163,12 +37491,12 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, s
 .dshl-rs .rs-hint { margin: 0; color: var(--faint); font-size: 12px; line-height: 1.55; }
 .dshl-rs .rs-err { margin: 0; color: #ff8f92; font-size: 12px; line-height: 1.55; }
 .dshl-rs .rs-field { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
-.dshl-rs .rs-field input, .dshl-rs .rs-field select { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--l1); color: var(--ink); font: inherit; font-size: 13px; }
-.dshl-rs .rs-field select { padding-right: 28px; background-color: var(--l1); background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23aaa%27 stroke-width=%271.5%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; appearance: none; }
-.dshl-rs .rs-field input:focus, .dshl-rs .rs-field select:focus { outline: none; border-color: var(--accent); }
+.dshl-rs .rs-field .dshl-select { width: 100%; height: 34px; background: var(--l1); }
+.dshl-rs .rs-field input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--l1); color: var(--ink); font: inherit; font-size: 13px; }
+.dshl-rs .rs-field input:focus { outline: none; border-color: var(--accent); }
 .dshl-rs .rs-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .dshl-menu.sheet .dshl-rs .rs-row { min-height: 50px; }
-.dshl-menu.sheet .dshl-rs .rs-field input, .dshl-menu.sheet .dshl-rs .rs-field select { height: 42px; font-size: 15px; }
+.dshl-menu.sheet .dshl-rs .rs-field input, .dshl-menu.sheet .dshl-rs .rs-field .dshl-select { height: 42px; font-size: 15px; }
 .dshl-menu.sheet .dshl-rs .dshl-btn.block { height: 46px; font-size: 15px; }
 .dshl-dl { display: grid; gap: 14px; padding: 0 6px; }
 .dshl-dl .grp { display: grid; gap: 8px; }
@@ -37198,7 +37526,7 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, s
 .dshl-menu.sheet .dshl-seg button, .dshl-menu.sheet .dshl-submenu .seg button { min-width: 52px; height: 34px; font-size: 14px; }
 .dshl-menu.sheet .dshl-submenu .seg { width: 210px; }
 .dshl-menu.sheet .dshl-submenu .slot { grid-template-columns: 64px 1fr; font-size: 15px; }
-.dshl-menu.sheet .dshl-submenu .slot select { height: 44px; font-size: 15px; }
+.dshl-menu.sheet .dshl-submenu .slot .dshl-select { height: 44px; font-size: 15px; }
 .dshl-menu.sheet .dshl-submenu .swap { height: 34px; margin-left: 74px; font-size: 14px; }
 .dshl-menu.sheet .dshl-switch { width: 44px; height: 26px; }
 .dshl-menu.sheet .dshl-switch i { width: 22px; height: 22px; }
@@ -37318,7 +37646,7 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, s
 .dshl .srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; font-size: 13.5px; }
 .dshl-pop.settings { width: 320px; padding: 6px 12px; }
 .dshl-pop.settings .srow + .srow { border-top: 1px solid var(--line-soft); }
-.dshl-pop.settings .srow > select, .dshl-pop.settings .srow > .dshl-seg { width: 168px; }
+.dshl-pop.settings .srow > .dshl-select, .dshl-pop.settings .srow > .dshl-seg { width: 168px; }
 .dshl-pop.settings .srow > .dshl-seg button { flex: 1; padding: 0 6px; }
 .dshl .srow.col { display: grid; justify-content: stretch; gap: 8px; padding: 10px 0; }
 .dshl .srow .keyline { display: flex; align-items: center; gap: 6px; }
@@ -37333,7 +37661,7 @@ html[data-platform='darwin'] .dshl.page .dshl-top :is(button, input, label, a, s
 .dshl .srow .keyfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--faint); font-size: 12px; line-height: 1.5; }
 .dshl .srow .hint { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
 .dshl .srow .pair { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.dshl .srow .pair > select { width: 168px; }
+.dshl .srow .pair > .dshl-select { width: 168px; }
 .dshl-pop.usage { min-width: 320px; padding: 12px 14px; }
 .dshl-pop.usage h3 { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
 .dshl-pop.usage table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
@@ -37429,12 +37757,12 @@ const samePath = (a, b) => !!a && !!b && a.replace(/\/+$/, "") === b.replace(/\/
 * It lives in a "Video" workspace on the video folder, so DeepSeek's own file
 * and shell tools can work on the recordings, clips and frames directly.
 */
-async function pageSession(sessions, workspaces, title) {
+async function pageSession(sessions, workspaces, title, fresh = false) {
 	let saved = null;
 	try {
 		saved = localStorage.getItem(PAGE_SESSION);
 	} catch {}
-	if (saved && sessions.has(saved)) return saved;
+	if (!fresh && saved && sessions.has(saved)) return saved;
 	const deps = await fetch("/live/api/deps").then((r) => r.json());
 	if (!deps?.dataDir) throw new Error("the video plugin is not running yet");
 	const known = () => workspaces.list?.getSnapshot().items?.find((w) => samePath(w.path, deps.dataDir));
@@ -37498,9 +37826,48 @@ function closePage(sessions) {
 	});
 	if (returnTo && sessions.has(returnTo)) sessions.open(returnTo);
 }
+/** The video folder (the "Video" workspace), asked once. */
+let dataDirP;
+const videoFolder = () => dataDirP ??= fetch("/live/api/deps").then((r) => r.json()).then((d) => d?.dataDir).catch(() => {
+	dataDirP = void 0;
+});
+/**
+* Each video gets a conversation of its own, named after it ("▶ title"), so
+* the history lists videos rather than a row of "Untitled". This applies to
+* the conversations in the video folder; a chat elsewhere that opened a video
+* keeps its own name and switches video in place.
+*/
+function videoHandlers(sessions, workspaces, sessionId, fallbackTitle) {
+	const own = async () => {
+		const cwd = sessions.info?.(sessionId)?.cwd;
+		const dir = await videoFolder();
+		return !!cwd && !!dir && samePath(cwd, dir);
+	};
+	return {
+		onNewVideo: async (link) => {
+			if (!workspaces || !await own()) return false;
+			try {
+				await openPage(sessions, {
+					sessionId: await pageSession(sessions, workspaces, fallbackTitle, true),
+					pending: link,
+					workspaces
+				});
+				return true;
+			} catch {
+				return false;
+			}
+		},
+		onTitle: (title) => {
+			own().then((yes) => {
+				const now = sessions.info?.(sessionId)?.title;
+				if (yes && sessions.rename && (!now || now.startsWith("▶ "))) sessions.rename(sessionId, `▶ ${title}`.slice(0, 80));
+			});
+		}
+	};
+}
 /** The video page as a main panel (newer DS-Harness): the app's sidebar and its toggle stay. */
 function VideoPanel(props) {
-	const { sessions, t } = props;
+	const { sessions, workspaces, t } = props;
 	const page = (0, react.useSyncExternalStore)(pageStore.subscribe, pageStore.get);
 	const face = (0, react.useSyncExternalStore)(sessions.subscribe, () => page.sessionId ? sessions.face(page.sessionId) : void 0);
 	const chat = (0, react.useSyncExternalStore)(sessions.subscribe, () => page.sessionId ? sessions.chat(page.sessionId) : void 0);
@@ -37513,6 +37880,7 @@ function VideoPanel(props) {
 			page: true,
 			chatFace: face,
 			chatSource: chat,
+			...videoHandlers(sessions, workspaces, page.sessionId, t("view.live")),
 			pending: page.pending,
 			onPendingDone: () => pageStore.set({ pending: void 0 })
 		}, page.sessionId)
@@ -37520,7 +37888,7 @@ function VideoPanel(props) {
 }
 /** Full-window video page (shell.overlay, older DS-Harness): player, subtitles, terms and the chat with DeepSeek. */
 function VideoPage(props) {
-	const { sessions, t } = props;
+	const { sessions, workspaces, t } = props;
 	const page = (0, react.useSyncExternalStore)(pageStore.subscribe, pageStore.get);
 	const face = (0, react.useSyncExternalStore)(sessions.subscribe, () => page.sessionId ? sessions.face(page.sessionId) : void 0);
 	const chat = (0, react.useSyncExternalStore)(sessions.subscribe, () => page.sessionId ? sessions.chat(page.sessionId) : void 0);
@@ -37537,6 +37905,7 @@ function VideoPage(props) {
 			t,
 			chatFace: face,
 			chatSource: chat,
+			...videoHandlers(sessions, workspaces, page.sessionId, t("view.live")),
 			onClose: () => closePage(sessions),
 			pending: page.pending,
 			onPendingDone: () => pageStore.set({ pending: void 0 })
@@ -37669,7 +38038,19 @@ function sessionsOf(ctx, extra) {
 				return;
 			}
 		},
-		subscribe: (fn) => s.list.subscribe(fn)
+		subscribe: (fn) => s.list.subscribe(fn),
+		rename: (id, title) => {
+			try {
+				s.binding(id)?.session?.rename?.(title);
+			} catch {}
+		},
+		info: (id) => {
+			const x = list().byId?.[id];
+			return x ? {
+				title: x.title,
+				cwd: x.cwd
+			} : void 0;
+		}
 	};
 }
 function apply(ctx) {
@@ -37728,6 +38109,7 @@ function apply(ctx) {
 		label: () => t("page.open"),
 		inject: () => ({
 			sessions: sessions(),
+			workspaces: ctx.workspaces,
 			t
 		})
 	}, VideoPage));
@@ -37745,6 +38127,7 @@ function apply(ctx) {
 			locale: NS,
 			inject: () => ({
 				sessions: sessions(),
+				workspaces: ctx.workspaces,
 				t
 			})
 		}, VideoPanel));