@freqhole/playlistz 0.0.1

package/e2e/contexts.ts

@@ -0,0 +1,238 @@
+// e2e test matrix infrastructure.
+//
+// exports SERVE_CONTEXTS, VIEWPORTS, withContext, and describeMatrix so
+// spec files can run the same scenarios across multiple serving modes and
+// viewport sizes without duplicating setup code.
+//
+// note: resetAppState() relies on navigating to "/" and clearing indexeddb
+// on the vite dev server origin. it does NOT work in zip-http context because
+// that browser context has a different origin and no dev-server idb to clear.
+
+import { test, type Page, type BrowserContext } from "@playwright/test";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import * as http from "node:http";
+import * as os from "node:os";
+import { execSync } from "node:child_process";
+import JSZip from "jszip";
+
+// --- serve context descriptors ---
+
+export type ServeContextName = "vite" | "zip-http";
+
+export interface ServeContext {
+  name: ServeContextName;
+  /** base url used to navigate the page, set during withContext setup */
+  baseURL: string;
+}
+
+export const SERVE_CONTEXTS: ServeContext[] = [
+  { name: "vite", baseURL: "http://localhost:5917" },
+  { name: "zip-http", baseURL: "" }, // baseURL filled in dynamically during setup
+];
+
+// --- viewport configs ---
+
+export interface ViewportConfig {
+  name: string;
+  width: number;
+  height: number;
+}
+
+export const VIEWPORTS: ViewportConfig[] = [
+  { name: "desktop", width: 1400, height: 900 },
+  { name: "tablet",  width: 768,  height: 1024 },
+  { name: "mobile",  width: 390,  height: 844 },
+];
+
+// --- static server (for zip-http context) ---
+
+const MIME: Record<string, string> = {
+  ".html": "text/html",
+  ".js":   "application/javascript",
+  ".css":  "text/css",
+  ".json": "application/json",
+  ".mp3":  "audio/mpeg",
+  ".wav":  "audio/wav",
+  ".flac": "audio/flac",
+  ".ogg":  "audio/ogg",
+  ".jpg":  "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".png":  "image/png",
+  ".map":  "application/json",
+};
+
+export function startStaticServer(dir: string, port: number): Promise<http.Server> {
+  const server = http.createServer((req, res) => {
+    const rawPath = req.url?.split("?")[0] ?? "/";
+    const urlPath = decodeURIComponent(rawPath);
+    const filePath = path.join(dir, urlPath === "/" ? "index.html" : urlPath);
+
+    const absDir = path.resolve(dir);
+    const absFile = path.resolve(filePath);
+    if (!absFile.startsWith(absDir + path.sep) && absFile !== absDir) {
+      res.writeHead(403); res.end("forbidden"); return;
+    }
+    if (!fs.existsSync(absFile) || fs.statSync(absFile).isDirectory()) {
+      res.writeHead(404); res.end("not found"); return;
+    }
+
+    const ext = path.extname(absFile).toLowerCase();
+    const mime = MIME[ext] ?? "application/octet-stream";
+    const total = fs.statSync(absFile).size;
+    const range = req.headers["range"];
+
+    if (range) {
+      const [, rangeStr] = range.split("=");
+      const [s, e] = (rangeStr ?? "").split("-");
+      const start = parseInt(s ?? "0", 10);
+      const end = e ? parseInt(e, 10) : total - 1;
+      res.writeHead(206, {
+        "Content-Range": `bytes ${start}-${end}/${total}`,
+        "Accept-Ranges": "bytes",
+        "Content-Length": end - start + 1,
+        "Content-Type": mime,
+      });
+      fs.createReadStream(absFile, { start, end }).pipe(res);
+    } else {
+      res.writeHead(200, {
+        "Content-Length": total,
+        "Content-Type": mime,
+        "Accept-Ranges": "bytes",
+      });
+      fs.createReadStream(absFile).pipe(res);
+    }
+  });
+
+  return new Promise((resolve, reject) => {
+    server.on("error", reject);
+    server.listen(port, () => resolve(server));
+  });
+}
+
+// extract a jszip buffer to a directory. returns the output dir.
+export async function extractZip(zipBuffer: Buffer, outDir: string): Promise<string> {
+  const zip = await JSZip.loadAsync(zipBuffer);
+  const writes: Promise<void>[] = [];
+  zip.forEach((relativePath, file) => {
+    if (file.dir) return;
+    const dest = path.join(outDir, relativePath);
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    writes.push(file.async("nodebuffer").then((buf) => fs.writeFileSync(dest, buf)));
+  });
+  await Promise.all(writes);
+  return outDir;
+}
+
+// find the first subdirectory containing index.html, or fall back to outDir.
+export function findRootDir(outDir: string): string {
+  for (const entry of fs.readdirSync(outDir)) {
+    const sub = path.join(outDir, entry);
+    if (fs.statSync(sub).isDirectory() && fs.existsSync(path.join(sub, "index.html"))) {
+      return sub;
+    }
+  }
+  return outDir;
+}
+
+const REPO_ROOT = path.join(path.dirname(new URL(import.meta.url).pathname), "..");
+const BUNDLE_PATH = path.join(REPO_ROOT, "dist", "freqhole-playlistz.js");
+
+export function ensureBundleBuilt(): void {
+  if (fs.existsSync(BUNDLE_PATH)) return;
+  console.log("[contexts] dist/freqhole-playlistz.js not found - running build:standalone...");
+  execSync("npm run build:standalone", { cwd: REPO_ROOT, stdio: "inherit" });
+  if (!fs.existsSync(BUNDLE_PATH)) {
+    throw new Error("build:standalone did not produce dist/freqhole-playlistz.js");
+  }
+}
+
+// port range 5930-5939 (avoids collision with vite 5917, standalone 5920/5921)
+const ZIP_HTTP_BASE_PORT = 5930;
+
+// --- withContext helper ---
+
+// callback signature used inside withContext
+export type ContextTestFn = (page: Page, ctx: ServeContext) => Promise<void>;
+
+// wraps a test body with the appropriate setup for the given serve context.
+//
+// vite: calls fn(page, ctx) directly - the page is already on the vite origin.
+// zip-http: downloads a zip from the vite dev server (requires a playlist with
+//   songs to already exist on the page), extracts it, starts a static server,
+//   opens a fresh browser context at that origin, calls fn(standalonePage, ctx),
+//   then tears down. the port offset is used to avoid collisions when multiple
+//   zip-http contexts run in the same process.
+export async function withContext(
+  ctx: ServeContext,
+  page: Page,
+  fn: ContextTestFn,
+  portOffset = 0
+): Promise<void> {
+  if (ctx.name === "vite") {
+    await fn(page, ctx);
+    return;
+  }
+
+  if (ctx.name === "zip-http") {
+    const port = ZIP_HTTP_BASE_PORT + portOffset;
+
+    // download zip from the current vite dev page (caller must have a playlist ready)
+    const downloadPromise = page.waitForEvent("download", { timeout: 30000 });
+    await page.getByTestId("btn-download-zip").click();
+    const download = await downloadPromise;
+    const zipPath = await download.path();
+    if (!zipPath) throw new Error("zip download path is null");
+
+    const zipBuf = fs.readFileSync(zipPath);
+    const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "playlistz-ctx-"));
+    await extractZip(zipBuf, tmpDir);
+    const serveDir = findRootDir(tmpDir);
+
+    const server = await startStaticServer(serveDir, port);
+    const origin = `http://localhost:${port}`;
+    const resolvedCtx: ServeContext = { name: "zip-http", baseURL: origin };
+
+    let browserCtx: BrowserContext | undefined;
+    try {
+      browserCtx = await page.context().browser()!.newContext();
+      const standalonePage = await browserCtx.newPage();
+      await standalonePage.goto(`${origin}/`);
+      await standalonePage.waitForSelector('[data-testid="app-ready"]', { timeout: 15000 });
+      await fn(standalonePage, resolvedCtx);
+    } finally {
+      await browserCtx?.close();
+      await new Promise<void>((res) => server.close(() => res()));
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+  }
+}
+
+// --- describeMatrix ---
+
+// suite body callback receives the serve context (available at describe-definition
+// time) and the viewport config. page is accessed via the normal playwright
+// { page } fixture inside each test() block, then passed to withContext().
+//
+// usage:
+//   describeMatrix("my feature", (ctx, vp) => {
+//     test("does something", async ({ page }) => {
+//       await withContext(ctx, page, async (ctxPage) => {
+//         await expect(ctxPage.getByTestId("app-ready")).toBeVisible();
+//       });
+//     });
+//   });
+export type MatrixSuiteFn = (ctx: ServeContext, vp: ViewportConfig) => void;
+
+// generates a test.describe block for each SERVE_CONTEXT x VIEWPORT combination,
+// applying the viewport via test.use() before the suite body runs.
+export function describeMatrix(label: string, suiteBody: MatrixSuiteFn): void {
+  for (const ctx of SERVE_CONTEXTS) {
+    for (const vp of VIEWPORTS) {
+      test.describe(`${label} [${ctx.name} / ${vp.name}]`, () => {
+        test.use({ viewport: { width: vp.width, height: vp.height } });
+        suiteBody({ ...ctx }, vp);
+      });
+    }
+  }
+}

