19.0 RC2

[index]
- background videos:
  - compressed and encoded background videos using av1
  - added title to videos in data file
  - chained videos on end
- overlay:
  - better styling
  - new 'next' button
  - show 'now playing' on video change
  - load overlay from js instead of html
- better randomize lib

[general]
- minor tweaks

src/content/data/backgrounds.json

@@ -1,6 +1,6 @@
 [
-	"birthday-nile.mp4",
-	"ram-unboxed.mp4",
-	"unseen-ram.mp4",
-	"electroma-ad.mp4"
+	{"name": "Daft Punk - \"Happy Birthday\" from Daft Punk to Nile Rodgers", "src": "birthday-nile.mp4"},
+	{"name": "Daft Punk - Random Access Memories Unboxed", "src": "ram-unboxed.mp4"},
+	{"name": "Daft Punk - Random Access Memories Ad (Unseen Advert)", "src": "unseen-ram.mp4"},
+	{"name": "Daft Punk - 10th Anniversary Teaser of Electroma", "src": "electroma-ad.mp4"}
 ]

src/index.njk

@@ -144,7 +144,3 @@ js: index
 </section>
 
 <video id="background" autoplay loop muted playsinline></video>
-<div id="overlay">
-    <span id="fullscreen-background" class="button light">⛶</span>
-    <span id="stop-background" class="button light">⨯</span>
-</div>

src/static/css/global.sass

@@ -48,15 +48,6 @@ a, a:visited
     text-decoration: none
     user-select: none
 
-    &.light
-        background-color: transparent
-        border-radius: 8px
-        margin: 2.5px
-
-        &:hover, &.active
-            animation: none
-            background-color: colors.$secondary
-
     &:hover
         animation: animations.$multicolor
         cursor: pointer
@@ -84,6 +75,7 @@ code
     text-decoration: none
     cursor: alias
     z-index: 2
+    padding: 0.125em
 
 ::selection
     background-color: colors.$white

src/static/css/index.sass

@@ -94,7 +94,7 @@ video#background
     left: 50%
     transform: translate(-50%, -50%)
     z-index: -3
-    opacity: 0.1
+    opacity: 0.125
     transition: all 0.5s ease
     width: 100%
     height: 100%
@@ -104,22 +104,41 @@ video#background
         z-index: 3
         opacity: 1
 
-#overlay
+#overlay-container
+    display: ruby
     position: fixed
     bottom: 16px
     left: 16px
     margin-bottom: 0
     z-index: 2
 
-    .button
-        color: white
-        font-weight: bolder
+    #overlay-box
+        border: 2px solid transparent
+        border-radius: base.$radius
+        opacity: 0.4
 
-    #fullscreen-background
-        font-size: 0.85em
+        &:hover, &.active
+            border-color: colors.$light
+            background-color: colors.$secondary
+            opacity: 1
+
+        .button
+            color: white
+            font-weight: bolder
+            background-color: transparent
+            border-radius: 8px
+            margin: 2.5px
 
-    #stop-background
-        font-size: 1.15em
+            &:hover, &.active
+                animation: none
+                background-color: colors.$dark
+
+    #bg-nowplaying
+        overflow: hidden
+        white-space: nowrap
+        color: colors.$light
+        font-style: italic
+        margin: 1em
 
 .project
     .project-title

src/static/js/index/marquee.js

