adds the functionality to embed videos and images on hover within the…

… admin table
waifuvault · Jun 27, 2024 · 0a30818 · 0a30818
1 parent cb2981b
commit 0a30818
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/src/public/assets/custom/js/main.js b/src/public/assets/custom/js/main.js
@@ -48,13 +48,17 @@ const Site = (function() {
     };
 
 
+    const initTooltips = function initTooltips() {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {
+            sanitize: false
+        }));
+    }
+
+
+
     const loadPage = function loadPage(anon) {
         // eslint-disable-next-line require-await
         anon.call(this, Site).then(async () => {
-            function initTooltips() {
-                document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
-            }
-
             function initTabs() {
                 const triggerTabList = document.querySelectorAll("#resultTabs button");
                 triggerTabList.forEach(triggerEl => {
@@ -76,6 +80,7 @@ const Site = (function() {
         loading,
         display,
         showSuccess,
-        showError
+        showError,
+        initTooltips
     };
 }());
diff --git a/src/public/secure/files.ejs b/src/public/secure/files.ejs
@@ -182,6 +182,22 @@
                 };
             }
 
+            function fileEmbedRender() {
+                return function(data, type, row) {
+                    const url = row.url;
+                    if(url.match(/\.(jpeg|jpg|gif|png|webp)$/) != null){
+                        return `<span class="text-primary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<img src='${url}' />">${data}</span>`;
+                    }else if(url.match(/\.(mp4|ogg|webm)$/) != null){
+                        const ext = url.match(/\.(mp4|ogg|webm)$/)[1];
+                        let type = `video/${ext}`;
+                        const videoTag = `<video width='320' height='240' autoplay><source src='${url}' type='${type}'></video>`;
+                        return `<span class="text-primary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="${videoTag}">${data}</span>`;
+                    }
+                    return `<span>${data}</span>`;
+                };
+            }
+
+
             function getDataMapping(type) {
                 switch (type) {
                     case "ips":
@@ -193,7 +209,7 @@
                     case "entries":
                         return [
                             { data: "id" },
-                            { data: "originalFileName", className: "col-filename" },
+                            { data: "originalFileName", className: "col-filename", render: fileEmbedRender() },
                             { data: "fileExtension", className: "col-fileext" },
                             { data: "fileSize", render: sizeAsMB() },
                             { data: "createdAt", render: customDate() },
@@ -401,6 +417,9 @@
                         }
                     });
                 }
+                table.on("draw.dt", () => {
+                    site.initTooltips();
+                });
             }
 
             $(".datatables").each(async function() {