@telepath-computer/television-desktop 0.1.112 → 0.1.152

package/README.md

@@ -14,8 +14,9 @@ npm i -g @telepath-computer/television-desktop
 tv-desktop
 ```
 
-A connect window opens; point it at a running Television server (URL +
-token, or a `--public` server with an empty token).
+A connect window opens; point it at a running Television server. Enter the
+server URL plus token when the server runs with `--auth`; leave the token blank
+for no-auth servers.
 
 ## macOS notes
 

package/dist/connect-page.cjs

@@ -0,0 +1,87 @@
+"use strict";
+(() => {
+  // src/connect-error.ts
+  function connectErrorMessage(error) {
+    if (!(error instanceof Error)) return "Failed to connect";
+    const message = error.message;
+    const ipcMatch = message.match(/^Error invoking remote method '[^']+': (?:(?:Error: )+)?([\s\S]+)$/);
+    return ipcMatch?.[1]?.trim() || message;
+  }
+
+  // src/connect-page.ts
+  var MIN_CONNECT_MS = 500;
+  function bindConnectPage(api, elements) {
+    let busy = false;
+    function setBusy(next) {
+      busy = next;
+      if (next && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+      elements.submitButton.disabled = next;
+      elements.submitButton.dataset.connecting = next ? "true" : "false";
+      elements.submitLabel.textContent = next ? "Connecting\u2026" : "Connect";
+      elements.serverInput.disabled = next;
+      elements.tokenInput.disabled = next;
+    }
+    async function waitForMinConnect(started) {
+      const remaining = MIN_CONNECT_MS - (Date.now() - started);
+      if (remaining > 0) {
+        await new Promise((resolve) => setTimeout(resolve, remaining));
+      }
+    }
+    async function runConnect(serverURL, token) {
+      if (busy) return;
+      elements.errorEl.textContent = "";
+      if (!serverURL.trim()) return;
+      setBusy(true);
+      const started = Date.now();
+      try {
+        const result = await api.connect(serverURL, token);
+        if (!result.ok) {
+          await waitForMinConnect(started);
+          elements.errorEl.textContent = result.message;
+          setBusy(false);
+        }
+      } catch (err) {
+        await waitForMinConnect(started);
+        elements.errorEl.textContent = connectErrorMessage(err);
+        setBusy(false);
+      }
+    }
+    const onSubmit = (event) => {
+      event.preventDefault();
+      void runConnect(elements.serverInput.value, elements.tokenInput.value);
+    };
+    elements.form.addEventListener("submit", onSubmit);
+    void (async () => {
+      const intent = await api.getConnectScreenIntent();
+      const saved = await api.getConnection();
+      if (saved) {
+        elements.serverInput.value = saved.serverURL;
+        elements.tokenInput.value = saved.token;
+      }
+      if (intent === "bootstrap" && saved) {
+        await runConnect(saved.serverURL, saved.token);
+      }
+    })();
+    return () => elements.form.removeEventListener("submit", onSubmit);
+  }
+  function initConnectPage(api) {
+    const form = document.getElementById("connect-form");
+    const errorEl = document.getElementById("error");
+    const submitButton = document.getElementById("submit");
+    const serverInput = document.getElementById("serverURL");
+    const tokenInput = document.getElementById("token");
+    const submitLabel = submitButton?.querySelector(".button-label");
+    if (!(form instanceof HTMLFormElement)) throw new Error("connect form missing");
+    if (!(errorEl instanceof HTMLElement)) throw new Error("connect error element missing");
+    if (!(submitButton instanceof HTMLButtonElement)) throw new Error("connect submit button missing");
+    if (!(serverInput instanceof HTMLInputElement)) throw new Error("connect server input missing");
+    if (!(tokenInput instanceof HTMLInputElement)) throw new Error("connect token input missing");
+    if (!(submitLabel instanceof HTMLElement)) throw new Error("connect submit label missing");
+    bindConnectPage(api, { form, errorEl, submitButton, submitLabel, serverInput, tokenInput });
+  }
+  if (typeof window !== "undefined" && window.television) {
+    initConnectPage(window.television);
+  }
+})();

package/dist/connect-preload.cjs

@@ -2,8 +2,15 @@
 
 // src/connect-preload.ts
 var import_electron = require("electron");
+
+// src/connect-screen.ts
+var GET_CONNECT_SCREEN_INTENT_CHANNEL = "television:get-connect-screen-intent";
+
+// src/connect-preload.ts
 if (window.location.protocol === "file:") {
   import_electron.contextBridge.exposeInMainWorld("television", {
-    setConnection: (serverURL, token) => import_electron.ipcRenderer.invoke("television:set-connection", { serverURL, token })
+    getConnectScreenIntent: () => import_electron.ipcRenderer.invoke(GET_CONNECT_SCREEN_INTENT_CHANNEL),
+    getConnection: () => import_electron.ipcRenderer.invoke("television:get-connection"),
+    connect: (serverURL, token) => import_electron.ipcRenderer.invoke("television:connect", { serverURL, token })
   });
 }

package/dist/connect.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'; script-src 'unsafe-inline'" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'; script-src 'self' 'unsafe-inline'" />
     <title>Television</title>
     <style>
       :root {
@@ -61,25 +61,66 @@
       input:focus {
         border-color: #fff;
       }
+      input:disabled {
+        opacity: 0.6;
+        border-color: #2a2a2a;
+      }
       button {
         margin-top: 6px;
         background: #fff;
         color: #000;
         border: none;
-        padding: 10px 12px;
+        padding: 0 16px;
         font-size: 14px;
         font-weight: 500;
         font-family: inherit;
         border-radius: 6px;
         cursor: default;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 40px;
+        box-sizing: border-box;
       }
-      button:disabled {
+      button:disabled:not([data-connecting="true"]) {
         opacity: 0.5;
       }
+      button[data-connecting="true"] {
+        opacity: 0.85;
+      }
+      .button-label {
+        line-height: 1;
+      }
+      .button-spinner {
+        position: absolute;
+        left: 16px;
+        top: 0;
+        bottom: 0;
+        width: 14px;
+        height: 14px;
+        margin-block: auto;
+        box-sizing: border-box;
+        border: 2px solid rgba(0, 0, 0, 0.2);
+        border-top-color: #000;
+        border-radius: 50%;
+        visibility: hidden;
+        animation: connect-spin 0.7s linear infinite;
+      }
+      button[data-connecting="true"] .button-spinner {
+        visibility: visible;
+      }
+      @keyframes connect-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
       .error {
         color: #ff6b6b;
         font-size: 12px;
-        min-height: 1em;
+        line-height: 18px;
+        height: 36px;
+        overflow: hidden;
       }
     </style>
   </head>
@@ -89,40 +130,19 @@
       <form id="connect-form">
         <label>
           Server URL
-          <input id="serverURL" type="url" placeholder="https://example.com" required autofocus />
+          <input id="serverURL" type="text" placeholder="https://example.com" required autofocus />
         </label>
         <label>
-          Token <span style="text-transform: none; letter-spacing: 0; color: #555;">(leave blank for --public servers)</span>
+          Token <span style="text-transform: none; letter-spacing: 0; color: #555;">(leave blank for no-auth servers)</span>
           <input id="token" type="password" />
         </label>
         <div class="error" id="error"></div>
-        <button type="submit">Connect</button>
+        <button type="submit" id="submit">
+          <span class="button-spinner" aria-hidden="true"></span>
+          <span class="button-label">Connect</span>
+        </button>
       </form>
     </main>
-    <script>
-      const form = document.getElementById("connect-form");
-      const errorEl = document.getElementById("error");
-      const submitButton = form.querySelector("button");
-      form.addEventListener("submit", async (event) => {
-        event.preventDefault();
-        errorEl.textContent = "";
-        const serverURL = document.getElementById("serverURL").value.trim();
-        const token = document.getElementById("token").value.trim();
-        if (!serverURL) return;
-        try {
-          new URL(serverURL);
-        } catch {
-          errorEl.textContent = "Invalid URL";
-          return;
-        }
-        submitButton.disabled = true;
-        try {
-          await window.television.setConnection(serverURL, token);
-        } catch (err) {
-          errorEl.textContent = err instanceof Error ? err.message : "Failed to connect";
-          submitButton.disabled = false;
-        }
-      });
-    </script>
+    <script src="connect-page.cjs"></script>
   </body>
 </html>

package/dist/electron.cjs

@@ -36,6 +36,93 @@ module.exports = __toCommonJS(index_exports);
 var import_electron2 = require("electron");
 var import_node_path2 = __toESM(require("node:path"), 1);
 
+// src/connect-url.ts
+var ConnectURLError = class extends Error {
+  constructor(message = "Enter a valid http or https URL") {
+    super(message);
+    this.name = "ConnectURLError";
+  }
+};
+function normalizeConnectURL(input) {
+  const trimmed = input.trim();
+  if (!trimmed) throw new ConnectURLError();
+  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(trimmed) && !/^https?:\/\//i.test(trimmed)) {
+    throw new ConnectURLError();
+  }
+  const withScheme = /^https?:\/\//i.test(trimmed) ? trimmed : `http://${trimmed}`;
+  let url;
+  try {
+    url = new URL(withScheme);
+  } catch {
+    throw new ConnectURLError();
+  }
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    throw new ConnectURLError();
+  }
+  return url.toString().replace(/\/$/, "");
+}
+function buildRemoteURL(serverURL, token) {
+  const url = new URL(serverURL);
+  url.searchParams.set("mode", "electron");
+  if (token) url.searchParams.set("token", token);
+  return url.toString();
+}
+
+// src/connect-preflight.ts
+var HTTP_UNAUTHORIZED = 401;
+var DEFAULT_PREFLIGHT_TIMEOUT_MS = 8e3;
+var NOT_TV_SERVER_MESSAGE = "This URL doesn't seem to be a Television server \u2014 please check it.";
+function unreachable(serverURL) {
+  return {
+    ok: false,
+    code: "unreachable",
+    message: `Couldn't reach ${serverURL} \u2014 is the server running?`
+  };
+}
+function notTVServer() {
+  return { ok: false, code: "not-tv-server", message: NOT_TV_SERVER_MESSAGE };
+}
+function isDisplayResponse(body) {
+  if (typeof body !== "object" || body === null) return false;
+  const candidate = body;
+  return (typeof candidate.activeScreenID === "string" || candidate.activeScreenID === null) && (typeof candidate.activeThemeName === "string" || candidate.activeThemeName === null) && typeof candidate.acpEnabled === "boolean";
+}
+async function preflightConnection(options) {
+  const fetchImpl = options.fetchImpl ?? fetch;
+  const probeURL = new URL(options.probePath ?? "/display", options.serverURL).toString();
+  const headers = {};
+  if (options.token) headers.Authorization = `Bearer ${options.token}`;
+  let response;
+  try {
+    response = await fetchImpl(probeURL, {
+      method: "GET",
+      headers,
+      signal: AbortSignal.timeout(options.timeoutMs ?? DEFAULT_PREFLIGHT_TIMEOUT_MS)
+    });
+  } catch {
+    return unreachable(options.serverURL);
+  }
+  if (response.status === HTTP_UNAUTHORIZED) {
+    if (!options.token) {
+      return { ok: false, code: "auth-required", message: "This server requires a token" };
+    }
+    return { ok: false, code: "auth-rejected", message: "Token rejected" };
+  }
+  if (!response.ok) {
+    return notTVServer();
+  }
+  let body;
+  try {
+    body = await response.json();
+  } catch {
+    return notTVServer();
+  }
+  if (!isDisplayResponse(body)) {
+    return notTVServer();
+  }
+  return { ok: true };
+}
+
 // src/connection-store.ts
 var import_electron = require("electron");
 var import_node_fs = require("node:fs");
