From 00964e90a853895deabe66f6bc8fb6f2033ddcab Mon Sep 17 00:00:00 2001
From: ScreenTinker <hello@screentinker.com>
Date: Tue, 9 Jun 2026 08:27:41 -0500
Subject: [PATCH] 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.
---
 server/player/index.html | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/server/player/index.html b/server/player/index.html
index 7e37441..56f57f7 100644
--- a/server/player/index.html
+++ b/server/player/index.html
@@ -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();
         }
       }