Test video overlay

js/ui.js

@@ -95,4 +95,42 @@ window.addEventListener('load', () => {
         document.querySelector('.side-nav').classList.add('d-hide');
         document.querySelector('body').classList.remove('opaque');
     })
+})
+/**
+ * Open / close modal for videos
+ * and apply video source
+ */
+window.addEventListener('load', () => {
+    let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
+    let source = document.querySelector('source');
+    let video = source.parentNode;
+    /**
+     * Dynamically change video source
+     * Note naming convention...
+     */
+    vidLinks.forEach(a => {
+        let aNodes = a.childNodes;
+        
+        a.addEventListener('click', () => {
+            aNodes.forEach(n => {
+                if (n.src) {
+                    let vStr = n.src
+                    .substr(n.src.lastIndexOf('/')+1, n.src.length)
+                    .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
+                    
+                    source.src = `assets/video/${vStr}`;
+                    
+                    video.load();
+                }
+            });
+            
+            document.querySelector('#mod-vid').classList.add('active');
+        });
+    });
+
+    let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
+
+    close.addEventListener('click', () => {
+        document.querySelector('#mod-vid').classList.remove('active');
+    });
 })