@hajimism/dek 0.1.0

package/src/runtime/motion.ts

@@ -0,0 +1,113 @@
+/**
+ * Slide scripts draw as a function of time: `draw(slide, { index, step, t })`
+ * where `t` is milliseconds since the beat began. The runtime owns the clock,
+ * so live playback advances `t` per frame while video capture seeks it.
+ */
+import { drawFrame, stepMotionMs } from "../core/slide-draw.ts";
+import { stepKey } from "../core/step.ts";
+
+export { drawAtEnd } from "../core/slide-draw.ts";
+
+// The shapes live in slide.d.ts, which `dekc sync` also hands to deck authors.
+export type MotionFrame = DekMotionFrame;
+export type SlideModule = DekSlide;
+
+/** animate: run t from 0 to the motion. final: jump to the end. hold: t=0, then `seek`. */
+export type MotionMode = "animate" | "final" | "hold";
+
+export function motionMs(
+  module: SlideModule | undefined,
+  beats: Array<{ id?: string }>,
+  index: number,
+): number {
+  return stepMotionMs(module, stepKey(beats, index));
+}
+
+export function createMotion(clock: {
+  now: () => number;
+  requestFrame: (fn: () => void) => number;
+  cancelFrame: (id: number) => void;
+  /** Backstop for hidden or throttled pages, where animation frames stop arriving. */
+  setTimer: (fn: () => void, ms: number) => number;
+  clearTimer: (id: number) => void;
+}) {
+  let current:
+    | { slide: HTMLElement; module: SlideModule; index: number; step: string; ms: number }
+    | undefined;
+  let frame: number | undefined;
+  let timer: number | undefined;
+
+  const stop = (): void => {
+    if (frame !== undefined) {
+      clock.cancelFrame(frame);
+      frame = undefined;
+    }
+    if (timer !== undefined) {
+      clock.clearTimer(timer);
+      timer = undefined;
+    }
+  };
+
+  const draw = (t: number): void => {
+    if (!current) {
+      return;
+    }
+    drawFrame(current.module, current.slide, {
+      index: current.index,
+      step: current.step,
+      t: Math.min(Math.max(t, 0), current.ms),
+    });
+  };
+
+  return {
+    show(
+      slide: HTMLElement,
+      module: SlideModule | undefined,
+      beats: Array<{ id?: string }>,
+      index: number,
+      mode: MotionMode,
+    ): void {
+      stop();
+      current = module
+        ? { slide, module, index, step: stepKey(beats, index), ms: motionMs(module, beats, index) }
+        : undefined;
+      if (!current) {
+        return;
+      }
+      if (mode === "final" || current.ms === 0) {
+        draw(current.ms);
+        return;
+      }
+      draw(0);
+      if (mode === "hold") {
+        return;
+      }
+      const start = clock.now();
+      const step = (): void => {
+        const t = clock.now() - start;
+        draw(t);
+        if (current && t < current.ms) {
+          frame = clock.requestFrame(step);
+        } else {
+          stop();
+        }
+      };
+      frame = clock.requestFrame(step);
+      timer = clock.setTimer(() => {
+        timer = undefined;
+        if (frame !== undefined) {
+          stop();
+          draw(current?.ms ?? 0);
+        }
+      }, current.ms + 50);
+    },
+    seek(t: number): void {
+      stop();
+      draw(t);
+    },
+    duration(): number {
+      return current?.ms ?? 0;
+    },
+    stop,
+  };
+}

package/src/runtime/navigator.ts

