Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

fix(spotify): handle GraphQL embed structure, all artists, correct metadata

Browse Source 
- _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>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-27 01:59:12 +02:00
1 parent 487dbf12b4
commit 393b88c823
2 files changed
+84 -39
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

backend/novasonic-server.js
+49 -21
View File
@@ -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
let entity = nd?.props?.pageProps?.state?.data?.entity
|| nd?.props?.pageProps?.data?.entity
|| nd?.props?.pageProps?.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 || '',
trackName: d?.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,
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 {
src/views.js
+35 -18
View File
@@ -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"
<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 herunterladen
⬇ Track laden
</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>`;
${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>`;