rvlib-shipkit 2.1.1 → 2.3.0

package/src/trailer/titles.ts

@@ -0,0 +1,379 @@
+// the trailer's drawn frames: one transparent PNG per title, cut to what it draws, and the card's ground, in the repo's
+// look (look.ts). Seven styles: logo, big, caption, corner, line, and a short's words (short, progress) in the look's
+// short face. Cached on what they draw, so a title edit draws one PNG
+import { createCanvas, GlobalFonts, loadImage, type Image, type SKRSContext2D } from '@napi-rs/canvas'
+import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import sharp from 'sharp'
+import type { Title, TitleStyle } from './grammar.ts'
+import { alpha, darker, shortLook, type TrailerLook } from './look.ts'
+
+/** bump when a style's drawing changes: every cached title draws again */
+const DRAWING = 1
+
+/** where a title stands: as `place` says; a short's caption in the frame's middle, a progress bar at the top; else
+ *  the bottom */
+export type TitlePlace = 'top' | 'middle' | 'bottom'
+export const placeOf = (ti: Pick<Title, 'place' | 'style'>): TitlePlace => ti.place ?? (ti.style === 'short' ? 'middle' : ti.style === 'progress' ? 'top' : 'bottom')
+
+/** a short's words centred on these shares of the height, inside the phones' safe zone: under the lockup (`top`), the
+ *  frame's middle, where the end card's lines stand (`bottom`) */
+export const SHORT_Y: Record<TitlePlace, number> = { top: 0.31, middle: 0.5, bottom: 0.645 }
+
+/** a title's PNG cut to what it draws, and where it sits on the frame: the stitch blends that box, never the whole frame */
+export interface TitleImage {
+    file: string
+    x: number
+    y: number
+    w: number
+    h: number
+}
+
+const registered = new Set<string>()
+/** the look's font files registered once under their families */
+export function registerFace(look: TrailerLook, root: string): void {
+    for (const f of [look.font, look.short.font]) {
+        if (!f.file || registered.has(f.file)) continue
+        const abs = join(root, f.file)
+        if (!existsSync(abs)) throw new Error(`the brand's trailer font ${f.file} is not in the repo`)
+        GlobalFonts.registerFromPath(abs, f.family)
+        registered.add(f.file)
+    }
+}
+
+export const face = (g: SKRSContext2D, look: TrailerLook, px: number, weight = look.font.weight): void => {
+    const fam = look.font.family.includes(',') ? look.font.family : `"${look.font.family}"`
+    g.font = `${weight} ${Math.round(px)}px ${fam}`
+}
+
+/** the text cut into lines no wider than `max`; `\n` breaks a line */
+function wrap(g: SKRSContext2D, text: string, max: number): string[] {
+    const out: string[] = []
+    for (const para of text.split('\\n')) {
+        let line = ''
+        for (const w of para.split(/\s+/).filter(Boolean)) {
+            const next = line ? `${line} ${w}` : w
+            if (line && g.measureText(next).width > max) {
+                out.push(line)
+                line = w
+            } else line = next
+        }
+        out.push(line)
+    }
+    return out
+}
+
+/** a rounded plate with a soft drop under it */
+function plate(g: SKRSContext2D, x: number, y: number, w: number, h: number, r: number, k: number, fill: string, line: string, edge: string): void {
+    g.save()
+    g.shadowColor = alpha(edge, 0.4)
+    g.shadowBlur = 18 * k
+    g.shadowOffsetY = 6 * k
+    g.fillStyle = fill
+    g.beginPath()
+    g.roundRect(x, y, w, h, r)
+    g.fill()
+    g.restore()
+    g.lineWidth = 3 * k
+    g.strokeStyle = line
+    g.beginPath()
+    g.roundRect(x, y, w, h, r)
+    g.stroke()
+}
+
+/** words in the light on a thick edge outline, centred on `x`, its top at `y` */
+function outlined(g: SKRSContext2D, look: TrailerLook, text: string, x: number, y: number, size: number, k: number, fill: string): void {
+    face(g, look, size)
+    g.textAlign = 'center'
+    g.textBaseline = 'top'
+    g.lineJoin = 'round'
+    g.lineWidth = Math.round(size * 0.16)
+    g.strokeStyle = look.edge
+    g.shadowColor = alpha(look.edge, 0.5)
+    g.shadowBlur = 18 * k
+    g.shadowOffsetY = 4 * k
+    g.strokeText(text, x, y)
+    g.shadowColor = 'transparent'
+    g.fillStyle = fill
+    g.fillText(text, x, y)
+}
+
+/** a line of words, `*word*` in the accent, the whole line centred on `top` */
+function starred(g: SKRSContext2D, look: TrailerLook, line: string, W: number, top: number, size: number, k: number): void {
+    const words = line.split(' ').map((x) => ({ text: x.replaceAll('*', ''), key: x.includes('*') }))
+    face(g, look, size)
+    const space = g.measureText(' ').width
+    let x = (W - (words.reduce((n, w) => n + g.measureText(w.text).width, 0) + space * (words.length - 1))) / 2
+    for (const w of words) {
+        const ww = g.measureText(w.text).width
+        outlined(g, look, w.text, x + ww / 2, top, size, k, w.key ? look.accent : look.light)
+        x += ww + space
+    }
+}
+
+/** a short's caption: the words large, centred on `y` (a share of the height), a `\n` breaking the line, over a soft
+ *  band of shade; sized by the frame's width */
+function drawShort(g: SKRSContext2D, look: TrailerLook, text: string, y: number, W: number, H: number): void {
+    const k = W / 1080
+    const size = Math.round(100 * k)
+    face(g, look, size)
+    const lines = text.split('\\n').flatMap((part) => wrap(g, part, W - 100 * k))
+    const lead = Math.round(size * 1.14)
+    const top = y * H - (lines.length * lead) / 2
+    const band = g.createLinearGradient(0, top - 140 * k, 0, top + lines.length * lead + 140 * k)
+    band.addColorStop(0, alpha(look.edge, 0))
+    band.addColorStop(0.5, alpha(look.edge, 0.42))
+    band.addColorStop(1, alpha(look.edge, 0))
+    g.fillStyle = band
+    g.fillRect(0, top - 140 * k, W, lines.length * lead + 280 * k)
+    lines.forEach((line, i) => starred(g, look, line, W, top + i * lead, size, k))
+}
+
+/** a progress step: its name centred on `y` (a share of the height), a row of notches under it, `i` of `n` filled in
+ *  the accent, the newest lit; measured at 1080 px wide */
+function drawProgress(g: SKRSContext2D, look: TrailerLook, name: string, i: number, n: number, y: number, W: number, H: number): void {
+    const k = W / 1080
+    const size = Math.round(84 * k)
+    const lead = Math.round(size * 1.14)
+    const [width, gap, notch, under] = [700 * k, 14 * k, 28 * k, 24 * k]
+    const top = y * H - (lead + under + notch) / 2
+    const band = g.createLinearGradient(0, top - 110 * k, 0, top + lead + under + notch + 110 * k)
+    band.addColorStop(0, alpha(look.edge, 0))
+    band.addColorStop(0.5, alpha(look.edge, 0.36))
+    band.addColorStop(1, alpha(look.edge, 0))
+    g.fillStyle = band
+    g.fillRect(0, top - 110 * k, W, lead + under + notch + 220 * k)
+    starred(g, look, name, W, top, size, k)
+    const nw = (width - gap * (n - 1)) / n
+    const bar = top + lead + under
+    for (let j = 0; j < n; j++) {
+        const nx = (W - width) / 2 + j * (nw + gap)
+        g.save()
+        if (j === i - 1) {
+            g.shadowColor = alpha(look.accent, 0.9)
+            g.shadowBlur = 22 * k
+        }
+        g.beginPath()
+        g.roundRect(nx, bar, nw, notch, notch / 2)
+        g.fillStyle = j < i ? look.accent : alpha(look.light, 0.32)
+        g.fill()
+        g.restore()
+        g.lineWidth = 5 * k
+        g.strokeStyle = look.edge
+        g.beginPath()
+        g.roundRect(nx, bar, nw, notch, notch / 2)
+        g.stroke()
+    }
+}
+
+/** one title over a transparent frame. A title's `\n` breaks its line; a logo's second line is its subtitle */
+export function drawTitle(text: string, style: TitleStyle, [W, H]: readonly [number, number], place: TitlePlace, look: TrailerLook, logo: Image | null, step?: Title['step']): Buffer {
+    const top = place === 'top'
+    const c = createCanvas(W, H)
+    const g = c.getContext('2d')
+    const k = Math.min(H, W) / 1080
+    g.textAlign = 'center'
+    g.textBaseline = 'middle'
+    const [first = '', ...more] = text.split('\\n')
+    if (style === 'short' || style === 'progress') {
+        const sl = shortLook(look)
+        if (style === 'short') drawShort(g, sl, text, SHORT_Y[place], W, H)
+        else drawProgress(g, sl, text, step?.i ?? 1, step?.n ?? 1, SHORT_Y[place], W, H)
+    } else if (style === 'logo') {
+        // the logo image over the word, the word in the accent over the edge and its soft drop, the subtitle spaced under it
+        const glow = g.createRadialGradient(W / 2, H * 0.48, 0, W / 2, H * 0.48, Math.max(W, H) * 0.45)
+        glow.addColorStop(0, alpha(look.edge, 0.45))
+        glow.addColorStop(1, alpha(look.edge, 0))
+        g.fillStyle = glow
+        g.fillRect(0, 0, W, H)
+        const markH = logo ? Math.min(H * 0.3, W * 0.3) : 0
+        face(g, look, 170 * k, 900)
+        const kl = Math.min(1, (W * 0.78) / (g.measureText(first).width + 16 * k))
+        const px = 170 * k * kl
+        const subPx = 34 * k * Math.max(kl, 0.7)
+        const block = markH + (markH ? px * 0.25 : 0) + (first ? px : 0) + (more.length ? subPx * 2 : 0)
+        let y = H * 0.48 - block / 2
+        if (logo) {
+            const w = (logo.width / logo.height) * markH
+            g.save()
+            g.shadowColor = alpha(look.edge, 0.6)
+            g.shadowBlur = 30 * k
+            g.drawImage(logo, W / 2 - w / 2, y, w, markH)
+            g.restore()
+            y += markH + px * 0.25
+        }
+        if (first) {
+            const cy = y + px / 2
+            face(g, look, px, 900)
+            g.save()
+            g.shadowColor = alpha(look.edge, 0.6)
+            g.shadowBlur = 30 * k
+            g.shadowOffsetY = 12 * k
+            g.lineJoin = 'round'
+            g.lineWidth = 16 * k * kl
+            g.strokeStyle = look.edge
+            g.strokeText(first, W / 2, cy + 3 * k)
+            g.restore()
+            const grad = g.createLinearGradient(0, cy - px / 2, 0, cy + px / 2)
+            grad.addColorStop(0.1, look.light)
+            grad.addColorStop(0.55, look.accent)
+            grad.addColorStop(1, darker(look.accent, 0.2))
+            g.fillStyle = grad
+            g.fillText(first, W / 2, cy)
+            y += px
+        }
+        if (more.length) {
+            face(g, look, subPx, 800)
+            ;(g as unknown as { letterSpacing: string }).letterSpacing = `${Math.round(subPx * 0.42)}px`
+            g.shadowColor = alpha(look.edge, 0.9)
+            g.shadowBlur = subPx * 0.42
+            g.fillStyle = look.light
+            g.fillText(more.join(' ').toUpperCase(), W / 2, y + subPx)
+        }
+    } else if (style === 'big') {
+        // a strong display line in the upper third: light words in a thick edge outline, an accent under-glow
+        const px = 112 * k
+        face(g, look, px, 900)
+        const lines = wrap(g, [first, ...more].join(' '), W * 0.82)
+        lines.forEach((l, i) => {
+            const y = H * 0.26 + (i - (lines.length - 1) / 2) * px * 1.12
+            g.save()
+            g.shadowColor = alpha(look.edge, 0.55)
+            g.shadowBlur = 26 * k
+            g.shadowOffsetY = 10 * k
+            g.lineJoin = 'round'
+            g.lineWidth = 22 * k
+            g.strokeStyle = look.edge
+            g.strokeText(l, W / 2, y)
+            g.restore()
+            g.lineWidth = 8 * k
+            g.strokeStyle = look.accent
+            g.strokeText(l, W / 2, y)
+            g.fillStyle = look.light
+            g.fillText(l, W / 2, y)
+        })
+    } else if (style === 'line') {
+        // a tagline: light words centred low on a soft dark band, no plate, the frame stays the picture
+        const px = 64 * k
+        face(g, look, px)
+        const lines = more.length > 0 ? [first, ...more] : wrap(g, first, W * 0.7)
+        const lh = px * 1.3
+        const cy = top ? H * 0.2 : H * 0.8
+        const span = lh * lines.length + 80 * k
+        const band = g.createLinearGradient(0, cy - span, 0, cy + span)
+        band.addColorStop(0, alpha(look.edge, 0))
+        band.addColorStop(0.5, alpha(look.edge, 0.42))
+        band.addColorStop(1, alpha(look.edge, 0))
+        g.fillStyle = band
+        g.fillRect(0, cy - span, W, 2 * span)
+        lines.forEach((l, i) => {
+            const y = cy + (i - (lines.length - 1) / 2) * lh
+            // `*word*` is a key word in the accent, the rest light
+            const parts = l.split('*').map((t, n) => ({ text: t, key: n % 2 === 1 }))
+            const plain = parts.map((p) => p.text).join('')
+            let x = W / 2 - g.measureText(plain).width / 2
+            g.textAlign = 'left'
+            g.save()
+            g.shadowColor = alpha(look.edge, 0.85)
+            g.shadowBlur = 18 * k
+            g.shadowOffsetY = 4 * k
+            g.lineJoin = 'round'
+            g.lineWidth = 9 * k
+            g.strokeStyle = alpha(look.edge, 0.82)
+            g.strokeText(plain, x, y)
+            g.restore()
+            for (const p of parts) {
+                g.fillStyle = p.key ? look.accent : look.light
+                g.fillText(p.text, x, y)
+                x += g.measureText(p.text).width
+            }
+            g.textAlign = 'center'
+        })
+    } else if (style === 'caption') {
+        // the plate: its fill, its outline, its ink, an accent dot leading it
+        const px = 46 * k
+        face(g, look, px, 900)
+        const lines = wrap(g, [first, ...more].join(' '), W * 0.66)
+        const lh = px * 1.28
+        const dot = 14 * k
+        const bw = Math.max(...lines.map((l) => g.measureText(l).width)) + 96 * k + dot * 2
+        const bh = lines.length * lh + 34 * k
+        const cy = top ? H * 0.12 : H * 0.83
+        plate(g, W / 2 - bw / 2, cy - bh / 2, bw, bh, Math.min(bh / 2, 30 * k), k, look.plate.fill, look.plate.line, look.edge)
+        g.fillStyle = look.accent
+        g.beginPath()
+        g.arc(W / 2 - bw / 2 + 34 * k, cy, dot / 2 + 2 * k, 0, Math.PI * 2)
+        g.fill()
+        g.fillStyle = look.plate.ink
+        lines.forEach((l, i) => g.fillText(l, W / 2 + dot, cy + (i - (lines.length - 1) / 2) * lh + 2 * k))
+    } else {
+        // corner: a word chip, bottom left (top left when placed at the top)
+        const px = 54 * k
+        face(g, look, px, 900)
+        const t = [first, ...more].join(' ')
+        const w = g.measureText(t).width + 72 * k
+        const h = px * 1.5
+        const x = 72 * k
+        const y = top ? 80 * k : H - 80 * k - h
+        plate(g, x, y, w, h, h / 2, k, look.chip.fill, darker(look.chip.fill, 0.15), look.edge)
+        g.fillStyle = look.chip.ink
+        g.textAlign = 'left'
+        g.fillText(t, x + 36 * k, y + h / 2 + 2 * k)
+    }
+    return Buffer.from(c.toBuffer('image/png'))
+}
+
+/** the card's ground: the look's ground, darker at the edges */
+export function drawCard([W, H]: readonly [number, number], look: TrailerLook): Buffer {
+    const c = createCanvas(W, H)
+    const g = c.getContext('2d')
+    const grad = g.createRadialGradient(W / 2, H * 0.45, 0, W / 2, H * 0.45, Math.hypot(W, H) * 0.6)
+    grad.addColorStop(0, look.ground[0])
+    grad.addColorStop(1, look.ground[1])
+    g.fillStyle = grad
+    g.fillRect(0, 0, W, H)
+    return Buffer.from(c.toBuffer('image/png'))
+}
+
+const key = (parts: unknown): string => new Bun.CryptoHasher('sha1').update(JSON.stringify([DRAWING, parts])).digest('hex').slice(0, 16)
+
+/** what the look reads from disk, as it stands: a new font or logo file draws every title again */
+export const lookFiles = (look: TrailerLook, root: string): unknown[] =>
+    [look.font.file, look.logo, look.short.font.file].map((f) => {
+        if (!f) return null
+        const abs = join(root, f)
+        return existsSync(abs) ? [f, statSync(abs).size, statSync(abs).mtimeMs] : [f, 'missing']
+    })
+
+/** a title's PNG file, named by what it draws */
+export const titleFile = (dir: string, root: string, text: string, style: TitleStyle, size: readonly [number, number], place: TitlePlace, look: TrailerLook, step?: Title['step']): string =>
+    join(dir, `title-${key([text, style, size, place, look, lookFiles(look, root), ...(step ? [step.i, step.n] : [])])}.png`)
+
+/** the PNG of a title, drawn once per text, style, frame, place, look and step; its box on the frame in `<file>.json` beside it */
+export async function titlePng(dir: string, root: string, text: string, style: TitleStyle, size: readonly [number, number], place: TitlePlace, look: TrailerLook, step?: Title['step']): Promise<TitleImage> {
+    const file = titleFile(dir, root, text, style, size, place, look, step)
+    const where = `${file}.json`
+    if (!existsSync(file) || !existsSync(where)) {
+        mkdirSync(dir, { recursive: true })
+        registerFace(look, root)
+        const logo = style === 'logo' && look.logo && existsSync(join(root, look.logo)) ? await loadImage(join(root, look.logo)) : null
+        const { data, info } = await sharp(drawTitle(text, style, size, place, look, logo, step)).trim({ threshold: 0 }).png().toBuffer({ resolveWithObject: true })
+        writeFileSync(file, data)
+        writeFileSync(where, JSON.stringify({ x: -(info.trimOffsetLeft ?? 0), y: -(info.trimOffsetTop ?? 0), w: info.width, h: info.height }))
+    }
+    const { x, y, w, h } = JSON.parse(readFileSync(where, 'utf8')) as TitleImage
+    return { file, x, y, w, h }
+}
+
+/** the card's ground's PNG file for a frame and a look */
+export const cardFile = (dir: string, size: readonly [number, number], look: TrailerLook): string => join(dir, `card-${key(['card', size, look.ground])}.png`)
+
+/** the PNG of the card's ground for a frame and a look */
+export function cardPng(dir: string, size: readonly [number, number], look: TrailerLook): string {
+    const file = cardFile(dir, size, look)
+    if (!existsSync(file)) {
+        mkdirSync(dir, { recursive: true })
+        writeFileSync(file, drawCard(size, look))
+    }
+    return file
+}

