@mineo71/showtime 0.0.0-stage → 0.2.0

package/src/render/remotion/Overlays.tsx

@@ -0,0 +1,95 @@
+import type { FC } from 'react';
+import { ripplesAt } from '../../timeline/cursor';
+import { clamp, easeOutCubic } from '../../timeline/math';
+import type { Timeline } from '../../timeline/types';
+
+type LayerProps = { timeline: Timeline; srcMs: number };
+
+/** 0 → 1 → 0 over [start, end] with `ms` ramps. */
+const envelope = (t: number, start: number, end: number, ms: number) => clamp(Math.min((t - start) / ms, (end - t) / ms), 0, 1);
+
+export const Spotlights: FC<LayerProps> = ({ timeline, srcMs }) => (
+  <>
+    {timeline.spotlights
+      .filter((s) => srcMs >= s.startMs && srcMs <= s.endMs)
+      .map((s) => (
+        <div
+          key={s.startMs}
+          style={{
+            position: 'absolute',
+            left: s.rect.x,
+            top: s.rect.y,
+            width: s.rect.width,
+            height: s.rect.height,
+            borderRadius: 12,
+            boxShadow: '0 0 0 9999px rgba(2, 6, 23, 0.55)',
+            outline: `3px solid ${timeline.style.accent}`,
+            outlineOffset: 2,
+            opacity: envelope(srcMs, s.startMs, s.endMs, 250),
+          }}
+        />
+      ))}
+  </>
+);
+
+export const Ripples: FC<LayerProps> = ({ timeline, srcMs }) => (
+  <>
+    {ripplesAt(timeline.clicks, srcMs).map((r) => {
+      const radius = 6 + 42 * easeOutCubic(r.progress);
+      return (
+        <div
+          key={r.tMs}
+          style={{
+            position: 'absolute',
+            left: r.x - radius,
+            top: r.y - radius,
+            width: radius * 2,
+            height: radius * 2,
+            borderRadius: '50%',
+            border: `3px solid ${timeline.style.accent}`,
+            opacity: 1 - r.progress,
+          }}
+        />
+      );
+    })}
+  </>
+);
+
+export const Captions: FC<LayerProps> = ({ timeline, srcMs }) => {
+  const active = timeline.captions.filter((c) => srcMs >= c.startMs && srcMs <= c.endMs);
+  const c = active[active.length - 1];
+  if (!c) return null;
+  const o = envelope(srcMs, c.startMs, c.endMs, 220);
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: Math.round(timeline.output.height * 0.075),
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      <div
+        style={{
+          maxWidth: '70%',
+          padding: '18px 34px',
+          borderRadius: 22,
+          background: 'rgba(15, 23, 42, 0.9)',
+          color: '#fff',
+          fontFamily: timeline.style.font,
+          fontSize: 36,
+          fontWeight: 600,
+          lineHeight: 1.25,
+          textAlign: 'center',
+          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.35)',
+          opacity: o,
+          transform: `translateY(${(1 - o) * 12}px)`,
+        }}
+      >
+        {c.text}
+      </div>
+    </div>
+  );
+};

package/src/render/remotion/Root.tsx

@@ -0,0 +1,21 @@
+import { Composition } from 'remotion';
+import { totalFrames } from '../../timeline/frames';
+import { ShowtimeVideo, type ShowtimeVideoProps } from './ShowtimeVideo';
+
+export const RemotionRoot = () => (
+  <Composition
+    id="ShowtimeVideo"
+    component={ShowtimeVideo}
+    width={1920}
+    height={1080}
+    fps={30}
+    durationInFrames={1}
+    defaultProps={{} as ShowtimeVideoProps}
+    calculateMetadata={({ props }) => ({
+      durationInFrames: totalFrames(props.timeline),
+      fps: props.timeline.fps,
+      width: props.timeline.output.width,
+      height: props.timeline.output.height,
+    })}
+  />
+);

package/src/render/remotion/ShowtimeVideo.tsx

