From 908488a3377a9276ce0a2c6439deb6356e0252d5 Mon Sep 17 00:00:00 2001 From: marc Date: Fri, 18 Sep 2026 13:50:33 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Zeitleiste=20"Neu=20von=20deinen=20K?= =?UTF-8?q?=C3=BCnstlern"=20(Web)=20+=20Backend-Endpunkt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Eigener Punkt in der Seitenleiste: jüngste Veröffentlichungen aller gefolgten Künstler, nach Monat gruppiert, neueste zuerst, umschaltbar auf 30/90/365 Tage. Was schon in der Bibliothek liegt, ist markiert (Vergleich über Künstler + Albumname, akzent- und zeichenunabhängig); alles andere bekommt einen Laden-Knopf zum vertrauten Download-Dialog. Neuer Endpunkt POST /api/artist-releases (backend/lib/releases.js): die Deezer-Zuordnung passiert serverseitig, weil die Künstler-Pins dort ohnehin liegen. Gepinnte nutzen die feste ID, ungepinnte werden über den Namen gesucht und nach Fan-Zahl sortiert; ohne Treffer kommt der Name als ohneZuordnung zurück und die Oberfläche rät zum Pinnen. Cache im Backend statt im Client — bei 30 gefolgten Künstlern wären das sonst 30 Deezer-Aufrufe pro Gerät und App-Start. 6 h für Alben, 24 h für die Namenszuordnung, max. 4 Anfragen parallel, bei Deezer-Fehlern wird der abgelaufene Stand ausgeliefert statt einer leeren Liste. Co-Authored-By: Claude Opus 5 --- CHANGELOG.md | 19 +++++ backend/lib/releases.js | 95 +++++++++++++++++++++ backend/novasonic-server.js | 30 +++++++ index.html | 15 ++++ src/main.js | 2 + src/views/artistNews.js | 161 ++++++++++++++++++++++++++++++++++++ src/views/navigation.js | 5 +- styles.css | 20 +++++ 8 files changed, 345 insertions(+), 2 deletions(-) create mode 100644 backend/lib/releases.js create mode 100644 src/views/artistNews.js diff --git a/CHANGELOG.md b/CHANGELOG.md index c33e45b..7877bc3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,6 +40,7 @@ Die Android-App zählt eigenständig weiter (mehrere APKs pro Release). Welche d | Playlist cover upload | ✅ | ✅ | | Besitzer geteilter Playlists | ✅ | ✅ | | Künstler folgen / Album merken | ✅ | ✅ | +| Neu von deinen Künstlern | ✅ | ❌ | | Spotify / YouTube importer | ✅ | ✅ | | Musik-Duell (Anzeigetafel) | ✅ | ✅ | | Wiedergabe fortsetzen | ✅ | ✅ | @@ -100,6 +101,24 @@ Die Android-App zählt eigenständig weiter (mehrere APKs pro Release). Welche d - Wer ohne Künstler-Pin folgt, bekommt einen Hinweis: ohne Pinnung läuft die Deezer-Zuordnung über den Namen, und bei gleichnamigen Künstlern kämen dauerhaft die Neuheiten des Falschen. +- **Zeitleiste „Neu von deinen Künstlern" (Web)** — eigener Punkt in der Seitenleiste. Zeigt die + jüngsten Veröffentlichungen aller Künstler, denen du folgst: nach Monat gruppiert, neueste zuerst, + pro Eintrag Cover, Künstler, Art (Album/Single/EP), Titelzahl und Datum. Umschaltbar auf 30 Tage, + 90 Tage oder ein Jahr. + - **Was du schon hast, ist markiert.** Verglichen wird über Künstler + Albumname (akzent- und + zeichenunabhängig) — Deezers Album-Id hat mit Navidromes nichts zu tun. Alles andere bekommt + direkt einen Laden-Knopf, der den vertrauten Download-Dialog öffnet. + - **Neuer Backend-Endpunkt `POST /api/artist-releases`** (`backend/lib/releases.js`). Die + Deezer-Zuordnung passiert dort, weil die Künstler-Pins ohnehin serverseitig liegen: der Client + schickt nur seine Navidrome-Künstler und muss über Deezer nichts wissen. Gepinnte Künstler nutzen + die feste ID, ungepinnte werden über den Namen gesucht — sortiert nach Fan-Zahl, weil Deezers + Suche nicht nach Bekanntheit ordnet. Künstler ohne Treffer kommen als `ohneZuordnung` zurück und + die Oberfläche rät zum Pinnen, statt still die Neuheiten des Falschen anzuzeigen. + - **Der Cache liegt im Backend, nicht im Client.** Bei 30 gefolgten Künstlern wären das sonst 30 + Deezer-Aufrufe pro Gerät und App-Start. 6 h für Alben, 24 h für die Namenszuordnung, höchstens + vier Anfragen gleichzeitig; bei einem Deezer-Fehler wird der abgelaufene Stand ausgeliefert + statt einer leeren Liste. + ### Changed - **Top Songs fragen jetzt über die Künstler-ID (Web + Android)** — Navidrome 0.64 nimmt bei `getTopSongs` zusätzlich `id`. Bisher lief die Abfrage nur über den **Namen**, und der Namensweg diff --git a/backend/lib/releases.js b/backend/lib/releases.js new file mode 100644 index 0000000..71b58af --- /dev/null +++ b/backend/lib/releases.js @@ -0,0 +1,95 @@ +// ─── NEUE VERÖFFENTLICHUNGEN GEFOLGTER KÜNSTLER ─────────────────────────────── +// Liefert zu einer Liste von Navidrome-Künstlern die jüngsten Deezer-Releases, damit die App eine +// Zeitleiste "Neu von deinen Künstlern" zeigen kann. +// +// Warum serverseitig: bei 30 gefolgten Künstlern wären das 30 Deezer-Aufrufe — pro Gerät und pro +// App-Start. Der Cache liegt deshalb hier und gilt für alle Clients gemeinsam. +const { dzGet } = require('./deezer'); + +const _cache = new Map(); // deezerArtistId → { ts, alben } +const _idCache = new Map(); // nameLower → { ts, id } +const TTL = 6 * 60 * 60 * 1000; // 6 h — Alben erscheinen nicht minütlich +const ID_TTL = 24 * 60 * 60 * 1000; // 24 h — die Zuordnung Name → Deezer ändert sich kaum +const GLEICHZEITIG = 4; // höflich gegenüber Deezer, trotzdem zügig + +const coverXl = a => a?.cover_xl || a?.cover_big || a?.cover_medium || ''; +// Künstler stilisieren ihren Namen mit führenden Zeichen (".diedlonely", "†…") — ohne das Abschneiden +// findet Deezers Suche sie nicht. Gleiche Regel wie in deezer.js. +const stripLeadSym = s => (s || '').replace(/^[^\p{L}\p{N}]+/u, '').trim(); + +/** Deezer-ID zu einem Künstler: erst die gepinnte, sonst über den Namen gesucht (und gemerkt). */ +async function deezerIdFuer(name, pinId) { + if (pinId) return String(pinId); + const key = stripLeadSym(name).toLowerCase(); + if (!key) return null; + const c = _idCache.get(key); + if (c && Date.now() - c.ts < ID_TTL) return c.id; + try { + const treffer = (await dzGet(`search/artist?q=${encodeURIComponent(stripLeadSym(name))}&limit=5`)).data || []; + // Deezer sortiert nicht nach Bekanntheit — die Fan-Zahl trifft den gemeinten Künstler deutlich + // öfter als der erste Treffer. Ein Pin schlägt das trotzdem, siehe oben. + const best = treffer.slice().sort((a, b) => (b.nb_fan || 0) - (a.nb_fan || 0))[0]; + const id = best ? String(best.id) : null; + _idCache.set(key, { ts: Date.now(), id }); + return id; + } catch { return null; } +} + +/** Albumliste eines Deezer-Künstlers, gecacht. */ +async function albenFuer(deezerId) { + const c = _cache.get(deezerId); + if (c && Date.now() - c.ts < TTL) return c.alben; + try { + const alben = (await dzGet(`artist/${deezerId}/albums?limit=50`)).data || []; + _cache.set(deezerId, { ts: Date.now(), alben }); + return alben; + } catch { + // Bei einem Fehler lieber den alten Stand als gar nichts — abgelaufen, aber nicht falsch. + return c ? c.alben : []; + } +} + +/** Führt eine Aufgabenliste mit begrenzter Gleichzeitigkeit aus. */ +async function inHaeppchen(items, groesse, fn) { + const raus = []; + for (let i = 0; i < items.length; i += groesse) { + raus.push(...await Promise.all(items.slice(i, i + groesse).map(fn))); + } + return raus; +} + +/** + * @param {Array<{id,name,deezerArtistId?}>} kuenstler Navidrome-Künstler (id + name) + * @param {number} tage Zeitfenster + * @returns {{releases:Array, ohneZuordnung:Array}} + */ +async function neueReleases(kuenstler, tage = 90) { + const grenze = Date.now() - tage * 24 * 60 * 60 * 1000; + const ohneZuordnung = []; + + const proKuenstler = await inHaeppchen(kuenstler, GLEICHZEITIG, async (k) => { + const dzId = await deezerIdFuer(k.name, k.deezerArtistId); + if (!dzId) { ohneZuordnung.push(k.name); return []; } + const alben = await albenFuer(dzId); + return alben + .filter(a => a.release_date && new Date(a.release_date).getTime() >= grenze) + .map(a => ({ + artistId: k.id, + artistName: k.name, + deezerArtistId: dzId, + albumId: String(a.id), + title: a.title || '', + cover: coverXl(a), + releaseDate: a.release_date, + recordType: a.record_type || 'album', + trackCount: a.nb_tracks ?? null, + explicit: !!a.explicit_lyrics, + })); + }); + + const releases = proKuenstler.flat() + .sort((a, b) => new Date(b.releaseDate) - new Date(a.releaseDate)); + return { releases, ohneZuordnung }; +} + +module.exports = { neueReleases, deezerIdFuer, albenFuer, _cache, _idCache }; diff --git a/backend/novasonic-server.js b/backend/novasonic-server.js index 4515d19..c95e4fe 100644 --- a/backend/novasonic-server.js +++ b/backend/novasonic-server.js @@ -266,6 +266,36 @@ app.post('/api/artist-overrides', (req, res) => { res.json({ ok: true }); }); +// ─── NEUE VERÖFFENTLICHUNGEN GEFOLGTER KÜNSTLER ───────────────────────────── +// POST /api/artist-releases { artists: [{id, name}], days } +// Die Deezer-Zuordnung passiert HIER, weil die Pins ohnehin serverseitig liegen — der Client +// schickt also nur seine Navidrome-Künstler und muss nichts über Deezer wissen. +app.post('/api/artist-releases', async (req, res) => { + const artists = Array.isArray(req.body?.artists) ? req.body.artists : []; + const days = Math.min(Math.max(parseInt(req.body?.days, 10) || 90, 1), 365); + if (!artists.length) return res.json({ releases: [], ohneZuordnung: [] }); + // Obergrenze, damit ein kaputter Client nicht hunderte Deezer-Aufrufe auslöst. + if (artists.length > 300) return res.status(400).json({ error: 'Zu viele Künstler (max. 300)' }); + + const pins = _loadArtistOverrides(); + const mitPin = artists + .filter(a => a && a.id && a.name) + .map(a => ({ + id: String(a.id), + name: String(a.name), + deezerArtistId: pins[String(a.id)]?.deezerArtistId || null, + })); + + try { + const { neueReleases } = require('./lib/releases'); + const ergebnis = await neueReleases(mitPin, days); + res.json(ergebnis); + } catch (e) { + console.error('[releases]', e.message); + res.status(502).json({ error: e.message }); + } +}); + // DELETE /api/artist-overrides/:ndArtistId — remove a pin app.delete('/api/artist-overrides/:ndArtistId', (req, res) => { const id = decodeURIComponent(req.params.ndArtistId); diff --git a/index.html b/index.html index 35346eb..7b3bd0b 100644 --- a/index.html +++ b/index.html @@ -76,6 +76,9 @@
Global Suche
+
+ Von deinen Künstlern +
Neue Releases
@@ -406,6 +409,18 @@ +
+
+
Neu von deinen Künstlern
+
+
+ + + +
+
+
+
Neue Releases
diff --git a/src/main.js b/src/main.js index 575ab6f..13e3bc1 100644 --- a/src/main.js +++ b/src/main.js @@ -350,6 +350,8 @@ Object.assign(window, { navigate, onHeaderSearch, closeHeaderSearch, onGlobalSearch, s_goArtist, s_goAlbum, playerBarGoArtist, playerBarGoAlbum, searchSimilarArtist, searchAndPreview, loadDeezerAlbum, closeEventsModal, + // Lazy: die Zeitleiste zieht nur beim Öffnen ihren Code nach. + loadArtistNews: (tage) => import('./views/artistNews.js').then(m => m.loadArtistNews(tage)), // Player playQueue, togglePlay, prevSong, nextSong, toggleShuffle, toggleRepeat, toggleQueue, setVolume, seekTo, starCurrent, downloadCurrent, playPreview, diff --git a/src/views/artistNews.js b/src/views/artistNews.js new file mode 100644 index 0000000..6170d28 --- /dev/null +++ b/src/views/artistNews.js @@ -0,0 +1,161 @@ +import { S } from '../state.js'; +import { esc } from '../utils.js'; +import { api } from '../api.js'; +import { openDlModal } from '../ui/ui.js'; +// Zirkulär — sicher, weil nur in Ereignisbehandlern aufgerufen +import { navigate } from './navigation.js'; + +// ─── NEU VON DEINEN KÜNSTLERN ─────────────────────────────────────────────── +// Zeitleiste der jüngsten Veröffentlichungen aller Künstler, denen man folgt. "Folgen" ist +// Navidromes Stern, die Liste kommt also aus getStarred2 — kein eigener Speicher. +// Die Deezer-Auflösung macht das Backend, weil dort auch die Künstler-Pins liegen. + +let _tage = 90; +let _laeuft = false; + +export async function loadArtistNews(tage = _tage) { + _tage = tage; + document.querySelectorAll('#artist-news-sort .sort-chip').forEach(c => + c.classList.toggle('active', Number(c.dataset.days) === tage)); + + const el = document.getElementById('artist-news-list'); + if (!el || _laeuft) return; + + if (!S.cfg?.backendUrl) { + el.innerHTML = '
🔌

Kein Backend konfiguriert

' + + '

Neue Veröffentlichungen kommen über das Backend von Deezer.

'; + return; + } + + _laeuft = true; + el.innerHTML = ''; + try { + const r = await api('getStarred2'); + const kuenstler = (r.starred2?.artist || []).map(a => ({ id: a.id, name: a.name })); + if (!kuenstler.length) { + el.innerHTML = '
❤

Du folgst noch niemandem

' + + '

Auf einer Künstlerseite oben rechts aufs Herz tippen.

'; + return; + } + + const res = await fetch(`${S.cfg.backendUrl}/api/artist-releases`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ artists: kuenstler, days: tage }), + }); + if (!res.ok) throw new Error(`HTTP ${res.status}`); + const { releases = [], ohneZuordnung = [] } = await res.json(); + + // Was hat man schon? Verglichen wird über Künstler + Albumname — Deezers Album-Id hat mit + // Navidromes nichts zu tun. + const vorhanden = new Set(); + (r.starred2?.album || []).forEach(a => vorhanden.add(_schluessel(a.artist, a.name))); + await _ergaenzeVorhandene(kuenstler, vorhanden); + + el.innerHTML = ''; + if (ohneZuordnung.length) el.appendChild(_hinweisOhneZuordnung(ohneZuordnung)); + if (!releases.length) { + const leer = document.createElement('div'); + leer.className = 'empty-state'; + leer.innerHTML = `
🌙

Nichts Neues in den letzten ${tage} Tagen

`; + el.appendChild(leer); + return; + } + _renderZeitleiste(el, releases, vorhanden); + } catch (e) { + el.innerHTML = `

${esc(e.message)}

`; + } finally { + _laeuft = false; + } +} + +const _norm = s => (s || '').toLowerCase().normalize('NFD').replace(/\p{M}+/gu, '') + .replace(/[^a-z0-9]/g, ''); +const _schluessel = (kuenstler, album) => `${_norm(kuenstler)}~~${_norm(album)}`; + +/** Alben der gefolgten Künstler aus der eigenen Bibliothek nachtragen (parallel, begrenzt). */ +async function _ergaenzeVorhandene(kuenstler, vorhanden) { + const haeppchen = 6; + for (let i = 0; i < kuenstler.length; i += haeppchen) { + await Promise.all(kuenstler.slice(i, i + haeppchen).map(async k => { + try { + const a = await api('getArtist', `&id=${encodeURIComponent(k.id)}`); + (a.artist?.album || []).forEach(al => vorhanden.add(_schluessel(k.name, al.name))); + } catch {} + })); + } +} + +function _hinweisOhneZuordnung(namen) { + const d = document.createElement('div'); + d.className = 'artist-news-hint'; + d.innerHTML = `⚠ Für ${namen.length} Künstler wurde kein Deezer-Profil gefunden: ` + + `${namen.slice(0, 4).map(esc).join(', ')}${namen.length > 4 ? ' …' : ''}. ` + + `Auf der Künstlerseite über ⚙ das richtige Profil festpinnen.`; + return d; +} + +function _renderZeitleiste(el, releases, vorhanden) { + let letzterMonat = ''; + releases.forEach(rel => { + const monat = new Date(rel.releaseDate) + .toLocaleDateString('de-DE', { month: 'long', year: 'numeric' }); + if (monat !== letzterMonat) { + letzterMonat = monat; + const h = document.createElement('div'); + h.className = 'search-section-title'; + h.style.cssText = 'margin:18px 0 8px'; + h.textContent = monat; + el.appendChild(h); + } + el.appendChild(_zeile(rel, vorhanden.has(_schluessel(rel.artistName, rel.title)))); + }); +} + +const _TYP = { album: 'Album', single: 'Single', ep: 'EP', compile: 'Compilation' }; + +function _zeile(rel, schonDa) { + const row = document.createElement('div'); + row.className = 'artist-news-row'; + const datum = new Date(rel.releaseDate).toLocaleDateString('de-DE', + { day: '2-digit', month: '2-digit', year: 'numeric' }); + const typ = _TYP[rel.recordType] || rel.recordType; + row.innerHTML = ` +
${rel.cover ? `` : '
💿
'}
+
+
${esc(rel.title)}
+
${esc(rel.artistName)} · ${typ}${rel.trackCount ? ` · ${rel.trackCount} Titel` : ''}
+
${datum}
+
`; + row.querySelector('.artist-news-artist').onclick = (e) => { + e.stopPropagation(); + navigate('artist-detail', { id: rel.artistId, name: rel.artistName }); + }; + + const aktion = document.createElement('div'); + aktion.className = 'artist-news-action'; + if (schonDa) { + aktion.innerHTML = '✓ Hast du'; + } else { + const btn = document.createElement('button'); + btn.className = 'btn-outline blue'; + btn.style.cssText = 'font-size:12px;padding:7px 12px'; + btn.textContent = '⬇ Laden'; + btn.onclick = () => openDlModal({ + artistName: rel.artistName, + trackName: rel.title, + collectionName: rel.title, + artworkUrl100: rel.cover || '', + isAlbum: true, + collectionId: rel.albumId, + deezerData: { + collectionId: rel.albumId, collectionName: rel.title, + artistName: rel.artistName, artworkUrl100: rel.cover || '', + releaseDate: rel.releaseDate, trackCount: rel.trackCount, + }, + }); + aktion.appendChild(btn); + } + row.appendChild(aktion); + return row; +} diff --git a/src/views/navigation.js b/src/views/navigation.js index 2f5fda9..743057e 100644 --- a/src/views/navigation.js +++ b/src/views/navigation.js @@ -92,7 +92,7 @@ export function navigate(page, data=null) { document.querySelectorAll('.page').forEach(p => p.classList.remove('active')); document.querySelectorAll('.nav-item,.bnav-item').forEach(n => n.classList.remove('active','active-blue')); - const cls = ['discover','new-releases','recommendations'].includes(page) ? 'active-blue' : 'active'; + const cls = ['discover','new-releases','recommendations','artist-news'].includes(page) ? 'active-blue' : 'active'; document.querySelectorAll(`[data-page="${page}"]`).forEach(el => el.classList.add(cls)); const pageEl = document.getElementById(`page-${page}`); if(pageEl) { @@ -109,7 +109,7 @@ export function navigate(page, data=null) { } } closeSidebar(); - if(['discover','new-releases','recommendations','random'].includes(page)) switchNavMode('discover'); + if(['discover','new-releases','recommendations','random','artist-news'].includes(page)) switchNavMode('discover'); else if(['home','artists','albums','starred','playlists'].includes(page)) switchNavMode('library'); if(page==='home') loadHomeData(!S._navJumping); // explicit Home click refreshes; back/forward keeps state @@ -123,6 +123,7 @@ export function navigate(page, data=null) { if(page==='genre-detail' && data) loadGenreDetail(data); if(page==='deezer-album-detail' && data) loadDeezerAlbumDetail(data); if(page==='partial-album-detail' && data) loadPartialAlbumDetail(data); + if(page==='artist-news') import('./artistNews.js').then(m => m.loadArtistNews()); if(page==='new-releases') loadNewReleases(); if(page==='playlists') loadPlaylists(); if(page==='playlist-detail' && data) loadPlaylistDetail(data); diff --git a/styles.css b/styles.css index bb03614..65b0887 100644 --- a/styles.css +++ b/styles.css @@ -1178,3 +1178,23 @@ button:focus{outline:none} .cmp-bar{height:6px;border-radius:3px;background:var(--accent)} .cmp-track{display:flex;align-items:center;gap:10px;padding:6px 0;min-width:0} .cmp-track img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0} + +/* ─── NEU VON DEINEN KÜNSTLERN ─────────────────────────────────────────── */ +.artist-news-hint{background:rgba(232,160,32,.08);border:1px solid rgba(232,160,32,.28);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:14px} +.artist-news-hint strong{color:var(--text)} +.artist-news-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;transition:background .15s} +.artist-news-row:hover{background:var(--surface)} +.artist-news-art{width:56px;height:56px;flex-shrink:0;border-radius:8px;overflow:hidden;background:var(--surface2);display:flex;align-items:center;justify-content:center} +.artist-news-art img{width:100%;height:100%;object-fit:cover} +.artist-news-info{flex:1;min-width:0} +.artist-news-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.artist-news-sub{font-size:12px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.artist-news-artist{cursor:pointer;transition:color .15s} +.artist-news-artist:hover{color:var(--accent);text-decoration:underline} +.artist-news-date{font-size:11px;color:var(--text3);margin-top:3px} +.artist-news-action{flex-shrink:0} +.artist-news-have{font-size:12px;color:var(--text3);white-space:nowrap} +@media(max-width:600px){ + .artist-news-art{width:46px;height:46px} + .artist-news-row{gap:10px;padding:8px 6px} +}