v4: an audio file's waveform is made once by the server, and the player seeks on one accessible scrubber — every player downloaded the whole file a second time and decoded all of it in the browser to draw 150 bars, so a long FLAC cost tens of megabytes of memory per page, and the waveform could only be clicked: no drag, no keyboard, no slider for a screen reader. GET /api/dumps/:id/waveform now answers an audio dump's peaks, which lib/ffmpeg.ts decodes with ffmpeg on first request, mono at 8 kHz and streamed, keeps beside the thumbnails as the response itself, and serves with an ETag (a ten-minute MP3 takes about a second, then a few hundred bytes). The peaks are taken by shared/waveform.ts's peaksOf, scaled to the loudest so a quiet recording fills the track, and the dump form's preview of a file not yet uploaded decodes it with the same function, at 8 kHz in an OfflineAudioContext. Scrubber replaces Waveform and SeekBar: a role="slider" that seeks where a pointer lets go, follows a drag (the clock shows where it is held), takes arrows, Home and End, and draws the bars as one path with the played part clipped by a nested svg, so it moves smoothly and a timeupdate redraws two attributes instead of 150 rects; audio without a waveform, and video, get a plain bar. MediaPlayer reads whether it plays from the element's events alone, so a click no longer reports the change twice, its handles for PlayerProvider are stable callbacks instead of refs to refs, the drag no longer reattaches every listener, and the <source> children that src made dead are gone, with the mime prop. The file, thumbnail and waveform routes resolve their dump, token and caching through lib/dump-media.ts, and what is generated from an upload is named and removed in lib/ffmpeg.ts, the custom thumbnail by dump-service's customThumbnailPath, instead of paths spelled out in each. The test setup's play() and pause() fire their events as a browser does. 277 backend tests and 684 frontend tests pass, and deno check, tsc, eslint, doc:lint and i18n:compile --strict are clean; checked in the app with a real FLAC on its dump page and in the global player at 1280 and 390px, seeking by keyboard.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

api/lib/dump-media.ts

@@ -0,0 +1,46 @@
+/**
+ * Resolves the dump whose media a route under `/api/dumps/:dumpId/` serves:
+ * its file (`routes/files.ts`), its thumbnail (`routes/thumbnails.ts`) or its
+ * waveform (`routes/waveforms.ts`). Media elements and `<img>`s can't send an
+ * Authorization header, so these routes take the viewer's media token from
+ * the query string, and are cached by the file's version.
+ *
+ * @module
+ */
+
+import type { Context } from "@oak/oak";
+import { APIException } from "./api-exception.ts";
+import { authenticateMedia } from "./auth.ts";
+import { type Dump, dumpFileVersion } from "../../shared/dump.ts";
+import { UUID_RE } from "../../shared/validation.ts";
+import { getDump } from "../services/dump-service.ts";
+
+/**
+ * Returns dump `dumpId` as the viewer of `ctx`'s `?token=` may see it, and the
+ * Cache-Control its media get: kept for good under a URL naming the file's
+ * current version (`?v=`, as `dumpFileVersion` gives), revalidated under any
+ * other, and never in a shared cache for a private dump. It also keeps the
+ * token out of the Referer of whatever the response links to.
+ *
+ * @throws {APIException} 400 when `dumpId` isn't an id, which names files on
+ * disk, and 404 when the viewer can't see the dump.
+ */
+export async function resolveMediaDump(
+  ctx: Context,
+  dumpId: string,
+): Promise<{ dump: Dump; cacheControl: string }> {
+  if (!UUID_RE.test(dumpId)) throw new APIException(400, "Invalid dump ID");
+  const token = ctx.request.url.searchParams.get("token");
+  const viewerId = token ? await authenticateMedia(token) : null;
+  const dump = getDump(dumpId, viewerId ?? undefined);
+  ctx.response.headers.set("Referrer-Policy", "no-referrer");
+  const scope = dump.isPrivate ? "private" : "public";
+  const current = ctx.request.url.searchParams.get("v") ===
+    dumpFileVersion(dump);
+  return {
+    dump,
+    cacheControl: current
+      ? `${scope}, max-age=31536000, immutable`
+      : `${scope}, no-cache`,
+  };
+}