package/e2e/edit-panel.spec.ts

@@ -0,0 +1,87 @@
+// e2e: edit panel open/close behaviour.
+//
+// covers the "panel only opens every other time" bug: with songs present,
+// toggling the edit button repeatedly must show the panel on every open.
+
+import { test, expect } from "@playwright/test";
+import { resetAppState, createPlaylistViaUI, addSongs } from "./helpers.js";
+
+test.beforeEach(async ({ page }) => {
+  await resetAppState(page);
+});
+
+// the playlist edit panel is identified by its delete-confirm + cover upload area;
+// the simplest stable marker is the close button rendered inside the panel
+const panel = (page: import("@playwright/test").Page) =>
+  page.locator("input[type='file']");
+
+test("edit panel opens on every toggle (empty playlist)", async ({ page }) => {
+  await createPlaylistViaUI(page);
+
+  for (let i = 0; i < 4; i++) {
+    await page.getByTestId("btn-edit-playlist").click();
+    await expect(panel(page).first()).toBeAttached({ timeout: 3000 });
+
+    await page.getByTestId("btn-edit-playlist").click();
+    await expect(panel(page)).toHaveCount(0, { timeout: 3000 });
+    await expect(page.getByTestId("btn-edit-playlist")).toBeVisible();
+  }
+});
+
+test("edit panel opens on every toggle (playlist with songs)", async ({
+  page,
+}) => {
+  await createPlaylistViaUI(page);
+  await addSongs(page, 5);
+
+  for (let i = 0; i < 4; i++) {
+    await page.getByTestId("btn-edit-playlist").click();
+    await expect(panel(page).first()).toBeAttached({ timeout: 3000 });
+
+    await page.getByTestId("btn-edit-playlist").click();
+    await expect(panel(page)).toHaveCount(0, { timeout: 3000 });
+    // rows fly back in
+    await expect(page.getByText("song-00")).toBeVisible({ timeout: 3000 });
+  }
+});
+
+test("rapid double-toggle does not wedge the panel", async ({ page }) => {
+  // open then immediately close before the row exit animation finishes,
+  // then open again - the panel must still appear
+  await createPlaylistViaUI(page);
+  await addSongs(page, 5);
+
+  await page.getByTestId("btn-edit-playlist").click();
+  // close mid-animation
+  await page.getByTestId("btn-edit-playlist").click();
+  // re-open
+  await page.getByTestId("btn-edit-playlist").click();
+
+  await expect(panel(page).first()).toBeAttached({ timeout: 3000 });
+});
+
+test("escape closes the edit panel", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await page.getByTestId("btn-edit-playlist").click();
+  await expect(panel(page).first()).toBeAttached({ timeout: 3000 });
+
+  await page.keyboard.press("Escape");
+  await expect(panel(page)).toHaveCount(0, { timeout: 3000 });
+});
+
+test("song edit panel opens from a row and shows the title", async ({
+  page,
+}) => {
+  await createPlaylistViaUI(page);
+  await addSongs(page, 3);
+
+  // rows expose an edit button on hover
+  const row = page.getByText("song-00");
+  await row.hover();
+  await page.locator("button[title='edit song']").first().click();
+
+  // the song edit panel shows the title input prefilled
+  await expect(
+    page.locator("input[value='song-00'], input[placeholder*='title']").first()
+  ).toBeVisible();
+});

