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

6
js/player.js
View file

@ -127,12 +127,14 @@ async playTrackFromQueue() {
const track = currentQueue[this.currentQueueIndex]; const track = currentQueue[this.currentQueueIndex];
this.currentTrack = track; this.currentTrack = track;
const trackTitle = track?.version ? `${track.title} (${track.version})` : track?.title;
document.querySelector('.now-playing-bar .cover').src = document.querySelector('.now-playing-bar .cover').src =
this.api.getCoverUrl(track.album?.cover, '1280'); 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.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.updatePlayingTrackIndicator();
this.updateMediaSession(track); this.updateMediaSession(track);

9
js/ui.js
View file

@ -25,7 +25,8 @@ export class UIRenderer {
createTrackItemHTML(track, index, showCover = false) { 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 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 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 ` return `
<div class="track-item" data-track-id="${track.id}"> <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">` : ''} ${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="track-item-details">
<div class="title"> <div class="title">
${track.title} ${trackTitle}
${explicitBadge} ${explicitBadge}
</div> </div>
<div class="artist">${track.artist?.name ?? 'Unknown Artist'}</div> <div class="artist">${track.artist?.name ?? 'Unknown Artist'}</div>
@ -114,7 +115,7 @@ export class UIRenderer {
renderListWithTracks(container, tracks, showCover) { renderListWithTracks(container, tracks, showCover) {
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
const tempDiv = document.createElement('div'); const tempDiv = document.createElement('div');
tempDiv.innerHTML = tracks.map((track, i) => tempDiv.innerHTML = tracks.map((track, i) =>
this.createTrackItemHTML(track, i, showCover) this.createTrackItemHTML(track, i, showCover)
).join(''); ).join('');
@ -418,4 +419,4 @@ async renderHomePage() {
} }
}); });
} }
} }