package/src/trailer/url.ts

@@ -0,0 +1,108 @@
+// a `film url` take: a route resolved against the repo's dev url (the url of its one global process, or of the one
+// `base <id>` names), the page filmed by the house shot service (shot/client.ts), its process started through pm when
+// it does not answer. Pure first, the io after
+import type { Film } from './grammar.ts'
+
+export type UrlFilm = Extract<Film, { kind: 'url' }>
+
+/** a global process of the repo that serves a url */
+export interface DevProcess {
+    id: string
+    url: string
+}
+
+/** the page a route films: an http url as written, else the route under the base's own path */
+export function urlOf(route: string, base: string): string {
+    return /^https?:\/\//.test(route) ? route : `${base.replace(/\/+$/, '')}${route}`
+}
+
+/** the process a cut's routes resolve against: the one `base <id>` names, else the repo's only one; or why none */
+export function pickBase(ps: readonly DevProcess[], base: string | null): DevProcess | { error: string } {
+    const listed = ps.map((p) => `${p.id} (${p.url})`).join(', ')
+    if (base !== null) return ps.find((p) => p.id === base) ?? { error: `base ${base}: no global process of this repo has that id and a url${ps.length ? `; it has ${listed}` : ''}` }
+    if (ps.length === 1) return ps[0]!
+    if (ps.length === 0) return { error: 'film url: no global process of this repo declares a url (a <name>.shipkit.ts with globalProcess({ id, cmd, url })); or film a full http url' }
+    return { error: `film url: this repo serves several urls, name the one its routes start from with a header line base <id>: ${listed}` }
+}
+
+/** a portrait cut films its page at a phone's css width */
+const PHONE_CSS_W = 430
+/** a landscape cut films its page no wider than this, in css pixels */
+const DESKTOP_CSS_W = 1920
+
+/** the css viewport and the pixel ratio that fill the cut's frame: a viewport given keeps its css size, the ratio
+ *  making up the frame's width (1 to 4); none: the frame itself, a portrait frame at a phone's width */
+export function viewportOf(size: readonly [number, number], viewport?: readonly [number, number]): { viewport: { width: number; height: number }; dpr: number } {
+    const [W, H] = size
+    if (viewport) return { viewport: { width: viewport[0], height: viewport[1] }, dpr: +Math.min(4, Math.max(1, W / viewport[0])).toFixed(4) }
+    const dpr = +Math.min(4, Math.max(1, W / (H > W ? PHONE_CSS_W : DESKTOP_CSS_W))).toFixed(4)
+    return { viewport: { width: Math.round(W / dpr), height: Math.round(H / dpr) }, dpr }
+}
+
+/** every global process of the repo that declares a url, by the walk every unit file takes */
+export async function devProcesses(root: string): Promise<DevProcess[]> {
+    const { importFresh, repoUnitFiles } = await import('../core/discover-checks.ts')
+    const out: DevProcess[] = []
+    for (const f of repoUnitFiles(root)) {
+        const d = (await importFresh(f)) as { kind?: unknown; id?: unknown; url?: unknown } | undefined
+        if (d?.kind === 'globalProcess' && typeof d.id === 'string' && typeof d.url === 'string') out.push({ id: d.id, url: d.url })
+    }
+    return out
+}
+
+/** any http answer, a 404 included, means the server is up */
+const answers = (url: string): Promise<boolean> =>
+    fetch(url, { signal: AbortSignal.timeout(2_000) }).then(
+        () => true,
+        () => false,
+    )
+
+async function resolveBase(root: string, base: string | null, say: (l: string) => void): Promise<string> {
+    const pick = pickBase(await devProcesses(root), base)
+    if ('error' in pick) throw new Error(pick.error)
+    if (await answers(pick.url)) return pick.url
+    const { pmUp, pmUrl } = await import('../home/home-paths.ts')
+    if (process.env['CI'] == null && process.env['SHIPKIT_NO_HOME'] == null && (await pmUp())) {
+        say(`  starting ${pick.id}: ${pick.url} does not answer (sk gp start ${pick.id})`)
+        const { pmSwitchDeps, switchProcess } = await import('../cli/cmd_GlobalProcesses.ts')
+        if ((await switchProcess(pick.id, 'start', pmSwitchDeps(say, pmUrl()), 120_000)) !== 0) throw new Error(`${pick.id} did not start through pm: sk gp shows where it stands`)
+        return pick.url
+    }
+    throw new Error(`${pick.url} does not answer and no pm runs here to start it: sk gp start ${pick.id}`)
+}
+
+/** the base of each repo's routes, resolved once per process: two takes filming at once start the process once */
+const bases = new Map<string, Promise<string>>()
+export function baseUrl(root: string, base: string | null, say: (l: string) => void): Promise<string> {
+    const k = `${root}\0${base ?? ''}`
+    let p = bases.get(k)
+    if (!p) {
+        p = resolveBase(root, base, say)
+        p.catch(() => bases.delete(k))
+        bases.set(k, p)
+    }
+    return p
+}
+
+export interface UrlTake {
+    root: string
+    base: string | null
+    size: readonly [number, number]
+    fps: number
+    /** null: a still */
+    seconds: number | null
+    /** absolute: a .png for a still, a .mp4 for a clip */
+    out: string
+    say: (l: string) => void
+}
+
+/** film the page of a `film url` line at `out`; the note says what was filmed and how */
+export async function filmUrl(f: UrlFilm, o: UrlTake): Promise<string> {
+    const url = /^https?:\/\//.test(f.route) ? f.route : urlOf(f.route, await baseUrl(o.root, o.base, o.say))
+    const { clipUrl, shotUrl } = await import('../shot/client.ts')
+    const { viewport, dpr } = viewportOf(o.size, f.viewport)
+    const wait = f.wait === undefined ? {} : { waitMs: Math.round(f.wait * 1000) }
+    const log = (l: string): void => o.say(`  ${l}`)
+    const r = o.seconds === null ? await shotUrl({ url, out: o.out, viewport, dpr, ...wait }, log) : await clipUrl({ url, out: o.out, viewport, dpr, seconds: o.seconds, fps: o.fps, ...wait }, log)
+    return `${url} at ${viewport.width}x${viewport.height}@${dpr}, ${r.via}, ${r.ms} ms${r.note ? `: ${r.note}` : ''}`
+}