Recent Files

README.md

@@ -25,4 +25,5 @@ open in browser: http://localhost:5000/
 - Save loop ro file
 - Put 
 - Custom Bar fix (half time, double time, time measure, force constant tempo/time measure)
-- Save bars in app storage browser 
+- Save bars in app storage browser 
+- Add custom labels to bars (intro, chorus1) 

css/styles.css

@@ -810,3 +810,56 @@ input[type="checkbox"] {
 #prevBar:hover, #nextBar:hover {
     background: #1976D2 !important;
 }
+
+/* Info Menu Styles */
+.info-menu {
+    animation: menuFadeIn 0.2s ease-out;
+}
+
+@keyframes menuFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Recent Files Menu Styles */
+.recent-files-menu {
+    animation: popupFadeIn 0.3s ease-out;
+}
+
+.recent-file-item:hover {
+    background: rgba(255, 255, 255, 0.2) !important;
+}
+
+.remove-recent-file:hover {
+    background: rgba(244, 67, 54, 0.5) !important;
+}
+
+.close-recent-menu:hover {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border-radius: 50%;
+}
+
+/* Ensure header has proper positioning for the menu */
+.header-top {
+    position: relative;
+}
+
+/* Responsive design for menus */
+@media (max-width: 600px) {
+    .info-menu {
+        right: 10px !important;
+        left: 10px !important;
+        min-width: auto !important;
+    }
+
+    .recent-files-menu {
+        width: 95% !important;
+        margin: 10px;
+    }
+}

index.html

@@ -187,7 +187,6 @@
 </div>
 
 <script type="module">
-
     // Check if the browser supports service workers
     if ('serviceWorker' in navigator) {
         // Wait for the window to load before registering
@@ -230,12 +229,18 @@
             this.CACHE_STORAGE_KEY = 'beatDetectionCache';
             this.cache = null;
 
+            // File System Access API and IndexedDB
+            this.RECENT_FILES_KEY = 'recentAudioFiles';
+            this.MAX_RECENT_FILES = 10;
+            this.recentFiles = [];
+
             this.init();
         }
 
         async init() {
-            // Load cache first
+            // Load cache and recent files first
             await this.loadCache();
+            await this.loadRecentFiles();
 
             // Show initialization progress
             this.showInitProgress();
@@ -255,7 +260,130 @@
             }
         }
 
