Group media behaviour

static/app.js

@@ -60,6 +60,7 @@ const ui = {
   options: el('[data-role="options"]'),
   avr: el('.card.avr'),
   joined: el('[data-role="joined"]'),
+  avrMedia: el('[data-role="avr-media"]'),
   avrNowPlaying: el('[data-role="avr-now-playing"]'),
   avrCover: el('[data-role="avr-cover"]'),
   avrSong: el('[data-role="avr-song"]'),
@@ -72,6 +73,7 @@ const ui = {
 // into the AVR (a Zidoo, say) is "now playing" the same way a room's own
 // stream is.
 const avrTrack = {
+  media: ui.avrMedia,
   nowPlaying: ui.avrNowPlaying,
   cover: ui.avrCover,
   song: ui.avrSong,
@@ -132,7 +134,7 @@ els('.room').forEach((node) => {
     play: el('[data-role="play"]', node),
     next: el('[data-role="next"]', node),
     sources: el('.sources', node),   // the resume buttons and the host toggle
-    nowPlaying: el('[data-role="now-playing"]', node),
+    media: el('[data-role="media"]', node),
     cover: el('[data-role="cover"]', node),
     song: el('[data-role="song"]', node),
     artist: el('[data-role="artist"]', node),
@@ -233,7 +235,7 @@ function paintRoom(room) {
    it flicker. */
 function renderTrack(track, refs) {
   renderProgress(track, refs);
-  refs.nowPlaying.hidden = !track;
+  refs.media.hidden = !track;
   if (!track) return;
   refs.song.textContent = track.song;
   refs.artist.textContent = track.artist || '';
@@ -257,8 +259,6 @@ function renderTrack(track, refs) {
    here -- a poll, a drag, or a seek landing -- corrects it and moves the
    mark again. */
 function renderProgress(track, refs) {
-  const { progress } = refs;
-  progress.hidden = !track;
   refs.shown = null;
   refs.tick = null;
   if (!track) return;