vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix album track sorting and formatting for multi-disc albums

Browse source 
- Updated `renderAlbumPage` in `js/ui.js` to sort tracks by disc/volume number before track number.
- Updated `renderListWithTracks` to detect multi-disc albums.
- Updated `createTrackItemHTML` to display track numbers as `Disc-Track` (e.g., "1-1") for multi-disc albums when cover art is hidden (album view).
This commit is contained in:
google-labs-jules[bot] 2025-12-22 23:28:09 +00:00 committed by Julien Maille
parent c6e6d6a596
commit 0aee58b823
1 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
js/ui.js
View file

@ -23,10 +23,19 @@ export class UIRenderer {
`;
}
createTrackItemHTML(track, index, showCover = false) {
createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false) {
const playIconSmall = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
const trackImageHTML = showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : '';
const trackNumberHTML = `<div class="track-number">${showCover ? trackImageHTML : index + 1}</div>`;
let displayIndex;
if (hasMultipleDiscs && !showCover) {
const discNum = track.volumeNumber ?? track.discNumber ?? 1;
displayIndex = `${discNum}-${track.trackNumber}`;
} else {
displayIndex = index + 1;
}
const trackNumberHTML = `<div class="track-number">${showCover ? trackImageHTML : displayIndex}</div>`;
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 {
</div>
`;
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);