nixamp 0.59.5 → 0.60.1

package/src/ai-label.ts

@@ -125,6 +125,10 @@ export interface LabelSettings {
   songSeconds: number;
   /** A music video for every song (the cover over itself, blurred, and the song's waveform), and a TV station of them. */
   videos: boolean;
+  /** Each album's single (song 1) gets filmed Veo shots of the band, while the month's Veo budget lasts. */
+  veo: boolean;
+  /** How many 8 s Veo shots a single gets. */
+  veoShots: number;
   /** Public, listed and owned, so the genre stations are on the guide. */
   publish: boolean;
   /** Songs made at the same time (ElevenLabs takes several requests at once on a paid plan). */
@@ -378,6 +382,8 @@ export const DEFAULTS: Omit<LabelSettings, "pausedReason"> = {
   songSeconds: 150,
   publish: true,
   videos: true,
+  veo: false,
+  veoShots: 4,
   parallel: 1,
   genreOrder: ["Punk", "Blues", "Country", "Jazz", "Classic Rock", "Metal", "Hip-Hop", "Pop", "R&B"],
 };
@@ -617,6 +623,35 @@ export async function writeStoryboard(
   return prompts;
 }
 
+/** Thrown by a Veo dependency when this month's budget is spent: no more shots until next month. */
+export class VeoUnavailable extends Error {}
+
+const SHOTS = [
+  "Wide shot of the whole band performing on a stage, the crowd in the foreground",
+  "Close-up of the lead singer singing the chorus into the microphone",
+  "The camera moves across the stage between the band members as they play hard",
+  "Low-angle shot of the band at the song's climax, lights flaring behind them",
+  "Over-the-shoulder shot from behind the drums, looking out at the band and the crowd",
+  "Slow push-in on the band in a quieter moment, moody light",
+  "Handheld shot from the crowd, fans with hands up, the band lit on stage",
+  "The band walking out on stage before the show, backlit silhouettes turning into faces",
+];
+
+/**
+ * The prompts for a single's filmed shots. The people are the reference
+ * images, described by role and look only: Veo refuses names with faces
+ * ("we can't create videos with real people's names or likenesses").
+ */
+export function veoPrompts(artist: Pick<LabelArtist, "genre" | "sound">, song: Pick<LabelSong, "style">, members: Array<Pick<Member, "role" | "look">>, count: number): string[] {
+  const cast = members.slice(0, 3).map((one, i) => `the ${one.role} from reference image ${i + 1} (${one.look.replace(/\b[A-Z][a-z]+ [A-Z][a-z]+\b/g, "")})`).join("; ");
+  return SHOTS.slice(0, count).map((shot) => [
+    `Music video for a fictional ${artist.genre} band. ${shot}.`,
+    cast ? `The performers are exactly the people in the reference images: ${cast}.` : "",
+    `Mood and sound: ${song.style} ${artist.sound}.`.slice(0, 400),
+    "Cinematic, 35mm film look, dynamic camera. No text, no logos.",
+  ].filter(Boolean).join(" "));
+}
+
 /** The DejaVu bold face most Linux boxes have, for the title card; "" when there is none. */
 function titleFont(): string {
   for (const file of ["/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", "/usr/share/fonts/dejavu/DejaVuSans-Bold.ttf", "/System/Library/Fonts/Supplemental/Arial Bold.ttf"]) {
@@ -640,10 +675,21 @@ function runLow(ffmpeg: string[], args: string[], timeout: number, what: string)
  * the artist and title come up at the start, and the MP3's audio and tags
  * (title, artist, album, words) are copied in. 720p H.264.
  */
-export function renderStoryVideo(ffmpeg: string[], input: { audio: string; images: string[]; seconds: number; artist: string; title: string; out: string }): Promise<void> {
+export function renderStoryVideo(ffmpeg: string[], input: { audio: string; images: string[]; seconds: number; artist: string; title: string; out: string; clips?: Array<{ path: string; seconds: number }> }): Promise<void> {
   const fade = 1;
-  const count = input.images.length;
-  const each = input.seconds / count + fade;
+  const clips = input.clips ?? [];
+  // Stills fill what the filmed shots do not; each gets at least 3 s, so on a short song some are left out.
+  let images = [...input.images];
+  const clipTime = clips.reduce((sum, one) => sum + one.seconds, 0);
+  const stillFor = (count: number): number => (input.seconds + (count + clips.length - 1) * fade - clipTime) / Math.max(1, count);
+  while (images.length > 0 && stillFor(images.length) < 3) images = images.slice(0, -1);
+  const each = images.length ? stillFor(images.length) : 0;
+  // A still, then a filmed shot, in turn; whatever is left of either at the end.
+  const order: Array<{ kind: "image"; path: string } | { kind: "clip"; path: string; seconds: number }> = [];
+  for (let i = 0; i < Math.max(images.length, clips.length); i++) {
+    if (images[i]) order.push({ kind: "image", path: images[i]! });
+    if (clips[i]) order.push({ kind: "clip", ...clips[i]! });
+  }
   const frames = Math.max(25, Math.round(each * 25));
   const moves = [
     `z='1+0.15*on/${frames}':x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)'`,
@@ -652,12 +698,25 @@ export function renderStoryVideo(ffmpeg: string[], input: { audio: string; image
     `z='1.15':x='(iw-iw/zoom)*(1-on/${frames})':y='(ih-ih/zoom)*on/${frames}'`,
   ];
   const parts: string[] = [];
-  input.images.forEach((_, i) => {
-    parts.push(`[${i}:v]scale=1600:900:force_original_aspect_ratio=increase,crop=1600:900,zoompan=${moves[i % moves.length]}:d=1:s=1280x720:fps=25,setsar=1[v${i}]`);
+  const lengths: number[] = [];
+  let still = 0;
+  order.forEach((item, i) => {
+    if (item.kind === "image") {
+      parts.push(`[${i}:v]scale=1600:900:force_original_aspect_ratio=increase,crop=1600:900,zoompan=${moves[still++ % moves.length]}:d=1:s=1280x720:fps=25,setsar=1[v${i}]`);
+      lengths.push(each);
+    } else {
+      // A filmed shot plays as it was filmed; the last one holds its final frame if the song runs on.
+      const hold = i === order.length - 1 ? `,tpad=stop_mode=clone:stop_duration=${Math.max(0, input.seconds).toFixed(2)}` : "";
+      parts.push(`[${i}:v]scale=1280:720:force_original_aspect_ratio=increase,crop=1280:720,fps=25,setsar=1,trim=duration=${item.seconds},setpts=PTS-STARTPTS${hold}[v${i}]`);
+      lengths.push(item.seconds);
+    }
   });
+  const count = order.length;
   let last = "v0";
+  let at = 0;
   for (let i = 1; i < count; i++) {
-    parts.push(`[${last}][v${i}]xfade=transition=fade:duration=${fade}:offset=${(i * (each - fade)).toFixed(2)}[x${i}]`);
+    at += lengths[i - 1]! - fade;
+    parts.push(`[${last}][v${i}]xfade=transition=fade:duration=${fade}:offset=${at.toFixed(2)}[x${i}]`);
     last = `x${i}`;
   }
   const font = titleFont();
@@ -666,7 +725,7 @@ export function renderStoryVideo(ffmpeg: string[], input: { audio: string; image
     ? `[${last}]drawtext=fontfile=${font}:text='${card}':fontcolor=white:fontsize=44:x=60:y=h-110:enable='between(t,0.5,6)':alpha='if(lt(t,1.5),t-0.5,if(gt(t,5),6-t,1))':shadowcolor=black@0.7:shadowx=2:shadowy=2,format=yuv420p[v]`
     : `[${last}]format=yuv420p[v]`);
   const args = ["-hide_banner", "-loglevel", "error", "-y", "-threads", "2",
-    ...input.images.flatMap((image) => ["-loop", "1", "-t", each.toFixed(2), "-i", image]),
+    ...order.flatMap((item) => (item.kind === "image" ? ["-loop", "1", "-t", each.toFixed(2), "-i", item.path] : ["-i", item.path])),
     "-i", input.audio, "-filter_complex", parts.join(";"),
     "-map", "[v]", "-map", `${count}:a`, "-map_metadata", String(count), "-c:v", "libx264", "-preset", "veryfast", "-crf", "24", "-r", "25", "-c:a", "copy", "-shortest",
     "-movflags", "+faststart+use_metadata_tags", input.out];
@@ -758,8 +817,10 @@ export interface AiLabelDeps {
   video?: (audio: string, cover: string, out: string) => Promise<void>;
   /** Times each sung word in a recording; ElevenLabs forced alignment by default, null without a key. */
   align?: ((audio: string, text: string) => Promise<TimedWord[]>) | null;
+  /** A filmed shot (Veo, through nixamp.com): the MP4, or a VeoUnavailable when the month's budget is spent. */
+  veo?: ((input: { prompt: string; seconds: number; references: Buffer[] }) => Promise<Buffer>) | null;
   /** Renders a storyboard music video; ffmpeg by default (renderStoryVideo). */
-  storyVideo?: (input: { audio: string; images: string[]; seconds: number; artist: string; title: string; out: string }) => Promise<void>;
+  storyVideo?: (input: { audio: string; images: string[]; seconds: number; artist: string; title: string; out: string; clips?: Array<{ path: string; seconds: number }> }) => Promise<void>;
   /** A scene's picture for this prompt, or null when nothing can draw one; Workers AI by default. */
   image?: (prompt: string) => Promise<Buffer | null>;
   /** Tells the world an album landed (nixamp.com tells the artist's followers); never awaited. */
@@ -789,6 +850,8 @@ export class AiLabel {
   private videoFailed = new Set<string>();
   /** Songs whose words were already sent to the aligner since this server started. */
   private alignTried = new Set<string>();
+  /** The month ("YYYY-MM") Veo said its budget was spent; no more shots until the next. */
+  private veoSpentIn = "";
   /** Old videos already tried as storyboards since this server started. */
   private upgradeTried = new Set<string>();
   /** The day's album is tried at most every 30 minutes, so a failing model is not hammered. */
@@ -937,6 +1000,9 @@ export class AiLabel {
     if (input["enabled"] !== undefined) this.settings.enabled = input["enabled"] !== false;
     if (input["publish"] !== undefined) this.settings.publish = input["publish"] !== false;
     if (input["videos"] !== undefined) this.settings.videos = input["videos"] !== false;
+    if (input["veo"] !== undefined) this.settings.veo = input["veo"] === true;
+    const shots = whole("veoShots", 1, 8);
+    if (shots !== undefined) this.settings.veoShots = shots;
     const perDay = whole("albumsPerDay", 0, 24);
     if (perDay !== undefined) this.settings.albumsPerDay = perDay;
     if (input["newArtistChance"] !== undefined) {
@@ -1114,7 +1180,7 @@ export class AiLabel {
       .flatMap((album) => album.songs.filter((song) => song.file && !this.videoFailed.has(song.file)).map((song) => ({ artist, album, song }))));
     const missing = songs.filter(({ song }) => !song.video);
     const untagged = songs.filter(({ song }) => song.video && !song.videoTagged);
-    const old = songs.filter(({ song }) => song.video && song.videoTagged && (song.videoVersion ?? 1) < 2 && !this.upgradeTried.has(song.file));
+    const old = songs.filter(({ song }) => song.video && song.videoTagged && ((song.videoVersion ?? 1) < 2 || (this.wantsVeo(song) && (song.videoVersion ?? 1) < 3)) && !this.upgradeTried.has(song.file));
     let made = 0;
     for (const { album, song } of untagged) {
       if (!this.settings.videos) break;
@@ -1192,15 +1258,65 @@ export class AiLabel {
         this.log(`no storyboard for "${song.title}" (${(error as Error).message}); the cover video instead`);
       }
     }
-    if (images.length >= 2) {
-      await (this.deps.storyVideo ?? ((input) => renderStoryVideo(this.deps.ffmpeg, input)))({ audio: song.file, images, seconds, artist: artist.name, title: song.title, out });
-      return 2;
+    // An album's single gets filmed shots of the band too, while the month's Veo budget lasts.
+    const clips = this.wantsVeo(song) ? await this.filmShots(artist, song, scenes) : [];
+    if (images.length >= 2 || clips.length > 0) {
+      if (storyOnly && (song.videoVersion ?? 1) >= 2 && clips.length === 0) throw new Error("no filmed shots this time; the video it has stays");
+      await (this.deps.storyVideo ?? ((input) => renderStoryVideo(this.deps.ffmpeg, input)))({ audio: song.file, images, seconds, artist: artist.name, title: song.title, out, ...(clips.length ? { clips } : {}) });
+      return clips.length ? 3 : 2;
     }
     if (storyOnly) throw new Error("no storyboard could be drawn; the video it has stays");
     await (this.deps.video ?? ((audio, cover, to) => renderVideo(this.deps.ffmpeg, audio, cover, to)))(song.file, album.cover, out);
     return 1;
   }
 
+  /** Whether this song gets filmed Veo shots: an album's single, Veo on, and the month's budget not spent. */
+  private wantsVeo(song: Pick<LabelSong, "n">): boolean {
+    return this.settings.veo && song.n === 1 && Boolean(this.deps.veo) && this.veoSpentIn !== new Date(this.now()).toISOString().slice(0, 7);
+  }
+
+  /**
+   * A single's filmed shots: the band, from their portraits (up to three as
+   * Veo's reference images), on stage, in the song's mood. Stops for the
+   * month when the budget is spent; a shot Veo will not make is skipped.
+   */
+  private async filmShots(artist: LabelArtist, song: LabelSong, dir: string): Promise<Array<{ path: string; seconds: number }>> {
+    const veo = this.deps.veo;
+    if (!veo) return [];
+    mkdirSync(dir, { recursive: true });
+    const members = this.cast(artist);
+    const references: Buffer[] = [];
+    for (const member of members.slice(0, 3)) {
+      const portrait = join(this.folderOf(artist), "members", `${member.slug}.jpg`);
+      const small = join(dir, `ref-${member.slug}.jpg`);
+      try {
+        // 512 px is plenty for a face and keeps the request small.
+        await runLow(this.deps.ffmpeg, [...this.deps.ffmpeg.slice(1), "-hide_banner", "-loglevel", "error", "-y", "-i", portrait, "-vf", "scale=512:-2", "-q:v", "4", small], 60_000, "the portrait did not shrink");
+        references.push(readFileSync(small));
+      } catch {
+        // A member without a portrait is described in words only.
+      }
+    }
+    const clips: Array<{ path: string; seconds: number }> = [];
+    for (const [i, prompt] of veoPrompts(artist, song, members, this.settings.veoShots).entries()) {
+      try {
+        const bytes = await veo({ prompt, seconds: 8, references });
+        const file = join(dir, `shot-${i}.mp4`);
+        writeFileSync(file, bytes);
+        clips.push({ path: file, seconds: 8 });
+      } catch (error) {
+        if (error instanceof VeoUnavailable) {
+          this.veoSpentIn = new Date(this.now()).toISOString().slice(0, 7);
+          this.log(`Veo: ${(error as Error).message}; singles get the storyboard until next month`);
+          break;
+        }
+        this.log(`Veo shot ${i + 1} for "${song.title}": ${(error as Error).message}`);
+      }
+    }
+    if (clips.length) this.log(`Veo: ${clips.length} filmed shots for "${song.title}" (${artist.name})`);
+    return clips;
+  }
+
   /** The label's music videos as one TV station: free to watch, with its breaks. */
   private placeVideos(): Promise<void> {
     const next = this.placing.then(async () => {

package/src/music-hub.ts

@@ -13,6 +13,7 @@
  */
 import { createHash } from "node:crypto";
 import type { IncomingMessage, ServerResponse } from "node:http";
+import { musicPage, renderMusicPage } from "./music-seo.ts";
 
 /** A server's opaque id: the first 10 hex of the SHA-256 of its https origin. Both sides can work it out. */
 export function serverId(base: string): string {
@@ -149,7 +150,7 @@ export async function musicPageFor(hub: MusicHub, path: string): Promise<string>
 }
 
 export function isMusicPath(path: string): boolean {
-  return path === "/music" || path.startsWith("/music/") || path === "/api/v1/music" || FILE.test(path) || path === "/api/v1/music/released";
+  return path === "/music" || path.startsWith("/music/") || path === "/api/v1/music" || FILE.test(path) || path === "/api/v1/music/released" || path === "/api/v1/music/veo";
 }
 
 export interface MusicRoutesContext {
@@ -158,8 +159,12 @@ export interface MusicRoutesContext {
   readBody: (request: IncomingMessage) => Promise<string>;
   /** The page shell (web/music.html), or null when the web build is absent. */
   page: () => string | null;
+  /** This site's public origin, for canonical and og: addresses (https://nixamp.com). */
+  site?: string;
   /** A server says something of its label landed; null when nobody may say so. */
   released?: (request: IncomingMessage, body: Record<string, unknown>) => Promise<{ status: number; body: unknown }>;
+  /** Veo shots for a label server's videos: the month's spend (GET), a clip (POST); answers bytes or JSON. */
+  veo?: (request: IncomingMessage) => Promise<{ status: number; body: unknown; video?: Buffer }>;
 }
 
 export async function handleMusicRoutes(request: IncomingMessage, response: ServerResponse, path: string, ctx: MusicRoutesContext): Promise<boolean> {
@@ -173,6 +178,15 @@ export async function handleMusicRoutes(request: IncomingMessage, response: Serv
     ctx.json(response, answer.status, answer.body);
     return true;
   }
+  if (path === "/api/v1/music/veo") {
+    if (!ctx.veo) { ctx.json(response, 404, { error: "Veo is not set up here" }); return true; }
+    const answer = await ctx.veo(request);
+    if (answer.video) {
+      response.writeHead(200, { "content-type": "video/mp4", "content-length": String(answer.video.length), "cache-control": "no-store" });
+      response.end(answer.video);
+    } else ctx.json(response, answer.status, answer.body);
+    return true;
+  }
   if (method !== "GET" && method !== "HEAD") { ctx.json(response, 405, { error: "not like that" }); return true; }
   if (path === "/api/v1/music") {
     ctx.json(response, 200, await ctx.hub.catalogue());
@@ -204,10 +218,19 @@ export async function handleMusicRoutes(request: IncomingMessage, response: Serv
     }
     return true;
   }
-  // /music and everything under it is the app; it reads /api/v1/music.
-  const page = ctx.page();
-  if (!page) { ctx.json(response, 404, { error: "the music app is not built here" }); return true; }
-  response.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-cache" });
-  response.end(method === "HEAD" ? undefined : page);
+  // /music and everything under it is the app; it reads /api/v1/music. Its head and a
+  // plain summary are written here, per page (music-seo.ts), for crawlers and link
+  // previews; a catalogue that is slow or gone leaves the shell as it is.
+  const shell = ctx.page();
+  if (!shell) { ctx.json(response, 404, { error: "the music app is not built here" }); return true; }
+  const site = (ctx.site ?? "https://nixamp.com").replace(/\/+$/, "");
+  const catalogue = await Promise.race([
+    ctx.hub.catalogue().catch(() => null),
+    new Promise<null>((done) => setTimeout(() => done(null), 2_000).unref?.()),
+  ]);
+  const view = catalogue ? musicPage(path, catalogue, site) : null;
+  const html = view ? renderMusicPage(shell, view, `${site}${path.replace(/\/+$/, "") || "/music"}`) : shell;
+  response.writeHead(view?.status ?? 200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-cache" });
+  response.end(method === "HEAD" ? undefined : html);
   return true;
 }

package/src/music-seo.ts

@@ -0,0 +1,191 @@
+/**
+ * nixamp.com/music for crawlers and link previews: the page shell with its
+ * head and a plain summary written on the server, per page. The app reads
+ * /api/v1/music and replaces the summary when its script runs, so a person
+ * sees the app and a crawler, a chat app or a social card sees the title,
+ * the artist, the album and its artwork without running anything.
+ *
+ *   /music                                  the label: genres, artists, stations
+ *   /music/genre/<slug>                     a genre's artists
+ *   /music/artist/<server>/<artist>         an artist: bio, members, albums
+ *   /music/album/<server>/<artist>/<album>  an album: cover, songs
+ *   /music/me                               the listener's own page: never indexed
+ */
+import type { HubArtist, HubCatalogue } from "./music-hub.ts";
+
+const slug = (text: string): string => text.normalize("NFKD").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+const escape = (text: string): string => text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]!);
+const clip = (text: string, max: number): string => {
+  const one = text.replace(/\s+/g, " ").trim();
+  return one.length <= max ? one : `${one.slice(0, max - 1).replace(/\s+\S*$/, "")}…`;
+};
+const clock = (seconds: number): string => `${Math.floor(seconds / 60)}:${String(Math.round(seconds % 60)).padStart(2, "0")}`;
+
+interface Head {
+  title: string;
+  description: string;
+  type: string;
+  image?: { url: string; alt: string };
+  noindex?: boolean;
+  /** og:music:* and similar, as [property, content]. */
+  extra?: Array<[string, string]>;
+  ld?: Record<string, unknown>;
+}
+
+/** What the server writes for a /music address: its head, and a summary for the page body. */
+export interface MusicPage { head: Head; body: string; status: number }
+
+/** The head and summary of a /music address, from the catalogue. `site` is https://nixamp.com. */
+export function musicPage(path: string, catalogue: HubCatalogue, site: string): MusicPage {
+  const at = (rest: string): string => `${site}${rest}`;
+  const file = (server: string, rest: string): string => at(`/api/v1/music/file/${server}/${rest}`);
+  const artists = catalogue.genres.flatMap((genre) => genre.artists);
+  const holder = catalogue.holders[0] ?? "Profullstack, Inc.";
+  const parts = path.replace(/\/+$/, "").split("/").slice(2);
+  const pictureOf = (artist: HubArtist): Head["image"] => {
+    const album = [...artist.albums].reverse().find((one) => one.cover);
+    if (album) return { url: file(artist.server, `${artist.key}/${album.key}/cover.jpg`), alt: `${album.title} by ${artist.name}, the cover` };
+    const member = artist.members?.[0];
+    return member ? { url: file(artist.server, `${artist.key}/members/${member.slug}.jpg`), alt: `${member.name} of ${artist.name}` } : undefined;
+  };
+  const artistLink = (artist: HubArtist): string => `/music/artist/${artist.server}/${artist.key}`;
+  const missing = (what: string): MusicPage => ({
+    status: 404,
+    head: { title: `No such ${what} · nixamp music`, description: `Nothing by that name is on nixamp music.`, type: "website", noindex: true },
+    body: `<h1>No such ${escape(what)}</h1><p><a href="/music">Every artist on nixamp music</a></p>`,
+  });
+
+  if (parts[0] === "me") {
+    return {
+      status: 200,
+      head: { title: "My music · nixamp", description: "The songs and albums you bought on nixamp, and the artists you follow.", type: "website", noindex: true },
+      body: "<h1>My music</h1><p>Sign in to see what you bought and who you follow.</p>",
+    };
+  }
+
+  if (parts[0] === "genre" && parts[1]) {
+    const genre = catalogue.genres.find((one) => slug(one.genre) === parts[1]);
+    if (!genre) return missing("genre");
+    const names = genre.artists.map((one) => one.name);
+    const lead = genre.artists[0];
+    return {
+      status: 200,
+      head: {
+        title: `${genre.genre} · nixamp music`,
+        description: clip(`${genre.genre} by AI artists on nixamp: ${names.join(", ")}. Listen free on the live station; follow the artists; buy the songs.`, 200),
+        type: "website",
+        ...(lead && pictureOf(lead) ? { image: pictureOf(lead)! } : {}),
+      },
+      body: `<h1>${escape(genre.genre)}</h1><ul>${genre.artists.map((one) => `<li><a href="${artistLink(one)}">${escape(one.name)}</a>${one.bio ? `: ${escape(clip(one.bio, 160))}` : ""}</li>`).join("")}</ul>`,
+    };
+  }
+
+  if (parts[0] === "artist" && parts[1] && parts[2]) {
+    const artist = artists.find((one) => one.server === parts[1] && one.key === parts[2]);
+    if (!artist) return missing("artist");
+    const image = pictureOf(artist);
+    const albums = artist.albums.filter((one) => one.songs.length > 0);
+    const members = artist.members ?? [];
+    return {
+      status: 200,
+      head: {
+        title: `${artist.name} · ${artist.genre} · nixamp music`,
+        description: clip(artist.bio || `${artist.name}, ${artist.genre} on nixamp: ${albums.length} album${albums.length === 1 ? "" : "s"}.`, 200),
+        type: "profile",
+        ...(image ? { image } : {}),
+        ld: {
+          "@context": "https://schema.org", "@type": "MusicGroup", name: artist.name, genre: artist.genre, url: at(artistLink(artist)),
+          ...(artist.bio ? { description: artist.bio } : {}),
+          ...(image ? { image: image.url } : {}),
+          ...(members.length ? { member: members.map((one) => ({ "@type": "Person", name: one.name, ...(one.role ? { roleName: one.role } : {}) })) } : {}),
+          album: albums.map((one) => ({ "@type": "MusicAlbum", name: one.title, url: at(`/music/album/${artist.server}/${artist.key}/${one.key}`), ...(one.year ? { datePublished: String(one.year) } : {}) })),
+          recordLabel: { "@type": "Organization", name: holder },
+        },
+      },
+      body: `<p><a href="/music">Music</a> / <a href="/music/genre/${slug(artist.genre)}">${escape(artist.genre)}</a></p><h1>${escape(artist.name)}</h1>`
+        + (artist.bio ? `<p>${escape(artist.bio)}</p>` : "")
+        + (members.length ? `<h2>Members</h2><ul>${members.map((one) => `<li>${escape(one.name)}${one.role ? `, ${escape(one.role)}` : ""}</li>`).join("")}</ul>` : "")
+        + (albums.length ? `<h2>Albums</h2><ul>${albums.map((one) => `<li><a href="/music/album/${artist.server}/${artist.key}/${one.key}">${escape(one.title)}</a>${one.year ? ` (${one.year})` : ""}</li>`).join("")}</ul>` : ""),
+    };
+  }
+
+  if (parts[0] === "album" && parts[1] && parts[2] && parts[3]) {
+    const artist = artists.find((one) => one.server === parts[1] && one.key === parts[2]);
+    const album = artist?.albums.find((one) => one.key === parts[3]);
+    if (!artist || !album) return missing("album");
+    const image = album.cover ? { url: file(artist.server, `${artist.key}/${album.key}/cover.jpg`), alt: `${album.title} by ${artist.name}, the cover` } : pictureOf(artist);
+    const url = at(`/music/album/${artist.server}/${artist.key}/${album.key}`);
+    return {
+      status: 200,
+      head: {
+        title: `${album.title} by ${artist.name} · nixamp music`,
+        description: clip(album.concept || `${album.title}, ${album.songs.length} songs by ${artist.name} (${artist.genre})${album.year ? `, ${album.year}` : ""}. Listen free on nixamp.`, 200),
+        type: "music.album",
+        ...(image ? { image } : {}),
+        extra: [
+          ["music:musician", at(artistLink(artist))],
+          ...(album.year ? [["music:release_date", String(album.year)] as [string, string]] : []),
+          ...album.songs.slice(0, 30).map((song) => ["music:song", `${url}#${song.n}`] as [string, string]),
+        ],
+        ld: {
+          "@context": "https://schema.org", "@type": "MusicAlbum", name: album.title, url,
+          byArtist: { "@type": "MusicGroup", name: artist.name, url: at(artistLink(artist)) },
+          genre: artist.genre, numTracks: album.songs.length,
+          ...(album.year ? { datePublished: String(album.year) } : {}),
+          ...(image ? { image: image.url } : {}),
+          ...(album.concept ? { description: album.concept } : {}),
+          recordLabel: { "@type": "Organization", name: holder },
+          track: album.songs.map((song) => ({ "@type": "MusicRecording", name: song.title, position: song.n, ...(song.seconds ? { duration: `PT${Math.floor(song.seconds / 60)}M${Math.round(song.seconds % 60)}S` } : {}) })),
+        },
+      },
+      body: `<p><a href="/music">Music</a> / <a href="${artistLink(artist)}">${escape(artist.name)}</a></p><h1>${escape(album.title)}</h1>`
+        + `<p>by <a href="${artistLink(artist)}">${escape(artist.name)}</a>${album.year ? ` · ${album.year}` : ""} · ${album.songs.length} songs</p>`
+        + (album.concept ? `<p>${escape(album.concept)}</p>` : "")
+        + `<ol>${album.songs.map((song) => `<li>${escape(song.title)}${song.seconds ? ` <span>${clock(song.seconds)}</span>` : ""}</li>`).join("")}</ol>`,
+    };
+  }
+
+  if (parts.length > 0) return missing("page");
+  const lead = artists.find((one) => pictureOf(one));
+  return {
+    status: 200,
+    head: {
+      title: "AI music, live and on demand · nixamp",
+      description: clip(`Original bands and artists, written and sung by AI and released by ${holder}: ${catalogue.genres.map((one) => one.genre).join(", ")}. Listen free; follow the artists; buy the songs.`, 200),
+      type: "website",
+      ...(lead ? { image: pictureOf(lead)! } : {}),
+    },
+    body: `<h1>AI music, live and on demand</h1>${catalogue.genres.map((genre) => `<h2><a href="/music/genre/${slug(genre.genre)}">${escape(genre.genre)}</a></h2><ul>${genre.artists.map((one) => `<li><a href="${artistLink(one)}">${escape(one.name)}</a></li>`).join("")}</ul>`).join("")}`,
+  };
+}
+
+/** The shell with a page's head and summary written in. */
+export function renderMusicPage(shell: string, page: MusicPage, url: string): string {
+  const { head } = page;
+  const meta: string[] = [
+    `<title>${escape(head.title)}</title>`,
+    `<meta name="description" content="${escape(head.description)}" />`,
+    `<link rel="canonical" href="${escape(url)}" />`,
+    ...(head.noindex ? [`<meta name="robots" content="noindex" />`] : []),
+    `<meta property="og:site_name" content="nixamp" />`,
+    `<meta property="og:title" content="${escape(head.title.replace(/ · nixamp( music)?$/, ""))}" />`,
+    `<meta property="og:description" content="${escape(head.description)}" />`,
+    `<meta property="og:type" content="${escape(head.type)}" />`,
+    `<meta property="og:url" content="${escape(url)}" />`,
+    ...(head.image ? [
+      `<meta property="og:image" content="${escape(head.image.url)}" />`,
+      `<meta property="og:image:alt" content="${escape(head.image.alt)}" />`,
+      `<meta name="twitter:card" content="summary_large_image" />`,
+      `<meta name="twitter:image" content="${escape(head.image.url)}" />`,
+    ] : [`<meta name="twitter:card" content="summary" />`]),
+    `<meta name="twitter:title" content="${escape(head.title)}" />`,
+    `<meta name="twitter:description" content="${escape(head.description)}" />`,
+    ...(head.extra ?? []).map(([property, content]) => `<meta property="${escape(property)}" content="${escape(content)}" />`),
+    ...(head.ld ? [`<script type="application/ld+json">${JSON.stringify(head.ld).replace(/</g, "\\u003c")}</script>`] : []),
+  ];
+  return shell
+    .replace(/<title>[^<]*<\/title>/, "")
+    .replace(/<meta name="description"[^>]*>/, "")
+    .replace("</head>", `    ${meta.join("\n    ")}\n  </head>`)
+    .replace(/(<main id="view"[^>]*>)(<\/main>)/, `$1${page.body}$2`);
+}

package/src/radio-pages.ts

@@ -476,7 +476,7 @@ export function renderMissing(what: string, base: string, nav: string): string {
 /** What a station page's head says: a station of ours or a peer's. */
 export interface StationFace { name: string; description?: string; video?: boolean }
 
-export function stationHead(station: StationFace, slug: string, base: string, path = `/radio/${slug}`): string {
+export function stationHead(station: StationFace, slug: string, base: string, path = `/radio/${slug}`, image = ""): string {
   const url = `${base}${path}`;
   const description = station.description || `${station.name}, live now. Free to listen; tap the artist or album on the air to see more.`;
   return `<title>${escape(station.name)} · live.streaming</title>
@@ -487,14 +487,22 @@ export function stationHead(station: StationFace, slug: string, base: string, pa
     <meta property="og:url" content="${escape(url)}" />
     <meta property="og:type" content="${station.video ? "video.tv_show" : "music.radio_station"}" />
     <meta property="og:site_name" content="live.streaming" />
-    <meta name="twitter:card" content="summary" />
+    ${image ? `<meta property="og:image" content="${escape(image)}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="${escape(image)}" />` : `<meta name="twitter:card" content="summary" />`}
     <style>${NAV_STYLE}</style>`;
 }
 
+/** A station's picture for link previews: the cover of an album it plays, from the catalogue. */
+export function stationImage(catalogue: RadioCatalogue, slug: string, base: string): string {
+  const album = [...catalogue.albums.values()].find((one) => one.stations.includes(slug) && (one.coverFile || one.label?.cover));
+  return album ? `${base}/radio/album/${album.slug}/cover.jpg` : "";
+}
+
 /** The built station page (or the inline one) as /radio/<name> serves it: its head, the header, indexable. */
-export function asRadioPage(html: string, station: StationFace, slug: string, base: string, nav: string, path?: string): string {
+export function asRadioPage(html: string, station: StationFace, slug: string, base: string, nav: string, path?: string, image = ""): string {
   return html
-    .replace(/<title>[^<]*<\/title>/, stationHead(station, slug, base, path))
+    .replace(/<title>[^<]*<\/title>/, stationHead(station, slug, base, path, image))
     .replace(/\s*<meta name="robots" content="noindex"\s*\/?>/, "")
     .replace(/<body>/, `<body>\n${nav}`);
 }