From b6eb089c2c760900fd38ea17985f68482bfcd931 Mon Sep 17 00:00:00 2001
From: ltadeu6 <ltadeu6@protonmail.com>
Date: Sun, 7 Jun 2026 09:23:17 -0300
Subject: [PATCH] Show character and VU bars only when music is playing

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

diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html
index 3ead22e..371ff5b 100644
--- a/plugin/contents/ui/dancer.html
+++ b/plugin/contents/ui/dancer.html
@@ -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);