From 5bcfd0499a3cd63bc33bb007fa02a9f2b009d6bd Mon Sep 17 00:00:00 2001
From: Armin <armin@cherry>
Date: Wed, 8 Jul 2026 17:56:33 +0200
Subject: [PATCH] Display cover art in player area; add Clear button and reduce
 analyzer gap

---
 index.html | 42 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index b742885..784d741 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,7 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
 .player .track-info .artist-name { font-size: 12px; color: #6b7089; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .big-time { font-size: 28px; font-weight: 200; color: #d2d4de; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
 .big-time .sep { color: #6b7089; margin: 0 4px; }
-.canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; }
+.canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; margin-right: 16px; }
 .progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
 .waveform-wrap { flex: 1; min-width: 0; cursor: pointer; position: relative; height: 42px; }
 .waveform-wrap canvas { display: block; width: 100%; height: 42px; }
@@ -136,6 +136,10 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
 <div class="content">
   <div class="pinned" id="pinned">
     <div class="player" id="player">
+      <div class="cover-art" id="coverArt">
+        <span class="no-cover" id="coverPlaceholder">&#9835;</span>
+        <img id="coverImage" src="" alt="" style="display:none">
+      </div>
       <div class="canvas-area" id="canvasArea">
         <div class="empty-state" id="emptyState">
           <div class="icon">&#9835;</div>
@@ -1462,10 +1466,28 @@ function playTrack(i) {
 }
 function updateUI() {
   const t = tracks[currentIndex];
-  if (!t) return;
+  if (!t) {
+    trackTitle.textContent = '';
+    trackArtist.textContent = '';
+    footerTrack.textContent = '';
+    audioInfo.textContent = '';
+    coverImage.src = '';
+    coverImage.style.display = 'none';
+    coverPlaceholder.style.display = '';
+    return;
+  }
   trackTitle.textContent = t.name;
   trackArtist.textContent = t.artist || 'Unknown Artist';
   footerTrack.textContent = `${t.name}${t.artist ? ' - ' + t.artist : ''}`;
+  if (t.picture) {
+    coverImage.src = t.picture;
+    coverImage.style.display = '';
+    coverPlaceholder.style.display = 'none';
+  } else {
+    coverImage.src = '';
+    coverImage.style.display = 'none';
+    coverPlaceholder.style.display = '';
+  }
   const ai = t.ainfo || {};
   const parts = [];
   if (ai.codec) parts.push(ai.codec);
@@ -1611,6 +1633,22 @@ addFolderBtn.addEventListener('click', addFolder);
 addFilesBtn.addEventListener('click', addFiles);
 isolateBtn.addEventListener('click', isolateTracks);
 deleteBtn.addEventListener('click', deleteTrack);
+clearBtn.addEventListener('click', () => {
+  if (tracks.length === 0) return;
+  audio.pause();
+  audio.src = '';
+  audio.load();
+  if (isCrossfading) { audioNext.pause(); audioNext.src = ''; audioNext.load(); }
+  for (const t of tracks) URL.revokeObjectURL(t.url);
+  tracks = [];
+  currentIndex = -1;
+  selectedIndices.clear();
+  anchorTrack = null;
+  renderTracks();
+  updateUI();
+  drawSpectrum(spectrumCtx, new Uint8Array(1024), new Uint8Array(1024));
+  vuDraw(new Uint8Array(1024), new Uint8Array(1024));
+});
 infoBtn.addEventListener('click', openTagEditor);
 tagSaveBtn.addEventListener('click', saveTagEditor);
 tagCancelBtn.addEventListener('click', cancelTagEditor);