5 files changed, 85 insertions, 0 deletions
diff --git a/templates/var/www/html/index.html b/templates/var/www/html/index.html
index 37d758b..7c45f1d 100644
--- a/templates/var/www/html/index.html
+++ b/templates/var/www/html/index.html
@@ -8,6 +8,8 @@
   <title>{{ radio_name }}</title>
 </head>
 <body>
+  <video id="background" autoplay muted playsinline preload="auto"></video>
+  <div id="fadeOverlay"></div>
   <div class="index-container">
     <div class="player-wrapper">
       <a id="radioButton" class="btn" href="#">play</a>
@@ -85,5 +87,6 @@
     fetchCurrentTrack();
     setInterval(fetchCurrentTrack, 10000);
   </script>
+  <script src="video-background.js"></script>
 </body>
 </html>
diff --git a/templates/var/www/html/style.css b/templates/var/www/html/style.css
index 396f828..995bddd 100644
--- a/templates/var/www/html/style.css
+++ b/templates/var/www/html/style.css
@@ -35,6 +35,27 @@ body {
     text-align: center;
 }
 
+#background {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100vw; height: 100vh;
+    object-fit: cover;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+}
+
+#fadeOverlay {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100vw; height: 100vh;
+    background: black;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+    z-index: 0;
+}
+
 .index-container {
     display: flex;
     justify-content: center;
@@ -43,6 +64,7 @@ body {
     width: 100%;
     padding: 0 10px;
     box-sizing: border-box;
+    z-index: 1;
 }
 
 .player-wrapper {
diff --git a/templates/var/www/html/video-background.js b/templates/var/www/html/video-background.js
new file mode 100644
index 0000000..15ccd3e
--- /dev/null
+++ b/templates/var/www/html/video-background.js
@@ -0,0 +1,55 @@
+(async () => {
+  const video = document.getElementById('background');
+  const fadeOverlay = document.getElementById('fadeOverlay');
+  const FADE_DURATION = 1000;
+
+  const resp = await fetch('/videos/videos.json');
+  if (!resp.ok) {
+    console.error('Failed to load videos.json');
+    return;
+  }
+  const videos = await resp.json();
+
+  let lastVideo = null;
+
+  function pickRandomVideo() {
+    if (videos.length === 1) return videos[0];
+    let choice;
+    do {
+      choice = videos[Math.floor(Math.random() * videos.length)];
+    } while (choice === lastVideo);
+    lastVideo = choice;
+    return choice;
+  }
+
+  async function playVideoLoop() {
+    while (true) {
+      const nextVideo = pickRandomVideo();
+      video.src = `/videos/${nextVideo}`;
+      video.style.opacity = '0';
+      fadeOverlay.style.opacity = '1';
+
+      await new Promise(r => setTimeout(r, FADE_DURATION));
+
+      video.load();
+      await new Promise(resolve => {
+        video.onloadedmetadata = () => resolve();
+      });
+
+      video.currentTime = 0;
+      video.play().catch(console.error);
+
+      video.style.opacity = '1';
+      fadeOverlay.style.opacity = '0';
+
+      await new Promise(r => setTimeout(r, (video.duration * 1000) - (2 * FADE_DURATION)));
+
+      fadeOverlay.style.opacity = '1';
+      video.style.opacity = '0';
+
+      await new Promise(r => setTimeout(r, FADE_DURATION));
+    }
+  }
+
+  playVideoLoop();
+})();
diff --git a/templates/var/www/html/videos/.gitkeep b/templates/var/www/html/videos/.gitkeep
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/templates/var/www/html/videos/.gitkeep
diff --git a/templates/var/www/html/videos/videos.json b/templates/var/www/html/videos/videos.json
new file mode 100644
index 0000000..3c05dc0
--- /dev/null
+++ b/templates/var/www/html/videos/videos.json
@@ -0,0 +1,5 @@
+[
+    "video1.webm",
+    "video2.webm",
+    "video3.webm"
+]