package/e2e/fixtures/generate.mjs

@@ -0,0 +1,257 @@
+#!/usr/bin/env node
+// generates committed test fixture files for e2e tests.
+//
+// requires: ffmpeg and imagemagick (magick).
+//   brew install ffmpeg imagemagick
+//
+// audio:
+//   tone-440hz-2s.wav            A4 sine 2s, no tags      (basic add/play)
+//   tone-880hz-5s.wav            A5 sine 5s, no tags      (seek / position)
+//   tone-220hz-10s.wav           A3 sine 10s, no tags     (prefetch window)
+//   chord-stack-3s.wav           A maj chord 3s, no tags  (multi-partial wav)
+//   tone-stereo-3s.wav           stereo A4 3s             (stereo channel)
+//   tagged-c5-3s.{mp3,m4a,ogg}  C5 tone + full tags      (tag parsing x3 formats)
+//   tagged-a3-4s.{mp3,m4a,ogg}  A3 tone + full tags      (second artist)
+//   tagged-f4-6s.{mp3,m4a,ogg}  F4 tone + full tags      (third artist/album)
+//   bare-glitch-1s.{mp3,m4a,ogg} 1s, no tags             (very short, tagless)
+//   noisy-binaural-8s.mp3        stereo low drone 8s      (stereo mp3)
+//   long-drone-90s.mp3           sub-bass 90s             (prefetch budget)
+//
+// images:
+//   cover-red.png       128x128 flat red
+//   cover-blue.png      128x128 flat blue
+//   cover-checkers.png  64x64 checkerboard
+//   cover-noise.png     256x256 deterministic rgb noise
+//   cover-gradient.jpg  400x400 gradient
+//   cover-portrait.jpg  300x500 portrait (non-square)
+//   cover-thumb.jpg     48x48 tiny thumbnail
+//   cover-plasma.webp   256x256 plasma
+//   cover-wide.webp     600x200 landscape banner
+//   cover-anim.gif      80x80 animated 4-frame colour cycle
+//   cover-mono.gif      120x120 grayscale radial (non-animated)
+//
+// run once and commit:
+//   node e2e/fixtures/generate.mjs
+
+import { writeFileSync, statSync, existsSync } from "node:fs";
+import { execFileSync } from "node:child_process";
+import { deflateSync, crc32 } from "node:zlib";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { tmpdir } from "node:os";
+import { randomBytes } from "node:crypto";
+
+const OUT = dirname(fileURLToPath(import.meta.url));
+
+// --- helpers ---
+
+function run(cmd, args) {
+    try {
+        execFileSync(cmd, args, { stdio: ["ignore", "ignore", "pipe"] });
+        return true;
+    } catch (e) {
+        const msg = e.stderr?.toString().slice(-300) ?? e.message;
+        console.error(`  [error] ${cmd} ${args.slice(0, 5).join(" ")} ...\n    ${msg.trim()}`);
+        return false;
+    }
+}
+
+function tmp(ext) {
+    return join(tmpdir(), `fix-gen-${randomBytes(4).toString("hex")}${ext}`);
+}
+
+function emit(name) {
+    const p = join(OUT, name);
+    const kb = existsSync(p) ? (statSync(p).size / 1024).toFixed(1) : "?";
+    console.log(`  ${name}  (${kb} kB)`);
+}
+
+function write(name, data) {
+    writeFileSync(join(OUT, name), data);
+    emit(name);
+}
+
+// --- wav (pure Node) ---
+
+function makeWav(durationSec, freqHz = 440, channels = 1) {
+    const sampleRate = 22050;
+    const numSamples = Math.floor(sampleRate * durationSec);
+    const dataSize = numSamples * 2 * channels;
+    const buf = Buffer.alloc(44 + dataSize);
+    buf.write("RIFF", 0, "ascii");
+    buf.writeUInt32LE(36 + dataSize, 4);
+    buf.write("WAVE", 8, "ascii");
+    buf.write("fmt ", 12, "ascii");
+    buf.writeUInt32LE(16, 16);
+    buf.writeUInt16LE(1, 20);              // PCM
+    buf.writeUInt16LE(channels, 22);
+    buf.writeUInt32LE(sampleRate, 24);
+    buf.writeUInt32LE(sampleRate * 2 * channels, 28);
+    buf.writeUInt16LE(2 * channels, 32);
+    buf.writeUInt16LE(16, 34);
+    buf.write("data", 36, "ascii");
+    buf.writeUInt32LE(dataSize, 40);
+    for (let i = 0; i < numSamples; i++) {
+        for (let ch = 0; ch < channels; ch++) {
+            const f = freqHz * (1 + ch * 0.007); // slight detune per channel
+            const v = Math.sin((2 * Math.PI * f * i) / sampleRate);
+            buf.writeInt16LE(Math.floor(v * 0x4fff), 44 + (i * channels + ch) * 2);
+        }
+    }
+    return buf;
+}
+
+// additive chord: partials = [[freq, amplitude], ...]
+function makeChordWav(durationSec, partials) {
+    const sampleRate = 22050;
+    const numSamples = Math.floor(sampleRate * durationSec);
+    const dataSize = numSamples * 2;
+    const buf = Buffer.alloc(44 + dataSize);
+    buf.write("RIFF", 0, "ascii");
+    buf.writeUInt32LE(36 + dataSize, 4);
+    buf.write("WAVE", 8, "ascii");
+    buf.write("fmt ", 12, "ascii");
+    buf.writeUInt32LE(16, 16);
+    buf.writeUInt16LE(1, 20);
+    buf.writeUInt16LE(1, 22);
+    buf.writeUInt32LE(sampleRate, 24);
+    buf.writeUInt32LE(sampleRate * 2, 28);
+    buf.writeUInt16LE(2, 32);
+    buf.writeUInt16LE(16, 34);
+    buf.write("data", 36, "ascii");
+    buf.writeUInt32LE(dataSize, 40);
+    const totalAmp = partials.reduce((s, [, a]) => s + a, 0);
+    for (let i = 0; i < numSamples; i++) {
+        let v = 0;
+        for (const [f, a] of partials) {
+            v += (a / totalAmp) * Math.sin((2 * Math.PI * f * i) / sampleRate);
+        }
+        buf.writeInt16LE(Math.floor(v * 0x4fff), 44 + i * 2);
+    }
+    return buf;
+}
+
+// --- png (pure Node, no external deps) ---
+
+function pngChunk(type, data) {
+    const typeBuf = Buffer.from(type, "ascii");
+    const lenBuf = Buffer.alloc(4);
+    lenBuf.writeUInt32BE(data.length);
+    const crcVal = crc32(data, crc32(typeBuf));
+    const crcBuf = Buffer.alloc(4);
+    crcBuf.writeUInt32BE(crcVal >>> 0);
+    return Buffer.concat([lenBuf, typeBuf, data, crcBuf]);
+}
+
+const PNG_SIG = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+
+// pixelFn(x, y) -> [r, g, b]
+function makePng(width, height, pixelFn) {
+    const ihdr = Buffer.alloc(13);
+    ihdr.writeUInt32BE(width, 0);
+    ihdr.writeUInt32BE(height, 4);
+    ihdr[8] = 8; // bit depth
+    ihdr[9] = 2; // truecolor RGB
+    const scanlineLen = 1 + width * 3;
+    const raw = Buffer.alloc(height * scanlineLen);
+    for (let y = 0; y < height; y++) {
+        raw[y * scanlineLen] = 0; // filter type: None
+        for (let x = 0; x < width; x++) {
+            const [r, g, b] = pixelFn(x, y);
+            const off = y * scanlineLen + 1 + x * 3;
+            raw[off] = r; raw[off + 1] = g; raw[off + 2] = b;
+        }
+    }
+    return Buffer.concat([
+        PNG_SIG,
+        pngChunk("IHDR", ihdr),
+        pngChunk("IDAT", deflateSync(raw)),
+        pngChunk("IEND", Buffer.alloc(0)),
+    ]);
+}
+
+// --- ffmpeg helpers ---
+
+function metaFlags(title, artist, album, track) {
+    return [
+        "-metadata", `title=${title}`,
+        "-metadata", `artist=${artist}`,
+        "-metadata", `album=${album}`,
+        "-metadata", `track=${track}`,
+        "-metadata", "date=2024",
+        "-metadata", "genre=Electronic",
+        "-metadata", "comment=e2e fixture",
+    ];
+}
+
+// transcode a wav Buffer to mp3 + m4a + ogg (opus) with optional metadata
+function encodeFormats(wavBuf, stem, extraFlags = []) {
+    const wavPath = tmp(".wav");
+    writeFileSync(wavPath, wavBuf);
+    if (run("ffmpeg", ["-y", "-i", wavPath, "-ar", "44100", "-ac", "1", "-q:a", "5", ...extraFlags, join(OUT, `${stem}.mp3`)])) emit(`${stem}.mp3`);
+    if (run("ffmpeg", ["-y", "-i", wavPath, "-ar", "44100", "-ac", "1", "-c:a", "aac", "-b:a", "96k", ...extraFlags, join(OUT, `${stem}.m4a`)])) emit(`${stem}.m4a`);
+    // libvorbis not available in this ffmpeg build; use libopus in ogg container
+    if (run("ffmpeg", ["-y", "-i", wavPath, "-ar", "48000", "-ac", "1", "-c:a", "libopus", "-b:a", "64k", ...extraFlags, join(OUT, `${stem}.ogg`)])) emit(`${stem}.ogg`);
+}
+
+// ===================== generate =====================
+
+console.log("\naudio (wav, pure node):");
+write("tone-440hz-2s.wav", makeWav(2, 440));
+write("tone-880hz-5s.wav", makeWav(5, 880));
+write("tone-220hz-10s.wav", makeWav(10, 220));
+write("chord-stack-3s.wav", makeChordWav(3, [[440, 1], [659.25, 0.8], [554.37, 0.7]])); // A major: A+E+C#
+write("tone-stereo-3s.wav", makeWav(3, 440, 2));
+
+console.log("\naudio (encoded, ffmpeg):");
+
+encodeFormats(makeWav(3, 523.25), "tagged-c5-3s", metaFlags("C5 Test Tone", "Fixture Bot", "Test Album", "1"));
+encodeFormats(makeWav(4, 220), "tagged-a3-4s", metaFlags("A3 Low Tone", "Fixture Bot", "Test Album", "2"));
+encodeFormats(makeWav(6, 349.23), "tagged-f4-6s", metaFlags("F4 Mid Tone", "Another Artist", "Second Album", "1"));
+encodeFormats(makeWav(1, 600), "bare-glitch-1s"); // no tags, edge case
+
+{
+    const p = tmp(".wav");
+    writeFileSync(p, makeWav(8, 80, 2));
+    if (run("ffmpeg", ["-y", "-i", p, "-ar", "44100", "-ac", "2", "-q:a", "6",
+        "-metadata", "title=Binaural Noise", "-metadata", "artist=Fixture Bot",
+        join(OUT, "noisy-binaural-8s.mp3")])) emit("noisy-binaural-8s.mp3");
+}
+
+{
+    const p = tmp(".wav");
+    writeFileSync(p, makeWav(90, 55));
+    if (run("ffmpeg", ["-y", "-i", p, "-ar", "22050", "-ac", "1", "-q:a", "9",
+        "-metadata", "title=Long Drone", "-metadata", "artist=Fixture Bot",
+        join(OUT, "long-drone-90s.mp3")])) emit("long-drone-90s.mp3");
+}
+
+console.log("\nimages (png, pure node):");
+write("cover-red.png", makePng(128, 128, () => [200, 40, 40]));
+write("cover-blue.png", makePng(128, 128, () => [40, 80, 200]));
+write("cover-checkers.png", makePng(64, 64, (x, y) => (Math.floor(x / 8) + Math.floor(y / 8)) % 2 === 0 ? [220, 220, 220] : [30, 30, 30]));
+write("cover-noise.png", makePng(256, 256, (x, y) => {
+    const h = (n) => ((n * 1664525 + 1013904223) >>> 0) % 256;
+    return [h(x * 256 + y), h(x * 256 + y + 65536), h(x * 256 + y + 131072)];
+}));
+
+console.log("\nimages (jpg/webp/gif, imagemagick):");
+
+run("magick", ["-size", "400x400", "gradient:#c83232-#3264c8", "-quality", "85", join(OUT, "cover-gradient.jpg")]) && emit("cover-gradient.jpg");
+run("magick", ["-size", "300x500", "gradient:#20c820-#c820c8", "-quality", "85", join(OUT, "cover-portrait.jpg")]) && emit("cover-portrait.jpg");
+run("magick", ["-size", "48x48", "xc:#ff8800", "-quality", "75", join(OUT, "cover-thumb.jpg")]) && emit("cover-thumb.jpg");
+run("magick", ["-size", "256x256", "plasma:", "-quality", "80", join(OUT, "cover-plasma.webp")]) && emit("cover-plasma.webp");
+run("magick", ["-size", "600x200", "gradient:#1a1a2e-#e94560", "-quality", "80", join(OUT, "cover-wide.webp")]) && emit("cover-wide.webp");
+
+run("magick", [
+    "-delay", "25", "-loop", "0",
+    "(", "-size", "80x80", "xc:#ff4444", ")",
+    "(", "-size", "80x80", "xc:#44ff44", ")",
+    "(", "-size", "80x80", "xc:#4444ff", ")",
+    "(", "-size", "80x80", "xc:#ffff44", ")",
+    join(OUT, "cover-anim.gif"),
+]) && emit("cover-anim.gif");
+
+run("magick", ["-size", "120x120", "radial-gradient:white-black", join(OUT, "cover-mono.gif")]) && emit("cover-mono.gif");
+
+console.log(`\ndone - output: ${OUT}`);

package/e2e/fixtures/user-provided/README.md

@@ -0,0 +1 @@
+put your own audio files or images in this dir and e2e will try to use them!