+
${esc(t.trackName||t.collectionName||'—')}
+
${esc(t.artistName||'—')} · ${esc(t.collectionName||'')} ${t.releaseDate?'· '+new Date(t.releaseDate).getFullYear():''}
+
Über
+ ${esc(short)}${bio.length>400
+ ? ` `
+ : ''}
`;
+ }
+ }
+
+ const similar = info?.similarArtist || [];
+ if(similar.length) {
+ const simEl = document.getElementById('artist-similar-section');
+ if(simEl) {
+ simEl.innerHTML = `Ähnliche Künstler
+ ${similar.map(a =>
+ `
+ ${esc(a.name)}
+ `).join('')}
+
`;
+ }
+ }
+
+ const topSongs = topRes.status==='fulfilled' ? (topRes.value.topSongs?.song||[]) : [];
+ if(topSongs.length) {
+ const tsEl = document.getElementById('artist-topsongs-section');
+ if(tsEl) {
+ tsEl.innerHTML = `Top Songs
`;
+ const list = document.createElement('div');
+ list.style.marginBottom = '20px';
+ topSongs.forEach((s, i) => {
+ const cv = coverUrl(s.coverArt, 60);
+ const row = document.createElement('div');
+ row.className = 'topsong-item';
+ row.innerHTML = `${i+1}
+ ${cv ? `
` : '
🎵
'}
${esc(s.title)}
${esc(s.album||'')}
${s.playCount ? s.playCount.toLocaleString() : '—'}
`;
+ row.onclick = () => playQueue(topSongs, i);
+ row.addEventListener('contextmenu', e => { e.preventDefault(); showCtxMenu(e, s, topSongs, i); });
+ list.appendChild(row);
+ });
+ tsEl.appendChild(list);
+ }
+ }
+}
+
+// ─── ALBUM DETAIL ───
+export async function loadAlbumDetail(album) {
+ document.getElementById('album-back-btn').onclick = () =>
+ album._fromArtist ? navigate('artist-detail', album._fromArtist) : navigate('albums');
+ document.getElementById('album-detail-name').textContent = album.name;
+ const artistEl = document.getElementById('album-detail-artist');
+ artistEl.textContent = album.artist || '';
+ artistEl.onclick = () => { if(album.artistId) navigate('artist-detail', {id:album.artistId, name:album.artist}); };
+ const cw = document.getElementById('album-cover-wrap');
+ const cv = coverUrl(album.coverArt, 300);
+ cw.innerHTML = cv ? `` : '💿
';
+ const sl = document.getElementById('album-songs');
+ sl.innerHTML = '';
+ try {
+ const r = await api('getAlbum', `&id=${album.id}`);
+ const songs = r.album?.song || [];
+ const totalMin = Math.round(songs.reduce((s,t) => s+(t.duration||0), 0) / 60);
+ document.getElementById('album-detail-stats').textContent = `${songs.length} Titel · ${r.album.year||''} · ${totalMin} Min.`;
+ document.getElementById('btn-play-album').onclick = () => playQueue(songs, 0);
+ document.getElementById('btn-dl-album').onclick = () => {
+ songs.forEach((s,i) => setTimeout(() => dlSongLocal(s), i*400));
+ toast(`⬇ ${songs.length} Titel Download gestartet`);
+ };
+ sl.innerHTML = '';
+ songs.forEach((s,i) => sl.appendChild(makeSongItem(s, i, songs)));
+ } catch(e) { sl.innerHTML = `${e.message}
`; }
+}
+
+// ─── PLAYLISTS ───
+export async function loadPlaylists() {
+ const g = document.getElementById('playlists-grid');
+ g.innerHTML = '';
+ try {
+ const r = await api('getPlaylists');
+ const lists = r.playlists?.playlist || [];
+ g.innerHTML = '';
+ if(!lists.length) { g.innerHTML = '🎶
Keine Playlists vorhanden
${e.message}
`; }
+}
+
+export async function quickPlayPlaylist(pl) {
+ try { const r = await api('getPlaylist', `&id=${pl.id}`); playQueue(r.playlist?.entry || [], 0); }
+ catch(e) { toast('Fehler: ' + e.message); }
+}
+
+export async function loadPlaylistDetail(pl) {
+ S._currentPlaylist = {...pl};
+ document.getElementById('playlist-detail-name').textContent = pl.name;
+ const cw = document.getElementById('playlist-cover');
+ const cv = coverUrl(pl.coverArt, 300);
+ cw.innerHTML = cv ? `` : '🎶
';
+ document.getElementById('btn-edit-playlist').onclick = () => openEditPlModal(S._currentPlaylist);
+ const sl = document.getElementById('playlist-songs');
+ sl.innerHTML = '';
+ try {
+ const r = await api('getPlaylist', `&id=${pl.id}`);
+ const full = r.playlist || {};
+ S._currentPlaylist = {...pl, ...full, id: pl.id};
+ const songs = full.entry || [];
+ const totalMin = Math.round(songs.reduce((s,t) => s+(t.duration||0), 0) / 60);
+ document.getElementById('playlist-detail-stats').textContent = `${songs.length} Titel · ${totalMin} Min.`;
+ const descEl = document.getElementById('playlist-detail-desc');
+ if(descEl) { descEl.textContent = full.comment||''; descEl.style.display = full.comment ? '' : 'none'; }
+ document.getElementById('btn-play-playlist').onclick = () => playQueue(songs, 0);
+ document.getElementById('btn-shuffle-playlist').onclick = () => {
+ const shuffled = [...songs].sort(() => Math.random()-.5);
+ playQueue(shuffled, 0);
+ };
+ sl.innerHTML = '';
+ songs.forEach((s,i) => sl.appendChild(makeSongItem(s, i, songs)));
+ } catch(e) { sl.innerHTML = `${e.message}
`; }
+}
+
+export async function quickPlayAlbum(a) {
+ try { const r = await api('getAlbum', `&id=${a.id}`); playQueue(r.album?.song || [], 0); }
+ catch(e) { toast('Fehler: ' + e.message); }
+}
+
+// ─── STARRED / RANDOM ───
+export async function loadStarred() {
+ const el = document.getElementById('starred-songs');
+ el.innerHTML = '';
+ try {
+ const r = await api('getStarred2');
+ const songs = (r.starred2?.song || []).map(s => ({...s,_starred:true}));
+ el.innerHTML = '';
+ if(!songs.length) { el.innerHTML = ''; return; }
+ songs.forEach((s,i) => el.appendChild(makeSongItem(s, i, songs)));
+ } catch(e) { el.innerHTML = `${e.message}
`; }
+}
+
+export async function loadRandom() {
+ const el = document.getElementById('random-songs');
+ el.innerHTML = '';
+ try {
+ const r = await api('getRandomSongs', '&size=50');
+ const songs = r.randomSongs?.song || [];
+ el.innerHTML = '';
+ songs.forEach((s,i) => el.appendChild(makeSongItem(s, i, songs)));
+ } catch(e) { el.innerHTML = `${e.message}
`; }
+}
+
+// ─── LOCAL SEARCH ───
+export function onLocalSearch(val) {
+ clearTimeout(S.searchTimer);
+ if(!val.trim()) { navigate('home'); return; }
+ navigate('search');
+ S.searchTimer = setTimeout(() => doLocalSearch(val), 350);
+}
+
+export async function doLocalSearch(q) {
+ const el = document.getElementById('search-results');
+ el.innerHTML = '';
+ try {
+ const r = await api('search3', `&query=${encodeURIComponent(q)}&songCount=30&albumCount=10&artistCount=6`);
+ const res = r.searchResult3 || {};
+ el.innerHTML = '';
+ const artists = res.artist||[], albums = res.album||[], songs = res.song||[];
+ if(!artists.length && !albums.length && !songs.length) {
+ el.innerHTML = ''; return;
+ }
+ if(artists.length) {
+ const s = mkSection('Künstler');
+ const g = document.createElement('div'); g.className = 'scroll-row';
+ artists.forEach(a => {
+ const c = makeCard(a.name, a.albumCount+' Alben', null, '🎤');
+ c.onclick = () => navigate('artist-detail', a);
+ g.appendChild(c);
+ getArtistImage(a.id).then(img => {
+ if(!img) return;
+ const artEl = c.querySelector('.card-art');
+ if(!artEl) return;
+ artEl.innerHTML = `
`;
+ });
+ });
+ s.appendChild(g); el.appendChild(s);
+ }
+ if(albums.length) {
+ const s = mkSection('Alben');
+ const g = document.createElement('div'); g.className = 'scroll-row';
+ albums.forEach(a => g.appendChild(makeAlbumCard(a)));
+ s.appendChild(g); el.appendChild(s);
+ }
+ if(songs.length) {
+ const s = mkSection('Titel');
+ const g = document.createElement('div'); g.className = 'scroll-row';
+ songs.forEach((so,i) => {
+ const cv = coverUrl(so.coverArt, 200);
+ const c = makeCard(so.title, so.artist||'', cv, '🎵');
+ c.querySelector('.play-btn').onclick = (e) => { e.stopPropagation(); playQueue(songs, i); };
+ c.onclick = () => playQueue(songs, i);
+ g.appendChild(c);
+ });
+ s.appendChild(g); el.appendChild(s);
+ }
+ } catch(e) { el.innerHTML = `${e.message}
`; }
+}
+
+// ─── MOBILE SEARCH ───
+export function onMobileSearch(val) {
+ clearTimeout(S._mobileSearchTimer);
+ if(!val.trim()) { navigate('home'); return; }
+ navigate('search');
+ S._mobileSearchTimer = setTimeout(() => doLocalSearch(val), 300);
+}
+
+// ─── GLOBAL (ITUNES) SEARCH ───
+export function onGlobalSearch(val) {
+ clearTimeout(S.globalSearchTimer);
+ const el = document.getElementById('global-search-results');
+ if(!val.trim()) { el.innerHTML = '🔍
Gib einen Suchbegriff ein
🎤
'; if(overlay) artEl.appendChild(overlay); };
+ c.addEventListener('mouseenter', () => img.style.transform = 'scale(1.05)');
+ c.addEventListener('mouseleave', () => img.style.transform = 'scale(1)');
+ }).catch(() => {});
+ });
+ s.appendChild(row); el.appendChild(s);
+ }
+ if(albums.length) {
+ const s = mkSection('Alben');
+ const row = document.createElement('div'); row.className = 'scroll-row';
+ albums.forEach(a => {
+ const art = a.artworkUrl100?.replace('100x100','300x300');
+ const c = makeCard(a.collectionName, a.artistName, art, '💿');
+ c.querySelector('.play-btn').onclick = (e) => { e.stopPropagation(); loadItunesAlbum(a); };
+ c.querySelector('.dl-btn-overlay')?.remove();
+ const dlOverlay = document.createElement('button');
+ dlOverlay.className = 'dl-btn-overlay';
+ dlOverlay.title = 'Auf Server laden';
+ dlOverlay.innerHTML = ``;
+ dlOverlay.onclick = (e) => { e.stopPropagation(); openDlModal({artistName:a.artistName,trackName:a.collectionName,artworkUrl100:a.artworkUrl100,collectionName:a.collectionName,isAlbum:true,itunesData:a}); };
+ c.querySelector('.play-overlay').appendChild(dlOverlay);
+ c.onclick = () => loadItunesAlbum(a);
+ row.appendChild(c);
+ });
+ s.appendChild(row); el.appendChild(s);
+ }
+ if(tracks.length) {
+ const s = mkSection('Titel');
+ const list = document.createElement('div'); list.className = 'song-list';
+ tracks.forEach((t,i) => list.appendChild(makeGlobalTrackItem(t, i, tracks)));
+ s.appendChild(list); el.appendChild(s);
+ }
+ if(!artists.length && !albums.length && !tracks.length) {
+ el.innerHTML = '🔍
Keine Ergebnisse gefunden
Suche fehlgeschlagen: ${e.message}
`; }
+}
+
+export async function loadItunesAlbum(album) {
+ try {
+ const tracks = await itunesLookupAlbum(album.collectionId);
+ if(!tracks.length) { toast('Keine Tracks gefunden'); return; }
+ const el = document.getElementById('global-search-results');
+ const s = document.createElement('div'); s.className = 'search-section';
+ s.innerHTML = `
+
+
+
${esc(album.collectionName)}
+
${esc(album.artistName)}
+
+
+
Tracks
`;
+ const list = document.createElement('div'); list.className = 'song-list';
+ tracks.forEach((t,i) => list.appendChild(makeGlobalTrackItem(t, i, tracks)));
+ s.appendChild(list);
+ el.innerHTML = ''; el.appendChild(s);
+ } catch(e) { toast('Fehler: ' + e.message); }
+}
+
+export async function loadItunesArtistResults(artistId, artistName) {
+ const el = document.getElementById('global-search-results');
+ el.innerHTML = '';
+ try {
+ const albums = await itunesSearch(artistName, 'album', 20);
+ const artistAlbums = albums.filter(a => a.artistId===artistId || a.artistName===artistName);
+ el.innerHTML = '';
+ const header = document.createElement('div');
+ header.innerHTML = `
+
+
${esc(artistName)}
+
Alben
`;
+ el.appendChild(header);
+ const grid = document.createElement('div'); grid.className = 'grid grid-4';
+ (artistAlbums.length ? artistAlbums : albums).forEach(a => {
+ const art = a.artworkUrl100?.replace('100x100','300x300');
+ const c = makeCard(a.collectionName, a.artistName, art, '💿');
+ c.onclick = () => loadItunesAlbum(a);
+ grid.appendChild(c);
+ });
+ el.appendChild(grid);
+ } catch(e) { el.innerHTML = `${e.message}
`; }
+}
+
+// ─── NEW RELEASES ───
+export async function loadNewReleases() {
+ const albumEl = document.getElementById('nr-albums');
+ const songEl = document.getElementById('nr-songs');
+ albumEl.innerHTML = ''; songEl.innerHTML = '';
+ try {
+ const [albums, songs] = await Promise.all([itunesTopCharts(), itunesTopSongs()]);
+ albumEl.innerHTML = '';
+ albums.slice(0,30).forEach(a => {
+ const art = a.artworkUrl100?.replace('100x100','300x300') || a.artworkUrl;
+ const c = makeCard(a.name, a.artistName, art, '💿');
+ c.onclick = () => itunesSearch(a.name+' '+a.artistName,'album',5).then(res => { if(res[0]) loadItunesAlbum(res[0]); });
+ albumEl.appendChild(c);
+ });
+ songs.slice(0,40).forEach((s, i) => {
+ const el = document.createElement('div'); el.className = 'gtrack-item';
+ const art = s.artworkUrl?.replace('100x100','60x60');
+ el.innerHTML = `
+ ${art ? `
` : `
🎵
`}
+
${esc(s.name)}
+
${esc(s.artistName||'')}
+
${e.message}
`; }
+}
+
+// ─── RECOMMENDATIONS ───
+export async function loadRecommendations() {
+ const el = document.getElementById('reco-content');
+ const currentSong = S.queue[S.qIdx];
+ if(!currentSong) {
+ el.innerHTML = '🎵
Spiele zuerst Musik in deiner Bibliothek
+
🎧
+
Basierend auf
${esc(title)}
${esc(artist)}
+
${e.message}
`; }
+}
+
+async function loadLastfmRecommendations(el, artist, title, html) {
+ const BASE = 'https://ws.audioscrobbler.com/2.0';
+ const key = S.cfg.lastfmKey;
+ try {
+ const [simArtists, topTracks, simTracks] = await Promise.all([
+ fetch(`${BASE}/?method=artist.getSimilar&artist=${encodeURIComponent(artist)}&api_key=${key}&format=json&limit=12`).then(r=>r.json()),
+ fetch(`${BASE}/?method=artist.getTopTracks&artist=${encodeURIComponent(artist)}&api_key=${key}&format=json&limit=15`).then(r=>r.json()),
+ fetch(`${BASE}/?method=track.getSimilar&artist=${encodeURIComponent(artist)}&track=${encodeURIComponent(title)}&api_key=${key}&format=json&limit=15`).then(r=>r.json()),
+ ]);
+ el.innerHTML = html;
+ const simArtistList = simArtists.similarartists?.artist || [];
+ const topTrackList = topTracks.toptracks?.track || [];
+ const simTrackList = simTracks.similartracks?.track || [];
+ if(simArtistList.length) {
+ el.innerHTML += `Ähnliche Künstler
`;
+ el.innerHTML += simArtistList.map(a => ``).join('');
+ el.innerHTML += '
';
+ }
+ if(simTrackList.length) {
+ const sec = document.createElement('div');
+ sec.innerHTML = `Ähnliche Tracks
`;
+ const list = document.createElement('div'); list.className = 'song-list';
+ simTrackList.slice(0,15).forEach(t => {
+ const row = document.createElement('div'); row.className = 'gtrack-item';
+ row.innerHTML = `
+ ${esc(t.name)}
${esc(t.artist?.name||'')}
Top Tracks von ${esc(artist)}
`;
+ const list = document.createElement('div'); list.className = 'song-list';
+ topTrackList.slice(0,10).forEach(t => {
+ const row = document.createElement('div'); row.className = 'gtrack-item';
+ row.innerHTML = `
+ ${esc(t.name)}
${esc(t.artist?.name||artist)}
Mehr von ${esc(artist)}
`;
+ const list = document.createElement('div'); list.className = 'song-list';
+ results.filter(t => t.artistName===artist).slice(0,15).forEach(t => list.appendChild(makeGlobalTrackItem(t, 0, [t])));
+ if(!list.children.length) results.slice(0,15).forEach(t => list.appendChild(makeGlobalTrackItem(t, 0, [t])));
+ sec.appendChild(list); el.appendChild(sec);
+}
+
+// ─── HELPERS ───
+export function expandArtistBio() {
+ const el = document.getElementById('artist-bio-text');
+ if(el && window._artistBioFull) el.textContent = window._artistBioFull;
+}
+
+export function searchSimilarArtist(artistName) {
+ navigate('discover');
+ document.getElementById('global-search-input').value = artistName;
+ onGlobalSearch(artistName);
+}
+
+export async function searchAndPreview(trackName, artistName) {
+ try {
+ const res = await itunesSearch(trackName+' '+artistName, 'musicTrack', 1);
+ if(res[0]?.previewUrl) playPreview(res[0]); else toast('Kein Preview verfügbar');
+ } catch { toast('Suche fehlgeschlagen'); }
+}
+
+export function s_goArtist(e, name, id) {
+ if(!name) return;
+ navigate('artist-detail', {id: id||name, name});
+}
+
+export function s_goAlbum(e, albumId, albumName, artist, artistId) {
+ if(albumId) navigate('album-detail', {id:albumId, name:albumName, artist, artistId:artistId||'', coverArt:''});
+}
+
+export function playerBarGoAlbum() {
+ const s = S.queue[S.qIdx];
+ if(!s) return;
+ if(S.npOpen) closeNowPlaying();
+ if(s.albumId) navigate('album-detail', {id:s.albumId, name:s.album||'', artist:s.artist||'', artistId:s.artistId||'', coverArt:s.coverArt||''});
+}
+
+export function playerBarGoArtist() {
+ const s = S.queue[S.qIdx];
+ if(!s || !s.artist) return;
+ if(S.npOpen) closeNowPlaying();
+ navigate('artist-detail', {id: s.artistId||s.artist, name: s.artist});
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..506258f
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+ build: {
+ outDir: 'dist',
+ assetsDir: 'assets',
+ },
+});
` : `