@@ -0,0 +1,92 @@
+import type { FC } from 'react';
+import { AbsoluteFill, Easing, interpolate, OffthreadVideo, Sequence, staticFile, useCurrentFrame } from 'remotion';
+import { cameraAt, cameraTransform } from '../../timeline/camera';
+import { introFrames, segmentPlan, sourceMsAtFrame } from '../../timeline/frames';
+import { BROWSER_BAR, windowLayout } from '../../timeline/layout';
+import type { Timeline } from '../../timeline/types';
+import { BrowserBar } from './BrowserBar';
+import { Cursor } from './Cursor';
+import { Intro } from './Intro';
+import { Captions, Ripples, Spotlights } from './Overlays';
+
+export type ShowtimeVideoProps = { timeline: Timeline };
+
+const SHADOW = '0 30px 80px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.25)';
+
+export const ShowtimeVideo: FC<ShowtimeVideoProps> = ({ timeline: t }) => {
+  const frame = useCurrentFrame();
+  const intro = introFrames(t);
+  if (frame < intro) return <Intro timeline={t} frame={frame} />;
+
+  const src = sourceMsAtFrame(t, frame) ?? 0;
+  const win = windowLayout(t.output, t.stage, t.style.padding, t.chrome ? BROWSER_BAR : 0);
+  const cam = cameraAt(t.camera, src);
+  const k = win.width / t.stage.width;
+  // After an intro card the window rises into place instead of cutting in.
+  const enter = intro
+    ? interpolate(frame - intro, [0, 16], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic) })
+    : 1;
+
+  return (
+    <AbsoluteFill style={{ background: t.style.background, fontFamily: t.style.font }}>
+      <div
+        style={{
+          position: 'absolute',
+          left: win.x,
+          top: win.y - win.bar,
+          width: win.width,
+          height: win.height + win.bar,
+          borderRadius: t.style.radius,
+          overflow: 'hidden',
+          background: '#fff',
+          boxShadow: t.style.shadow ? SHADOW : undefined,
+          opacity: enter,
+          transform: `translateY(${(1 - enter) * 40}px) scale(${0.96 + 0.04 * enter})`,
+        }}
+      >
+        {t.chrome ? <BrowserBar width={win.width} height={win.bar} address={t.chrome.address} dark={t.chrome.dark} font={t.style.font} /> : null}
+        <div style={{ position: 'absolute', left: 0, top: win.bar, width: win.width, height: win.height, overflow: 'hidden' }}>
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              width: win.width,
+              height: win.height,
+              transformOrigin: '0 0',
+              transform: cameraTransform(cam, win.width, win.height),
+            }}
+          >
+            {segmentPlan(t).map((p) => (
+              <Sequence key={p.fromFrame} from={p.fromFrame} durationInFrames={p.durationInFrames} layout="none">
+                <OffthreadVideo
+                  src={staticFile(t.video.src)}
+                  trimBefore={p.trimBefore}
+                  playbackRate={p.speed}
+                  muted
+                  style={{ position: 'absolute', left: 0, top: 0, width: win.width, height: win.height }}
+                />
+              </Sequence>
+            ))}
+            <div
+              style={{
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                width: t.stage.width,
+                height: t.stage.height,
+                transformOrigin: '0 0',
+                transform: `scale(${k})`,
+              }}
+            >
+              <Spotlights timeline={t} srcMs={src} />
+              <Ripples timeline={t} srcMs={src} />
+              <Cursor timeline={t} srcMs={src} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <Captions timeline={t} srcMs={src} />
+    </AbsoluteFill>
+  );
+};

package/src/render/remotion/index.ts

@@ -0,0 +1,4 @@
+import { registerRoot } from 'remotion';
+import { RemotionRoot } from './Root';
+
+registerRoot(RemotionRoot);

package/src/render/render.ts

