Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

feat: add cover art to queue panel, remove redundant sidebar queue nav item

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-28 09:07:07 +02:00
1 parent 4ab54e12e1
commit b575e38726
3 files changed
+4 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
-6
View File
@@ -103,12 +103,6 @@
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527M9.5 14.473c1.5-.973 3.5-.973 5 .027M7 9c3-1.5 6.5-1 9 1"/></svg>Spotify Importer <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527M9.5 14.473c1.5-.973 3.5-.973 5 .027M7 9c3-1.5 6.5-1 9 1"/></svg>Spotify Importer
</div> </div>
</div> </div>
<div class="nav-section">
<div class="nav-section-title">Player</div>
<div class="nav-item" onclick="toggleQueue()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>Warteschlange
</div>
</div>
</nav> </nav>
</aside> </aside>
src/player.js
+2 -1
View File
@@ -292,7 +292,8 @@ export function renderQueue() {
S.queue.forEach((s, i) => { S.queue.forEach((s, i) => {
const item = document.createElement('div'); const item = document.createElement('div');
item.className = 'queue-item' + (i === S.qIdx ? ' active' : ''); item.className = 'queue-item' + (i === S.qIdx ? ' active' : '');
item.innerHTML = `<div class="qi-idx">${i+1}</div><div class="qi-info"><div class="qi-title">${esc(s.title)}</div><div class="qi-artist">${esc(s.artist||'')}</div></div>`; const cv = coverUrl(s.coverArt, 60);
item.innerHTML = `<div class="qi-idx">${i+1}</div><div class="qi-art">${cv ? `<img src="${cv}">` : '♪'}</div><div class="qi-info"><div class="qi-title">${esc(s.title)}</div><div class="qi-artist">${esc(s.artist||'')}</div></div>`;
item.onclick = () => { S.qIdx = i; playCurrent(); }; item.onclick = () => { S.qIdx = i; playCurrent(); };
el.appendChild(item); el.appendChild(item);
}); });
styles.css
+2
View File
@@ -295,6 +295,8 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
.queue-item.active{background:var(--accent-dim)} .queue-item.active{background:var(--accent-dim)}
.queue-item.active .qi-title{color:var(--accent)} .queue-item.active .qi-title{color:var(--accent)}
.qi-idx{font-size:10px;color:var(--text3);width:16px;text-align:center;flex-shrink:0;font-family:var(--mono)} .qi-idx{font-size:10px;color:var(--text3);width:16px;text-align:center;flex-shrink:0;font-family:var(--mono)}
.qi-art{width:34px;height:34px;border-radius:5px;overflow:hidden;background:var(--surface2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text3)}
.qi-art img{width:100%;height:100%;object-fit:cover}
.qi-info{flex:1;min-width:0} .qi-info{flex:1;min-width:0}
.qi-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qi-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qi-artist{font-size:10px;color:var(--text2)} .qi-artist{font-size:10px;color:var(--text2)}