@@ -1,7 +1,7 @@
-import randomize from './randomize.js';
+import {randElement} from './randomize.js';
 
 fetch('/content/data/marquee.json').then(response => response.json()).then(data => {
-    let string = randomize(data);
+    let string = randElement(data);
     let marquee = document.getElementById('marquee');
     marquee.innerHTML = string.text;
     if (string.url && string.url !== '') {

src/static/js/index/overlay.js

@@ -1,22 +1,61 @@
-let fullscreen = document.getElementById('fullscreen-background');
-let overlay = document.getElementById('overlay');
+import {load} from './video.js';
+let videoElement = document.getElementById('background');
 
-fullscreen.addEventListener('click', () => {
-    let videoElement = document.getElementById('background');
+// create elements
+let overlay_container = document.createElement('div');
+let overlay_box = document.createElement('div');
+let fullscreen = document.createElement('span');
+let stop = document.createElement('span');
+let next = document.createElement('span');
+let nowplaying = document.createElement('span');
+
+// set attributes
+overlay_container.setAttribute('id', 'overlay-container');
+overlay_box.setAttribute('id', 'overlay-box');
+fullscreen.setAttribute('id', 'bg-fullscreen');
+stop.setAttribute('id', 'bg-stop');
+next.setAttribute('id', 'bg-next');
+nowplaying.setAttribute('id', 'bg-nowplaying');
+
+// set innerHTML
+fullscreen.innerHTML = '⛶';
+stop.innerHTML = '⏹';
+next.innerHTML = '⏭';
+
+// set classes
+[fullscreen, stop, next].forEach(element => {
+    element.classList.add('button');
+    element.classList.add('light');
+});
 
+// add functionality
+fullscreen.addEventListener('click', () => {
     if (videoElement.classList.contains('fullscreen')) {
         videoElement.classList.remove('fullscreen');
         fullscreen.classList.remove('active');
-        overlay.style.zIndex = '2';
+        overlay_box.classList.remove('active');
+        overlay_container.style.zIndex = '2';
     } else {
         videoElement.classList.add('fullscreen');
         fullscreen.classList.add('active');
-        overlay.style.zIndex = '4';
+        overlay_box.classList.add('active');
+        overlay_container.style.zIndex = '4';
     }
 });
 
-document.getElementById('stop-background').addEventListener('click', () => {
-    document.getElementById('background').src = '';
-    document.getElementById('overlay').innerHTML = '';
-    document.getElementById('background').style.zIndex = '-1';
+stop.addEventListener('click', () => {
+    videoElement.remove();
+    document.getElementById('overlay').remove();
+});
+
+next.addEventListener('click', () => {
+    load();
 });
+
+// append elements
+overlay_box.appendChild(fullscreen);
+overlay_box.appendChild(stop);
+overlay_box.appendChild(next);
+overlay_container.appendChild(overlay_box);
+overlay_container.appendChild(nowplaying);
+document.body.appendChild(overlay_container);

src/static/js/index/randomize.js

@@ -1,3 +1,11 @@
-export default function randomize(col) {
-    return col[Math.floor(Math.random() * col.length)];
+export function randElement(col) {
+    return col.at([Math.floor(Math.random() * col.length)]);
+}
+
+export function randArray(col) {
+    for (let i = col.length - 1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i + 1));
+        [col[i], col[j]] = [col[j], col[i]];
+    }
+    return col;
 }

src/static/js/index/video.js

@@ -1,11 +1,28 @@
-import randomize from './randomize.js';
+import {randArray} from './randomize.js';
 
-fetch('/content/data/backgrounds.json').then(response => response.json()).then(data => {
-    let source = document.createElement('source');
-    source.src = `/assets/media/background/${randomize(data)}`;
-    source.type = 'video/mp4';
+let videoElement = document.getElementById('background');
 
-	let videoElement = document.getElementById('background');
-    videoElement.appendChild(source);
+let timeout;
+let sources;
+let index = 0;
+
+await fetch('/content/data/backgrounds.json').then(response => response.json()).then(data => sources = randArray(data)); // load sources
+load(); // load first video
+videoElement.addEventListener('ended', () => load()); // load next video on end
+
+export function load() { // needs to be exported for the 'next' button to work
+    let nowplaying = document.getElementById('bg-nowplaying');
+    index = (index + 1) % sources.length;
+    try {
+        clearTimeout(timeout); // clear previous timeout (if exists)
+        nowplaying.innerHTML = `now playing: ${sources[index].name}`;
+        const temp_timeout = setTimeout(() => {
+            nowplaying.innerHTML = '';
+        }, 4000);
+        timeout = temp_timeout; // save timeout to clear it later
+    }
+    catch {} // will throw error on first load (nowplaying is not on dom yet)
+    videoElement.innerHTML = `<source src="/assets/media/background/${sources[index].src}" type="video/mp4">`;
+    videoElement.load();
     videoElement.play();
-});
+}