@@ -55,39 +142,57 @@ function loadConnection() {
   }
 }
 function saveConnection(connection) {
-  (0, import_node_fs.writeFileSync)(storePath(), JSON.stringify(connection, null, 2), "utf8");
+  const file = storePath();
+  const tmp = `${file}.tmp`;
+  (0, import_node_fs.writeFileSync)(tmp, JSON.stringify(connection, null, 2), "utf8");
+  (0, import_node_fs.renameSync)(tmp, file);
 }
 
+// src/connect-screen.ts
+var GET_CONNECT_SCREEN_INTENT_CHANNEL = "television:get-connect-screen-intent";
+
 // src/index.ts
 import_electron2.app.setName("Television");
 var WINDOW_WIDTH = 1400;
 var WINDOW_HEIGHT = 1e3;
 var TRAFFIC_LIGHT_POSITION = { x: 12, y: 12 };
-var SET_CONNECTION_CHANNEL = "television:set-connection";
+var GET_CONNECTION_CHANNEL = "television:get-connection";
+var CONNECT_CHANNEL = "television:connect";
+var TEST_EXTERNAL_OPEN_CHANNEL = "television:test:external-open";
 var TEST_FIXTURE_FLAG = "--test-fixture";
-function buildRemoteURL({ serverURL, token }) {
-  const url = new URL(serverURL);
-  url.searchParams.set("mode", "electron");
-  if (token) url.searchParams.set("token", token);
-  return url.toString();
+var ERR_ABORTED = -3;
+if (process.env.TV_ELECTRON_CHROMIUM_LOGS !== "1") {
+  import_electron2.app.commandLine?.appendSwitch("log-level", "3");
 }
 function readTestFixtureURL(argv) {
   const idx = argv.indexOf(TEST_FIXTURE_FLAG);
   if (idx === -1 || idx === argv.length - 1) return null;
   return argv[idx + 1] ?? null;
 }
+function isExternalOpenURL(url) {
+  return url.startsWith("http://") || url.startsWith("https://");
+}
+function recordExternalOpenForTest(url) {
+  const globalState = globalThis;
+  const log = globalState.__televisionExternalOpenLog ??= [];
+  log.push(url);
+  for (const window of import_electron2.BrowserWindow.getAllWindows()) {
+    window.webContents.send(TEST_EXTERNAL_OPEN_CHANNEL, url);
+  }
+}
 var App = class {
   window = null;
+  connectScreenIntent = "manual";
   async start() {
     await import_electron2.app.whenReady();
     if (process.platform === "darwin" && import_electron2.app.dock) {
       import_electron2.app.dock.setIcon(import_node_path2.default.join(__dirname, "..", "assets", "icon.png"));
     }
     this.installMenu();
-    import_electron2.ipcMain.handle(SET_CONNECTION_CHANNEL, async (_event, connection) => {
-      saveConnection(connection);
-      await this.loadRemote(connection);
-    });
+    this.installWindowOpenHandler();
+    import_electron2.ipcMain.handle(GET_CONNECTION_CHANNEL, async () => loadConnection());
+    import_electron2.ipcMain.handle(GET_CONNECT_SCREEN_INTENT_CHANNEL, async () => this.connectScreenIntent);
+    import_electron2.ipcMain.handle(CONNECT_CHANNEL, async (_event, connection) => this.tryConnect(connection));
     await this.createWindow();
     import_electron2.app.on("window-all-closed", () => {
       if (process.platform !== "darwin") import_electron2.app.quit();
@@ -114,6 +219,13 @@ var App = class {
     });
     this.window.webContents.on("will-attach-webview", (_event, webPreferences) => {
       webPreferences.preload = import_node_path2.default.join(__dirname, "webview-bridge-preload.cjs");
+      webPreferences.contextIsolation = false;
+    });
+    this.window.webContents.on("did-fail-load", (_event, code, _description, validatedURL, isMainFrame) => {
+      if (!isMainFrame) return;
+      if (code === ERR_ABORTED) return;
+      if (validatedURL.startsWith("file:")) return;
+      void this.loadConnectScreen("manual");
     });
     this.window.once("ready-to-show", () => this.window?.show());
     this.window.on("closed", () => {
@@ -124,27 +236,69 @@ var App = class {
       await this.window.loadURL(testFixtureURL);
       return;
     }
-    const connection = loadConnection();
-    if (connection) {
-      await this.loadRemote(connection);
-    } else {
-      await this.loadConnectScreen();
-    }
+    await this.loadConnectScreen("bootstrap");
   }
-  async loadConnectScreen() {
+  /** @param intent bootstrap = app open / retry saved connection; manual = user chose connect screen */
+  async loadConnectScreen(intent = "manual") {
     if (!this.window) return;
+    this.connectScreenIntent = intent;
     await this.window.loadFile(import_node_path2.default.join(__dirname, "connect.html"));
   }
+  async tryConnect(raw) {
+    const submitted = { serverURL: raw.serverURL, token: raw.token ?? "" };
+    try {
+      saveConnection(submitted);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to connect";
+      return { ok: false, message };
+    }
+    let serverURL;
+    try {
+      serverURL = normalizeConnectURL(raw.serverURL);
+    } catch (error) {
+      const message = error instanceof ConnectURLError ? error.message : new ConnectURLError().message;
+      return { ok: false, message };
+    }
+    const connection = { serverURL, token: submitted.token };
+    try {
+      const preflight = await preflightConnection({
+        serverURL: connection.serverURL,
+        token: connection.token
+      });
+      if (!preflight.ok) {
+        return { ok: false, message: preflight.message };
+      }
+      await this.loadRemote(connection);
+      return { ok: true };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to connect";
+      return { ok: false, message };
+    }
+  }
   async loadRemote(connection) {
     if (!this.window) return;
-    await this.window.loadURL(buildRemoteURL(connection));
+    await this.window.loadURL(buildRemoteURL(connection.serverURL, connection.token));
+  }
+  installWindowOpenHandler() {
+    import_electron2.app.on("web-contents-created", (_event, contents) => {
+      contents.setWindowOpenHandler(({ url }) => {
+        if (isExternalOpenURL(url)) {
+          if (process.env.TV_TEST_MODE === "true") {
+            recordExternalOpenForTest(url);
+          } else {
+            void import_electron2.shell.openExternal(url);
+          }
+        }
+        return { action: "deny" };
+      });
+    });
   }
   installMenu() {
     const isMac = process.platform === "darwin";
     const connectItem = {
       label: "Connect to server\u2026",
       accelerator: "CmdOrCtrl+,",
-      click: () => void this.loadConnectScreen()
+      click: () => void this.loadConnectScreen("manual")
     };
     const template = [
       ...isMac ? [

package/dist/webview-bridge-preload.cjs

@@ -3,55 +3,76 @@
 // src/webview-bridge-preload.ts
 var import_electron = require("electron");
 var BRIDGE_CHANNEL = "television-artifact-bridge";
-var lastWheelClientX = 0;
-var lastWheelClientY = 0;
+var contentBridge = {
+  postToHost(message) {
+    import_electron.ipcRenderer.sendToHost(BRIDGE_CHANNEL, message);
+  },
+  onHostMessage(callback) {
+    const listener = (_event, message) => {
+      callback(message);
+    };
+    import_electron.ipcRenderer.on(BRIDGE_CHANNEL, listener);
+    return () => {
+      import_electron.ipcRenderer.removeListener(BRIDGE_CHANNEL, listener);
+    };
+  }
+};
+if (process.contextIsolated) {
+  import_electron.contextBridge.exposeInMainWorld("__televisionContentBridge", contentBridge);
+} else {
+  window.__televisionContentBridge = contentBridge;
+}
+function isTextEditingTarget(target) {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  const editable = target.closest(
+    "input, textarea, select, [contenteditable], [role='textbox'], [role='searchbox'], [role='combobox'], [role='spinbutton'], [role='slider']"
+  );
+  if (!editable) {
+    return false;
+  }
+  if (editable.hasAttribute("contenteditable")) {
+    return editable.getAttribute("contenteditable")?.toLowerCase() !== "false";
+  }
+  return true;
+}
+window.addEventListener(
+  "keydown",
+  (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+      return;
+    }
+    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
+      return;
+    }
+    if (isTextEditingTarget(event.target)) {
+      return;
+    }
+    event.preventDefault();
+    import_electron.ipcRenderer.sendToHost(BRIDGE_CHANNEL, {
+      type: "filmstrip-key",
+      direction: event.key === "ArrowRight" ? 1 : -1
+    });
+  },
+  { capture: true }
+);
 window.addEventListener(
   "wheel",
   (event) => {
-    lastWheelClientX = event.clientX;
-    lastWheelClientY = event.clientY;
+    const usingShiftFallback = event.shiftKey && event.deltaX === 0 && event.deltaY !== 0;
+    const horizontalDelta = usingShiftFallback ? event.deltaY : event.deltaX;
+    const horizontalMagnitude = Math.abs(horizontalDelta);
+    const verticalMagnitude = usingShiftFallback ? 0 : Math.abs(event.deltaY);
+    if (horizontalMagnitude <= verticalMagnitude) {
+      return;
+    }
     const payload = {
       type: "wheel",
-      deltaX: event.deltaX,
-      deltaY: event.deltaY,
+      deltaX: horizontalDelta,
       shiftKey: event.shiftKey
     };
     import_electron.ipcRenderer.sendToHost(BRIDGE_CHANNEL, payload);
-    event.preventDefault();
   },
   { passive: false }
 );
-import_electron.ipcRenderer.on(BRIDGE_CHANNEL, (_event, payload) => {
-  if (payload?.type !== "scroll") return;
-  const deltaX = payload.deltaX ?? 0;
-  const deltaY = payload.deltaY ?? 0;
-  const target = resolveScrollTarget(lastWheelClientX, lastWheelClientY, deltaX, deltaY);
-  target.scrollBy(deltaX, deltaY);
-});
-function resolveScrollTarget(x, y, deltaX, deltaY) {
-  const fallback = document.scrollingElement ?? document.documentElement;
-  if (typeof document.elementFromPoint !== "function") return fallback;
-  let node = document.elementFromPoint(x, y);
-  while (node && node !== document.documentElement) {
-    if (canScroll(node, deltaX, deltaY)) return node;
-    node = node.parentElement;
-  }
-  return fallback;
-}
-function canScroll(node, deltaX, deltaY) {
-  const style = getComputedStyle(node);
-  if (deltaY !== 0) {
-    if (isScrollableOverflow(style.overflowY) && node.scrollHeight > node.clientHeight) {
-      return true;
-    }
-  }
-  if (deltaX !== 0) {
-    if (isScrollableOverflow(style.overflowX) && node.scrollWidth > node.clientWidth) {
-      return true;
-    }
-  }
-  return false;
-}
-function isScrollableOverflow(value) {
-  return value === "auto" || value === "scroll" || value === "overlay";
-}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@telepath-computer/television-desktop",
   "productName": "Television",
-  "version": "0.1.112",
+  "version": "0.1.152",
   "type": "module",
   "main": "dist/electron.cjs",
   "bin": {