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

fix(player): display version alongside track title

Browse source
This commit is contained in:
Dazly Gonsalves 2025-10-22 20:38:18 +05:30
parent 0b1467a53b
commit 43a96d8407
3 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
js/app.js
View file

@ -735,6 +735,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const html = currentQueue.map((track, index) => {
const isPlaying = index === player.currentQueueIndex;
const trackTitle = track?.version ? `${track.title} (${track.version})` : track?.title;
return `
<div class="queue-track-item ${isPlaying ? 'playing' : ''}" data-queue-index="${index}" data-track-id="${track.id}" draggable="true">
@ -748,7 +749,7 @@ document.addEventListener('DOMContentLoaded', async () => {
<img src="${api.getCoverUrl(track.album?.cover, '80')}"
class="track-item-cover" loading="lazy">
<div class="track-item-details">
<div class="title">${track.title}</div>
<div class="title">${trackTitle}</div>
<div class="artist">${track.artist?.name || 'Unknown'}</div>
</div>
</div>

6
js/player.js
View file

@ -127,12 +127,14 @@ async playTrackFromQueue() {
const track = currentQueue[this.currentQueueIndex];
this.currentTrack = track;
const trackTitle = track?.version ? `${track.title} (${track.version})` : track?.title;
document.querySelector('.now-playing-bar .cover').src =
this.api.getCoverUrl(track.album?.cover, '1280');
document.querySelector('.now-playing-bar .title').textContent = track.title;
document.querySelector('.now-playing-bar .title').textContent = trackTitle;
document.querySelector('.now-playing-bar .artist').textContent = track.artist?.name || 'Unknown Artist';
document.title = `${track.title} • ${track.artist?.name || 'Unknown'}`;
document.title = `${trackTitle} • ${track.artist?.name || 'Unknown'}`;
this.updatePlayingTrackIndicator();
this.updateMediaSession(track);

9
js/ui.js
View file

@ -25,7 +25,8 @@ export class UIRenderer {
createTrackItemHTML(track, index, showCover = 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 trackNumberHTML = `<div class="track-number">${showCover ? playIconSmall : index + 1}</div>`;
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
const explicitBadge = !hasExplicitContent(track) ? this.createExplicitBadge() : '';
const trackTitle = track?.version ? `${track.title} (${track.version})` : track?.title;
return `
<div class="track-item" data-track-id="${track.id}">
@ -34,7 +35,7 @@ export class UIRenderer {
${showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : ''}
<div class="track-item-details">
<div class="title">
${track.title}
${trackTitle}
${explicitBadge}
</div>
<div class="artist">${track.artist?.name ?? 'Unknown Artist'}</div>
@ -114,7 +115,7 @@ export class UIRenderer {
renderListWithTracks(container, tracks, showCover) {
const fragment = document.createDocumentFragment();
const tempDiv = document.createElement('div');
tempDiv.innerHTML = tracks.map((track, i) =>
this.createTrackItemHTML(track, i, showCover)
).join('');
@ -418,4 +419,4 @@ async renderHomePage() {
}
});
}
}
}