discstation 0.1.43 → 0.3.0

package/README.md

@@ -71,7 +71,7 @@ remote can talk to the host over Wi-Fi instead of a USB cable.
 |------|-------------|
 | **Burn Video DVD** | YouTube URL or local file → ffmpeg 2-pass → DVD-Video disc |
 | **Burn Data DVD** | Any files/folders → ISO/Joliet data disc (no quality loss) |
-| **Play** | Playback via mpv (DVD-Video, Audio CD, VCD, SVCD) — the OLED remote shows a live spectrum visualizer of the actual audio (Linux only for now; see `docs/PLATFORM_SUPPORT.md`); while a track plays the OLED keeps the track/volume screen (or the visualizer) up — the spinning-disc screensaver only appears on the home/standby screens or after playback has been paused for 15 s |
+| **Play** | Playback via mpv (DVD-Video, Audio CD, VCD, SVCD) — both the OLED remote and the web/app on-screen remote show a live spectrum visualizer of the actual audio (Linux only for now; see `docs/PLATFORM_SUPPORT.md`); while a track plays the screen keeps the track/volume view (or the visualizer) up — the OLED's spinning-disc screensaver appears on its home/standby screens or after playback has been paused for 15 s, while the web/app remote shows the same spinning disc immediately in place of the visualizer any time there's no real audio data to show (paused, or a host platform that can't capture audio at all) |
 | **Rip** | Audio CD → FLAC (MusicBrainz); DVD-Video → VIDEO_TS mirror or HandBrake MKV (TMDb naming) |
 
 ## Project Structure
@@ -172,9 +172,14 @@ self-signed cert. On startup the host prints the LAN URL to open
   tag next to the wordmark any time). Mode buttons only show what the disc
   in the drive can actually do — a blank CD offers BURN DATA/BURN AUDIO, a
   blank DVD offers BURN/BURN DATA, an already-recorded disc offers PLAY/RIP
-  — and picking one starts it directly, no separate confirm step. Also has
-  EJECT/CLOSE toggle, a live disc-status readout, and full playback
-  transport. Greys out and auto-collapses the instant a physical remote is
+  — and picking one starts it directly, no separate confirm step. Its
+  screen mirrors the physical OLED remote: the disc title/status and offered
+  modes at idle, and a glowing peak-hold spectrum visualizer that fills the
+  width of the screen during playback (see Play, above) - or a spinning-disc
+  animation in its place whenever there's no real audio data to visualize
+  (paused, or a host platform with no audio capture). EJECT/CLOSE toggle,
+  volume, and full playback transport including PREV/NEXT track for audio
+  CDs. Greys out and auto-collapses the instant a physical remote is
   detected, so the two never fight for control — including mid-burn/rip/play:
   plugging the remote in hands it control without interrupting whatever's
   running, and its screen picks up the current status instead of starting
