pmptr 0.1.0

package/src/main/main.js

@@ -0,0 +1,223 @@
+const { app, BrowserWindow, ipcMain, screen, shell } = require("electron");
+const path = require("path");
+const fs = require("fs");
+
+let controlWin = null;
+let prompterWin = null;
+
+const settingsPath = () => path.join(app.getPath("userData"), "settings.json");
+
+function loadSettings() {
+  try {
+    return JSON.parse(fs.readFileSync(settingsPath(), "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+function saveSettings(s) {
+  try {
+    fs.mkdirSync(path.dirname(settingsPath()), { recursive: true });
+    fs.writeFileSync(settingsPath(), JSON.stringify(s, null, 2));
+  } catch (e) {
+    console.error("settings save failed", e);
+  }
+}
+
+function createControlWindow() {
+  controlWin = new BrowserWindow({
+    width: 520,
+    height: 820,
+    minWidth: 380,
+    minHeight: 520,
+    title: "pmptr",
+    backgroundColor: "#0f1115",
+    webPreferences: {
+      preload: path.join(__dirname, "preload.js"),
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: true,
+    },
+  });
+  controlWin.removeMenu();
+  controlWin.loadFile(path.join(__dirname, "../control/control.html"));
+  controlWin.on("closed", () => {
+    controlWin = null;
+    if (prompterWin && !prompterWin.isDestroyed()) prompterWin.close();
+    app.quit();
+  });
+}
+
+function createPrompterWindow(initial) {
+  if (prompterWin && !prompterWin.isDestroyed()) {
+    prompterWin.show();
+    prompterWin.focus();
+    return;
+  }
+
+  const display = screen.getPrimaryDisplay();
+  const work = display.workArea;
+  const width = Math.round(
+    Math.min(initial?.windowWidth ?? 900, work.width - 40)
+  );
+  const height = Math.round(initial?.windowHeight ?? Math.min(320, work.height - 80));
+  const x = Math.round(work.x + (work.width - width) / 2);
+  const y = work.y + 24;
+
+  prompterWin = new BrowserWindow({
+    width,
+    height,
+    x,
+    y,
+    minWidth: 240,
+    minHeight: 80,
+    frame: false,
+    transparent: true,
+    resizable: true,
+    movable: true,
+    hasShadow: false,
+    alwaysOnTop: true,
+    skipTaskbar: true,
+    backgroundColor: "#00000000",
+    show: false,
+    webPreferences: {
+      preload: path.join(__dirname, "../prompter/prompter-preload.js"),
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: true,
+    },
+  });
+
+  prompterWin.setAlwaysOnTop(true, "screen-saver");
+  prompterWin.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+  prompterWin.loadFile(path.join(__dirname, "../prompter/prompter.html"));
+  prompterWin.once("ready-to-show", () => {
+    prompterWin.showInactive();
+  });
+  prompterWin.on("closed", () => {
+    prompterWin = null;
+    if (controlWin && !controlWin.isDestroyed()) {
+      controlWin.webContents.send("prompter:closed");
+    }
+  });
+}
+
+ipcMain.handle("settings:load", () => loadSettings() || {});
+ipcMain.handle("settings:save", (_e, s) => {
+  saveSettings(s);
+  return true;
+});
+
+ipcMain.handle("prompter:open", (_e, settings) => {
+  createPrompterWindow(settings);
+  return true;
+});
+
+ipcMain.handle("prompter:close", () => {
+  if (prompterWin && !prompterWin.isDestroyed()) prompterWin.close();
+  return true;
+});
+
+ipcMain.handle("prompter:isOpen", () => {
+  return !!(prompterWin && !prompterWin.isDestroyed());
+});
+
+ipcMain.handle("prompter:setClickThrough", (_e, enabled) => {
+  if (!prompterWin || prompterWin.isDestroyed()) return false;
+  // forward: true keeps mousemove + click on interactive children (HUD buttons)
+  prompterWin.setIgnoreMouseEvents(!!enabled, { forward: true });
+  return true;
+});
+
+ipcMain.handle("prompter:setIgnoreMouse", (_e, enabled) => {
+  if (!prompterWin || prompterWin.isDestroyed()) return false;
+  prompterWin.setIgnoreMouseEvents(!!enabled, { forward: true });
+  return true;
+});
+
+ipcMain.handle("prompter:setBounds", (_e, bounds) => {
+  if (!prompterWin || prompterWin.isDestroyed()) return false;
+  const { x, y, width, height } = bounds || {};
+  if ([x, y, width, height].every((v) => typeof v === "number")) {
+    prompterWin.setBounds({ x, y, width, height });
+    return true;
+  }
+  return false;
+});
+
+ipcMain.handle("prompter:setAlwaysOnTop", (_e, enabled) => {
+  if (!prompterWin || prompterWin.isDestroyed()) return false;
+  prompterWin.setAlwaysOnTop(!!enabled, "screen-saver");
+  return true;
+});
+
+ipcMain.handle("prompter:sendSettings", (_e, settings) => {
+  if (!prompterWin || prompterWin.isDestroyed()) return false;
+  prompterWin.webContents.send("prompter:settings", settings);
+  return true;
+});
+
+ipcMain.handle("prompter:sendCommand", (_e, cmd) => {
+  if (!prompterWin || prompterWin.isDestroyed()) return false;
+  prompterWin.webContents.send("prompter:command", cmd);
+  if (cmd && cmd.type === "position") {
+    const display = screen.getPrimaryDisplay();
+    const work = display.workArea;
+    const b = prompterWin.getBounds();
+    const w = b.width;
+    const h = b.height;
+    let x, y;
+    switch (cmd.value) {
+      case "top-left":
+        x = work.x + 20;
+        y = work.y + 20;
+        break;
+      case "top-right":
+        x = work.x + work.width - w - 20;
+        y = work.y + 20;
+        break;
+      case "bottom-center":
+        x = Math.round(work.x + (work.width - w) / 2);
+        y = work.y + work.height - h - 20;
+        break;
+      case "top-center":
+      default:
+        x = Math.round(work.x + (work.width - w) / 2);
+        y = work.y + 20;
+        break;
+    }
+    prompterWin.setBounds({ x, y, width: w, height: h });
+  }
+  return true;
+});
+
+ipcMain.on("prompter:state", (_e, state) => {
+  if (controlWin && !controlWin.isDestroyed()) {
+    controlWin.webContents.send("prompter:state", state);
+  }
+});
+
+ipcMain.handle("app:openExternal", (_e, url) => {
+  if (typeof url === "string" && /^https?:\/\//.test(url)) {
+    shell.openExternal(url);
+    return true;
+  }
+  return false;
+});
+
+ipcMain.handle("app:quit", () => {
+  app.quit();
+  return true;
+});
+
+app.whenReady().then(() => {
+  createControlWindow();
+
+  app.on("activate", () => {
+    if (BrowserWindow.getAllWindows().length === 0) createControlWindow();
+  });
+});
+
+app.on("window-all-closed", () => {
+  app.quit();
+});

package/src/main/preload.js

@@ -0,0 +1,35 @@
+const { contextBridge, ipcRenderer } = require("electron");
+
+contextBridge.exposeInMainWorld("pmptr", {
+  loadSettings: () => ipcRenderer.invoke("settings:load"),
+  saveSettings: (s) => ipcRenderer.invoke("settings:save", s),
+
+  openPrompter: (s) => ipcRenderer.invoke("prompter:open", s),
+  closePrompter: () => ipcRenderer.invoke("prompter:close"),
+  isPrompterOpen: () => ipcRenderer.invoke("prompter:isOpen"),
+
+  setClickThrough: (b) =>
+    ipcRenderer.invoke("prompter:setClickThrough", !!b),
+  setIgnoreMouse: (b) => ipcRenderer.invoke("prompter:setIgnoreMouse", !!b),
+  setAlwaysOnTop: (b) =>
+    ipcRenderer.invoke("prompter:setAlwaysOnTop", !!b),
+  setBounds: (b) => ipcRenderer.invoke("prompter:setBounds", b),
+
+  sendSettings: (s) => ipcRenderer.invoke("prompter:sendSettings", s),
+  sendCommand: (c) => ipcRenderer.invoke("prompter:sendCommand", c),
+
+  sendPrompterState: (s) => ipcRenderer.send("prompter:state", s),
+  onPrompterState: (cb) => {
+    const fn = (_e, s) => cb(s);
+    ipcRenderer.on("prompter:state", fn);
+    return () => ipcRenderer.removeListener("prompter:state", fn);
+  },
+  onPrompterClosed: (cb) => {
+    const fn = () => cb();
+    ipcRenderer.on("prompter:closed", fn);
+    return () => ipcRenderer.removeListener("prompter:closed", fn);
+  },
+
+  openExternal: (u) => ipcRenderer.invoke("app:openExternal", u),
+  quit: () => ipcRenderer.invoke("app:quit"),
+});

package/src/prompter/prompter-preload.js

@@ -0,0 +1,17 @@
+const { contextBridge, ipcRenderer } = require("electron");
+
+contextBridge.exposeInMainWorld("pmptrPrompter", {
+  onSettings: (cb) => {
+    const fn = (_e, s) => cb(s);
+    ipcRenderer.on("prompter:settings", fn);
+    return () => ipcRenderer.removeListener("prompter:settings", fn);
+  },
+  onCommand: (cb) => {
+    const fn = (_e, c) => cb(c);
+    ipcRenderer.on("prompter:command", fn);
+    return () => ipcRenderer.removeListener("prompter:command", fn);
+  },
+  sendState: (s) => ipcRenderer.send("prompter:state", s),
+  setClickThrough: (b) =>
+    ipcRenderer.invoke("prompter:setClickThrough", !!b),
+});

package/src/prompter/prompter.css

@@ -0,0 +1,233 @@
+:root {
+  color-scheme: dark light;
+  --text: #ffffff;
+  --hl: #ffd84d;
+  --bg-rgb: 0, 0, 0;
+  --bg-alpha: 0.35;
+  --dim: 0;
+  --font: 44px;
+  --lh: 1.45;
+  --ls: 0px;
+  --margin: 0px;
+  --stroke: 0px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.frame {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  border-radius: 10px;
+  overflow: hidden;
+  background: rgba(var(--bg-rgb), var(--bg-alpha));
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 14px 40px rgba(0, 0, 0, 0.35);
+  transition: background 120ms ease;
+}
+
+.frame.dim {
+  background: rgba(0, 0, 0, calc(var(--bg-alpha) + var(--dim) / 100));
+}
+
+.read-area {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+}
+
+.pad {
+  height: 50vh;
+}
+
+.text {
+  margin: 0;
+  padding: 0 calc(24px + var(--margin));
+  color: var(--text);
+  font-size: var(--font);
+  line-height: var(--lh);
+  letter-spacing: var(--ls);
+  text-transform: var(--tt, none);
+  font-weight: var(--weight, 500);
+  white-space: pre-wrap;
+  word-break: break-word;
+  text-align: center;
+  transform: var(--mirror, none);
+  text-shadow: 0 0 var(--stroke) rgba(0, 0, 0, 0.85);
+  -webkit-text-stroke: var(--stroke) rgba(0, 0, 0, 0.6);
+}
+
+.text b,
+.text strong {
+  color: var(--hl);
+  font-weight: 700;
+}
+
+.reading-line {
+  position: absolute;
+  left: 8%;
+  right: 8%;
+  top: 50%;
+  height: 0;
+  border-top: 2px solid rgba(255, 216, 77, 0.55);
+  pointer-events: none;
+  display: var(--show-line, block);
+}
+.reading-line::before,
+.reading-line::after {
+  content: "";
+  position: absolute;
+  top: -3px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 216, 77, 0.85);
+}
+.reading-line::before {
+  left: -3px;
+}
+.reading-line::after {
+  right: -3px;
+}
+
+.fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 22%;
+  pointer-events: none;
+  z-index: 2;
+}
+.fade.top {
+  top: 0;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.55),
+    rgba(0, 0, 0, 0)
+  );
+}
+.fade.bottom {
+  bottom: 0;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.55),
+    rgba(0, 0, 0, 0)
+  );
+}
+
+.hud {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: flex;
+  gap: 4px;
+  background: rgba(15, 17, 21, 0.6);
+  padding: 4px;
+  border-radius: 8px;
+  backdrop-filter: blur(6px);
+  -webkit-app-region: no-drag;
+  z-index: 5;
+  opacity: 0.18;
+  transition: opacity 160ms ease;
+}
+.hud:hover,
+.hud:focus-within {
+  opacity: 1;
+}
+.hud[data-locked="true"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hud-btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: #fff;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  cursor: pointer;
+  font: 14px/1 system-ui;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.hud-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+.hud-btn[aria-pressed="true"] {
+  background: rgba(255, 216, 77, 0.2);
+  color: var(--hl);
+}
+
+.grab {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 60px;
+  height: 22px;
+  -webkit-app-region: drag;
+  cursor: grab;
+  z-index: 3;
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.04),
+    rgba(255, 255, 255, 0)
+  );
+}
+.grab:active {
+  cursor: grabbing;
+}
+
+.resize {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 18px;
+  height: 18px;
+  cursor: nwse-resize;
+  z-index: 4;
+  background: linear-gradient(
+    135deg,
+    transparent 50%,
+    rgba(255, 255, 255, 0.25) 50%,
+    rgba(255, 255, 255, 0.25) 60%,
+    transparent 60%,
+    transparent 70%,
+    rgba(255, 255, 255, 0.15) 70%,
+    rgba(255, 255, 255, 0.15) 80%,
+    transparent 80%
+  );
+}
+
+/* When the whole window is in click-through mode (locked), the HUD is
+   hidden via the [data-locked] rule above, but the resize handle and
+   grab bar should also be non-blocking so users can still see through. */
+.frame[data-locked="true"] .grab,
+.frame[data-locked="true"] .resize {
+  pointer-events: none;
+}

