Remove group management

static/app.js

@@ -23,8 +23,25 @@ const ui = {
   options: el('[data-role="options"]'),
   joined: el('[data-role="joined"]'),
   joinedRooms: el('[data-role="joined-rooms"]'),
+  avrNowPlaying: el('[data-role="avr-now-playing"]'),
+  avrCover: el('[data-role="avr-cover"]'),
+  avrSong: el('[data-role="avr-song"]'),
+  avrArtist: el('[data-role="avr-artist"]'),
 };
 
+// Shares its shape with a room's {nowPlaying, cover, song, artist} refs, so
+// renderTrack() below works for both -- a device plugged into the AVR (a
+// Zidoo, say) is "now playing" the same way a room's own stream is.
+const avrTrack = {
+  nowPlaying: ui.avrNowPlaying,
+  cover: ui.avrCover,
+  song: ui.avrSong,
+  artist: ui.avrArtist,
+};
+// Same reasoning as a room's own cover: drop one that will not load rather
+// than leave a broken-image box.
+avrTrack.cover.addEventListener('error', () => { avrTrack.cover.hidden = true; });
+
 const rooms = {};
 let inputs = [];
 let currentInput = null;
@@ -147,24 +164,27 @@ function paintRoom(room) {
   placeRoom(room);
 }
 
-/* Song, artist and cover, each only when HEOS has one. The cover's src is
+/* Song, artist and cover, each only when there is one. The cover's src is
    only touched when the track changes, so a poll never makes it flicker. */
-function paintTrack(room) {
-  const track = room.available ? room.track : null;
-  room.nowPlaying.hidden = !track;
+function renderTrack(track, refs) {
+  refs.nowPlaying.hidden = !track;
   if (!track) return;
-  room.song.textContent = track.song;
-  room.artist.textContent = track.artist || '';
-  room.artist.hidden = !track.artist;
+  refs.song.textContent = track.song;
+  refs.artist.textContent = track.artist || '';
+  refs.artist.hidden = !track.artist;
   if (!track.image) {
-    room.cover.hidden = true;
-    room.cover.removeAttribute('src');
-  } else if (room.cover.getAttribute('src') !== track.image) {
-    room.cover.hidden = false;
-    room.cover.src = track.image;
+    refs.cover.hidden = true;
+    refs.cover.removeAttribute('src');
+  } else if (refs.cover.getAttribute('src') !== track.image) {
+    refs.cover.hidden = false;
+    refs.cover.src = track.image;
   }
 }
 
+function paintTrack(room) {
+  renderTrack(room.available ? room.track : null, room);
+}
+
 /* A merged room moves into the host's card, because that is what merging
    means: one group, playing one thing. Leaving puts the card back in its
    own slot, which is why the slots exist. */
@@ -467,6 +487,7 @@ function render(state) {
   ui.inputName.textContent = currentInput ? currentInput.name : '—';
   ui.avrStatus.textContent = avr.connected ? 'ready' : 'offline';
   ui.avrStatus.classList.toggle('on', Boolean(avr.connected));
+  renderTrack(avr.now_playing || null, avrTrack);
 
   const problems = state.errors || [];
   ui.foot.textContent = problems.length ? problems[0] : (state.demo ? 'demo mode — no real speakers' : '');