some styling changes

1 files changed, 24 insertions, 1 deletions

diff --git a/templates/var/www/html/video-background.js b/templates/var/www/html/video-background.js
index 15ccd3e..8f95a00 100644
--- a/templates/var/www/html/video-background.js
+++ b/templates/var/www/html/video-background.js
@@ -1,6 +1,7 @@
 (async () => {
   const video = document.getElementById('background');
   const fadeOverlay = document.getElementById('fadeOverlay');
+  const toggleBgBtn = document.getElementById('toggleBg');
   const FADE_DURATION = 1000;
 
   const resp = await fetch('/videos/videos.json');
@@ -11,6 +12,8 @@
   const videos = await resp.json();
 
   let lastVideo = null;
+  let bgEnabled = true;
+  let loopCanceled = false;
 
   function pickRandomVideo() {
     if (videos.length === 1) return videos[0];
@@ -23,7 +26,7 @@
   }
 
   async function playVideoLoop() {
-    while (true) {
+    while (!loopCanceled) {
       const nextVideo = pickRandomVideo();
       video.src = `/videos/${nextVideo}`;
       video.style.opacity = '0';
@@ -36,6 +39,8 @@
         video.onloadedmetadata = () => resolve();
       });
 
+      if (loopCanceled) break;
+
       video.currentTime = 0;
       video.play().catch(console.error);
 
@@ -51,5 +56,23 @@
     }
   }
 
+  toggleBgBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    bgEnabled = !bgEnabled;
+    loopCanceled = !bgEnabled;
+
+    if (!bgEnabled) {
+      video.pause();
+      video.style.display = 'none';
+      fadeOverlay.style.display = 'none';
+      toggleBgBtn.textContent = 'background (off)';
+    } else {
+      video.style.display = '';
+      fadeOverlay.style.display = '';
+      toggleBgBtn.textContent = 'background (on)';
+      playVideoLoop();
+    }
+  });
+
   playVideoLoop();
 })();