File preview

static/js/rooms/viewManager.js

@@ -13,6 +13,8 @@
  * @classdesc Manages the visual representation and interaction of files in the room interface.
  * Handles view switching, file rendering, sorting, and UI updates.
  */
+import { FilePreview } from '../components/filePreview.js';
+
 export class ViewManager {
     /**
      * Creates a new ViewManager instance.
@@ -24,6 +26,12 @@ export class ViewManager {
         this.currentView = 'grid';
         this.sortColumn = 'name';
         this.sortDirection = 'asc';
+        this.filePreview = new FilePreview({
+            containerId: 'roomFilePreviewModal',
+            onClose: () => {
+                // Clean up any resources if needed
+            }
+        });
         console.log('[ViewManager] Initialized with roomManager:', roomManager);
     }
     
@@ -349,6 +357,19 @@ export class ViewManager {
                 </button>
             `);
         } else {
+            // Check if file type is supported for preview
+            const extension = file.name.split('.').pop().toLowerCase();
+            const supportedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'mp4', 'webm', 'mp3', 'wav'];
+            
+            if (supportedTypes.includes(extension)) {
+                actions.push(`
+                    <button class="btn btn-sm file-action-btn" title="Preview" onclick="window.roomManager.viewManager.previewFile(${index})"
+                        style="background-color:var(--primary-opacity-8);color:var(--primary-color);">
+                        <i class="fas fa-eye"></i>
+                    </button>
+                `);
+            }
+
             if (this.roomManager.canDownload) {
                 actions.push(`
                     <button class="btn btn-sm file-action-btn" title="Download" onclick="window.roomManager.fileManager.downloadFile('${file.name}', '${file.path || ''}')"
@@ -493,4 +514,16 @@ export class ViewManager {
             selectedCount: selectedItems.length 
         });
     }
+
+    async previewFile(index) {
+        const file = this.roomManager.fileManager.currentFiles[index];
+        if (!file) return;
+
+        const fileUrl = `/api/rooms/${this.roomManager.roomId}/files/${encodeURIComponent(file.name)}?path=${encodeURIComponent(file.path || '')}&preview=true`;
+        
+        await this.filePreview.previewFile({
+            name: file.name,
+            url: fileUrl
+        });
+    }
 }