From 93c019c02ead9d88959fd3b2ee59e999cd028cf6 Mon Sep 17 00:00:00 2001
From: ltadeu6 <ltadeu6@protonmail.com>
Date: Sun, 7 Jun 2026 10:33:26 -0300
Subject: [PATCH] fix: use img tag for album art instead of CSS
 background-image

CSS background-image url() from http:// is blocked in WebEngine local
context even when fetch() works; <img src> does not have this restriction.

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

diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html
index 992c568..b230da5 100644
--- a/plugin/contents/ui/dancer.html
+++ b/plugin/contents/ui/dancer.html
@@ -165,12 +165,17 @@ html, body {
   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;
+  transition: opacity 0.6s ease, box-shadow 0.6s ease;
   pointer-events: none;
+  overflow: hidden;
+}
+.album-art img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 
 .music-ticker {
@@ -782,7 +787,7 @@ html, body {
   <div class="vu-meter" id="vuMeter"></div>
 
   <!-- Album art -->
-  <div id="albumArt" class="album-art" style="opacity:0"></div>
+  <div id="albumArt" class="album-art" style="opacity:0"><img id="albumArtImg" src="" alt=""></div>
 
   <!-- Music ticker -->
   <div class="music-ticker">
@@ -1062,7 +1067,7 @@ function fetchTheme() {
       if (d.rgb) applyTheme(d.rgb);
       if (d.art_url && d.art_url !== lastArtUrl) {
         lastArtUrl = d.art_url;
-        albumArtEl.style.backgroundImage = "url('http://127.0.0.1:8765/art')";
+        document.getElementById('albumArtImg').src = 'http://127.0.0.1:8765/art?' + Date.now();
       }
     })
     .catch(() => {});