ini file support and cover art

public/app.js

@@ -18,6 +18,8 @@ const elements = {
   libraryEntries: document.querySelector("#library-entries"),
   title: document.querySelector("#now-title"),
   meta: document.querySelector("#now-meta"),
+  coverImage: document.querySelector("#cover-image"),
+  coverPlaceholder: document.querySelector("#cover-placeholder"),
   tabs: document.querySelector("#tabs"),
   tabAdd: document.querySelector("#tab-add"),
   count: document.querySelector("#track-count"),
@@ -335,6 +337,20 @@ function renderPlayer(nextState) {
     ? [current.artist, current.album].filter(Boolean).join(" · ") || current.source
     : "Voeg een track toe vanuit de bibliotheek";
 
+  const artworkId = current?.artworkId || "";
+  if (elements.coverImage.dataset.artworkId !== artworkId) {
+    elements.coverImage.dataset.artworkId = artworkId;
+    if (artworkId) {
+      elements.coverImage.hidden = false;
+      elements.coverPlaceholder.hidden = true;
+      elements.coverImage.src = `/api/artwork/${encodeURIComponent(artworkId)}`;
+    } else {
+      elements.coverImage.removeAttribute("src");
+      elements.coverImage.hidden = true;
+      elements.coverPlaceholder.hidden = false;
+    }
+  }
+
   const playing = nextState.state === "playing" || nextState.state === "starting";
   elements.play.textContent = playing ? "Ⅱ" : "▶";
   elements.play.setAttribute("aria-label", playing ? "Pauzeren" : "Afspelen");
@@ -366,6 +382,16 @@ function renderPlayer(nextState) {
   elements.source.textContent = nextState.source || "—";
 }
 
+elements.coverImage.addEventListener("error", () => {
+  elements.coverImage.hidden = true;
+  elements.coverPlaceholder.hidden = false;
+});
+
+elements.coverImage.addEventListener("load", () => {
+  elements.coverImage.hidden = false;
+  elements.coverPlaceholder.hidden = true;
+});
+
 function render(nextState) {
   state = nextState;
   renderSelectors(nextState);

public/index.html

@@ -60,15 +60,18 @@
             <nav id="breadcrumb" class="breadcrumb" aria-label="Huidige map"></nav>
             <div id="library-empty" class="empty-state" hidden>
               <p>Geen bibliotheek geconfigureerd.</p>
-              <code>[library] paths=D:\Muziek</code>
+              <code>[libraries] muziek=D:\Muziek</code>
             </div>
             <ul id="library-entries" class="library-list" aria-label="Mapinhoud"></ul>
           </section>
 
           <section class="now-playing-pane panel">
             <div class="cover-art" aria-hidden="true">
-              <div class="record"></div>
-              <span>RKT</span>
+              <div id="cover-placeholder" class="cover-placeholder">
+                <div class="record"></div>
+                <span>RKT</span>
+              </div>
+              <img id="cover-image" alt="" hidden>
             </div>
             <div class="track-summary">
               <span class="panel-kicker">NU AAN HET SPELEN</span>

public/styles.css

@@ -398,6 +398,23 @@ input[type="range"] {
     #2b2b29;
 }
 
+.cover-placeholder {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+
+.cover-placeholder[hidden] {
+  display: none;
+}
+
+.cover-art img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .record {
   width: 72%;
   aspect-ratio: 1;
@@ -408,7 +425,7 @@ input[type="range"] {
   box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
 }
 
-.cover-art > span {
+.cover-placeholder > span {
   position: absolute;
   color: #111;
   font-size: 8px;