@@ -0,0 +1,46 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { bundle } from '@remotion/bundler';
+import { renderMedia, renderStill, selectComposition } from '@remotion/renderer';
+import type { Shot } from '../timeline/frames';
+import type { Timeline } from '../timeline/types';
+
+const ENTRY = fileURLToPath(new URL('./remotion/index.ts', import.meta.url));
+const COMPOSITION_ID = 'ShowtimeVideo';
+
+/** Bundle the composition with the take directory as public dir, so the raw video is staticFile('raw.mp4'). */
+async function prepare(timeline: Timeline, publicDir: string) {
+  const serveUrl = await bundle({ entryPoint: ENTRY, publicDir, symlinkPublicDir: true });
+  const inputProps = { timeline };
+  const composition = await selectComposition({ serveUrl, id: COMPOSITION_ID, inputProps, logLevel: 'error' });
+  return { serveUrl, inputProps, composition };
+}
+
+export async function renderVideo(
+  timeline: Timeline,
+  publicDir: string,
+  out: string,
+  onProgress?: (progress: number) => void,
+): Promise<void> {
+  const r = await prepare(timeline, publicDir);
+  await renderMedia({
+    ...r,
+    codec: 'h264',
+    crf: 18,
+    outputLocation: out,
+    overwrite: true,
+    logLevel: 'error',
+    onProgress: ({ progress }) => onProgress?.(progress),
+  });
+}
+
+export async function renderStills(timeline: Timeline, publicDir: string, outDir: string, shots: Shot[]): Promise<string[]> {
+  const r = await prepare(timeline, publicDir);
+  const files: string[] = [];
+  for (const shot of shots) {
+    const output = path.join(outDir, `${shot.name}.png`);
+    await renderStill({ ...r, frame: shot.frame, output, imageFormat: 'png', overwrite: true, logLevel: 'error' });
+    files.push(output);
+  }
+  return files;
+}

package/src/runner/browser.ts

@@ -0,0 +1,122 @@
+import { chromium, type Browser, type BrowserContext, type Page } from 'playwright';
+import { ScriptError, type Script } from '../script/schema';
+import type { Pt } from '../timeline/types';
+import { EventLog } from './events';
+import { runStep, STEP_TIMEOUT_MS, type StepContext } from './steps';
+import { sleep } from './time';
+
+export interface NetworkTracker {
+  /** Resolve once no request has been in flight for `quietMs` (counted from now), or after `capMs`. */
+  idle(quietMs: number, capMs: number): Promise<void>;
+}
+
+export interface Session {
+  browser: Browser;
+  context: BrowserContext;
+  page: Page;
+  net: NetworkTracker;
+  close(): Promise<void>;
+}
+
+export function trackNetwork(page: Page): NetworkTracker {
+  let inflight = 0;
+  let lastChange = Date.now();
+  const up = () => {
+    inflight++;
+    lastChange = Date.now();
+  };
+  const down = () => {
+    inflight = Math.max(0, inflight - 1);
+    lastChange = Date.now();
+  };
+  page.on('request', up);
+  page.on('requestfinished', down);
+  page.on('requestfailed', down);
+  return {
+    async idle(quietMs, capMs) {
+      const start = Date.now();
+      while (Date.now() - start < capMs) {
+        if (inflight === 0 && Date.now() - Math.max(lastChange, start) >= quietMs) return;
+        await sleep(50);
+      }
+    },
+  };
+}
+
+/**
+ * Init script that blurs `selectors`. Built as a string on purpose: a function would be serialized
+ * with whatever helpers the transpiler injected (tsx adds `__name(...)`), which are undefined in the page.
+ */
+export function maskScript(selectors: string[]): string {
+  // One rule per selector: an invalid selector only drops its own rule.
+  const css = JSON.stringify(selectors.map((s) => `${s} { filter: blur(10px) !important; }`).join('\n'));
+  return `(() => {
+  const css = ${css};
+  const add = () => {
+    const el = document.createElement('style');
+    el.textContent = css;
+    document.documentElement.appendChild(el);
+  };
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', add);
+  else add();
+})();`;
+}
+
+export async function openSession(script: Script, opts: { headed?: boolean } = {}): Promise<Session> {
+  const { app } = script;
+  const browser = await chromium.launch({
+    headless: !opts.headed,
+    // Both the flag and the context DPR are needed for device-pixel screencast frames.
+    args: [`--force-device-scale-factor=${app.deviceScaleFactor}`, '--hide-scrollbars'],
+  });
+  try {
+    const context = await browser.newContext({
+      viewport: app.viewport,
+      deviceScaleFactor: app.deviceScaleFactor,
+      storageState: app.storageState,
+      colorScheme: app.colorScheme,
+      locale: app.locale,
+      timezoneId: app.timezoneId,
+    });
+    if (app.mask.length) await context.addInitScript({ content: maskScript(app.mask) });
+    const page = await context.newPage();
+    page.setDefaultTimeout(STEP_TIMEOUT_MS);
+    const invalid = await page.evaluate(
+      (selectors) =>
+        selectors.map((s) => {
+          try {
+            document.querySelector(s);
+            return false;
+          } catch {
+            return true;
+          }
+        }),
+      app.mask,
+    );
+    const bad = invalid.indexOf(true);
+    if (bad >= 0) {
+      throw new ScriptError(
+        `app.mask[${bad}] "${app.mask[bad]}" is not a valid CSS selector — masks take CSS selectors (.email, #card), not Playwright ones like text= or role=`,
+      );
+    }
+    return { browser, context, page, net: trackNetwork(page), close: () => browser.close() };
+  } catch (err) {
+    await browser.close();
+    throw err;
+  }
+}
+
+/** Open app.url, run setup steps (fast, unlogged), park the mouse at the centre. */
+export async function prepare(session: Session, script: Script): Promise<Pt> {
+  const { page } = session;
+  try {
+    await page.goto(script.app.url, { waitUntil: 'load', timeout: 30_000 });
+  } catch (err) {
+    throw new Error(`Cannot open app.url ${script.app.url}: ${(err as Error).message.split('\n')[0]}`);
+  }
+  const centre = { x: Math.round(script.app.viewport.width / 2), y: Math.round(script.app.viewport.height / 2) };
+  const ctx: StepContext = { page, mode: 'check', log: new EventLog(), net: session.net, cursor: centre };
+  for (const [index, step] of script.setup.entries()) await runStep(ctx, step, { sceneId: 'setup', index });
+  await page.mouse.move(centre.x, centre.y);
+  return centre;
+}