@@ -0,0 +1,189 @@
+/// <reference lib="dom" />
+
+import {
+  decodePointer,
+  decodePosition,
+  encodePointer,
+  encodePosition,
+  type Pointer,
+} from "../core/live-protocol.ts";
+import {
+  clampPosition,
+  type DeckStops,
+  formatHash,
+  hashChangeTarget,
+  historyMode,
+  positionFromHash,
+  positionsEqual,
+} from "../core/position.ts";
+import type { Position } from "../core/step.ts";
+import { applyIncomingPosition, createGuardedGo } from "./go.ts";
+import { createPositionSocket, type PositionSocket } from "./socket.ts";
+
+/**
+ * Where a move came from. Local moves, and the rehearsal clock's, are published to peers; remote
+ * ones arrived from one; a hash move came from the URL, which already holds its history entry.
+ * Capture (the video recorder and morph shots, through `window.dekGo`) drives this page alone.
+ */
+export type GoOrigin = "local" | "rehearse" | "remote" | "hash" | "capture";
+
+export type Navigator = {
+  /** What is on screen. */
+  position(): Position;
+  /**
+   * Where the deck is headed: `position()` once the moves asked for have run. Moves step from
+   * here, so every press counts even while a transition is still playing.
+   */
+  target(): Position;
+  go(next: Position | null | undefined, origin?: GoOrigin): Promise<void>;
+  /** Write the position to the URL, e.g. once a hash past a slide's last beat was clamped. */
+  writeHash(mode: "push" | "replace"): void;
+  /** Tell the other windows and the server where this window's laser points, or that it went away. */
+  point(pointer: Pointer | null): void;
+};
+
+type GoRequest = { position: Position; origin: GoOrigin };
+
+/**
+ * Owns where the deck is: the position, the one it is headed to, and the lines that carry it
+ * (the URL, other windows, the dev server's socket), which also carry where a laser points.
+ * Drawing a move is left to `present`.
+ */
+export function createNavigator(options: {
+  deck: DeckStops;
+  channelName: string;
+  /** The dev server's position socket; a built file on a static host has none. */
+  socketUrl?: string;
+  /**
+   * Draw the move from `from` to `to`. `apply` puts it on screen, perhaps inside a transition;
+   * the promise settles once the move has played.
+   */
+  present: (from: Position, to: Position, apply: () => void) => Promise<void>;
+  /** A newer move is waiting: cut the one in flight short. */
+  hurry: () => void;
+  /** The deck now stands on `to`. */
+  onMove: (from: Position, to: Position) => void;
+  /** A move is about to run. */
+  beforeMove?: () => void;
+  /** A move has played out. */
+  afterMove?: () => void;
+  /** Where a peer's move goes, once clamped and new; left out, the deck goes there. */
+  route?: (next: Position) => void;
+  /** Where a peer's laser points, or null once it went away. */
+  onPointer?: (pointer: Pointer | null) => void;
+}): Navigator {
+  const slugs = options.deck.map((slide) => slide.slug);
+  // One channel per deck: two decks' built files open side by side must not drive each other.
+  const channel = new BroadcastChannel(options.channelName);
+  let pos = positionFromHash(location.hash, options.deck);
+  let target = pos;
+
+  /**
+   * Write `pos` to the URL without a hashchange, so the handler only ever hears the reader:
+   * a typed hash, Back, or Forward.
+   */
+  function writeHash(mode: "push" | "replace"): void {
+    const hash = formatHash(pos, slugs);
+    if (!hash || location.hash === hash) {
+      return;
+    }
+    try {
+      history[mode === "push" ? "pushState" : "replaceState"](null, "", hash);
+    } catch {
+      // A browser that refuses history on this URL still takes a hash; its echo matches `target`.
+      location.hash = hash;
+    }
+  }
+
+  const runGo = createGuardedGo(
+    async ({ position: next, origin }: GoRequest) => {
+      options.beforeMove?.();
+      await options.present(pos, next, () => {
+        const from = pos;
+        pos = next;
+        writeHash(origin === "hash" ? "replace" : historyMode(from, next));
+        options.onMove(from, next);
+      });
+      options.afterMove?.();
+    },
+    { onQueue: options.hurry },
+  );
+
+  let remote: PositionSocket | undefined;
+
+  /** Tell the other windows and the server where the deck is headed. */
+  function publish(position: Position): void {
+    channel.postMessage(encodePosition(position));
+    remote?.publish(position);
+  }
+
+  /**
+   * Move to `next`. A local move is published at once, so a second window follows the key press
+   * rather than the end of this window's animation. A remote one came from a peer and is not
+   * sent back: a peer that had moved on would be rewound by the echo.
+   */
+  function go(next: Position | null | undefined, origin: GoOrigin = "local"): Promise<void> {
+    if (next == null) {
+      return runGo(undefined);
+    }
+    target = next;
+    if (origin === "local" || origin === "rehearse") {
+      publish(next);
+    }
+    return runGo({ position: next, origin });
+  }
+
+  /** A position a peer sent: clamped to this deck, and dropped when the deck already heads there. */
+  function receive(next: Position): void {
+    const clamped = clampPosition(next, options.deck);
+    if (!clamped) {
+      return;
+    }
+    applyIncomingPosition(options.route ?? ((incoming) => go(incoming, "remote")), clamped, {
+      equal: positionsEqual,
+      current: () => target,
+    });
+  }
+
+  channel.addEventListener("message", (event: MessageEvent) => {
+    const laser = decodePointer(event.data);
+    if (laser) {
+      options.onPointer?.(laser.pointer);
+      return;
+    }
+    const next = decodePosition(event.data);
+    if (next) {
+      receive(next);
+    }
+  });
+  if (options.socketUrl) {
+    const url = options.socketUrl;
+    remote = createPositionSocket({
+      connect: () => new WebSocket(url),
+      onPosition: receive,
+      ...(options.onPointer ? { onPointer: options.onPointer } : {}),
+      setTimer: (fn, ms) => window.setTimeout(fn, ms),
+      clearTimer: (id) => window.clearTimeout(id),
+    });
+    // A page that is really going away must not dial back in; one kept for Back reconnects.
+    window.addEventListener("pagehide", (event) => {
+      if (!event.persisted) {
+        remote?.close();
+      }
+    });
+  }
+  window.addEventListener("hashchange", () => {
+    void go(hashChangeTarget(target, location.hash, options.deck), "hash");
+  });
+
+  return {
+    position: () => pos,
+    target: () => target,
+    go,
+    writeHash,
+    point(pointer) {
+      channel.postMessage(encodePointer(pointer));
+      remote?.point(pointer);
+    },
+  };
+}

