pdf-presenter 1.0.0

package/src/ui/modules/recording.js

@@ -0,0 +1,268 @@
+// Presenter audio recording subsystem.
+//
+// Wraps MediaRecorder, tracks a slide-change timeline so the user can tell
+// which slide was on screen during which audio range, and hands finished
+// recordings to a createRecordingDialog instance for save/abandon.
+//
+// Public API: { onSlideChanged(newSlide) } — orchestrator calls this from
+// its show() function whenever the presenter advances or rewinds.
+
+const TICK_INTERVAL_MS = 250;
+
+const MIME_CANDIDATES = [
+  "audio/webm;codecs=opus",
+  "audio/webm",
+  "audio/ogg;codecs=opus",
+  "audio/mp4",
+  "audio/mpeg",
+];
+
+function pickRecorderMime() {
+  if (typeof MediaRecorder === "undefined") return null;
+  for (const c of MIME_CANDIDATES) {
+    try {
+      if (MediaRecorder.isTypeSupported(c)) return c;
+    } catch {
+      /* ignore */
+    }
+  }
+  return null;
+}
+
+function formatTimeMs(ms) {
+  const totalSec = Math.max(0, Math.floor(ms / 1000));
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+function timestampNow() {
+  const d = new Date();
+  const p = (n) => String(n).padStart(2, "0");
+  return (
+    d.getFullYear().toString() +
+    p(d.getMonth() + 1) +
+    p(d.getDate()) +
+    p(d.getHours()) +
+    p(d.getMinutes()) +
+    p(d.getSeconds())
+  );
+}
+
+export function createRecorder({
+  config,
+  getCurrentSlide,
+  dialog,
+  startBtn,
+  pauseBtn,
+  stopBtn,
+  elapsedEl,
+  labelEl,
+  indicatorEl,
+}) {
+  let mediaRecorder = null;
+  let recordedChunks = [];
+  let startSlide = null;
+  let startedAtIso = null;
+  let elapsedMs = 0;
+  let lastTickAt = 0;
+  let tickHandle = null;
+  // Segment timeline: each item is {slide, fromMs, toMs?}.
+  // The last entry is the open segment (no toMs until closed).
+  let segments = [];
+
+  function pdfBaseName() {
+    const name = config.pdfName || "slides.pdf";
+    return name.replace(/\.pdf$/i, "");
+  }
+
+  function buildRecordingFilename(s, e) {
+    // Honour the user-requested .mp3 naming convention regardless of the
+    // actual container produced by MediaRecorder — browsers cannot emit MP3
+    // natively. See README for details on transcoding if needed.
+    return `${pdfBaseName()}_${s}_to_${e}_at_${timestampNow()}.mp3`;
+  }
+
+  function currentElapsedMsPrecise() {
+    if (tickHandle !== null) {
+      return elapsedMs + (Date.now() - lastTickAt);
+    }
+    return elapsedMs;
+  }
+
+  function closeOpenSegment(at) {
+    const open = segments[segments.length - 1];
+    if (open && open.toMs === undefined) open.toMs = at;
+  }
+
+  function onSlideChanged(newSlide) {
+    // Only track slide changes while actively recording — paused time is
+    // excluded so paused-nav doesn't pollute the timeline.
+    if (!mediaRecorder || mediaRecorder.state !== "recording") return;
+    const open = segments[segments.length - 1];
+    if (!open || open.slide === newSlide) return;
+    const at = currentElapsedMsPrecise();
+    open.toMs = at;
+    segments.push({ slide: newSlide, fromMs: at });
+  }
+
+  function buildMetadata(rec) {
+    return {
+      audio: rec.filename,
+      pdf: config.pdfName || null,
+      startedAt: startedAtIso,
+      durationMs: rec.durationMs,
+      duration: formatTimeMs(rec.durationMs),
+      mimeType: rec.blob.type || "",
+      segments: rec.segments.map((seg) => ({
+        slide: seg.slide,
+        fromMs: seg.fromMs,
+        toMs: seg.toMs,
+        from: formatTimeMs(seg.fromMs),
+        to: formatTimeMs(seg.toMs),
+      })),
+    };
+  }
+
+  function updateUI(state) {
+    if (state === "recording") {
+      startBtn.disabled = true;
+      pauseBtn.disabled = false;
+      pauseBtn.textContent = "Pause";
+      stopBtn.disabled = false;
+      indicatorEl.classList.add("active");
+      indicatorEl.classList.remove("paused");
+      labelEl.textContent = "Recording";
+    } else if (state === "paused") {
+      startBtn.disabled = true;
+      pauseBtn.disabled = false;
+      pauseBtn.textContent = "Resume";
+      stopBtn.disabled = false;
+      indicatorEl.classList.remove("active");
+      indicatorEl.classList.add("paused");
+      labelEl.textContent = "Paused";
+    } else {
+      startBtn.disabled = false;
+      pauseBtn.disabled = true;
+      pauseBtn.textContent = "Pause";
+      stopBtn.disabled = true;
+      indicatorEl.classList.remove("active", "paused");
+      labelEl.textContent = "Audio";
+      elapsedEl.textContent = "00:00";
+    }
+  }
+
+  function startTicker() {
+    lastTickAt = Date.now();
+    if (tickHandle !== null) return;
+    tickHandle = setInterval(() => {
+      const now = Date.now();
+      elapsedMs += now - lastTickAt;
+      lastTickAt = now;
+      elapsedEl.textContent = formatTimeMs(elapsedMs);
+    }, TICK_INTERVAL_MS);
+  }
+
+  function stopTicker() {
+    if (tickHandle !== null) {
+      clearInterval(tickHandle);
+      tickHandle = null;
+    }
+  }
+
+  async function start() {
+    if (mediaRecorder) return;
+    let stream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    } catch (err) {
+      labelEl.textContent = "Mic denied";
+      console.error("Microphone access denied:", err);
+      return;
+    }
+    const mime = pickRecorderMime();
+    try {
+      mediaRecorder = mime
+        ? new MediaRecorder(stream, { mimeType: mime })
+        : new MediaRecorder(stream);
+    } catch (err) {
+      stream.getTracks().forEach((t) => t.stop());
+      labelEl.textContent = "Unsupported";
+      console.error("MediaRecorder init failed:", err);
+      return;
+    }
+    recordedChunks = [];
+    elapsedMs = 0;
+    startSlide = getCurrentSlide();
+    startedAtIso = new Date().toISOString();
+    segments = [{ slide: startSlide, fromMs: 0 }];
+
+    mediaRecorder.addEventListener("dataavailable", (ev) => {
+      if (ev.data && ev.data.size > 0) recordedChunks.push(ev.data);
+    });
+    mediaRecorder.addEventListener("stop", () => {
+      stream.getTracks().forEach((t) => t.stop());
+      const finalMs = currentElapsedMsPrecise();
+      stopTicker();
+      closeOpenSegment(finalMs);
+      const endSlide = getCurrentSlide();
+      const blob = new Blob(recordedChunks, {
+        type: mediaRecorder.mimeType || mime || "audio/webm",
+      });
+      const filename = buildRecordingFilename(startSlide, endSlide);
+      const pending = {
+        blob,
+        startSlide,
+        endSlide,
+        durationMs: finalMs,
+        filename,
+        metaFilename: filename.replace(/\.[^./\\]+$/, "") + ".meta.json",
+        segments: segments.slice(),
+      };
+      pending.metadata = buildMetadata(pending);
+      mediaRecorder = null;
+      recordedChunks = [];
+      segments = [];
+      updateUI("idle");
+      dialog.open(pending);
+    });
+
+    mediaRecorder.start(1000);
+    updateUI("recording");
+    startTicker();
+  }
+
+  function togglePause() {
+    if (!mediaRecorder) return;
+    if (mediaRecorder.state === "recording") {
+      // Close the open segment at the pause boundary so toMs reflects audio
+      // time up to the pause; we'll re-open a fresh segment on resume.
+      const at = currentElapsedMsPrecise();
+      closeOpenSegment(at);
+      mediaRecorder.pause();
+      stopTicker();
+      updateUI("paused");
+    } else if (mediaRecorder.state === "paused") {
+      mediaRecorder.resume();
+      startTicker();
+      // Re-open a segment on whichever slide is currently on screen — if the
+      // presenter navigated during the pause, this captures the new slide.
+      const at = currentElapsedMsPrecise();
+      segments.push({ slide: getCurrentSlide(), fromMs: at });
+      updateUI("recording");
+    }
+  }
+
+  function stop() {
+    if (!mediaRecorder) return;
+    if (mediaRecorder.state !== "inactive") mediaRecorder.stop();
+  }
+
+  startBtn.addEventListener("click", () => void start());
+  pauseBtn.addEventListener("click", togglePause);
+  stopBtn.addEventListener("click", stop);
+
+  updateUI("idle");
+
+  return { onSlideChanged };
+}

