fix(player-web): cache layout so cold start renders zones on first pass

The player cached only the playlist, not the layout. On cold start it restored the
playlist and rendered immediately with layout=null -> fullscreen, then re-rendered
into zones once the server payload arrived (the 'fullscreen first, then split'
flash). Cache the layout alongside the playlist and restore it before the first
render; cleared on reset.
This commit is contained in:
ScreenTinker 2026-06-09 08:27:41 -05:00
parent ccee032740
commit 00964e90a8

View file

@ -309,6 +309,16 @@
function loadPlaylistCache() {
try { return JSON.parse(localStorage.getItem(PLAYLIST_CACHE_KEY) || '[]'); } catch { return []; }
}
// Cache the layout alongside the playlist so a cold start renders the correct
// zone layout on the FIRST pass, instead of rendering fullscreen and only
// switching to zones once the server payload arrives.
const LAYOUT_CACHE_KEY = 'rd_layout_cache';
function saveLayoutCache(l) {
try { localStorage.setItem(LAYOUT_CACHE_KEY, JSON.stringify(l || null)); } catch {}
}
function loadLayoutCache() {
try { return JSON.parse(localStorage.getItem(LAYOUT_CACHE_KEY) || 'null'); } catch { return null; }
}
// ==================== State ====================
let socket = null;
@ -512,6 +522,9 @@
if (cachedPlaylist.length > 0) {
console.log('Restored cached playlist:', cachedPlaylist.length, 'items');
playlist = cachedPlaylist;
// Restore the cached layout too, so the first render is already zoned
// (otherwise the cold start shows fullscreen until the payload arrives).
layout = loadLayoutCache();
currentIndex = 0;
isPlaying = true;
document.getElementById('setupScreen').style.display = 'none';
@ -1056,6 +1069,7 @@
}
layout = data.layout || null;
saveLayoutCache(layout);
if (newFp === oldFp && playlist.length > 0 && !wallChanged) {
console.log('Playlist unchanged');
@ -1726,6 +1740,7 @@
if (confirm('Reset player and return to setup?')) {
localStorage.removeItem(STORAGE_KEY);
localStorage.removeItem(PLAYLIST_CACHE_KEY);
localStorage.removeItem(LAYOUT_CACHE_KEY);
location.reload();
}
}