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 2dbebce..4f67217 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"; +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/"; @@ -23,15 +22,16 @@ 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"); 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. @@ -50,6 +50,13 @@ export default function Door() { return () => check.abort(); }, [attempt]); + 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 (
@@ -60,32 +67,41 @@ 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 ? "Media offline" : "Media Pool"}

+ {locked ? ( + <> +

Locked

+

+ This page couldn'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…

)} +