package/src/ui/modules/resizable-layout.js

@@ -0,0 +1,146 @@
+// Draggable split handles for the presenter layout.
+//
+// Three independent splits:
+//   --col-left       : on layoutEl        — width of the left column
+//   --row-top-left   : on leftColEl       — height of the current-slide row
+//                                            inside the left column
+//   --row-top-right  : on rightColEl      — height of the next-slide row
+//                                            inside the right column
+//
+// Each is clamped to [MIN_PCT, MAX_PCT] so no pane can fully collapse,
+// and persisted to localStorage so the split survives refreshes.
+
+const STORAGE_KEY = "pdf-presenter-layout";
+const MIN_PCT = 20;
+const MAX_PCT = 85;
+const DEFAULT_COL_LEFT_PCT = 66;
+const DEFAULT_ROW_TOP_PCT = 60;
+
+function clampPct(n) {
+  if (!Number.isFinite(n)) return null;
+  return Math.max(MIN_PCT, Math.min(MAX_PCT, n));
+}
+
+function loadPersisted() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") return null;
+    const col = clampPct(Number(parsed.colLeftPct));
+    // Migrate an older single `rowTopPct` value into both left and right.
+    const legacyRow = clampPct(Number(parsed.rowTopPct));
+    const left = clampPct(Number(parsed.rowTopLeftPct));
+    const right = clampPct(Number(parsed.rowTopRightPct));
+    return {
+      colLeftPct: col ?? DEFAULT_COL_LEFT_PCT,
+      rowTopLeftPct: left ?? legacyRow ?? DEFAULT_ROW_TOP_PCT,
+      rowTopRightPct: right ?? legacyRow ?? DEFAULT_ROW_TOP_PCT,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function createResizableLayout({
+  layoutEl,
+  colDividerEl,
+  leftColEl,
+  rowDividerLeftEl,
+  rightColEl,
+  rowDividerRightEl,
+  onResize,
+}) {
+  const persisted = loadPersisted();
+  let colLeftPct = persisted?.colLeftPct ?? DEFAULT_COL_LEFT_PCT;
+  let rowTopLeftPct = persisted?.rowTopLeftPct ?? DEFAULT_ROW_TOP_PCT;
+  let rowTopRightPct = persisted?.rowTopRightPct ?? DEFAULT_ROW_TOP_PCT;
+
+  function apply() {
+    layoutEl.style.setProperty("--col-left", `${colLeftPct}%`);
+    leftColEl.style.setProperty("--row-top-left", `${rowTopLeftPct}%`);
+    rightColEl.style.setProperty("--row-top-right", `${rowTopRightPct}%`);
+  }
+
+  function persist() {
+    try {
+      localStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({ colLeftPct, rowTopLeftPct, rowTopRightPct }),
+      );
+    } catch {
+      /* storage disabled / quota — ignore */
+    }
+  }
+
+  // Axis-agnostic drag: picks clientX/rect.width for "col", clientY/rect.height
+  // for "row". `containerEl` is the element whose bounding box we measure —
+  // for the col divider that's the whole layout, for a row divider that's
+  // its own column container.
+  function attachDrag({ dividerEl, containerEl, axis, get, set }) {
+    dividerEl.addEventListener("mousedown", (ev) => {
+      ev.preventDefault();
+      const rect = containerEl.getBoundingClientRect();
+      const startValue = get();
+      const startX = ev.clientX;
+      const startY = ev.clientY;
+      dividerEl.classList.add("dragging");
+      const prevCursor = document.body.style.cursor;
+      const prevSelect = document.body.style.userSelect;
+      document.body.style.cursor = axis === "col" ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+
+      function onMove(mev) {
+        const next =
+          axis === "col"
+            ? clampPct(startValue + ((mev.clientX - startX) / rect.width) * 100)
+            : clampPct(startValue + ((mev.clientY - startY) / rect.height) * 100);
+        if (next !== null) {
+          set(next);
+          apply();
+        }
+      }
+      function onUp() {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+        dividerEl.classList.remove("dragging");
+        document.body.style.cursor = prevCursor;
+        document.body.style.userSelect = prevSelect;
+        persist();
+        if (typeof onResize === "function") onResize();
+      }
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    });
+  }
+
+  attachDrag({
+    dividerEl: colDividerEl,
+    containerEl: layoutEl,
+    axis: "col",
+    get: () => colLeftPct,
+    set: (v) => {
+      colLeftPct = v;
+    },
+  });
+  attachDrag({
+    dividerEl: rowDividerLeftEl,
+    containerEl: leftColEl,
+    axis: "row",
+    get: () => rowTopLeftPct,
+    set: (v) => {
+      rowTopLeftPct = v;
+    },
+  });
+  attachDrag({
+    dividerEl: rowDividerRightEl,
+    containerEl: rightColEl,
+    axis: "row",
+    get: () => rowTopRightPct,
+    set: (v) => {
+      rowTopRightPct = v;
+    },
+  });
+
+  apply();
+}

