feat: artist name in cyan, song title in white

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

View file

@ -211,6 +211,9 @@ html, body {
animation: musicScroll 18s linear infinite;
}
.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 {
0% { transform: translateX(100%); }
@ -779,7 +782,9 @@ html, body {
<div class="music-ticker">
<span class="music-icon"></span>
<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>
@ -1090,9 +1095,10 @@ setInterval(() => {
MUSIC INFO (called by QML via runJavaScript)
============================================================ */
function updateMusic(artist, title) {
const el = document.getElementById('musicText');
const text = (artist && title) ? `${artist} — ${title}`
: (title || artist || '— —');
const el = document.getElementById('musicText');
const artEl = document.getElementById('musicArtist');
const titleEl = document.getElementById('musicTitle');
const sepEl = document.getElementById('musicSep');
const playing = !!(artist || title);
isPlaying = playing;
document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0';
@ -1100,10 +1106,13 @@ function updateMusic(artist, title) {
albumArtEl.style.opacity = playing ? '1' : '0';
if (!playing) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; });
if (playing) fetchTheme();
if (el.textContent === text) return;
el.textContent = text;
const key = artist + '|' + title;
if (el.dataset.key === key) return;
el.dataset.key = key;
artEl.textContent = artist || '';
sepEl.textContent = (artist && title) ? ' — ' : '';
titleEl.textContent = title || (!artist ? '— —' : '');
if (playing) pickSkeleton();
// scroll only if text is long
const wrap = el.parentElement;
el.classList.toggle('short', el.scrollWidth <= wrap.clientWidth + 10);
}