@hajimism/dek 0.1.0

package/src/theme/default.css

@@ -0,0 +1,175 @@
+.slide {
+  --fg: #f5f5f5;
+  --bg: #111;
+  --accent: #f5f5f5;
+  --muted: #888;
+  --font-title: sans-serif;
+  --font-body: sans-serif;
+  --size-title: 2.5rem;
+  --size-body: 1.5rem;
+  --size-caption: 1rem;
+  --gap: 2rem;
+  --pad: 64px 80px;
+  --radius: 4px;
+  --step-transition: 0.3s ease;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: var(--pad);
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font-body);
+}
+
+.slide .slide-title {
+  margin: 0 0 calc(var(--gap) * 0.75);
+  font-family: var(--font-title);
+  font-size: var(--size-title);
+  line-height: 1.2;
+}
+
+/* @layout title
+<section class="slide" data-layout="title">
+  <h2 class="slide-title">The talk in one line</h2>
+</section>
+*/
+.slide[data-layout="title"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+/* @layout default
+<section class="slide" data-layout="default">
+  <h2 class="slide-title">A heading</h2>
+  <ul>
+    <li data-step="1">One point per beat</li>
+    <li data-step="2">The next point</li>
+  </ul>
+</section>
+*/
+.slide[data-layout="default"] {
+  display: flex;
+  flex-direction: column;
+}
+
+/* @layout two-col
+<section class="slide" data-layout="two-col">
+  <div class="col">
+    <h2 class="slide-title">Left: the claim</h2>
+  </div>
+  <div class="col">
+    <p class="node">Right: the evidence</p>
+  </div>
+</section>
+*/
+.slide[data-layout="two-col"] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--gap);
+  align-items: center;
+}
+
+/* @layout full-bleed
+<section class="slide" data-layout="full-bleed">
+  <img class="figure" src="assets/image.jpg" alt="">
+</section>
+*/
+.slide[data-layout="full-bleed"] {
+  padding: 0;
+}
+
+/* @layout quote
+<section class="slide" data-layout="quote">
+  <p>One sentence worth remembering.</p>
+</section>
+*/
+.slide[data-layout="quote"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(var(--size-body) * 4 / 3);
+  font-style: italic;
+}
+
+.slide ul {
+  margin: 0;
+  padding-left: 1.25em;
+  font-size: var(--size-body);
+  line-height: 1.6;
+}
+
+.slide .col {
+  min-width: 0;
+}
+
+.slide .node {
+  margin: calc(var(--gap) * 0.2) 0;
+  padding: calc(var(--gap) * 0.3) calc(var(--gap) * 0.4);
+  border: thin solid var(--muted);
+  border-radius: var(--radius);
+}
+
+.slide .node-parent {
+  border-color: var(--accent);
+}
+
+.slide .figure {
+  display: block;
+  max-width: 100%;
+}
+
+.slide .figure-small {
+  max-width: 40%;
+}
+
+.slide.is-current [data-step] {
+  opacity: 0;
+  transform: translateY(0.5em);
+  transition: var(--step-transition);
+}
+
+.slide.is-current [data-step].is-shown {
+  opacity: 1;
+  transform: none;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+::view-transition-old(slide) {
+  animation: fade-out var(--step-transition);
+}
+
+::view-transition-new(slide) {
+  animation: fade-in var(--step-transition);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slide.is-current [data-step] {
+    transition: none;
+    animation: none;
+  }
+
+  ::view-transition-old(slide),
+  ::view-transition-new(slide) {
+    animation: none;
+  }
+}

package/src/video/bake.ts

@@ -0,0 +1,152 @@
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { DekError } from "../core/error.ts";
+import { cacheDir, type DistOptions, distDir, distFile } from "../core/path.ts";
+import {
+  asResolvedDeck,
+  type Project,
+  type ProjectDeck,
+  type ResolvedDeck,
+  requireSection,
+} from "../core/resolve.ts";
+import { dropLinks, outputDir, outputPath, replaceFile } from "../core/safe-fs.ts";
+import { logicalSize } from "../core/size.ts";
+import { sliceTimeline, slideTimeRange, type Timeline } from "../core/timeline.ts";
+import { videoDocument } from "../core/video-document.ts";
+import {
+  hasVoice,
+  loadCachedTimeline,
+  loadVoiceSettings,
+  resolveTimelineAudio,
+  voiceCacheFile,
+  voiceMissingError,
+} from "../core/voice.ts";
+import { playerScript } from "../runtime/player.ts";
+import { sliceWav } from "../voice/wav.ts";
+import { muxVideo } from "./mux.ts";
+import { defaultVideoRunner, type VideoRunner } from "./recorder.ts";
+import { writeVideoSidecars } from "./sidecar.ts";
+
+export type BakeVideoResult = {
+  out: string;
+  vtt?: string;
+  chapters?: string;
+  credits?: string;
+};
+
+export type BakeVideoOptions = DistOptions & {
+  slug?: string;
+  fps?: number;
+  runner?: VideoRunner;
+};
+
+export async function bakeVideo(dir: string, options?: BakeVideoOptions): Promise<BakeVideoResult>;
+export async function bakeVideo(
+  source: ResolvedDeck,
+  options?: BakeVideoOptions,
+): Promise<BakeVideoResult>;
+export async function bakeVideo(
+  input: string | ResolvedDeck,
+  options: BakeVideoOptions = {},
+): Promise<BakeVideoResult> {
+  const { project, deck } = asResolvedDeck(input);
+  return bakeProjectDeck(project, deck, options);
+}
+
+async function bakeProjectDeck(
+  project: Project,
+  deck: ProjectDeck,
+  options: BakeVideoOptions = {},
+): Promise<BakeVideoResult> {
+  if (!hasVoice(deck.dir)) {
+    throw voiceMissingError(deck.dir);
+  }
+  const timelinePath = voiceCacheFile(deck.dir, "timeline.json");
+  const loaded = loadCachedTimeline(deck.dir);
+  if (!loaded) {
+    throw new DekError("Timeline not found", {
+      path: timelinePath,
+      hint: "run `dekc voice`",
+    });
+  }
+  let timeline = { ...loaded, audio: resolveTimelineAudio(loaded, timelinePath) };
+  const fps = options.fps ?? 30;
+  const size = logicalSize(deck.deck.ratio);
+  const html = videoDocument({ project, deck }, await playerScript());
+
+  const videoCache = cacheDir(deck.dir, "video");
+  const outDir = options.slug ? videoCache : join(videoCache, "_full");
+  // Chromium writes frames here by name; a link planted at one would take the frame elsewhere.
+  dropLinks(outputDir(outDir, project.root));
+
+  if (options.slug) {
+    const slideIndex = deck.deck.sections.findIndex((section) => section.slug === options.slug);
+    if (slideIndex < 0) {
+      requireSection(deck, options.slug);
+    }
+    timeline = sliceTimelineAudio(timeline, slideIndex, join(outDir, `${options.slug}.wav`));
+  }
+
+  const runner = options.runner ?? defaultVideoRunner;
+  const captured = await runner({
+    html,
+    timeline,
+    fps,
+    viewport: size,
+    outDir,
+    ...(options.slug ? { slug: options.slug } : {}),
+  });
+
+  const out = options.slug
+    ? join(videoCache, `${options.slug}.mp4`)
+    : distFile(project, deck, "mp4", options);
+  await muxVideo({
+    frames: captured.frames,
+    audioPath: timeline.audio,
+    outPath: outputPath(out, project.root),
+  });
+
+  if (options.slug) {
+    return { out };
+  }
+
+  const settings = loadVoiceSettings(deck.dir);
+  const titles = deck.deck.sections.map((section, index) => {
+    const beat = timeline.beats.find((entry) => entry.position.slideIndex === index);
+    return { slug: section.slug, title: section.title, startMs: beat?.start ?? 0 };
+  });
+  const stem = join(distDir(project, deck, options), deck.name);
+  const sidecars = writeVideoSidecars({
+    timeline,
+    titles,
+    speaker: settings.speaker,
+    engine: settings.engine,
+    stem,
+  });
+  return { out, ...sidecars };
+}
+
+export function sliceTimelineAudio(
+  timeline: Timeline,
+  slideIndex: number,
+  slicedAudioPath: string,
+): Timeline {
+  const range = slideTimeRange(timeline, slideIndex);
+  if (!range) {
+    throw new DekError(`no timeline beats for slide ${slideIndex}`, {
+      hint: "run `dekc voice`",
+    });
+  }
+  if (!existsSync(timeline.audio)) {
+    throw new DekError("audio not found", {
+      path: timeline.audio,
+      hint: "run `dekc voice`",
+    });
+  }
+  const sliced = sliceTimeline(timeline, slideIndex);
+  replaceFile(
+    slicedAudioPath,
+    sliceWav(readFileSync(timeline.audio), range.start, sliced.durationMs),
+  );
+  return { ...sliced, audio: slicedAudioPath };
+}

package/src/video/mux.ts

@@ -0,0 +1,103 @@
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { DekError } from "../core/error.ts";
+import { runPiped, workerCommand } from "../core/spawn.ts";
+import type { VideoFrame } from "./recorder.ts";
+
+export function ffmpegResolved(): boolean {
+  if (process.env.DEK_FFMPEG) {
+    return true;
+  }
+  try {
+    const result = Bun.spawnSync(["ffmpeg", "-version"], { stdout: "pipe", stderr: "pipe" });
+    return result.exitCode === 0;
+  } catch {
+    return false;
+  }
+}
+
+function ffmpegCommand(args: string[]): string[] {
+  const bin = process.env.DEK_FFMPEG;
+  if (bin) {
+    return workerCommand(bin, args);
+  }
+  return ["ffmpeg", ...args];
+}
+
+/** An encode of mostly held frames runs well inside this, even for a long talk. */
+const FFMPEG_TIMEOUT_MS = 30 * 60 * 1000;
+
+export async function muxVideo(options: {
+  frames: VideoFrame[];
+  audioPath: string;
+  outPath: string;
+  /** A hung ffmpeg is stopped after this; 30 minutes when left out. */
+  timeoutMs?: number;
+}): Promise<string> {
+  if (!ffmpegResolved()) {
+    throw new DekError("ffmpeg not found", {
+      hint: "install ffmpeg and ensure it is on PATH",
+    });
+  }
+  if (options.frames.length === 0) {
+    throw new DekError("no frames to mux", { hint: "run `dekc voice` then `dekc video`" });
+  }
+  const dir = mkdtempSync(join(tmpdir(), "dek-mux-"));
+  try {
+    const listPath = join(dir, "frames.txt");
+    const lines: string[] = [];
+    // ffmpeg reads the list line by line; a path with a line break in it would add directives.
+    const broken = options.frames.find((frame) => /[\r\n]/.test(frame.path));
+    if (broken) {
+      throw new DekError("a frame path holds a line break", {
+        path: broken.path,
+        hint: "rename the folder so its name has no line break",
+      });
+    }
+    for (const frame of options.frames) {
+      lines.push(`file '${frame.path.replace(/'/g, "'\\''")}'`);
+      lines.push(`duration ${(frame.durationMs / 1000).toFixed(3)}`);
+    }
+    const last = options.frames[options.frames.length - 1];
+    if (last) {
+      lines.push(`file '${last.path.replace(/'/g, "'\\''")}'`);
+    }
+    writeFileSync(listPath, `${lines.join("\n")}\n`);
+
+    const args = [
+      "-y",
+      "-f",
+      "concat",
+      "-safe",
+      "0",
+      "-i",
+      listPath,
+      "-i",
+      options.audioPath,
+      "-vf",
+      "pad=ceil(iw/2)*2:ceil(ih/2)*2",
+      "-c:v",
+      "libx264",
+      "-pix_fmt",
+      "yuv420p",
+      "-c:a",
+      "aac",
+      "-ar",
+      "48000",
+      "-shortest",
+      options.outPath,
+    ];
+    const { stderr, exitCode } = await runPiped(ffmpegCommand(args), {
+      label: "ffmpeg failed",
+      hint: "check ffmpeg output",
+      timeoutMs: options.timeoutMs ?? FFMPEG_TIMEOUT_MS,
+    });
+    if (exitCode !== 0) {
+      throw new DekError("ffmpeg failed", { hint: stderr.slice(0, 200) || "check ffmpeg output" });
+    }
+    return options.outPath;
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+}

package/src/video/recorder.ts

@@ -0,0 +1,115 @@
+import { DekError } from "../core/error.ts";
+import { moduleFilePath } from "../core/path.ts";
+import { playwrightResolved } from "../core/playwright.ts";
+import { runJsonWorker, workerCommand } from "../core/spawn.ts";
+import type { Position } from "../core/step.ts";
+import { playbackSchedule, type Timeline } from "../core/timeline.ts";
+
+export type VideoFrame = {
+  path: string;
+  durationMs: number;
+  kind?: "animation" | "hold";
+};
+
+export type VideoCaptureRequest = {
+  html: string;
+  timeline: Timeline;
+  fps: number;
+  viewport: { width: number; height: number };
+  outDir: string;
+  slug?: string;
+};
+
+export type VideoCaptureResponse = {
+  frames: VideoFrame[];
+};
+
+export type VideoRunner = (request: VideoCaptureRequest) => Promise<VideoCaptureResponse>;
+
+/** A go the video plays, and how long it shows: until the next go, the first from the start. */
+type PlannedGo = {
+  at: number;
+  position: Position;
+  durationMs: number;
+};
+
+export function frameStops(animationMs: number, fps: number): number[] {
+  if (animationMs <= 0) {
+    return [];
+  }
+  const frameMs = 1000 / Math.max(1, fps);
+  const count = Math.max(1, Math.round(animationMs / frameMs));
+  return Array.from({ length: count }, (_, i) =>
+    i === count - 1 ? animationMs : ((i + 1) * animationMs) / count,
+  );
+}
+
+export function holdMs(beatMs: number, animationMs: number): number {
+  return Math.max(1, beatMs - animationMs);
+}
+
+/** Every go of the talk, each shown until the next; together they cover the whole audio. */
+export function planCapture(timeline: Timeline): PlannedGo[] {
+  const gos = playbackSchedule(timeline);
+  return gos.map((go, index) => ({
+    ...go,
+    durationMs: Math.max(
+      1,
+      (gos[index + 1]?.at ?? timeline.durationMs) - (index === 0 ? 0 : go.at),
+    ),
+  }));
+}
+
+export async function defaultVideoRunner(
+  request: VideoCaptureRequest,
+  options: { timeoutMs?: number } = {},
+): Promise<VideoCaptureResponse> {
+  const bin = process.env.DEK_VIDEO;
+  if (bin) {
+    return spawnVideoRunner(bin, request, options);
+  }
+  if (playwrightResolved()) {
+    return spawnVideoRunner(workerPath(), request, options);
+  }
+  throw new DekError("video capture failed", {
+    hint: "install Playwright or set DEK_VIDEO",
+  });
+}
+
+function workerPath(): string {
+  return moduleFilePath(new URL("./worker.ts", import.meta.url));
+}
+
+function spawnVideoRunner(
+  bin: string,
+  request: VideoCaptureRequest,
+  options: { timeoutMs?: number },
+): Promise<VideoCaptureResponse> {
+  return runJsonWorker(workerCommand(bin), request, parseVideoResponse, {
+    label: "video capture failed",
+    hint: "install Playwright or set DEK_VIDEO",
+    ...(options.timeoutMs !== undefined ? { timeoutMs: options.timeoutMs } : {}),
+  });
+}
+
+/** The video worker's JSON, or null when its frames are not each a path and how long it shows. */
+export function parseVideoResponse(text: string): VideoCaptureResponse | null {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return null;
+  }
+  const frames = (parsed as { frames?: unknown } | null)?.frames;
+  return Array.isArray(frames) && frames.every(isVideoFrame) ? { frames } : null;
+}
+
+function isVideoFrame(value: unknown): value is VideoFrame {
+  const { path, durationMs, kind } = (value ?? {}) as Record<string, unknown>;
+  return (
+    typeof path === "string" &&
+    typeof durationMs === "number" &&
+    Number.isFinite(durationMs) &&
+    (kind === undefined || kind === "animation" || kind === "hold")
+  );
+}

package/src/video/sidecar.ts

@@ -0,0 +1,60 @@
+import { replaceFile } from "../core/safe-fs.ts";
+import type { Timeline } from "../core/timeline.ts";
+
+export function writeVideoSidecars(options: {
+  timeline: Timeline;
+  titles: Array<{ slug: string; title: string; startMs: number }>;
+  speaker: string;
+  engine: string;
+  stem: string;
+}): { vtt: string; chapters: string; credits: string } {
+  const vtt = `${options.stem}.vtt`;
+  const chapters = `${options.stem}.chapters.txt`;
+  const credits = `${options.stem}.credits.txt`;
+  replaceFile(vtt, renderVtt(options.timeline));
+  replaceFile(chapters, renderChapters(options.titles));
+  replaceFile(credits, `${options.engine}:${options.speaker}\n`);
+  return { vtt, chapters, credits };
+}
+
+function renderVtt(timeline: Timeline): string {
+  const cues: string[] = ["WEBVTT", ""];
+  let index = 1;
+  for (const beat of timeline.beats) {
+    for (const sentence of beat.sentences) {
+      cues.push(
+        String(index),
+        `${formatVtt(sentence.start)} --> ${formatVtt(sentence.end)}`,
+        escapeVtt(sentence.text),
+        "",
+      );
+      index += 1;
+    }
+  }
+  return `${cues.join("\n")}\n`;
+}
+
+function escapeVtt(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\s+/g, " ").trim();
+}
+
+function renderChapters(titles: Array<{ title: string; startMs: number }>): string {
+  return titles
+    .map((entry) => `${formatClock(entry.startMs)} ${entry.title}`)
+    .join("\n")
+    .concat("\n");
+}
+
+function formatVtt(ms: number): string {
+  const total = Math.max(0, ms) / 1000;
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const seconds = total % 60;
+  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${seconds.toFixed(3).padStart(6, "0")}`;
+}
+
+function formatClock(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  return `${minutes}:${String(seconds % 60).padStart(2, "0")}`;
+}

package/src/video/worker.ts

@@ -0,0 +1,51 @@
+#!/usr/bin/env bun
+import { mkdirSync } from "node:fs";
+import { join } from "node:path";
+import type { Browser } from "playwright";
+import { captureGo, loadVideoDoc } from "../core/capture-go.ts";
+import { runPlaywrightWorker } from "../core/playwright.ts";
+import {
+  frameStops,
+  holdMs,
+  planCapture,
+  type VideoCaptureRequest,
+  type VideoCaptureResponse,
+  type VideoFrame,
+} from "./recorder.ts";
+
+await runPlaywrightWorker(capture);
+
+/** Records every beat of the request into `outDir`. */
+async function capture(
+  browser: Browser,
+  request: VideoCaptureRequest,
+): Promise<VideoCaptureResponse> {
+  mkdirSync(request.outDir, { recursive: true });
+  const page = await browser.newPage({
+    viewport: { width: request.viewport.width, height: request.viewport.height },
+  });
+  await loadVideoDoc(page, request.html);
+
+  const frames: VideoFrame[] = [];
+  for (const go of planCapture(request.timeline)) {
+    let previous = 0;
+    // Only what this go started moves; slide scripts are held at t=0 by the player in video mode.
+    await captureGo(
+      page,
+      go.position,
+      (span) => frameStops(span, request.fps),
+      async (ms, end) => {
+        const path = join(request.outDir, `frame-${String(frames.length).padStart(4, "0")}.png`);
+        await page.screenshot({ path, type: "png" });
+        frames.push(
+          end
+            ? { path, durationMs: holdMs(go.durationMs, ms), kind: "hold" }
+            : { path, durationMs: ms - previous, kind: "animation" },
+        );
+        previous = ms;
+      },
+    );
+  }
+
+  return { frames };
+}