package/src/runner/capture.ts

@@ -0,0 +1,53 @@
+import { writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import type { Page } from 'playwright';
+
+export interface Frame {
+  file: string;
+  /** ms since t0 */
+  tMs: number;
+}
+
+export interface Capture {
+  t0: number;
+  stop(): Promise<Frame[]>;
+}
+
+/** CDP screencast → numbered JPEGs. Chrome only sends frames when something repaints. */
+export async function startCapture(page: Page, dir: string, size: { width: number; height: number }): Promise<Capture> {
+  const cdp = await page.context().newCDPSession(page);
+  const frames: Frame[] = [];
+  const writes: Promise<void>[] = [];
+  let n = 0;
+  let stopped: Promise<Frame[]> | null = null;
+  const t0 = Date.now();
+
+  cdp.on('Page.screencastFrame', ({ data, metadata, sessionId }) => {
+    cdp.send('Page.screencastFrameAck', { sessionId }).catch(() => undefined);
+    const tMs = metadata.timestamp ? metadata.timestamp * 1000 - t0 : Date.now() - t0;
+    const file = path.join(dir, `${String(++n).padStart(6, '0')}.jpg`);
+    frames.push({ file, tMs: Math.max(0, tMs) });
+    writes.push(writeFile(file, Buffer.from(data, 'base64')));
+  });
+
+  await cdp.send('Page.startScreencast', {
+    format: 'jpeg',
+    quality: 92,
+    maxWidth: size.width,
+    maxHeight: size.height,
+    everyNthFrame: 1,
+  });
+
+  return {
+    t0,
+    stop() {
+      stopped ??= (async () => {
+        await cdp.send('Page.stopScreencast').catch(() => undefined);
+        await Promise.all(writes);
+        await cdp.detach().catch(() => undefined);
+        return frames.sort((a, b) => a.tMs - b.tMs);
+      })();
+      return stopped;
+    },
+  };
+}

package/src/runner/check.ts

@@ -0,0 +1,73 @@
+import { mkdir, rm } from 'node:fs/promises';
+import path from 'node:path';
+import { workPaths } from '../paths';
+import type { LoadedScript } from '../script/load';
+import { openSession, prepare } from './browser';
+import { EventLog } from './events';
+import { describeStep, runStep, StepError, type StepContext } from './steps';
+
+export interface RunOptions {
+  headed?: boolean;
+  log?: (line: string) => void;
+}
+
+export interface CheckStep {
+  sceneId: string;
+  index: number;
+  action: string;
+  ok: boolean;
+  screenshot?: string;
+  error?: string;
+}
+
+export interface CheckFailure {
+  sceneId: string;
+  index: number;
+  error: string;
+  screenshot: string;
+  aria: string;
+}
+
+export interface CheckReport {
+  ok: boolean;
+  steps: CheckStep[];
+  failure: CheckFailure | null;
+}
+
+const ARIA_LIMIT = 8000;
+
+export async function check(loaded: LoadedScript, opts: RunOptions = {}): Promise<CheckReport> {
+  const { script } = loaded;
+  const paths = workPaths(loaded);
+  await rm(paths.check, { recursive: true, force: true });
+  await mkdir(paths.check, { recursive: true });
+
+  const report: CheckReport = { ok: true, steps: [], failure: null };
+  const session = await openSession(script, opts);
+  try {
+    const cursor = await prepare(session, script);
+    const ctx: StepContext = { page: session.page, mode: 'check', log: new EventLog(), net: session.net, cursor };
+    let n = 0;
+    for (const scene of script.scenes) {
+      for (const [index, step] of scene.steps.entries()) {
+        await runStep(ctx, step, { sceneId: scene.id, index });
+        const screenshot = path.join(paths.check, `${String(++n).padStart(2, '0')}-${scene.id}-${index + 1}-${step.do}.png`);
+        await session.page.screenshot({ path: screenshot, scale: 'css' });
+        report.steps.push({ sceneId: scene.id, index, action: describeStep(step), ok: true, screenshot });
+        opts.log?.(`✓ ${scene.id} #${index + 1} ${describeStep(step)}`);
+      }
+    }
+  } catch (err) {
+    if (!(err instanceof StepError)) throw err;
+    const screenshot = path.join(paths.check, 'failure.png');
+    await session.page.screenshot({ path: screenshot, scale: 'css' }).catch(() => undefined);
+    const aria = await session.page.locator('body').ariaSnapshot({ timeout: 5000 }).catch(() => '');
+    report.ok = false;
+    report.failure = { sceneId: err.where.sceneId, index: err.where.index, error: err.message, screenshot, aria: aria.slice(0, ARIA_LIMIT) };
+    report.steps.push({ sceneId: err.where.sceneId, index: err.where.index, action: describeStep(err.step), ok: false, error: err.message });
+    opts.log?.(`✗ ${err.message}`);
+  } finally {
+    await session.close();
+  }
+  return report;
+}

package/src/runner/encode.ts

@@ -0,0 +1,49 @@
+import { readFile } from 'node:fs/promises';
+import { runWithInput } from '../ffmpeg';
+import type { Frame } from './capture';
+
+/**
+ * Resample the variable-rate screencast to constant fps: output frame k shows the latest frame
+ * captured at or before k/fps (the first frame also covers the time before it arrived).
+ * Yields exactly round(duration × fps) frames, so static stretches keep wall-clock time.
+ */
+export function sampleFrames(frames: Frame[], durationMs: number, fps: number): string[] {
+  const n = Math.max(1, Math.round((durationMs * fps) / 1000));
+  const out: string[] = [];
+  let j = 0;
+  for (let k = 0; k < n; k++) {
+    const t = (k * 1000) / fps;
+    while (j + 1 < frames.length && frames[j + 1].tMs <= t) j++;
+    out.push(frames[j].file);
+  }
+  return out;
+}
+
+export async function encodeFrames(frames: Frame[], out: string, opts: { fps: number; durationMs: number }): Promise<void> {
+  if (!frames.length) throw new Error('No frames were captured (did the page render anything?)');
+  const files = sampleFrames(frames, opts.durationMs, opts.fps);
+  const fps = String(opts.fps);
+  await runWithInput(
+    'ffmpeg',
+    [
+      '-y', '-loglevel', 'error',
+      '-f', 'image2pipe', '-framerate', fps, '-c:v', 'mjpeg', '-i', '-',
+      '-vf', 'scale=trunc(iw/2)*2:trunc(ih/2)*2,format=yuv420p',
+      '-r', fps,
+      '-c:v', 'libx264', '-preset', 'medium', '-crf', '14',
+      '-movflags', '+faststart',
+      out,
+    ],
+    async (write) => {
+      let lastFile = '';
+      let lastData = Buffer.alloc(0);
+      for (const file of files) {
+        if (file !== lastFile) {
+          lastData = await readFile(file);
+          lastFile = file;
+        }
+        await write(lastData);
+      }
+    },
+  );
+}

package/src/runner/events.ts

@@ -0,0 +1,15 @@
+import type { Click, Interval, Move, StepEvent } from '../timeline/types';
+
+/** Collects what happened during a run, timed relative to capture start. */
+export class EventLog {
+  readonly steps: StepEvent[] = [];
+  readonly moves: Move[] = [];
+  readonly clicks: Click[] = [];
+  readonly idle: Interval[] = [];
+
+  constructor(private readonly t0: number = Date.now()) {}
+
+  now(): number {
+    return Date.now() - this.t0;
+  }
+}

package/src/runner/record.ts

@@ -0,0 +1,96 @@
+import { mkdir, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { assertFfmpeg, probeVideo } from '../ffmpeg';
+import { workPaths } from '../paths';
+import { actionHash } from '../script/hash';
+import type { LoadedScript } from '../script/load';
+import type { TakeEvents } from '../timeline/types';
+import { openSession, prepare, type Session } from './browser';
+import { startCapture, type Frame } from './capture';
+import type { RunOptions } from './check';
+import { encodeFrames } from './encode';
+import { EventLog } from './events';
+import { describeStep, runStep, StepError, type StepContext } from './steps';
+import { sleep } from './time';
+
+export const ESTABLISH_MS = 800;
+export const TAIL_MS = 800;
+export const TAKE_FPS = 30;
+
+export interface RecordOptions extends RunOptions {
+  keepFrames?: boolean;
+}
+
+interface Shot {
+  frames: Frame[];
+  durationMs: number;
+  log: EventLog;
+}
+
+async function shoot(session: Session, loaded: LoadedScript, framesDir: string, opts: RecordOptions): Promise<Shot> {
+  const { script } = loaded;
+  const { viewport, deviceScaleFactor } = script.app;
+  const cursor = await prepare(session, script);
+  const capture = await startCapture(session.page, framesDir, {
+    width: viewport.width * deviceScaleFactor,
+    height: viewport.height * deviceScaleFactor,
+  });
+  const log = new EventLog(capture.t0);
+  const ctx: StepContext = { page: session.page, mode: 'record', log, net: session.net, cursor };
+  try {
+    await sleep(ESTABLISH_MS);
+    for (const scene of script.scenes) {
+      for (const [index, step] of scene.steps.entries()) {
+        opts.log?.(`● ${scene.id} #${index + 1} ${describeStep(step)}`);
+        await runStep(ctx, step, { sceneId: scene.id, index });
+      }
+    }
+    await sleep(TAIL_MS);
+  } catch (err) {
+    await capture.stop();
+    throw err;
+  }
+  const durationMs = log.now();
+  const frames = await capture.stop();
+  return { frames, durationMs, log };
+}
+
+export async function record(loaded: LoadedScript, opts: RecordOptions = {}): Promise<TakeEvents> {
+  const { script } = loaded;
+  await assertFfmpeg();
+  const paths = workPaths(loaded);
+  await rm(paths.take, { recursive: true, force: true });
+  await mkdir(paths.rawFrames, { recursive: true });
+
+  const session = await openSession(script, opts);
+  let shot: Shot;
+  try {
+    shot = await shoot(session, loaded, paths.rawFrames, opts);
+  } catch (err) {
+    if (err instanceof StepError) {
+      await session.page.screenshot({ path: path.join(paths.take, 'failure.png'), scale: 'css' }).catch(() => undefined);
+      throw new Error(`${err.message}\nRecording aborted. Run \`showtime check ${loaded.scriptPath}\` to debug.`);
+    }
+    throw err;
+  } finally {
+    await session.close();
+  }
+
+  opts.log?.('Encoding raw.mp4…');
+  await encodeFrames(shot.frames, paths.raw, { fps: TAKE_FPS, durationMs: shot.durationMs });
+  const probe = await probeVideo(paths.raw);
+  const events: TakeEvents = {
+    version: 1,
+    actionHash: actionHash(script),
+    viewport: script.app.viewport,
+    deviceScaleFactor: script.app.deviceScaleFactor,
+    video: { file: 'raw.mp4', width: probe.width, height: probe.height, fps: TAKE_FPS, durationMs: shot.durationMs },
+    steps: shot.log.steps,
+    moves: shot.log.moves,
+    clicks: shot.log.clicks,
+    idle: shot.log.idle,
+  };
+  await writeFile(paths.events, JSON.stringify(events, null, 2));
+  if (!opts.keepFrames) await rm(paths.rawFrames, { recursive: true, force: true });
+  return events;
+}