From 32469778dcc418ec7fa6c0cc4db76c5b830fa0ba Mon Sep 17 00:00:00 2001 From: Ryan Date: Thu, 27 Mar 2025 13:14:14 -0400 Subject: [PATCH] audio files playback added --- README.md | 2 +- domUtils.js | 90 ++++---------------------------------------------- fileManager.js | 36 ++++++++++++++------ 3 files changed, 33 insertions(+), 95 deletions(-) diff --git a/README.md b/README.md index 0850280..fa759b0 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ FileRise is a lightweight, secure, self-hosted web application for uploading, sy - **Enhanced File Editing Check:** Files with a Content-Length of 0 KB are now allowed to be edited. - **Built-in File Preview:** - - Users can quickly preview images, videos, and PDFs directly in modal popups without leaving the page. + - Users can quickly preview images, videos, audio and PDFs directly in modal popups without leaving the page. - The preview modal supports inline display of images (with proper scaling) and videos with playback controls. - Navigation (prev/next) within image previews is supported for a seamless browsing experience. diff --git a/domUtils.js b/domUtils.js index 8a3d5e8..dc4a277 100644 --- a/domUtils.js +++ b/domUtils.js @@ -136,18 +136,20 @@ export function buildFileTableRow(file, folderPath) { const safeUploader = escapeHTML(file.uploader || "Unknown"); let previewButton = ""; - if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic|pdf|mp4|webm|mov|ogg)$/i.test(file.name)) { + if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic|pdf|mp4|webm|mov|mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) { let previewIcon = ""; if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic)$/i.test(file.name)) { previewIcon = `image`; - } else if (/\.(mp4|webm|mov|ogg)$/i.test(file.name)) { + } else if (/\.(mp4|webm|mov)$/i.test(file.name)) { previewIcon = `videocam`; } else if (/\.pdf$/i.test(file.name)) { previewIcon = `picture_as_pdf`; + } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) { + previewIcon = `audiotrack`; } previewButton = ``; + ${previewIcon} + `; } return ` @@ -231,86 +233,6 @@ export function toggleRowSelection(event, fileName) { updateFileActionButtons(); } -export function previewFile(fileUrl, fileName) { - let modal = document.getElementById("filePreviewModal"); - if (!modal) { - modal = document.createElement("div"); - modal.id = "filePreviewModal"; - Object.assign(modal.style, { - display: "none", - position: "fixed", - top: "0", - left: "0", - width: "100vw", - height: "100vh", - backgroundColor: "rgba(0,0,0,0.7)", - display: "flex", - justifyContent: "center", - alignItems: "center", - zIndex: "1000" - }); - modal.innerHTML = ` -
- × -

-
-
`; - document.body.appendChild(modal); - - document.getElementById("closeFileModal").addEventListener("click", function () { - const video = modal.querySelector("video"); - if (video) { - video.pause(); - video.currentTime = 0; - } - modal.style.display = "none"; - }); - - modal.addEventListener("click", function (e) { - if (e.target === modal) { - const video = modal.querySelector("video"); - if (video) { - video.pause(); - video.currentTime = 0; - } - modal.style.display = "none"; - } - }); - } - - modal.querySelector("h4").textContent = fileName; - const container = modal.querySelector(".file-preview-container"); - container.innerHTML = ""; - - const extension = fileName.split('.').pop().toLowerCase(); - - if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic)$/i.test(fileName)) { - const img = document.createElement("img"); - img.src = fileUrl; - img.className = "image-modal-img"; - container.appendChild(img); - } else if (extension === "pdf") { - const embed = document.createElement("embed"); - const separator = fileUrl.indexOf('?') === -1 ? '?' : '&'; - embed.src = fileUrl + separator + 't=' + new Date().getTime(); - embed.type = "application/pdf"; - embed.style.width = "80vw"; - embed.style.height = "80vh"; - embed.style.border = "none"; - container.appendChild(embed); - } else if (/\.(mp4|webm|mov|ogg)$/i.test(fileName)) { - 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"; -} - export function attachEnterKeyListener(modalId, buttonId) { const modal = document.getElementById(modalId); if (modal) { diff --git a/fileManager.js b/fileManager.js index 9689027..f7b74f9 100644 --- a/fileManager.js +++ b/fileManager.js @@ -9,8 +9,7 @@ import { showToast, updateRowHighlight, toggleRowSelection, - attachEnterKeyListener, - previewFile as originalPreviewFile + attachEnterKeyListener } from './domUtils.js'; export let fileData = []; @@ -153,7 +152,7 @@ function openShareModal(file, folder) { // ============================================== // FEATURE: Enhanced Preview Modal with Navigation // ============================================== -function enhancedPreviewFile(fileUrl, fileName) { +function previewFile(fileUrl, fileName) { let modal = document.getElementById("filePreviewModal"); if (!modal) { modal = document.createElement("div"); @@ -178,12 +177,24 @@ function enhancedPreviewFile(fileUrl, fileName) { `; document.body.appendChild(modal); - document.getElementById("closeFileModal").addEventListener("click", function () { + function closeModal() { + // Pause and reset any video or audio elements within the modal + const mediaElements = modal.querySelectorAll("video, audio"); + mediaElements.forEach(media => { + media.pause(); + try { + media.currentTime = 0; + } catch(e) { + // Some media types might not support setting currentTime. + } + }); modal.style.display = "none"; - }); + } + + document.getElementById("closeFileModal").addEventListener("click", closeModal); modal.addEventListener("click", function (e) { if (e.target === modal) { - modal.style.display = "none"; + closeModal(); } }); } @@ -253,6 +264,13 @@ function enhancedPreviewFile(fileUrl, fileName) { video.controls = true; video.className = "image-modal-img"; container.appendChild(video); + } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(fileName)) { + const audio = document.createElement("audio"); + audio.src = fileUrl; + audio.controls = true; + audio.className = "audio-modal"; + audio.style.maxWidth = "80vw"; + container.appendChild(audio); } else { container.textContent = "Preview not available for this file type."; } @@ -260,10 +278,6 @@ function enhancedPreviewFile(fileUrl, fileName) { modal.style.display = "flex"; } -export function previewFile(fileUrl, fileName) { - enhancedPreviewFile(fileUrl, fileName); -} - // ============================================== // ORIGINAL FILE MANAGER FUNCTIONS // ============================================== @@ -519,6 +533,8 @@ export function renderGalleryView(folder) { let thumbnail; if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) { thumbnail = `${escapeHTML(file.name)}`; + } else if (/\.(mp3|wav|ogg|m4a)$/i.test(file.name)) { + thumbnail = `audiotrack`; } else { thumbnail = `insert_drive_file`; }