package/src/prompter/prompter.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="color-scheme" content="dark light" />
+    <title>pmptr prompter</title>
+    <link rel="stylesheet" href="prompter.css" />
+  </head>
+  <body>
+    <div class="frame" id="frame">
+      <div class="read-area" id="readArea">
+        <div class="track" id="track">
+          <div class="pad" id="padTop"></div>
+          <pre class="text" id="text"></pre>
+          <div class="pad" id="padBottom"></div>
+        </div>
+        <div class="reading-line" id="readingLine" aria-hidden="true"></div>
+        <div class="fade top" aria-hidden="true"></div>
+        <div class="fade bottom" aria-hidden="true"></div>
+      </div>
+
+      <div class="hud" id="hud" data-locked="false">
+        <button id="btnPlay" class="hud-btn" title="Play / Pause (Space)">
+          <span class="icon" id="iconPlay">❚❚</span>
+        </button>
+        <button id="btnReset" class="hud-btn" title="Reset (R)">↺</button>
+        <button
+          id="btnLock"
+          class="hud-btn"
+          title="Lock - click-through (L)"
+          aria-pressed="false"
+        >
+          <span id="iconLock">🔓</span>
+        </button>
+        <button id="btnClose" class="hud-btn" title="Close (Esc)">✕</button>
+      </div>
+
+      <div class="grab" title="Drag to move" aria-hidden="true"></div>
+      <div class="resize" aria-hidden="true"></div>
+    </div>
+
+    <script src="prompter.js"></script>
+  </body>
+</html>