From a31953d17ed810d1c08a630345002a416b846f40 Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Tue, 28 Apr 2026 00:45:10 +0200
Subject: [PATCH] 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>
---
 index.html    |  2 +-
 src/player.js | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index c20f4cb..85468fb 100644
--- a/index.html
+++ b/index.html
@@ -634,7 +634,7 @@
       <div class="np-text">
         <div class="np-title" id="np-title">Kein Titel</div>
         <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>
       <button class="np-star" id="np-star-btn" onclick="npToggleStar()">
diff --git a/src/player.js b/src/player.js
index 261ee57..ba4860d 100644
--- a/src/player.js
+++ b/src/player.js
@@ -30,7 +30,7 @@ export function updatePlayerUI(s) {
   document.getElementById('player-artist-name').innerHTML = artistParts.length
     ? artistParts.map((name, i) => {
         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>')
     : '—';
   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(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'); 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 aln = document.getElementById('np-album-name'); if(aln) aln.textContent = s.album || '';
   syncNpStar();
@@ -355,7 +364,7 @@ export function _restoreLastPlayed() {
     document.getElementById('player-artist-name').innerHTML = artistParts.length
       ? artistParts.map((name, i) => {
           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>')
       : '—';
     document.getElementById('player-album-sep').style.display = s.album ? '' : 'none';