diff options
| author | heqnx <root@heqnx.com> | 2025-07-05 16:14:03 +0300 |
|---|---|---|
| committer | heqnx <root@heqnx.com> | 2025-07-05 16:14:03 +0300 |
| commit | 93e0c2614f4b6456f2bbcfb5122a2a3068c551fc (patch) | |
| tree | 360886848239b4d5044ec1cfd190bdead19845e0 /templates | |
| parent | e3a9e74d33ca5c3177f404327cc99ea70f1f2a45 (diff) | |
| download | ansible-icecast2-93e0c2614f4b6456f2bbcfb5122a2a3068c551fc.tar.gz ansible-icecast2-93e0c2614f4b6456f2bbcfb5122a2a3068c551fc.zip | |
adding looping, fade in-out videos
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/var/www/html/index.html | 3 | ||||
| -rw-r--r-- | templates/var/www/html/style.css | 22 | ||||
| -rw-r--r-- | templates/var/www/html/video-background.js | 55 | ||||
| -rw-r--r-- | templates/var/www/html/videos/.gitkeep | 0 | ||||
| -rw-r--r-- | templates/var/www/html/videos/videos.json | 5 |
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" +] |