From e029a8f900d48da0da909e2b32ac0450a1369070 Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Tue, 28 Apr 2026 00:39:23 +0200
Subject: [PATCH] fix: split multi-artists in player bar, each name navigates
 to own artist profile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html    |  2 +-
 src/player.js | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index fc571e2..c20f4cb 100644
--- a/index.html
+++ b/index.html
@@ -378,7 +378,7 @@
           </button>
         </div>
         <div class="player-artist" id="player-artist">
-          <span id="player-artist-name" onclick="playerBarGoArtist()" style="cursor:pointer" title="Zum Künstler">—</span><span id="player-album-sep" style="color:var(--text3)"> · </span><span id="player-album-name" onclick="playerBarGoAlbum()" style="cursor:pointer" title="Zum Album"></span>
+          <span id="player-artist-name">—</span><span id="player-album-sep" style="color:var(--text3)"> · </span><span id="player-album-name" onclick="playerBarGoAlbum()" style="cursor:pointer" title="Zum Album"></span>
         </div>
         <div class="player-status-row">
           <span class="status-badge badge-shuffle" id="badge-shuffle">🔀 Shuffle</span>
diff --git a/src/player.js b/src/player.js
index 2e6d928..261ee57 100644
--- a/src/player.js
+++ b/src/player.js
@@ -26,7 +26,13 @@ export function playCurrent() {
 
 export function updatePlayerUI(s) {
   document.getElementById('player-title').textContent = s.title;
-  document.getElementById('player-artist-name').textContent = s.artist || '—';
+  const artistParts = (s.artist || '').split(/\s*(?:\/|•|,)\s*/).filter(Boolean);
+  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>`;
+      }).join('<span style="color:var(--text3)"> / </span>')
+    : '—';
   document.getElementById('player-album-sep').style.display = s.album ? '' : 'none';
   document.getElementById('player-album-name').textContent = s.album || '';
   const art = document.getElementById('player-art');
@@ -345,7 +351,13 @@ export function _restoreLastPlayed() {
     const s = S.queue[S.qIdx];
     if(!s) return;
     document.getElementById('player-title').textContent = s.title || '—';
-    document.getElementById('player-artist-name').textContent = s.artist || '—';
+    const artistParts = (s.artist || '').split(/\s*(?:\/|•|,)\s*/).filter(Boolean);
+    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>`;
+        }).join('<span style="color:var(--text3)"> / </span>')
+      : '—';
     document.getElementById('player-album-sep').style.display = s.album ? '' : 'none';
     document.getElementById('player-album-name').textContent = s.album || '';
     const art = document.getElementById('player-art');