openscribe/server/app/web/app.js

// SPDX-License-Identifier: GPL-3.0-only  -  Nightjar web UI logic (vanilla JS)
(function () {
  const $ = (s) => document.querySelector(s);
  const listEl = $("#list"), detailEl = $("#detail");
  const recBtn = $("#recBtn"), recTimer = $("#recTimer"), uploadEl = $("#upload");
  let selected = null, poller = null;
  let mediaRecorder = null, chunks = [], recStart = 0, recInterval = null;

  const PROC = ["queued", "transcribing", "summarising"];
  const fmtTime = (s) => { s = Math.floor(s || 0); const m = Math.floor(s / 60); return `${m}:${String(s % 60).padStart(2, "0")}`; };
  const when = (t) => new Date((t || 0) * 1000).toLocaleString();
  const esc = (x) => (x || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

  async function j(url, opts) { const r = await fetch(url, opts); if (!r.ok && r.status !== 204) throw new Error(await r.text()); return r.status === 204 ? null : r.json(); }

  function badge(status) {
    if (status === "done") return '<span class="badge done">done</span>';
    if (status === "error") return '<span class="badge error">error</span>';
    return `<span class="badge proc">${status}</span>`;
  }

  async function refreshList() {
    const items = await j("/api/recordings");
    listEl.innerHTML = items.map((r) => `
      <li class="item ${r.id === selected ? "sel" : ""}" data-id="${r.id}">
        <div class="t">${esc(r.title)}</div>
        <div class="m">${badge(r.status)} <span>${when(r.created_at)}</span></div>
      </li>`).join("") || '<li class="m" style="padding:12px;color:var(--muted)">No recordings yet.</li>';
    listEl.querySelectorAll(".item").forEach((li) => li.onclick = () => open(li.dataset.id));
    // keep polling if anything is still processing
    if (items.some((r) => PROC.includes(r.status)) && !poller) poller = setInterval(tick, 2500);
    if (!items.some((r) => PROC.includes(r.status)) && poller) { clearInterval(poller); poller = null; }
  }

  async function tick() { await refreshList(); if (selected) await open(selected, true); }

  async function open(id, quiet) {
    selected = id;
    if (!quiet) listEl.querySelectorAll(".item").forEach((li) => li.classList.toggle("sel", li.dataset.id === id));
    const r = await j("/api/recordings/" + id);
    const s = r.summary, t = r.transcript;
    let mid;
    if (PROC.includes(r.status)) mid = `<div class="card"><span class="spinner"></span> &nbsp;${r.status}… this can take a few seconds.</div>`;
    else if (r.status === "error") mid = `<div class="card"><h3 style="color:var(--bad)">Processing failed</h3><p style="color:var(--muted)">${esc(r.error)}</p><p style="color:var(--muted)">Check the server&#39;s AI provider config (see .env).</p></div>`;
    else mid = `
      ${s ? `<div class="card"><h3>Summary</h3><p class="overview">${esc(s.overview)}</p>
        ${s.key_points && s.key_points.length ? `<h4>Key points</h4><ul>${s.key_points.map((p) => `<li>${esc(p)}</li>`).join("")}</ul>` : ""}
        ${s.action_items && s.action_items.length ? `<h4>Action items</h4><ul>${s.action_items.map((a) => `<li>${esc(a)}</li>`).join("")}</ul>` : ""}</div>` : ""}
      <div class="card"><h3>Transcript</h3>
        ${(t && t.segments && t.segments.length)
          ? t.segments.map((g) => `<div class="seg"><div class="ts">${fmtTime(g.start)}</div><div class="tx">${esc(g.text)}</div></div>`).join("")
          : `<div class="overview">${esc(t && t.text || "")}</div>`}</div>
      <div class="exports"><span style="color:var(--muted);font-size:.82rem;align-self:center">Export:</span>
        ${["txt", "md", "srt", "vtt", "json"].map((f) => `<a href="/api/recordings/${id}/export?format=${f}" download="${id}.${f}">${f.toUpperCase()}</a>`).join("")}</div>`;

    detailEl.innerHTML = `
      <div class="head"><h1>${esc(r.title)}</h1>
        <div class="sub">${badge(r.status)} <span>${when(r.created_at)}</span>
          <button class="link-danger right" id="delBtn">Delete</button></div>
        <audio controls preload="metadata" src="/api/recordings/${id}/audio"></audio>
      </div>${mid}`;
    $("#delBtn").onclick = async () => { if (confirm("Delete this recording?")) { await j("/api/recordings/" + id, { method: "DELETE" }); selected = null; detailEl.innerHTML = ""; refreshList(); } };
  }

  async function upload(blob, name) {
    const fd = new FormData();
    fd.append("file", blob, name);
    const r = await j("/api/recordings?title=" + encodeURIComponent(name), { method: "POST", body: fd });
    await refreshList();
    open(r.id);
    if (!poller) poller = setInterval(tick, 2500);
  }

  uploadEl.onchange = () => { const f = uploadEl.files[0]; if (f) upload(f, f.name); uploadEl.value = ""; };

  recBtn.onclick = async () => {
    if (mediaRecorder && mediaRecorder.state === "recording") { mediaRecorder.stop(); return; }
    let stream;
    try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); }
    catch (e) { alert("Microphone access denied or unavailable."); return; }
    chunks = [];
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = (e) => e.data.size && chunks.push(e.data);
    mediaRecorder.onstop = () => {
      stream.getTracks().forEach((t) => t.stop());
      clearInterval(recInterval); recTimer.hidden = true;
      recBtn.classList.remove("recording"); recBtn.textContent = "● Record";
      const blob = new Blob(chunks, { type: mediaRecorder.mimeType || "audio/webm" });
      const name = "Recording " + new Date().toLocaleString();
      upload(blob, name.replace(/[/:]/g, "-") + ".webm");
    };
    mediaRecorder.start();
    recStart = Date.now(); recTimer.hidden = false;
    recInterval = setInterval(() => recTimer.textContent = fmtTime((Date.now() - recStart) / 1000) + " · recording…", 250);
    recBtn.classList.add("recording"); recBtn.textContent = "■ Stop";
  };

  async function boot() {
    try { const h = await j("/health"); $("#providers").textContent = `stt: ${h.transcriber}  ·  llm: ${h.summariser}`; } catch (e) {}
    refreshList();
  }
  boot();
})();