Show character and VU bars only when music is playing

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

View file

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