diff --git a/js/ui.js b/js/ui.js index 7b72122..293ee6a 100644 --- a/js/ui.js +++ b/js/ui.js @@ -23,10 +23,19 @@ export class UIRenderer { `; } - createTrackItemHTML(track, index, showCover = false) { + createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false) { const playIconSmall = ''; const trackImageHTML = showCover ? `Track Cover` : ''; - const trackNumberHTML = `
${showCover ? trackImageHTML : index + 1}
`; + + let displayIndex; + if (hasMultipleDiscs && !showCover) { + const discNum = track.volumeNumber ?? track.discNumber ?? 1; + displayIndex = `${discNum}-${track.trackNumber}`; + } else { + displayIndex = index + 1; + } + + const trackNumberHTML = `
${showCover ? trackImageHTML : displayIndex}
`; const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : ''; const trackArtists = getTrackArtists(track); const trackTitle = getTrackTitle(track); @@ -117,8 +126,11 @@ export class UIRenderer { const fragment = document.createDocumentFragment(); const tempDiv = document.createElement('div'); + // Check if there are multiple discs in the tracks array + const hasMultipleDiscs = tracks.some(t => (t.volumeNumber || t.discNumber || 1) > 1); + tempDiv.innerHTML = tracks.map((track, i) => - this.createTrackItemHTML(track, i, showCover) + this.createTrackItemHTML(track, i, showCover, hasMultipleDiscs) ).join(''); while (tempDiv.firstChild) { @@ -288,7 +300,12 @@ export class UIRenderer { `; - tracks.sort((a, b) => a.trackNumber - b.trackNumber); + tracks.sort((a, b) => { + const discA = a.volumeNumber ?? a.discNumber ?? 1; + const discB = b.volumeNumber ?? b.discNumber ?? 1; + if (discA !== discB) return discA - discB; + return a.trackNumber - b.trackNumber; + }); this.renderListWithTracks(tracklistContainer, tracks, false); recentActivityManager.addAlbum(album);