Updated overlay.

web/assets/css/main.css

@@ -175,13 +175,11 @@ thead tr th.clickable.sort-down::after { content: '↓'; }
 #overlay div {
 	align-items: center;
 	display: flex;
+	flex-direction: column;
 	height: 100%;
-	width: 100%; }
-
-#overlay :is(video, audio, img) {
-	margin: auto;
 	max-height: 100%;
-	max-width: 86%; }
+	max-width: 100%;
+	width: auto; }
 
 #overlay span {
 	bottom: 0;
@@ -191,6 +189,12 @@ thead tr th.clickable.sort-down::after { content: '↓'; }
 	text-shadow: 0 0 .3rem var(--secondary-color);
 	z-index: 999; }
 
+#overlay :is(video, audio, img) {
+	margin: auto;
+	max-height: 100%;
+	max-width: 100%;
+	width: auto; }
+
 #overlay button {
 	background: none;
 	border: none;

web/assets/js/main.js

@@ -5,8 +5,8 @@ const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
 const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
 
 const overlay = document.getElementById("overlay");
-const overlay_content = overlay.children[1].firstChild;
+const overlay_content = overlay.children[1];
-const overlay_label = overlay.children[1].lastChild;
+const overlay_label = overlay.children[2];
 
 const g_tbody = document.getElementsByTagName('tbody')[0];
 let g_first_row = g_tbody.firstChild;
@@ -14,25 +14,44 @@ let g_last_row = g_tbody.lastChild;
 const g_back_row = document.getElementsByTagName("tr")[1];
 
 let g_scale = 1;
+let g_oc_offset = [0, 0];
+let g_oc_translate = [0, 0];
 let g_current_row = g_back_row;
 
 
-const file_links = Array.from(g_tbody.children)
-	.filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild);
-
-
 if (localStorage.getItem('audio_volume') == null)
 	localStorage['audio_volume'] = 0.5;
 
 function overlay_close() {
-	overlay_content.children[0].remove();
+	overlay_content.firstChild.remove();
 	overlay.style.visibility = "hidden";
 	g_scale = 1;
+	g_oc_offset = g_oc_translate = [0, 0];
 }
 
+overlay_content.addEventListener("wheel", e => {
+	e.preventDefault();
+	g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
+	e.target.style.transform = 
+		`translate(${g_oc_translate[0]}px, ${g_oc_translate[1]}px) scale(${g_scale})`;
+});
+
 overlay.addEventListener("mouseup", e => {
-	if (e.target.tagName !== "DIV") return;
+	if (e.target.tagName === "DIV" && e.button === 0) overlay_close(); });
-	if (e.button === 0) overlay_close(); });
+
+overlay_content.addEventListener("mousedown", e => {
+	if (e.buttons !== 1) return;
+	e.preventDefault();
+	g_oc_offset = [e.offsetX, e.offsetY];
+});
+
+overlay_content.addEventListener("mousemove", e => {
+	if (e.buttons !== 1) return;
+	e.preventDefault();
+	g_oc_translate[0] = e.clientX - e.target.x - g_oc_offset[0];
+	g_oc_translate[1] = e.clientY - e.target.y - g_oc_offset[1];
+	e.target.style.transform = `translate(${g_oc_translate[0]}px, ${g_oc_translate[1]}px) scale(${g_scale})`;
+});
 
 
 function determine_media_element(path) {
@@ -49,40 +68,14 @@ function determine_media_element(path) {
 function send_to_overlay(pathname, media_type_element) {
 	if (media_type_element === undefined)
 		return false;
-	if (overlay_content.children.length != 0)
+	if (overlay_content.children.length != 0) {
-		overlay_content.children[0].remove();
+		g_oc_offset = g_oc_translate = [0, 0];
+		g_scale = 1;
+	}
 
 	const media_element = document.createElement(media_type_element);
 	media_element.src = pathname;
 
-	overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
-
-	if (media_type_element !== "audio") {
-		offset_x = 0;
-		offset_y = 0;
-		translate_x = 0;
-		translate_y = 0;
-		media_element.addEventListener("wheel", e => {
-			e.preventDefault();
-			g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
-			media_element.style.transform = `translate(${translate_x}px, ${translate_y}px) scale(${g_scale})`;
-			});
-			
-		media_element.addEventListener("mousedown", e => {
-			if (e.buttons == 1)
-				e.preventDefault();
-			offset_x = e.offsetX;
-			offset_y = e.offsetY;
-		});
-		media_element.addEventListener("mousemove", e => {
-			if (e.buttons !== 1) return;
-			e.preventDefault();
-			translate_x = e.clientX - e.target.x - offset_x;
-			translate_y = e.clientY - e.target.y - offset_y;
-			media_element.style.transform = `translate(${translate_x}px, ${translate_y}px) scale(${g_scale})`;
-		});
-		
-	}
 	if (media_type_element !== "img") {
 		media_element.autoplay = media_element.controls = true;
 		media_element.addEventListener("volumechange", e => {
@@ -90,7 +83,10 @@ function send_to_overlay(pathname, media_type_element) {
 		media_element.volume = localStorage["audio_volume"];
 	}
 
-	overlay_content.appendChild(media_element);
+	overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
+
+	overlay_content.replaceChildren(media_element);
+
 	overlay.style.visibility = "visible";
 
 	return true;
@@ -130,12 +126,14 @@ b_next.addEventListener("click", e => {
 	e.preventDefault();
 });
 
-
+Array.from(g_tbody.children)
-for (let i = 0; i < file_links.length; ++i)
+	.forEach(v => {
-	file_links[i].addEventListener("click", e => {
+		if (v.lastChild.innerHTML === "DIR") return;
-		g_current_row = e.target.parentNode.parentNode;
+		v.firstChild.firstChild.addEventListener("click", e => {
-		if (send_to_overlay(e.target.pathname, determine_media_element(e.target.pathname)))
+			g_current_row = e.target.parentNode.parentNode;
-			e.preventDefault();
+			if (send_to_overlay(e.target.pathname, determine_media_element(e.target.pathname)))
+				e.preventDefault();
+		});
 	});
 
 //// KEYBOARD HANDLING

web/index.templ

@@ -86,11 +86,9 @@ templ Index(currentPath, progVer string, stat *files.DirStat, entries *[]files.D
     </footer>
     <div id="overlay">
         <button name="prev">&#10096;</button>
-        <div>
+        <div></div>
-            <div></div>
+        <span></span>
-            <span></span>
+        <button name="next">&#10097;</button>
-        </div>
-        <button name="prev">&#10097;</button>
     </div>
     </body>
     </html>