From 6f5b7b2e5dd2cfd9332841dc7450a823a1980621 Mon Sep 17 00:00:00 2001 From: Ali Tleis Date: Tue, 10 Nov 2026 17:42:32 -0500 Subject: [PATCH 1/2] Door: no lock of its own for a device that reaches Media Pool, so Media Pool's sign-in is the only entrance --- src/app/mediapool/Door.tsx | 67 +++++++++++++++++++++----------------- 1 file changed, 38 insertions(+), 29 deletions(-) diff --git a/src/app/mediapool/Door.tsx b/src/app/mediapool/Door.tsx index 2dbebce..ed51a45 100644 --- a/src/app/mediapool/Door.tsx +++ b/src/app/mediapool/Door.tsx @@ -1,7 +1,6 @@ "use client"; import { useEffect, useState } from "react"; -import { LuScanFace } from "react-icons/lu"; /** Media Pool, Ali's fleet app, which answers only on his own tailnet. */ const MEDIA_POOL = "https://light-vm.tailde9e5d.ts.net:8088/"; @@ -23,11 +22,11 @@ async function reachable(signal: AbortSignal) { * The way into Media Pool from this site: the viewer an editor shows for * footage it cannot find, with the file's title bar across the top. * - * Media Pool runs on Ali's own network and answers nothing outside it, so this - * page holds none of it. It asks whether this browser can reach Media Pool - * and, if it can, goes there, to a passkey page that looks the same as this - * one. Anyone else stays on the lock. A browser that reaches it is one of - * Ali's, so its visits stop counting on the site too. + * Media Pool's own sign-in is the only entrance, with the passkey, setup and + * "New device?" pairing. This page only finds out whether this browser can + * reach Media Pool and, if it can, goes there without a lock of its own. Anyone + * else stays on the lock. A browser that reaches it is one of Ali's, so its + * visits stop counting on the site too. */ export default function Door() { const [phase, setPhase] = useState<"checking" | "opening" | "locked">("checking"); @@ -50,6 +49,8 @@ export default function Door() { return () => check.abort(); }, [attempt]); + const locked = phase === "locked"; + return (
@@ -61,31 +62,39 @@ export default function Door() {

Media offline

-

Locked

- - - {phase === "locked" && attempt > 0 && ( -

- Couldn't reach Media Pool from this page.{" "} - {/* A browser can block this page's check of a private address, but not a visit. */} - - Open it directly - + {locked ? ( + <> +

Locked

+

+ This device can't reach Media Pool. +

+
+ + {/* A browser can block this page's check of a private address, but not a visit. */} + + Open it directly + +
+ + ) : ( +

+ Opening Media Pool…

)} +
From 21350e9f7389f6b747d5b0353c3c7cd544917a8d Mon Sep 17 00:00:00 2001 From: Ali Tleis Date: Wed, 11 Nov 2026 03:01:42 -0500 Subject: [PATCH 2/2] Door: neutral label while it checks, focus back on Try again, drop the unused button styles --- src/app/globals.css | 47 +------------------------------------- src/app/mediapool/Door.tsx | 13 ++++++++--- 2 files changed, 11 insertions(+), 49 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index b796440..d74af00 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -96,12 +96,6 @@ --font-mono: var(--font-geist-mono); } -/* The Media Pool door's red, for its one error. A light shade, for the - contrast text needs on dark grey. */ -@theme { - --color-cp-red-text: #ff8a80; -} - /* Base document styles. Smooth scrolling only for visitors who have not asked for less motion. An unconditional copy of this rule used to sit beside it, which made the media query do nothing. */ @@ -1235,7 +1229,7 @@ section { /* ── Media Pool door ─────────────────────────────────────────── /mediapool takes the suite's palette through .st-root and adds only - the record light and the button the suite has no equivalent for. + the record light the suite has no equivalent for. ─────────────────────────────────────────────────────────────── */ /* Grey: nothing is recording. */ @@ -1246,42 +1240,3 @@ section { border-radius: 50%; background: var(--st-faint); } - -.cp-btn { - display: inline-flex; - height: 28px; - flex-shrink: 0; - align-items: center; - justify-content: center; - gap: 6px; - border: 1px solid var(--st-line-strong); - border-radius: 3px; - background: var(--st-panel-hi); - padding: 0 10px; - font-size: 12px; - color: var(--st-dim); - white-space: nowrap; - transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease; -} - -.cp-btn:hover:not(:disabled) { - border-color: rgba(255, 255, 255, 0.3); - color: var(--st-text); -} - -.cp-btn:disabled { - opacity: 0.45; -} - -.cp-btn-primary { - border-color: transparent; - background: var(--st-accent); - color: #2a1a02; - font-weight: 500; -} - -.cp-btn-primary:hover:not(:disabled) { - border-color: transparent; - color: #2a1a02; - filter: brightness(1.12); -} diff --git a/src/app/mediapool/Door.tsx b/src/app/mediapool/Door.tsx index ed51a45..4f67217 100644 --- a/src/app/mediapool/Door.tsx +++ b/src/app/mediapool/Door.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; /** Media Pool, Ali's fleet app, which answers only on his own tailnet. */ const MEDIA_POOL = "https://light-vm.tailde9e5d.ts.net:8088/"; @@ -31,6 +31,7 @@ async function reachable(signal: AbortSignal) { export default function Door() { const [phase, setPhase] = useState<"checking" | "opening" | "locked">("checking"); const [attempt, setAttempt] = useState(0); + const retry = useRef(null); useEffect(() => { // Leaving the page, or trying again, drops this check, so a late answer can't redirect. @@ -51,6 +52,11 @@ export default function Door() { const locked = phase === "locked"; + // A retry that fails again puts focus back on Try again, which went away while it checked. + useEffect(() => { + if (locked && attempt > 0) retry.current?.focus(); + }, [locked, attempt]); + return (
@@ -61,15 +67,16 @@ export default function Door() {
-

Media offline

+

{locked ? "Media offline" : "Media Pool"}

{locked ? ( <>

Locked

- This device can't reach Media Pool. + This page couldn't reach Media Pool.