-        // Cache management methods
+        // IndexedDB for file handles
+        async openDB() {
+            return new Promise((resolve, reject) => {
+                const request = indexedDB.open('LoopMaestroDB', 1);
+
+                request.onerror = () => reject(request.error);
+                request.onsuccess = () => resolve(request.result);
+
+                request.onupgradeneeded = (event) => {
+                    const db = event.target.result;
+                    if (!db.objectStoreNames.contains('fileHandles')) {
+                        db.createObjectStore('fileHandles', { keyPath: 'id' });
+                    }
+                };
+            });
+        }
+
+        async saveFileHandle(fileHandle, fileName, fileSize) {
+            try {
+                const db = await this.openDB();
+                const transaction = db.transaction(['fileHandles'], 'readwrite');
+                const store = transaction.objectStore('fileHandles');
+
+                const fileRecord = {
+                    id: `${fileName}_${fileSize}_${Date.now()}`,
+                    handle: fileHandle,
+                    fileName: fileName,
+                    fileSize: fileSize,
+                    lastAccessed: Date.now()
+                };
+
+                await store.put(fileRecord);
+
+                // Also add to recent files list
+                await this.addToRecentFiles(fileRecord);
+
+                return fileRecord.id;
+            } catch (error) {
+                console.error('Error saving file handle:', error);
+                throw error;
+            }
+        }
+
+        async getFileHandle(id) {
+            try {
+                const db = await this.openDB();
+                const transaction = db.transaction(['fileHandles'], 'readonly');
+                const store = transaction.objectStore('fileHandles');
+
+                return new Promise((resolve, reject) => {
+                    const request = store.get(id);
+                    request.onerror = () => reject(request.error);
+                    request.onsuccess = () => resolve(request.result);
+                });
+            } catch (error) {
+                console.error('Error getting file handle:', error);
+                throw error;
+            }
+        }
+
+        async getAllFileHandles() {
+            try {
+                const db = await this.openDB();
+                const transaction = db.transaction(['fileHandles'], 'readonly');
+                const store = transaction.objectStore('fileHandles');
+
+                return new Promise((resolve, reject) => {
+                    const request = store.getAll();
+                    request.onerror = () => reject(request.error);
+                    request.onsuccess = () => resolve(request.result);
+                });
+            } catch (error) {
+                console.error('Error getting all file handles:', error);
+                throw error;
+            }
+        }
+
+        // Recent files management
+        async loadRecentFiles() {
+            try {
+                const recent = localStorage.getItem(this.RECENT_FILES_KEY);
+                this.recentFiles = recent ? JSON.parse(recent) : [];
+            } catch (error) {
+                console.error('Error loading recent files:', error);
+                this.recentFiles = [];
+            }
+        }
+
+        async saveRecentFiles() {
+            try {
+                localStorage.setItem(this.RECENT_FILES_KEY, JSON.stringify(this.recentFiles));
+            } catch (error) {
+                console.error('Error saving recent files:', error);
+            }
+        }
+
+        async addToRecentFiles(fileRecord) {
+            // Remove if already exists
+            this.recentFiles = this.recentFiles.filter(file =>
+                file.id !== fileRecord.id
+            );
+
+            // Add to beginning
+            this.recentFiles.unshift({
+                id: fileRecord.id,
+                fileName: fileRecord.fileName,
+                fileSize: fileRecord.fileSize,
+                lastAccessed: fileRecord.lastAccessed
+            });
+
+            // Keep only recent files
+            if (this.recentFiles.length > this.MAX_RECENT_FILES) {
+                this.recentFiles = this.recentFiles.slice(0, this.MAX_RECENT_FILES);
+            }
+
+            await this.saveRecentFiles();
+        }
+
+        async removeFromRecentFiles(fileId) {
+            this.recentFiles = this.recentFiles.filter(file => file.id !== fileId);
+            await this.saveRecentFiles();
+        }
+
+        // Cache management methods (existing, keep as is)
         async loadCache() {
             try {
                 const cached = localStorage.getItem(this.CACHE_STORAGE_KEY);
@@ -300,7 +428,6 @@
 
             // Clean up old cache entries (keep only last 100 files)
             this.cleanupCache();
-
             await this.saveCache();
             console.log('Results cached for file:', file.name);
         }
@@ -311,11 +438,9 @@
                 // Sort by timestamp and remove oldest entries
                 const sorted = entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
                 const toRemove = sorted.slice(0, sorted.length - 20);
-
                 toRemove.forEach(([key]) => {
                     delete this.cache[key];
                 });
-
                 console.log('Cleaned up cache, removed', toRemove.length, 'old entries');
             }
         }
@@ -358,31 +483,12 @@
 
         enableUploadComponent() {
             const uploadArea = document.getElementById('uploadArea');
-            const fileInput = document.getElementById('audioFile');
-
             uploadArea.classList.remove('disabled');
             uploadArea.querySelector('p').textContent = 'Click to upload or drag and drop an audio file';
-            fileInput.disabled = false;
-        }
-
-        async checkServerStatus() {
-            const serverStatus = document.getElementById('serverStatus');
-            serverStatus.style.display = 'block';
-
-            const isOnline = await this.detector.checkServerStatus();
-
-            if (isOnline) {
-                serverStatus.textContent = "✓ Server is online - using server postprocessing";
-                serverStatus.className = 'server-status server-online';
-            } else {
-                serverStatus.textContent = "⚠ Server is offline - using client-side fallback";
-                serverStatus.className = 'server-status server-offline';
-            }
         }
 
         setupEventListeners() {
             const uploadArea = document.getElementById('uploadArea');
-            const fileInput = document.getElementById('audioFile');
             const cancelButton = document.getElementById('cancelButton');
             const prevBarButton = document.getElementById('prevBar');
             const nextBarButton = document.getElementById('nextBar');
@@ -390,14 +496,33 @@
             const stepSizeInput = document.getElementById('stepSize');
             const startBarInput = document.getElementById('startBar');
 
-            uploadArea.addEventListener('click', () => fileInput.click());
+            // File System Access API for file selection
+            uploadArea.addEventListener('click', async () => {
+                if ('showOpenFilePicker' in window) {
+                    await this.openFileWithFileSystemAPI();
+                } else {
+                    // Fallback to traditional file input
+                    const fileInput = document.createElement('input');
+                    fileInput.type = 'file';
+                    fileInput.accept = 'audio/*';
+                    fileInput.onchange = (e) => {
+                        if (e.target.files.length > 0) {
+                            this.handleAudioFile(e.target.files[0]);
+                        }
+                    };
+                    fileInput.click();
+                }
+            });
+
             uploadArea.addEventListener('dragover', (e) => {
                 e.preventDefault();
                 uploadArea.classList.add('dragover');
             });
+
             uploadArea.addEventListener('dragleave', () => {
                 uploadArea.classList.remove('dragover');
             });
+
             uploadArea.addEventListener('drop', (e) => {
                 e.preventDefault();
                 uploadArea.classList.remove('dragover');
@@ -407,12 +532,6 @@
                 }
             });
 
