fix: crossfade now-playing background instead of hard flash
Two-layer opacity crossfade replaces the broken background-image transition. New image loads on the hidden layer, then both opacity values swap smoothly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
e75d90e165
commit
97a4cc756d
3 files changed
+17
-5
No files matched your search
+13
-2
@@ -57,17 +57,28 @@ export function updatePlayerUI(s) {
|
||||
_syncNpDirect(s);
|
||||
}
|
||||
|
||||
let _npBgCurr = 'a';
|
||||
function _crossfadeNpBg(cv) {
|
||||
const currEl = document.getElementById(`np-bg-${_npBgCurr}`);
|
||||
const nextId = _npBgCurr === 'a' ? 'b' : 'a';
|
||||
const nextEl = document.getElementById(`np-bg-${nextId}`);
|
||||
if (!currEl || !nextEl) return;
|
||||
nextEl.style.backgroundImage = cv ? `url('${cv}')` : 'none';
|
||||
nextEl.style.opacity = '1';
|
||||
currEl.style.opacity = '0';
|
||||
_npBgCurr = nextId;
|
||||
}
|
||||
|
||||
export function _syncNpDirect(s) {
|
||||
if(!S.npOpen || !s) return;
|
||||
const cv = coverUrl(s.coverArt, 400);
|
||||
const cover = document.getElementById('np-cover');
|
||||
const bg = document.getElementById('np-bg');
|
||||
if (cover) {
|
||||
const existingImg = cover.querySelector('img');
|
||||
if (cv && existingImg) existingImg.src = cv;
|
||||
else if (cover) cover.innerHTML = cv ? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art">♪</div>';
|
||||
}
|
||||
if(bg) bg.style.backgroundImage = cv ? `url('${cv}')` : 'none';
|
||||
_crossfadeNpBg(cv);
|
||||
const t = document.getElementById('np-title'); if(t) t.textContent = s.title || '—';
|
||||
const an = document.getElementById('np-artist-name');
|
||||
if(an) {
|
||||
|
||||
Reference in new issue
Block a user