zdymak 0.7.0 → 0.13.0

package/src/still.mjs

@@ -1,62 +1,72 @@
-/**
- * Still-image renderers — one store screenshot per scene, in a chosen style. Aspect-agnostic (cover-fit),
- * so the same renderers serve iPhone, iPad, Mac and Watch dimensions.
- *
- *   premium — the app screen floats on a brand matte (glow + vignette) with a bottom title pill.
- *   bleed   — the app screen fills the frame, with an optional lower-third caption. Best for Watch (raw).
- *
- * (Device-FRAMED stills — iPhone/iPad bezel, Mac window, Watch ring — are the next addition; `framed`
- *  currently falls back to `bleed`.)
- */
-import { createCanvas, loadImage } from '@napi-rs/canvas';
-import { premiumStill } from './premium.mjs';
-import { drawCaption, hexA } from './canvas.mjs';
-
-function coverCanvas(img, W, H) {
-  const c = createCanvas(W, H);
-  const ctx = c.getContext('2d');
-  const ia = img.height / img.width;
-  let dw = W;
-  let dh = W * ia;
-  if (dh < H) {
-    dh = H;
-    dw = H / ia;
-  }
-  ctx.drawImage(img, (W - dw) / 2, (H - dh) / 2, dw, dh);
-  return c;
-}
-
-function bleedStill({ W, H, img, caption, brand }) {
-  const c = createCanvas(W, H);
-  const ctx = c.getContext('2d');
-  ctx.fillStyle = brand.ink;
-  ctx.fillRect(0, 0, W, H);
-  ctx.drawImage(coverCanvas(img, W, H), 0, 0);
-  if (caption.title || caption.sub) {
-    const g = ctx.createLinearGradient(0, H * 0.55, 0, H);
-    g.addColorStop(0, hexA(brand.ink, 0));
-    g.addColorStop(1, hexA(brand.ink, 0.85));
-    ctx.fillStyle = g;
-    ctx.fillRect(0, H * 0.55, W, H * 0.45);
-    drawCaption(ctx, {
-      title: caption.title,
-      subtitle: caption.sub,
-      centerX: W / 2,
-      top: H * 0.78,
-      maxWidth: W * 0.86,
-      titleSize: Math.round(W * 0.066),
-      subSize: Math.round(W * 0.036),
-      titleColor: brand.title,
-      subColor: brand.sub,
-    });
-  }
-  return c;
-}
-
-/** Render one still to a canvas. `style`: premium | framed (device bezel) | bleed. */
-export async function renderStill(style, { W, H, imgPath, caption, brand, theme, frame }) {
-  const img = await loadImage(imgPath);
-  if (style === 'framed') return premiumStill({ W, H, img, caption, brand, theme, frame: frame || 'phone' });
-  if (style === 'premium') return premiumStill({ W, H, img, caption, brand, theme });
-  return bleedStill({ W, H, img, caption, brand });
-}
+/**
+ * Still-image renderers — one store screenshot per scene, in a chosen style. Aspect-agnostic (cover-fit),
+ * so the same renderers serve iPhone, iPad, Mac and Watch dimensions.
+ *
+ *   premium — the app screen floats on a brand matte (glow + vignette) with a bottom title pill.
+ *   bleed   — the app screen fills the frame, with an optional lower-third caption. Best for Watch (raw).
+ *
+ *   framed  — the capture inside a device body (iPhone/iPad/Android/Watch), caption on top.
+ */
+import { createCanvas, loadImage } from '@napi-rs/canvas';
+import { premiumStill } from './premium.mjs';
+import { drawCaption, hexA } from './canvas.mjs';
+import { loadCapture } from './statusbar.mjs';
+
+function coverCanvas(img, W, H, anchor = 'center') {
+  const c = createCanvas(W, H);
+  const ctx = c.getContext('2d');
+  const ia = img.height / img.width;
+  let dw = W;
+  let dh = W * ia;
+  if (dh < H) {
+    dh = H;
+    dw = H / ia;
+  }
+  // A phone capture is taller than any store slot (Play caps at 2:1), so a cover fit must drop some of
+  // it. `anchor: 'top'` drops it from the BOTTOM — keeping the status bar and the screen's headline,
+  // which is what a plain, unframed store shot needs; centring would shave both ends.
+  const dy = anchor === 'top' ? 0 : (H - dh) / 2;
+  ctx.drawImage(img, (W - dw) / 2, dy, dw, dh);
+  return c;
+}
+
+function bleedStill({ W, H, img, caption, brand, theme }) {
+  const c = createCanvas(W, H);
+  const ctx = c.getContext('2d');
+  ctx.fillStyle = brand.ink;
+  ctx.fillRect(0, 0, W, H);
+  ctx.drawImage(coverCanvas(img, W, H, theme?.anchor), 0, 0);
+  if (caption.title || caption.sub) {
+    const g = ctx.createLinearGradient(0, H * 0.55, 0, H);
+    g.addColorStop(0, hexA(brand.ink, 0));
+    g.addColorStop(1, hexA(brand.ink, 0.85));
+    ctx.fillStyle = g;
+    ctx.fillRect(0, H * 0.55, W, H * 0.45);
+    drawCaption(ctx, {
+      title: caption.title,
+      subtitle: caption.sub,
+      centerX: W / 2,
+      top: H * 0.78,
+      maxWidth: W * 0.86,
+      titleSize: Math.round(W * 0.066),
+      subSize: Math.round(W * 0.036),
+      titleColor: brand.title,
+      subColor: brand.sub,
+    });
+  }
+  return c;
+}
+
+/**
+ * Render one still to a canvas. `style`: premium | framed (device bezel) | bleed.
+ *
+ * The status bar is painted onto the CAPTURE before any framing/scaling, so it lands at the capture's own
+ * density and gets scaled down with everything else — drawing it afterwards would size it to the output
+ * frame and look pasted on.
+ */
+export async function renderStill(style, { W, H, imgPath, caption, brand, theme, frame }) {
+  const img = await loadCapture(imgPath, theme, frame);
+  if (style === 'framed') return premiumStill({ W, H, img, caption, brand, theme, frame: frame || 'phone' });
+  if (style === 'premium') return premiumStill({ W, H, img, caption, brand, theme });
+  return bleedStill({ W, H, img, caption, brand, theme });
+}