package/src/runtime/player.ts

@@ -0,0 +1,28 @@
+import { join } from "node:path";
+
+export { liveReloadScript } from "./live-reload.ts";
+
+let compiled: Promise<string> | undefined;
+
+export function playerScript(): Promise<string> {
+  compiled ??= compilePlayer();
+  return compiled;
+}
+
+async function compilePlayer(): Promise<string> {
+  const result = await Bun.build({
+    entrypoints: [join(import.meta.dir, "browser.ts")],
+    target: "browser",
+    format: "iife",
+    minify: true,
+  });
+  if (!result.success) {
+    const details = result.logs.map((log) => String(log)).join("\n");
+    throw new Error(`failed to compile player\n${details}`);
+  }
+  const output = result.outputs[0];
+  if (!output) {
+    throw new Error("failed to compile player: no output");
+  }
+  return output.text();
+}

package/src/runtime/presenter-view.ts

@@ -0,0 +1,289 @@
+/// <reference lib="dom" />
+import { PAGE_ID, type PageMode } from "../core/page.ts";
+
+import { advance, type DeckStops } from "../core/position.ts";
+import {
+  nextPresenterTitle,
+  type PresenterBeat,
+  type PresenterSlide,
+  presenterState,
+} from "../core/presenter-state.ts";
+import { type Position, stepValuesForBeat } from "../core/step.ts";
+import { formatClock } from "../core/timing.ts";
+import { deckSize, stillFrame, visualClone } from "./clone.ts";
+import { fitStage } from "./fit.ts";
+import { elapsedTone, presenterSearch, progressFill, totalBudgetSeconds } from "./presenter.ts";
+import type { Stage } from "./stage.ts";
+import { applyIsShown } from "./step.ts";
+
+export type PresenterView = {
+  /** Whether the page can show the presenter at all. */
+  available(): boolean;
+  isOpen(): boolean;
+  /** Show or hide the presenter and keep `?presenter` in the URL to match. */
+  setOpen(open: boolean): void;
+  render(pos: Position): void;
+  /** Start the talk clock once, at the first move. */
+  startClock(): void;
+  /** Fit the next-beat preview to its stage. */
+  fit(): void;
+};
+
+/** What the panels say at a position, before any of it is written to the page. */
+export type PresenterPanels = {
+  /** Undefined off the deck, where the panel keeps what it last said. */
+  script: string | undefined;
+  /** The title of what the next beat shows. */
+  next: string;
+  /** Null at the deck's last beat. */
+  nextPos: Position | null;
+  beats: PresenterBeat[] | undefined;
+  budget: string;
+};
+
+export function presenterPanels(
+  slides: PresenterSlide[],
+  deck: DeckStops,
+  pos: Position,
+): PresenterPanels {
+  const current = slides[pos.slideIndex];
+  const state = current ? presenterState(slides, pos) : undefined;
+  return {
+    script: state?.script,
+    next: state ? nextPresenterTitle(state) : "",
+    nextPos: advance(pos, deck),
+    beats: state?.current.beats,
+    budget: current?.budgetSeconds !== undefined ? formatClock(current.budgetSeconds) : "",
+  };
+}
+
+/** One bar segment per slide: done, current and filled as far as its beats go, or to come. */
+export function progressSegments(
+  deck: DeckStops,
+  pos: Position,
+): Array<{ className?: "is-done" | "is-current"; fill?: string }> {
+  return deck.map((slide, index) => {
+    if (index < pos.slideIndex) {
+      return { className: "is-done" };
+    }
+    if (index === pos.slideIndex) {
+      return {
+        className: "is-current",
+        fill: `${progressFill(pos.beatIndex, slide.stops) * 100}%`,
+      };
+    }
+    return {};
+  });
+}
+
+/** The presenter page opens with its panels shown, and so does any page asked `?presenter`. */
+export function opensAsPresenter(search: string, mode: PageMode): boolean {
+  return new URLSearchParams(search).has("presenter") || mode === "presenter";
+}
+
+const setText = (id: string, text: string): void => {
+  const el = document.getElementById(id);
+  if (el) {
+    el.textContent = text;
+  }
+};
+
+/** The script, what comes next, and the slide's budget. */
+function renderNotes(panels: PresenterPanels, budgetEl: HTMLElement | null): void {
+  if (panels.script !== undefined) {
+    setText(PAGE_ID.script, panels.script);
+  }
+  setText(PAGE_ID.next, panels.next);
+  const nextEnd = document.getElementById(PAGE_ID.nextEnd);
+  if (nextEnd) {
+    nextEnd.hidden = Boolean(panels.nextPos);
+  }
+  if (budgetEl) {
+    budgetEl.textContent = panels.budget;
+  }
+}
+
+function renderPage(slideNumber: number, slideCount: number): void {
+  const pageEl = document.getElementById(PAGE_ID.page);
+  if (!pageEl) {
+    return;
+  }
+  const total = document.createElement("span");
+  total.className = "dek-page-total";
+  total.textContent = `/ ${slideCount}`;
+  pageEl.replaceChildren(document.createTextNode(`${slideNumber} `), total);
+}
+
+function beatItems(beats: PresenterBeat[]): HTMLLIElement[] {
+  return beats.map((beat, i) => {
+    const li = document.createElement("li");
+    li.setAttribute("data-beat-index", String(i + 1));
+    li.textContent = beat.title;
+    return li;
+  });
+}
+
+function highlightBeat(beatsEl: HTMLElement, beatIndex: number): void {
+  for (const el of beatsEl.querySelectorAll("[data-beat-index]")) {
+    el.classList.toggle(
+      "is-current-beat",
+      Number(el.getAttribute("data-beat-index")) === beatIndex,
+    );
+  }
+}
+
+function renderProgress(progressEl: HTMLElement, deck: DeckStops, pos: Position): void {
+  progressEl.replaceChildren(
+    ...progressSegments(deck, pos).map(({ className, fill }) => {
+      const span = document.createElement("span");
+      if (className) {
+        span.className = className;
+      }
+      if (fill) {
+        span.style.setProperty("--dek-fill", fill);
+      }
+      return span;
+    }),
+  );
+}
+
+/** A still of the next beat as the move will show it, or nothing when there is none to show. */
+function renderNextPreview(
+  stage: Stage,
+  next: { slide: PresenterSlide; beatIndex: number } | undefined,
+): void {
+  const previewStage = document.getElementById(PAGE_ID.nextStage);
+  if (!previewStage) {
+    return;
+  }
+  const source = next ? stage.slideEl(next.slide.slug) : undefined;
+  const clone = source ? visualClone(source) : undefined;
+  const deckEl = document.getElementById(PAGE_ID.deck);
+  if (!next || !clone || !deckEl) {
+    previewStage.replaceChildren();
+    return;
+  }
+  const { slide, beatIndex } = next;
+  applyIsShown(
+    [...clone.querySelectorAll("[data-step]")],
+    stepValuesForBeat(slide.beats, beatIndex),
+  );
+  const frame = stillFrame("dek-preview-frame", clone, deckSize(deckEl));
+  previewStage.replaceChildren(frame);
+  stage.drawStill(clone, slide, beatIndex);
+  fitStage(frame, previewStage);
+}
+
+function syncElapsed(
+  elapsedEl: HTMLElement,
+  startedAt: number,
+  talkBudget: number | undefined,
+): void {
+  const elapsed = (Date.now() - startedAt) / 1000;
+  elapsedEl.textContent = formatClock(elapsed);
+  const tone = elapsedTone(elapsed, talkBudget);
+  elapsedEl.classList.toggle("is-warn", tone === "warn");
+  elapsedEl.classList.toggle("is-over", tone === "over");
+}
+
+/** Owns the presenter's panels: the script, the beats, what comes next, the clock, the progress. */
+export function createPresenterView(options: {
+  slides: PresenterSlide[];
+  deck: DeckStops;
+  stage: Stage;
+  /** The page opens with the panels shown when it is the presenter page. */
+  mode: PageMode;
+}): PresenterView {
+  const { slides, deck, stage } = options;
+  // Only a page with notes has the panels.
+  const root = document.getElementById(PAGE_ID.presenter);
+  const progressEl = document.getElementById(PAGE_ID.progress);
+  const elapsedEl = document.getElementById(PAGE_ID.elapsed);
+  const budgetEl = document.getElementById(PAGE_ID.budget);
+  const talkBudget = totalBudgetSeconds(slides);
+  let startedAt: number | undefined;
+  /** The slide the beat list was built for; beats within it only move the highlight. */
+  let beatsFor: number | undefined;
+
+  const isOpen = (): boolean => Boolean(root && !root.hidden);
+
+  function show(open: boolean): void {
+    if (!root) {
+      return;
+    }
+    root.hidden = !open;
+    document.body.classList.toggle("is-presenter", open);
+    if (progressEl) {
+      progressEl.hidden = !open;
+    }
+  }
+
+  if (root && opensAsPresenter(location.search, options.mode)) {
+    show(true);
+  }
+
+  function renderBeatList(pos: Position, beats: PresenterBeat[]): void {
+    const beatsEl = document.getElementById(PAGE_ID.beats);
+    if (!beatsEl) {
+      return;
+    }
+    if (beatsFor !== pos.slideIndex) {
+      beatsFor = pos.slideIndex;
+      beatsEl.replaceChildren(...beatItems(beats));
+    }
+    highlightBeat(beatsEl, pos.beatIndex);
+  }
+
+  function render(pos: Position): void {
+    const panels = presenterPanels(slides, deck, pos);
+    renderNotes(panels, budgetEl);
+    if (panels.beats) {
+      renderBeatList(pos, panels.beats);
+    }
+    renderPage(pos.slideIndex + 1, slides.length);
+    if (progressEl) {
+      renderProgress(progressEl, deck, pos);
+    }
+    const { nextPos } = panels;
+    const nextSlide = nextPos && isOpen() ? slides[nextPos.slideIndex] : undefined;
+    renderNextPreview(
+      stage,
+      nextPos && nextSlide ? { slide: nextSlide, beatIndex: nextPos.beatIndex } : undefined,
+    );
+  }
+
+  return {
+    available: () => root !== null,
+    isOpen,
+    setOpen(open) {
+      if (!root) {
+        return;
+      }
+      show(open);
+      const search = presenterSearch(location.search, open);
+      if (search !== location.search) {
+        history.replaceState(null, "", `${location.pathname}${search}${location.hash}`);
+      }
+    },
+    render,
+    startClock() {
+      if (startedAt !== undefined) {
+        return;
+      }
+      const started = Date.now();
+      startedAt = started;
+      if (elapsedEl) {
+        const tick = (): void => syncElapsed(elapsedEl, started, talkBudget);
+        window.setInterval(tick, 1000);
+        tick();
+      }
+    },
+    fit() {
+      const preview = document.querySelector(`#${PAGE_ID.nextStage} .dek-preview-frame`);
+      const nextStage = document.getElementById(PAGE_ID.nextStage);
+      if (preview instanceof HTMLElement && nextStage && isOpen()) {
+        fitStage(preview, nextStage);
+      }
+    },
+  };
+}