@@ -187,9 +192,13 @@ The `mobile/` Expo app (enter the host's LAN address in its settings screen)
 has the same on-screen remote as the web UI, rendered inline in the main
 screen rather than a popup — same "REMOTE" tag toggle, opens automatically
 with no ESP32 attached, mode buttons filtered to what the disc actually
-supports, and picking one starts it directly. Same auto-collapse behavior
-when a physical ESP32 shows up — mid-operation and without interruption, same
-as the web UI — and the same underlying `/remote/button` protocol.
+supports, and picking one starts it directly. Its screen has the same
+idle title/offered-modes view, live spectrum visualizer (or spinning-disc
+fallback when there's no real audio data to show) and PREV/NEXT track
+controls for audio CDs as the web UI's playback screen - subscribed to the
+same `/events` SSE stream. Same auto-collapse behavior when a physical ESP32
+shows up — mid-operation and without interruption, same as the web UI — and
+the same underlying `/remote/button` protocol.
 
 ## Disc Support
 

package/arduino/firmware/firmware.json

@@ -1 +1 @@
-{"version":"0.1.43","size":1260592,"md5":"575faf0891e354ecd451d8454228a18e"}
+{"version":"0.3.0","size":1260592,"md5":"e0959615d438880783baf38f8943ae3f"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "discstation",
-  "version": "0.1.43",
+  "version": "0.3.0",
   "description": "DiscStation optical-media appliance host — one cross-OS installer",
   "bin": {
     "discstation-setup": "scripts/setup.mjs",

package/src/discstation.py

@@ -58,7 +58,7 @@ _web_status = "READY"
 _web_progress = -1
 _web_progress_active = False
 _web_playing = False  # a play_flow is currently active (transport controls apply)
-_web_op_verb = "BURNING"  # progress-bar verb for the current PROGRESS: stream
+_web_phase = "READY"  # most recent STATUS: text, prefixed onto the next PROGRESS: value
 _operation_active = False  # a burn/rip/play flow is holding the drive
 _last_disc_info = {"disc_present": False, "capacity_bytes": 0, "capacity_gb": 0, "type": "none"}
 _active_ser = None
@@ -460,6 +460,7 @@ class _WebHandler(http.server.BaseHTTPRequestHandler):
         url = params.get('url', [''])[0].strip()
         if url:
             _burn_url_queue.put(url)
+            self._chain_start_if_waiting()
             self._respond(200, 'URL received. Starting burn...')
         else:
             self._respond(400, 'Missing URL')
@@ -505,6 +506,7 @@ class _WebHandler(http.server.BaseHTTPRequestHandler):
         # the queue forever, waiting to wrongly satisfy a later, unrelated
         # burn attempt.)
         _burn_url_queue.put(str(upload_dir))
+        self._chain_start_if_waiting()
         size_str = f"{total / 1e6:.1f}MB" if total > 1e6 else f"{total / 1e3:.0f}KB"
         _set_web_progress("UPLOAD READY", 100)
         # Used to hardcode "Select BURN DATA on remote" - wrong mode name for
@@ -530,18 +532,32 @@ class _WebHandler(http.server.BaseHTTPRequestHandler):
             return
         if _active_ser is not None and _active_ser.hw is None:
             _active_ser.virtual.push_line(cmd)
-            # One-click burn: chain START right behind SELECT:BURN* in the SAME
-            # request, atomically - station_loop's SELECT handler clears any
-            # stale buffered input the instant it reads the SELECT line, and a
-            # START sent as a second, separate HTTP call can land in that exact
-            # gap and get wiped (intermittent, timing-dependent "burn never
-            # starts" bug). Queuing both lines from one call removes the gap.
-            if cmd.upper().startswith("SELECT:BURN"):
+            # One-click burn, half of it: if a source (upload/URL) was already
+            # queued *before* this mode was selected, chain START right behind
+            # it now - the other half is _chain_start_if_waiting(), fired when
+            # the source arrives *after* mode selection instead (the web UI's
+            # actual normal order for a video burn: pick BURN, then paste a
+            # URL). Chaining START unconditionally behind every SELECT:BURN*
+            # used to lose it whenever the source wasn't ready yet: it sent
+            # START straight into wait_for_web_url()'s own CANCEL/HOME-polling
+            # loop, which reads and silently discards whatever isn't CANCEL/HOME
+            # while it waits - the exact "burn never starts" bug, just for the
+            # opposite ordering than the one already fixed once before.
+            if cmd.upper().startswith("SELECT:BURN") and not _burn_url_queue.empty():
                 _active_ser.virtual.push_line("START")
             self._respond(200, 'OK')
         else:
             self._respond(409, 'A hardware remote is attached')
 
+    def _chain_start_if_waiting(self):
+        """The other half of one-click burn (see _handle_remote_button): a
+        source arriving while a mode is already selected and waiting for one
+        (_operation_active) means this is the signal to actually start -
+        pushed here, at the moment the source becomes real, instead of
+        earlier at mode-select time when it might not exist yet."""
+        if _operation_active and _active_ser is not None and _active_ser.hw is None:
+            _active_ser.virtual.push_line("START")
+
     def _serve_firmware(self):
         image, _ = _firmware_image()
         if not image:
@@ -584,10 +600,35 @@ class _WebHandler(http.server.BaseHTTPRequestHandler):
             # the one already running (CANCEL/EJECT stay available regardless).
             self._respond(200, json.dumps({**_last_disc_info, "busy": True, "menu_items": [], "appliance": _appliance_mode}), "application/json")
             return
+        device = discstation_burn.disc_device()
+        if not _detect_lock.acquire(timeout=1.5):
+            # Something else (almost always the background poller) is already
+            # deep into a classify for this disc - waiting on detect_disc()'s
+            # own (unbounded, blocking) internal acquire would just queue
+            # behind it for however long that takes (seen ~90s on a disc whose
+            # blkid/wodim-toc probes both time out) - an earlier version of
+            # this fix acquired-then-released this same lock before calling
+            # detect_disc() as a "quick test," which didn't actually help: by
+            # the time detect_disc() re-acquired the lock for real, another
+            # thread could (and, live-tested, did) grab it first and leave
+            # this request blocked on that *second*, timeout-less acquire
+            # anyway. Holding the lock we already have for the whole classify
+            # - calling _detect_disc_locked() directly instead of going back
+            # through detect_disc() - is what actually bounds the wait.
+            stale = {**_last_disc_info}
+            stale.setdefault("type", "reading")
+            self._respond(200, json.dumps({**stale, "appliance": _appliance_mode}), "application/json")
+            return
         info = {"disc_present": False, "capacity_bytes": 0, "capacity_gb": 0, "type": "none"}
         try:
-            device = discstation_burn.disc_device()
-            di = detect_disc(device, settle=False, budget=15)
+            try:
+                cached = _detect_cache.get(device)
+                if cached and time.monotonic() - cached[0] < DISC_DETECT_CACHE_TTL:
+                    di = cached[1]
+                else:
+                    di = _detect_disc_locked(device, settle=False, budget=15)
+            finally:
+                _detect_lock.release()
             info["disc_present"] = di.present
             info["capacity_bytes"] = di.capacity_bytes
             info["capacity_gb"] = round(di.capacity_bytes / 1e9, 2)
@@ -599,6 +640,10 @@ class _WebHandler(http.server.BaseHTTPRequestHandler):
                 info["type"] = di.web_type
             info["kind"] = di.kind
             info["label"] = di.label
+            # Same lookup the OLED's DISC_NAME: already uses (TOC-fingerprint match
+            # against burn history for an audio CD, volume label for a data disc/DVD) -
+            # richer than "label" above, which is empty for most audio CDs.
+            info["disc_title"] = disc_title(device) if di.present and not di.transient else ""
             info["menu_items"] = menu_items_for_disc(device) if di.present and not di.transient else []
         except Exception as e:
             print(f"Disc info error: {e}")
@@ -653,7 +698,7 @@ class _WebHandler(http.server.BaseHTTPRequestHandler):
     def _serve_sw(self):
         sw = '''self.addEventListener('install', e => {
   self.skipWaiting();
-  caches.open('discstation-v20').then(c => c.addAll(['/','/static/style.css?v=20','/static/app.js?v=20']));
+  caches.open('discstation-v47').then(c => c.addAll(['/','/static/style.css?v=47','/static/app.js?v=47']));
 });
 self.addEventListener('activate', e => e.waitUntil(clients.claim()));
 self.addEventListener('fetch', e => {
@@ -662,7 +707,7 @@ self.addEventListener('fetch', e => {
   if (path === '/' || path.startsWith('/static/')) {
     e.respondWith(fetch(e.request).then(r => {
       const copy = r.clone();
-      caches.open('discstation-v20').then(c => c.put(e.request, copy));
+      caches.open('discstation-v47').then(c => c.put(e.request, copy));
       return r;
     }).catch(() => caches.match(e.request)));
   } else {
@@ -1077,7 +1122,7 @@ def _set_web_progress(phase, percent=-1):
 
 
 def _record_web_status(msg):
-    global _web_status, _web_progress, _web_progress_active, _web_playing
+    global _web_status, _web_progress, _web_progress_active, _web_playing, _web_phase
     _remember(msg)
     if msg.startswith("DISC:"):
         _sse_publish({"type": "disc-changed"})
@@ -1088,12 +1133,20 @@ def _record_web_status(msg):
         _web_progress_active = True
     elif msg.startswith("PLAY_STATUS:") or msg.startswith("PLAY:"):
         _web_status = msg.split(":", 1)[1].strip() or "PLAYING"
+    elif msg.startswith("WAITING:"):
+        # The OLED's pre-burn confirm screen ("does this fit? confirm to
+        # go") - was silently dropped before (not in this elif chain at
+        # all), which is exactly why a burn stuck here looked frozen on
+        # the web instead of showing what it's actually waiting on.
+        _web_status = "Waiting to confirm: " + (msg[8:].strip() or "...")
+        _web_progress_active = True
     elif msg.startswith("STATUS:"):
         _web_status = msg[7:].strip() or "READY"
+        _web_phase = _web_status.rstrip(".")
         _web_progress_active = True
     elif msg.startswith("PROGRESS:"):
         value = msg[9:].strip()
-        _web_status = f"{_web_op_verb} {value}"
+        _web_status = f"{_web_phase} {value}"
         match = re.search(r"(\d+(?:\.\d+)?)", value)
         if match:
             _web_progress = min(100, max(0, int(float(match.group(1)))))
@@ -1103,14 +1156,17 @@ def _record_web_status(msg):
         _web_progress = 100
         _web_progress_active = False
         _web_playing = False
+        _web_phase = "READY"
     elif msg.startswith("ERROR:"):
         _web_status = msg[6:].strip() or "ERROR"
         _web_progress_active = False
         _web_playing = False
+        _web_phase = "READY"
     elif msg.startswith("CANCELLED:"):
         _web_status = msg[10:].strip() or "CANCELLED"
         _web_progress_active = False
         _web_playing = False
+        _web_phase = "READY"
     elif msg.startswith(("STANDBY:", "HOME:")):
         # idle again (tray open, insert disc, back to the menu) — clear any
         # lingering "Ejecting..." / progress state on the web UI.
@@ -1119,6 +1175,7 @@ def _record_web_status(msg):
         _web_progress = -1
         _web_progress_active = False
         _web_playing = False
+        _web_phase = "READY"
     else:
         return
     _sse_publish(_status_snapshot())
@@ -1504,14 +1561,17 @@ def _wait_for_start(ser, starting=None, mode=None):
 
 def run_probe(cmd, timeout=8, name=None):
     try:
-        return subprocess.run(
-            cmd,
-            capture_output=True,
-            text=True,
-            timeout=timeout,
+        return _run_hard_timeout(
+            lambda: subprocess.run(cmd, capture_output=True, text=True, timeout=timeout),
+            timeout=timeout + 5,
         )
     except subprocess.TimeoutExpired as e:
         return subprocess.CompletedProcess(cmd, 124, ensure_text(e.stdout), ensure_text(e.stderr))
+    except RuntimeError:
+        # _run_hard_timeout gave up on a child stuck in D-state (uninterruptible
+        # kernel I/O sleep) rather than a clean subprocess-level timeout - same
+        # "this probe didn't answer" outcome from every caller's point of view.
+        return subprocess.CompletedProcess(cmd, 124, "", "")
     except (FileNotFoundError, OSError) as e:
         return subprocess.CompletedProcess(cmd, 127, "", str(e))
 
@@ -1600,6 +1660,9 @@ def udev_cdrom_properties(device, refresh=False):
     return properties
 
 
+discstation_burn.udev_cdrom_properties = udev_cdrom_properties
+
+
 _tray_open = False
 _tray_open_since = 0.0  # time.monotonic() of the last OLED-initiated eject
 
@@ -2198,6 +2261,32 @@ def menu_items_for_disc(device):
     return items
 
 
+def _run_hard_timeout(fn, timeout):
+    """Run fn() on a throwaway daemon thread and bound the wait on the THREAD,
+    not on whatever fn() calls internally. subprocess.run(timeout=N) can't
+    rescue a caller from a child stuck in D-state (uninterruptible kernel I/O
+    sleep - e.g. a drive that can't read a bad/dirty disc): SIGKILL doesn't
+    interrupt D-state, so the library's own kill-then-reap after its own
+    timeout hangs right along with it. This is the only way to guarantee the
+    caller gets control back - the thread (and whatever it's still stuck in)
+    is abandoned/leaked, but nothing ever waits on it again, so any lock the
+    caller holds gets released either way."""
+    result = {}
+    def _target():
+        try:
+            result["value"] = fn()
+        except Exception as e:
+            result["error"] = e
+    t = threading.Thread(target=_target, daemon=True)
+    t.start()
+    t.join(timeout)
+    if t.is_alive():
+        raise RuntimeError("drive not responding (timed out)")
+    if "error" in result:
+        raise result["error"]
+    return result["value"]
+
+
 class mounted_disc:
     def __init__(self, device):
         self.device = device
@@ -2228,7 +2317,14 @@ class mounted_disc:
         else:
             self.tmp.cleanup()
             raise RuntimeError("Disc mounting backend is not configured for this operating system")
-        result = subprocess.run(command, capture_output=True, text=True, timeout=30)
+        try:
+            result = _run_hard_timeout(
+                lambda: subprocess.run(command, capture_output=True, text=True, timeout=30),
+                timeout=35,
+            )
+        except Exception:
+            self.tmp.cleanup()
+            raise
         if result.returncode != 0:
             self.tmp.cleanup()
             raise RuntimeError((result.stderr or result.stdout or "Could not mount disc").strip())
@@ -2980,7 +3076,7 @@ def burn_flow(ser):
         )
 
         if plan["burn"]:
-            discstation_burn.wait_for_burn_confirm(ser, dvd_dir, disc_bytes)
+            discstation_burn.wait_for_burn_confirm(ser, dvd_dir, disc_bytes, auto_confirm=ser.hw is None)
             discstation_burn.burn(ser, dvd_dir, disc_label, burn_speed, dl_info["is_dual_layer"])
             safe_send(ser, "DONE:Disc complete!")
             print("Burn complete.")
@@ -3249,8 +3345,8 @@ def _vu_loop(ser, stop_event, pause_event):
                 if proc.poll() is not None:
                     break
                 continue
-            if pause_event.is_set() or ser.hw is None:   # nobody to draw bars for
-                continue
+            if pause_event.is_set() or (ser.hw is None and not _sse_subs):
+                continue   # nobody to draw bars for - no OLED, no browser watching either
             samples = _np.frombuffer(raw, dtype=_np.int16).astype(_np.float32) / 32768.0
             spectrum = _np.abs(_np.fft.rfft(samples * window))
             mags = []
@@ -3275,6 +3371,8 @@ def _vu_loop(ser, stop_event, pause_event):
                 shown[i] = target if target > shown[i] else max(0.0, shown[i] - VU_PEAK_DECAY)
                 levels.append(int(shown[i]))
             send(ser, "VU:" + ",".join(str(v) for v in levels))
+            if _sse_subs:   # skip the JSON encode when nobody's listening
+                _sse_publish({"type": "vu", "levels": levels})
     finally:
         discstation_burn.stop_process(proc)
 
@@ -4277,7 +4375,7 @@ def rip_audio_cd(ser, device):
 
 
 def station_loop(ser):
-    global _last_burn_result, _last_burn_result_time, _tray_open, _tray_open_since, _operation_active, _web_op_verb
+    global _last_burn_result, _last_burn_result_time, _tray_open, _tray_open_since, _operation_active
     discstation_burn.cleanup_old_jobs()
     try:
         device = discstation_burn.disc_device()
@@ -4498,7 +4596,6 @@ def station_loop(ser):
 
         mode = line.split(":", 1)[1].strip().upper()
         print(f"Selected: {mode}")
-        _web_op_verb = "RIPPING" if mode == "RIP" else "BURNING"
         # The web remote's mode buttons queue START right behind SELECT: for a
         # one-click burn (see app.js) - if an earlier selection was abandoned
         # before its own START got consumed (e.g. never uploaded/confirmed a

package/src/discstation_burn.py

@@ -370,12 +370,17 @@ def disc_device():
 
 def _udevadm_props(device):
     # Prefer the shared implementation in discstation (pyudev-backed, with a
-    # cdrom_id refresh). Lazy import to avoid the import cycle with discstation.
-    try:
-        from discstation import udev_cdrom_properties
-        return udev_cdrom_properties(device)
-    except Exception:
-        pass
+    # cdrom_id refresh), injected as udev_cdrom_properties below (same pattern
+    # as status_sink) - `from discstation import ...` here used to re-import
+    # the entry script under a second module name ("discstation" alongside
+    # the real "__main__"), silently duplicating every module-level global
+    # (_web_status et al) and leaving send()'s status_sink rebound to the
+    # duplicate's dead copy, so /progress never saw another update again.
+    if udev_cdrom_properties is not None:
+        try:
+            return udev_cdrom_properties(device)
+        except Exception:
+            pass
     if discstation_host.system_name() != "linux":
         return discstation_host.media_properties(device)
     try:
@@ -519,6 +524,11 @@ def detect_disc_type(device):
 # pipeline emits also updates the web/SSE status in real time.
 status_sink = None
 
+# discstation.py sets this to its own udev_cdrom_properties (pyudev-backed,
+# with a cdrom_id refresh) - see the comment in _udevadm_props for why this
+# can't just be a lazy `import discstation` instead.
+udev_cdrom_properties = None
+
 # discstation.py sets this to its buffered read_serial_line so check_cancel
 # reads the same way station_loop does (partial lines get buffered and
 # reassembled). A bare ser.readline() here can slice a "CANCEL\n" in half
@@ -1180,7 +1190,13 @@ def check_dvd_size(ser, dvd_dir, disc_bytes=None):
         )
     return size
 
-def wait_for_burn_confirm(ser, dvd_dir, disc_capacity):
+def wait_for_burn_confirm(ser, dvd_dir, disc_capacity, auto_confirm=False):
+    """auto_confirm: software/one-click mode has no physical encoder to click
+    here (the confirm-before-committing gesture this gate exists for), and
+    nothing on the web side ever sends CONFIRM/START to it either - without
+    this it blocks forever, looking exactly like a frozen/stuck burn. Every
+    other flow in this app already treats picking a one-click mode as the
+    whole confirmation; this gate does the same for hardware only now."""
     data_size = tree_size(dvd_dir)
     detected_capacity = disc_capacity_bytes(disc_device())
     actual_cap = disc_output_limit_bytes(detected_capacity or disc_capacity)
@@ -1188,6 +1204,8 @@ def wait_for_burn_confirm(ser, dvd_dir, disc_capacity):
     data_gb = data_size / 1_000_000_000
     line = f"WAITING:{data_gb:.2f}GB / {cap_gb:.1f}GB"
     send(ser, line)
+    if auto_confirm:
+        return True
     last_ping = time.time()
     while True:
         if serial_write_failed():

package/src/static/app.js

@@ -106,13 +106,227 @@
       ? "A physical remote is attached — on-screen controls are disabled."
       : "No physical remote detected — control DiscStation from here.";
     $("remote-controls").querySelectorAll("button, input").forEach((el) => { el.disabled = hardware; });
-    $("remote-transport").hidden = !progress.playing;
-    const ejectBtn = $("remote-eject-btn");
     const open = !!progress.tray_open;
-    ejectBtn.textContent = open ? "CLOSE TRAY" : "EJECT";
-    ejectBtn.dataset.cmd = open ? "CONFIRM" : "EJECT";
+    rpLastArgs = { progress, hardware, trayOpen: open };
+    applyPlaybackPanel(progress, hardware, open);
   }
 
+  // ---- Playback panel: screen (status + VU bars), volume slider, 3 buttons ----
+  // Each bar is a fixed-width column (.rp-bar-col) holding two independently
+  // positioned pieces: the animated fill and a peak-hold cap. Both are absolutely
+  // positioned against the column's own stable full-height box (not each other),
+  // so a percentage bottom means the same thing for both regardless of the fill's
+  // current height.
+  //
+  // The backend only ever sends 16 real levels per frame (fixed wire protocol,
+  // shared with the physical OLED's own fixed-size display - not changing that
+  // here). To visually fill the screen with more, narrower bars than that, a
+  // ResizeObserver rebuilds however many ~10px columns actually fit the container's
+  // real width, and renderVuBars maps each one to its source band by nearest
+  // neighbor. #remote-panel starts `hidden` and only appears once the first
+  // hardware-detection response lands, so the container reads 0 width at page load -
+  // the observer (not a one-shot measurement) is what catches the real size once
+  // the panel actually becomes visible.
+  let rpBarFillEls = [], rpBarPeakEls = [];
+  let rpBarTargets = [], rpBarShown = [], rpPeakShown = [];
+  let rpBarRafId = null;
+  const PEAK_FALL_PER_FRAME = 0.8; // %/frame - slow drift down, classic "hang then fall"
+  const RP_BAR_WIDTH = 2, RP_BAR_GAP = 1; // must match .rp-bar-col/.rp-bars CSS
+
+  function buildRpBars(count) {
+    const container = $("rp-bars");
+    container.innerHTML = "";
+    rpBarFillEls = []; rpBarPeakEls = [];
+    for (let i = 0; i < count; i++) {
+      const col = document.createElement("span");
+      col.className = "rp-bar-col";
+      const fill = document.createElement("span");
+      fill.className = "rp-bar-fill";
+      const peak = document.createElement("span");
+      peak.className = "rp-bar-peak";
+      col.append(fill, peak);
+      container.appendChild(col);
+      rpBarFillEls.push(fill);
+      rpBarPeakEls.push(peak);
+    }
+    rpBarTargets = new Array(count).fill(0);
+    rpBarShown = new Array(count).fill(0);
+    rpPeakShown = new Array(count).fill(0);
+  }
+
+  function initRpBars() {
+    buildRpBars(16); // usable default before the panel's real width is known
+    new ResizeObserver((entries) => {
+      const width = entries[0].contentRect.width;
+      if (width <= 0) return;
+      const count = Math.max(16, Math.floor((width + RP_BAR_GAP) / (RP_BAR_WIDTH + RP_BAR_GAP)));
+      if (count !== rpBarFillEls.length) buildRpBars(count);
+    }).observe($("rp-bars"));
+  }
+
+  // VU frames arrive over SSE at a genuinely irregular interval (measured live:
+  // clustered around 5/42/85/127ms, not a steady rate - PulseAudio's own delivery
+  // fragments don't evenly divide our desired chunk size). A fixed-duration CSS
+  // transition can't win against that: too short and the big gaps still jump, too
+  // long and it self-interrupts during the tight bursts. Decoupling render timing
+  // from arrival timing instead - track a target per bar, ease toward it every real
+  // animation frame - is smooth regardless of how the data actually arrives.
+  function renderVuBars(levels) {
+    if (!levels) return;
+    const n = rpBarFillEls.length;
+    const lastBand = levels.length - 1;
+    for (let i = 0; i < n; i++) {
+      // Linear interpolation between the two real bands straddling this bar's
+      // position, not nearest-neighbor - copying one real value across a whole
+      // run of bars is exactly what made groups of them move as one identical
+      // block once there were many more bars than real data points (16).
+      const pos = (i * lastBand) / (n - 1); // bar 0 -> band 0, bar n-1 -> last band
+      const lo = Math.floor(pos), hi = Math.min(lastBand, lo + 1), frac = pos - lo;
+      const src = levels[lo] * (1 - frac) + levels[hi] * frac;
+      rpBarTargets[i] = Math.max(0, Math.min(100, (src / 63) * 100));
+    }
+    if (rpBarRafId === null) rpBarRafId = requestAnimationFrame(tickVuBars);
+  }
+
+  function tickVuBars() {
+    let stillMoving = false;
+    rpBarFillEls.forEach((fill, i) => {
+      const diff = rpBarTargets[i] - rpBarShown[i];
+      if (Math.abs(diff) > 0.5) { rpBarShown[i] += diff * 0.35; stillMoving = true; }
+      else { rpBarShown[i] = rpBarTargets[i]; }
+      fill.style.height = `${rpBarShown[i]}%`;
+
+      if (rpBarTargets[i] >= rpPeakShown[i]) { rpPeakShown[i] = rpBarTargets[i]; }
+      else { rpPeakShown[i] = Math.max(0, rpPeakShown[i] - PEAK_FALL_PER_FRAME); }
+      rpBarPeakEls[i].style.bottom = `${rpPeakShown[i]}%`;
+      rpBarPeakEls[i].style.opacity = rpPeakShown[i] > 1 ? "1" : "0";
+      if (rpPeakShown[i] > 0) stillMoving = true;
+    });
+    rpBarRafId = stillMoving ? requestAnimationFrame(tickVuBars) : null;
+  }
+
+  function resetVuBars() {
+    rpBarTargets.fill(0);
+    rpBarShown.fill(0);
+    rpPeakShown.fill(0);
+    rpBarFillEls.forEach((fill) => { fill.style.height = "0%"; });
+    rpBarPeakEls.forEach((peak) => { peak.style.bottom = "0%"; peak.style.opacity = "0"; });
+    if (rpBarRafId !== null) { cancelAnimationFrame(rpBarRafId); rpBarRafId = null; }
+    lastVuFrameAt = 0;
+  }
+
+  // Real VU data only ever flows on Linux (PulseAudio capture - see
+  // docs/PLATFORM_SUPPORT.md for why macOS/Windows can't) and stops the moment
+  // playback is paused even there, but `progress.playing` stays true throughout
+  // a pause - so "is a real frame actually arriving right now" has to be tracked
+  // separately, mirroring the firmware's own lastVuAt/VU_TIMEOUT_MS fallback
+  // (arduino/DiscStation/DiscStation.ino). Whenever it isn't, show a spinning
+  // disc in the same slot instead of empty/frozen bars.
+  let lastVuFrameAt = 0;
+  let rpLastIdleWithDisc = false;
+  const VU_TIMEOUT_MS = 1200;
+  function updateVuSlot() {
+    // idleWithDisc owns the slot instead (the title+modes menu) - otherwise
+    // this slot is always showing *something*: real bars while they're
+    // actually flowing, the spinning disc otherwise - covering paused,
+    // platforms with no VU capture, and plain idle-with-no-disc alike (that
+    // last one used to just sit blank).
+    if (rpLastIdleWithDisc) {
+      $("rp-bars").hidden = true;
+      $("rp-discsaver").hidden = true;
+      return;
+    }
+    const vuFlowing = rpLastPlaying && Date.now() - lastVuFrameAt < VU_TIMEOUT_MS;
+    $("rp-bars").hidden = !vuFlowing;
+    $("rp-discsaver").hidden = vuFlowing;
+  }
+
+  let rpLastPlaying = false;
+  function applyPlaybackPanel(progress, hardware, trayOpen) {
+    const wasPlaying = rpLastPlaying;
+    rpLastPlaying = !!progress.playing;
+    const menuItems = (rpDiscInfo && rpDiscInfo.menu_items) || [];
+
+    // Mirrors the OLED's own state machine (arduino/DiscStation/DiscStation.ino):
+    // playing -> live track status + VU bars (drawPlay); idle with a disc in the
+    // drive -> the disc's name/status line + the modes it offers (drawHome); no
+    // disc at all (e.g. just ejected) -> plain status text, neither bars nor menu.
+    const idleWithDisc = !progress.playing && rpDiscInfo && rpDiscInfo.disc_present && !rpDiscInfo.busy;
+    if (idleWithDisc) {
+      $("rp-status").textContent = (rpDiscInfo.disc_title || discLineText(rpDiscInfo)).toUpperCase();
+    } else {
+      // CSS handles the visual cutoff (ellipsis) - no hard slice here so it
+      // never chops a word off abruptly mid-string.
+      $("rp-status").textContent = (progress.status || "READY").toUpperCase();
+    }
+    // Bars (or, lacking real VU data, the spinning-disc fallback) belong on
+    // screen only while something is actually playing - not just "not
+    // idle-with-a-disc" (that left them visibly stuck at their last frame once
+    // playback stopped with no disc left to show a menu for instead).
+    rpLastIdleWithDisc = idleWithDisc;
+    updateVuSlot();
+    if (wasPlaying && !progress.playing) resetVuBars(); // clear the last frame, don't leave it stuck
+    $("rp-menu").hidden = !idleWithDisc;
+    if (idleWithDisc) {
+      $("rp-menu").innerHTML = "";
+      menuItems.forEach((mode) => {
+        const line = document.createElement("div");
+        line.textContent = mode;
+        $("rp-menu").appendChild(line);
+      });
+    }
+
+    const ejectBtn = $("remote-controls").querySelector('[data-role="eject"]');
+    if (ejectBtn) { ejectBtn.dataset.cmd = trayOpen ? "CONFIRM" : "EJECT"; ejectBtn.disabled = hardware; }
+
+    // HOME/BACK: PLAY_STOP while playing, CANCEL otherwise - matches the
+    // firmware's own handleHomeButton (uiState == UI_PLAY ? "PLAY_STOP" : "CANCEL").
+    const homeBtn = $("remote-controls").querySelector('[data-role="home"]');
+    if (homeBtn) { homeBtn.dataset.cmd = progress.playing ? "PLAY_STOP" : "CANCEL"; homeBtn.disabled = hardware; }
+
+    // PLAY/PAUSE: toggle pause while playing; jump into PLAY from idle only when
+    // the disc offers it (matches handlePlayPauseButton) - disabled otherwise,
+    // e.g. correctly dead during a RIP.
+    const ppBtn = $("remote-controls").querySelector('[data-role="playpause"]');
+    if (ppBtn) {
+      const canPlay = menuItems.includes("PLAY");
+      if (progress.playing) { ppBtn.dataset.cmd = "PLAY_BUTTON"; ppBtn.disabled = hardware; }
+      else if (canPlay) { ppBtn.dataset.cmd = "SELECT:PLAY"; ppBtn.disabled = hardware; }
+      else { ppBtn.disabled = true; }
+    }
+
+    // Track skip only makes sense mid-song, for an audio CD specifically (not a
+    // DVD-Video/etc. play) - /progress doesn't carry disc kind, so fall back to
+    // the cached /disc-info, which keeps reporting it while the drive is held
+    // busy for the whole play session (see _serve_disc_info's _operation_active
+    // branch).
+    const trackRow = $("rp-trackrow");
+    if (trackRow) {
+      const isAudioCd = !!(rpDiscInfo && rpDiscInfo.kind === "audio_cd");
+      trackRow.hidden = !(progress.playing && isAudioCd);
+      trackRow.querySelectorAll(".rp-btn").forEach((b) => { b.disabled = hardware; });
+    }
+  }
+
+  let rpDiscInfo = null; // latest /disc-info response - drives the idle HOME-style screen
+  function setPlaybackDiscInfo(info) {
+    rpDiscInfo = info || null;
+    if (rpLastArgs) applyPlaybackPanel(rpLastArgs.progress, rpLastArgs.hardware, rpLastArgs.trayOpen);
+  }
+
+  let rpLastArgs = null;
+  let volumeTimer;
+  $("remote-playback").addEventListener("click", (event) => {
+    const btn = event.target.closest("[data-role]");
+    if (btn && !btn.disabled) sendRemoteCmd(btn.dataset.cmd);
+  });
+  $("rp-volume").addEventListener("input", (event) => {
+    clearTimeout(volumeTimer);
+    const value = event.target.value;
+    volumeTimer = setTimeout(() => sendRemoteCmd(`POT:${value}`), 150);
+  });
+  initRpBars();
+
   // Firmware row: outside the remote panel on purpose - a hardware remote hides
   // that panel, and hardware is exactly when there is a remote to update.
   function applyFirmwareState(progress) {
@@ -139,7 +353,19 @@
     } catch (_) { /* SSE/poll shows the real state */ }
   });
 
-  async function sendRemoteCmd(cmd) {
+  let lastCmdKey = "", lastCmdAt = 0;
+  async function sendRemoteCmd(cmd, { allowRepeat = false } = {}) {
+    // Guard against a duplicate dispatch of the identical command landing
+    // within the same instant (e.g. a click/pointer pair both bubbling to
+    // the same handler) - a real user's next distinct press is unaffected,
+    // this only catches an exact repeat inside a tiny window. The knob's
+    // encoder ticks pass allowRepeat: true - a fast spin legitimately fires
+    // the same command (e.g. REW:BIG) several times in a row on purpose,
+    // unlike a duplicated button click.
+    const now = Date.now();
+    if (!allowRepeat && cmd === lastCmdKey && now - lastCmdAt < 250) return;
+    lastCmdKey = cmd;
+    lastCmdAt = now;
     try {
       await fetch("/remote/button", {
         method: "POST",
@@ -165,12 +391,6 @@
     // silently drop the START - see _handle_remote_button in discstation.py).
     await sendRemoteCmd(cmd);
   });
-  let volumeTimer;
-  $("remote-volume").addEventListener("input", (event) => {
-    clearTimeout(volumeTimer);
-    const value = event.target.value;
-    volumeTimer = setTimeout(() => sendRemoteCmd(`POT:${value}`), 150);
-  });
 
   // Mode-select buttons this server-computed list governs - CANCEL/EJECT are
   // controls, not modes, and stay available regardless (same as hardware).
@@ -191,6 +411,7 @@
       const info = await response.json();
       renderDiscStatus(info);
       applyMenuItems(info.menu_items);
+      setPlaybackDiscInfo(info);
       if (info.busy) return;               // burn/rip in progress — keep current
       state.discBytes = Number(info.capacity_bytes || 0);
       state.discType = info.type || "none";
@@ -202,16 +423,19 @@
     }
   }
 
-  function renderDiscStatus(info) {
-    const el = $("remote-disc-status");
-    if (!el) return;
-    if (!info) { el.textContent = "DISC: UNKNOWN"; return; }
-    if (info.busy) { el.textContent = "DISC: BUSY"; return; }
-    if (!info.disc_present) { el.textContent = "DISC: NONE"; return; }
+  function discLineText(info) {
+    if (!info) return "DISC: UNKNOWN";
+    if (info.busy) return "DISC: BUSY";
+    if (!info.disc_present) return "DISC: NONE";
     const kind = (info.type || info.kind || "unknown").toUpperCase();
     const label = info.label ? ` "${info.label}"` : "";
     const size = info.capacity_gb ? ` // ${info.capacity_gb}GB` : "";
-    el.textContent = `DISC: ${kind}${label}${size}`;
+    return `DISC: ${kind}${label}${size}`;
+  }
+
+  function renderDiscStatus(info) {
+    const el = $("remote-disc-status");
+    if (el) el.textContent = discLineText(info);
   }
 
   function renderSelection() {
@@ -393,6 +617,7 @@
       let d;
       try { d = JSON.parse(ev.data); } catch (_) { return; }
       if (d.type === "disc-changed") { loadDiscInfo(); return; }
+      if (d.type === "vu") { lastVuFrameAt = Date.now(); renderVuBars(d.levels); updateVuSlot(); return; }
       setConnection(true);
       setLiveStatus(d.status);
       setProgress(d.status, Number(d.progress), d.active);
@@ -408,6 +633,10 @@
     // Backstops: catch a zombie SSE connection, and refresh disc state slowly.
     setInterval(() => { if (!es || es.readyState !== 1) pollStatus(); }, 8000);
     setInterval(loadDiscInfo, 15000);
+    // Nothing else re-checks the clock once VU frames stop arriving (pause, a
+    // host platform with no capture, a dropped connection) - this is what
+    // actually notices and flips to the spinning-disc fallback promptly.
+    setInterval(updateVuSlot, 300);
   }
 
   if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js?v=8").catch(() => {});

package/src/static/index.html

@@ -56,19 +56,26 @@
             <button class="outline-button" type="button" data-cmd="SELECT:BURN DATA">BURN DATA</button>
             <button class="outline-button" type="button" data-cmd="SELECT:BURN AUDIO">BURN AUDIO</button>
             <button class="outline-button" type="button" data-cmd="SELECT:RIP">RIP</button>
-            <button class="outline-button" type="button" data-cmd="SELECT:PLAY">PLAY</button>
-            <button class="outline-button" type="button" data-cmd="CANCEL">CANCEL / HOME</button>
-            <button class="outline-button" type="button" id="remote-eject-btn" data-cmd="EJECT">EJECT</button>
           </div>
-          <div id="remote-transport" class="remote-transport" hidden>
-            <div class="remote-grid">
-              <button class="outline-button" type="button" data-cmd="REW:BIG">&#x23EE; PREV</button>
-              <button class="outline-button" type="button" data-cmd="PLAY_BUTTON">&#x23EF; PLAY/PAUSE</button>
-              <button class="outline-button" type="button" data-cmd="FF:BIG">&#x23ED; NEXT</button>
-              <button class="outline-button" type="button" data-cmd="PLAY_STOP">&#x23F9; STOP</button>
+          <div id="remote-playback" class="remote-playback">
+            <div class="rp-main">
+              <div id="rp-trackrow" class="rp-trackrow" hidden>
+                <button class="rp-btn rp-trackbtn" type="button" data-role="prev" data-cmd="REW:BIG" aria-label="Previous track"><span class="rp-glyph">&#x23EE;</span></button>
+                <button class="rp-btn rp-trackbtn" type="button" data-role="next" data-cmd="FF:BIG" aria-label="Next track"><span class="rp-glyph">&#x23ED;</span></button>
+              </div>
+              <div class="rp-screen">
+                <div id="rp-status" class="rp-status">READY</div>
+                <div id="rp-bars" class="rp-bars"></div>
+                <div id="rp-discsaver" class="rp-discsaver" hidden></div>
+                <div id="rp-menu" class="rp-menu" hidden></div>
+              </div>
+              <input id="rp-volume" type="range" min="0" max="100" value="70" aria-label="Volume">
+            </div>
+            <div class="rp-buttons">
+              <button class="rp-btn" type="button" data-role="eject" aria-label="Eject"><span class="rp-glyph">&#x23CF;</span></button>
+              <button class="rp-btn" type="button" data-role="home" aria-label="Home / Back"><span class="rp-dot"></span></button>
+              <button class="rp-btn" type="button" data-role="playpause" aria-label="Play / Pause"><span class="rp-glyph">&#x23EF;</span></button>
             </div>
-            <label class="field-label" for="remote-volume">VOLUME</label>
-            <input id="remote-volume" type="range" min="0" max="100" value="70">
           </div>
         </div>
       </section>
@@ -144,7 +151,7 @@
     </footer>
   </div>
   <div id="install-slot"></div>
-  <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js?v=20").catch(() => {});</script>
-  <script src="/static/app.js?v=20" defer></script>
+  <script>if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js?v=47").catch(() => {});</script>
+  <script src="/static/app.js?v=47" defer></script>
 </body>
 </html>

package/src/static/style.css

@@ -304,8 +304,136 @@ h2 { margin-top: 8px; font-family: var(--display); font-size: clamp(30px, 7vw, 6
 }
 .remote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
 #remote-controls button:disabled, #remote-controls input:disabled { cursor: not-allowed; opacity: 0.4; }
-.remote-transport { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--soft-line); }
-.remote-transport input[type="range"] { width: 100%; margin-top: 4px; accent-color: var(--accent); }
+/* Playback control panel: a screen + volume slider beside a column of 3 icon
+   buttons (EJECT / HOME / PLAY-PAUSE) - plain HTML/CSS, themed with the page's
+   own custom properties like everything else here. Always visible (same as
+   CANCEL/EJECT above it), not gated behind a view toggle. */
+.remote-playback {
+  margin-top: 20px;
+  padding-top: 18px;
+  border-top: 1px solid var(--soft-line);
+  display: flex;
+  gap: 12px;
+}
+.rp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
+.rp-screen {
+  background: #0a0a0a;
+  border: 1px solid var(--ink);
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 3px #1a1a1a, inset 0 2px 6px rgba(0, 0, 0, 0.6);
+  padding: 10px 12px 8px;
+  min-height: 60px;
+  flex: 1; /* fill .rp-main's column so it lines up with the 3-button column beside it */
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.rp-status {
+  color: #f2f2f2;
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rp-bars {
+  display: flex;
+  align-items: stretch; /* each .rp-bar-col gets the full height as a stable box for its two absolutely-positioned children */
+  justify-content: space-between; /* bars stay a fixed width but spread across the full screen width */
+  gap: 1px;
+  flex: 1; /* fill the screen down to its bottom edge, not just a fixed strip under the text */
+  border-top: 1px solid #262626;
+  padding-top: 4px;
+}
+.rp-bar-col { position: relative; flex: 0 0 2px; width: 2px; }
+.rp-bar-fill {
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  height: 0;
+  min-height: 1px;
+  background: var(--accent);
+  box-shadow: 0 0 6px var(--accent);
+}
+.rp-bar-peak {
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  height: 2px;
+  background: var(--accent);
+  box-shadow: 0 0 5px var(--accent);
+  opacity: 0;
+  transition: opacity 0.15s linear;
+}
+/* Idle-with-disc: the OLED's own HOME screen shows the modes this disc offers below
+   its name/status line - this is that list, filling the same slot bars use while
+   playing (see applyPlaybackPanel in app.js). */
+.rp-menu {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3px;
+  border-top: 1px solid #262626;
+  padding-top: 4px;
+  color: var(--accent);
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+/* Both rows set their own `display` above, which otherwise beats the browser's
+   default [hidden] { display: none } (author styles always win over the UA
+   stylesheet) - the `hidden` attribute was being set correctly in JS but doing
+   nothing visually without this. */
+.rp-bars[hidden], .rp-menu[hidden], .rp-discsaver[hidden] { display: none; }
+
+/* Fallback for whenever real VU data isn't actually flowing (paused, a host
+   platform with no audio-capture support, or just-started-playing before the
+   first frame arrives) - see updateVuSlot() in app.js. A CSS-only spinning
+   vinyl-record glyph, matching this page's existing all-CSS/Unicode-glyph
+   iconography (no SVG/bitmap assets anywhere else in this file). */
+.rp-discsaver {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #262626;
+  padding-top: 4px;
+}
+.rp-discsaver::before {
+  content: "";
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 2px solid var(--accent);
+  background: radial-gradient(circle, #0a0a0a 0 22%, transparent 23%),
+              repeating-radial-gradient(var(--ink) 0 1px, transparent 1px 4px);
+  box-shadow: 0 0 6px var(--accent);
+  animation: rp-disc-spin 2.4s linear infinite;
+}
+@keyframes rp-disc-spin { to { transform: rotate(360deg); } }
+.rp-main input[type="range"] { width: 100%; accent-color: var(--accent); }
+.rp-buttons { display: flex; flex-direction: column; gap: 8px; }
+.rp-btn {
+  width: 52px;
+  height: 52px;
+  border: 1px solid var(--ink);
+  background: var(--surface);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s ease;
+}
+.rp-btn:hover { background: var(--paper-deep); }
+.rp-btn:active { background: var(--accent); }
+.rp-btn:disabled { cursor: not-allowed; opacity: 0.4; }
+.rp-glyph { font-size: 22px; color: var(--ink); }
+.rp-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink); }
+.rp-trackrow { display: flex; gap: 8px; }
+.rp-trackrow[hidden] { display: none; }
+.rp-trackbtn { flex: 1; width: auto; height: 32px; }
 
 .footer-stamp {
   display: flex;