package/src/ui/modules/timer.js

@@ -0,0 +1,72 @@
+// Presenter timer subsystem. Supports count-up and count-down (with warn/danger
+// colour bands), click-to-pause on the timer element itself, and a separate
+// reset button. All state is private to the factory closure.
+
+const TICK_INTERVAL_MS = 250;
+
+export function createTimer({ timerEl, resetBtnEl, countdownMs }) {
+  let startedAt = Date.now();
+  let pausedAt = null; // ms timestamp when paused, null while running
+
+  function elapsed() {
+    const base = pausedAt !== null ? pausedAt : Date.now();
+    return base - startedAt;
+  }
+
+  function reset() {
+    startedAt = Date.now();
+    // Reset leaves pause state untouched — a reset while paused starts
+    // the next run-cycle from 00:00 but still paused.
+    if (pausedAt !== null) pausedAt = startedAt;
+    tick();
+  }
+
+  function togglePause() {
+    if (pausedAt === null) {
+      pausedAt = Date.now();
+    } else {
+      // Shift startedAt forward by the pause duration so elapsed continues
+      // from where we left off.
+      startedAt += Date.now() - pausedAt;
+      pausedAt = null;
+    }
+    tick();
+  }
+
+  function formatMs(ms) {
+    const totalSec = Math.max(0, Math.floor(ms / 1000));
+    const m = Math.floor(totalSec / 60);
+    const s = totalSec % 60;
+    return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+  }
+
+  function tick() {
+    const ms = elapsed();
+    if (countdownMs !== null) {
+      const remaining = countdownMs - ms;
+      timerEl.textContent = formatMs(remaining >= 0 ? remaining : -remaining);
+      timerEl.classList.remove("warn", "danger");
+      if (remaining <= 60 * 1000) timerEl.classList.add("danger");
+      else if (remaining <= 5 * 60 * 1000) timerEl.classList.add("warn");
+    } else {
+      timerEl.textContent = formatMs(ms);
+    }
+    timerEl.classList.toggle("paused", pausedAt !== null);
+  }
+
+  timerEl.addEventListener("click", (ev) => {
+    ev.preventDefault();
+    togglePause();
+    timerEl.blur();
+  });
+  resetBtnEl.addEventListener("click", (ev) => {
+    ev.preventDefault();
+    reset();
+    resetBtnEl.blur();
+  });
+
+  setInterval(tick, TICK_INTERVAL_MS);
+  tick();
+
+  return { reset, togglePause };
+}

