nixamp 0.53.4 → 0.54.0

package/dist/server.js

@@ -63,7 +63,7 @@ import { handleHandoffs } from "./handoff-routes.js";
 import { handleAiRoutes, isPublicSharePath } from "./ai-routes.js";
 import { AiLabel } from "./ai-label.js";
 import { buyLink, handleLabelRoutes, isPublicLabelPath } from "./label-routes.js";
-import { GrantVerifier, MusicStore } from "./music-store.js";
+import { GrantVerifier, MusicStore, PRICES } from "./music-store.js";
 import { handleStoreRoutes, isStorePath } from "./store-routes.js";
 import { AiRadio } from "./ai-radio.js";
 import { ListenerShares } from "./listener-shares.js";
@@ -76,6 +76,8 @@ import { STATION_APP_CSP, STATION_PAGE, STATION_PAGE_CSP, STATION_PAGE_HTML, WAT
 import { handleRooms, RoomProbe, roomEntries, RoomStore, watchBase } from "./guide-rooms.js";
 import { handleVods, VodProbe, vodEntries, VodStore, vodView } from "./guide-vods.js";
 import { withPitFooter } from "./pit-footer.js";
+import { handleFollowPage } from "./follow-page.js";
+import { asRadioPage, buildCatalogue, isRadioPath, NAV_STYLE, RADIO_ALBUM, RADIO_ARTIST, RADIO_CSP, RADIO_STATION, RADIO_SUB, radioNav, radioPeers, radioRewriter, radioStations, renderAlbum, renderArtist, renderDirectory, renderMissing, rewriteResponse, } from "./radio-pages.js";
 import { guideAds, guideCsp, guideHosts, guidePeers, peerBase, PeerGuides, renderGuide } from "./station-guide.js";
 import { StationRunner } from "./station-runner.js";
 import { StationError, StationStore, channelOf, stationOfChannel } from "./stations.js";
@@ -1496,7 +1498,102 @@ export function createHandler(engine, options) {
     // The music store lives on nixamp.com; a server holding the label's music asks it about grants.
     const storeSite = (process.env["NIXAMP_SITE"] || "https://nixamp.com").replace(/\/+$/, "");
     const storeGrants = new GrantVerifier({ site: storeSite });
+    // /radio's artists and albums, from the public stations' files and the label (radio-pages.ts), a minute at a time.
+    let radioCache = null;
+    const radioCatalogue = () => {
+        if (radioCache && Date.now() - radioCache.at < 60_000)
+            return radioCache.value;
+        const label = options.stations?.label;
+        const index = options.library?.index;
+        const value = buildCatalogue({
+            stations: radioStations(options.stations?.store.list() ?? []),
+            ...(label ? { label: label.publicView(), songAt: (file) => label.songAt(file), audioFor: (file) => label.audioFor(file) } : {}),
+            tags: (file) => {
+                const item = index?.itemAt(file);
+                if (!item)
+                    return null;
+                const tags = { ...item, ...item.override };
+                return { title: tags.title, artist: tags.artist || tags.albumArtist, album: tags.album, year: tags.year, track: tags.track, duration: item.duration, hasArt: item.hasArt };
+            },
+        });
+        radioCache = { at: Date.now(), value };
+        return value;
+    };
     return async function handle(request, response) {
+        // A station's own paths under its /radio name (radio-pages.ts): asked of
+        // the station's routes with its token, which never leaves this server,
+        // and answered with the /radio addresses in place of the station's.
+        if (options.stations && (request.url ?? "").startsWith("/radio/")) {
+            const asked = new URL(request.url ?? "/", "http://localhost");
+            const sub = RADIO_SUB.exec(asked.pathname);
+            if (sub) {
+                const own = radioStations(options.stations.store.list());
+                const station = own.get(sub[1]);
+                const peer = station || !options.stations.peers ? undefined : radioPeers(own.keys(), await options.stations.peers.entries()).get(sub[1]);
+                if (!station && !peer) {
+                    json(response, 404, { error: "no station by that name", code: "not_found" });
+                    return;
+                }
+                if (sub[2] === "listen.m3u") {
+                    const name = (station ?? peer).name;
+                    const base = radioBaseFor(request, options.stations.publicBase?.() ?? "");
+                    response.writeHead(200, { ...CORS, "content-type": "audio/x-mpegurl; charset=utf-8", "content-disposition": `inline; filename="${sub[1]}.m3u"`, "cache-control": "no-store" });
+                    response.end(request.method === "HEAD" ? undefined : `#EXTM3U\n#EXTINF:-1,${name.replace(/[\r\n]/g, " ")}\n${base}/radio/${sub[1]}/stream\n`);
+                    return;
+                }
+                if (peer) {
+                    // A peer's station: asked of the peer with its token, passed on as it comes.
+                    if (request.method !== "GET" && request.method !== "HEAD") {
+                        json(response, 405, { error: "a station's link can listen, not drive", code: "method_not_allowed" });
+                        return;
+                    }
+                    const query = new URLSearchParams(asked.search);
+                    query.delete("t");
+                    query.set("t", peer.token);
+                    const stop = new AbortController();
+                    response.on("close", () => stop.abort());
+                    const answer = await fetch(`${peer.origin}/api/v1/stations/${peer.id}/${sub[2]}?${query.toString()}`, {
+                        method: request.method, signal: stop.signal,
+                        headers: { ...(request.headers.range ? { range: String(request.headers.range) } : {}), accept: String(request.headers.accept ?? "*/*") },
+                    }).catch(() => null);
+                    if (!answer) {
+                        json(response, 502, { error: "that station's server did not answer", code: "upstream" });
+                        return;
+                    }
+                    rewriteResponse(response, radioRewriter({ id: peer.id, listenToken: peer.token }, sub[1]));
+                    const headers = { ...CORS };
+                    for (const name of ["content-type", "cache-control", "content-length", "content-range", "accept-ranges", "x-accel-buffering", "retry-after"]) {
+                        const value = answer.headers.get(name);
+                        if (value)
+                            headers[name] = value;
+                    }
+                    response.writeHead(answer.status, headers);
+                    if (!answer.body || request.method === "HEAD") {
+                        response.end();
+                        return;
+                    }
+                    try {
+                        for await (const chunk of answer.body) {
+                            if (response.destroyed)
+                                break;
+                            if (!response.write(chunk))
+                                await new Promise((done) => { response.once("drain", done); response.once("close", done); });
+                        }
+                    }
+                    catch {
+                        // The listener left, or the peer did.
+                    }
+                    response.end();
+                    return;
+                }
+                const query = new URLSearchParams(asked.search);
+                query.delete("t");
+                query.set("t", station.listenToken);
+                request.url = `/api/v1/stations/${station.id}/${sub[2]}?${query.toString()}`;
+                rewriteResponse(response, radioRewriter(station, sub[1]));
+                return handle(request, response);
+            }
+        }
         const url = new URL(request.url ?? "/", "http://localhost");
         const path = url.pathname;
         const webSite = options.webSites?.get((request.headers.host ?? "").toLowerCase());
@@ -1884,6 +1981,16 @@ export function createHandler(engine, options) {
             json(response, reply.status, reply.body);
             return;
         }
+        // Following an artist from a /radio page, where the nixamp.com session is first-party (follow-page.ts).
+        if (path === "/follow" && options.follows && options.accounts) {
+            const accounts = options.accounts;
+            if (await handleFollowPage(request, response, path, url, {
+                account: () => accounts.whoIs(tokenFrom(request.headers)),
+                follows: options.follows,
+                readBody: (body) => readBody(body, 8 * 1024),
+            }))
+                return;
+        }
         if (path.startsWith("/api/v1/follows") && options.follows && options.accounts) {
             const me = await options.accounts.whoIs(tokenFrom(request.headers));
             if (me === null) {
@@ -2214,6 +2321,10 @@ export function createHandler(engine, options) {
             // On demand: a file's page and the guide's list of them (guide-vods.ts); the file's own key travels in its play address.
             !((path === "/vod" || /^\/vod\/[A-Za-z0-9_-]{1,32}$/.test(path) || path === "/api/v1/guide/vods" || path.startsWith("/api/v1/guide/vods/")) && Boolean(options.stations?.vods)) &&
             !STATION_PAGE.test(path) &&
+            // Public, listed stations under readable names, and their artists and albums (radio-pages.ts).
+            !(isRadioPath(path) && Boolean(options.stations)) &&
+            // Following an artist from those pages, signed in at nixamp.com.
+            !(path === "/follow" && Boolean(options.follows && options.accounts)) &&
             !isPublicAsset &&
             !isGuidePage &&
             !eventChannelRequest) {
@@ -2366,7 +2477,15 @@ export function createHandler(engine, options) {
                 json(response, 404, { error: "no public station with that id", code: "not_found" });
                 return;
             }
-            response.writeHead(302, { location: found.page, "cache-control": "no-store", "referrer-policy": "no-referrer" });
+            // Its /radio name, ours or a peer's (radio-pages.ts): no server address or token in the link it lands on.
+            let location = "radio" in found && typeof found.radio === "string" && /^https?:\/\//.test(found.radio) ? found.radio : "";
+            if (!location && options.stations.peers) {
+                const named = radioPeers(radioStations(options.stations.store.list()).keys(), await options.stations.peers.entries());
+                const slug = [...named].find(([, one]) => one.id === stationShortLink[1])?.[0];
+                if (slug)
+                    location = `${watchBase(options.stations.publicBase?.() || `https://${request.headers.host ?? "localhost"}`)}/radio/${slug}`;
+            }
+            response.writeHead(302, { location: location || found.page, "cache-control": "no-store", "referrer-policy": "no-referrer" });
             response.end();
             return;
         }
@@ -2393,7 +2512,24 @@ export function createHandler(engine, options) {
                 : [];
             const ads = guideAds();
             const label = options.stations.label;
-            const page = renderGuide([...rooms, ...entries, ...others], options.stations.publicBase?.() ?? "", ads, label && label.publicView().genres.length > 0 ? "/label" : "");
+            // A peer's station by its /radio name here too, asked of the peer by this server (radio-pages.ts).
+            const radioBase = watchBase(options.stations.publicBase?.() || `https://${request.headers.host ?? "localhost"}`);
+            const peerNames = radioPeers(radioStations(options.stations.store.list()).keys(), others);
+            const peerRadio = new Map([...peerNames].map(([slug, one]) => [`${one.origin}/station/${one.id}`, `${radioBase}/radio/${slug}`]));
+            const named = others.map((one) => {
+                const at = (() => { try {
+                    const u = new URL(one.page);
+                    return `${u.origin}${u.pathname.replace(/\/+$/, "")}`;
+                }
+                catch {
+                    return "";
+                } })();
+                const radio = peerRadio.get(at);
+                return radio ? { ...one, radio } : one;
+            });
+            // Behind a guide name (live.streaming) the page asks its own origin, so no server address shows in it.
+            const apiBase = guideHosts().has(requestHost) ? "" : options.stations.publicBase?.() ?? "";
+            const page = renderGuide([...rooms, ...entries, ...named], apiBase, ads, label && label.publicView().genres.length > 0 ? "/label" : "");
             response.writeHead(200, {
                 "content-type": "text/html; charset=utf-8",
                 "cache-control": "no-cache",
@@ -2452,6 +2588,101 @@ export function createHandler(engine, options) {
             response.end(request.method === "HEAD" ? undefined : built.replace(/<title>[^<]*<\/title>/, head));
             return;
         }
+        // /radio: public, listed stations under readable names, and the artists and
+        // albums they play (radio-pages.ts). A station's own paths under its name
+        // were answered at the top of this handler.
+        if (options.stations && isRadioPath(path) && (request.method === "GET" || request.method === "HEAD")) {
+            const stations = options.stations;
+            const named = radioStations(stations.store.list());
+            const publicBase = stations.publicBase?.() ?? "";
+            const base = radioBaseFor(request, publicBase);
+            const nav = radioNav(guideHosts().has(requestHost) ? "/" : "/guide");
+            const send = (status, page, csp = RADIO_CSP) => {
+                response.writeHead(status, {
+                    "content-type": "text/html; charset=utf-8",
+                    "cache-control": status === 200 ? "public, max-age=60" : "no-cache",
+                    "content-security-policy": csp,
+                    "referrer-policy": "strict-origin-when-cross-origin",
+                    "x-content-type-options": "nosniff",
+                });
+                response.end(request.method === "HEAD" ? undefined : page);
+            };
+            const shop = stations.label && /^https:\/\//.test(publicBase)
+                ? { site: storeSite, buy: (kind, artist, album = "", n = 0) => buyLink(storeSite, publicBase, kind, artist, album, n), prices: PRICES }
+                : null;
+            const peers = stations.peers ? radioPeers(named.keys(), await stations.peers.entries()) : new Map();
+            const stationNames = new Map([...named].map(([slug, one]) => [slug, one.name]));
+            if (path === "/radio" || path === "/radio/") {
+                const encrypted = request.socket.encrypted === true;
+                const entries = guideEntries({
+                    store: stations.store, runner: stations.runner, channels: options.channels, canControl: false, account: "",
+                    select: () => null, trackFor: (file) => trackFor(engine, file),
+                    base: `${encrypted ? "https" : "http"}://${request.headers.host ?? "localhost"}`,
+                    publicBase, json, readBody, headers: CORS,
+                });
+                send(200, renderDirectory([
+                    ...entries.map((one) => ({
+                        slug: one.radio.split("/radio/").pop() ?? "", name: one.name, description: one.description, state: one.state, kind: one.kind, group: one.group,
+                        nowPlaying: one.nowPlaying,
+                    })),
+                    ...[...peers].map(([slug, one]) => ({ slug, name: one.name, description: "", state: one.state, kind: one.kind, group: one.group, nowPlaying: one.nowPlaying })),
+                ], base, nav));
+                return;
+            }
+            const artistPath = RADIO_ARTIST.exec(path);
+            if (artistPath) {
+                const catalogue = radioCatalogue();
+                const artist = catalogue.artists.get(artistPath[1]);
+                if (!artist)
+                    return send(404, renderMissing("artist", base, nav));
+                return send(200, renderArtist(catalogue, artist, { base, nav, shop, site: storeSite, stationNames }));
+            }
+            const albumPath = RADIO_ALBUM.exec(path);
+            if (albumPath) {
+                const catalogue = radioCatalogue();
+                const album = catalogue.albums.get(albumPath[1]);
+                if (albumPath[2]) {
+                    const picture = album?.coverFile && stations.cover ? await stations.cover(album.coverFile).catch(() => null) : null;
+                    if (!picture) {
+                        json(response, 404, { error: "no cover for that album", code: "not_found" });
+                        return;
+                    }
+                    response.writeHead(200, { "content-type": picture.type, "content-length": picture.bytes.length, "cache-control": "public, max-age=86400", "x-content-type-options": "nosniff" });
+                    response.end(request.method === "HEAD" ? undefined : picture.bytes);
+                    return;
+                }
+                if (!album)
+                    return send(404, renderMissing("album", base, nav));
+                return send(200, renderAlbum(catalogue, album, { base, nav, shop, site: storeSite, stationNames }));
+            }
+            const stationPath = RADIO_STATION.exec(path);
+            if (stationPath) {
+                const slug = stationPath[1];
+                const station = named.get(slug) ?? (peers.has(slug) ? { name: peers.get(slug).name, description: "", video: peers.get(slug).kind === "video" } : undefined);
+                if (!station) {
+                    // A station's id finds its name: /radio/5ccqcjn5hg goes to /radio/ai-metal.
+                    const byId = [...named].find(([, one]) => one.id === slug);
+                    if (byId) {
+                        response.writeHead(301, { location: `/radio/${byId[0]}`, "cache-control": "public, max-age=300" });
+                        response.end();
+                        return;
+                    }
+                    return send(404, renderMissing("station", base, nav));
+                }
+                const built = web !== null && isFile(join(web, "station.html")) ? readFileSync(join(web, "station.html"), "utf8") : null;
+                const page = asRadioPage(built ?? STATION_PAGE_HTML, station, slug, base, nav);
+                response.writeHead(200, {
+                    "content-type": "text/html; charset=utf-8",
+                    "cache-control": "no-cache",
+                    // The inline page names its styles by hash; the header's is one more.
+                    "content-security-policy": built ? STATION_APP_CSP : STATION_PAGE_CSP.replace("style-src ", `style-src 'sha256-${sha("sha256").update(NAV_STYLE).digest("base64")}' `),
+                    "referrer-policy": "strict-origin-when-cross-origin",
+                    "x-content-type-options": "nosniff",
+                });
+                response.end(request.method === "HEAD" ? undefined : page);
+                return;
+            }
+        }
         if (options.stations?.vods && (path === "/api/v1/guide/vods" || path.startsWith("/api/v1/guide/vods/"))) {
             const control = await controlOf();
             const session = tokenFrom(request.headers) || url.searchParams.get("session") || "";
@@ -6159,6 +6390,14 @@ export function createHandler(engine, options) {
     };
 }
 /** Read a file, or null. The firewall probe asks about files it may not have. */
+/**
+ * The public address /radio links are written for: the guide's (watchBase,
+ * https://live.streaming.pit.world on server1), else this server's own.
+ */
+function radioBaseFor(request, publicBase) {
+    const host = String(request.headers["x-forwarded-host"] ?? request.headers.host ?? "localhost").split(",")[0].trim();
+    return watchBase(publicBase || `https://${host}`);
+}
 function readIfPossible(path) {
     try {
         return readFileSync(path, "utf8");

package/dist/station-guide.d.ts

@@ -19,6 +19,8 @@ export interface GuideEntry {
         title: string;
         artist: string;
     } | null;
+    /** Its shareable page, /radio/<name> on the guide's address (radio-pages.ts); own stations only. */
+    radio?: string;
     /** Listed by another server (a guide peer); its own page, its own reports. */
     peer?: boolean;
 }

package/dist/station-guide.js

@@ -30,6 +30,7 @@ button.report:hover{color:var(--warn)}
 #share button[type=submit]{margin-top:14px;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer}
 #share .or{color:var(--muted);font-size:.85rem;margin:8px 0 0}
 #status{margin-top:10px;font-size:.9rem;min-height:1.4em}
+nav.top{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}nav.top a{border:1px solid var(--line);border-radius:999px;padding:4px 12px;text-decoration:none;color:var(--fg);background:var(--card);font-weight:600;font-size:.9rem}nav.top a:hover{border-color:var(--accent)}
 footer{margin-top:40px;color:var(--muted);font-size:.85rem}footer a{color:inherit}
 .ad-unit{margin:0 auto 16px;display:flex;justify-content:center}.ad-unit iframe{border:0;display:block;background:transparent}
 .ad-banner_300x250 iframe{width:300px;height:250px;max-width:100%}.ad-text_link iframe{width:100%;height:40px}
@@ -73,7 +74,7 @@ const SCRIPT = `
       for (const s of list) {
         const card = el("div", "card");
         const a = el("a", "station");
-        a.href = s.page;
+        a.href = s.radio || s.page;
         a.append(el("div", "live", s.state === "live" ? "● LIVE" : s.state === "vod" ? "▶ ON DEMAND" : "off the air"), el("div", "name", s.name),
           el("div", "now", nowLine(s.nowPlaying)));
         card.append(a);
@@ -90,7 +91,7 @@ const SCRIPT = `
   };
   const load = async () => {
     try {
-      const r = await fetch(API + "/api/v1/stations/guide", { cache: "no-store" });
+      const r = await fetch(API + "/api/v1/stations/guide?radio=1", { cache: "no-store" });
       if (r.ok && (r.headers.get("content-type") || "").includes("json")) draw((await r.json()).stations);
     } catch {}
   };
@@ -154,7 +155,7 @@ export function renderGuide(entries, apiBase = "", ads = {}, labelHref = "") {
     const groupOf = (one) => one.group ?? (one.kind === "video" ? "tv" : "radio");
     const cards = (group) => entries
         .filter((one) => groupOf(one) === group && /^https?:\/\//.test(one.page))
-        .map((one) => `<div class="card"><a class="station" href="${escape(one.page)}"><div class="live">${one.state === "live" ? "● LIVE" : one.state === "vod" ? "▶ ON DEMAND" : "off the air"}</div><div class="name">${escape(one.name)}</div><div class="now">${escape(nowLine(one.nowPlaying))}</div></a></div>`)
+        .map((one) => `<div class="card"><a class="station" href="${escape(one.radio && /^https?:\/\//.test(one.radio) ? one.radio : one.page)}"><div class="live">${one.state === "live" ? "● LIVE" : one.state === "vod" ? "▶ ON DEMAND" : "off the air"}</div><div class="name">${escape(one.name)}</div><div class="now">${escape(nowLine(one.nowPlaying))}</div></a></div>`)
         .join("");
     let page = GUIDE_HTML;
     for (const group of GROUPS) {
@@ -191,6 +192,7 @@ export const GUIDE_HTML = `<!doctype html>
 </head>
 <body>
 <main>
+  <nav class="top" aria-label="live.streaming"><a href="/radio">Radio: every station by name</a><a href="/label">AI label</a><a href="/vod">On demand</a></nav>
   <h1>Live</h1>
   <p class="lead">Radio and TV, on the air now. Pick one and press play.</p>
   <h2 id="rooms-title" hidden>Live rooms</h2>

package/dist/station-page.d.ts

@@ -1,6 +1,6 @@
 /** A station page's path: /station/<id>. */
 export declare const STATION_PAGE: RegExp;
-export declare const STATION_PAGE_HTML = "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta name=\"robots\" content=\"noindex\">\n<link rel=\"icon\" href=\"data:,\">\n<title>Station \u00B7 nixamp</title>\n<style>\n:root{--bg:#f6f5f2;--fg:#17171a;--muted:#5d5d66;--card:#fff;--line:#dedcd6;--accent:#1f6feb;--live:#0b7a3b;--warn:#9a6700;--off:#8c2f39}\n@media (prefers-color-scheme:dark){:root{--bg:#121214;--fg:#ececf1;--muted:#a4a4b0;--card:#1c1c20;--line:#2c2c33;--accent:#6aa7ff;--live:#3fbf7f;--warn:#e3b341;--off:#f0838f}}\n*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,\"Segoe UI\",sans-serif}\nmain{max-width:560px;margin:0 auto;padding:48px 16px}\n.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}\nh1{font-size:1.6rem;line-height:1.2;margin:0 0 4px}\n.about{color:var(--muted);margin:0 0 20px}\n.chip{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line)}\n.chip::before{content:\"\";width:8px;height:8px;border-radius:50%;background:currentColor}\n.live{color:var(--live)}.reconnecting{color:var(--warn)}.unavailable,.stopped{color:var(--off)}\n.now{margin:20px 0;min-height:3em}.now .title{font-weight:600}.now .by{color:var(--muted)}\n.controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}\n.play{display:inline-block;font-weight:600;border-radius:999px;padding:12px 28px;background:var(--accent);color:#fff;text-decoration:none;cursor:pointer}\n.play[aria-disabled=true]{opacity:.5;pointer-events:none}\na:focus-visible{outline:3px solid var(--accent);outline-offset:3px}\n.small{margin-top:20px;font-size:.85rem;color:var(--muted)}.small a{color:inherit}\n.lyrics{margin:20px 0 0;border-top:1px solid var(--line);padding-top:12px}\n.lyrics summary{cursor:pointer;font-weight:600;min-height:24px}\n.lyrics .for{font-weight:400;color:var(--muted);font-size:.9rem}\n.words{margin-top:10px;line-height:1.6}\n.words p{margin:0 0 1em;white-space:pre-wrap;overflow-wrap:anywhere}\n.words p.sec{margin:1.2em 0 .3em;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}\n.words p.sec:first-child{margin-top:0}\n.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\n@media (prefers-reduced-motion:no-preference){.live::before{animation:pulse 2s ease-in-out infinite}}\n@keyframes pulse{50%{opacity:.35}}\n</style>\n</head>\n<body>\n<main>\n  <div class=\"card\">\n    <span id=\"state\" class=\"chip unavailable\" role=\"status\">Loading</span>\n    <h1 id=\"name\">&nbsp;</h1>\n    <p id=\"about\" class=\"about\" hidden></p>\n    <div class=\"now\" aria-live=\"polite\"><div id=\"title\" class=\"title\"></div><div id=\"by\" class=\"by\"></div></div>\n    <div class=\"controls\">\n      <a id=\"play\" class=\"play\" aria-disabled=\"true\">Play in your player (.m3u)</a>\n    </div>\n    <section id=\"lyrics\" class=\"lyrics\" aria-label=\"Lyrics\" hidden>\n      <details id=\"lyrics-box\" open><summary>Lyrics<span id=\"lyrics-for\" class=\"for\"></span></summary><div id=\"words\" class=\"words\"></div></details>\n    </section>\n    <p class=\"small\">This server was started without the web build, so the station plays in VLC, mpv or any player that opens an .m3u. Run <code>bun run web:build</code> to play it on this page.</p>\n  </div>\n  <p class=\"small\">Played by <a href=\"https://nixamp.com\">nixamp</a>.</p>\n  <div id=\"announce\" class=\"sr\" aria-live=\"assertive\"></div>\n</main>\n<script>\n(() => {\n  const id = location.pathname.split(\"/\").filter(Boolean)[1] || \"\";\n  const token = new URLSearchParams(location.search).get(\"t\") || \"\";\n  const q = \"?t=\" + encodeURIComponent(token);\n  const api = \"/api/v1/stations/\" + encodeURIComponent(id);\n  const $ = (s) => document.querySelector(s);\n  // No media element here: every player in the fleet is @profullstack/player,\n  // and this page has no bundle to carry it. Play hands the station to the\n  // listener's own player through its .m3u; the built page plays in place.\n  let live = false;\n  const chip = (state, text) => { const c = $(\"#state\"); c.className = \"chip \" + state; c.textContent = text; };\n  const say = (text) => { $(\"#announce\").textContent = text; };\n  const draw = (s) => {\n    document.title = s.name + \" \u00B7 nixamp\";\n    $(\"#name\").textContent = s.name;\n    $(\"#about\").textContent = s.description || \"\";\n    $(\"#about\").hidden = !s.description;\n    if (!live) title(s);\n    if (s.state === \"live\") chip(\"live\", \"Live\");\n    else if (s.state === \"starting\" || s.state === \"recovering\") chip(\"reconnecting\", \"Coming back\");\n    else if (s.state === \"stopped\") chip(\"stopped\", \"Off the air\");\n    else chip(\"unavailable\", \"Unavailable\");\n    const on = s.state === \"live\" || s.state === \"recovering\" || s.state === \"starting\";\n    $(\"#play\").href = api + \"/listen.m3u\" + q;\n    $(\"#play\").setAttribute(\"aria-disabled\", String(!on));\n  };\n  const title = (s) => {\n    const playing = s.nowPlaying;\n    $(\"#title\").textContent = playing ? (playing.title || \"Untitled\") : (s.state === \"live\" ? \"On the air\" : \"\");\n    $(\"#by\").textContent = playing ? [playing.artist, playing.album].filter(Boolean).join(\" \u00B7 \") : \"\";\n  };\n  // The words of what is on, line by line; \"[Verse 1]\" as a small header. Text only, never HTML.\n  let words = null;\n  const lyrics = async () => {\n    try {\n      const r = await fetch(api + \"/lyrics\" + q, { cache: \"no-store\" });\n      const got = r.ok ? (await r.json()).lyrics : null;\n      const key = got ? got.title + \"\\n\" + got.text : \"\";\n      if (key === words) return;\n      words = key;\n      $(\"#lyrics\").hidden = !got;\n      if (!got) return;\n      const out = [];\n      let stanza = [];\n      const flush = () => { if (stanza.length) { const p = document.createElement(\"p\"); p.textContent = stanza.join(\"\\n\"); out.push(p); stanza = []; } };\n      for (const line of got.text.split(\"\\n\")) {\n        if (/^\\s*\\[[^\\]]{1,160}\\]\\s*$/.test(line)) { flush(); const h = document.createElement(\"p\"); h.className = \"sec\"; h.textContent = line.trim().slice(1, -1); out.push(h); }\n        else if (line.trim() === \"\") flush();\n        else stanza.push(line);\n      }\n      flush();\n      $(\"#words\").replaceChildren(...out);\n      $(\"#lyrics-for\").textContent = got.title ? \" \u00B7 \" + got.title : \"\";\n    } catch {}\n  };\n  const listen = () => {\n    if (!window.EventSource) return;\n    const events = new EventSource(api + \"/events\" + q);\n    events.addEventListener(\"hello\", (e) => { live = true; title(JSON.parse(e.data)); lyrics(); });\n    events.addEventListener(\"now\", (e) => {\n      const s = JSON.parse(e.data);\n      title(s); lyrics(); say(s.nowPlaying ? \"Now playing \" + (s.nowPlaying.title || \"\") : \"\");\n    });\n    events.addEventListener(\"state\", () => poll());\n    events.onerror = () => { live = false; };\n  };\n  const poll = async () => {\n    try {\n      const r = await fetch(api + \"/state\" + q, { cache: \"no-store\" });\n      if (r.status === 404) { $(\"#name\").textContent = \"This station is not available\"; chip(\"unavailable\", \"Unavailable\"); $(\"#play\").removeAttribute(\"href\"); $(\"#play\").setAttribute(\"aria-disabled\", \"true\"); return; }\n      if (r.ok) draw(await r.json());\n    } catch {}\n  };\n  if (window.matchMedia && matchMedia(\"(max-width: 640px)\").matches) $(\"#lyrics-box\").open = false;\n  poll();\n  lyrics();\n  listen();\n  setInterval(poll, 5000);\n})();\n</script>\n</body>\n</html>\n";
+export declare const STATION_PAGE_HTML = "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta name=\"robots\" content=\"noindex\">\n<link rel=\"icon\" href=\"data:,\">\n<title>Station \u00B7 nixamp</title>\n<style>\n:root{--bg:#f6f5f2;--fg:#17171a;--muted:#5d5d66;--card:#fff;--line:#dedcd6;--accent:#1f6feb;--live:#0b7a3b;--warn:#9a6700;--off:#8c2f39}\n@media (prefers-color-scheme:dark){:root{--bg:#121214;--fg:#ececf1;--muted:#a4a4b0;--card:#1c1c20;--line:#2c2c33;--accent:#6aa7ff;--live:#3fbf7f;--warn:#e3b341;--off:#f0838f}}\n*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,\"Segoe UI\",sans-serif}\nmain{max-width:560px;margin:0 auto;padding:48px 16px}\n.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}\nh1{font-size:1.6rem;line-height:1.2;margin:0 0 4px}\n.about{color:var(--muted);margin:0 0 20px}\n.chip{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line)}\n.chip::before{content:\"\";width:8px;height:8px;border-radius:50%;background:currentColor}\n.live{color:var(--live)}.reconnecting{color:var(--warn)}.unavailable,.stopped{color:var(--off)}\n.now{margin:20px 0;min-height:3em}.now .title{font-weight:600}.now .by{color:var(--muted)}\n.controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}\n.play{display:inline-block;font-weight:600;border-radius:999px;padding:12px 28px;background:var(--accent);color:#fff;text-decoration:none;cursor:pointer}\n.play[aria-disabled=true]{opacity:.5;pointer-events:none}\na:focus-visible{outline:3px solid var(--accent);outline-offset:3px}\n.small{margin-top:20px;font-size:.85rem;color:var(--muted)}.small a{color:inherit}\n.lyrics{margin:20px 0 0;border-top:1px solid var(--line);padding-top:12px}\n.lyrics summary{cursor:pointer;font-weight:600;min-height:24px}\n.lyrics .for{font-weight:400;color:var(--muted);font-size:.9rem}\n.words{margin-top:10px;line-height:1.6}\n.words p{margin:0 0 1em;white-space:pre-wrap;overflow-wrap:anywhere}\n.words p.sec{margin:1.2em 0 .3em;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}\n.words p.sec:first-child{margin-top:0}\n.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\n@media (prefers-reduced-motion:no-preference){.live::before{animation:pulse 2s ease-in-out infinite}}\n@keyframes pulse{50%{opacity:.35}}\n</style>\n</head>\n<body>\n<main>\n  <div class=\"card\">\n    <span id=\"state\" class=\"chip unavailable\" role=\"status\">Loading</span>\n    <h1 id=\"name\">&nbsp;</h1>\n    <p id=\"about\" class=\"about\" hidden></p>\n    <div class=\"now\" aria-live=\"polite\"><div id=\"title\" class=\"title\"></div><div id=\"by\" class=\"by\"></div></div>\n    <div class=\"controls\">\n      <a id=\"play\" class=\"play\" aria-disabled=\"true\">Play in your player (.m3u)</a>\n    </div>\n    <section id=\"lyrics\" class=\"lyrics\" aria-label=\"Lyrics\" hidden>\n      <details id=\"lyrics-box\" open><summary>Lyrics<span id=\"lyrics-for\" class=\"for\"></span></summary><div id=\"words\" class=\"words\"></div></details>\n    </section>\n    <p class=\"small\">This server was started without the web build, so the station plays in VLC, mpv or any player that opens an .m3u. Run <code>bun run web:build</code> to play it on this page.</p>\n  </div>\n  <p class=\"small\">Played by <a href=\"https://nixamp.com\">nixamp</a>.</p>\n  <div id=\"announce\" class=\"sr\" aria-live=\"assertive\"></div>\n</main>\n<script>\n(() => {\n  // /radio/<name> is the same station through a public name: its own paths, no token in sight.\n  const radio = /^/radio/[a-z0-9-]+/?$/.test(location.pathname);\n  const id = location.pathname.split(\"/\").filter(Boolean)[1] || \"\";\n  const token = new URLSearchParams(location.search).get(\"t\") || \"\";\n  const q = radio ? \"\" : \"?t=\" + encodeURIComponent(token);\n  const api = radio ? location.pathname.replace(//+$/, \"\") : \"/api/v1/stations/\" + encodeURIComponent(id);\n  const $ = (s) => document.querySelector(s);\n  // No media element here: every player in the fleet is @profullstack/player,\n  // and this page has no bundle to carry it. Play hands the station to the\n  // listener's own player through its .m3u; the built page plays in place.\n  let live = false;\n  const chip = (state, text) => { const c = $(\"#state\"); c.className = \"chip \" + state; c.textContent = text; };\n  const say = (text) => { $(\"#announce\").textContent = text; };\n  const draw = (s) => {\n    document.title = s.name + \" \u00B7 nixamp\";\n    $(\"#name\").textContent = s.name;\n    $(\"#about\").textContent = s.description || \"\";\n    $(\"#about\").hidden = !s.description;\n    if (!live) title(s);\n    if (s.state === \"live\") chip(\"live\", \"Live\");\n    else if (s.state === \"starting\" || s.state === \"recovering\") chip(\"reconnecting\", \"Coming back\");\n    else if (s.state === \"stopped\") chip(\"stopped\", \"Off the air\");\n    else chip(\"unavailable\", \"Unavailable\");\n    const on = s.state === \"live\" || s.state === \"recovering\" || s.state === \"starting\";\n    $(\"#play\").href = api + \"/listen.m3u\" + q;\n    $(\"#play\").setAttribute(\"aria-disabled\", String(!on));\n  };\n  const title = (s) => {\n    const playing = s.nowPlaying;\n    $(\"#title\").textContent = playing ? (playing.title || \"Untitled\") : (s.state === \"live\" ? \"On the air\" : \"\");\n    $(\"#by\").textContent = playing ? [playing.artist, playing.album].filter(Boolean).join(\" \u00B7 \") : \"\";\n  };\n  // The words of what is on, line by line; \"[Verse 1]\" as a small header. Text only, never HTML.\n  let words = null;\n  const lyrics = async () => {\n    try {\n      const r = await fetch(api + \"/lyrics\" + q, { cache: \"no-store\" });\n      const got = r.ok ? (await r.json()).lyrics : null;\n      const key = got ? got.title + \"\\n\" + got.text : \"\";\n      if (key === words) return;\n      words = key;\n      $(\"#lyrics\").hidden = !got;\n      if (!got) return;\n      const out = [];\n      let stanza = [];\n      const flush = () => { if (stanza.length) { const p = document.createElement(\"p\"); p.textContent = stanza.join(\"\\n\"); out.push(p); stanza = []; } };\n      for (const line of got.text.split(\"\\n\")) {\n        if (/^\\s*\\[[^\\]]{1,160}\\]\\s*$/.test(line)) { flush(); const h = document.createElement(\"p\"); h.className = \"sec\"; h.textContent = line.trim().slice(1, -1); out.push(h); }\n        else if (line.trim() === \"\") flush();\n        else stanza.push(line);\n      }\n      flush();\n      $(\"#words\").replaceChildren(...out);\n      $(\"#lyrics-for\").textContent = got.title ? \" \u00B7 \" + got.title : \"\";\n    } catch {}\n  };\n  const listen = () => {\n    if (!window.EventSource) return;\n    const events = new EventSource(api + \"/events\" + q);\n    events.addEventListener(\"hello\", (e) => { live = true; title(JSON.parse(e.data)); lyrics(); });\n    events.addEventListener(\"now\", (e) => {\n      const s = JSON.parse(e.data);\n      title(s); lyrics(); say(s.nowPlaying ? \"Now playing \" + (s.nowPlaying.title || \"\") : \"\");\n    });\n    events.addEventListener(\"state\", () => poll());\n    events.onerror = () => { live = false; };\n  };\n  const poll = async () => {\n    try {\n      const r = await fetch(api + \"/state\" + q, { cache: \"no-store\" });\n      if (r.status === 404) { $(\"#name\").textContent = \"This station is not available\"; chip(\"unavailable\", \"Unavailable\"); $(\"#play\").removeAttribute(\"href\"); $(\"#play\").setAttribute(\"aria-disabled\", \"true\"); return; }\n      if (r.ok) draw(await r.json());\n    } catch {}\n  };\n  if (window.matchMedia && matchMedia(\"(max-width: 640px)\").matches) $(\"#lyrics-box\").open = false;\n  poll();\n  lyrics();\n  listen();\n  setInterval(poll, 5000);\n})();\n</script>\n</body>\n</html>\n";
 /** Only its own script and style, only its own server, never framed. */
 export declare const STATION_PAGE_CSP: string;
 /** The built page: its own bundle, styles and player engines, only this server, never framed. */

package/dist/station-page.js

@@ -40,10 +40,12 @@ a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
 `;
 const SCRIPT = `
 (() => {
+  // /radio/<name> is the same station through a public name: its own paths, no token in sight.
+  const radio = /^\/radio\/[a-z0-9-]+\/?$/.test(location.pathname);
   const id = location.pathname.split("/").filter(Boolean)[1] || "";
   const token = new URLSearchParams(location.search).get("t") || "";
-  const q = "?t=" + encodeURIComponent(token);
-  const api = "/api/v1/stations/" + encodeURIComponent(id);
+  const q = radio ? "" : "?t=" + encodeURIComponent(token);
+  const api = radio ? location.pathname.replace(/\/+$/, "") : "/api/v1/stations/" + encodeURIComponent(id);
   const $ = (s) => document.querySelector(s);
   // No media element here: every player in the fleet is @profullstack/player,
   // and this page has no bundle to carry it. Play hands the station to the

package/dist/station-routes.d.ts

@@ -107,6 +107,7 @@ export declare function guideEntries(ctx: StationContext): Array<PublicStation &
     page: string;
     m3u: string;
     group: GuideGroup;
+    radio: string;
 }>;
 export declare function ownerView(ctx: StationContext, station: Station): OwnerStation & {
     links: ReturnType<typeof links>;

package/dist/station-routes.js

@@ -2,6 +2,8 @@ import { alertsFor } from "./station-metering.js";
 import { aiFromTags } from "./track-facts.js";
 import { quietDuringBreaks } from "./break-silence.js";
 import { PASS_PARAM } from "./listen-pass.js";
+import { watchBase } from "./guide-rooms.js";
+import { radioPeers, radioStations } from "./radio-pages.js";
 import { StationError, channelOf, tokensMatch, } from "./stations.js";
 /** The three things a station's link opens. */
 const LISTEN = /^\/api\/v1\/stations\/([a-z0-9]{10})\/(stream|state|listen\.m3u|events|now|art|lyrics)$/;
@@ -74,9 +76,10 @@ export function guideGroup(station) {
 /** What the public guide shows: public, listed stations, linked at this server's public address. */
 export function guideEntries(ctx) {
     const base = ctx.publicBase || ctx.base;
-    return ctx.store.list()
-        .filter((one) => one.visibility === "public" && one.listed)
-        .map((one) => ({ ...publicView(ctx, one), page: links(ctx, one, base).page, m3u: links(ctx, one, base).m3u, group: guideGroup(one) }));
+    // Its shareable page too: /radio/<name> on the guide's public address (radio-pages.ts).
+    const radioBase = watchBase(base);
+    const names = radioStations(ctx.store.list());
+    return [...names].map(([slug, one]) => ({ ...publicView(ctx, one), page: links(ctx, one, base).page, m3u: links(ctx, one, base).m3u, group: guideGroup(one), radio: `${radioBase}/radio/${slug}` }));
 }
 export function ownerView(ctx, station) {
     const { failures, idempotencyKey: _key, ...rest } = station;
@@ -109,6 +112,28 @@ export async function handleStations(request, response, path, url, ctx) {
             .filter((one) => !shown.has(one.page));
         // Rooms are this guide's own; a peer asking for its stations does not list them twice.
         const rooms = url.searchParams.has("local") || !ctx.rooms ? [] : await ctx.rooms();
+        if (url.searchParams.has("radio")) {
+            // The public guide's own list: every station by its /radio name, no
+            // server address or token in it (radio-pages.ts). Peers ask without it.
+            const radioBase = watchBase(ctx.publicBase || ctx.base);
+            const peerNames = radioPeers(radioStations(ctx.store.list()).keys(), others);
+            const peerPage = new Map([...peerNames].map(([slug, one]) => [`${one.origin}/${one.id}`, `${radioBase}/radio/${slug}`]));
+            const pageOf = (page) => {
+                try {
+                    const at = new URL(page);
+                    return peerPage.get(`${at.origin}/${at.pathname.split("/")[2] ?? ""}`) ?? "";
+                }
+                catch {
+                    return "";
+                }
+            };
+            ctx.json(response, 200, { stations: [
+                    ...rooms,
+                    ...own.map(({ m3u: _m3u, page: _page, ...one }) => ({ ...one, page: one.radio })),
+                    ...others.map((one) => ({ ...one, page: pageOf(one.page) })).filter((one) => one.page),
+                ] });
+            return true;
+        }
         ctx.json(response, 200, { stations: [...rooms, ...own, ...others] });
         return true;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nixamp",
-  "version": "0.53.4",
+  "version": "0.54.0",
   "description": "It really whips the terminal's ass. A Winamp-shaped audio player for your terminal.",
   "license": "MIT",
   "type": "module",

package/src/follow-page.ts

@@ -0,0 +1,127 @@
+/**
+ * /follow on nixamp.com: follow an artist from a /radio page (radio-pages.ts).
+ *
+ * The /radio pages are on another site (live.streaming.pit.world), where a
+ * nixamp.com session cookie is a third-party cookie and no browser sends it.
+ * So Follow there is a link here, where the session is first-party: this page
+ * says who you are following, and a same-site form (SameSite=Lax keeps a
+ * cross-site POST from carrying the session) follows or unfollows. The follow
+ * is the same follows row as following a streamer, keyed "artist:<name>".
+ *
+ *   GET  /follow?id=artist:<name>&name=<shown>&back=<https page>
+ *   POST /follow   id, name, back, act=follow|unfollow  -> 303 back to the GET
+ */
+import { createHash } from "node:crypto";
+import type { IncomingMessage, ServerResponse } from "node:http";
+
+export interface FollowPageContext {
+  /** The signed-in account, or null. */
+  account: () => Promise<{ id: string } | null>;
+  follows: {
+    follow: (follower: string, streamer: string) => Promise<boolean>;
+    unfollow: (follower: string, streamer: string) => Promise<void>;
+    isFollowing: (follower: string, streamer: string) => Promise<boolean>;
+    followerCount: (streamer: string) => Promise<number>;
+  };
+  readBody: (request: IncomingMessage) => Promise<string>;
+}
+
+const ID = /^artist:[a-z0-9-]{1,90}$/;
+
+function escape(text: string): string {
+  return String(text).replace(/[&<>"']/g, (one) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[one]!);
+}
+
+const STYLE = `
+:root{--bg:#080c09;--fg:#e8efe9;--muted:#9aa79d;--card:#0e1410;--line:#1f2a22;--accent:#3ddc84}
+*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
+main{max-width:520px;margin:0 auto;padding:40px 16px}
+.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
+h1{margin:0 0 4px;font-size:1.5rem;overflow-wrap:anywhere}.by{color:var(--muted);margin:0 0 16px}
+button,a.go{display:block;text-align:center;text-decoration:none;margin-top:18px;width:100%;padding:12px;border:0;border-radius:999px;background:var(--accent);color:#06120a;font:inherit;font-weight:800;cursor:pointer}
+button.quiet{background:transparent;color:var(--fg);border:1px solid var(--line)}
+a{color:var(--accent)}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
+small{display:block;margin-top:18px;color:var(--muted)}
+`;
+
+const hash = (text: string): string => `'sha256-${createHash("sha256").update(text).digest("base64")}'`;
+
+export const FOLLOW_CSP = ["default-src 'none'", `style-src ${hash(STYLE)}`, "img-src 'self'", "form-action 'self'", "base-uri 'none'", "frame-ancestors 'none'"].join("; ");
+
+function page(title: string, body: string): string {
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escape(title)} · nixamp</title><meta name="robots" content="noindex"><link rel="icon" href="/favicon.png" type="image/png"><style>${STYLE}</style></head>
+<body><main><div class="card">${body}</div></main></body></html>`;
+}
+
+function send(response: ServerResponse, status: number, html: string, method: string): void {
+  response.writeHead(status, { "content-type": "text/html; charset=utf-8", "content-security-policy": FOLLOW_CSP, "cache-control": "no-store", "referrer-policy": "no-referrer", "x-content-type-options": "nosniff" });
+  response.end(method === "HEAD" ? undefined : html);
+}
+
+/** What the link says, cleaned: an artist id, a name to show, and an https page to go back to. */
+export function followTarget(input: URLSearchParams): { id: string; name: string; back: string } | null {
+  const id = (input.get("id") ?? "").trim();
+  if (!ID.test(id)) return null;
+  const name = (input.get("name") ?? "").replace(/[\u0000-\u001f]/g, " ").trim().slice(0, 120) || id.slice("artist:".length);
+  let back = "";
+  try {
+    const url = new URL(input.get("back") ?? "");
+    if (url.protocol === "https:" && !url.username && !url.password) back = url.href;
+  } catch {
+    back = "";
+  }
+  return { id, name, back };
+}
+
+/** Answers /follow; false for any other path. */
+export async function handleFollowPage(request: IncomingMessage, response: ServerResponse, path: string, url: URL, ctx: FollowPageContext): Promise<boolean> {
+  if (path !== "/follow") return false;
+  const method = request.method ?? "GET";
+  if (method === "POST") {
+    // Same site only: a form on another site gets no session (SameSite=Lax), and is told so here too.
+    const origin = String(request.headers.origin ?? "");
+    const host = String(request.headers["x-forwarded-host"] ?? request.headers.host ?? "").split(",")[0]!.trim();
+    if (origin && origin !== "null" && new URL(origin).host !== host) {
+      send(response, 403, page("Not from here", `<h1>Not from here</h1><p class="by">Follow from nixamp.com's own page.</p>`), method);
+      return true;
+    }
+    const form = new URLSearchParams(await ctx.readBody(request));
+    const target = followTarget(form);
+    const me = await ctx.account().catch(() => null);
+    if (target && me) {
+      if (form.get("act") === "unfollow") await ctx.follows.unfollow(me.id, target.id);
+      else await ctx.follows.follow(me.id, target.id);
+    }
+    const again = target ? `/follow?${new URLSearchParams({ id: target.id, name: target.name, ...(target.back ? { back: target.back } : {}) }).toString()}` : "/follow";
+    response.writeHead(303, { location: again, "cache-control": "no-store" });
+    response.end();
+    return true;
+  }
+  if (method !== "GET" && method !== "HEAD") {
+    response.writeHead(405, { allow: "GET, POST" }).end();
+    return true;
+  }
+  const target = followTarget(url.searchParams);
+  if (!target) {
+    send(response, 404, page("Nobody to follow", `<h1>Nobody to follow</h1><p class="by">That link does not name an artist.</p>`), method);
+    return true;
+  }
+  const back = target.back ? `<small><a href="${escape(target.back)}">← Back to ${escape(target.name)}</a></small>` : "";
+  const me = await ctx.account().catch(() => null);
+  if (!me) {
+    send(response, 200, page(`Follow ${target.name}`, `<h1>Follow ${escape(target.name)}</h1>
+<p class="by">Sign in to nixamp.com to follow the artists you hear on the radio.</p>
+<a class="go" href="/radio#music">Sign in to nixamp.com</a>
+<small>Signed in, open this page again (or press Follow on the artist's page) to follow.</small>${back}`), method);
+    return true;
+  }
+  const [following, count] = await Promise.all([ctx.follows.isFollowing(me.id, target.id), ctx.follows.followerCount(target.id).catch(() => 0)]);
+  const hidden = `<input type="hidden" name="id" value="${escape(target.id)}"><input type="hidden" name="name" value="${escape(target.name)}">${target.back ? `<input type="hidden" name="back" value="${escape(target.back)}">` : ""}`;
+  send(response, 200, page(`Follow ${target.name}`, `<h1>${escape(target.name)}</h1>
+<p class="by">${following ? "You follow them." : "Follow them to keep them with your follows on nixamp.com."} ${count} follower${count === 1 ? "" : "s"}.</p>
+<form method="post" action="/follow">${hidden}<input type="hidden" name="act" value="${following ? "unfollow" : "follow"}">
+<button type="submit"${following ? ' class="quiet"' : ""}>${following ? "Unfollow" : `Follow ${escape(target.name)}`}</button></form>
+${back}`), method);
+  return true;
+}