package/src/runtime/presenter.ts

@@ -0,0 +1,52 @@
+import { isLetterKey } from "./step.ts";
+
+export function isPresenterToggleKey(event: Parameters<typeof isLetterKey>[0]): boolean {
+  return isLetterKey(event, "p");
+}
+
+export function presenterSearch(search: string, open: boolean): string {
+  const raw = search.startsWith("?") ? search.slice(1) : search;
+  const params = new URLSearchParams(raw);
+  if (open) {
+    params.set("presenter", "");
+  } else {
+    params.delete("presenter");
+  }
+  const encoded = params.toString().replace(/=(?=&|$)/g, "");
+  return encoded ? `?${encoded}` : "";
+}
+
+export type ElapsedTone = "ok" | "warn" | "over";
+
+export function elapsedTone(
+  elapsedSeconds: number,
+  budgetSeconds: number | undefined,
+): ElapsedTone {
+  if (budgetSeconds === undefined || budgetSeconds <= 0) {
+    return "ok";
+  }
+  if (elapsedSeconds > budgetSeconds) {
+    return "over";
+  }
+  if (elapsedSeconds > budgetSeconds * 0.8) {
+    return "warn";
+  }
+  return "ok";
+}
+
+export function totalBudgetSeconds(slides: Array<{ budgetSeconds?: number }>): number | undefined {
+  let any = false;
+  let sum = 0;
+  for (const slide of slides) {
+    if (slide.budgetSeconds !== undefined) {
+      any = true;
+      sum += slide.budgetSeconds;
+    }
+  }
+  return any ? sum : undefined;
+}
+
+export function progressFill(beatIndex: number, stops: number): number {
+  const count = Math.max(stops, 1);
+  return Math.min(1, (beatIndex + 1) / count);
+}