Set hard-coded rooms order in config file

static/app.js

@@ -5,6 +5,9 @@
 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 || '/';
+// The commit this page was rendered from, so a resumed iOS home-screen
+// session can tell the Pi has moved on and reload itself.
+const VERSION = document.documentElement.dataset.version || '';
 const POLL_MS = 5000;
 // How long a dropped cursor waits for the player to report it got there.
 const SEEK_HOLD_MS = 10000;
@@ -13,8 +16,6 @@ const SEEK_KEY_MS = 10000;
 // And how long a pressed play or pause on the AVR waits for the same. The
 // Zidoo acknowledges the key press at once but takes a moment to act on it.
 const PLAY_HOLD_MS = 6000;
-// Motion turned down in the OS means cards change places without sliding.
-const CALM = matchMedia('(prefers-reduced-motion: reduce)');
 
 // Which way each arrow key moves a slider.
 const ARROWS = { ArrowRight: 1, ArrowUp: 1, ArrowLeft: -1, ArrowDown: -1 };
@@ -77,10 +78,6 @@ const ui = {
 // theirs do. Which one it is, everything that only it can do goes through.
 const HOST = ui.avr.dataset.room;
 
-// Named, so a view transition can follow the card when it moves to the top
-// and back. A room's name is set as it is placed; the host's never moves.
-ui.avr.style.viewTransitionName = 'avr';
-
 const rooms = {};
 let inputs = [];
 let currentInput = null;
@@ -229,7 +226,6 @@ function paintRoom(room) {
   paintTransport(room);
   paintSources(room);
   placeRoom(room);
-  placeCards();
 }
 
 /* Song, artist, cover and progress, each only when there is one. The
@@ -432,10 +428,6 @@ function placeRoom(room) {
     // Nothing left in the column below it means it goes last, before the host.
     ui.app.insertBefore(room.node, next || ui.avr);
   }
-  // A view transition only follows an element it can name, and the name has
-  // to be one of a kind on the page (see placeCards). Inside the host's card
-  // the card travels with it, so it takes no name of its own there.
-  room.node.style.viewTransitionName = room.grouped ? 'none' : `room-${room.key}`;
 }
 
 function paintGrouping() {
@@ -453,30 +445,6 @@ function paintGrouping() {
   const playing = inside.some((node) => node.classList.contains('playing'))
     || shownPlayState(rooms[HOST]) === 'play';
   ui.avr.classList.toggle('playing', playing);
-  placeCards();
-}
-
-let placing = false;
-function placeCards() {
-  if (placing) return;
-  placing = true;
-  queueMicrotask(() => {
-    placing = false;
-    // Grouped, a room's card has left the column and the AVR's is the one
-    // that moves up. The AVR's tint and its position answer the same
-    // question, and paintGrouping() has just settled it.
-    const wanted = Object.values(rooms).map((room) => [
-      room.node,
-      // The AVR's tint already answers this: paintGrouping has just settled
-      // it, over the whole group rather than the host's own stream alone.
-      room.avr ? room.node.classList.contains('playing') : room.playing() && !room.grouped,
-    ]);
-
-    const move = () => wanted.forEach(([node, top]) => node.classList.toggle('on-top', top));
-    const moves = wanted.some(([node, top]) => node.classList.contains('on-top') !== top);
-    if (!moves || CALM.matches || !document.startViewTransition) move();
-    else document.startViewTransition(move);
-  });
 }
 
 /* Press and hold to keep moving, accelerating as you hold. */
@@ -830,6 +798,14 @@ function applyRoom(room, incoming) {
 }
 
 function render(state) {
+  // The Pi shipped a newer version while this tab (or a resumed iOS
+  // home-screen session) was still showing an old one -- catch up rather
+  // than keep polling a page that no longer matches the server.
+  if (VERSION && state.version && state.version !== VERSION && !busy()) {
+    location.reload();
+    return;
+  }
+
   (state.rooms || []).forEach((incoming) => applyRoom(rooms[incoming.key], incoming));
 
   const avr = state.avr || {};