This commit introduces pagination and real-time updates to the music site, improving performance and user experience for browsing tracks across genres. Key changes include:
music_site.js:
Added Socket.IO for real-time communication between client and server.
Implemented pagination with TRACKS_PER_PAGE (4 tracks per page) in getTracks function, returning paginated tracks, current page, total pages, and total tracks.
Enhanced slug generation with usedSlugs Map to ensure uniqueness within genres.
Updated routes and WebSocket handlers to support pagination:
Modified getTracks to handle page parameters and return paginated data.
Added io.on('connection') to handle request_page events and emit page_data or error.
Updated / and /sitemap.xml to work with paginated track data.
Adjusted track retrieval in /:genre/track/:slug and /json/:genre to use allTracks for consistency.
index.ejs:
Added pagination controls (Previous/Next buttons) for each genre section, displaying current page and total pages.
Introduced page-container divs to manage paginated track displays, with active class for the current page.
Implemented client-side WebSocket logic with Socket.IO to request and render new pages dynamically.
Added page caching (pageCache) to store rendered pages and reduce server requests.
Enhanced lazy loading of iframes to apply to dynamically loaded pages.
Updated styling for page-container and iframes to ensure proper layout and responsiveness.
These changes enable users to navigate through tracks efficiently without loading all tracks at once, reduce server load, and provide a smoother browsing experience with real-time updates.
