discstation 0.1.0

package/src/static/app.js

@@ -0,0 +1,268 @@
+(() => {
+  "use strict";
+
+  const $ = (id) => document.getElementById(id);
+  const state = { entries: [], discBytes: 0, discType: "none" };
+  const themeKey = "discstation-theme";
+  const themeToggle = $("theme-toggle");
+
+  function applyTheme(theme, persist = false) {
+    document.documentElement.dataset.theme = theme;
+    themeToggle.textContent = theme === "dark" ? "\u2600" : "\u263E";
+    themeToggle.setAttribute("aria-label", theme === "dark" ? "Switch to light mode" : "Switch to dark mode");
+    if (persist) localStorage.setItem(themeKey, theme);
+  }
+
+  const savedTheme = localStorage.getItem(themeKey);
+  const systemDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  applyTheme(savedTheme || (systemDark ? "dark" : "light"));
+  themeToggle.addEventListener("click", () => {
+    applyTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark", true);
+  });
+  if (!savedTheme && window.matchMedia) {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => applyTheme(event.matches ? "dark" : "light"));
+  }
+
+  const formatSize = (bytes) => {
+    if (bytes >= 1e9) return `${(bytes / 1e9).toFixed(1)} GB`;
+    if (bytes >= 1e6) return `${(bytes / 1e6).toFixed(1)} MB`;
+    if (bytes >= 1e3) return `${Math.round(bytes / 1e3)} KB`;
+    return `${bytes} B`;
+  };
+
+  const escapeHtml = (value) => String(value).replace(/[&<>'"]/g, (c) => ({
+    "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;"
+  })[c]);
+
+  const rootFor = (path) => path.includes("/") ? path.split("/")[0] : null;
+
+  function setConnection(online) {
+    const dot = $("connection-dot");
+    const label = $("connection-label");
+    dot.className = `connection-dot ${online ? "online" : "offline"}`;
+    label.textContent = online ? "LINK: LIVE" : "LINK: OFFLINE";
+  }
+
+  function setLiveStatus(value) {
+    const text = (value || "Idle").trim();
+    $("live-status").textContent = text.toUpperCase();
+  }
+
+  function setProgress(phase, percent, active = true) {
+    const panel = $("global-progress");
+    const fill = $("progress-fill");
+    panel.hidden = !active && percent < 0;
+    $("progress-phase").textContent = (phase || "READY").toUpperCase();
+    $("progress-value").textContent = percent >= 0 ? `${percent}%` : "...";
+    fill.style.width = percent >= 0 ? `${Math.min(100, percent)}%` : "34%";
+    fill.classList.toggle("indeterminate", percent < 0);
+  }
+
+  async function pollStatus() {
+    try {
+      const response = await fetch("/progress", { cache: "no-store" });
+      if (!response.ok) throw new Error("status");
+      const progress = await response.json();
+      setConnection(true);
+      setLiveStatus(progress.status);
+      setProgress(progress.status, Number(progress.progress), progress.active);
+    } catch (_) {
+      setConnection(false);
+      setLiveStatus("OFFLINE");
+      setProgress("OFFLINE", -1, false);
+    }
+  }
+
+  async function loadDiscInfo() {
+    try {
+      const response = await fetch("/disc-info", { cache: "no-store" });
+      const info = await response.json();
+      state.discBytes = Number(info.capacity_bytes || 0);
+      state.discType = info.type || "none";
+      renderSelection();
+    } catch (_) {
+      state.discBytes = 0;
+      state.discType = "none";
+    }
+  }
+
+  function renderSelection() {
+    const list = $("selection-list");
+    const total = state.entries.reduce((sum, entry) => sum + entry.file.size, 0);
+    const roots = new Map();
+    state.entries.forEach((entry, index) => {
+      const root = rootFor(entry.path);
+      if (!root) return;
+      if (!roots.has(root)) roots.set(root, { indexes: [], bytes: 0 });
+      const group = roots.get(root);
+      group.indexes.push(index);
+      group.bytes += entry.file.size;
+    });
+
+    if (!state.entries.length) {
+      list.innerHTML = '<div class="empty-selection">NO MEDIA SELECTED</div>';
+    } else {
+      const grouped = new Set();
+      const rows = [];
+      roots.forEach((group, root) => {
+        group.indexes.forEach((index) => grouped.add(index));
+        rows.push(`<div class="selection-row"><span class="selection-name">[FOLDER] ${escapeHtml(root)}/</span><span class="selection-meta">${group.indexes.length} FILES // ${formatSize(group.bytes)}</span><button class="remove-selection" type="button" data-remove-group="${escapeHtml(root)}" aria-label="Remove folder">X</button></div>`);
+      });
+      state.entries.forEach((entry, index) => {
+        if (!grouped.has(index)) rows.push(`<div class="selection-row"><span class="selection-name">${escapeHtml(entry.path)}</span><span class="selection-meta">${formatSize(entry.file.size)}</span><button class="remove-selection" type="button" data-remove-index="${index}" aria-label="Remove file">X</button></div>`);
+      });
+      list.innerHTML = rows.join("");
+      list.querySelectorAll("[data-remove-index]").forEach((button) => {
+        button.addEventListener("click", () => {
+          state.entries.splice(Number(button.dataset.removeIndex), 1);
+          renderSelection();
+        });
+      });
+      list.querySelectorAll("[data-remove-group]").forEach((button) => {
+        button.addEventListener("click", () => {
+          const root = button.dataset.removeGroup;
+          state.entries = state.entries.filter((entry) => rootFor(entry.path) !== root);
+          renderSelection();
+        });
+      });
+    }
+
+    const count = state.entries.length;
+    $("selection-summary").textContent = `${count} FILE${count === 1 ? "" : "S"} // ${roots.size} FOLDER${roots.size === 1 ? "" : "S"}`;
+    $("upload-button").disabled = count === 0;
+    const label = $("disc-label");
+    if (!label.value && state.entries.length) label.value = rootFor(state.entries[0].path) || state.entries[0].file.name.replace(/\.[^.]+$/, "");
+
+    const meter = $("disc-meter");
+    if (state.discBytes && count) {
+      const percent = Math.min(total / state.discBytes * 100, 100);
+      meter.hidden = false;
+      $("disc-type").textContent = `DISC: ${state.discType.toUpperCase()}`;
+      $("disc-space").textContent = `${formatSize(total)} / ${formatSize(state.discBytes)}`;
+      $("disc-fill").style.width = `${percent}%`;
+    } else {
+      meter.hidden = true;
+    }
+  }
+
+  function addFiles(fileList) {
+    Array.from(fileList).forEach((file) => {
+      state.entries.push({ file, path: file.webkitRelativePath || file.name });
+    });
+    renderSelection();
+  }
+
+  function setMessage(text, ok) {
+    const message = $("form-message");
+    message.textContent = text;
+    message.className = `form-message ${ok ? "ok" : "error"}`;
+  }
+
+  async function submitUrl(event) {
+    event.preventDefault();
+    const value = $("url-input").value.trim();
+    if (!value) return;
+    const button = event.currentTarget.querySelector("button");
+    button.disabled = true;
+    button.textContent = "QUEUING //";
+    try {
+      const response = await fetch("/", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({ url: value })
+      });
+      setMessage(await response.text(), response.ok);
+    } catch (error) {
+      setMessage(`Request failed: ${error.message}`, false);
+    } finally {
+      button.disabled = false;
+      button.innerHTML = 'BURN TO DISC <span>//</span>';
+    }
+  }
+
+  async function uploadSelection() {
+    if (!state.entries.length) return;
+    const button = $("upload-button");
+    button.disabled = true;
+    button.innerHTML = "UPLOADING //";
+    setProgress("UPLOADING", 0, true);
+    const label = $("disc-label").value.trim();
+    try {
+      if (label) {
+        await fetch("/set-label", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams({ label })
+        });
+      }
+      const form = new FormData();
+      const paths = [];
+      state.entries.forEach((entry) => {
+        form.append("files", entry.file, entry.file.name);
+        paths.push({ n: entry.file.name, p: entry.path });
+      });
+      form.append("_paths", JSON.stringify(paths));
+      const result = await new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", "/");
+        xhr.upload.addEventListener("progress", (event) => {
+          if (event.lengthComputable) setProgress("UPLOADING", Math.round(event.loaded / event.total * 100), true);
+        });
+        xhr.onload = () => resolve({ ok: xhr.status >= 200 && xhr.status < 300, text: xhr.responseText });
+        xhr.onerror = () => reject(new Error("network"));
+        xhr.send(form);
+      });
+      setMessage(result.text, result.ok);
+      if (result.ok) {
+        state.entries = [];
+        renderSelection();
+        setProgress("UPLOAD READY", 100, false);
+      }
+    } catch (error) {
+      setMessage(`Upload failed: ${error.message}`, false);
+    } finally {
+      button.disabled = state.entries.length === 0;
+      button.innerHTML = 'UPLOAD TO DISC <span>//</span>';
+    }
+  }
+
+  function setupTabs() {
+    document.querySelectorAll(".tab").forEach((tab) => {
+      tab.addEventListener("click", () => {
+        document.querySelectorAll(".tab").forEach((item) => {
+          const active = item === tab;
+          item.classList.toggle("active", active);
+          item.setAttribute("aria-selected", active ? "true" : "false");
+        });
+        document.querySelectorAll(".tab-panel").forEach((panel) => { panel.hidden = panel.id !== `tab-${tab.dataset.tab}`; panel.classList.toggle("active", !panel.hidden); });
+      });
+    });
+  }
+
+  $("file-picker").addEventListener("click", () => $("file-input").click());
+  $("folder-picker").addEventListener("click", () => $("folder-input").click());
+  $("file-input").addEventListener("change", (event) => { addFiles(event.target.files); event.target.value = ""; });
+  $("folder-input").addEventListener("change", (event) => { addFiles(event.target.files); event.target.value = ""; });
+  $("upload-button").addEventListener("click", uploadSelection);
+  $("url-form").addEventListener("submit", submitUrl);
+  const dropzone = $("dropzone");
+  if (dropzone) {
+    dropzone.addEventListener("dragover", (event) => { event.preventDefault(); event.currentTarget.classList.add("drag"); });
+    dropzone.addEventListener("dragleave", (event) => event.currentTarget.classList.remove("drag"));
+    dropzone.addEventListener("drop", (event) => { event.preventDefault(); event.currentTarget.classList.remove("drag"); addFiles(event.dataTransfer.files); });
+  }
+  setupTabs();
+  loadDiscInfo();
+  pollStatus();
+  setInterval(pollStatus, 2000);
+
+  if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js?v=4").catch(() => {});
+  window.addEventListener("beforeinstallprompt", (event) => {
+    event.preventDefault();
+    const button = document.createElement("button");
+    button.className = "outline-button install-button";
+    button.textContent = "INSTALL APP";
+    $("install-slot").appendChild(button);
+    button.addEventListener("click", async () => { event.prompt(); await event.userChoice; button.remove(); });
+  });
+})();

