Update public/script.js

public/script.js

@@ -2,13 +2,32 @@ let isLooping = false; // Flag to manage loop state
 let isLoadingMusic = false; // Flag to manage loading state
 let currentPlaying = ''; // Store the filename of the currently playing music
 let trackList = []; // Store currently displayed track filenames
+let currentPage = 1;
 
 window.onload = () => {
+    // Attach click handlers for paging
+    document.getElementById('prev-page').addEventListener('click', () => changePage(-1));
+    document.getElementById('next-page').addEventListener('click', () => changePage(1));
+    
     loadMusicList();
-    document.getElementById('search-bar').addEventListener('keyup', loadMusicList);
+    document.getElementById('search-bar').addEventListener('keyup', () => {
+        currentPage = 1; // Reset to first page on new search
+        loadMusicList();
+    });
     document.getElementById('audio-player').style.display = 'none';
+    updatePageIndicator();
 };
 
+function changePage(direction) {
+    currentPage += direction;
+    loadMusicList();
+    updatePageIndicator();
+}
+
+function updatePageIndicator() {
+    document.getElementById('page-indicator').textContent = currentPage.toString();
+}
+
 function toggleLoop() {
     isLooping = !isLooping;
     document.getElementById('loop-toggle').textContent = `Loop: ${isLooping ? 'On' : 'Off'}`;
@@ -18,17 +37,32 @@ function toggleLoop() {
 
 function loadMusicList() {
     const searchQuery = document.getElementById('search-bar').value.toLowerCase();
+    const params = new URLSearchParams({page: currentPage}); // Include current page in request
 
-    fetch('/tracks')
+    fetch(`/tracks?${params}`)
         .then(response => response.json())
-        .then(tracks => {
+        .then(data => {
+            const { tracks, total } = data;
             const musicList = document.getElementById('music-list');
             musicList.innerHTML = '';
             trackList = [];
+            const totalPages = Math.ceil(total / 5);
             
+            // Disable or enable pagination buttons based on the current page
+            document.getElementById('prev-page').disabled = currentPage === 1;
+            document.getElementById('next-page').disabled = currentPage === totalPages;
+
             tracks.forEach(track => {
                 if (track.filename.toLowerCase().includes(searchQuery)) {
-                    trackList.push(track.filename); // Populate trackList
+                    trackList.push(track.filename);
+                    const musicItem = createMusicItem(track);
+                    musicList.appendChild(musicItem);
+                }
+            });
+        });
+}
+
+function createMusicItem(track) {
                     const musicItem = document.createElement('div');
                     musicItem.classList.add('music-item');
                     musicItem.setAttribute('data-filename', track.filename); // Add this line
@@ -47,10 +81,7 @@ function loadMusicList() {
                     fileNameSpan.textContent = track.filename;
 
                     musicItem.append(playButton, artworkImg, fileNameSpan);
-                    musicList.appendChild(musicItem);
-                }
-            });
-        });
+                    return musicItem;
 }
 
 function updatePlayingIndicator() {