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

feat: artist name in cyan, song title in white

Browse source
This commit is contained in:
ltadeu6 2026-06-07 12:24:50 -03:00
parent 9315655631
commit 9f9fa2a49e
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 16 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -211,6 +211,9 @@ html, body {
animation: musicScroll 18s linear infinite; animation: musicScroll 18s linear infinite;
} }
.music-text.short { animation: none; } .music-text.short { animation: none; }
#musicArtist { color: rgba(0, 200, 255, 0.85); }
#musicTitle { color: #ffffff; }
.music-sep { color: rgba(255,255,255,0.4); }
@keyframes musicScroll { @keyframes musicScroll {
0% { transform: translateX(100%); } 0% { transform: translateX(100%); }
@ -779,7 +782,9 @@ html, body {
<div class="music-ticker"> <div class="music-ticker">
<span class="music-icon">♫</span> <span class="music-icon">♫</span>
<div class="music-scroll-wrap"> <div class="music-scroll-wrap">
<span class="music-text short" id="musicText">— —</span> <span class="music-text short" id="musicText">
<span id="musicArtist"></span><span class="music-sep" id="musicSep"></span><span id="musicTitle"></span>
</span>
</div> </div>
</div> </div>
@ -1091,8 +1096,9 @@ setInterval(() => {
============================================================ */ ============================================================ */
function updateMusic(artist, title) { function updateMusic(artist, title) {
const el = document.getElementById('musicText'); const el = document.getElementById('musicText');
const text = (artist && title) ? `${artist} — ${title}` const artEl = document.getElementById('musicArtist');
: (title || artist || '— —'); const titleEl = document.getElementById('musicTitle');
const sepEl = document.getElementById('musicSep');
const playing = !!(artist || title); const playing = !!(artist || title);
isPlaying = playing; isPlaying = playing;
document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0'; document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0';
@ -1100,10 +1106,13 @@ function updateMusic(artist, title) {
albumArtEl.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; const key = artist + '|' + title;
el.textContent = text; if (el.dataset.key === key) return;
el.dataset.key = key;
artEl.textContent = artist || '';
sepEl.textContent = (artist && title) ? ' — ' : '';
titleEl.textContent = title || (!artist ? '— —' : '');
if (playing) pickSkeleton(); if (playing) pickSkeleton();
// 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);
} }