ltadeu6/skeledance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: show album art in upper right corner

Browse source 
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>
This commit is contained in:
ltadeu6 2026-06-07 10:29:08 -03:00
parent fd4ba05d1e
commit 466bb1245a
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 27 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

28
plugin/contents/ui/dancer.html
View file

@ -159,6 +159,20 @@ html, body {
/* ============================================================ /* ============================================================
MUSIC TICKER 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 { .music-ticker {
position: absolute; position: absolute;
top: 4%; top: 4%;
@ -767,6 +781,9 @@ html, body {
<!-- VU Meter --> <!-- VU Meter -->
<div class="vu-meter" id="vuMeter"></div> <div class="vu-meter" id="vuMeter"></div>
<!-- Album art -->
<div id="albumArt" class="album-art" style="opacity:0"></div>
<!-- Music ticker --> <!-- Music ticker -->
<div class="music-ticker"> <div class="music-ticker">
<span class="music-icon">♫</span> <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)`; `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() { function fetchTheme() {
fetch('http://127.0.0.1:8765/current') fetch('http://127.0.0.1:8765/current')
.then(r => r.json()) .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(() => {}); .catch(() => {});
} }
@ -1092,6 +1117,7 @@ function updateMusic(artist, title) {
isPlaying = playing; isPlaying = playing;
document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0'; document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0';
document.querySelector('.music-ticker').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) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; });
if (playing) fetchTheme(); if (playing) fetchTheme();
if (el.textContent === text) return; if (el.textContent === text) return;