File preview

static/js/components/filePreview.js

@@ -0,0 +1,141 @@
+export class FilePreview {
+    constructor(options = {}) {
+        this.options = {
+            containerId: options.containerId || 'filePreviewModal',
+            onClose: options.onClose || (() => {}),
+            ...options
+        };
+        this.modal = null;
+        this.init();
+    }
+
+    init() {
+        // Create modal if it doesn't exist
+        if (!document.getElementById(this.options.containerId)) {
+            const modalHtml = `
+                <div class="modal fade" id="${this.options.containerId}" tabindex="-1" aria-hidden="true">
+                    <div class="modal-dialog modal-lg modal-dialog-centered">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title">File Preview</h5>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                            </div>
+                            <div class="modal-body">
+                                <div id="${this.options.containerId}Content" class="text-center">
+                                    <div class="spinner-border text-primary" role="status">
+                                        <span class="visually-hidden">Loading...</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            document.body.insertAdjacentHTML('beforeend', modalHtml);
+        }
+
+        this.modal = new bootstrap.Modal(document.getElementById(this.options.containerId));
+        
+        // Add event listener for modal close
+        document.getElementById(this.options.containerId).addEventListener('hidden.bs.modal', () => {
+            this.options.onClose();
+        });
+    }
+
+    getFileIcon(filename) {
+        const extension = filename.split('.').pop().toLowerCase();
+        const iconMap = {
+            pdf: 'fa-file-pdf',
+            doc: 'fa-file-word',
+            docx: 'fa-file-word',
+            xls: 'fa-file-excel',
+            xlsx: 'fa-file-excel',
+            ppt: 'fa-file-powerpoint',
+            pptx: 'fa-file-powerpoint',
+            txt: 'fa-file-alt',
+            jpg: 'fa-file-image',
+            jpeg: 'fa-file-image',
+            png: 'fa-file-image',
+            gif: 'fa-file-image',
+            zip: 'fa-file-archive',
+            rar: 'fa-file-archive',
+            mp3: 'fa-file-audio',
+            mp4: 'fa-file-video'
+        };
+        return iconMap[extension] || 'fa-file';
+    }
+
+    async previewFile(file) {
+        const contentDiv = document.getElementById(`${this.options.containerId}Content`);
+        const extension = file.name.split('.').pop().toLowerCase();
+        
+        // Show loading spinner
+        contentDiv.innerHTML = `
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        `;
+
+        try {
+            // Handle different file types
+            if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
+                // Image preview
+                contentDiv.innerHTML = `
+                    <img src="${file.url}" class="img-fluid" alt="${file.name}" style="max-height: 70vh;">
+                `;
+            } else if (['pdf'].includes(extension)) {
+                // PDF preview
+                contentDiv.innerHTML = `
+                    <iframe src="${file.url}" width="100%" height="70vh" frameborder="0"></iframe>
+                `;
+            } else if (['mp4', 'webm'].includes(extension)) {
+                // Video preview
+                contentDiv.innerHTML = `
+                    <video controls class="w-100" style="max-height: 70vh;">
+                        <source src="${file.url}" type="video/${extension}">
+                        Your browser does not support the video tag.
+                    </video>
+                `;
+            } else if (['mp3', 'wav'].includes(extension)) {
+                // Audio preview
+                contentDiv.innerHTML = `
+                    <audio controls class="w-100">
+                        <source src="${file.url}" type="audio/${extension}">
+                        Your browser does not support the audio tag.
+                    </audio>
+                `;
+            } else {
+                // Default preview for other file types
+                contentDiv.innerHTML = `
+                    <div class="text-center py-5">
+                        <i class="fas ${this.getFileIcon(file.name)} fa-4x mb-3" style="color: var(--secondary-color);"></i>
+                        <h5 class="mb-3">${file.name}</h5>
+                        <p class="text-muted">Preview not available for this file type.</p>
+                        <a href="${file.url}" class="btn btn-primary" download>
+                            <i class="fas fa-download me-2"></i>Download
+                        </a>
+                    </div>
+                `;
+            }
+        } catch (error) {
+            console.error('Error previewing file:', error);
+            contentDiv.innerHTML = `
+                <div class="text-center py-5">
+                    <i class="fas fa-exclamation-circle fa-4x mb-3 text-danger"></i>
+                    <h5 class="mb-3">Error Loading Preview</h5>
+                    <p class="text-muted">Unable to load file preview. Please try downloading the file instead.</p>
+                    <a href="${file.url}" class="btn btn-primary" download>
+                        <i class="fas fa-download me-2"></i>Download
+                    </a>
+                </div>
+            `;
+        }
+
+        // Show the modal
+        this.modal.show();
+    }
+
+    close() {
+        this.modal.hide();
+    }
+}