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

Show character and VU bars only when music is playing

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ltadeu6 2026-06-07 09:23:17 -03:00
parent cfbc8ef5e1
commit b6eb089c2c
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 9 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -102,13 +102,15 @@ html, body {
============================================================ */ ============================================================ */
.vu-meter { .vu-meter {
position: absolute; position: absolute;
bottom: 10%; bottom: 4%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: 4px; gap: 4px;
pointer-events: none; pointer-events: none;
opacity: 0;
transition: opacity 0.8s;
} }
.vu-bar { .vu-bar {
width: 9px; width: 9px;
@ -210,6 +212,8 @@ html, body {
left: 50%; left: 50%;
bottom: 32%; bottom: 32%;
transform: translateX(-50%); transform: translateX(-50%);
opacity: 0;
transition: opacity 0.8s;
} }
.skeleton-gif { .skeleton-gif {
@ -931,9 +935,12 @@ function updateMusic(artist, title) {
const el = document.getElementById('musicText'); const el = document.getElementById('musicText');
const text = (artist && title) ? `${artist} — ${title}` const text = (artist && title) ? `${artist} — ${title}`
: (title || artist || '— —'); : (title || artist || '— —');
const playing = !!(artist || title);
document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0';
document.querySelector('.vu-meter').style.opacity = playing ? '1' : '0';
if (el.textContent === text) return; if (el.textContent === text) return;
el.textContent = text; el.textContent = text;
pickSkeleton(); if (playing) pickSkeleton();
// scroll only if text is long // scroll only if text is long
const wrap = el.parentElement; const wrap = el.parentElement;
el.classList.toggle('short', el.scrollWidth <= wrap.clientWidth + 10); el.classList.toggle('short', el.scrollWidth <= wrap.clientWidth + 10);