Implemented a functionality to view videos and listen to audio without the need to leave a page. Now they just opened in an overlay.

files/static/assets/css/main.css

@@ -9,8 +9,9 @@
 	--background-color: #0a0a0a;
 	--primary-color: #cd2682;
 	--secondary-color: #9f2b68;
-	--text-color: #f5f5f5; 
+	--text-color: #f5f5f5;
 	--text-indent: 1.6rem;
+	--view-background-color: #f5f5f574;
 	scrollbar-color: var(--primary-color) var(--background-color); }
 
 @media (prefers-color-scheme: light) {
@@ -18,7 +19,8 @@
 		--background-color: #f5f5f5;
 		--primary-color: #9f2b68;
 		--secondary-color: #cd2682;
-		--text-color: #0a0a0a; } }
+		--text-color: #0a0a0a;
+		--view-background-color: #0a0a0a74; } }
 
 * { margin: 0; }
 
@@ -99,6 +101,24 @@ nav h1 {
 
 section { margin-top: 1rem; }
 
+#view { 
+	align-items: center;
+	background-color: var(--view-background-color);
+	display: none;
+	height: 100%; 
+	left: 0;
+	position: fixed;
+	top: 0;
+	vertical-align: middle;
+	width: 100%; }
+
+#view audio,
+#view video {
+	flex: none;
+	margin: 0 auto;
+	max-height: 100%;
+	max-width: 100%; }
+
 table { overflow-y: scroll; width: 100%; }
 
 tr { vertical-align: top; }

files/static/assets/js/main.js

@@ -0,0 +1,32 @@
+const video_formats = ["webm", "mp4"];
+const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
+
+(() => {
+    document.getElementById("view").addEventListener("click", e => {
+        e.target.firstChild.remove();
+        e.target.style.display = "none";
+    });
+
+    const file_links = Array.from(document.getElementsByTagName('tr')).slice(2).filter((e) => e.lastChild.innerHTML != "DIR").map(v => v.firstChild.firstChild);
+
+    file_links.forEach(f => f.addEventListener('click', e => {
+        if (video_formats.some(ext => e.target.pathname.endsWith(ext))) {
+            e.preventDefault();
+            const video = document.createElement("video");
+            video.autoplay = true;
+            video.controls = true;
+            video.src = e.target.pathname;
+            document.getElementById("view").appendChild(video);
+            document.getElementById("view").style.display = "flex";
+        } else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
+            e.preventDefault();
+            const audio = document.createElement("audio");
+            audio.autoplay = true;
+            audio.controls = true;
+            audio.src = e.target.pathname;
+            document.getElementById("view").appendChild(audio);
+            document.getElementById("view").style.display = "flex";
+        }
+    }));
+})();
+

files/views/index.pug

@@ -9,6 +9,7 @@ html(lang='en')
         meta(name='description' content=description)
         link(rel='icon' type='image/svg+xml' href='/shared/img/favicon.svg' sizes='any')
         link(href='/assets/css/main.css' rel='stylesheet')
+        script(src='/assets/js/main.js' defer)
     body
         header
             svg#logo(viewBox='0 -25 216 40')
@@ -33,4 +34,5 @@ html(lang='en')
                         tr
                             td #[a(href=item.link)= item.name]
                             td!= moment(item.datetime, clientTZ)
-                            td= item.size
+                            td= item.size
+        div#view