package/src/static/index.html

@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#f0ede4">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="stylesheet" href="/static/style.css">
+  <title>DiscStation // Physical Media</title>
+</head>
+<body>
+  <div class="page-shell">
+    <header class="topbar">
+      <a class="brand" href="/" aria-label="DiscStation home">
+        <span class="brand-mark">DS</span>
+        <span>DISCSTATION</span>
+      </a>
+      <div class="topbar-actions">
+        <button id="theme-toggle" class="theme-toggle" type="button" aria-label="Switch to dark mode">&#x263E;</button>
+        <div class="connection" aria-live="polite">
+          <span id="connection-dot" class="connection-dot checking"></span>
+          <span id="connection-label">LINK: CHECKING</span>
+        </div>
+      </div>
+    </header>
+
+    <main>
+      <section class="capability-strip section-rule">
+        <div><strong>01</strong><span>VIDEO DVD</span></div>
+        <div><strong>02</strong><span>DATA DVD</span></div>
+        <div><strong>03</strong><span>AUDIO CD</span></div>
+        <div><strong>04</strong><span>RIP / PLAY</span></div>
+      </section>
+
+      <section class="burn-panel section-rule" aria-labelledby="burn-title">
+        <div class="panel-heading">
+          <div>
+            <div class="section-kicker">NEW BURN</div>
+            <h2 id="burn-title">LOAD THE MEDIA</h2>
+          </div>
+          <span class="panel-index">DISCSTN-01</span>
+        </div>
+
+        <div class="tabs" role="tablist" aria-label="Burn source">
+          <button class="tab active" type="button" data-tab="url" role="tab" aria-selected="true">URL / PATH</button>
+          <button class="tab" type="button" data-tab="upload" role="tab" aria-selected="false">UPLOAD FILES</button>
+        </div>
+        <div id="global-progress" class="global-progress" hidden>
+          <div><span id="progress-phase">READY</span><span id="progress-value">--</span></div>
+          <div class="progress-track"><span id="progress-fill"></span></div>
+        </div>
+
+        <div id="tab-url" class="tab-panel active" role="tabpanel">
+          <p class="field-note">YouTube URL, search term, or local path for a video DVD.</p>
+          <form id="url-form" action="/" method="post">
+            <label class="sr-only" for="url-input">URL or local path</label>
+            <input id="url-input" class="url-input" name="url" type="text" autocomplete="off" placeholder="https://... or /path/to/file" required>
+            <button class="black-button" type="submit">BURN TO DISC <span>//</span></button>
+          </form>
+        </div>
+
+        <div id="tab-upload" class="tab-panel" role="tabpanel" hidden>
+          <p class="field-note">Select files or complete folders. The folder structure is retained on a data disc.</p>
+          <div class="disc-meter" id="disc-meter" hidden>
+            <div><span id="disc-type">DISC: CHECKING</span><span id="disc-space">0.0 / 0.0 GB</span></div>
+            <div class="meter-track"><span id="disc-fill"></span></div>
+          </div>
+          <div class="dropzone" id="dropzone">
+            DROP FILES OR FOLDERS HERE
+          </div>
+          <div class="picker-row">
+            <button class="outline-button" type="button" id="file-picker">ADD FILES</button>
+            <button class="outline-button" type="button" id="folder-picker">ADD FOLDER</button>
+          </div>
+          <input id="file-input" type="file" multiple hidden>
+          <input id="folder-input" type="file" webkitdirectory directory multiple hidden>
+          <div id="selection-list" class="selection-list" aria-live="polite">
+            <div class="empty-selection">NO MEDIA SELECTED</div>
+          </div>
+          <label class="field-label" for="disc-label">DISC LABEL</label>
+          <input id="disc-label" class="text-input" type="text" maxlength="32" placeholder="DISCSTATION_ARCHIVE">
+          <div id="selection-summary" class="selection-summary">0 FILES // 0 FOLDERS</div>
+          <button class="black-button" type="button" id="upload-button" disabled>UPLOAD TO DISC <span>//</span></button>
+        </div>
+        <div id="form-message" class="form-message" role="status" aria-live="polite"></div>
+      </section>
+    </main>
+
+    <section class="footer-note section-rule">
+      <div class="eyebrow">DISCSTATION // CONTROL SURFACE</div>
+      <div class="footer-note-title">PHYSICAL MEDIA,<br><em>ENGINEERED.</em></div>
+      <p>A compact authoring and archival instrument for discs that still deserve a place on the shelf.</p>
+      <div class="hero-specs">
+        <span>MODEL: ESP32 DEVKIT V1</span>
+        <span>REF: DISCSTN-01</span>
+        <span>REV: 001</span>
+      </div>
+    </section>
+
+    <footer class="footer-stamp section-rule">
+      <div><span class="stamp-label">SYSTEM:</span> <span id="live-status">READY</span></div>
+      <div>DISCSTATION // REV 001</div>
+    </footer>
+  </div>
+  <div id="install-slot"></div>
+  <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js?v=5").catch(() => {});</script>
+  <script src="/static/app.js?v=5" defer></script>
+</body>
+</html>