From 466bb1245a1c27d60ae84a57e97e0b422b5f1aaa Mon Sep 17 00:00:00 2001
From: ltadeu6 <ltadeu6@protonmail.com>
Date: Sun, 7 Jun 2026 10:29:08 -0300
Subject: [PATCH] feat: show album art in upper right corner

Fetches art_url from music-light /current and displays it as a
background-image div with themed box-shadow. Fades in/out with music.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 plugin/contents/ui/dancer.html | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html
index 0d9faff..35aab65 100644
--- a/plugin/contents/ui/dancer.html
+++ b/plugin/contents/ui/dancer.html
@@ -159,6 +159,20 @@ html, body {
 /* ============================================================
    MUSIC TICKER
    ============================================================ */
+.album-art {
+  position: absolute;
+  top: 4%;
+  right: 2%;
+  width: 110px;
+  height: 110px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 6px;
+  box-shadow: 0 0 18px rgba(0,0,0,0.8), 0 0 8px var(--theme-color, rgba(0,220,255,0.5));
+  transition: opacity 0.6s ease, background-image 0.4s ease, box-shadow 0.6s ease;
+  pointer-events: none;
+}
+
 .music-ticker {
   position: absolute;
   top: 4%;
@@ -767,6 +781,9 @@ html, body {
   <!-- VU Meter -->
   <div class="vu-meter" id="vuMeter"></div>
 
+  <!-- Album art -->
+  <div id="albumArt" class="album-art" style="opacity:0"></div>
+
   <!-- Music ticker -->
   <div class="music-ticker">
     <span class="music-icon">♫</span>
@@ -1034,10 +1051,18 @@ function applyTheme(rgb) {
     `0 0 30px rgba(${r},${g},${b},0.9), 0 0 90px rgba(${r},${g},${b},0.3)`;
 }
 
+const albumArtEl = document.getElementById('albumArt');
+
 function fetchTheme() {
   fetch('http://127.0.0.1:8765/current')
     .then(r => r.json())
-    .then(d => { if (d.rgb) applyTheme(d.rgb); })
+    .then(d => {
+      if (d.rgb) applyTheme(d.rgb);
+      if (d.art_url) {
+        albumArtEl.style.backgroundImage = `url('${d.art_url}')`;
+        albumArtEl.style.opacity = '1';
+      }
+    })
     .catch(() => {});
 }
 
@@ -1092,6 +1117,7 @@ function updateMusic(artist, title) {
   isPlaying = playing;
   document.querySelector('.robot-wrap').style.opacity   = playing ? '1' : '0';
   document.querySelector('.music-ticker').style.opacity = playing ? '1' : '0';
+  albumArtEl.style.opacity = playing ? '1' : '0';
   if (!playing) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; });
   if (playing) fetchTheme();
   if (el.textContent === text) return;