@velumo/cli 0.1.0-beta.0

package/src/browser-presenter.ts

@@ -0,0 +1,602 @@
+import type { Manifest, SlideEntry } from "@velumo/core";
+import {
+  createSpeakerNotesModel,
+  RuntimeController,
+  type RuntimeState,
+  type SpeakerNoteBlock,
+} from "@velumo/runtime";
+import { DomRenderer } from "@velumo/renderer-dom";
+import {
+  createPresenterSync,
+  type PresenterCommand,
+  type PresenterSync,
+  type PresenterSyncChannel,
+} from "./browser-sync.js";
+import { createPresenterTimer, type PresenterTimer } from "./browser-timer.js";
+
+interface ManifestResponse {
+  readonly ok: boolean;
+  readonly status: number;
+  json(): Promise<Manifest>;
+}
+
+type PresenterChild = PresenterElement | PresenterTextNode | string;
+
+interface PresenterTextNode {
+  parentNode?: unknown;
+  textContent: string;
+}
+
+interface PresenterElement extends PresenterTextNode {
+  readonly ownerDocument: PresenterDocument;
+  addEventListener?(type: "click", listener: () => void): void;
+  append(...children: PresenterChild[]): void;
+  appendChild(
+    child: PresenterElement | PresenterTextNode,
+  ): PresenterElement | PresenterTextNode;
+  querySelector(selector: string): PresenterElement | null;
+  removeAttribute(name: string): void;
+  replaceChildren(...children: PresenterChild[]): void;
+  setAttribute(name: string, value: string): void;
+}
+
+interface PresenterDocument {
+  createElement(tagName: string): PresenterElement;
+  createElementNS(namespace: string, tagName: string): PresenterElement;
+  createTextNode(text: string): PresenterTextNode;
+}
+
+type PresenterRoot = PresenterElement;
+
+interface PresenterWindowGlobals {
+  readonly BroadcastChannel?: new (name: string) => PresenterSyncChannel;
+  readonly crypto?: { randomUUID?(): string };
+}
+
+interface PresenterCommandPublisher {
+  publishCommand(command: PresenterCommand): void;
+}
+
+interface PresenterInjectedSync {
+  readonly channel: PresenterSyncChannel;
+  readonly instanceId: string;
+}
+
+interface PresenterSyncConnection {
+  readonly commandPublisher?: PresenterCommandPublisher;
+  readonly sync?: PresenterSync;
+}
+
+interface PresenterTimerScheduler {
+  clearInterval?(id: unknown): void;
+  setInterval(handler: () => void, ms: number): unknown;
+}
+
+interface ThumbnailHandle {
+  dispose(): void;
+}
+
+type MountThumbnailFn = (opts: {
+  readonly root: PresenterElement;
+  readonly manifest: Manifest;
+  readonly slideId: string;
+}) => ThumbnailHandle;
+
+export interface PresenterMountOptions {
+  readonly root: PresenterRoot | null | undefined;
+  readonly manifestUrl: string;
+  readonly initialState?: RuntimeState;
+  readonly sync?: false | PresenterCommandPublisher | PresenterInjectedSync;
+  readonly timer?: PresenterTimer;
+  readonly timerIntervalMs?: number;
+  readonly timerScheduler?: PresenterTimerScheduler;
+  readonly mountThumbnail?: MountThumbnailFn;
+}
+
+export interface PresenterMountResult {
+  dispose(): void;
+  readonly manifest: Manifest;
+  readonly sync?: PresenterSync;
+  readonly timer: PresenterTimer;
+}
+
+export async function mountVelumoPresenterView(
+  options: PresenterMountOptions,
+): Promise<PresenterMountResult | undefined> {
+  if (options.root === null || options.root === undefined) {
+    throw new Error("Velumo presenter root element not found");
+  }
+
+  const root = options.root;
+
+  try {
+    const response = (await fetch(options.manifestUrl)) as ManifestResponse;
+
+    if (!response.ok) {
+      throw new Error(`manifest request failed with status ${response.status}`);
+    }
+
+    const manifest = await response.json();
+    const timer = options.timer ?? createPresenterTimer();
+    const notes = createSpeakerNotesModel(manifest);
+    let state =
+      options.initialState ?? new RuntimeController(manifest).getState();
+    let sync: PresenterSync | undefined;
+    let commandPublisher: PresenterCommandPublisher | undefined;
+
+    let currentHandles: Array<ThumbnailHandle> = [];
+
+    function render(): void {
+      for (const h of currentHandles) h.dispose();
+      currentHandles = [];
+      renderPresenter(root, {
+        commandPublisher,
+        manifest,
+        notes,
+        state,
+        statusText: sync === undefined ? "Local disconnected" : "Connected",
+        timer,
+        mountThumbnail: options.mountThumbnail,
+        handles: currentHandles,
+      });
+    }
+
+    // The clock ticks every second, but the elapsed time is the only thing
+    // that changes between ticks. Refresh just that text node in place rather
+    // than calling render(): a full render() rebuilds the whole tree, including
+    // the two slide-preview DomRenderers, which restarts their one-shot entry
+    // animations every second (and leaks a renderer per tick). Full render()
+    // stays driven by mount and state changes (navigation/sync), where a single
+    // preview rebuild — and one entry-animation replay — is correct.
+    function updateTimerDisplay(): void {
+      const display = root.querySelector("[data-velumo-presenter-timer]");
+      if (display !== null) {
+        display.textContent = `Elapsed ${formatElapsed(timer.elapsedMs())}`;
+      }
+    }
+
+    const connection = createPresenterSyncConnection(
+      options.sync,
+      (nextState) => {
+        state = nextState;
+        render();
+      },
+    );
+    sync = connection.sync;
+    commandPublisher = connection.commandPublisher;
+
+    render();
+    const stopTimerUpdates = startTimerUpdates(options, updateTimerDisplay);
+
+    return {
+      dispose() {
+        stopTimerUpdates?.();
+        sync?.dispose();
+        for (const h of currentHandles) h.dispose();
+        currentHandles = [];
+      },
+      manifest,
+      sync,
+      timer,
+    };
+  } catch (error) {
+    renderPresenterError(root, error);
+    return undefined;
+  }
+}
+
+interface PresenterRenderOptions {
+  readonly commandPublisher: PresenterCommandPublisher | undefined;
+  readonly manifest: Manifest;
+  readonly notes: ReturnType<typeof createSpeakerNotesModel>;
+  readonly state: RuntimeState;
+  readonly statusText: string;
+  readonly timer: PresenterTimer;
+  readonly mountThumbnail?: MountThumbnailFn;
+  readonly handles: Array<ThumbnailHandle>;
+}
+
+function renderPresenter(
+  root: PresenterRoot,
+  options: PresenterRenderOptions,
+): void {
+  root.setAttribute("data-velumo-presenter", "mounted");
+  root.replaceChildren(
+    presenterHeader(root.ownerDocument, options),
+    presenterSlidePanel(root, options),
+    presenterNotesPanel(root.ownerDocument, options),
+    presenterControls(root.ownerDocument, options),
+  );
+}
+
+function presenterHeader(
+  document: PresenterDocument,
+  options: PresenterRenderOptions,
+): PresenterElement {
+  const header = createElement(document, "header");
+  header.setAttribute("data-velumo-presenter-header", "true");
+
+  const title = textElement(document, "h1", "Presenter View");
+  const deck = textElement(document, "p", options.manifest.deck.title);
+  const status = textElement(document, "p", options.statusText);
+  const timer = textElement(
+    document,
+    "p",
+    `Elapsed ${formatElapsed(options.timer.elapsedMs())}`,
+  );
+  timer.setAttribute("data-velumo-presenter-timer", "true");
+
+  header.append(title, deck, status, timer);
+  return header;
+}
+
+function presenterSlidePanel(
+  root: PresenterRoot,
+  options: PresenterRenderOptions,
+): PresenterElement {
+  const panel = createElement(root.ownerDocument, "section");
+  panel.setAttribute("data-velumo-presenter-slides", "true");
+  panel.append(
+    previewSection(
+      root,
+      "Current",
+      options.manifest,
+      options.state.slideId,
+      {
+        "data-velumo-presenter-current": "true",
+      },
+      options.mountThumbnail,
+      options.handles,
+    ),
+    nextPreviewSection(root, options),
+  );
+  return panel;
+}
+
+function nextPreviewSection(
+  root: PresenterRoot,
+  options: PresenterRenderOptions,
+): PresenterElement {
+  const nextSlide = options.manifest.slides[options.state.slideIndex + 1];
+
+  if (nextSlide === undefined) {
+    const section = createElement(root.ownerDocument, "section");
+    section.setAttribute("data-velumo-presenter-next", "true");
+    section.append(textElement(root.ownerDocument, "h2", "Next"));
+    section.append(textElement(root.ownerDocument, "p", "No next slide"));
+    return section;
+  }
+
+  return previewSection(
+    root,
+    "Next",
+    options.manifest,
+    nextSlide.id,
+    {
+      "data-velumo-presenter-next": "true",
+    },
+    options.mountThumbnail,
+    options.handles,
+  );
+}
+
+function previewSection(
+  root: PresenterRoot,
+  label: string,
+  manifest: Manifest,
+  slideId: string,
+  attributes: Record<string, string>,
+  mountThumbnail?: MountThumbnailFn,
+  handles?: Array<ThumbnailHandle>,
+): PresenterElement {
+  const section = createElement(root.ownerDocument, "section");
+  for (const [name, value] of Object.entries(attributes)) {
+    section.setAttribute(name, value);
+  }
+
+  section.append(textElement(root.ownerDocument, "h2", label));
+
+  const slide = slideById(manifest, slideId);
+  if (slide !== undefined) {
+    section.append(textElement(root.ownerDocument, "p", slideSummary(slide)));
+  }
+
+  const previewRoot = createElement(root.ownerDocument, "div");
+  previewRoot.setAttribute("data-velumo-presenter-preview", "true");
+
+  if (mountThumbnail !== undefined) {
+    const handle = mountThumbnail({ root: previewRoot, manifest, slideId });
+    handles?.push(handle);
+  } else {
+    new DomRenderer({
+      root: previewRoot,
+      manifest,
+      runtime: new RuntimeController(manifest, { initialSlideId: slideId }),
+    }).mount();
+  }
+
+  section.append(previewRoot);
+
+  return section;
+}
+
+function presenterNotesPanel(
+  document: PresenterDocument,
+  options: PresenterRenderOptions,
+): PresenterElement {
+  const section = createElement(document, "section");
+  section.setAttribute("data-velumo-presenter-notes", "true");
+  section.append(textElement(document, "h2", "Notes"));
+
+  const entry = options.notes.getForState(options.state);
+  if (!entry.hasNotes) {
+    section.append(textElement(document, "p", "No notes"));
+    return section;
+  }
+
+  for (const block of entry.blocks) {
+    section.append(renderNoteBlock(document, block));
+  }
+
+  return section;
+}
+
+function renderNoteBlock(
+  document: PresenterDocument,
+  block: SpeakerNoteBlock,
+): PresenterElement {
+  switch (block.type) {
+    case "heading":
+      return textElement(document, `h${block.level + 1}`, block.text);
+    case "list": {
+      const list = createElement(document, "ul");
+      for (const item of block.items) {
+        list.append(textElement(document, "li", item));
+      }
+      return list;
+    }
+    case "code":
+      return textElement(document, "pre", block.text);
+    case "paragraph":
+      return textElement(document, "p", block.text);
+  }
+}
+
+function presenterControls(
+  document: PresenterDocument,
+  options: PresenterRenderOptions,
+): PresenterElement {
+  const section = createElement(document, "section");
+  section.setAttribute("data-velumo-presenter-controls", "true");
+  section.append(
+    commandButton(
+      document,
+      "Previous",
+      "data-velumo-presenter-previous-button",
+      "previous",
+      options,
+    ),
+    commandButton(
+      document,
+      "Next",
+      "data-velumo-presenter-next-button",
+      "next",
+      options,
+    ),
+    commandButton(
+      document,
+      "Reset timer",
+      "data-velumo-presenter-reset-button",
+      "resetTimer",
+      options,
+    ),
+  );
+  return section;
+}
+
+function commandButton(
+  document: PresenterDocument,
+  label: string,
+  attributeName: string,
+  command: PresenterCommand,
+  options: PresenterRenderOptions,
+): PresenterElement {
+  const button = createElement(document, "button");
+  button.setAttribute(attributeName, "true");
+  button.textContent = label;
+  button.addEventListener?.("click", () => {
+    if (command === "resetTimer") {
+      options.timer.reset();
+    }
+    options.commandPublisher?.publishCommand(command);
+  });
+  return button;
+}
+
+function renderPresenterError(root: PresenterRoot, error: unknown): void {
+  const section = createElement(root.ownerDocument, "section");
+  section.setAttribute("data-velumo-presenter-error", "mount");
+  section.append(
+    textElement(root.ownerDocument, "h1", "Presenter mount error"),
+  );
+  section.append(
+    textElement(
+      root.ownerDocument,
+      "p",
+      error instanceof Error ? error.message : "Unknown presenter error",
+    ),
+  );
+  root.replaceChildren(section);
+}
+
+function slideById(
+  manifest: Manifest,
+  slideId: string,
+): SlideEntry | undefined {
+  return manifest.slides.find((slide) => slide.id === slideId);
+}
+
+function slideSummary(slide: SlideEntry): string {
+  const contentLayer = slide.layers?.find(
+    (layer) => typeof layer.content === "string",
+  );
+  const content =
+    typeof contentLayer?.content === "string" ? contentLayer.content : slide.id;
+  const firstLine = content
+    .split(/\n/)
+    .map((line) => line.replace(/^#+\s*/, "").trim())
+    .find((line) => line.length > 0);
+
+  return firstLine ?? slide.id;
+}
+
+function textElement(
+  document: PresenterDocument,
+  tagName: string,
+  text: string,
+): PresenterElement {
+  const element = createElement(document, tagName);
+  element.textContent = text;
+  return element;
+}
+
+function createElement(
+  document: PresenterDocument,
+  tagName: string,
+): PresenterElement {
+  return document.createElement(tagName) as PresenterElement;
+}
+
+function formatElapsed(elapsedMs: number): string {
+  const totalSeconds = Math.floor(elapsedMs / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+function isCommandPublisher(
+  sync: PresenterMountOptions["sync"],
+): sync is PresenterCommandPublisher {
+  return (
+    sync !== false &&
+    sync !== undefined &&
+    "publishCommand" in sync &&
+    typeof sync.publishCommand === "function"
+  );
+}
+
+function isInjectedSync(
+  sync: PresenterMountOptions["sync"],
+): sync is PresenterInjectedSync {
+  return (
+    sync !== false &&
+    sync !== undefined &&
+    "channel" in sync &&
+    "instanceId" in sync
+  );
+}
+
+function createPresenterSyncConnection(
+  syncOption: PresenterMountOptions["sync"],
+  onState: (state: RuntimeState) => void,
+): PresenterSyncConnection {
+  if (syncOption === false) {
+    return {};
+  }
+
+  if (isInjectedSync(syncOption)) {
+    return connectPresenterSync(syncOption, onState);
+  }
+
+  if (isCommandPublisher(syncOption)) {
+    return { commandPublisher: syncOption };
+  }
+
+  const injectedSync = createDefaultSync();
+  if (injectedSync === undefined) {
+    return {};
+  }
+
+  return connectPresenterSync(injectedSync, onState);
+}
+
+function connectPresenterSync(
+  injectedSync: PresenterInjectedSync,
+  onState: (state: RuntimeState) => void,
+): PresenterSyncConnection {
+  const sync = createPresenterSync({
+    channel: injectedSync.channel,
+    instanceId: injectedSync.instanceId,
+    role: "presenter",
+    onState,
+  });
+
+  return { commandPublisher: sync, sync };
+}
+
+function startTimerUpdates(
+  options: PresenterMountOptions,
+  onTick: () => void,
+): (() => void) | undefined {
+  const scheduler = options.timerScheduler ?? defaultTimerScheduler();
+
+  if (scheduler === undefined) {
+    return undefined;
+  }
+
+  const intervalId = scheduler.setInterval(
+    onTick,
+    options.timerIntervalMs ?? 1000,
+  );
+  (intervalId as { unref?: () => void }).unref?.();
+
+  return () => scheduler.clearInterval?.(intervalId);
+}
+
+function defaultTimerScheduler(): PresenterTimerScheduler | undefined {
+  const setIntervalRef = globalThis.setInterval;
+  const clearIntervalRef = globalThis.clearInterval;
+
+  if (setIntervalRef === undefined || clearIntervalRef === undefined) {
+    return undefined;
+  }
+
+  return {
+    setInterval(handler, ms) {
+      return setIntervalRef(handler, ms);
+    },
+    clearInterval(id) {
+      clearIntervalRef(id as ReturnType<typeof setInterval>);
+    },
+  };
+}
+
+function createDefaultSync(): PresenterInjectedSync | undefined {
+  const channel = createDefaultChannel();
+
+  return channel === undefined
+    ? undefined
+    : {
+        channel,
+        instanceId: createInstanceId(),
+      };
+}
+
+function createDefaultChannel(): PresenterSyncChannel | undefined {
+  const BroadcastChannelCtor = (globalThis as PresenterWindowGlobals)
+    .BroadcastChannel;
+  if (BroadcastChannelCtor === undefined) {
+    return undefined;
+  }
+
+  const channel = new BroadcastChannelCtor("velumo-presenter");
+  channel.unref?.();
+  return channel;
+}
+
+function createInstanceId(): string {
+  return (
+    (globalThis as PresenterWindowGlobals).crypto?.randomUUID?.() ??
+    `presenter-${Math.random().toString(36).slice(2)}`
+  );
+}