dsh-plugin-notify-sounds 1.6.5 → 1.6.8

package/lib/client.js

@@ -70,6 +70,33 @@ window.__ModuleLoader__.load({
 			".dsh-notify-sounds-quietDash{color:var(--dsw-alias-label-tertiary)}",
 			".dsh-notify-sounds-hint{color:var(--dsw-alias-label-tertiary);margin-top:4px;font-size:12px;line-height:18px}",
 		].join("");
+
+		/**
+		 * Whether this page is running inside the Desktop shell rather than a
+		 * real browser.
+		 *
+		 * Derived from what the page can see: the shell serves the same bundle
+		 * over its own `dsh-app:` protocol and ships an Electron user agent,
+		 * while a browser serves it over http(s) with no Electron token. Either
+		 * signal alone would do; using both keeps one of them changing its mind
+		 * from flipping the answer.
+		 */
+		const isDesktopShell = () => {
+			if (typeof location !== "undefined" && location.protocol === "dsh-app:") return true;
+			return typeof navigator !== "undefined" && /Electron/i.test(navigator.userAgent ?? "");
+		};
+
+		/**
+		 * Whether the page is on macOS.
+		 *
+		 * Note this is a pure OS check: it matches macOS browsers too. The
+		 * places that need "macOS DESKTOP SHELL" combine this with
+		 * `isDesktopShell()`, because the window chrome that breaks the title
+		 * alert (`titleBarStyle: "hiddenInset"`) is the shell's own choice —
+		 * a macOS browser tab shows the document title like any other.
+		 */
+		const isMac = () => typeof navigator !== "undefined" && /Mac/i.test(`${navigator.platform ?? ""} ${navigator.userAgent ?? ""}`);
+
 		/** Stylesheet class names, one projection the components read. */
 		const css = {
 			section: "dsh-notify-sounds-section",
@@ -151,10 +178,12 @@ window.__ModuleLoader__.load({
 			"systemNotify.unsupported": "当前环境不支持系统通知",
 			"titleFlash.title": "窗口标题提醒",
 			"titleFlash.description": "页面处于后台时，在窗口标题前加文字标记（待处理 / 已完成），便于在任务栏察觉；回到页面后自动清除",
+			"titleFlash.macUnsupported": "macOS 暂不支持：标题栏隐藏、Dock 也没有窗口标题，标记无处显示（只在「窗口」菜单 / Mission Control 里可见）",
 			"titleFlash.pending": "待处理",
 			"titleFlash.done": "已完成",
 			"renotify.title": "未处理决策重复提醒",
 			"renotify.description": "有决策一直未处理时，每隔设定时间重新提醒；只要你已经看过它一眼（它出现时你正在窗口，或之后回到过窗口），就不再重复提醒，即使再切走也一样",
+			"renotify.browserHint": "浏览器的后台标签页会节流计时器，重复间隔可能被拉长（1 分钟档尤其明显）",
 			"renotify.interval": "重复间隔",
 			"renotify.minutes": "{n} 分钟",
 			"quiet.title": "静音时段",
@@ -228,10 +257,12 @@ window.__ModuleLoader__.load({
 			"systemNotify.unsupported": "System notifications are unavailable in this environment",
 			"titleFlash.title": "Window title alert",
 			"titleFlash.description": "While the page is hidden, mark the window title as waiting for you or finished, so the taskbar shows it; cleared when you return",
+			"titleFlash.macUnsupported": "Not supported on macOS: the title bar is hidden and the Dock shows no window title, so the mark has nowhere to appear (only the Window menu and Mission Control would show it)",
 			"titleFlash.pending": "Waiting for you",
 			"titleFlash.done": "Finished",
 			"renotify.title": "Repeat unanswered decisions",
 			"renotify.description": "Re-ping decisions that stay unanswered at a fixed interval; once you have seen one — it appeared while you were at the window, or you came back to it — it never repeats, even if you leave again",
+			"renotify.browserHint": "Background browser tabs throttle timers, so the interval can stretch (most visible at the 1-minute setting)",
 			"renotify.interval": "Interval",
 			"renotify.minutes": "{n} min",
 			"quiet.title": "Quiet hours",
@@ -416,9 +447,15 @@ window.__ModuleLoader__.load({
 		function normalizedGain(buffer) {
 			try {
 				let peak = 0;
+				// Sample every 8th frame: a peak that would clip is still
+				// caught by any reasonably strided scan (audio waveforms are
+				// smooth enough that adjacent samples carry the same
+				// magnitude), and this keeps a 30-second upload off the main
+				// thread's critical path.
+				const stride = 8;
 				for (let channel = 0; channel < buffer.numberOfChannels; channel++) {
 					const data = buffer.getChannelData(channel);
-					for (let i = 0; i < data.length; i++) {
+					for (let i = 0; i < data.length; i += stride) {
 						const magnitude = Math.abs(data[i]);
 						if (magnitude > peak) peak = magnitude;
 					}
@@ -456,12 +493,38 @@ window.__ModuleLoader__.load({
 		}
 
 		/**
-		 * Play one preset at a loudness in percent.
+		 * Run `play` on an AudioContext that is actually running.
 		 *
-		 * The context is resumed when the browser suspended it; a page that has
-		 * not yet seen a user gesture stays silent (the browser's autoplay
-		 * policy, not an error). Peaks stay far below clipping even with every
-		 * preset voice summed.
+		 * A suspended context has a FROZEN `currentTime`: scheduling sources on
+		 * it parks them on the timeline and they all fire together whenever the
+		 * context later resumes — the opposite of an alert. So nothing is ever
+		 * scheduled while suspended. Where resuming needs a user gesture (every
+		 * browser; the Electron shell needs none) this attempt is simply
+		 * dropped, and the unlock effect has the context running for the next
+		 * one rather than banking a stale sound for later.
+		 *
+		 * @param engine - the page's AudioContext.
+		 * @param play - schedules the sound.
+		 */
+		function whenRunning(engine, play) {
+			if (engine.state === "running") {
+				play();
+				return;
+			}
+			Promise.resolve(engine.resume())
+				.then(() => {
+					if (engine.state === "running") play();
+				})
+				.catch(() => {});
+		}
+
+		/**
+		 * Play one preset (or the uploaded sound) at a loudness in percent.
+		 *
+		 * Nothing is scheduled while the AudioContext cannot play — see
+		 * `whenRunning`, which defers to the first real user gesture on
+		 * browsers. Peaks stay far below clipping even with every preset voice
+		 * summed.
 		 *
 		 * @param id - preset id; `none`, unknown ids, and `custom` without an
 		 *   upload are silent no-ops (the caller falls back first).
@@ -472,43 +535,51 @@ window.__ModuleLoader__.load({
 		 */
 		function playSound(id, volumePercent, customBase64) {
 			if (id === "none" || id === undefined) return;
+			const engine = audioEngine();
+			if (engine === undefined) return;
 			if (id === "custom") {
-				const engine = audioEngine();
-				if (engine === undefined) return;
-				if (engine.state === "suspended") engine.resume().catch(() => {});
-				playCustomSound(engine, customBase64, volumePercent);
+				whenRunning(engine, () => playCustomSound(engine, customBase64, volumePercent));
 				return;
 			}
 			const preset = SOUND_PRESETS[id];
 			if (preset === undefined) return;
-			const engine = audioEngine();
-			if (engine === undefined) return;
-			if (engine.state === "suspended") engine.resume().catch(() => {});
 			const percent = Number.isFinite(volumePercent) ? volumePercent : DEFAULT_VOLUME;
 			const loudness = Math.max(0, Math.min(100, percent)) / 100;
 			if (loudness === 0) return;
-			const master = engine.createGain();
-			master.gain.value = loudness * 0.6;
-			master.connect(engine.destination);
-			const t0 = engine.currentTime + 0.02;
-			for (const note of preset.notes) {
-				const osc = engine.createOscillator();
-				const gain = engine.createGain();
-				osc.type = note.type ?? "sine";
-				const start = t0 + note.at;
-				osc.frequency.setValueAtTime(note.freq, start);
-				if (note.glideTo !== undefined) {
-					osc.frequency.exponentialRampToValueAtTime(note.glideTo, start + note.dur * 0.85);
+			whenRunning(engine, () => {
+				const master = engine.createGain();
+				master.gain.value = loudness * 0.6;
+				master.connect(engine.destination);
+				const t0 = engine.currentTime + 0.02;
+				let tail = 0;
+				for (const note of preset.notes) {
+					const osc = engine.createOscillator();
+					const gain = engine.createGain();
+					osc.type = note.type ?? "sine";
+					const start = t0 + note.at;
+					osc.frequency.setValueAtTime(note.freq, start);
+					if (note.glideTo !== undefined) {
+						osc.frequency.exponentialRampToValueAtTime(note.glideTo, start + note.dur * 0.85);
+					}
+					const peak = Math.max(0.0002, note.gain * 0.25);
+					gain.gain.setValueAtTime(0.0001, start);
+					gain.gain.exponentialRampToValueAtTime(peak, start + 0.012);
+					gain.gain.exponentialRampToValueAtTime(0.0001, start + note.dur);
+					osc.connect(gain);
+					gain.connect(master);
+					osc.start(start);
+					osc.stop(start + note.dur + 0.05);
+					tail = Math.max(tail, note.at + note.dur);
 				}
-				const peak = Math.max(0.0002, note.gain * 0.25);
-				gain.gain.setValueAtTime(0.0001, start);
-				gain.gain.exponentialRampToValueAtTime(peak, start + 0.012);
-				gain.gain.exponentialRampToValueAtTime(0.0001, start + note.dur);
-				osc.connect(gain);
-				gain.connect(master);
-				osc.start(start);
-				osc.stop(start + note.dur + 0.05);
-			}
+				// Release the master gain once the tail has faded. Without
+				// this, every play leaves a gain node permanently wired to
+				// the destination — a slow audio-node leak on long sessions.
+				setTimeout(() => {
+					try {
+						master.disconnect();
+					} catch {}
+				}, Math.max(0, (t0 + tail + 0.1 - engine.currentTime) * 1000 + 50));
+			});
 		}
 
 		/**
@@ -747,13 +818,17 @@ window.__ModuleLoader__.load({
 		const UPDATE_APPLY_PATH = "/notify-sounds/update/apply";
 
 		/**
-		 * Show one OS notification; every failure mode is silent. The tag
-		 * collapses repeats per trigger kind, and `silent` keeps the OS from
-		 * layering its own sound on top of ours.
+		 * Show one OS notification; every failure mode is silent.
+		 *
+		 * `tag` is our OWN collapse key — we close the previous notification
+		 * ourselves rather than handing the tag to the platform, because a
+		 * superseded toast can swallow clicks aimed at it. `silent` keeps the
+		 * OS from layering its own sound on top of ours.
 		 *
 		 * @param title - notification title.
 		 * @param body - notification body.
-		 * @param tag - collapse tag.
+		 * @param tag - our internal key for closing the previous generation;
+		 *   deliberately NOT passed to the platform (see the comment inside).
 		 */
 		function showSystemNotification(title, body, tag) {
 			try {
@@ -806,9 +881,13 @@ window.__ModuleLoader__.load({
 				};
 			} catch (error) {
 				// `new Notification` is what can throw here, when the
-				// environment refuses to construct one. Worth one line: the
-				// Settings row reads `Notification.permission`, which still
-				// says "granted", so nothing else would explain the silence.
+				// environment refuses to construct one — nearly every mobile
+				// browser does exactly that, while still reporting a
+				// "granted" permission. So this is not just a log line: it is
+				// recorded and shown, because the Settings row otherwise reads
+				// `Notification.permission` and proudly says "granted" for a
+				// switch that can never do anything.
+				notificationConstructionFailed = true;
 				if (!warnedNotificationFailure) {
 					warnedNotificationFailure = true;
 					console.warn("notify-sounds: could not show a system notification", error);
@@ -819,6 +898,15 @@ window.__ModuleLoader__.load({
 		/** Whether the one-time notification-construction warning has been logged. */
 		let warnedNotificationFailure = false;
 
+		/**
+		 * Whether this environment refused to construct a Notification.
+		 *
+		 * Set by the first real attempt, read by the settings row: permission
+		 * being "granted" proves nothing about whether a toast can actually be
+		 * built (MDN: the constructor throws in nearly all mobile browsers).
+		 */
+		let notificationConstructionFailed = false;
+
 		/**
 		 * Human-readable summary of one pending interaction, for notification
 		 * bodies: the approval's localized reason first, then its raw reason,
@@ -876,14 +964,22 @@ window.__ModuleLoader__.load({
 		 * @param props - copy.
 		 * @returns the notice element, or null when there is nothing to say.
 		 */
-		function UpdateNotice({ t }) {
+		function UpdateNotice({ t, autoCheck }) {
 			const [applied, setApplied] = useState(undefined);
+			// Explicit `=== true`, not `!== false`: during the first frame
+			// `useConfig` may still be loading, and `undefined` must NOT be
+			// treated as "allowed" — that is the one case where a request
+			// could slip past a user who has the switch off. The dep array is
+			// `[autoCheck]` rather than `[]` so the effect picks up the real
+			// value when it arrives, instead of only ever reading the first
+			// render's prop.
 			useEffect(() => {
+				if (autoCheck !== true) return;
 				fetch(UPDATE_CHECK_PATH, { method: "GET" })
 					.then((response) => response.json())
 					.then((payload) => setApplied(payload?.applied))
 					.catch(() => {});
-			}, []);
+			}, [autoCheck]);
 			if (applied === undefined || typeof applied.to !== "string") return null;
 			const version = (text) => (typeof text === "string" && text !== "" ? `v${text}` : "?");
 			return h("div", { className: css.hint, key: "text" }, `${t("update.done")}：${version(applied.from)} → ${version(applied.to)}，${t("update.restart")}`);
@@ -937,7 +1033,7 @@ window.__ModuleLoader__.load({
 			return h("div", { className: css.section }, [
 				h("h2", { className: css.title, key: "title" }, t("title")),
 				h("p", { className: css.intro, key: "intro" }, t("intro")),
-				h(UpdateNotice, { key: "update-notice", t }),
+				h(UpdateNotice, { key: "update-notice", t, autoCheck: value === undefined ? undefined : value.updateAutoCheck !== false }),
 				h("div", { className: css.rows, key: "rows" }, [
 					h(SwitchRow, {
 						key: "enabled",
@@ -1068,7 +1164,13 @@ window.__ModuleLoader__.load({
 						key: "titleFlash",
 						t,
 						title: t("titleFlash.title"),
-						description: t("titleFlash.description"),
+						// macOS DESKTOP shell only: its title bar is hiddenInset
+						// and the Dock shows no per-window title, so the mark
+						// has nowhere to appear. A macOS BROWSER tab shows the
+						// document title like any other, so this is not
+						// applied there. iOS Safari's UA also contains "like
+						// Mac OS X" — `isDesktopShell` keeps it out.
+						description: isMac() && isDesktopShell() ? t("titleFlash.macUnsupported") : t("titleFlash.description"),
 						label: t("titleFlash.title"),
 						checked: value?.titleFlash === true,
 						disabled,
@@ -1122,6 +1224,7 @@ window.__ModuleLoader__.load({
 					h(UpdateRow, {
 						key: "update",
 						t,
+						autoCheck: value === undefined ? undefined : value.updateAutoCheck !== false,
 					}),
 				]),
 			]);
@@ -1433,7 +1536,11 @@ window.__ModuleLoader__.load({
 		 */
 		function SystemNotifyRow({ t, checked, disabled, failed, onChange }) {
 			const [busy, setBusy] = useState(false);
-			const supported = typeof Notification !== "undefined";
+			// `typeof Notification` alone is not enough: nearly every mobile
+			// browser exposes the API and happily reports "granted", yet the
+			// constructor throws every time. Once a real attempt has failed,
+			// this environment is treated as unsupported and the row says so.
+			const supported = typeof Notification !== "undefined" && !notificationConstructionFailed;
 			const permission = supported ? Notification.permission : "unsupported";
 			const hintKey = !supported ? "systemNotify.unsupported"
 				: permission === "denied" ? "systemNotify.denied"
@@ -1486,6 +1593,10 @@ window.__ModuleLoader__.load({
 				h("div", { key: "text" }, [
 					h("div", { className: css.rowTitle, key: "title" }, t("renotify.title")),
 					h("div", { className: css.rowDescription, key: "description" }, t("renotify.description")),
+					// Only where it is true: the Desktop shell runs this timer
+					// in a real window that is never throttled, so the caveat
+					// would only confuse its users.
+					isDesktopShell() ? null : h("div", { className: css.hint, key: "hint" }, t("renotify.browserHint")),
 					failed ? h("div", { className: css.error, role: "alert", key: "error" }, t("saveFailed")) : null,
 				]),
 				h("div", { className: css.stackControl, key: "control" }, [
@@ -1586,7 +1697,7 @@ window.__ModuleLoader__.load({
 		 * @param props - copy.
 		 * @returns the row element tree.
 		 */
-		function UpdateRow({ t }) {
+		function UpdateRow({ t, autoCheck }) {
 			const [state, setState] = useState({ phase: "idle" });
 			const check = (force) => async () => {
 				setState({ phase: "checking" });
@@ -1609,9 +1720,13 @@ window.__ModuleLoader__.load({
 				}
 			};
 			// A cached answer makes this free; only a cold Host reaches out.
+			// Same guard as the notice: `=== true` (not `!== false`), because
+			// during the loading frame `undefined` must not be treated as
+			// permission to reach out. The button below works regardless.
 			useEffect(() => {
+				if (autoCheck !== true) return;
 				check(false)();
-			}, []);
+			}, [autoCheck]);
 			const payload = state.payload;
 			const version = (text) => (typeof text === "string" && text !== "" ? `v${text}` : "?");
 			// The Host remembers the last install and repeats it with every
@@ -1707,7 +1822,11 @@ window.__ModuleLoader__.load({
 			const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 			svg.setAttribute("width", "16");
 			svg.setAttribute("height", "16");
-			svg.setAttribute("viewBox", "0 0 16 16");
+			// 17×17, matching the artwork's own coordinate system
+			// (`IconAlarmClockOutlineArtwork`); the gear it replaces is 16×16,
+			// and reusing ITS viewport here would scale the alarm paths up by
+			// 17/16 and make the glyph visibly larger than its neighbours.
+			svg.setAttribute("viewBox", "0 0 17 17");
 			svg.setAttribute("fill", "none");
 			svg.setAttribute("stroke-width", "1.3");
 			svg.setAttribute("aria-hidden", "true");
@@ -1742,7 +1861,18 @@ window.__ModuleLoader__.load({
 			const shippedClass = icon.getAttribute("class");
 			if (shippedClass !== null && shippedClass !== "") replacement.setAttribute("class", shippedClass);
 			replacement.setAttribute(NAV_ICON_MARKER, "");
-			cell.replaceChild(replacement, icon);
+			// Keep the original so the disposer can restore it. `replaceChild`
+			// detaches a node React still holds in its fiber tree; if React
+			// ever re-renders that slot it throws NotFoundError trying to
+			// remove the detached node. Restoring on dispose prevents that.
+			replacement._originalIcon = icon;
+			try {
+				cell.replaceChild(replacement, icon);
+			} catch {
+				// A React re-render raced the swap; the next observer pass
+				// will try again on the fresh node.
+				return false;
+			}
 			return true;
 		}
 
@@ -1791,6 +1921,18 @@ window.__ModuleLoader__.load({
 			return () => {
 				detachPanel();
 				bodyObserver.disconnect();
+				// Restore every swapped glyph so React never finds a detached
+				// node in its fiber tree (see swapNavIcon).
+				if (typeof document !== "undefined") {
+					for (const el of document.querySelectorAll(`[${NAV_ICON_MARKER}]`)) {
+						const original = el._originalIcon;
+						if (original !== undefined && el.parentNode !== null) {
+							try {
+								el.parentNode.replaceChild(original, el);
+							} catch {}
+						}
+					}
+				}
 			};
 		}
 		//#endregion
@@ -1863,13 +2005,22 @@ window.__ModuleLoader__.load({
 			 *
 			 * @returns the `byId` row map, or undefined when unavailable.
 			 */
+			// Cache one snapshot per synchronous block: `isNotifiable` is
+			// called per session in read()/trackPending loops, and each call
+			// would otherwise take a fresh snapshot (O8).
+			let cachedRows;
+			let cachedRowsAt = 0;
 			const sessionRows = () => {
+				const now = Date.now();
+				if (cachedRows !== undefined && now === cachedRowsAt) return cachedRows;
 				try {
-					return ctx.sessions?.list?.getSnapshot?.()?.byId
+					cachedRows = ctx.sessions?.list?.getSnapshot?.()?.byId
 						?? ctx.uiSession?.sessions?.list?.getSnapshot?.()?.byId;
 				} catch {
-					return undefined;
+					cachedRows = undefined;
 				}
+				cachedRowsAt = now;
+				return cachedRows;
 			};
 
 			/**
@@ -1942,7 +2093,10 @@ window.__ModuleLoader__.load({
 				// triggers are edge-fired that alert is lost rather than
 				// delayed.
 				if (!reminder) {
-					if (cooldown.size >= 96) cooldown.clear();
+					// Evict the oldest entry rather than clearing the whole
+					// table: one session hitting the cap must not silence
+					// every other session's cooldown.
+					if (cooldown.size >= 96) cooldown.delete(cooldown.keys().next().value);
 					cooldown.set(`${kind}:${sessionId}`, now);
 				}
 				const fallback = kind === "completion" ? "ding" : kind === "question" ? "chime" : "bell";
@@ -2183,6 +2337,28 @@ window.__ModuleLoader__.load({
 				};
 			}, "notify-sounds: session status watcher");
 
+			// Browsers gate Web Audio behind a user gesture: until one happens
+			// the context starts suspended and `resume()` simply stays pending,
+			// so a trigger firing in the meantime would be lost — and worse,
+			// anything scheduled on the frozen timeline would all fire at once
+			// whenever some later gesture unlocked it. So the FIRST real
+			// gesture starts the context and keeps it running, and nothing is
+			// scheduled while suspended (see `whenRunning`). The Desktop shell
+			// needs none of this — Electron starts audio without a gesture,
+			// which is exactly why the problem is invisible on the Desktop.
+			ctx.effect(() => {
+				if (typeof document === "undefined") return () => {};
+				const unlock = () => {
+					const engine = audioEngine();
+					if (engine?.state === "suspended") engine.resume().catch(() => {});
+				};
+				const events = ["pointerdown", "keydown", "touchstart"];
+				for (const type of events) document.addEventListener(type, unlock, { capture: true, passive: true });
+				return () => {
+					for (const type of events) document.removeEventListener(type, unlock, { capture: true });
+				};
+			}, "notify-sounds: audio unlock");
+
 			// Quiet update check: shortly after the page settles, then at most
 			// once a day, and never while the user has it turned off. It asks
 			// the Host's own route — one small query, nothing downloaded — and