From aeb519276e37cee7a5c59e05dc52d978938b828e Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Mon, 15 Apr 2019 01:13:21 +0200
Subject: Added popup preview for videos and audio
---
src/main/resources/js/files.js | 88 ++++++++++++++++++++++++++++--------------
1 file changed, 59 insertions(+), 29 deletions(-)
(limited to 'src/main/resources/js/files.js')
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");
+ })
+});
--
cgit v1.2.3