heos/static/app.js

/* The panel. Every control acts immediately and reconciles with what the
   speakers report a moment later, because a remote that waits for a
   network round trip before it looks like it did anything feels broken. */

const STEP = Number(document.documentElement.dataset.step) || 2;
// Where the app is mounted: "/" on its own port, "/heos/" behind a proxy.
const BASE = document.documentElement.dataset.base || '/';
const POLL_MS = 5000;

const el = (sel, root = document) => root.querySelector(sel);
const els = (sel, root = document) => Array.from(root.querySelectorAll(sel));

const SPEAKER = { viewbox: '0 0 384 512', path: 'M0 64C0 28.7 28.7 0 64 0L320 0c35.3 0 64 28.7 64 64l0 384c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zM304 336a112 112 0 1 0 -224 0 112 112 0 1 0 224 0zM192 272a64 64 0 1 1 0 128 64 64 0 1 1 0-128zm0-112a48 48 0 1 0 0-96 48 48 0 1 0 0 96z' };
const SPEAKERS = { viewbox: '0 -32 448 576', path: 'M160-32C124.7-32 96-3.3 96 32l0 352c0 35.3 28.7 64 64 64l224 0c35.3 0 64-28.7 64-64l0-352c0-35.3-28.7-64-64-64L160-32zM272 184a104 104 0 1 1 0 208 104 104 0 1 1 0-208zm56 104a56 56 0 1 0 -112 0 56 56 0 1 0 112 0zM240 64a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 88c0-13.3-10.7-24-24-24S0 74.7 0 88L0 480c0 35.3 28.7 64 64 64l264 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L64 496c-8.8 0-16-7.2-16-16L48 88z' };
const TV = { viewbox: '0 0 576 512', path: 'M64 96l0 240 448 0 0-240-448 0zM0 96C0 60.7 28.7 32 64 32l448 0c35.3 0 64 28.7 64 64l0 240c0 35.3-28.7 64-64 64L64 400c-35.3 0-64-28.7-64-64L0 96zM160 448l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z' };

// Keyed on a room's kind (config.IN_ROOM_GROUPS, or "avr") or an input's
// HEOS id, straight from data-icon or GET /api/avr/inputs' "code" -- not
// something a room name or a renamed input label could change. "plug" is
// the fallback for an input HEOS reports that none of these name.
const ICONS = {
  avr: { viewbox: '0 0 448 512', path: 'M64 32C28.7 32 0 60.7 0 96l0 64c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-64c0-35.3-28.7-64-64-64L64 32zm216 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm56 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM64 288c-35.3 0-64 28.7-64 64l0 64c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-64c0-35.3-28.7-64-64-64L64 288zm216 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm56 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z' },
  'none': SPEAKER,
  'stereo-pair': SPEAKERS,
  'lcr-fronts': SPEAKERS,
  'surround-sound-system': SPEAKERS,
  'subwoofer': SPEAKER,
  mediaplayer: { viewbox: '0 -16 576 512', path: 'M0 112c0 70.7 57.3 128 128 128l224 0c70.7 0 128-57.3 128-128S422.7-16 352-16c-48.2 0-90.2 26.6-112 66-21.8-39.4-63.8-66-112-66-70.7 0-128 57.3-128 128zm304 0a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM128 64a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM64 352l0 64c0 35.3 28.7 64 64 64l224 0c35.3 0 64-28.7 64-64l0-64c0-35.3-28.7-64-64-64l-224 0c-35.3 0-64 28.7-64 64zM537.5 490.8c4.2 3.4 9.4 5.2 14.8 5.2 13.1 0 23.7-10.6 23.7-23.7l0-240.6c0-13.1-10.6-23.7-23.7-23.7-5.4 0-10.6 1.8-14.8 5.2l-73.5 58.8 0 160 73.5 58.8z' },
  game: { viewbox: '0 0 640 512', path: 'M448 64c106 0 192 86 192 192S554 448 448 448l-256 0C86 448 0 362 0 256S86 64 192 64l256 0zM192 176c-13.3 0-24 10.7-24 24l0 32-32 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l32 0 0 32c0 13.3 10.7 24 24 24s24-10.7 24-24l0-32 32 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-32 0 0-32c0-13.3-10.7-24-24-24zm240 96a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm64-96a32 32 0 1 0 0 64 32 32 0 1 0 0-64z' },
  tv: TV,
  tvaudio: TV,
  plug: { viewbox: '0 -32 448 544', path: 'M128-32c17.7 0 32 14.3 32 32l0 96 128 0 0-96c0-17.7 14.3-32 32-32s32 14.3 32 32l0 96 64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 64c0 95.1-69.2 174.1-160 189.3l0 66.7c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-66.7C101.2 398.1 32 319.1 32 224l0-64c-17.7 0-32-14.3-32-32S14.3 96 32 96l64 0 0-96c0-17.7 14.3-32 32-32z' },
};

