video & pdf preview added

fileManager.js

@@ -126,7 +126,7 @@ export function loadFileList(folderParam) {
 // Debounce helper (if not defined already)
 function debounce(func, wait) {
   let timeout;
-  return function(...args) {
+  return function (...args) {
     clearTimeout(timeout);
     timeout = setTimeout(() => func.apply(this, args), wait);
   };
@@ -202,13 +202,22 @@ export function renderFileTable(folder) {
       const safeSize = escapeHTML(file.size);
       const safeUploader = escapeHTML(file.uploader || "Unknown");
 
-      const isImage = /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file.name);
+      const isViewable = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic|pdf|mp4|webm|ogg)$/i.test(file.name);
+      let previewButton = "";
+      if (isViewable) {
+        let previewIcon = "";
+        if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic)$/i.test(file.name)) {
+          previewIcon = `<i class="material-icons">image</i>`;
+        } else if (/\.(mp4|webm|ogg)$/i.test(file.name)) {
+          previewIcon = `<i class="material-icons">videocam</i>`;
+        } else if (/\.pdf$/i.test(file.name)) {
+          previewIcon = `<i class="material-icons">picture_as_pdf</i>`;
+        }
 
-      const previewButton = isImage
-        ? `<button class="btn btn-sm btn-info ml-2" onclick="event.stopPropagation(); previewImage('${folderPath + encodeURIComponent(file.name)}', '${safeFileName}')">
-             <i class="material-icons">image</i>
-           </button>`
-        : "";
+        previewButton = `<button class="btn btn-sm btn-info ml-2 preview-btn" onclick="event.stopPropagation(); previewFile('${folderPath + encodeURIComponent(file.name)}', '${safeFileName}')">
+               ${previewIcon}
+             </button>`;
+      }
 
       tableBody += `
           <tr onclick="toggleRowSelection(event, '${safeFileName}')" class="clickable-row">
@@ -288,12 +297,12 @@ export function renderFileTable(folder) {
 }
 
 // Global function to show an image preview modal.
-window.previewImage = function (imageUrl, fileName) {
-  let modal = document.getElementById("imagePreviewModal");
+window.previewFile = function (fileUrl, fileName) {
+  let modal = document.getElementById("filePreviewModal");
   if (!modal) {
     modal = document.createElement("div");
-    modal.id = "imagePreviewModal";
-    // Full-screen overlay using flexbox, with no padding.
+    modal.id = "filePreviewModal";
+    // Use the same styling as the original image modal.
     Object.assign(modal.style, {
       display: "none",
       position: "fixed",
@@ -309,12 +318,12 @@ window.previewImage = function (imageUrl, fileName) {
     });
     modal.innerHTML = `
       <div class="modal-content image-preview-modal-content">
-        <span id="closeImageModal" class="close-image-modal">&times;</span>
+        <span id="closeFileModal" class="close-image-modal">&times;</span>
         <h4 class="image-modal-header"></h4>
-        <img src="" class="image-modal-img" />
+        <div class="file-preview-container"></div>
       </div>`;
     document.body.appendChild(modal);
-    document.getElementById("closeImageModal").addEventListener("click", function () {
+    document.getElementById("closeFileModal").addEventListener("click", function () {
       modal.style.display = "none";
     });
     modal.addEventListener("click", function (e) {
@@ -324,7 +333,38 @@ window.previewImage = function (imageUrl, fileName) {
     });
   }
   modal.querySelector("h4").textContent = "Preview: " + fileName;
-  modal.querySelector("img").src = imageUrl;
+  const container = modal.querySelector(".file-preview-container");
+  container.innerHTML = ""; // Clear previous content
+
+  const extension = fileName.split('.').pop().toLowerCase();
+
+  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic)$/i.test(fileName)) {
+    // Image preview
+    const img = document.createElement("img");
+    img.src = fileUrl;
+    img.className = "image-modal-img";
+    container.appendChild(img);
+  } else if (extension === "pdf") {
+    // PDF preview using <embed> with explicit sizing
+    const embed = document.createElement("embed");
+    embed.src = fileUrl;
+    embed.type = "application/pdf";
+    // Instead of using the image-modal-img class, set larger dimensions
+    embed.style.width = "80vw";
+    embed.style.height = "80vh";
+    embed.style.border = "none";
+    container.appendChild(embed);
+  } else if (/\.(mp4|webm|ogg)$/i.test(fileName)) {
+    // Video preview using <video>
+    const video = document.createElement("video");
+    video.src = fileUrl;
+    video.controls = true;
+    video.className = "image-modal-img";
+    container.appendChild(video);
+  } else {
+    container.textContent = "Preview not available for this file type.";
+  }
+
   modal.style.display = "flex";
 };
 

styles.css

@@ -1306,6 +1306,18 @@ body.dark-mode .image-preview-modal-content {
   border-color: #444;
 }
 
+.preview-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.preview-btn i.material-icons {
+  vertical-align: middle;
+  margin: 0;
+  margin-top: -2px;
+}
+
 /* Ensure the image resizes properly */
 .image-modal-img {
   max-width: 100%;