diff --git a/files/static/assets/js/main.js b/files/static/assets/js/main.js
index e6b27e0..e39b7dc 100644
--- a/files/static/assets/js/main.js
+++ b/files/static/assets/js/main.js
@@ -4,6 +4,7 @@ const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
 
 const overlay = document.getElementById("overlay");
 let   scale = 1;
+let   g_volume = 1.0;
 
 function mousescroll(e) {
     e.preventDefault();
@@ -11,18 +12,33 @@ function mousescroll(e) {
     e.target.style.transform = `scale(${scale})`;
 }
 
+function onvolumechange(e) {
+    g_volume = e.target.volume;
+    console.log("new ", e);
+}
+
 const ext_filter = (ext, pathname) => pathname.toLowerCase().endsWith(ext);
 
 function to_overlay(eltyp, pathname) {
+    const div = document.createElement("div");
     const el = document.createElement(eltyp);
+    const el_label = document.createElement("span");
+    el_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
     if (eltyp !== "audio") el.addEventListener('wheel', mousescroll);
-    if (eltyp !== "img") el.autoplay = el.controls = true;
+    if (eltyp !== "img") {
+        el.autoplay = el.controls = true;
+        el.addEventListener("volumechange", onvolumechange);
+        el.volume = g_volume;
+    }
     el.src = pathname;
     overlay.appendChild(el);
+    overlay.appendChild(el_label);
+    // overlay.appendChild(div);
     overlay.style.visibility = "visible";
 }
 
 document.getElementById("overlay").addEventListener("click", e => {
+    e.target.firstChild.remove();
     e.target.firstChild.remove();
     e.target.style.visibility = "hidden";
     scale = 1;