Merge pull request #60 from TimUx/copilot/add-show-started-notification

Display scheduled show notification as prominent banner above buttons

Author: TimUx

config.js

@@ -1,22 +1,16 @@
-// Default config for local testing without Docker
 window.FPP_CONFIG = {
-  siteName: 'Brauns Lichtershow',
-  siteSubtitle: 'Fernsteuerung für den Falcon Player',
-  statusPollMs: 10000,
-  donationPoolId: 'abc123',
-  donationCampaignName: 'FPP Weihnachtsaktion',
-  donationSubtitle: 'Unterstütze die Lichtershow',
-  donationText: 'Vielen Dank für deine Unterstützung!',
-  buyMeACoffeeUsername: 'example',
+  siteName: "Test",
+  siteSubtitle: "Fernsteuerung für den Falcon Player",
   previewMode: true,
-  accessCode: '1234',
-  socialFacebook: 'https://facebook.com/example',
-  socialInstagram: 'https://instagram.com/example',
-  socialTiktok: '',
-  socialWhatsapp: '',
-  socialYoutube: 'https://youtube.com/@example',
-  socialWebsite: 'https://example.com',
-  socialEmail: 'kontakt@example.com',
-  buttonPlaylist1Text: 'Show starten',
-  buttonPlaylist2Text: 'Kids-Show starten'
-};
+  statusPollMs: 10000,
+  accessCode: "",
+  buttonPlaylist1Text: "Playlist 1 starten",
+  buttonPlaylist2Text: "Playlist 2 starten",
+  socialFacebook: "",
+  socialInstagram: "",
+  socialTiktok: "",
+  socialWhatsapp: "",
+  socialYoutube: "",
+  socialWebsite: "",
+  socialEmail: ""
+};

index.html

@@ -33,6 +33,7 @@ <h1 id="headline"></h1>
 
     <div id="main-content" class="hidden">
       <p class="quiet-banner hidden" id="preview-banner"></p>
+      <p class="quiet-banner hidden" id="scheduled-show-banner"></p>
       <p class="quiet-banner hidden" id="show-running-banner"></p>
       <p class="quiet-banner hidden" id="quiet-banner"></p>
       <p class="quiet-banner hidden" id="outside-window-banner"></p>
@@ -80,6 +81,7 @@ <h3 class="social-footer-title">Unsere Kanäle:</h3>
     const btnRequest = document.getElementById('btn-request');
     const btnDonate = document.getElementById('btn-donate');
     const previewBanner = document.getElementById('preview-banner');
+    const scheduledShowBanner = document.getElementById('scheduled-show-banner');
     const showRunningBanner = document.getElementById('show-running-banner');
     const quietBanner = document.getElementById('quiet-banner');
     const outsideWindowBanner = document.getElementById('outside-window-banner');
@@ -285,6 +287,7 @@ <h3 class="social-footer-title">Unsere Kanäle:</h3>
         const isQuiet = Boolean(data.locks && data.locks.quiet);
         const isOutsideWindow = Boolean(data.locks && data.locks.outsideShowWindow);
         const showPeriod = data.locks && data.locks.showPeriod;
+        const scheduledShowActive = Boolean(data.scheduledShowActive);
 
         // Hide preview banner in normal mode
         previewBanner.classList.add('hidden');
@@ -310,12 +313,22 @@ <h3 class="social-footer-title">Unsere Kanäle:</h3>
           outsideWindowBanner.appendChild(line3);
           outsideWindowBanner.classList.remove('hidden');
           quietBanner.classList.add('hidden');
+          scheduledShowBanner.classList.add('hidden');
           showRunningBanner.classList.add('hidden');
           note.textContent = data.note || '';
         } else if (isQuiet && showPeriod) {
           quietBanner.textContent = `Ruhezeit ${showPeriod.endTime}–${showPeriod.startTime} – keine Wiedergabe möglich.`;
           quietBanner.classList.remove('hidden');
           outsideWindowBanner.classList.add('hidden');
+          scheduledShowBanner.classList.add('hidden');
+          showRunningBanner.classList.add('hidden');
+          note.textContent = data.note || '';
+        } else if (scheduledShowActive && isRunning) {
+          // Show scheduled show banner when a scheduled show is running
+          scheduledShowBanner.textContent = 'Geplante Show gestartet – Wünsche pausiert.';
+          scheduledShowBanner.classList.remove('hidden');
+          quietBanner.classList.add('hidden');
+          outsideWindowBanner.classList.add('hidden');
           showRunningBanner.classList.add('hidden');
           note.textContent = data.note || '';
         } else if (lockReason && !isQuiet && !isOutsideWindow) {
@@ -324,10 +337,12 @@ <h3 class="social-footer-title">Unsere Kanäle:</h3>
           showRunningBanner.classList.remove('hidden');
           quietBanner.classList.add('hidden');
           outsideWindowBanner.classList.add('hidden');
+          scheduledShowBanner.classList.add('hidden');
           note.textContent = data.note || '';
         } else {
           quietBanner.classList.add('hidden');
           outsideWindowBanner.classList.add('hidden');
+          scheduledShowBanner.classList.add('hidden');
           showRunningBanner.classList.add('hidden');
           note.textContent = data.note || '';
         }