phone-lens 0.3.6 → 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; }
@@ -214,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);
@@ -265,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 || "无活动会话"})`);
@@ -276,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") {
@@ -301,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 () => {
@@ -359,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).
@@ -442,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",
@@ -481,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(
@@ -512,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,