pa_encoder 0.1.0 → 0.2.0

package/dist/ui/encoder.js

@@ -0,0 +1,368 @@
+function qp(name) {
+  return new URL(location.href).searchParams.get(name);
+}
+
+const $ = (id) => document.getElementById(id);
+
+const entryEl = $("entry");
+const modeEl = $("mode");
+const canvasEl = $("canvas");
+const fpsEl = $("fps");
+const exporterEl = $("exporter");
+
+const policyEl = $("policy");
+const concurrencyEl = $("concurrency");
+const maxQueueEl = $("maxQueue");
+const durationEl = $("duration");
+
+const framesEl = $("frames");
+const warmupEl = $("warmup");
+
+const detailsLive = $("detailsLive");
+const detailsFrame = $("detailsFrame");
+
+const btnReload = $("btnReload");
+const btnStart = $("btnStart");
+const btnStop = $("btnStop");
+
+const btnHide = $("btnHide");
+const btnCompact = $("btnCompact");
+const btnDock = $("btnDock");
+
+const btnPassthrough = $("btnPassthrough");
+const btnFocus = $("btnFocus");
+
+const logEl = $("log");
+const preview = $("preview");
+
+let running = false;
+let stopTimer = null;
+
+const docks = ["dock-br", "dock-bl", "dock-tr", "dock-tl"];
+let dockIndex = 0;
+
+let passthrough = false;
+
+function appendLog(line) {
+  const s = String(line);
+  const needsNL = logEl.textContent && !logEl.textContent.endsWith("\n");
+  logEl.textContent += (needsNL ? "\n" : "") + s;
+  logEl.scrollTop = logEl.scrollHeight;
+}
+
+function setRunning(v) {
+  running = v;
+  btnStart.disabled = v;
+  btnStop.disabled = !v;
+
+  // recording starts -> enable passthrough so canvas can receive interaction
+  if (v) {
+    setPassthrough(true, { silent: true });
+    // best-effort focus request
+    postToPreview("pa_focus_canvas", {
+      canvasSelector: selectedCanvasSelector(),
+    });
+  }
+}
+
+function buildPreviewUrl(entry) {
+  const e = entry || "/src/main.js";
+  return `/__pa_encoder__/ui/preview.html?entry=${encodeURIComponent(e)}`;
+}
+
+function buildPreviewAutostartUrl(entry, payload) {
+  const e = entry || "/src/main.js";
+  const json = JSON.stringify(payload);
+  const b64 = btoa(json);
+  return (
+    `/__pa_encoder__/ui/preview.html?entry=${encodeURIComponent(e)}` +
+    `&autostart=1&payload=${encodeURIComponent(b64)}`
+  );
+}
+
+function reloadPreview() {
+  const entry = entryEl.value.trim() || "/src/main.js";
+  preview.src = buildPreviewUrl(entry);
+  appendLog(`reloading preview (entry=${entry})`);
+}
+
+function postToPreview(type, payload = {}) {
+  const w = preview.contentWindow;
+  if (!w) return false;
+  w.postMessage({ type, payload }, "*");
+  return true;
+}
+
+function fillCanvasDropdown(canvases) {
+  const prev = canvasEl.value;
+
+  canvasEl.innerHTML = "";
+  const opt0 = document.createElement("option");
+  opt0.value = "";
+  opt0.textContent = canvases.length ? "(auto)" : "(no canvas found)";
+  canvasEl.appendChild(opt0);
+
+  for (const c of canvases) {
+    const opt = document.createElement("option");
+    opt.value = c.selector;
+    opt.textContent = c.label || c.selector;
+    canvasEl.appendChild(opt);
+  }
+
+  const hasPrev = Array.from(canvasEl.options).some((o) => o.value === prev);
+  if (hasPrev) canvasEl.value = prev;
+}
+
+function selectedCanvasSelector() {
+  return canvasEl.value || "canvas";
+}
+
+function exporterPayload() {
+  const mode = exporterEl.value; // zip|fs|best
+  const zipName = "frames.zip";
+  return { exporter: { mode, prefer: "fs", zipName } };
+}
+
+function setDockByIndex(i) {
+  for (const d of docks) document.body.classList.remove(d);
+  dockIndex = ((i % docks.length) + docks.length) % docks.length;
+  document.body.classList.add(docks[dockIndex]);
+}
+
+function cycleDock() {
+  setDockByIndex(dockIndex + 1);
+  appendLog(`dock: ${docks[dockIndex]}`);
+}
+
+function setPassthrough(on, { silent = false } = {}) {
+  passthrough = !!on;
+  document.body.classList.toggle("passthrough", passthrough);
+  btnPassthrough.textContent = `Passthrough: ${passthrough ? "On" : "Off"}`;
+  if (!silent) appendLog(`passthrough: ${passthrough ? "on" : "off"}`);
+}
+
+function focusSketch() {
+  // Best-effort:
+  // - Enable passthrough so user can click canvas
+  // - Ask preview to focus the canvas
+  setPassthrough(true);
+  postToPreview("pa_focus_canvas", {
+    canvasSelector: selectedCanvasSelector(),
+  });
+  appendLog("focus sketch: click the canvas if focus is not acquired");
+}
+
+function syncModeUI() {
+  const isFrame = modeEl.value === "frame";
+  detailsFrame.style.display = isFrame ? "block" : "none";
+  detailsLive.style.display = isFrame ? "none" : "block";
+  if (isFrame) detailsFrame.open = true;
+  else detailsLive.open = true;
+}
+
+function currentPayload() {
+  const fps = Number(fpsEl.value || "60");
+  const kind = modeEl.value === "frame" ? "frame" : "live";
+  const canvasSelector = selectedCanvasSelector();
+
+  if (kind === "frame") {
+    const frames = Math.max(1, Math.floor(Number(framesEl.value || "300")));
+    const warmup = Math.max(0, Math.floor(Number(warmupEl.value || "0")));
+    return {
+      kind: "frame",
+      fps,
+      frames,
+      warmup,
+      canvasSelector,
+      ...exporterPayload(),
+    };
+  }
+
+  const duration = Math.max(1, Number(durationEl.value || "10"));
+  return {
+    kind: "live",
+    fps,
+    duration,
+    canvasSelector,
+    policy: policyEl.value,
+    concurrency: Math.max(1, Math.floor(Number(concurrencyEl.value || "2"))),
+    maxQueue: Math.max(0, Math.floor(Number(maxQueueEl.value || "8"))),
+    ...exporterPayload(),
+  };
+}
+
+function start() {
+  if (running) return;
+
+  const payload = currentPayload();
+  const entry = entryEl.value.trim() || "/src/main.js";
+
+  setRunning(true);
+  appendLog(
+    `start: ${payload.kind} fps=${payload.fps} canvas=${payload.canvasSelector}`
+  );
+
+  // start recording -> prefer passthrough + focus canvas
+  setPassthrough(true, { silent: true });
+
+  if (payload.kind === "frame") {
+    // Frame mode: reload preview with autostart so virtual-time hooks apply before sketch starts
+    preview.src = buildPreviewAutostartUrl(entry, payload);
+    return;
+  }
+
+  const ok = postToPreview("pa_start_frame_capture", payload);
+  if (!ok) {
+    setRunning(false);
+    appendLog("ERROR: preview iframe not ready");
+    return;
+  }
+
+  clearTimeout(stopTimer);
+  stopTimer = setTimeout(() => stop(), payload.duration * 1000);
+}
+
+function stop() {
+  if (!running) return;
+
+  clearTimeout(stopTimer);
+  stopTimer = null;
+
+  postToPreview("pa_stop", {});
+  appendLog("stop requested...");
+}
+
+/* UI events */
+btnReload.addEventListener("click", () => reloadPreview());
+btnStart.addEventListener("click", () => start());
+btnStop.addEventListener("click", () => stop());
+
+btnHide.addEventListener("click", () =>
+  document.body.classList.toggle("hidden")
+);
+btnCompact.addEventListener("click", () =>
+  document.body.classList.toggle("compact")
+);
+btnDock.addEventListener("click", () => cycleDock());
+
+btnPassthrough.addEventListener("click", () => setPassthrough(!passthrough));
+btnFocus.addEventListener("click", () => focusSketch());
+
+modeEl.addEventListener("change", () => syncModeUI());
+
+/**
+ * Hotkeys behavior:
+ * - Only active when NOT recording (running === false).
+ * - While recording, UI does not call preventDefault or consume keys.
+ *   This minimizes interference with live keyboard interaction in the sketch.
+ */
+window.addEventListener("keydown", (e) => {
+  if (running) return; // do not intercept any keys while recording
+
+  const active = document.activeElement?.tagName?.toLowerCase() || "";
+  const isTyping =
+    active === "input" || active === "textarea" || active === "select";
+  if (isTyping) return;
+
+  const k = (e.key || "").toLowerCase();
+
+  if (k === "h") {
+    e.preventDefault();
+    document.body.classList.toggle("hidden");
+    return;
+  }
+
+  if (k === "p") {
+    e.preventDefault();
+    setPassthrough(!passthrough);
+    return;
+  }
+
+  if (k === "c") {
+    e.preventDefault();
+    document.body.classList.toggle("compact");
+    return;
+  }
+
+  if (k === "d") {
+    e.preventDefault();
+    cycleDock();
+    return;
+  }
+
+  // Space starts recording when idle; during recording we do not bind Space to stop.
+  if (e.code === "Space") {
+    e.preventDefault();
+    start();
+    return;
+  }
+});
+
+/* Messages from preview */
+window.addEventListener("message", (ev) => {
+  const msg = ev.data;
+  if (!msg || typeof msg !== "object") return;
+
+  if (msg.type === "pa_preview_ready") {
+    appendLog(`preview ready (entry=${msg.entry})`);
+    return;
+  }
+
+  if (msg.type === "pa_preview_canvas_list") {
+    const canvases = Array.isArray(msg.canvases) ? msg.canvases : [];
+    fillCanvasDropdown(canvases);
+    return;
+  }
+
+  if (msg.type === "pa_status") {
+    const status = msg.status || "";
+    const message = msg.message || "";
+    appendLog(message ? `${status}: ${message}` : String(status));
+
+    if (status === "idle") {
+      setRunning(false);
+      // optionally return UI control after recording
+      // (do not force passthrough off; user may want to keep interacting)
+      btnStart.focus?.();
+    }
+    if (status === "running") {
+      setRunning(true);
+    }
+    return;
+  }
+
+  if (msg.type === "pa_progress") {
+    const done = Number(msg.done ?? 0);
+    const total = Number(msg.total ?? 0);
+    appendLog(`progress: ${done}/${total}`);
+    return;
+  }
+
+  if (msg.type === "pa_stats") {
+    const safe = { ...msg };
+    delete safe.type;
+    appendLog(`stats: ${JSON.stringify(safe)}`);
+    return;
+  }
+
+  if (msg.type === "pa_error") {
+    appendLog(`ERROR: ${msg.message || "unknown error"}`);
+    setRunning(false);
+  }
+});
+
+/* init */
+(function init() {
+  setDockByIndex(0);
+  setPassthrough(false, { silent: true });
+
+  const entry = qp("entry") || "/src/main.js";
+  entryEl.value = entry;
+
+  setRunning(false);
+  syncModeUI();
+
+  fillCanvasDropdown([]);
+  appendLog("loading preview...");
+  preview.src = buildPreviewUrl(entry);
+})();