function inputIcon(code) {
  return ICONS[(code || '').replace('inputs/', '')] || ICONS.plug;
}

/* Repaints an inline <svg><path/></svg> in place -- cheaper than replacing
   the node, and there is no library here to lose track of the change. */
function paintIcon(svg, icon) {
  svg.setAttribute('viewBox', icon.viewbox);
  svg.firstElementChild.setAttribute('d', icon.path);
}

// Room and AVR cards carry their icon as a fixed kind (data-icon="avr", set
// server-side from config -- see index.html) rather than the AVR input's
// live one, so these paint once, not on every poll.
els('[data-icon]').forEach((svg) => paintIcon(svg, ICONS[svg.dataset.icon]));

const ui = {
  foot: el('[data-role="foot"]'),
  toast: el('[data-role="toast"]'),
  refresh: el('[data-role="refresh"]'),
  avrStatus: el('[data-role="avr-status"]'),
  inputButton: el('[data-role="input-button"]'),
  inputName: el('[data-role="input-name"]'),
  inputIcon: el('[data-role="input-icon"]'),
  sheet: el('[data-role="sheet"]'),
  options: el('[data-role="options"]'),
  source: el('.card.source'),
  joined: el('[data-role="joined"]'),
  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"]'),
  avrProgress: el('[data-role="avr-progress"]'),
};

// Shares its shape with a room's {nowPlaying, cover, song, artist,
// progress} 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,
  progress: ui.avrProgress,
};
// 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;
let avrNowPlaying = null;

/* --- transport -------------------------------------------------------- */
async function api(path, body) {
  const options = body === undefined
    ? {}
    : { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) };
  const response = await fetch(BASE + path.replace(/^\//, ''), options);
  let data = {};
  try { data = await response.json(); } catch (_) { /* empty or not JSON */ }
  if (!response.ok) throw new Error(data.error || `${response.status} ${response.statusText}`);
  return data;
}

let toastTimer;
/* Red by default, since most toasts report trouble; 'ok' for a confirmation. */
function toast(message, kind = 'error') {
  ui.toast.textContent = message;
  ui.toast.classList.toggle('ok', kind === 'ok');
  ui.toast.hidden = false;
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => { ui.toast.hidden = true; }, 4000);
}

