@arbidocs/blocks 0.4.106 → 0.4.107

package/record/render-overlays.mjs

@@ -0,0 +1,152 @@
+/**
+ * Render the overlays of a demo video (title and chapter cards, lower-thirds, captions, callouts) as
+ * transparent PNGs in the take's brand (`@arbidocs/blocks/record`: `createCinematic({ brand })`).
+ * `render-take.py` writes the list and composes the PNGs over the take with ffmpeg; nothing here
+ * knows about video.
+ *
+ *   node render-overlays.mjs <overlays.json> <out-dir>
+ *
+ * `overlays.json`: {"width": 1920, "height": 1080, "brand": {...}, "items": [{"id", "kind", ...}]}.
+ * Each item becomes `<out-dir>/<id>.png`; `<out-dir>/sizes.json` maps each id to its PNG's {w, h}.
+ * Cards fill the frame; the rest are cropped to their own box (with room for their shadow) and
+ * placed by the renderer.
+ */
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+import { pathToFileURL } from 'node:url'
+import { chromium } from '@playwright/test'
+
+/** Shadow room around a cropped overlay, so its shadow is in the PNG (render-take.py: SHADOW_PAD). */
+export const SHADOW_PAD = 64
+/** Gap between a callout's ring and its tag, and the tag's height (render-take.py: CALLOUT_TAG). */
+export const CALLOUT_TAG = { height: 36, gap: 10 }
+
+const esc = (s = '') =>
+  s.replace(/[&<>"]/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[ch])
+
+/** The brand the take recorded (the stage's skin), with the harness's neutral defaults. */
+function skin(brand = {}) {
+  return {
+    firmLabel: brand.firmLabel ?? '',
+    displayFont: brand.displayFont ?? 'ui-serif, Georgia, serif',
+    sansFont: brand.sansFont ?? 'Inter, ui-sans-serif, system-ui, sans-serif',
+    from: brand.coverFrom ?? '#0b1622',
+    mid: brand.coverMid ?? '#0e1b2c',
+    to: brand.coverTo ?? '#1f6feb',
+    accent: brand.accent ?? '#c9a24b',
+    ink: brand.ink ?? '#0e1b2d',
+    text: brand.coverTitle ?? '#f4f6f8',
+    fontFiles: brand.fontFiles ?? [],
+  }
+}
+
+const css = (s) => `
+${s.fontFiles.map((f) => `@font-face { font-family: "${f.family}"; font-weight: ${f.weight ?? '100 900'}; src: url(${f.url});${f.unicodeRange ? ` unicode-range: ${f.unicodeRange};` : ''} }`).join('\n')}
+:root { --ink: ${s.ink}; --from: ${s.from}; --mid: ${s.mid}; --to: ${s.to}; --text: ${s.text}; --accent: ${s.accent};
+  --display: ${s.displayFont}; --sans: ${s.sansFont}; }
+* { box-sizing: border-box; margin: 0; }
+html, body { background: transparent; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
+#o { position: absolute; left: 0; top: 0; }
+
+.card { width: var(--w); height: var(--h); position: relative; overflow: hidden; color: var(--text);
+  background: radial-gradient(120% 90% at 100% 110%, color-mix(in srgb, var(--to) 55%, transparent) 0%, transparent 55%),
+              linear-gradient(135deg, var(--from) 0%, var(--mid) 60%, var(--from) 100%); }
+.card::before { content: ""; position: absolute; inset: 40px; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 4px; }
+.card .in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 11%; }
+.card.centre .in { align-items: center; text-align: center; }
+.kicker { text-transform: uppercase; letter-spacing: .28em; font-size: 22px; font-weight: 600; color: var(--accent); }
+.card h1 { font-family: var(--display); font-weight: 560; font-size: 92px; line-height: 1.04; letter-spacing: -.02em; margin-top: 30px; max-width: 15ch; }
+.card.centre h1 { font-size: 80px; max-width: 18ch; }
+.card p { margin-top: 30px; font-size: 31px; line-height: 1.48; color: color-mix(in srgb, var(--text) 74%, transparent); max-width: 46ch; }
+.card .mark { position: absolute; left: 11%; bottom: 96px; display: flex; align-items: center; gap: 16px; font-size: 22px; color: color-mix(in srgb, var(--text) 64%, transparent); }
+.card.centre .mark { left: 0; right: 0; justify-content: center; }
+.card .rule { width: 56px; height: 2px; background: var(--accent); }
+
+.pad { padding: ${SHADOW_PAD}px; display: inline-block; }
+.lt { display: flex; gap: 0; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 93%, transparent);
+  box-shadow: 0 14px 40px rgba(0,0,0,.38); }
+.lt .bar { width: 6px; background: var(--accent); }
+.lt .tx { padding: 18px 34px 20px 24px; }
+.lt .kicker { font-size: 15px; }
+.lt .t { font-family: var(--display); font-weight: 560; font-size: 36px; line-height: 1.15; color: var(--text); margin-top: 6px; white-space: nowrap; }
+
+.cap { max-width: 1380px; padding: 18px 36px; border-radius: 16px; text-align: center; color: #fff;
+  font: 500 29px/1.42 var(--sans); letter-spacing: .005em; background: color-mix(in srgb, var(--ink) 91%, transparent);
+  box-shadow: 0 12px 38px rgba(0,0,0,.42); }
+
+.co { position: relative; }
+.co .ring { position: absolute; left: 0; right: 0; border: 3px solid var(--accent); border-radius: 12px;
+  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 24%, transparent), 0 10px 34px rgba(0,0,0,.28); }
+.co .tag { position: absolute; left: 0; height: ${CALLOUT_TAG.height}px; display: flex; align-items: center; padding: 0 14px; border-radius: 8px;
+  background: var(--accent); color: var(--ink); font: 650 18px/1 var(--sans); letter-spacing: .01em; white-space: nowrap;
+  box-shadow: 0 6px 18px rgba(0,0,0,.3); }
+`
+
+function markup(item, w, h, s) {
+  switch (item.kind) {
+    case 'title':
+    case 'chapter':
+    case 'end': {
+      const centre = item.kind === 'title' ? '' : ' centre'
+      const mark = s.firmLabel
+        ? `<div class="mark"><span class="rule"></span><span>${esc(s.firmLabel)}</span></div>`
+        : ''
+      return `<div class="card${centre}" style="--w:${w}px;--h:${h}px"><div class="in">
+        <div class="kicker">${esc(item.kicker)}</div><h1>${esc(item.title)}</h1>${item.subtitle ? `<p>${esc(item.subtitle)}</p>` : ''}</div>${mark}</div>`
+    }
+    case 'lower-third':
+      return `<div class="pad"><div class="lt"><div class="bar"></div><div class="tx"><div class="kicker">${esc(item.kicker)}</div><div class="t">${esc(item.title)}</div></div></div></div>`
+    case 'caption':
+      return `<div class="pad"><div class="cap">${esc(item.text)}</div></div>`
+    case 'callout': {
+      const { height, gap } = CALLOUT_TAG
+      const tag = item.label ? height + gap : 0
+      const ringTop = item.tagBelow ? 0 : tag
+      const tagTop = item.tagBelow ? item.h + gap : 0
+      return `<div class="pad"><div class="co" style="width:${item.w}px;height:${item.h + tag}px">
+        <div class="ring" style="top:${ringTop}px;height:${item.h}px"></div>
+        ${item.label ? `<div class="tag" style="top:${tagTop}px">${esc(item.label)}</div>` : ''}</div></div>`
+    }
+    default:
+      throw new Error(`unknown overlay kind: ${item.kind}`)
+  }
+}
+
+async function main() {
+  const [specFile, outDir] = process.argv.slice(2)
+  if (!specFile || !outDir) throw new Error('usage: render-overlays.mjs <overlays.json> <out-dir>')
+  const spec = JSON.parse(readFileSync(specFile, 'utf8'))
+  const s = skin(spec.brand)
+  mkdirSync(outDir, { recursive: true })
+  const html = path.join(outDir, 'overlay.html')
+  writeFileSync(
+    html,
+    `<!doctype html><html><head><meta charset="utf-8"><style>${css(s)}</style></head><body><div id="o"></div></body></html>`
+  )
+  const browser = await chromium.launch()
+  const sizes = {}
+  try {
+    const page = await browser.newPage({ viewport: { width: spec.width, height: spec.height } })
+    await page.goto(pathToFileURL(html).href)
+    await page.evaluate(() => document.fonts.ready)
+    for (const item of spec.items) {
+      await page
+        .locator('#o')
+        .evaluate(
+          (el, markupHtml) => (el.innerHTML = markupHtml),
+          markup(item, spec.width, spec.height, s)
+        )
+      await page.evaluate(() => document.fonts.ready)
+      const el = page.locator('#o > *')
+      await el.screenshot({ path: path.join(outDir, `${item.id}.png`), omitBackground: true })
+      const box = await el.boundingBox()
+      sizes[item.id] = { w: Math.round(box.width), h: Math.round(box.height) }
+    }
+  } finally {
+    await browser.close()
+  }
+  writeFileSync(path.join(outDir, 'sizes.json'), JSON.stringify(sizes))
+}
+
+await main()