Added popup preview for videos and audio

1 files changed, 59 insertions, 29 deletions

diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 57d9950..c762da9 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -1,7 +1,8 @@
+/**
+ * Drag and drop
+ */
 const drop = document.getElementById("drop");
 
-setListeners();
-
 drop.addEventListener('dragover', e => {
     e.stopPropagation();
     e.preventDefault();
@@ -48,38 +49,67 @@ drop.addEventListener('drop', e => {
     }
 });
 
-function setListeners() {
-    // binary files
-    document.querySelectorAll("[data-path]").forEach(element => {
-        const images = ["jpg", "jpeg", "png"]; // TODO: Add other file types
+/**
+ * Set up listeners
+ */
+document.querySelectorAll("[data-path]").forEach(element => {
+    const images = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "tiff"];
+    const videos = ["mp4", "m4v", "mov", "webm", "avi", "wmv", "mpg", "mpv", "mpeg"];
+    const audio = ["mp3", "m4a", "wav", "ogg"];
+
+    const filename = element.getAttribute("data-path");
+    const extension = /(?:\.([^.]+))?$/.exec(filename)[1].toLowerCase();
+
+    if (images.indexOf(extension) > -1) {
+        element.setAttribute("data-bp", filename);
+        element.setAttribute("data-image", "");
+    } else if (videos.indexOf(extension) > -1) {
+        element.setAttribute("data-src", filename);
+        element.setAttribute("data-video", "");
+    } else if (audio.indexOf(extension) > -1) {
+        element.setAttribute("data-src", filename);
+        element.setAttribute("data-audio", "");
+    }
 
-        const filename = element.getAttribute("data-path");
-        const extension = /(?:\.([^.]+))?$/.exec(filename)[1].toLowerCase();
+    element.addEventListener("click", () => {
+        if (images.indexOf(extension) === -1 && videos.indexOf(extension) === -1 && audio.indexOf(extension) === -1)
+            window.location = filename; // download binary files
+    });
+});
 
-        if (images.indexOf(extension) > -1) {
-            element.setAttribute("data-bp", filename);
-            element.setAttribute("data-image", "");
-        }
+// images
+document.querySelectorAll("[data-image]").forEach(element => {
+    element.addEventListener("click", image => {
+        BigPicture({
+            el: image.currentTarget,
+            gallery: document.querySelectorAll("[data-image]")
+        })
+    });
+});
 
-        element.addEventListener("click", () => {
-            if (images.indexOf(extension) === -1) window.location = filename;
-        });
+// videos // TODO: Fix timeout exception and scrubbing issues with chromium based browsers
+document.querySelectorAll("[data-video]").forEach(element => {
+    element.addEventListener("click", video => {
+        BigPicture({
+            el: video.currentTarget,
+            vidSrc: video.currentTarget.getAttribute("data-src")
+        })
     });
+});
 
-    // images
-    document.querySelectorAll("[data-image]").forEach(element => {
-        element.addEventListener("click", image => {
-            BigPicture({
-                el: image.currentTarget,
-                gallery: document.querySelectorAll("[data-image]")
-            })
+//audio // TODO: Fix IOException and scrubbing issues with chromium based browsers
+document.querySelectorAll("[data-audio]").forEach(element => {
+    element.addEventListener("click", audio => {
+        BigPicture({
+            el: audio.currentTarget,
+            audio: audio.currentTarget.getAttribute("data-src")
         });
     });
+});
 
-    // normal files
-    document.querySelectorAll("[data-href]").forEach(element => {
-        element.addEventListener("click", () => {
-            window.location = element.getAttribute("data-href");
-        })
-    });
-}
+// normal files
+document.querySelectorAll("[data-href]").forEach(element => {
+    element.addEventListener("click", () => {
+        window.location = element.getAttribute("data-href");
+    })
+});