phone-lens 0.3.5 → 0.3.7

package/lib/client.js

@@ -19,6 +19,12 @@ window.__ModuleLoader__.load({
 
 		const NS = "phone-lens";
 		const PORT_KEY = "phoneLens.port";
+		// Capture modes (user-selected in the settings panel; stored host-side).
+		const SAVE_MODES = [
+			{ id: "composer", title: "自动注入对话", desc: "拍照后自动放入输入框", flash: "已切换:拍照后自动注入输入框" },
+			{ id: "both", title: "注入对话并保存", desc: "放入输入框,同时保存到指定文件夹", flash: "已切换:注入对话并保存到文件夹" },
+			{ id: "folder", title: "仅保存到文件夹", desc: "不放入输入框,只保存到指定电脑文件夹", flash: "已切换:仅保存到文件夹" },
+		];
 		// App download fallbacks (used when /app-qr.json is unavailable on an older host).
 		// Gitee release carrying the newest APK (App unchanged since v0.2.0).
 		const APP_GITEE = "https://gitee.com/qianfengbingtang/phone-lens/releases/download/v0.2.0/app-release.apk";
@@ -56,6 +62,22 @@ window.__ModuleLoader__.load({
 .lm-qr a.lm-dl:hover { text-decoration: underline; }
 .lm-port { display: flex; gap: 6px; align-items: center; font-size: 11px; color: #7d8da0; }
 .lm-port input { width: 64px; background: #0d1117; color: #dfe7ee; border: 1px solid #2f3b48; border-radius: 6px; padding: 3px 6px; font-size: 12px; }
+.lm-settings { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #232c36; padding-top: 9px; }
+.lm-sethead { display: flex; align-items: center; gap: 8px; }
+.lm-sethead b { font-size: 12px; color: #dfe7ee; font-weight: 600; }
+.lm-setlabel { font-size: 10px; color: #7d8da0; }
+.lm-mode { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; border: 1px solid #2f3b48; background: #1f2937; cursor: pointer; text-align: left; }
+.lm-mode:hover { background: #28323e; }
+.lm-mode.selected { border-color: #3b7cb5; background: #1d3f61; }
+.lm-mode .dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #8fa1b5; flex: none; }
+.lm-mode.selected .dot { border-color: #6cc0ff; background: #6cc0ff; }
+.lm-mode .txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.lm-mode .t { font-size: 12px; color: #dfe7ee; }
+.lm-mode .d { font-size: 10px; color: #7d8da0; }
+.lm-setrow { display: flex; gap: 6px; }
+.lm-setrow input { flex: 1; min-width: 0; background: #0d1117; color: #dfe7ee; border: 1px solid #2f3b48; border-radius: 6px; padding: 5px 8px; font-size: 11px; }
+.lm-sethint { font-size: 10px; color: #7d8da0; line-height: 1.45; word-break: break-all; }
+.lm-preview-off { height: 220px; display: flex; align-items: center; justify-content: center; background: #10141a; border: 1px dashed #2a333e; border-radius: 8px; color: #d9a441; font-size: 12px; text-align: center; padding: 0 12px; }
 .lm-flash { font-size: 11px; color: #8fa1b5; min-height: 14px; }
 .lm-flash.ok { color: #58b368; }
 .lm-flash.err { color: #e5696e; }
@@ -120,15 +142,20 @@ window.__ModuleLoader__.load({
 
 		// ── composable pre-send (dsh composer draft) ───────────────────────────
 		// The phone photo is staged as a composer draft attachment, NOT injected
-		// into the model: the user types text next and hits send. Uses the dsh
-		// channel confirmed from source: sessions.scope(sessionId) → conversation
-		// service → createDraftImages(files) → input.for(actx).addImages(ids).
+		// into the model: the user types text next and hits send. On dsh 0.1.7+
+		// the composer is a Lexical editor whose intake is package-internal, so
+		// we dispatch a synthetic paste event and the editor's own paste handler
+		// admits the file (intakeFiles → createDrafts) — the only stable seam.
 		let hostCtx = null; // set in apply() so the component can reach the runtime
 
 		function currentSessionId(ctx) {
 			try {
-				// cordis: accessing a service as a ctx property requires it in
-				// `inject`; use ctx.get() instead (never throws for absent).
+				// rc.2: the current session lives on the uiSession binding source,
+				// not on sessions.list.getSnapshot().current (removed in 0.1.7).
+				const ui = ctx.get("uiSession");
+				const key = ui?.current?.value?.key;
+				if (key) return key;
+				// pre-0.1.7 fallback.
 				const sessions = ctx.get("sessions");
 				if (!sessions) throw new Error("no sessions service");
 				const list = sessions.list;
@@ -141,25 +168,34 @@ window.__ModuleLoader__.load({
 			}
 		}
 
+		// rc.2 composer is a Lexical editor; its root element carries the
+		// data-lexical-editor marker. Fall back to any visible contenteditable.
+		function findComposerEditor() {
+			const lexical = document.querySelector('div[data-lexical-editor="true"][contenteditable="true"]');
+			if (lexical) return lexical;
+			const candidates = document.querySelectorAll('[contenteditable="true"]');
+			for (const el of candidates) {
+				if (el.getClientRects().length > 0) return el;
+			}
+			return null;
+		}
+
 		async function stageIntoComposer(ctx, port, attachmentId) {
-			if (!ctx) throw new Error("no runtime ctx (phone-lens host not wired)");
 			const resp = await fetch(`http://127.0.0.1:${port}/pending/${attachmentId}`).catch((e) => { throw new Error("fetch pending: " + String(e)); });
 			if (!resp.ok) throw new Error("pending fetch HTTP " + resp.status);
 			const buf = await resp.arrayBuffer();
 			const file = new File([buf], `phone-${attachmentId.slice(0, 8)}.jpg`, { type: "image/jpeg" });
-			const sid = currentSessionId(ctx);
-			if (!sid) throw new Error("no current session id");
-			// scope-addressed: ctx.get('sessions').scope(sid) → scoped actx
-			const sessions = ctx.get("sessions");
-			const actx = sessions.scope(sid);
-			if (!actx) throw new Error("no session scope for " + sid);
-			const conv = actx.get("conversation");
-			if (!conv) throw new Error("no conversation service in scope");
-			const atts = conv.createDraftImages([file]);
-			if (!atts || !atts.length) throw new Error("createDraftImages empty");
-			const input = conv.input.for(actx);
-			const ok = input.addImages(atts.map((a) => a.id));
-			if (ok !== true) throw new Error("input.addImages rejected (busy admission?)");
+			// rc.2 path: the composer's own paste handler admits image files
+			// through the official intake (intakeFiles → createDrafts), so we
+			// dispatch a synthetic paste instead of touching package-internal
+			// draft APIs. The composer is bound to the current session already.
+			const editor = findComposerEditor();
+			if (!editor) throw new Error("no composer input (open a session first)");
+			editor.focus({ preventScroll: true });
+			const dt = new DataTransfer();
+			dt.items.add(file);
+			const ev = new ClipboardEvent("paste", { clipboardData: dt, bubbles: true, cancelable: true });
+			editor.dispatchEvent(ev);
 			return true;
 		}
 
@@ -200,8 +236,12 @@ window.__ModuleLoader__.load({
 			const [flash, setFlash] = useState("");
 			const [pending, setPending] = useState([]); // [{id, name}] waiting to be staged
 			const [devices, setDevices] = useState([]); // [{id,name,active}]
-			const [rename, setRename] = useState(null); // {id, name} — self-drawn rename dialog
-			const [appQr, setAppQr] = useState(null); // app-download QR dialog payload (or {loading}/{fallback:true})
+				const [rename, setRename] = useState(null); // {id, name} — self-drawn rename dialog
+				const [appQr, setAppQr] = useState(null); // app-download QR dialog payload (or {loading}/{fallback:true})
+				const [previewOff, setPreviewOff] = useState(false); // host says the phone's stream stopped (preview off on the phone)
+				const [settingsOpen, setSettingsOpen] = useState(false); // collapsible settings section under the main card
+				const [appSt, setAppSt] = useState(null); // {saveMode, saveDir, effectiveSaveDir} | null (null = host too old)
+				const [dirDraft, setDirDraft] = useState("");
 			const canvasRef = useRef(null);
 			const lastQrCode = useRef(null); // last pairing code seen — detects auto rotation for the "已更新" flash
 			const wsRef = useRef(null);
@@ -251,6 +291,13 @@ window.__ModuleLoader__.load({
 							if (m.type === "meta" && m.camera.rotation !== undefined) rotRef.current = m.camera.rotation;
 						} else if (m.type === "frame_meta") {
 							if (m.rotation !== undefined) rotRef.current = m.rotation;
+						} else if (m.type === "preview_state") {
+							// host-derived: the ACTIVE phone's stream stopped (user turned
+							// preview off in the app) or started again
+							setPreviewOff(!m.on);
+						} else if (m.type === "upload_saved") {
+							// folder-only mode: the photo bypassed the composer; local hint
+							setFlashOk(`已保存至 ${m.dir || "指定文件夹"}`);
 						} else if (m.type === "injected") {
 							if (m.ok) setFlashOk(`已注入会话 ${(m.sessionId || "").slice(0, 8)}…`);
 							else setFlashErr(`已保存到电脑 ✓(未注入:${m.reason || "无活动会话"})`);
@@ -262,7 +309,7 @@ window.__ModuleLoader__.load({
 							stageIntoComposer(hostCtx, port, m.attachmentId)
 								.then(() => {
 									setPending((p) => p.filter((x) => x.id !== m.attachmentId));
-									setFlashOk("照片已放入对话框输入框,输入文字后发送");
+									setFlashOk("照片已注入输入框,输入文字后发送");
 								})
 								.catch((e) => setFlashErr("自动放入失败: " + String(e && e.message || e).slice(0, 90)));
 						} else if (m.type === "devices") {
@@ -287,10 +334,11 @@ window.__ModuleLoader__.load({
 							setFlashErr(`${m.code}${m.message ? ":" + m.message : ""}`);
 						}
 					};
-					ws.onclose = () => {
-						setCamOn(false);
-						if (!stopped) timer = setTimeout(connect, 2000);
-					};
+						ws.onclose = () => {
+							setCamOn(false);
+							setPreviewOff(false);
+							if (!stopped) timer = setTimeout(connect, 2000);
+						};
 				};
 				connect();
 				return () => {
@@ -345,6 +393,55 @@ window.__ModuleLoader__.load({
 				}
 			}
 
+			// Manual refresh must FORCE a new pairing code server-side: /qr.json
+			// alone keeps returning the still-live code (same QR, same countdown),
+			// which read as a dead button. Same recipe as /view.html: ask the host
+			// to burn the current code via WS, then fetch the fresh one.
+			function manualRefreshQr() {
+				const ws = wsRef.current;
+				if (ws && ws.readyState === 1) {
+					ws.send(JSON.stringify({ type: "refresh_pairing" }));
+					setTimeout(() => void refreshQr(true), 150);
+				} else {
+					void refreshQr(true);
+				}
+			}
+
+			// ── settings (capture mode / folder / port) ───────────────────────────
+			async function loadAppSt() {
+				try {
+					const r = await fetch(`${baseUrl}/app-settings`, { cache: "no-store" });
+					if (!r.ok) throw new Error(`HTTP ${r.status}`);
+					const data = await r.json();
+					setAppSt(data);
+					setDirDraft(data.effectiveSaveDir || data.saveDir || "");
+				} catch {
+					setAppSt(null); // older host without /app-settings: port-only settings
+				}
+			}
+
+			async function saveAppSt(patch) {
+				try {
+					const r = await fetch(`${baseUrl}/app-settings`, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify(patch),
+					});
+					if (!r.ok) throw new Error(`HTTP ${r.status}`);
+					const data = await r.json();
+					setAppSt(data);
+					setDirDraft(data.effectiveSaveDir || data.saveDir || "");
+					return true;
+				} catch (e) {
+					setFlashErr("设置保存失败: " + String(e && e.message || e).slice(0, 60));
+					return false;
+				}
+			}
+
+			function saveDirDraft() {
+				void saveAppSt({ saveDir: dirDraft }).then((ok) => ok && setFlashOk("保存目录已更新"));
+			}
+
 			// Open the app-download dialog: QR (from the host) + source links.
 			// Falls back to the built-in Gitee/GitHub links when the endpoint is
 			// missing (older host half running an older release).
@@ -428,10 +525,28 @@ window.__ModuleLoader__.load({
 							h(
 								"div",
 								{ className: "lm-body" },
-								// only show the viewfinder canvas when a camera is actually
-								// streaming; a disconnected phone left a big black rectangle
-								camOn ? h("canvas", { ref: canvasRef, className: "lm-canvas", width: 360, height: 640 }) : null,
-								h("div", { className: "lm-status" }, h("span", null, fps > 0 ? `${fps} fps` : "—"), h("span", { className: camOn ? "" : "warn-big" }, camOn ? "预览中" : "手机未连接！相同局域网下扫码添加配对设备；若已配对过的手机，请在设置内点击本电脑端，激活为活动设备")),
+								// only show the viewfinder canvas while a camera is actually
+								// streaming; when the phone turned preview off, clear the last
+								// frame and say so instead of freezing on a stale picture
+								camOn && !previewOff
+									? h("canvas", { ref: canvasRef, className: "lm-canvas", width: 360, height: 640 })
+									: camOn && previewOff
+										? h("div", { className: "lm-preview-off" }, "您在手机端已关闭预览功能")
+										: null,
+								h(
+									"div",
+									{ className: "lm-status" },
+									h("span", null, camOn && !previewOff && fps > 0 ? `${fps} fps` : "—"),
+									h(
+										"span",
+										{ className: !camOn ? "warn-big" : previewOff ? "warn" : "" },
+										!camOn
+											? "手机未连接！相同局域网下扫码添加配对设备；若已配对过的手机，请在设置内点击本电脑端，激活为活动设备"
+											: previewOff
+												? "预览已关闭,在手机端重新开启后恢复"
+												: "预览中",
+									),
+								),
 								devices && devices.length > 1
 									? h(
 											"div",
@@ -467,8 +582,8 @@ window.__ModuleLoader__.load({
 								h(
 									"div",
 									{ className: "lm-row" },
-									h("button", { className: "lm-btn primary", disabled: !camOn, onClick: shoot }, "◉ 拍照并放入输入框"),
-									h("button", { className: "lm-btn", onClick: () => void refreshQr() }, "↻ 二维码"),
+									h("button", { className: "lm-btn primary", disabled: !camOn || previewOff, onClick: shoot }, "◉ 拍照并注入"),
+									h("button", { className: "lm-btn", onClick: manualRefreshQr, title: "作废当前配对码并生成新码" }, "↻ 二维码"),
 								),
 								!camOn
 									? h(
@@ -498,11 +613,58 @@ window.__ModuleLoader__.load({
 								h("span", { className: `lm-flash${flash.startsWith("已") ? " ok" : ""}` }, flash),
 								h(
 									"div",
-									{ className: "lm-port" },
-									"接收端口",
-									h("input", { value: portDraft, onChange: (e) => setPortDraft(e.target.value), onKeyDown: (e) => e.key === "Enter" && savePort(), inputMode: "numeric" }),
-									h("button", { className: "lm-btn", style: { flex: "none", padding: "3px 8px" }, onClick: savePort }, "切换"),
+									{ className: "lm-row" },
+									h("button", { className: "lm-btn", onClick: () => { const next = !settingsOpen; setSettingsOpen(next); if (next) void loadAppSt(); } }, settingsOpen ? "▲ 收起设置" : "⚙ 设置"),
 								),
+								settingsOpen
+									? h(
+											"div",
+											{ className: "lm-settings" },
+											appSt
+												? [
+														h("div", { className: "lm-setlabel" }, "拍照模式"),
+														...SAVE_MODES.map((m) =>
+															h(
+																"button",
+																{
+																	key: m.id,
+																	className: "lm-mode" + (appSt.saveMode === m.id ? " selected" : ""),
+																	onClick: () => {
+																		if (appSt.saveMode === m.id) return;
+																		void saveAppSt({ saveMode: m.id }).then((ok) => ok && setFlashOk(m.flash));
+																	},
+																},
+																h("span", { className: "dot" }),
+																h(
+																	"span",
+																	{ className: "txt" },
+																	h("span", { className: "t" }, m.title),
+																	h("span", { className: "d" }, m.desc),
+																),
+															),
+														),
+														appSt.saveMode !== "composer"
+															? h(
+																	"div",
+																	{ className: "lm-setrow" },
+																	h("input", { value: dirDraft, onChange: (e) => setDirDraft(e.target.value), onKeyDown: (e) => e.key === "Enter" && saveDirDraft(), placeholder: "保存文件夹的绝对路径(手输或粘贴)" }),
+																	h("button", { className: "lm-btn", style: { flex: "none" }, onClick: saveDirDraft }, "保存"),
+																)
+															: null,
+														appSt.saveMode !== "composer"
+															? h("div", { className: "lm-sethint" }, `留空路径即恢复默认目录: ${appSt.effectiveSaveDir}`)
+															: null,
+													]
+												: h("div", { className: "lm-sethint" }, "设置服务不可用(电脑端版本较旧),仅可调整端口。"),
+											h(
+												"div",
+												{ className: "lm-port" },
+												"接收端口",
+												h("input", { value: portDraft, onChange: (e) => setPortDraft(e.target.value), onKeyDown: (e) => e.key === "Enter" && savePort(), inputMode: "numeric" }),
+												h("button", { className: "lm-btn", style: { flex: "none", padding: "3px 8px" }, onClick: savePort }, "切换"),
+											),
+										)
+									: null,
 							),
 						)
 					: null,