/* --- rooms ------------------------------------------------------------ */
els('.room').forEach((node) => {
  const key = node.dataset.room;
  const room = {
    key,
    node,
    slot: el(`.room-slot[data-slot="${key}"]`),
    level: el('[data-role="level"]', node),
    meter: el('[data-role="meter"]', node),
    actions: el('[data-role="actions"]', node),
    toggle: el('[data-role="group"]', node),
    toggleLabel: el('[data-role="group-label"]', node),
    prev: el('[data-role="prev"]', node),
    play: el('[data-role="play"]', node),
    next: el('[data-role="next"]', node),
    spotify: el('.spotify-row', node),   // the resume buttons and the host toggle
    nowPlaying: el('[data-role="now-playing"]', 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,
    track: null,    // {song, artist, image} while something is loaded
    onSpotify: false,
    spotifyAccount: null,   // the account playing here, whose button gets a border
    grouped: false,
    available: false,
    taps: 0,        // button presses not yet sent
    wanted: null,   // a level dragged to, not yet sent
    dragging: false,
    inflight: false,
    busy: false,    // a grouping change is in flight
    playBusy: false,
  };
  rooms[key] = room;

  room.steps.forEach((button) => {
    const direction = Number(button.dataset.delta);
    holdable(button, () => nudge(key, direction));
  });
  draggable(room);

  // A cover that will not load (gone, or plain http on an https page) is
  // dropped rather than left as a broken-image box. Its src stays put, so
  // the next poll does not try it again until the track changes.
  room.cover.addEventListener('error', () => { room.cover.hidden = true; });

  room.toggle.addEventListener('click', () => setGrouped(key, !room.grouped));
  room.prev.addEventListener('click', () => skipTrack(key, 'previous'));
  room.play.addEventListener('click', () => togglePlay(key));
  room.next.addEventListener('click', () => skipTrack(key, 'next'));
});

function paintRoom(room) {
  const known = room.volume !== null && room.volume !== undefined;
  room.level.textContent = known ? room.volume : '—';
  // The fill and the knob riding it both size themselves off this.
  room.meter.style.setProperty('--level', known ? room.volume : 0);
  room.node.classList.toggle('offline', !room.available);
  room.steps.forEach((button) => { button.disabled = !room.available; });
  renderTrack(room.available ? room.track : null, 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(
    'aria-label', `${room.node.querySelector('h2').textContent}: ${playing ? 'pause' : 'play'}`);
  // Previous, play/pause and next only mean something for a Spotify stream:
  // an AVR input has no queue to pause or skip, and starting Spotify is what
  // the account buttons are for. Grouped, transport belongs to the AVR's
  // card, not this one -- pressing them here would still work (it shares
  // the group's transport) but only invites confusion about which card is
  // actually in charge of it. And only for a stream one of our own accounts
  // is playing: someone else's phone keeps its own controls. The row shows
  // or hides as one, so an empty row never leaves a gap in the card.
  room.actions.hidden = !(room.onSpotify && room.spotifyAccount && !room.grouped);
  room.prev.disabled = !room.available;
  room.next.disabled = !room.available;
  // Grouped, the room plays whatever the AVR does, so resuming Spotify on it
  // is not on offer. They hide one by one rather than the row hiding with
  // them, because the row also holds the host toggle, which stays put and
  // merely disables.
  els('.spotify', room.spotify).forEach((button) => {
    button.hidden = !room.available || room.grouped;
    button.setAttribute('aria-pressed', String(button.dataset.account === room.spotifyAccount));
  });

  room.toggle.disabled = !room.available;
  room.toggle.classList.toggle('busy', room.busy);
  room.toggle.setAttribute('aria-pressed', String(room.grouped));
  // Out of the group the button names where tapping it sends the room; in it,
  // where the card sits already says so, so the button says what it does.
  room.toggleLabel.textContent = room.grouped ? 'Ungroup' : 'Cinema';
  // Grouped, its slot is empty and the AVR's card is the one that moves up.
  room.slot.classList.toggle('on-top', playing && !room.grouped);
  placeRoom(room);
}

/* Song, artist, cover and progress, 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 renderTrack(track, refs) {
  renderProgress(track, refs.progress);
  refs.nowPlaying.hidden = !track;
  if (!track) return;
  refs.song.textContent = track.song;
  refs.artist.textContent = track.artist || '';
  refs.artist.hidden = !track.artist;
  if (!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;
  }
}

/* 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 renderProgress(track, progress) {
  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;
  progress.classList.toggle('known', known);
  progress.style.setProperty('--progress', percent);
}

/* 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. */
function placeRoom(room) {
  const target = room.grouped ? ui.joined : room.slot;
  if (room.node.parentElement !== target) target.appendChild(room.node);
  // Left empty, a slot would still take a gap of its own and double the space.
  room.slot.hidden = room.grouped;
}

function paintGrouping() {
  const order = Object.keys(rooms);
  const inside = Array.from(ui.joined.children);
  // Keep them in the order the cards are declared, not the order they joined.
  inside
    .slice()
    .sort((a, b) => order.indexOf(a.dataset.room) - order.indexOf(b.dataset.room))
    .forEach((node) => ui.joined.appendChild(node));
  ui.joined.hidden = inside.length === 0;
  // Grouped rooms share the host's transport, so one of them playing means
  // the whole group is -- and the tint goes on the group's card.
  // A film running on the Zidoo counts as the AVR playing too, grouped rooms or not.
  const playing = inside.some((node) => node.classList.contains('playing'))
    || avrNowPlaying?.play_state === 'play';
  ui.source.classList.toggle('playing', playing);
  ui.source.classList.toggle('on-top', playing);
}

/* Press and hold to keep moving, accelerating as you hold. */
function holdable(node, action) {
  let timer = null;
  let delay = 420;

  const stop = () => { clearTimeout(timer); timer = null; delay = 420; };
  const tick = () => {
    action();
    delay = Math.max(130, delay * 0.72);
    timer = setTimeout(tick, delay);
  };

  node.addEventListener('pointerdown', (event) => {
    if (event.button > 0 || node.disabled) return;
    event.preventDefault();   // also suppresses the click that would double-fire
    action();
    timer = setTimeout(tick, delay);
  });
  ['pointerup', 'pointercancel', 'pointerleave'].forEach((type) => node.addEventListener(type, stop));
}

/* A tap lands on the next multiple of STEP rather than adding STEP, so a
   level of 23 goes to 25 on the way up and 20 on the way down. Mirrors
   stepped_level() in controller.py -- the panel guesses with it, the
   speakers are the ones that decide. */
function nextLevel(current, direction) {
  if (direction > 0) return Math.min(100, (Math.floor(current / STEP) + 1) * STEP);
  const aligned = Math.floor(current / STEP) * STEP;
  return Math.max(0, aligned === current ? current - STEP : aligned);
}

function nudge(key, direction) {
  const room = rooms[key];
  if (!room.available) return;
  room.volume = nextLevel(room.volume ?? 0, direction);
  room.taps += direction;
  paintRoom(room);
  if (room.taps === 0) refresh();   // taps cancelled out; take the real level
  else flushVolume(key);
}

/* A burst of taps collapses into one call, so holding + does not queue up
   thirty requests the speakers then have to chew through. */
async function flushVolume(key) {
  const room = rooms[key];
  if (room.inflight) return;
  // A dragged level goes first: any taps still waiting were pressed after it,
  // so they are meant to move on from it.
  let body;
  if (room.wanted !== null) {
    body = { target: key, level: room.wanted };
    room.wanted = null;
  } else if (room.taps) {
    body = { target: key, steps: room.taps };
    room.taps = 0;
  } else {
    return;
  }
  room.inflight = true;
  try {
    const data = await api('/api/volume', body);
    if (!room.taps && room.wanted === null && !room.dragging) {
      room.volume = data.level;
      paintRoom(room);
    }
  } catch (error) {
    toast(error.message);
    refresh();
  } finally {
    room.inflight = false;
    if (room.taps || room.wanted !== null) flushVolume(key);
  }
}

/* Drag the knob to set the level outright, with the speakers following as
   it goes -- a drag collapses into one call at a time, the same as a burst
   of taps. It moves by how far the finger travels rather than jumping to
   where it lands, so grabbing the knob off-centre, or brushing it while
   scrolling past, never lurches the volume. */
function draggable(room) {
  const knob = room.level;
  let startX = 0;
  let startLevel = 0;
  let travel = 0;

  knob.addEventListener('pointerdown', (event) => {
    if (event.button > 0 || !room.available) return;
    event.preventDefault();
    knob.setPointerCapture(event.pointerId);
    startX = event.clientX;
    startLevel = room.volume ?? 0;
    travel = room.meter.clientWidth - knob.offsetWidth;   // how far the knob itself can go
    room.dragging = true;
    room.meter.classList.add('dragging');
  });

  knob.addEventListener('pointermove', (event) => {
    if (!room.dragging || travel <= 0) return;
    const moved = ((event.clientX - startX) / travel) * 100;
    const level = Math.round(Math.max(0, Math.min(100, startLevel + moved)));
    if (level === room.volume) return;
    room.volume = level;
    room.wanted = level;
    room.taps = 0;   // an absolute level supersedes any taps not yet sent
    paintRoom(room);
    flushVolume(room.key);
  });

  const stop = () => {
    room.dragging = false;
    room.meter.classList.remove('dragging');
  };
  knob.addEventListener('pointerup', stop);
  knob.addEventListener('pointercancel', stop);
}

async function setGrouped(key, joined) {
  const room = rooms[key];
  if (room.busy || !room.available) return;
  room.busy = true;
  room.grouped = joined;      // show the new state while the speakers catch up
  paintRoom(room);
  paintGrouping();
  try {
    const data = await api('/api/group', { target: key, joined });
    applyJoined(data.joined || []);
  } catch (error) {
    toast(error.message);
  } finally {
    room.busy = false;
    refresh();
  }
}

/* Sends the state it wants rather than "toggle", so a stale idea of what
   the room is doing cannot flip it the wrong way. */
async function togglePlay(key) {
  const room = rooms[key];
  if (!room.available || room.playBusy) return;
  const wanted = room.playState === 'play' ? 'pause' : 'play';
  room.playBusy = true;
  room.playState = wanted;
  paintRoom(room);
  try {
    const data = await api('/api/playback', { target: key, state: wanted });
    room.playState = data.state;
  } catch (error) {
    toast(error.message);
  } finally {
    room.playBusy = false;
    paintRoom(room);
  }
}

/* Nothing to optimistically flip the way play/pause does -- the panel
   cannot guess which song comes up -- so it looks again once HEOS has
   moved on, rather than showing the old song until the next poll. */
async function skipTrack(key, direction) {
  const room = rooms[key];
  if (!room.available) return;
  try {
    await api('/api/skip', { target: key, direction });
    setTimeout(refresh, 1000);
  } catch (error) {
    toast(error.message);
  }
}

function applyJoined(joined) {
  Object.values(rooms).forEach((room) => {
    room.grouped = joined.includes(room.key);
    paintRoom(room);
  });
  paintGrouping();
}

/* --- Spotify: one button per account, asking the card's own Connect
   receiver to resume that account, instead of always connecting to it
   from the Spotify app -------------------------------------------------- */
els('.spotify').forEach((button) => {
  button.addEventListener('click', () => resumeSpotify(button));
});

async function resumeSpotify(button) {
  const { target, account } = button.dataset;
  const who = button.querySelector('span').textContent;
  button.disabled = true;
  try {
    const data = await api('/api/spotify/resume', { target, account });
    toast(`Resuming ${who}'s Spotify on ${data.device}`, 'ok');
    const room = rooms[target];
    room.spotifyAccount = account;   // show it straight away; the refresh below confirms it
    paintRoom(room);
    // HEOS takes a moment to notice the new stream; look again once it
    // has, so play/pause turns up without waiting for the next poll.
    setTimeout(refresh, 1500);
  } catch (error) {
    toast(error.message);
  } finally {
    button.disabled = false;
  }
}

/* --- the input picker -------------------------------------------------- */
ui.inputButton.addEventListener('click', openSheet);
el('[data-role="scrim"]').addEventListener('click', closeSheet);
el('[data-role="sheet-close"]').addEventListener('click', closeSheet);

function sheetOpen() { return !ui.sheet.hidden; }

function setInputIcon(code) {
  paintIcon(ui.inputIcon, inputIcon(code));
}

function openSheet() {
  if (!inputs.length) {
    toast('No inputs reported by the AVR yet');
    return;
  }
  ui.options.innerHTML = '';
  inputs.forEach((source) => {
    const option = document.createElement('button');
    option.className = 'option';
    option.setAttribute('aria-current', String(currentInput && currentInput.code === source.code));
    option.innerHTML = '<span class="option-label"><svg viewBox="0 0 512 512" aria-hidden="true"><path d=""/></svg><span></span></span><span class="code"></span>';
    paintIcon(option.querySelector('svg'), inputIcon(source.code));
    option.querySelector('.option-label span').textContent = source.name;
    option.querySelector('.code').textContent = source.code;
    option.addEventListener('click', () => chooseInput(source));
    ui.options.appendChild(option);
  });
  ui.sheet.hidden = false;
}

function closeSheet() { ui.sheet.hidden = true; }

async function chooseInput(source) {
  closeSheet();
  currentInput = source;
  ui.inputName.textContent = source.name;
  setInputIcon(source.code);
  try {
    const data = await api('/api/avr/input', { code: source.code });
    currentInput = data;
    ui.inputName.textContent = data.name;
    setInputIcon(data.code);
  } catch (error) {
    toast(error.message);
    refresh();
  }
}

/* --- state ------------------------------------------------------------- */
function render(state) {
  (state.rooms || []).forEach((incoming) => {
    const room = rooms[incoming.key];
    if (!room) return;
    room.available = incoming.available;
    room.grouped = incoming.grouped;
    // Do not stomp on a volume the user is in the middle of changing.
    if (!room.taps && !room.inflight && !room.dragging && room.wanted === null) {
      room.volume = incoming.volume;
    }
    if (!room.playBusy) room.playState = incoming.play_state;
    room.track = incoming.now_playing || null;
    room.onSpotify = Boolean(incoming.spotify);
    room.spotifyAccount = incoming.spotify_account || null;
    paintRoom(room);
  });

  const avr = state.avr || {};
  inputs = avr.inputs || [];
  currentInput = avr.input || null;
  ui.inputName.textContent = currentInput ? currentInput.name : '—';
  setInputIcon(currentInput ? currentInput.code : null);
  ui.avrStatus.textContent = avr.connected ? 'ready' : 'offline';
  ui.avrStatus.classList.toggle('on', Boolean(avr.connected));
  avrNowPlaying = avr.now_playing || null;
  renderTrack(avrNowPlaying, avrTrack);
  paintGrouping();   // after avrNowPlaying, which decides where the AVR's card sits

  const problems = state.errors || [];
  ui.foot.textContent = problems.length ? problems[0] : (state.demo ? 'demo mode — no real speakers' : '');
  ui.foot.classList.toggle('bad', problems.length > 0);
}

let refreshing = false;
async function refresh() {
  if (refreshing) return;
  refreshing = true;
  try {
    render(await api('/api/state'));
  } catch (error) {
    ui.foot.textContent = error.message;
    ui.foot.classList.add('bad');
  } finally {
    refreshing = false;
  }
}

function busy() {
  return sheetOpen()
    || Object.values(rooms).some((r) => r.taps || r.inflight || r.dragging || r.busy || r.playBusy);
}

ui.refresh.addEventListener('click', () => {
  ui.refresh.classList.add('spin');
  setTimeout(() => ui.refresh.classList.remove('spin'), 700);
  refresh();
});

setInterval(() => {
  if (document.visibilityState === 'visible' && !busy()) refresh();
}, POLL_MS);

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') refresh();
});

Object.values(rooms).forEach(paintRoom);
paintGrouping();
refresh();