fix: split multi-artists in player bar and now playing overlay, fix broken onclick
- player bar: fix onclick broken by JSON.stringify producing double-quoted strings inside double-quoted HTML attribute; use single-quoted JS args instead - now playing overlay: np-artist-name now splits artists and each is individually clickable (closes NP then navigates to artist) - remove wrapper onclick from both np-artist-name and player-artist-name in HTML Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
8bb2b0d181
commit
a31953d17e
2 files changed
+13
-4
No files matched your search
+1
-1
@@ -634,7 +634,7 @@
|
|||||||
<div class="np-text">
|
<div class="np-text">
|
||||||
<div class="np-title" id="np-title">Kein Titel</div>
|
<div class="np-title" id="np-title">Kein Titel</div>
|
||||||
<div class="np-artist" id="np-artist">
|
<div class="np-artist" id="np-artist">
|
||||||
<span id="np-artist-name" onclick="npGoArtist()" style="cursor:pointer">—</span><span id="np-album-sep" style="opacity:.5"> · </span><span id="np-album-name" onclick="npGoAlbum()" style="cursor:pointer;opacity:.8">—</span>
|
<span id="np-artist-name">—</span><span id="np-album-sep" style="opacity:.5"> · </span><span id="np-album-name" onclick="npGoAlbum()" style="cursor:pointer;opacity:.8">—</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="np-star" id="np-star-btn" onclick="npToggleStar()">
|
<button class="np-star" id="np-star-btn" onclick="npToggleStar()">
|
||||||
|
|||||||
+12
-3
@@ -30,7 +30,7 @@ export function updatePlayerUI(s) {
|
|||||||
document.getElementById('player-artist-name').innerHTML = artistParts.length
|
document.getElementById('player-artist-name').innerHTML = artistParts.length
|
||||||
? artistParts.map((name, i) => {
|
? artistParts.map((name, i) => {
|
||||||
const aid = i === 0 ? (s.artistId || '') : '';
|
const aid = i === 0 ? (s.artistId || '') : '';
|
||||||
return `<span style="cursor:pointer" onclick="s_goArtist(event,${JSON.stringify(esc(name))},${JSON.stringify(aid)})">${esc(name)}</span>`;
|
return `<span style="cursor:pointer" onclick="s_goArtist(event,'${esc(name)}','${aid}')">${esc(name)}</span>`;
|
||||||
}).join('<span style="color:var(--text3)"> / </span>')
|
}).join('<span style="color:var(--text3)"> / </span>')
|
||||||
: '—';
|
: '—';
|
||||||
document.getElementById('player-album-sep').style.display = s.album ? '' : 'none';
|
document.getElementById('player-album-sep').style.display = s.album ? '' : 'none';
|
||||||
@@ -63,7 +63,16 @@ export function _syncNpDirect(s) {
|
|||||||
if(cover) cover.innerHTML = cv ? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">` : '<div class="no-art">♪</div>';
|
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'); if(an) an.textContent = s.artist || '—';
|
const an = document.getElementById('np-artist-name');
|
||||||
|
if(an) {
|
||||||
|
const parts = (s.artist || '').split(/\s*(?:\/|•|,)\s*/).filter(Boolean);
|
||||||
|
an.innerHTML = parts.length
|
||||||
|
? parts.map((name, i) => {
|
||||||
|
const aid = i === 0 ? (s.artistId || '') : '';
|
||||||
|
return `<span style="cursor:pointer" onclick="closeNowPlaying();s_goArtist(event,'${esc(name)}','${aid}')">${esc(name)}</span>`;
|
||||||
|
}).join('<span style="opacity:.5"> / </span>')
|
||||||
|
: '—';
|
||||||
|
}
|
||||||
const asep = document.getElementById('np-album-sep'); if(asep) asep.style.display = s.album ? '' : 'none';
|
const asep = document.getElementById('np-album-sep'); if(asep) asep.style.display = s.album ? '' : 'none';
|
||||||
const aln = document.getElementById('np-album-name'); if(aln) aln.textContent = s.album || '';
|
const aln = document.getElementById('np-album-name'); if(aln) aln.textContent = s.album || '';
|
||||||
syncNpStar();
|
syncNpStar();
|
||||||
@@ -355,7 +364,7 @@ export function _restoreLastPlayed() {
|
|||||||
document.getElementById('player-artist-name').innerHTML = artistParts.length
|
document.getElementById('player-artist-name').innerHTML = artistParts.length
|
||||||
? artistParts.map((name, i) => {
|
? artistParts.map((name, i) => {
|
||||||
const aid = i === 0 ? (s.artistId || '') : '';
|
const aid = i === 0 ? (s.artistId || '') : '';
|
||||||
return `<span style="cursor:pointer" onclick="s_goArtist(event,${JSON.stringify(esc(name))},${JSON.stringify(aid)})">${esc(name)}</span>`;
|
return `<span style="cursor:pointer" onclick="s_goArtist(event,'${esc(name)}','${aid}')">${esc(name)}</span>`;
|
||||||
}).join('<span style="color:var(--text3)"> / </span>')
|
}).join('<span style="color:var(--text3)"> / </span>')
|
||||||
: '—';
|
: '—';
|
||||||
document.getElementById('player-album-sep').style.display = s.album ? '' : 'none';
|
document.getElementById('player-album-sep').style.display = s.album ? '' : 'none';
|
||||||
|
|||||||
Reference in new issue
Block a user