feat: artist name in cyan, song title in white
This commit is contained in:
parent
9315655631
commit
9f9fa2a49e
1 changed files with 16 additions and 7 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue