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 || {};

static/panel.css

@@ -47,13 +47,13 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --bg: #0a0d14;
-    --card: #151a25;
+    --card: #202736;
     --edge: #232b3b;
     --ink: #eef2f9;
     --muted: #98a3b8;
     --outline: #5f6b87;
     --playing: #1f4a42;
-    --raised: #29334a;
+    --raised: #34405b;
     --scrim: rgba(4, 6, 11, .6);
     --shadow: rgba(0, 0, 0, .45);
     --shade: rgba(255, 255, 255, .05);
@@ -135,7 +135,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .ghost { background: transparent; border: 1px solid var(--outline); color: var(--muted); box-shadow: none; }   /* nothing to lift */
 
 @keyframes spin { to { transform: rotate(360deg); } }
-@keyframes rise { from { transform: translateY(14%); opacity: .4; } }
+@keyframes rise { from { transform: translateY(100%); opacity: .4; } }
 
 /* Header */
 
@@ -148,15 +148,6 @@ header .logo { height: 44px; width: auto; display: block; margin: var(--space-xs
 
 /* Card */
 
-/* A playing card goes to the top. order does not transition, so the swap
-   rides on a view transition instead -- see placeCards() in app.js. */
-.app > .on-top { order: -1; }
-
-::view-transition-group(*) {
-  animation-duration: .4s;
-  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
-}
-
 .card {
   background: var(--card);
   border-radius: var(--radius-xl);