From b0a8467f8d8dcae99f1ada7a67c4d63b2ed02e5c Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.top>
Date: Thu, 9 Sep 2021 04:12:32 +0400
Subject: [PATCH] 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 | 24 ++++++++++++++++++++++--
 files/static/assets/js/main.js   | 32 ++++++++++++++++++++++++++++++++
 files/views/index.pug            |  4 +++-
 3 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 files/static/assets/js/main.js

diff --git a/files/static/assets/css/main.css b/files/static/assets/css/main.css
index 66c1f9b..0b4a434 100644
--- a/files/static/assets/css/main.css
+++ b/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; }
diff --git a/files/static/assets/js/main.js b/files/static/assets/js/main.js
new file mode 100644
index 0000000..a38a586
--- /dev/null
+++ b/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";
+        }
+    }));
+})();
+
diff --git a/files/views/index.pug b/files/views/index.pug
index 389f3b7..b2287af 100644
--- a/files/views/index.pug
+++ b/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
\ No newline at end of file
+                            td= item.size
+        div#view
\ No newline at end of file