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

UI: hide album name in now playing bar if identical to track title

Browse source
This commit is contained in:
Julien Maille 2026-01-18 16:26:46 +01:00
parent 241b72f43b
commit c507891d46
3 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -1801,6 +1801,7 @@
<img src="./assets/appicon.png" alt="Current Track Cover" class="cover" /> <img src="./assets/appicon.png" alt="Current Track Cover" class="cover" />
<div class="details"> <div class="details">
<div class="title">Select a song</div> <div class="title">Select a song</div>
<div class="album"></div>
<div class="artist"></div> <div class="artist"></div>
</div> </div>
</div> </div>

22
js/player.js
View file

@ -123,6 +123,7 @@ export class Player {
const coverEl = document.querySelector('.now-playing-bar .cover'); const coverEl = document.querySelector('.now-playing-bar .cover');
const titleEl = document.querySelector('.now-playing-bar .title'); const titleEl = document.querySelector('.now-playing-bar .title');
const albumEl = document.querySelector('.now-playing-bar .album');
const artistEl = document.querySelector('.now-playing-bar .artist'); const artistEl = document.querySelector('.now-playing-bar .artist');
if (coverEl) coverEl.src = this.api.getCoverUrl(track.album?.cover); if (coverEl) coverEl.src = this.api.getCoverUrl(track.album?.cover);
@ -130,6 +131,16 @@ export class Player {
const qualityBadge = createQualityBadgeHTML(track); const qualityBadge = createQualityBadgeHTML(track);
titleEl.innerHTML = `${trackTitle} ${qualityBadge}`; titleEl.innerHTML = `${trackTitle} ${qualityBadge}`;
} }
if (albumEl) {
const albumTitle = track.album?.title || '';
if (albumTitle && albumTitle !== trackTitle) {
albumEl.textContent = albumTitle;
albumEl.style.display = 'block';
} else {
albumEl.textContent = '';
albumEl.style.display = 'none';
}
}
if (artistEl) artistEl.innerHTML = trackArtistsHTML + yearDisplay; if (artistEl) artistEl.innerHTML = trackArtistsHTML + yearDisplay;
const mixBtn = document.getElementById('now-playing-mix-btn'); const mixBtn = document.getElementById('now-playing-mix-btn');
@ -268,6 +279,17 @@ export class Player {
document.querySelector('.now-playing-bar .cover').src = this.api.getCoverUrl(track.album?.cover); document.querySelector('.now-playing-bar .cover').src = this.api.getCoverUrl(track.album?.cover);
const qualityBadge = createQualityBadgeHTML(track); const qualityBadge = createQualityBadgeHTML(track);
document.querySelector('.now-playing-bar .title').innerHTML = `${trackTitle} ${qualityBadge}`; document.querySelector('.now-playing-bar .title').innerHTML = `${trackTitle} ${qualityBadge}`;
const albumEl = document.querySelector('.now-playing-bar .album');
if (albumEl) {
const albumTitle = track.album?.title || '';
if (albumTitle && albumTitle !== trackTitle) {
albumEl.textContent = albumTitle;
albumEl.style.display = 'block';
} else {
albumEl.textContent = '';
albumEl.style.display = 'none';
}
}
document.querySelector('.now-playing-bar .artist').innerHTML = trackArtistsHTML + yearDisplay; document.querySelector('.now-playing-bar .artist').innerHTML = trackArtistsHTML + yearDisplay;
const mixBtn = document.getElementById('now-playing-mix-btn'); const mixBtn = document.getElementById('now-playing-mix-btn');

8
styles.css
View file

@ -1474,6 +1474,14 @@ input:checked + .slider::before {
color: var(--highlight); color: var(--highlight);
} }
.track-info .details .album {
font-size: 0.8rem;
color: var(--muted-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.track-info .details .artist { .track-info .details .artist {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--muted-foreground); color: var(--muted-foreground);