@acertijosapps/electron-viewer 0.0.0-stage → 1.0.0

package/public/style.css

@@ -0,0 +1,234 @@
+:root {
+  --bg: #f3f3f1;
+  --surface: #ffffff;
+  --border: #d9d9d4;
+  --text: #1d1d1b;
+  --muted: #6b6b66;
+  --accent: #2f6f4f;
+  --accent-text: #ffffff;
+  --stage: #e6e6e2;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #171716;
+    --surface: #222220;
+    --border: #3a3a37;
+    --text: #ececea;
+    --muted: #9a9a94;
+    --accent: #5fae86;
+    --accent-text: #0f1a14;
+    --stage: #0f0f0e;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+  font: 13px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+
+select,
+button {
+  height: 30px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+}
+
+select {
+  min-width: 0;
+  max-width: 320px;
+  padding: 0 6px;
+}
+
+.controls {
+  justify-content: center;
+  gap: 12px;
+  border-top: 1px solid var(--border);
+  border-bottom: 0;
+}
+
+button.primary {
+  padding: 0 14px;
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--accent-text);
+  cursor: pointer;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.group {
+  display: flex;
+}
+
+.group button {
+  min-width: 34px;
+  padding: 0 10px;
+  border-radius: 0;
+  cursor: pointer;
+}
+
+.group button + button {
+  margin-left: -1px;
+}
+
+.group button:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+.group button:last-child {
+  border-radius: 0 6px 6px 0;
+}
+
+.group button:hover {
+  background: var(--bg);
+}
+
+.group button[aria-pressed='true'] {
+  position: relative;
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--accent-text);
+}
+
+.group svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+#status {
+  min-width: 0;
+  margin-left: auto;
+  overflow: hidden;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  padding: 12px;
+  background: var(--stage);
+}
+
+#screen {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  touch-action: none;
+  cursor: default;
+}
+
+#placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--muted);
+}
+
+#placeholder p {
+  margin: 0;
+}
+
+/* Recibe el teclado (y el texto de IME o dictado) mientras se usa la app; no se ve. */
+#keys {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  resize: none;
+  pointer-events: none;
+}
+
+#stage:focus-within #screen {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+#screen.native {
+  cursor: default;
+}
+
+.group select {
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+#placeholder form {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#placeholder input {
+  width: 80px;
+  height: 30px;
+  padding: 0 6px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+}
+
+#placeholder form button {
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+#placeholder code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}

package/public/viewer.js

