This PR breaks the large web and player bootstrap files into smaller modules with clearer ownership.

Web changes:

Split shared helpers, bootstrap logic, route groups, and upload-sync behavior out of web.js.
Kept web.js focused on wiring and server startup.
Fixed screen playlist reassignment so changing a screen’s playlist now triggers a refresh.
Fixed single-slide playlist refresh behavior so updates do not get stuck behind the current slide.
Player changes:

Split websocket/runtime handling into runtime.js.
Split playlist assembly and revision hashing into playlist.js.
Split onboarding and player HTTP routes into dedicated modules.
Split render utilities and template loading into render-helpers.js.
Kept player.js mostly as startup/orchestration.
Validation:

Rebuilt both services with Docker Compose.
Smoke-checked web and player routes after the refactor.
Verified get_errors was clean on the touched modules.

src/player/player-page.script.html

@@ -226,9 +226,12 @@
     if (!socket || socket.readyState !== WebSocket.OPEN) {
       return;
     }
+    var clientName = getOnboardingClientName();
     socket.send(JSON.stringify({
       type: 'hello',
       clientId: getCommandClientId(),
+      clientName: clientName || null,
+      deviceId: getOnboardingDeviceId() || null,
       userAgent: window.navigator.userAgent || '',
       page: window.location.href,
       viewport: getCurrentViewport(),
@@ -255,6 +258,8 @@
     commandSocket.send(JSON.stringify({
       type: 'state',
       clientId: getCommandClientId(),
+      clientName: getOnboardingClientName() || null,
+      deviceId: getOnboardingDeviceId() || null,
       userAgent: window.navigator.userAgent || '',
       page: window.location.href,
       viewport: getCurrentViewport(),
@@ -488,6 +493,11 @@
       case 'refresh':
         refresh();
         return;
+      case 'setclientname':
+        if (payload.clientName) {
+          applyOnboardingClientName(payload.clientName, commandSocket);
+        }
+        return;
       case 'redirect':
         if (payload.url) {
           window.location.replace(String(payload.url));
@@ -542,6 +552,12 @@
     commandSocket = socket;
 
     socket.onopen = function () {
+      if (typeof syncOnboardingClientNameFromServer === 'function') {
+        syncOnboardingClientNameFromServer(socket).then(function () {
+          sendCommandHello(socket);
+        });
+        return;
+      }
       sendCommandHello(socket);
     };
 
@@ -1038,6 +1054,7 @@
       canvasWidth: canvasSize.width,
       canvasHeight: canvasSize.height,
       background: template.background_image_path ? '<img class="template-background" src="' + escapeHtml(template.background_image_path) + '" alt="" />' : '',
+      backgroundColor: template.background_color || '#111111',
       regions: regions
     };
 
@@ -1101,7 +1118,8 @@
       const regionContent = content[region.regionKey] || {};
       return plan.renderRegion(region, regionContent);
     }).join('') : '';
-    return renderSlideShell(slide, '', (layout ? layout.canvasWidth : 0) + 'px', (layout ? layout.canvasHeight : 0) + 'px', '<div class="template-stage">' + (layout ? layout.background : '') + regions + '</div>');
+    const stageStyle = layout ? 'background-color:' + escapeHtml(layout.backgroundColor || '#111111') + ';' : '';
+    return renderSlideShell(slide, '', (layout ? layout.canvasWidth : 0) + 'px', (layout ? layout.canvasHeight : 0) + 'px', '<div class="template-stage" style="' + stageStyle + '">' + (layout ? layout.background : '') + regions + '</div>');
   }
 
   // Media rendering helpers.