Save QR image stranded the window on a picture of itself

Build 124. Reported from the booth: the button did not download anything and
there was no way back off the QR.

Both halves are the same fault. The window is served from the asset port and
the code comes off the congregation port, so the link the button built was
CROSS-ORIGIN — and a cross-origin <a download> has its download attribute
ignored and NAVIGATES instead. So the file never saved, and the window went to
the image. The app has no back button, no reload item and no address bar, so
that is a one-way trip: a headless booth Mac showing a full-screen QR with the
operator locked out of the desk. It fetches the code and downloads a blob now,
which is same-origin and actually saves.

The second change is the one that matters more. Nothing was stopping the app
window being replaced by any navigation at all, and the only reason this had
never bitten before is that nothing had tried. will-navigate now refuses to
replace the app page, logs what it refused, and sends anything external to the
browser. Our own pages are unaffected — the operator console and the poster
open as their own windows through setWindowOpenHandler, which is a different
path entirely.

Found because the build number went to the wrong field: buildNumber is the
source of truth and build.buildVersion is synced from it by predist, which
caught it and rebuilt correctly.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

app/engine.js

@@ -3508,14 +3508,50 @@ function shareChoice() {
   };
 }
 
-function shareBase() {
+/* This Mac on the church network. The operator page lives here and NOWHERE
+   else: it returns 404 to anything arriving through a proxy, by design. */
+function lanBase() {
   const c = shareChoice();
   if (!c || c.none) return '';
   return 'http://' + c.addr.address + ':' + state.local.port;
 }
 
+/*
+ * WHAT THE CONGREGATION OPENS.
+ *
+ * A church that has put this on a domain has said so in the operator page's
+ * Public address, and from that moment the LAN address is the wrong thing to
+ * print: it is not what is on the poster, not what the QR should encode, and
+ * not what someone off the building's wifi can reach. The app window went on
+ * showing the IP anyway, because this half of it never read that setting --
+ * the operator page honoured it and the main window did not, so the two
+ * disagreed about the one fact they both exist to display.
+ */
+function publicBaseConfigured() {
+  const u = opConfig && typeof opConfig.publicUrl === 'string' ? opConfig.publicUrl.trim() : '';
+  return u ? u.replace(/\/+$/, '') : '';
+}
+
+function shareBase() {
+  return publicBaseConfigured() || lanBase();
+}
+
 function renderQrWarning() {
   const el = $('qrWarn');
+  /*
+   * On a domain the warnings below are about an address nobody is being
+   * given any more. Saying "Wi-Fi is down, phones cannot reach the code"
+   * while the code points at a proxy would send the desk after the wrong
+   * thing entirely.
+   */
+  const pub = publicBaseConfigured();
+  if (pub) {
+    el.hidden = false;
+    el.textContent = 'The code points at ' + pub + ', set as the public address. ' +
+      'This Mac still has to be reachable from there; its own address is ' +
+      (lanBase() || 'unavailable') + '.';
+    return;
+  }
   const c = shareChoice();
   if (!c) { el.hidden = true; return; }
 
@@ -3566,6 +3602,26 @@ function renderShare() {
   const list = state.local.addresses || [];
   const box = $('addrList');
   box.textContent = '';
+  /*
+   * WHICH INTERFACE THE QR USES IS A QUESTION ONLY A LAN SETUP HAS.
+   *
+   * These rows let the operator pick the address the code points at. Once a
+   * public address is configured the code points at the domain whatever they
+   * pick, so the list is a row of numbers that do nothing — and the one
+   * marked IN USE is not the address anyone is being given. Hide it.
+   */
+  const addrBox = $('addrList');
+  addrBox.hidden = !!publicBaseConfigured();
+  if (addrBox.hidden) {
+    /* Still draw the code itself — it is the only thing left in this panel. */
+    const only = shareBase();
+    $('qr').src = only
+      ? 'http://127.0.0.1:' + state.local.port + '/qr.svg?url=' + encodeURIComponent(only + '/')
+      : '';
+    renderQrWarning();
+    renderOperatorUrl();
+    return;
+  }
 
   /* Mark the row the QR is actually using, not the row that was saved — when
      a lease moves those are two different things and the saved one is gone. */
@@ -3607,8 +3663,40 @@ $('copyAddr').addEventListener('click', () => {
     .catch((err) => log('could not copy: ' + err.message, 'err'));
 });
 
-$('openPoster').addEventListener('click', () => {
-  window.open('http://127.0.0.1:' + state.local.port + '/poster', '_blank');
+/*
+ * The QR itself, saved as a file, because the poster people actually print
+ * is made in their own design tool. The built-in poster page is still there
+ * at /poster for anyone who wants it; it is just not what this button does.
+ */
+$('saveQr').addEventListener('click', async () => {
+  const base = shareBase();
+  if (!base) { log('no address to encode yet', 'err'); return; }
+  /*
+   * Fetch the code and hand the browser a BLOB rather than linking straight at
+   * the server. This window is served from the asset port and the QR comes off
+   * the congregation port, so a plain <a download> is CROSS-ORIGIN — the
+   * download attribute is ignored and the window navigates to the image
+   * instead. With no back button, no reload item and no address bar, that
+   * strands the operator on a full-screen QR with no way out; build 123 did
+   * exactly that to a booth Mac. A blob: URL is same-origin, so it downloads.
+   */
+  const url = 'http://127.0.0.1:' + state.local.port + '/qr.svg?url=' +
+              encodeURIComponent(base + '/');
+  try {
+    const r = await fetch(url, { cache: 'no-store' });
+    if (!r.ok) throw new Error('the server answered ' + r.status);
+    const href = URL.createObjectURL(await r.blob());
+    const a = document.createElement('a');
+    a.href = href;
+    a.download = 'church-translate-qr.svg';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(href), 10000);
+    log('saved the QR for ' + base + '/ to Downloads', 'ok');
+  } catch (err) {
+    log('could not save the QR: ' + err.message, 'err');
+  }
 });
 $('openOperator').addEventListener('click', () => {
   window.open('http://127.0.0.1:' + state.local.port + '/operator', '_blank');
@@ -3665,7 +3753,8 @@ function renderBuildTag() {
 }
 
 function renderOperatorUrl() {
-  const base = shareBase();
+  /* Deliberately lanBase, not shareBase: over a proxy /operator is a 404. */
+  const base = lanBase();
   $('opPageUrl').textContent = base ? base + '/operator' : 'no network';
 }
 
@@ -3968,6 +4057,7 @@ async function loadOperator() {
   try {
     const j = await opApi('/api/config');
     opConfig = j.config;
+    renderShare();   /* publicUrl may have just arrived */
     clearTimeout(opLoadTimer); opLoadTimer = null;   // it answered; stop retrying
     opRetryMs = 0;
     renderOpLanguages();
@@ -4022,6 +4112,7 @@ async function opSave(patch, okMsg) {
   try {
     const j = await opApi('/api/config', { method: 'POST', body: JSON.stringify(patch) });
     opConfig = j.config;
+    renderShare();   /* publicUrl may have just arrived */
     if (okMsg) log(okMsg, 'ok');
     return j;
   } catch (e) { log('could not save: ' + e.message, 'err'); throw e; }

app/index.html

@@ -433,7 +433,7 @@
       <div id="addrList" class="addrlist"></div>
       <div class="railbtns">
         <button class="btn btn-primary" id="copyAddr">Copy address</button>
-        <button class="btn" id="openPoster">Printable poster</button>
+        <button class="btn" id="saveQr">Save QR image</button>
       </div>
 
       <h3 class="subhead">Operator page</h3>

app/main.js

@@ -662,6 +662,27 @@ function createWindow() {
              : '/index.html';
   win.loadURL(assetOrigin + page);
 
+  /*
+   * NOTHING replaces the app in this window. There is no back button, no
+   * reload item and no address bar, so a window that leaves the app page is a
+   * window the operator cannot get back from — which is precisely how build
+   * 123 stranded a booth Mac on a full-screen QR image. Our own pages still
+   * open as their OWN windows through setWindowOpenHandler below; this only
+   * refuses to replace the app itself, and sends anything external to the
+   * browser where it belongs.
+   */
+  win.webContents.on('will-navigate', (e, url) => {
+    if (url === assetOrigin + page) return;     /* reloading ourselves is fine */
+    e.preventDefault();
+    console.error('[main] refused to navigate the app window to ' + url);
+    let local = false;
+    try {
+      const u = new URL(url);
+      local = (u.hostname === '127.0.0.1' || u.hostname === 'localhost');
+    } catch (_) { local = false; }
+    if (!local) shell.openExternal(url).catch(() => {});
+  });
+
   win.webContents.on('did-finish-load', () => console.log('[main] page loaded'));
   win.webContents.on('did-fail-load', (_e, code, desc, url) =>
     console.error('[main] page FAILED to load: ' + code + ' ' + desc + ' ' + url));

app/package.json

@@ -2,7 +2,7 @@
   "name": "church-translate-engine",
   "productName": "Church Translate",
   "version": "3.23.2",
-  "buildNumber": 121,
+  "buildNumber": 124,
   "private": true,
   "description": "Live sermon translation — self-contained: captures audio, transcribes, translates, and serves the congregation page itself",
   "main": "main.js",
@@ -106,7 +106,7 @@
       ]
     },
     "asar": false,
-    "buildVersion": "121",
+    "buildVersion": "124",
     "win": {
       "target": [
         {