diff --git a/index.html b/index.html
index dd26564..e7dcab4 100644
--- a/index.html
+++ b/index.html
@@ -1801,6 +1801,7 @@
diff --git a/js/player.js b/js/player.js
index f86cbee..55de848 100644
--- a/js/player.js
+++ b/js/player.js
@@ -123,6 +123,7 @@ export class Player {
const coverEl = document.querySelector('.now-playing-bar .cover');
const titleEl = document.querySelector('.now-playing-bar .title');
+ const albumEl = document.querySelector('.now-playing-bar .album');
const artistEl = document.querySelector('.now-playing-bar .artist');
if (coverEl) coverEl.src = this.api.getCoverUrl(track.album?.cover);
@@ -130,6 +131,16 @@ export class Player {
const qualityBadge = createQualityBadgeHTML(track);
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;
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);
const qualityBadge = createQualityBadgeHTML(track);
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;
const mixBtn = document.getElementById('now-playing-mix-btn');
diff --git a/styles.css b/styles.css
index aa97702..869a52e 100644
--- a/styles.css
+++ b/styles.css
@@ -1474,6 +1474,14 @@ input:checked + .slider::before {
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 {
font-size: 0.8rem;
color: var(--muted-foreground);