From c507891d465aa3f59a39e47595aed5899774e02e Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Sun, 18 Jan 2026 16:26:46 +0100
Subject: [PATCH] UI: hide album name in now playing bar if identical to track
 title

---
 index.html   |  1 +
 js/player.js | 22 ++++++++++++++++++++++
 styles.css   |  8 ++++++++
 3 files changed, 31 insertions(+)

diff --git a/index.html b/index.html
index dd26564..e7dcab4 100644
--- a/index.html
+++ b/index.html
@@ -1801,6 +1801,7 @@
                     <img src="./assets/appicon.png" alt="Current Track Cover" class="cover" />
                     <div class="details">
                         <div class="title">Select a song</div>
+                        <div class="album"></div>
                         <div class="artist"></div>
                     </div>
                 </div>
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);