snxraven/ravenscott-rocks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination and WebSocket support for track listings

Browse Source 
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.
This commit is contained in:
snxraven
2025-06-22 02:54:41 -04:00
parent 2f55294c3d
commit b12b3882f3
4 changed files with 339 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
manual.js
View File

@ -4,8 +4,8 @@ const path = require('path');
const slugify = require('slugify');
// Configuration
const PLAYLIST_URL = 'https://soundcloud.com/snxraven/sets/raven-scott-metal'; // Metal playlist URL
const CACHE_FILE = path.join(__dirname, 'cache_metal.json'); // Cache file for metal playlist
const PLAYLIST_URL = 'https://soundcloud.com/snxraven/sets/raven-scott-rap'; // Metal playlist URL
const CACHE_FILE = path.join(__dirname, 'cache_rap.json'); // Cache file for metal playlist
// Helper function to create a slug from track title
function generateSlug(title) {
@ -105,4 +105,4 @@ async function generateCache() {
generateCache().catch(err => {
console.error('Error generating cache:', err);
process.exit(1);
});
});