Add song progress bar

static/app.js

@@ -88,6 +88,7 @@ els('.room').forEach((node) => {
     cover: el('[data-role="cover"]', node),
     song: el('[data-role="song"]', node),
     artist: el('[data-role="artist"]', node),
+    progress: el('[data-role="progress"]', node),
     steps: els('.step', node),
     volume: null,
     playState: null,
@@ -131,6 +132,7 @@ function paintRoom(room) {
   room.steps.forEach((button) => { button.disabled = !room.available; });
   paintTrack(room);
   const playing = room.playState === 'play';
+  room.node.classList.toggle('playing', playing);
   room.play.classList.toggle('playing', playing);
   room.play.disabled = !room.available || room.playState === null;
   room.play.setAttribute(
@@ -183,6 +185,22 @@ function renderTrack(track, refs) {
 
 function paintTrack(room) {
   renderTrack(room.available ? room.track : null, room);
+  paintProgress(room);
+}
+
+/* The discreet cursor on the line below the song, sized off the same
+   {position_ms, duration_ms} the poll hands back -- absent for anything
+   HEOS never sends a progress event for (an AVR input, an internet radio
+   stream with no fixed length), in which case the line stays plain. */
+function paintProgress(room) {
+  const track = room.available ? room.track : null;
+  room.progress.hidden = !track;
+  if (!track) return;
+  const { position_ms: position, duration_ms: duration } = track;
+  const known = typeof duration === 'number' && duration > 0 && typeof position === 'number';
+  const percent = known ? Math.min(100, Math.max(0, (position / duration) * 100)) : 0;
+  room.progress.classList.toggle('known', known);
+  room.progress.style.setProperty('--progress', percent);
 }
 
 /* A merged room moves into the host's card, because that is what merging