From 393b88c823def71da427945ead8be73e2ad88d4b Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Mon, 27 Apr 2026 01:59:12 +0200
Subject: [PATCH] fix(spotify): handle GraphQL embed structure, all artists,
 correct metadata
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- _spTrackItem now unwraps GraphQL-style {data:{__typename,...}} wrappers
- _spAllArtists joins all featured artists (e.g. "Kløn, Renzyx")
- _spArtwork adds albumOfTrack path used by newer Spotify embed
- fetchSpotifyEmbed: added entity.content.items / entity.data fallback paths
- Track download now uses Spotify metadata directly (album, art, year,
  trackNum) when provided — avoids iTunes returning wrong album for
  multi-artist tracks
- Playlist trackList also tries entity.content.items and entity.tracks.items
- Frontend: redesigned preview card with green top accent, bigger art,
  playlist checkbox styled as pill with Spotify color on check, album
  button shows actual album name

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 backend/novasonic-server.js | 80 +++++++++++++++++++++++++------------
 src/views.js                | 57 ++++++++++++++++----------
 2 files changed, 91 insertions(+), 46 deletions(-)

diff --git a/backend/novasonic-server.js b/backend/novasonic-server.js
index d04a4d1..d5cdc08 100644
--- a/backend/novasonic-server.js
+++ b/backend/novasonic-server.js
@@ -412,39 +412,59 @@ async function fetchSpotifyEmbed(type, id) {
   const m = html.match(/<script id="__NEXT_DATA__" type="application\/json">(.+?)<\/script>/s);
   if (!m) throw new Error('Spotify-Seite nicht parsebar — Struktur geändert?');
   const nd = JSON.parse(m[1]);
-  const entity = nd?.props?.pageProps?.state?.data?.entity
-               || nd?.props?.pageProps?.data?.entity
-               || nd?.props?.pageProps?.entity;
+  let entity = nd?.props?.pageProps?.state?.data?.entity
+             || nd?.props?.pageProps?.data?.entity
+             || nd?.props?.pageProps?.entity
+             || nd?.props?.pageProps?.state?.data;
   if (!entity) throw new Error('Keine Metadaten in Spotify-Embed gefunden');
+  // Unwrap GraphQL-style data wrapper: {data: {__typename, name, ...}}
+  if (entity.data && !entity.name && !entity.trackList) entity = entity.data;
   return entity;
 }
 
 function _spArtwork(entity) {
-  const sources = entity?.album?.coverArt?.sources || entity?.coverArt?.sources || [];
+  // Handle albumOfTrack (newer GraphQL embed format) + legacy album/coverArt paths
+  const sources = entity?.albumOfTrack?.coverArt?.sources
+               || entity?.album?.coverArt?.sources
+               || entity?.coverArt?.sources
+               || [];
   if (sources.length) return sources.sort((a, b) => (b.width || 0) - (a.width || 0))[0].url;
-  return entity?.album?.images?.[0]?.url || entity?.images?.[0]?.url || '';
+  return entity?.albumOfTrack?.images?.[0]?.url
+      || entity?.album?.images?.[0]?.url
+      || entity?.images?.[0]?.url
+      || '';
 }
 