package/src/ui/presenter-main.js

@@ -0,0 +1,169 @@
+// Presenter view entry. Loaded via presenter.js barrel from presenter.html.
+// This file is a thin orchestrator — all subsystem logic lives under
+// ./modules/ and is composed here via factory functions.
+
+import {
+  CHANNEL_NAME,
+  readConfig,
+  loadDocument,
+  loadNotes,
+  renderPage,
+  clampSlide,
+} from "./modules/pdf-render.js";
+import { createTimer } from "./modules/timer.js";
+import { createNotesEditor } from "./modules/notes-editor.js";
+import { wireImportExport } from "./modules/import-export.js";
+import { createRecordingDialog } from "./modules/recording-dialog.js";
+import { createRecorder } from "./modules/recording.js";
+import { createResizableLayout } from "./modules/resizable-layout.js";
+
+export async function initPresenter() {
+  const config = readConfig();
+  const pdf = await loadDocument(config.pdfUrl);
+  const total = pdf.numPages;
+  const notesFile = await loadNotes(config.notesUrl);
+  const notes = (notesFile && notesFile.notes) || {};
+
+  const currentCanvas = document.getElementById("current-canvas");
+  const nextCanvas = document.getElementById("next-canvas");
+  const notesBody = document.getElementById("notes-body");
+  const notesStatus = document.getElementById("notes-status");
+  const notesHint = document.getElementById("notes-hint");
+  const counter = document.getElementById("counter");
+  const timerEl = document.getElementById("timer");
+
+  const channel = new BroadcastChannel(CHANNEL_NAME);
+  let currentSlide = 1;
+  let frozen = false;
+  let blackedOut = false;
+
+  const editor = createNotesEditor({
+    notesBody,
+    statusEl: notesStatus,
+    hintEl: notesHint,
+    notesCache: notes,
+    getCurrentSlide: () => currentSlide,
+  });
+
+  async function show(n) {
+    const target = clampSlide(n, total);
+    const slideChanged = target !== currentSlide;
+    await editor.flushPending();
+    currentSlide = target;
+    counter.textContent = `${currentSlide} / ${total}`;
+    editor.loadForSlide(currentSlide);
+    if (slideChanged) recorder.onSlideChanged(currentSlide);
+    await Promise.all([
+      renderPage(pdf, currentSlide, currentCanvas),
+      currentSlide < total
+        ? renderPage(pdf, currentSlide + 1, nextCanvas)
+        : clearNext(),
+    ]);
+    channel.postMessage({ type: "slide", slide: currentSlide });
+  }
+
+  function clearNext() {
+    const ctx = nextCanvas.getContext("2d");
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, nextCanvas.width, nextCanvas.height);
+  }
+
+  // ---- Import / export ----
+  wireImportExport({
+    exportBtn: document.getElementById("export-notes"),
+    loadBtn: document.getElementById("load-notes"),
+    loadInput: document.getElementById("load-notes-input"),
+    statusEl: document.getElementById("notes-action-status"),
+    config,
+    notesCache: notes,
+    flushPending: editor.flushPending,
+    onLoaded: () => editor.loadForSlide(currentSlide),
+  });
+
+  // ---- Audio recording ----
+  const dialog = createRecordingDialog({
+    dialogEl: document.getElementById("record-dialog"),
+    fileEl: document.getElementById("record-dialog-file"),
+    rangeEl: document.getElementById("record-dialog-range"),
+    durationEl: document.getElementById("record-dialog-duration"),
+    sizeEl: document.getElementById("record-dialog-size"),
+    segmentsEl: document.getElementById("record-dialog-segments"),
+    errorEl: document.getElementById("record-dialog-error"),
+    saveBtn: document.getElementById("record-dialog-save"),
+    abandonBtn: document.getElementById("record-dialog-abandon"),
+  });
+
+  const recorder = createRecorder({
+    config,
+    getCurrentSlide: () => currentSlide,
+    dialog,
+    startBtn: document.getElementById("record-start"),
+    pauseBtn: document.getElementById("record-pause"),
+    stopBtn: document.getElementById("record-stop"),
+    elapsedEl: document.getElementById("record-elapsed"),
+    labelEl: document.getElementById("record-label"),
+    indicatorEl: document.getElementById("record-indicator"),
+  });
+
+  function toggleFreeze() {
+    frozen = !frozen;
+    channel.postMessage({ type: "freeze", value: frozen });
+  }
+
+  function toggleBlack() {
+    blackedOut = !blackedOut;
+    channel.postMessage({ type: "black", value: blackedOut });
+  }
+
+  window.addEventListener("keydown", (ev) => {
+    // When the notes editor is focused, let keys behave normally — but give
+    // Escape as an explicit way to leave the editor and return to slide nav.
+    if (editor.isFocused()) {
+      if (ev.key === "Escape") {
+        ev.preventDefault();
+        notesBody.blur();
+      }
+      return;
+    }
+    if (ev.key === "ArrowRight" || ev.key === "PageDown" || ev.key === " ") {
+      ev.preventDefault();
+      show(currentSlide + 1);
+    } else if (ev.key === "ArrowLeft" || ev.key === "PageUp") {
+      ev.preventDefault();
+      show(currentSlide - 1);
+    } else if (ev.key === "Home") {
+      show(1);
+    } else if (ev.key === "End") {
+      show(total);
+    } else if (ev.key === "f" || ev.key === "F") {
+      toggleFreeze();
+    } else if (ev.key === "b" || ev.key === "B") {
+      toggleBlack();
+    } else if (ev.key === "r" || ev.key === "R") {
+      timer.reset();
+    }
+  });
+
+  window.addEventListener("resize", () => show(currentSlide));
+
+  // ---- Timer ----
+  const timerResetBtn = document.getElementById("timer-reset");
+  const countdownMs =
+    typeof config.timerMinutes === "number" && config.timerMinutes > 0
+      ? config.timerMinutes * 60 * 1000
+      : null;
+  const timer = createTimer({ timerEl, resetBtnEl: timerResetBtn, countdownMs });
+
+  // ---- Resizable layout dividers ----
+  createResizableLayout({
+    layoutEl: document.querySelector(".layout"),
+    colDividerEl: document.getElementById("divider-col"),
+    leftColEl: document.querySelector(".col-left"),
+    rowDividerLeftEl: document.getElementById("divider-row-left"),
+    rightColEl: document.querySelector(".col-right"),
+    rowDividerRightEl: document.getElementById("divider-row-right"),
+    onResize: () => show(currentSlide),
+  });
+
+  await show(1);
+}