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:
1 parent
f210d7350e
commit
e75d90e165
3 files changed
+24
-5
No files matched your search
+1
-2
@@ -11,7 +11,7 @@ import {
|
|||||||
npToggleStar, updateMediaSession,
|
npToggleStar, updateMediaSession,
|
||||||
} from './player.js';
|
} from './player.js';
|
||||||
import {
|
import {
|
||||||
navigate, _navGoBack, _navLoad, loadHomeData, onLocalSearch, onMobileSearch,
|
navigate, _navGoBack, _navLoad, onLocalSearch, onMobileSearch,
|
||||||
onGlobalSearch, s_goArtist, s_goAlbum, playerBarGoArtist, playerBarGoAlbum,
|
onGlobalSearch, s_goArtist, s_goAlbum, playerBarGoArtist, playerBarGoAlbum,
|
||||||
searchSimilarArtist, searchAndPreview, loadItunesAlbum, expandArtistBio,
|
searchSimilarArtist, searchAndPreview, loadItunesAlbum, expandArtistBio,
|
||||||
loadRandom,
|
loadRandom,
|
||||||
@@ -81,7 +81,6 @@ async function startApp() {
|
|||||||
} else {
|
} else {
|
||||||
navigate('home');
|
navigate('home');
|
||||||
}
|
}
|
||||||
loadHomeData();
|
|
||||||
initNotifBell();
|
initNotifBell();
|
||||||
_restoreLastPlayed();
|
_restoreLastPlayed();
|
||||||
if(localStorage.getItem('ns_radio')==='1') { S.radioMode=true; _applyRadioBtn(); }
|
if(localStorage.getItem('ns_radio')==='1') { S.radioMode=true; _applyRadioBtn(); }
|
||||||
|
|||||||
+22
-3
@@ -37,7 +37,9 @@ export function updatePlayerUI(s) {
|
|||||||
document.getElementById('player-album-name').textContent = s.album || '';
|
document.getElementById('player-album-name').textContent = s.album || '';
|
||||||
const art = document.getElementById('player-art');
|
const art = document.getElementById('player-art');
|
||||||
const cv = coverUrl(s.coverArt, 100);
|
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();
|
updateStarBtn();
|
||||||
document.title = `${s.title} — NovaSonic`;
|
document.title = `${s.title} — NovaSonic`;
|
||||||
updateMediaSession(s);
|
updateMediaSession(s);
|
||||||
@@ -60,7 +62,11 @@ export function _syncNpDirect(s) {
|
|||||||
const cv = coverUrl(s.coverArt, 400);
|
const cv = coverUrl(s.coverArt, 400);
|
||||||
const cover = document.getElementById('np-cover');
|
const cover = document.getElementById('np-cover');
|
||||||
const bg = document.getElementById('np-bg');
|
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';
|
if(bg) bg.style.backgroundImage = cv ? `url('${cv}')` : 'none';
|
||||||
const t = document.getElementById('np-title'); if(t) t.textContent = s.title || '—';
|
const t = document.getElementById('np-title'); if(t) t.textContent = s.title || '—';
|
||||||
const an = document.getElementById('np-artist-name');
|
const an = document.getElementById('np-artist-name');
|
||||||
@@ -285,10 +291,23 @@ export function npToggleStar() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ─── QUEUE PANEL ───
|
// ─── QUEUE PANEL ───
|
||||||
|
let _renderedQueueKey = '';
|
||||||
|
|
||||||
export function renderQueue() {
|
export function renderQueue() {
|
||||||
const el = document.getElementById('queue-list');
|
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 = '';
|
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) => {
|
S.queue.forEach((s, i) => {
|
||||||
const item = document.createElement('div');
|
const item = document.createElement('div');
|
||||||
item.className = 'queue-item' + (i === S.qIdx ? ' active' : '');
|
item.className = 'queue-item' + (i === S.qIdx ? ' active' : '');
|
||||||
|
|||||||
@@ -36,6 +36,7 @@ export function navigate(page, data=null) {
|
|||||||
if(['discover','new-releases','recommendations','random','spotify-importer'].includes(page)) switchNavMode('discover');
|
if(['discover','new-releases','recommendations','random','spotify-importer'].includes(page)) switchNavMode('discover');
|
||||||
else if(['home','artists','albums','starred','playlists'].includes(page)) switchNavMode('library');
|
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==='artists' && !document.getElementById('artists-grid').children.length) loadArtists();
|
||||||
if(page==='albums' && !document.getElementById('albums-grid').children.length) loadAlbums();
|
if(page==='albums' && !document.getElementById('albums-grid').children.length) loadAlbums();
|
||||||
if(page==='starred') loadStarred();
|
if(page==='starred') loadStarred();
|
||||||
|
|||||||
Reference in new issue
Block a user