-function _spArtistName(artistsArr) {
-  const a = artistsArr?.[0];
-  return a?.profile?.name || a?.name || '';
+function _spAllArtists(artistsRaw) {
+  if (!artistsRaw) return '';
+  // Handle both array format and GraphQL {items:[...]} format
+  const arr = Array.isArray(artistsRaw) ? artistsRaw : (artistsRaw.items || []);
+  return arr.map(a => a?.profile?.name || a?.name || '').filter(Boolean).join(', ');
+}
+
+function _spArtistName(artistsRaw) {
+  return _spAllArtists(artistsRaw);
 }
 
 function _spTrackItem(t, defaultAlbum, defaultArt, defaultAlbumArtist) {
-  const track = t?.track || t;
-  const artist = _spArtistName(track?.artists) || defaultAlbumArtist || '';
-  const art    = _spArtwork(track) || defaultArt || '';
-  const album  = track?.album?.name || defaultAlbum || '';
-  const date   = track?.album?.date?.isoString || track?.album?.release_date || '';
+  // Unwrap optional {track: ...} wrapper (playlist item format)
+  let raw = t?.track || t;
+  // Handle GraphQL-style {data: {__typename, name, artists, ...}}
+  const d = raw?.data || raw;
+  const artist = _spAllArtists(d?.artists) || defaultAlbumArtist || '';
+  const art    = _spArtwork(d) || defaultArt || '';
+  const albumObj = d?.albumOfTrack || d?.album || {};
+  const album  = albumObj?.name || defaultAlbum || '';
+  const date   = albumObj?.date?.isoString || albumObj?.release_date || '';
   return {
-    trackName:           track?.name || '',
-    artistName:          artist,
-    collectionName:      album,
-    artworkUrl100:       art,
-    releaseDate:         date,
-    trackNumber:         track?.trackNumber || track?.track_number,
-    trackExplicitness:   track?.contentRating?.label === 'EXPLICIT' || track?.explicit ? 'explicit' : 'notExplicit',
-    previewUrl:          track?.previewUrl || track?.preview_url || null,
+    trackName:         d?.name || '',
+    artistName:        artist,
+    collectionName:    album,
+    artworkUrl100:     art,
+    releaseDate:       date,
+    trackNumber:       d?.trackNumber || d?.track_number,
+    trackExplicitness: d?.contentRating?.label === 'EXPLICIT' || d?.explicit ? 'explicit' : 'notExplicit',
+    previewUrl:        d?.previewUrl || d?.preview_url || null,
   };
 }
 
@@ -485,7 +505,7 @@ app.post('/api/spotify/resolve', async (req, res) => {
     }
 
     if (type === 'playlist') {
-      const trackList = entity.trackList || [];
+      const trackList = entity.trackList || entity.content?.items || entity.tracks?.items || [];
       const owner = entity.ownerV2?.data?.name || entity.owner?.displayName || entity.owner?.display_name || '';
       return res.json({
         type: 'playlist',
@@ -520,14 +540,22 @@ app.post('/api/download', async (req, res) => {
     updateJob(jobId, { status: 'running', progress: 5, message: 'Gestartet…' });
     try {
       if (type === 'track') {
-        let meta = { album, year: undefined, trackNum: undefined, totalTracks: undefined, discNum: undefined, discTotal: undefined, genre: undefined };
-        if (!album) {
+        // Prefer Spotify metadata from tracks[0] when available (more accurate than iTunes lookup)
+        const sp = req.body.tracks?.[0] || {};
+        const spAlbum = sp.collectionName || album || '';
+        const spArt   = sp.artworkUrl100 || artworkUrl || '';
+        const spYear  = sp.releaseDate ? new Date(sp.releaseDate).getFullYear() : undefined;
+        let meta = { album: spAlbum, year: spYear, trackNum: sp.trackNumber || undefined,
+          artworkUrl: spArt, explicit: sp.trackExplicitness === 'explicit' || !!explicit };
+        if (!meta.album) {
           log(jobId, '📋 Suche Album-Metadaten von iTunes…');
           const extra = await lookupItunesTrackMeta(artist, title);
           if (extra.album) log(jobId, `📋 Album: "${extra.album}" (${extra.year || '?'})`);
-          meta = { ...extra, artworkUrl: artworkUrl || extra.artworkUrl || '' };
+          meta = { ...meta, ...extra, artworkUrl: spArt || extra.artworkUrl || '' };
+        } else {
+          log(jobId, `📋 Album aus Spotify: "${meta.album}"`);
         }
-        const result = await downloadTrack({ jobId, artist, title, artworkUrl: artworkUrl || meta.artworkUrl || '', explicit: !!explicit, ...meta });
+        const result = await downloadTrack({ jobId, artist, title, ...meta });
         if (result?.skipped) {
           updateJob(jobId, { status: 'done', progress: 100, message: 'Bereits vorhanden – übersprungen', skipped: true });
         } else {
diff --git a/src/views.js b/src/views.js
index 4b1f269..5a23d4f 100644
--- a/src/views.js
+++ b/src/views.js
@@ -977,47 +977,64 @@ function _renderSpotifyPreview(data) {
   let actionsHtml = '';
   if (data.type === 'track' && count > 0) {
     actionsHtml = `
-      <button class="btn-outline blue" style="font-size:13px;padding:9px 16px"
-        onclick="executeSpotifyDownload({type:'track',title:window._spotifyResolved.tracks[0].trackName,artist:window._spotifyResolved.tracks[0].artistName,artworkUrl:window._spotifyResolved.artworkUrl,tracks:window._spotifyResolved.tracks})">
-        ⬇ Track herunterladen
-      </button>
-      <button class="btn-outline" style="font-size:12px;padding:9px 14px;margin-left:6px"
-        onclick="openDlModal({artistName:window._spotifyResolved.tracks[0].artistName,trackName:window._spotifyResolved.tracks[0].collectionName||window._spotifyResolved.tracks[0].trackName,collectionName:window._spotifyResolved.tracks[0].collectionName||'',artworkUrl100:window._spotifyResolved.tracks[0].artworkUrl100||window._spotifyResolved.artworkUrl||'',isAlbum:true})">
-        💿 Album
-      </button>`;
+      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:2px">
+        <button class="btn-outline blue" style="font-size:13px;padding:9px 18px;font-weight:600"
+          onclick="executeSpotifyDownload({type:'track',title:window._spotifyResolved.tracks[0].trackName,artist:window._spotifyResolved.tracks[0].artistName,artworkUrl:window._spotifyResolved.artworkUrl,tracks:window._spotifyResolved.tracks})">
+          ⬇ Track laden
+        </button>
+        ${data.tracks[0]?.collectionName ? `<button class="btn-outline" style="font-size:12px;padding:9px 14px"
+          onclick="openDlModal({artistName:window._spotifyResolved.tracks[0].artistName,trackName:window._spotifyResolved.tracks[0].collectionName,collectionName:window._spotifyResolved.tracks[0].collectionName,artworkUrl100:window._spotifyResolved.tracks[0].artworkUrl100||window._spotifyResolved.artworkUrl||'',isAlbum:true})">
+          💿 ${esc(data.tracks[0].collectionName)}
+        </button>` : ''}
+      </div>`;
   } else if (data.type === 'album') {
     actionsHtml = `
-      <button class="btn-outline blue" style="font-size:13px;padding:9px 16px"
+      <button class="btn-outline blue" style="font-size:13px;padding:9px 18px;font-weight:600;margin-top:2px"
         onclick="executeSpotifyDownload({type:'playlist',title:window._spotifyResolved.name,artist:window._spotifyResolved.artist,artworkUrl:window._spotifyResolved.artworkUrl,tracks:window._spotifyResolved.tracks})">
         ⬇ Album laden (${count} Tracks)
       </button>`;
   } else if (data.type === 'playlist') {
     actionsHtml = `
-      <div style="margin-top:2px">
-        <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;margin-bottom:8px">
-          <input type="checkbox" id="${plCbId}" style="width:15px;height:15px;accent-color:#1DB954" onchange="document.getElementById('${plCbId}_wrap').style.display=this.checked?'':'none'">
+      <div style="margin-top:6px">
+        <label id="${plCbId}_label" style="display:inline-flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;margin-bottom:10px;background:var(--surface2);border:1px solid var(--border2);border-radius:20px;padding:6px 12px;transition:border-color .2s" onclick="void(0)">
+          <input type="checkbox" id="${plCbId}" style="width:14px;height:14px;accent-color:#1DB954;cursor:pointer" onchange="
+            document.getElementById('${plCbId}_wrap').style.display=this.checked?'':'none';
+            document.getElementById('${plCbId}_label').style.borderColor=this.checked?'#1DB954':'';
+            document.getElementById('${plCbId}_label').style.color=this.checked?'#1DB954':'';
+          ">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
           Als Navidrome-Playlist speichern
         </label>
         <div id="${plCbId}_wrap" style="display:none;margin-bottom:10px">
           <input type="text" id="${plNmId}" value="${esc(data.name)}" placeholder="Playlist-Name…"
             style="background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:8px 12px;font-size:13px;width:100%;box-sizing:border-box;color:var(--text);outline:none">
         </div>
-        <button class="btn-outline blue" style="font-size:13px;padding:9px 16px"
+        <button class="btn-outline blue" style="font-size:13px;padding:9px 18px;font-weight:600"
           onclick="spotifyDlAll('${plCbId}','${plNmId}')">
-          ⬇ Alle ${count} Tracks herunterladen
+          ⬇ Alle ${count} Tracks laden
         </button>
       </div>`;
   }
 
+  const artSize = data.type === 'playlist' ? '80px' : '110px';
+  const artRadius = data.type === 'playlist' ? '8px' : '10px';
+  const artHtml = art
+    ? `<img src="${art}" style="width:100%;height:100%;object-fit:cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">`
+    : '';
+
   inner.innerHTML = `
-    <div style="display:flex;gap:16px;align-items:flex-start;background:var(--surface);border-radius:14px;padding:16px;margin-bottom:4px;border:1px solid var(--border)">
-      <div style="width:90px;height:90px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--surface2)">
-        ${art ? `<img src="${art}" style="width:100%;height:100%;object-fit:cover" onerror="this.parentNode.innerHTML='<div style=\\'width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px\\'>🎵</div>'">` : '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px">🎵</div>'}
+    <div style="display:flex;gap:16px;align-items:flex-start;background:var(--surface);border-radius:14px;padding:18px 16px;margin-bottom:4px;border:1px solid var(--border);border-top:3px solid #1DB954">
+      <div style="width:${artSize};height:${artSize};border-radius:${artRadius};overflow:hidden;flex-shrink:0;background:var(--surface2);position:relative">
+        ${artHtml}
+        <div style="width:100%;height:100%;display:${art?'none':'flex'};align-items:center;justify-content:center;font-size:32px;position:absolute;top:0;left:0">🎵</div>
       </div>
       <div style="flex:1;min-width:0">
-        <div style="font-size:11px;font-weight:600;color:#1DB954;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px">${typeLabel}</div>
-        <div style="font-size:17px;font-weight:700;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(data.name)}</div>
-        <div style="font-size:13px;color:var(--text2);margin-bottom:12px">${esc(data.artist)}${count > 1 ? ` · ${count} Tracks` : ''}</div>
+        <div style="font-size:10px;font-weight:700;color:#1DB954;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px;display:flex;align-items:center;gap:5px">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="#1DB954"><circle cx="12" cy="12" r="10"/><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527M9.5 14.473c1.5-.973 3.5-.973 5 .027M7 9c3-1.5 6.5-1 9 1" stroke="#000" stroke-width="2" fill="none"/></svg>
+          ${typeLabel}
+        </div>
+        <div style="font-size:18px;font-weight:700;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2">${esc(data.name)}</div>
+        <div style="font-size:13px;color:var(--text2);margin-bottom:10px">${esc(data.artist)}${count > 1 ? `<span style="color:var(--text3)"> · ${count} Tracks</span>` : ''}</div>
         ${actionsHtml}
       </div>
     </div>`;