feat(now-playing): redesign page as info dashboard (#266)

Replace the flat Now Playing page with a two-column dashboard: hero
(cover, metadata, badges, Last.fm stats + love button, release-age
tagline), and a grid of themed cards (Album tracklist with sliding
window, most-played-by-artist, credits, about-the-artist with Last.fm
bio fallback, compact discography contact-sheet with expand, upcoming
tours via Bandsintown). Adds lastfmGetTrackInfo + lastfmGetArtistStats
for global listener counts + userplaycount, plus Last.fm love/unlove
wired to the new hero button. Module-level TTL caches per entity keep
same-artist track switches instant. Artist-image guard filters the
well-known Last.fm no-image placeholder so the card collapses cleanly
when no real image exists.

Co-authored-by: Psychotoxical <dev@psysonic.app>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frank Stellmacher
2026-04-22 20:30:09 +02:00
committed by GitHub
parent f0e5b2542b
commit b4f31e0954
11 changed files with 1671 additions and 325 deletions
+24
View File
@@ -93,6 +93,30 @@ export const deTranslation = {
showLess: 'Weniger anzeigen',
genreInfo: 'Genre',
trackInfo: 'Track-Info',
topSongs: 'Meistgespielt von diesem Künstler',
topSongsCredit: 'Top-Tracks von {{name}}',
trackPosition: 'Track {{pos}}',
playsCount_one: '{{count}} Wiedergabe',
playsCount_other: '{{count}} Wiedergaben',
releasedYearsAgo_one: 'vor {{count}} Jahr',
releasedYearsAgo_other: 'vor {{count}} Jahren',
discography: 'Diskografie',
lastfmStats: 'Last.fm-Statistik',
thisTrack: 'Dieser Titel',
thisArtist: 'Dieser Künstler',
listeners: 'Hörer',
scrobbles: 'Scrobbles',
yourScrobbles: 'von dir',
listenersN: '{{n}} Hörer',
scrobblesN: '{{n}} Scrobbles',
playsByYouN: '{{n}}× von dir gespielt',
openTrackOnLastfm: 'Track auf Last.fm',
openArtistOnLastfm: 'Künstler auf Last.fm',
rgTrackTooltip: 'ReplayGain (Track)',
rgAlbumTooltip: 'ReplayGain (Album)',
rgAutoTooltip: 'ReplayGain (Auto)',
showMoreTracks: '{{count}} weitere anzeigen',
showLessTracks: 'Weniger anzeigen',
},
contextMenu: {
playNow: 'Direkt abspielen',
+24
View File
@@ -94,6 +94,30 @@ export const enTranslation = {
showLess: 'Show less',
genreInfo: 'Genre',
trackInfo: 'Track Info',
topSongs: 'Most played by this artist',
topSongsCredit: 'Top tracks from {{name}}',
trackPosition: 'Track {{pos}}',
playsCount_one: '{{count}} play',
playsCount_other: '{{count}} plays',
releasedYearsAgo_one: '{{count}} year ago',
releasedYearsAgo_other: '{{count}} years ago',
discography: 'Discography',
lastfmStats: 'Last.fm stats',
thisTrack: 'This track',
thisArtist: 'This artist',
listeners: 'listeners',
scrobbles: 'scrobbles',
yourScrobbles: 'by you',
listenersN: '{{n}} listeners',
scrobblesN: '{{n}} scrobbles',
playsByYouN: 'played {{n}}× by you',
openTrackOnLastfm: 'Track on Last.fm',
openArtistOnLastfm: 'Artist on Last.fm',
rgTrackTooltip: 'ReplayGain (track)',
rgAlbumTooltip: 'ReplayGain (album)',
rgAutoTooltip: 'ReplayGain (auto)',
showMoreTracks: 'Show {{count}} more',
showLessTracks: 'Show less',
},
contextMenu: {
playNow: 'Play Now',
+24
View File
@@ -94,6 +94,30 @@ export const esTranslation = {
showLess: 'Mostrar menos',
genreInfo: 'Género',
trackInfo: 'Información de la Pista',
topSongs: 'Más reproducidas de este artista',
topSongsCredit: 'Temas principales de {{name}}',
trackPosition: 'Pista {{pos}}',
playsCount_one: '{{count}} reproducción',
playsCount_other: '{{count}} reproducciones',
releasedYearsAgo_one: 'hace {{count}} año',
releasedYearsAgo_other: 'hace {{count}} años',
discography: 'Discografía',
lastfmStats: 'Estadísticas de Last.fm',
thisTrack: 'Este tema',
thisArtist: 'Este artista',
listeners: 'oyentes',
scrobbles: 'scrobbles',
yourScrobbles: 'por ti',
listenersN: '{{n}} oyentes',
scrobblesN: '{{n}} scrobbles',
playsByYouN: 'reproducido {{n}}× por ti',
openTrackOnLastfm: 'Tema en Last.fm',
openArtistOnLastfm: 'Artista en Last.fm',
rgTrackTooltip: 'ReplayGain (pista)',
rgAlbumTooltip: 'ReplayGain (álbum)',
rgAutoTooltip: 'ReplayGain (auto)',
showMoreTracks: 'Mostrar {{count}} más',
showLessTracks: 'Mostrar menos',
},
contextMenu: {
playNow: 'Reproducir Ahora',
+24
View File
@@ -93,6 +93,30 @@ export const frTranslation = {
showLess: 'Réduire',
genreInfo: 'Genre',
trackInfo: 'Infos piste',
topSongs: 'Le plus joué de cet artiste',
topSongsCredit: 'Top titres de {{name}}',
trackPosition: 'Piste {{pos}}',
playsCount_one: '{{count}} écoute',
playsCount_other: '{{count}} écoutes',
releasedYearsAgo_one: 'il y a {{count}} an',
releasedYearsAgo_other: 'il y a {{count}} ans',
discography: 'Discographie',
lastfmStats: 'Statistiques Last.fm',
thisTrack: 'Ce titre',
thisArtist: 'Cet artiste',
listeners: 'auditeurs',
scrobbles: 'scrobbles',
yourScrobbles: 'par vous',
listenersN: '{{n}} auditeurs',
scrobblesN: '{{n}} scrobbles',
playsByYouN: 'écouté {{n}}× par vous',
openTrackOnLastfm: 'Titre sur Last.fm',
openArtistOnLastfm: 'Artiste sur Last.fm',
rgTrackTooltip: 'ReplayGain (piste)',
rgAlbumTooltip: 'ReplayGain (album)',
rgAutoTooltip: 'ReplayGain (auto)',
showMoreTracks: 'Afficher {{count}} de plus',
showLessTracks: 'Réduire',
},
contextMenu: {
playNow: 'Lire maintenant',
+24
View File
@@ -93,6 +93,30 @@ export const nbTranslation = {
showLess: 'Vis mindre',
genreInfo: 'Sjanger',
trackInfo: 'Sporinfo',
topSongs: 'Mest spilt av denne artisten',
topSongsCredit: 'Toppspor fra {{name}}',
trackPosition: 'Spor {{pos}}',
playsCount_one: '{{count}} avspilling',
playsCount_other: '{{count}} avspillinger',
releasedYearsAgo_one: 'for {{count}} år siden',
releasedYearsAgo_other: 'for {{count}} år siden',
discography: 'Diskografi',
lastfmStats: 'Last.fm-statistikk',
thisTrack: 'Dette sporet',
thisArtist: 'Denne artisten',
listeners: 'lyttere',
scrobbles: 'scrobbles',
yourScrobbles: 'av deg',
listenersN: '{{n}} lyttere',
scrobblesN: '{{n}} scrobbles',
playsByYouN: 'spilt {{n}}× av deg',
openTrackOnLastfm: 'Spor på Last.fm',
openArtistOnLastfm: 'Artist på Last.fm',
rgTrackTooltip: 'ReplayGain (spor)',
rgAlbumTooltip: 'ReplayGain (album)',
rgAutoTooltip: 'ReplayGain (auto)',
showMoreTracks: 'Vis {{count}} til',
showLessTracks: 'Vis mindre',
},
contextMenu: {
playNow: 'Spill nå',
+24
View File
@@ -93,6 +93,30 @@ export const nlTranslation = {
showLess: 'Minder tonen',
genreInfo: 'Genre',
trackInfo: 'Trackinfo',
topSongs: 'Meest afgespeeld van deze artiest',
topSongsCredit: 'Topnummers van {{name}}',
trackPosition: 'Track {{pos}}',
playsCount_one: '{{count}} keer afgespeeld',
playsCount_other: '{{count}} keer afgespeeld',
releasedYearsAgo_one: '{{count}} jaar geleden',
releasedYearsAgo_other: '{{count}} jaar geleden',
discography: 'Discografie',
lastfmStats: 'Last.fm-statistieken',
thisTrack: 'Dit nummer',
thisArtist: 'Deze artiest',
listeners: 'luisteraars',
scrobbles: 'scrobbles',
yourScrobbles: 'door jou',
listenersN: '{{n}} luisteraars',
scrobblesN: '{{n}} scrobbles',
playsByYouN: '{{n}}× door jou afgespeeld',
openTrackOnLastfm: 'Nummer op Last.fm',
openArtistOnLastfm: 'Artiest op Last.fm',
rgTrackTooltip: 'ReplayGain (track)',
rgAlbumTooltip: 'ReplayGain (album)',
rgAutoTooltip: 'ReplayGain (auto)',
showMoreTracks: '{{count}} meer tonen',
showLessTracks: 'Minder tonen',
},
contextMenu: {
playNow: 'Nu afspelen',
+28
View File
@@ -94,6 +94,34 @@ export const ruTranslation = {
showLess: 'Свернуть',
genreInfo: 'Жанр',
trackInfo: 'О треке',
topSongs: 'Самое популярное у этого исполнителя',
topSongsCredit: 'Топ-треки исполнителя {{name}}',
trackPosition: 'Трек {{pos}}',
playsCount_one: '{{count}} прослушивание',
playsCount_few: '{{count}} прослушивания',
playsCount_many: '{{count}} прослушиваний',
playsCount_other: '{{count}} прослушиваний',
releasedYearsAgo_one: '{{count}} год назад',
releasedYearsAgo_few: '{{count}} года назад',
releasedYearsAgo_many: '{{count}} лет назад',
releasedYearsAgo_other: '{{count}} лет назад',
discography: 'Дискография',
lastfmStats: 'Статистика Last.fm',
thisTrack: 'Этот трек',
thisArtist: 'Этот исполнитель',
listeners: 'слушателей',
scrobbles: 'прослушиваний',
yourScrobbles: 'вами',
listenersN: '{{n}} слушателей',
scrobblesN: '{{n}} прослушиваний',
playsByYouN: 'прослушано вами {{n}}×',
openTrackOnLastfm: 'Трек на Last.fm',
openArtistOnLastfm: 'Исполнитель на Last.fm',
rgTrackTooltip: 'ReplayGain (трек)',
rgAlbumTooltip: 'ReplayGain (альбом)',
rgAutoTooltip: 'ReplayGain (авто)',
showMoreTracks: 'Показать ещё {{count}}',
showLessTracks: 'Свернуть',
},
contextMenu: {
playNow: 'Играть сейчас',
+24
View File
@@ -93,6 +93,30 @@ export const zhTranslation = {
showLess: '收起',
genreInfo: '流派',
trackInfo: '曲目信息',
topSongs: '该艺术家最常播放',
topSongsCredit: '{{name}} 的热门曲目',
trackPosition: '第 {{pos}} 首',
playsCount_one: '播放 {{count}} 次',
playsCount_other: '播放 {{count}} 次',
releasedYearsAgo_one: '{{count}} 年前',
releasedYearsAgo_other: '{{count}} 年前',
discography: '专辑列表',
lastfmStats: 'Last.fm 统计',
thisTrack: '这首歌',
thisArtist: '这位艺术家',
listeners: '听众',
scrobbles: '播放记录',
yourScrobbles: '你',
listenersN: '{{n}} 位听众',
scrobblesN: '{{n}} 次播放',
playsByYouN: '你播放了 {{n}} 次',
openTrackOnLastfm: '在 Last.fm 上查看',
openArtistOnLastfm: '在 Last.fm 上查看艺术家',
rgTrackTooltip: 'ReplayGain (曲目)',
rgAlbumTooltip: 'ReplayGain (专辑)',
rgAutoTooltip: 'ReplayGain (自动)',
showMoreTracks: '显示另外 {{count}} 首',
showLessTracks: '收起',
},
contextMenu: {
playNow: '立即播放',