package/dist/ui/preview.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>pa_encoder preview</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #111;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module" src="/__pa_encoder__/ui/preview.js"></script>
+  </body>
+</html>

package/dist/ui/preview.js

@@ -0,0 +1,322 @@
+import {
+  virtualTimeCaptureFromStart,
+  startLiveCapture,
+  createBestExporter,
+  createZipExporter,
+  createFsExporter,
+} from "/__pa_encoder__/lib/index.js";
+
+function getQueryParam(name) {
+  return new URL(location.href).searchParams.get(name);
+}
+
+function post(type, data = {}) {
+  try {
+    parent.postMessage({ type, ...data }, "*");
+  } catch {}
+}
+
+async function importEntry(entry) {
+  await import(entry);
+}
+
+function listCanvases() {
+  return Array.from(document.querySelectorAll("canvas")).filter(
+    (c) => c instanceof HTMLCanvasElement
+  );
+}
+
+function buildCanvasList() {
+  const cs = listCanvases();
+  return cs.map((c, i) => {
+    const selector = `canvas:nth-of-type(${i + 1})`;
+    return {
+      index: i,
+      selector,
+      id: c.id || "",
+      className: String(c.className || ""),
+      width: c.width,
+      height: c.height,
+      clientWidth: c.clientWidth,
+      clientHeight: c.clientHeight,
+      label: c.id ? `#${c.id}` : selector,
+    };
+  });
+}
+
+function sendCanvasList() {
+  const canvases = buildCanvasList();
+  post("pa_preview_canvas_list", { count: canvases.length, canvases });
+}
+
+function canvasToBlob(canvas, type = "image/png") {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((b) => {
+      if (b) resolve(b);
+      else reject(new Error("canvas.toBlob() returned null"));
+    }, type);
+  });
+}
+
+function ensureCanvasFocusable(canvas) {
+  try {
+    if (canvas && canvas.tabIndex < 0) canvas.tabIndex = 0;
+  } catch {}
+  try {
+    canvas.style.outline = "none";
+  } catch {}
+}
+
+function focusCanvasBestEffort(canvas) {
+  if (!(canvas instanceof HTMLCanvasElement)) return;
+  ensureCanvasFocusable(canvas);
+  try {
+    canvas.focus({ preventScroll: true });
+  } catch {
+    try {
+      canvas.focus();
+    } catch {}
+  }
+}
+
+async function createExporterFromPayload(p = {}) {
+  const mode = p.exporter?.mode || "best";
+  const prefer = p.exporter?.prefer || "fs";
+  const zipName = p.exporter?.zipName || "frames.zip";
+
+  if (mode === "zip") return await createZipExporter({ zipName });
+  if (mode === "fs") return await createFsExporter();
+  return await createBestExporter({ prefer, zip: { zipName } });
+}
+
+let running = false;
+let stopFlag = false;
+
+window.addEventListener("message", async (ev) => {
+  const msg = ev.data;
+  if (!msg || typeof msg !== "object") return;
+
+  if (msg.type === "pa_stop") {
+    stopFlag = true;
+    return;
+  }
+
+  if (msg.type === "pa_focus_canvas") {
+    const sel = msg.payload?.canvasSelector || "canvas";
+    const c = document.querySelector(sel) || document.querySelector("canvas");
+    if (c instanceof HTMLCanvasElement) focusCanvasBestEffort(c);
+    return;
+  }
+
+  if (msg.type !== "pa_start_frame_capture") return;
+  if (running) return;
+
+  // live는 message로 시작 가능
+  const p = msg.payload || {};
+  if ((p.kind || "live") === "frame") {
+    post("pa_error", {
+      message: "Frame mode requires iframe reload autostart.",
+    });
+    return;
+  }
+
+  await runLive(p);
+});
+
+async function runFrameAutostart(payload, entry) {
+  if (running) return;
+  running = true;
+  stopFlag = false;
+
+  const p = payload || {};
+  const canvasSelector = p.canvasSelector || "canvas";
+
+  post("pa_status", { status: "running", message: "capture starting..." });
+
+  let exporter = null;
+  let didFinalize = false;
+  let firstCanvasFocused = false;
+
+  try {
+    exporter = await createExporterFromPayload(p);
+
+    const fps = Number(p.fps ?? 60);
+    const frames = Number(p.frames ?? 300);
+    const warmup = Number(p.warmup ?? 0);
+    const totalSteps = warmup + frames;
+
+    let written = 0;
+    post("pa_progress", { done: 0, total: frames });
+
+    try {
+      await virtualTimeCaptureFromStart({
+        fps,
+        canvasSelector,
+        canvasWaitFrames: Number(p.canvasWaitFrames ?? 600),
+
+        hookDateNow: true,
+        hookPerformanceNow: true,
+        hookTimers: true,
+
+        frameCount: totalSteps,
+
+        start: async () => {
+          await importEntry(entry);
+          // after import, try focus if canvas already exists
+          const c =
+            document.querySelector(canvasSelector) ||
+            document.querySelector("canvas");
+          if (c instanceof HTMLCanvasElement) {
+            focusCanvasBestEffort(c);
+            firstCanvasFocused = true;
+          }
+        },
+
+        onFrame: async (canvas, i) => {
+          if (!firstCanvasFocused && canvas instanceof HTMLCanvasElement) {
+            focusCanvasBestEffort(canvas);
+            firstCanvasFocused = true;
+          }
+
+          if (stopFlag) throw new Error("stopped");
+          if (i < warmup) return;
+
+          const frameIndex = i - warmup;
+          const blob = await canvasToBlob(canvas, "image/png");
+          await exporter.write(frameIndex, blob);
+
+          written++;
+          post("pa_progress", { done: written, total: frames });
+          post("pa_stats", { written, captured: i + 1 });
+        },
+      });
+    } catch (e) {
+      if ((e?.message ?? "") !== "stopped") throw e;
+      post("pa_status", {
+        status: "running",
+        message: "finalizing (stopped)...",
+      });
+    }
+
+    if (exporter && !didFinalize) {
+      await exporter.finalize();
+      didFinalize = true;
+    }
+
+    post("pa_status", {
+      status: "idle",
+      message: stopFlag ? "stopped (finalized)" : "frame capture finished",
+    });
+  } catch (e) {
+    post("pa_error", { message: e?.message ?? String(e) });
+    post("pa_status", { status: "idle" });
+  } finally {
+    if (exporter && !didFinalize) {
+      try {
+        await exporter.finalize();
+      } catch {}
+    }
+    running = false;
+    stopFlag = false;
+  }
+}
+
+async function runLive(p) {
+  running = true;
+  stopFlag = false;
+
+  const canvasSelector = p.canvasSelector || "canvas";
+  post("pa_status", { status: "running", message: "capture starting..." });
+
+  let exporter = null;
+  let didFinalize = false;
+
+  try {
+    exporter = await createExporterFromPayload(p);
+
+    const canvas =
+      document.querySelector(canvasSelector) ||
+      document.querySelector("canvas");
+    if (!(canvas instanceof HTMLCanvasElement)) {
+      throw new Error(`Canvas not found: ${canvasSelector}`);
+    }
+
+    // Try to focus canvas so keyboard interaction goes to sketch
+    focusCanvasBestEffort(canvas);
+
+    const ac = new AbortController();
+    const stopWatcher = setInterval(() => {
+      if (stopFlag && !ac.signal.aborted) ac.abort(new Error("stopped"));
+    }, 50);
+
+    try {
+      const { stop } = await startLiveCapture({
+        canvas,
+        exporter,
+        fps: Number(p.fps ?? 30),
+        concurrency: Number(p.concurrency ?? 2),
+        maxQueue: Number(p.maxQueue ?? 8),
+        policy: p.policy ?? "drop",
+        signal: ac.signal,
+        onProgress: (stats) => post("pa_stats", stats),
+      });
+
+      post("pa_status", { status: "running", message: "capturing..." });
+
+      await new Promise((_, reject) => {
+        ac.signal.addEventListener("abort", () => reject(ac.signal.reason));
+      }).catch(async (e) => {
+        await stop();
+        didFinalize = true;
+        throw e;
+      });
+    } finally {
+      clearInterval(stopWatcher);
+    }
+  } catch (e) {
+    if ((e?.message ?? "") === "stopped") {
+      post("pa_status", { status: "idle", message: "stopped" });
+    } else {
+      post("pa_error", { message: e?.message ?? String(e) });
+      post("pa_status", { status: "idle" });
+    }
+  } finally {
+    if (exporter && !didFinalize) {
+      try {
+        await exporter.finalize();
+      } catch {}
+    }
+    running = false;
+    stopFlag = false;
+  }
+}
+
+(function init() {
+  const entry = getQueryParam("entry") || "/src/main.js";
+  post("pa_preview_ready", { entry });
+
+  sendCanvasList();
+  const mo = new MutationObserver(() => sendCanvasList());
+  mo.observe(document.documentElement, { childList: true, subtree: true });
+  setTimeout(sendCanvasList, 250);
+  setTimeout(sendCanvasList, 1000);
+
+  const autostart = getQueryParam("autostart") === "1";
+  const payloadB64 = getQueryParam("payload");
+
+  if (autostart && payloadB64) {
+    try {
+      const json = atob(payloadB64);
+      const payload = JSON.parse(json);
+      // IMPORTANT: do not import entry here; runFrameAutostart does it under virtual time
+      runFrameAutostart(payload, entry);
+    } catch (e) {
+      post("pa_error", { message: e?.message ?? String(e) });
+    }
+  } else {
+    importEntry(entry).catch((e) => {
+      console.error("[pa_encoder preview] entry import failed:", entry, e);
+      post("pa_error", { message: e?.message ?? String(e) });
+    });
+  }
+})();