fix: eliminate flash on skip, refresh home on nav

- renderQueue: in-place active-class update when queue unchanged — no DOM rebuild, no image reload
- updatePlayerUI: update img.src directly instead of replacing innerHTML
- _syncNpDirect: same img.src update for now-playing cover
- navigate('home'): always reloads home data so new albums appear without restart

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-28 09:21:12 +02:00
1 parent f210d7350e
commit e75d90e165
3 files changed
+24 -5

No files matched your search

+1 -2
View File
@@ -11,7 +11,7 @@ import {
npToggleStar, updateMediaSession,
} from './player.js';
import {
navigate, _navGoBack, _navLoad, loadHomeData, onLocalSearch, onMobileSearch,
navigate, _navGoBack, _navLoad, onLocalSearch, onMobileSearch,
onGlobalSearch, s_goArtist, s_goAlbum, playerBarGoArtist, playerBarGoAlbum,
searchSimilarArtist, searchAndPreview, loadItunesAlbum, expandArtistBio,
loadRandom,
@@ -81,7 +81,6 @@ async function startApp() {
} else {
navigate('home');
}
loadHomeData();
initNotifBell();
_restoreLastPlayed();
if(localStorage.getItem('ns_radio')==='1') { S.radioMode=true; _applyRadioBtn(); }
+22 -3
View File
@@ -37,7 +37,9 @@ export function updatePlayerUI(s) {
document.getElementById('player-album-name').textContent = s.album || '';
const art = document.getElementById('player-art');
const cv = coverUrl(s.coverArt, 100);
art.innerHTML = cv ? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art">♪</div>';
const existingImg = art.querySelector('img');
if (cv && existingImg) existingImg.src = cv;
else art.innerHTML = cv ? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art">♪</div>';
updateStarBtn();
document.title = `${s.title} — NovaSonic`;
updateMediaSession(s);
@@ -60,7 +62,11 @@ export function _syncNpDirect(s) {
const cv = coverUrl(s.coverArt, 400);
const cover = document.getElementById('np-cover');
const bg = document.getElementById('np-bg');
if(cover) cover.innerHTML = cv ? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art">♪</div>';
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';
const t = document.getElementById('np-title'); if(t) t.textContent = s.title || '—';
const an = document.getElementById('np-artist-name');
@@ -285,10 +291,23 @@ export function npToggleStar() {
}
// ─── QUEUE PANEL ───
let _renderedQueueKey = '';
export function renderQueue() {
const el = document.getElementById('queue-list');
if (!el) return;
const queueKey = S.queue.map(s => s.id).join(',');
if (queueKey === _renderedQueueKey && el.children.length === S.queue.length) {
// Queue unchanged — only update active class in-place (no image reload)
el.querySelectorAll('.queue-item').forEach((item, i) => item.classList.toggle('active', i === S.qIdx));
el.querySelector('.active')?.scrollIntoView({ block: 'nearest' });
return;
}
_renderedQueueKey = queueKey;
el.innerHTML = '';
if(!S.queue.length) { el.innerHTML='<div class="empty-state" style="padding:40px 16px"><div class="icon">🎵</div><p>Leer</p></div>'; return; }
if (!S.queue.length) { el.innerHTML = '<div class="empty-state" style="padding:40px 16px"><div class="icon">🎵</div><p>Leer</p></div>'; return; }
S.queue.forEach((s, i) => {
const item = document.createElement('div');
item.className = 'queue-item' + (i === S.qIdx ? ' active' : '');
+1
View File
@@ -36,6 +36,7 @@ export function navigate(page, data=null) {
if(['discover','new-releases','recommendations','random','spotify-importer'].includes(page)) switchNavMode('discover');
else if(['home','artists','albums','starred','playlists'].includes(page)) switchNavMode('library');
if(page==='home') loadHomeData();
if(page==='artists' && !document.getElementById('artists-grid').children.length) loadArtists();
if(page==='albums' && !document.getElementById('albums-grid').children.length) loadAlbums();
if(page==='starred') loadStarred();