-            fileInput.addEventListener('change', (e) => {
-                if (e.target.files.length > 0) {
-                    this.handleAudioFile(e.target.files[0]);
-                }
-            });
-
             cancelButton.addEventListener('click', () => this.cancelProcessing());
 
             // Bars to play buttons
@@ -432,7 +551,6 @@
                         const barsToPlayInput = document.getElementById('barsToPlay');
                         barsToPlayInput.value = value;
                         barsToPlayInput.classList.remove('active');
-
                         this.updateAudioPlayer();
                     });
                 }
@@ -455,7 +573,6 @@
                         const stepSizeInput = document.getElementById('stepSize');
                         stepSizeInput.value = value;
                         stepSizeInput.classList.remove('active');
-
                     });
                 }
             });
@@ -464,7 +581,6 @@
             barsToPlayInput.addEventListener('change', (e) => {
                 const value = parseInt(e.target.value);
                 this.barsToPlay = value;
-
                 const buttonGroup = barsToPlayInput.closest('.button-input-group').querySelector('.button-group');
                 const buttons = buttonGroup.querySelectorAll('.choice-button');
 
@@ -498,8 +614,6 @@
                 buttons.forEach(btn => {
                     btn.classList.toggle('active', parseInt(btn.dataset.value) === value);
                 });
-                console.log(`isCustom ${isCustom}`);
-
                 stepSizeInput.classList.toggle('active', isCustom);
             });
 
@@ -530,15 +644,18 @@
                 }
             });
 
-            // Info Popup functionality
+            // Enhanced Info Popup functionality with menu
             const infoButton = document.getElementById('infoButton');
             const infoPopup = document.getElementById('infoPopup');
             const closePopup = document.getElementById('closePopup');
 
+            // Create menu for info button
+            this.createInfoMenu();
+
             // Open popup
-            infoButton.addEventListener('click', function () {
-                infoPopup.classList.add('active');
-                document.body.style.overflow = 'hidden'; // Prevent background scrolling
+            infoButton.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.toggleInfoMenu();
             });
 
             // Close popup
@@ -555,36 +672,272 @@
                 }
             });
 
-            // Close popup with Escape key
-            document.addEventListener('keydown', function (e) {
-                if (e.key === 'Escape' && infoPopup.classList.contains('active')) {
+            // Close popup and menu with Escape key
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
                     infoPopup.classList.remove('active');
                     document.body.style.overflow = '';
+                    this.hideInfoMenu();
                 }
             });
 
+            // Close menu when clicking outside
+            document.addEventListener('click', () => {
+                this.hideInfoMenu();
+            });
         }
 
-        cancelProcessing() {
-            if (this.isProcessing) {
-                this.detector.cancel();
-                this.isProcessing = false;
-                console.log('Processing cancelled by user');
+        createInfoMenu() {
+            this.infoMenu = document.createElement('div');
+            this.infoMenu.className = 'info-menu';
+            this.infoMenu.innerHTML = `
+                <div class="menu-item" data-action="about">About Loop Maestro</div>
+                <div class="menu-item" data-action="recent">Recent Songs</div>
+            `;
+            this.infoMenu.style.cssText = `
+                position: absolute;
+                top: 60px;
+                right: 0;
+                background: rgba(255, 255, 255, 0.95);
+                backdrop-filter: blur(10px);
+                border-radius: 8px;
+                padding: 8px 0;
+                min-width: 180px;
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                display: none;
+                z-index: 1000;
+                color: #333;
+            `;
+
+            // Style menu items
+            const menuItems = this.infoMenu.querySelectorAll('.menu-item');
+            menuItems.forEach(item => {
+                item.style.cssText = `
+                    padding: 12px 16px;
+                    cursor: pointer;
+                    transition: background-color 0.2s;
+                    font-size: 14px;
+                    border: none;
+                    background: none;
+                    width: 100%;
+                    text-align: left;
+                `;
+                item.addEventListener('mouseenter', () => {
+                    item.style.backgroundColor = 'rgba(33, 150, 243, 0.1)';
+                });
+                item.addEventListener('mouseleave', () => {
+                    item.style.backgroundColor = 'transparent';
+                });
+                item.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.handleMenuAction(item.dataset.action);
+                });
+            });
 
-                const progressMessage = document.getElementById('progressMessage');
-                progressMessage.textContent = "Processing cancelled";
+            document.body.appendChild(this.infoMenu);
+        }
 