@@ -0,0 +1,435 @@
+const $ = (s) => document.querySelector(s);
+const canvas = $('#screen');
+const keys = $('#keys');
+const ctx = canvas.getContext('2d');
+const windowSelect = $('#window');
+const statusEl = $('#status');
+const placeholder = $('#placeholder');
+const placeholderText = $('#placeholder-text');
+const launchButton = $('#launch');
+const launchTop = $('#launch-top');
+const attachForm = $('#attach');
+const sizeSelect = $('#size');
+const frameButton = $('#frame');
+const controls = $('.controls');
+
+const TARGETS_REFRESH_MS = 3000;
+const DOUBLE_CLICK_MS = 500;
+const DOUBLE_CLICK_SLOP_PX = 5;
+const BUTTONS = ['left', 'middle', 'right'];
+
+let ws = null;
+let windowId = null;
+let apps = [];
+let project = null;
+let meta = null;
+let launching = false;
+let framesThisSecond = 0;
+let fps = 0;
+
+function send(obj) {
+  if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(obj));
+}
+
+async function api(method, route, body) {
+  const init = { method };
+  if (body) {
+    init.headers = { 'content-type': 'application/json' };
+    init.body = JSON.stringify(body);
+  }
+  const res = await fetch(`api/${route}`, init);
+  if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || `HTTP ${res.status}`);
+  return res;
+}
+
+// ---------- Video ----------
+
+// Solo se decodifica el frame más reciente: si llegan más rápido de lo que se pintan, se saltan.
+let pendingFrame = null;
+let decoding = false;
+
+async function drawLoop() {
+  decoding = true;
+  while (pendingFrame) {
+    const data = pendingFrame;
+    pendingFrame = null;
+    try {
+      const bitmap = await createImageBitmap(new Blob([data], { type: 'image/jpeg' }));
+      if (canvas.width !== bitmap.width || canvas.height !== bitmap.height) {
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+      }
+      ctx.drawImage(bitmap, 0, 0);
+      bitmap.close();
+      framesThisSecond++;
+      placeholder.hidden = true;
+    } catch (err) {
+      console.warn('frame:', err);
+    }
+  }
+  decoding = false;
+}
+
+function onFrame(buf) {
+  pendingFrame = buf.subarray(1);
+  if (!decoding) drawLoop();
+}
+
+setInterval(() => {
+  fps = framesThisSecond;
+  framesThisSecond = 0;
+  renderStatus();
+}, 1000);
+
+// ---------- Estado ----------
+
+// Un aviso (error, «guardando…») se queda unos segundos antes de volver a tamaño y fps.
+const NOTE_MS = 6000;
+let noteUntil = 0;
+
+function renderStatus(text) {
+  if (typeof text === 'string') {
+    statusEl.textContent = text;
+    statusEl.title = text;
+    noteUntil = text ? performance.now() + NOTE_MS : 0;
+    return;
+  }
+  if (!meta || performance.now() < noteUntil) return;
+  statusEl.title = '';
+  statusEl.textContent = `${meta.width}×${meta.height}${meta.frame ? ' · frame' : ''} · ${fps} fps`;
+}
+
+function onJson(msg) {
+  if (msg.type === 'meta') {
+    meta = msg;
+    frameButton.setAttribute('aria-pressed', String(Boolean(msg.frame)));
+    frameButton.disabled = !msg.app?.main;
+    canvas.classList.toggle('native', Boolean(msg.frame));
+    sizeSelect.options[0].textContent = `Window size (${msg.width} × ${msg.height})`;
+    renderStatus();
+  } else if (msg.type === 'error') {
+    renderStatus(`Error: ${msg.message}`);
+  } else if (msg.type === 'closed') {
+    disconnect();
+    refreshTargets();
+  }
+}
+
+// ---------- Ventanas ----------
+
+const allWindows = () => apps.flatMap((app) => app.windows.map((w) => ({ ...w, app })));
+const selected = () => allWindows().find((w) => w.id === windowId);
+
+function showMessage(text, { launch = false } = {}) {
+  placeholder.hidden = false;
+  placeholderText.textContent = text;
+  launchButton.hidden = !launch;
+  launchButton.disabled = launching;
+  attachForm.hidden = !launch && !!apps.length;
+}
+
+function setControlsEnabled(enabled) {
+  controls.querySelectorAll('button, select').forEach((b) => (b.disabled = !enabled));
+  if (enabled) frameButton.disabled = !selected()?.app.main;
+}
+
+function disconnect() {
+  const socket = ws;
+  ws = null;
+  socket?.close();
+  meta = null;
+  canvas.width = canvas.height = 0;
+  setControlsEnabled(false);
+}
+
+function connect(id) {
+  disconnect();
+  windowId = id;
+  showMessage('Connecting…');
+  setControlsEnabled(true);
+  const socket = new WebSocket(`ws://${location.host}/ws?window=${encodeURIComponent(id)}`);
+  socket.binaryType = 'arraybuffer';
+  socket.onmessage = (e) => (typeof e.data === 'string' ? onJson(JSON.parse(e.data)) : onFrame(new Uint8Array(e.data)));
+  socket.onclose = () => {
+    if (ws !== socket) return;
+    ws = null;
+    renderStatus('Disconnected; retrying…');
+    setTimeout(() => refreshTargets(true), 1500);
+  };
+  ws = socket;
+}
+
+function renderLaunch() {
+  const can = project?.launchable && !launching;
+  launchTop.hidden = !project?.launchable;
+  launchTop.disabled = !can;
+  launchTop.textContent = launching ? 'Launching…' : `Launch ${project?.name ?? 'app'}`;
+  launchTop.title = project ? `electron . in ${project.dir}` : '';
+  launchButton.textContent = launchTop.textContent;
+}
+
+async function refreshTargets(reconnect = false) {
+  try {
+    apps = await (await api('GET', 'windows')).json();
+  } catch {
+    renderStatus('The viewer is not responding');
+    return;
+  }
+  const windows = allWindows();
+  windowSelect.replaceChildren(
+    ...apps.map((app) => {
+      const group = document.createElement('optgroup');
+      group.label = `${app.name} · :${app.cdpPort}${app.main ? '' : ' · no main'}`;
+      group.append(...app.windows.map((w) => new Option(w.title || w.url || w.id, w.id)));
+      return group;
+    }),
+  );
+  windowSelect.hidden = !windows.length;
+  renderLaunch();
+  if (!windows.length) {
+    launchTop.hidden = true; // el placeholder ya tiene su botón
+    disconnect();
+    windowId = null;
+    renderStatus('');
+    if (launching) showMessage('Starting the app…');
+    else if (apps.length) showMessage(`${apps[0].name} has no windows open.`);
+    else showMessage('No Electron app found.', { launch: project?.launchable });
+    if (!project?.launchable && !apps.length) {
+      placeholderText.textContent = 'No Electron app found. Start your app with --remote-debugging-port=9222, or run the viewer from your project folder.';
+    }
+    return;
+  }
+  if (!selected()) {
+    const wanted = new URLSearchParams(location.search).get('window');
+    windowId = (windows.find((w) => w.id === wanted) || windows[0]).id;
+  }
+  windowSelect.value = windowId;
+  if (reconnect || !ws) connect(windowId);
+}
+
+windowSelect.onchange = () => {
+  history.replaceState(null, '', `?window=${encodeURIComponent(windowSelect.value)}`);
+  connect(windowSelect.value);
+};
+
+async function launch() {
+  launching = true;
+  renderLaunch();
+  showMessage(`Starting ${project.name}…`);
+  try {
+    const app = await (await api('POST', 'launch', {})).json();
+    launching = false;
+    windowId = app?.windows?.[0]?.id ?? null;
+    if (windowId) history.replaceState(null, '', `?window=${encodeURIComponent(windowId)}`);
+    await refreshTargets(true);
+  } catch (err) {
+    launching = false;
+    renderLaunch();
+    showMessage(`Could not start ${project.name}: ${err.message}`, { launch: true });
+  }
+}
+
+launchButton.onclick = launch;
+launchTop.onclick = launch;
+
+attachForm.onsubmit = async (e) => {
+  e.preventDefault();
+  try {
+    await api('POST', 'attach', { port: Number($('#attach-port').value) });
+    await refreshTargets(true);
+  } catch (err) {
+    placeholderText.textContent = err.message;
+  }
+};
+
+async function loadProject() {
+  try {
+    project = await (await api('GET', 'project')).json();
+  } catch {
+    project = null;
+  }
+}
+
+setInterval(() => refreshTargets(), TARGETS_REFRESH_MS);
+
+// ---------- Controles ----------
+
+async function control(route, body = {}) {
+  try {
+    return await (await api('POST', route, { window: windowId, ...body })).json();
+  } catch (err) {
+    renderStatus(`${route} failed: ${err.message}`);
+    return null;
+  }
+}
+
+$('#reload').onclick = () => control('reload');
+
+$('#devtools').onclick = async () => {
+  const result = await control('devtools');
+  // Sin proceso main: se abre el frontend de DevTools que sirve el propio puerto CDP.
+  if (result?.url) window.open(result.url, '_blank');
+};
+
+sizeSelect.onchange = async () => {
+  const [width, height] = sizeSelect.value ? sizeSelect.value.split('x').map(Number) : [0, 0];
+  sizeSelect.value = '';
+  await control('resize', { width, height });
+};
+
+frameButton.onclick = () => send({ type: 'frame', on: !meta?.frame });
+
+$('#screenshot').onclick = async () => {
+  if (!windowId) return;
+  renderStatus('Saving screenshot…');
+  try {
+    const res = await api('GET', `screenshot?window=${encodeURIComponent(windowId)}${meta?.frame ? '&frame=1' : ''}`);
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(await res.blob());
+    const name = (selected()?.app.name || 'electron').replace(/[^\w.-]+/g, '-');
+    a.download = `${name}-${new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)}.png`;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+    renderStatus('');
+    renderStatus();
+  } catch (err) {
+    renderStatus(`Screenshot failed: ${err.message}`);
+  }
+};
+
+// ---------- Input ----------
+
+// Posición normalizada (0–1) dentro del contenido de la ventana, descontando el letterbox de
+// object-fit y, en modo marco, la barra de título y los bordes.
+function toNorm(e) {
+  const r = canvas.getBoundingClientRect();
+  const ar = canvas.width / canvas.height;
+  let w = r.width;
+  let h = r.height;
+  let ox = 0;
+  let oy = 0;
+  if (r.width / r.height > ar) {
+    w = h * ar;
+    ox = (r.width - w) / 2;
+  } else {
+    h = w / ar;
+    oy = (r.height - h) / 2;
+  }
+  let x = (e.clientX - r.left - ox) / w;
+  let y = (e.clientY - r.top - oy) / h;
+  const c = meta?.frame && meta.content;
+  if (c) {
+    x = (x - c.x) / c.width;
+    y = (y - c.y) / c.height;
+  }
+  return { x, y };
+}
+
+const inside = (p) => p.x >= 0 && p.x <= 1 && p.y >= 0 && p.y <= 1;
+
+function modifiersOf(e) {
+  return (e.altKey ? 1 : 0) | (e.ctrlKey ? 2 : 0) | (e.metaKey ? 4 : 0) | (e.shiftKey ? 8 : 0);
+}
+
+let lastDown = null;
+let pressed = false;
+
+canvas.addEventListener('pointerdown', (e) => {
+  if (!meta || !canvas.width) return;
+  keys.focus({ preventScroll: true });
+  const p = toNorm(e);
+  if (!inside(p)) return;
+  e.preventDefault();
+  canvas.setPointerCapture(e.pointerId);
+  pressed = true;
+  const button = BUTTONS[e.button] || 'left';
+  const now = performance.now();
+  const near = lastDown && Math.hypot(e.clientX - lastDown.cx, e.clientY - lastDown.cy) < DOUBLE_CLICK_SLOP_PX;
+  const clickCount = near && lastDown.button === button && now - lastDown.t < DOUBLE_CLICK_MS ? Math.min(3, lastDown.count + 1) : 1;
+  lastDown = { t: now, cx: e.clientX, cy: e.clientY, button, count: clickCount };
+  send({ type: 'mouse', action: 'down', ...p, button, buttons: e.buttons, clickCount, modifiers: modifiersOf(e) });
+});
+
+canvas.addEventListener('pointerup', (e) => {
+  if (!pressed) return;
+  pressed = false;
+  const p = toNorm(e);
+  send({ type: 'mouse', action: 'up', x: p.x, y: p.y, button: BUTTONS[e.button] || 'left', buttons: e.buttons, clickCount: lastDown?.count || 1, modifiers: modifiersOf(e) });
+});
+
+// Movimiento (hover y arrastre) a lo sumo una vez por frame de pantalla.
+let moveEvent = null;
+canvas.addEventListener('pointermove', (e) => {
+  if (!meta || !canvas.width) return;
+  if (!moveEvent) requestAnimationFrame(flushMove);
+  moveEvent = e;
+});
+
+function flushMove() {
+  const e = moveEvent;
+  moveEvent = null;
+  if (!e) return;
+  const p = toNorm(e);
+  if (!pressed && !inside(p)) return;
+  send({ type: 'mouse', action: 'move', ...p, buttons: e.buttons, modifiers: modifiersOf(e) });
+}
+
+canvas.addEventListener('pointercancel', () => (pressed = false));
+canvas.addEventListener('contextmenu', (e) => e.preventDefault());
+
+let wheel = null;
+canvas.addEventListener(
+  'wheel',
+  (e) => {
+    e.preventDefault();
+    if (!meta) return;
+    const p = toNorm(e);
+    if (!inside(p)) return;
+    const k = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? canvas.clientHeight : 1;
+    if (!wheel) {
+      wheel = { ...p, dx: 0, dy: 0, modifiers: modifiersOf(e) };
+      requestAnimationFrame(() => {
+        send({ type: 'wheel', ...wheel });
+        wheel = null;
+      });
+    }
+    wheel.dx += e.deltaX * k;
+    wheel.dy += e.deltaY * k;
+  },
+  { passive: false },
+);
+
+// Teclado: un textarea invisible tiene el foco mientras se usa la app. Cada tecla va a la app
+// (también ⌘C/⌘V, que en macOS se convierten en comandos de edición, y Tab). El texto que entra sin
+// keydown (IME, dictado, herramientas que insertan texto) se manda entero.
+function onKey(e, action) {
+  if (!meta || e.isComposing || e.keyCode === 229) return;
+  e.preventDefault();
+  const printable = [...e.key].length === 1 && !e.ctrlKey && !e.metaKey;
+  send({
+    type: 'key',
+    action,
+    key: e.key,
+    code: e.code,
+    keyCode: e.keyCode,
+    text: action === 'down' && printable ? e.key : undefined,
+    repeat: e.repeat,
+    modifiers: modifiersOf(e),
+  });
+}
+
+keys.addEventListener('keydown', (e) => onKey(e, 'down'));
+keys.addEventListener('keyup', (e) => onKey(e, 'up'));
+keys.addEventListener('input', (e) => {
+  if (e.isComposing) return;
+  if (keys.value) send({ type: 'text', text: keys.value });
+  keys.value = '';
+});
+keys.addEventListener('compositionend', () => {
+  if (keys.value) send({ type: 'text', text: keys.value });
+  keys.value = '';
+});
+
+setControlsEnabled(false);
+await loadProject();
+refreshTargets();