Release v1.3

app/templates/display/player.html

@@ -8,6 +8,17 @@
       html, body { height: 100%; width: 100%; margin: 0; background: #000; overflow: hidden; }
       #stage { position: fixed; inset: 0; width: 100vw; height: 100vh; background: #000; }
 
+      /* Optional company overlay (transparent PNG) */
+      #overlay {
+        position: fixed;
+        inset: 0;
+        width: 100vw;
+        height: 100vh;
+        pointer-events: none;
+        z-index: 5;
+        object-fit: contain;
+      }
+
       /* Slide transitions (applied by JS via classes) */
       #stage .slide {
         position: absolute;
@@ -99,9 +110,13 @@
       </div>
     </div>
     <div id="stage"></div>
+    {% if overlay_url %}
+      <img id="overlay" src="{{ overlay_url }}" alt="Overlay" />
+    {% endif %}
     <script>
       const token = "{{ display.token }}";
       const stage = document.getElementById('stage');
+      let overlayEl = document.getElementById('overlay');
       const noticeEl = document.getElementById('notice');
       const noticeTitleEl = document.getElementById('noticeTitle');
       const noticeTextEl = document.getElementById('noticeText');
@@ -164,6 +179,38 @@
         stage.innerHTML = '';
       }
 
+      function setOverlaySrc(src) {
+        const val = (src || '').trim();
+        if (!val) {
+          if (overlayEl && overlayEl.parentNode) overlayEl.parentNode.removeChild(overlayEl);
+          overlayEl = null;
+          return;
+        }
+
+        if (!overlayEl) {
+          overlayEl = document.createElement('img');
+          overlayEl.id = 'overlay';
+          overlayEl.alt = 'Overlay';
+          document.body.appendChild(overlayEl);
+        }
+
+        // Cache-bust in preview mode so changes show up instantly.
+        if (isPreview) {
+          try {
+            const u = new URL(val, window.location.origin);
+            u.searchParams.set('_ts', String(Date.now()));
+            overlayEl.src = u.toString();
+            return;
+          } catch(e) {
+            // fallthrough
+          }
+        }
+        overlayEl.src = val;
+      }
+
+      // Initialize overlay from server-side render.
+      if (overlayEl && overlayEl.src) setOverlaySrc(overlayEl.src);
+
       function setSlideContent(container, item) {
         if (item.type === 'image') {
           const el = document.createElement('img');
@@ -272,6 +319,7 @@
           playlist = await fetchPlaylist();
           idx = 0;
           applyTransitionClass(getTransitionMode(playlist));
+          setOverlaySrc(playlist && playlist.overlay_src);
           next();
         } catch (e) {
           clearStage();
@@ -300,6 +348,7 @@
             const oldStr = JSON.stringify(playlist);
             const newStr = JSON.stringify(newPlaylist);
             playlist = newPlaylist;
+            setOverlaySrc(playlist && playlist.overlay_src);
             if (oldStr !== newStr) {
               idx = 0;
               applyTransitionClass(getTransitionMode(playlist));