-                const progressFill = document.getElementById('progressFill');
-                progressFill.style.background = '#f44336';
+        toggleInfoMenu() {
+            if (this.infoMenu.style.display === 'block') {
+                this.hideInfoMenu();
+            } else {
+                this.showInfoMenu();
+            }
+        }
 
-                // Hide loading after a delay
-                setTimeout(() => {
-                    document.getElementById('loading').style.display = 'none';
-                }, 1500);
+        showInfoMenu() {
+            this.infoMenu.style.display = 'block';
+        }
+
+        hideInfoMenu() {
+            this.infoMenu.style.display = 'none';
+        }
+
+        async handleMenuAction(action) {
+            this.hideInfoMenu();
+
+            switch (action) {
+                case 'about':
+                    document.getElementById('infoPopup').classList.add('active');
+                    document.body.style.overflow = 'hidden';
+                    break;
+                case 'recent':
+                    await this.showRecentFilesMenu();
+                    break;
             }
         }
 
-        async handleAudioFile(file) {
+        async showRecentFilesMenu() {
+            await this.loadRecentFiles();
+
+            const recentFilesMenu = document.createElement('div');
+            recentFilesMenu.className = 'recent-files-menu';
+            recentFilesMenu.style.cssText = `
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background: rgba(26, 42, 108, 0.95);
+                backdrop-filter: blur(10px);
+                border-radius: 15px;
+                padding: 20px;
+                max-width: 500px;
+                width: 90%;
+                max-height: 70vh;
+                overflow-y: auto;
+                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                z-index: 1001;
+                color: white;
+            `;
+
+            let menuContent = `
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);">
+                    <h3 style="margin: 0;">Recent Songs</h3>
+                    <button class="close-recent-menu" style="background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">×</button>
+                </div>
+            `;
+
+            if (this.recentFiles.length === 0) {
+                menuContent += `<p style="text-align: center; opacity: 0.8;">No recent files</p>`;
+            } else {
+                menuContent += `<div class="recent-files-list" style="display: flex; flex-direction: column; gap: 8px;">`;
+
+                for (const file of this.recentFiles) {
+                    menuContent += `
+                        <div class="recent-file-item" data-file-id="${file.id}" style="
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            padding: 12px;
+                            background: rgba(255, 255, 255, 0.1);
+                            border-radius: 8px;
+                            cursor: pointer;
+                            transition: background-color 0.2s;
+                        ">
+                            <div>
+                                <div style="font-weight: bold;">${file.fileName}</div>
+                                <div style="font-size: 0.8rem; opacity: 0.8;">${this.formatFileSize(file.fileSize)}</div>
+                            </div>
+                            <button class="remove-recent-file" style="
+                                background: rgba(244, 67, 54, 0.3);
+                                border: none;
+                                color: white;
+                                border-radius: 4px;
+                                padding: 4px 8px;
+                                cursor: pointer;
+                                font-size: 0.8rem;
+                            ">Remove</button>
+                        </div>
+                    `;
+                }
+
+                menuContent += `</div>`;
+            }
+
+            recentFilesMenu.innerHTML = menuContent;
+            document.body.appendChild(recentFilesMenu);
+
+            // Add event listeners
+            recentFilesMenu.querySelector('.close-recent-menu').addEventListener('click', () => {
+                document.body.removeChild(recentFilesMenu);
+            });
+
+            recentFilesMenu.addEventListener('click', (e) => {
+                if (e.target === recentFilesMenu) {
+                    document.body.removeChild(recentFilesMenu);
+                }
+            });
+
+            // Load file when clicked
+            recentFilesMenu.querySelectorAll('.recent-file-item').forEach(item => {
+                item.addEventListener('click', async (e) => {
+                    if (!e.target.classList.contains('remove-recent-file')) {
+                        const fileId = item.dataset.fileId;
+                        await this.loadFileFromHandle(fileId);
+                        document.body.removeChild(recentFilesMenu);
+                    }
+                });
+            });
+
+            // Remove file when remove button clicked
+            recentFilesMenu.querySelectorAll('.remove-recent-file').forEach(button => {
+                button.addEventListener('click', async (e) => {
+                    e.stopPropagation();
+                    const fileId = button.closest('.recent-file-item').dataset.fileId;
+                    await this.removeFromRecentFiles(fileId);
+                    document.body.removeChild(recentFilesMenu);
+                    await this.showRecentFilesMenu(); // Refresh the menu
+                });
+            });
+
+            // Close with Escape key
+            const closeHandler = (e) => {
+                if (e.key === 'Escape') {
+                    document.body.removeChild(recentFilesMenu);
+                    document.removeEventListener('keydown', closeHandler);
+                }
+            };
+            document.addEventListener('keydown', closeHandler);
+        }
+
+        async openFileWithFileSystemAPI() {
+            try {
+                const [fileHandle] = await window.showOpenFilePicker({
+                    types: [{
+                        description: 'Audio Files',
+                        accept: {
+                            'audio/*': ['.mp3', '.wav', '.aac', '.ogg', '.flac', '.m4a']
+                        }
+                    }],
+                    multiple: false
+                });
+
+                const file = await fileHandle.getFile();
+                const fileId = await this.saveFileHandle(fileHandle, file.name, file.size);
+                await this.handleAudioFile(file, fileId);
+
+            } catch (error) {
+                if (error.name !== 'AbortError') {
+                    console.error('Error opening file:', error);
+                    alert('Error opening file. Please try again.');
+                }
+            }
+        }
+
+        async loadFileFromHandle(fileId) {
+            try {
+                const fileRecord = await this.getFileHandle(fileId);
+                if (!fileRecord) {
+                    throw new Error('File not found in database');
+                }
+
+                // Verify we still have permission to read the file
+                if (await fileRecord.handle.queryPermission({ mode: 'read' }) !== 'granted') {
+                    const permission = await fileRecord.handle.requestPermission({ mode: 'read' });
+                    if (permission !== 'granted') {
+                        throw new Error('Permission denied to read the file');
+                    }
+                }
+
+                const file = await fileRecord.handle.getFile();
+
+                // Update last accessed time
+                await this.addToRecentFiles(fileRecord);
+
+                await this.handleAudioFile(file, fileId);
+
+            } catch (error) {
+                console.error('Error loading file from handle:', error);
+                alert('Error loading file. It may have been moved or deleted.');
+
+                // Remove from recent files if there's an error
+                await this.removeFromRecentFiles(fileId);
+            }
+        }
+
+        async handleAudioFile(file, fileId = null) {
             if (this.isProcessing) {
                 alert('Already processing a file. Please wait.');
                 return;
@@ -623,7 +976,6 @@
                 const updateProgress = async (percent, message) => {
                     // Clamp percentage to ensure it stays within valid range
                     const clampedPercent = Math.max(0, Math.min(100, percent));
-
                     const currentTime = Date.now();
                     const elapsed = (currentTime - this.startTime) / 1000;
 
@@ -675,6 +1027,12 @@
                     detected_beats_per_bar: this.detectedBeatsPerBar
                 });
 
+                // Save file handle if using File System API
+                if (!fileId && 'showOpenFilePicker' in window) {
+                    // This was a drag/drop or fallback upload, so we can't save a handle
+                    console.log('File uploaded via drag/drop or fallback - no file handle to save');
+                }
+
                 // Update UI with results
                 this.updateResultsUI();
 
@@ -713,7 +1071,7 @@
             const results = document.getElementById('results');
 
             // Show file info
-            fileInfo.textContent = `File: ${file.name} (${this.formatFileSize(file.size)}) [CACHED]`;
+            fileInfo.textContent = `File: ${file.name} (${this.formatFileSize(file.size)})`;
 
             // Load the audio file for playback (we still need the audio buffer)
             try {