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:
parent
cfbc8ef5e1
commit
b6eb089c2c
1 changed files with 9 additions and 2 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue