feat(queue): add Now-Playing Info tab with artist bio, song credits and Bandsintown tour dates (#244)

* feat(queue): add Now-Playing Info tab with artist bio, song credits and Bandsintown tour dates A third tab in the right-side queue panel surfaces context for the currently playing track: - Artist card: image + biography from Subsonic getArtistInfo (Last.fm "Read more on Last.fm" anchor stripped), with read-more toggle that only appears when the bio actually overflows the 4-line clamp. - Song info: contributor credits from OpenSubsonic contributors[] rendered stacked (name prominent, role muted). Section is hidden entirely on servers without contributor support, and rows that just re-state the main artist under role "artist" are filtered out. - On tour: optional Bandsintown integration (opt-in, off by default). HTTP fetch + JSON parsing happen entirely on the Rust side; the frontend wrapper deduplicates concurrent calls and caches results in RAM for the session. Limited to 5 events with a "Show N more" toggle. When the toggle is off, the section becomes an in-place opt-in card with a privacy info-tooltip explaining what data is sent — same tooltip is also exposed on the matching toggle in Settings. Caching: artist info and song detail are memoised by stable IDs across component remounts, so jumping between tracks of the same album/artist does not refire the network calls. Implementation notes: - Bandsintown app_id "js_app_id" — arbitrary strings (e.g. "psysonic") now return HTTP 403 from rest.bandsintown.com; js_app_id is the ID Bandsintown's own embeddable widget uses and is broadly accepted. - Tour items use negative left/right margins so the date badge stays visually aligned with the section title while the hover background extends slightly past the section edges. - New i18n namespace nowPlayingInfo across all 8 locales (en, de, fr, nl, zh, nb, ru, es) including pluralised "Show N more" forms. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(now-playing-info): switch nested flex-columns to block layout to stop content-dependent drift Repeated reports of the Tour and Song-info sections rendering at inconsistent x-positions (sometimes left of the section title, sometimes centred, sometimes correctly aligned) — varying by artist, sidebar width, and even whether "Show more" was clicked. Root cause: nested flex-direction: column containers (.np-info → .np-info-section → .np-info-tour / .np-info-credits) where the cross-axis (horizontal) sizing on WebKitGTK occasionally inherits the intrinsic min-content of the longest child. With one "Naherholungsgebiet/Freizeitgelände Lago Alfredo"-style venue name that overflows the sidebar, the parent ul gets pushed past 100% width and the entire layout drifts. min-width: 0 on every level didn't help because cross-axis stretch in flex-column ignores it for content-driven overflow. Fix: collapse all the section/list containers to display: block. Block layout is content-agnostic — children always render at 100% parent width, left-aligned, deterministically. Spacing between siblings now uses the lobotomy selector (`> * + * { margin-top }`). Only the tour item itself stays flex (badge ↔ meta horizontal layout), and that one still has overflow: hidden + flex: 1 1 0 + min-width: 0 on the meta column to truncate venue/place text with ellipsis. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Psychotoxical <dev@psysonic.app> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-07-21 23:05:46 +00:00 · 2026-04-21 19:13:18 +02:00
parent 76ed6eca55
commit 06140a490b
17 changed files with 1026 additions and 3 deletions
@@ -606,6 +606,8 @@ export const deTranslation = {
    discordTemplateLargeText: 'Album-Tooltip (largeText)',
    nowPlayingEnabled: 'Im Livefenster anzeigen',
    nowPlayingEnabledDesc: 'Überträgt den aktuell gespielten Titel an die Livehörer-Ansicht des Servers. Deaktivieren, um keine Wiedergabedaten zu senden.',
+    enableBandsintown: 'Bandsintown-Tourdaten',
+    enableBandsintownDesc: 'Zeigt anstehende Konzerte des aktuellen Künstlers im Info-Tab. Daten werden über die öffentliche Bandsintown-API abgerufen.',
    lyricsServerFirst: 'Server-Lyrics bevorzugen',
    lyricsServerFirstDesc: 'Server-seitige Lyrics (eingebettete Tags, Sidecar-Dateien) vor LRCLIB abfragen. Deaktivieren, um LRCLIB zuerst zu verwenden.',
    enableNeteaselyrics: 'Netease Cloud Music Lyrics',
@@ -1049,6 +1051,30 @@ export const deTranslation = {
    showDuration: 'Dauer anzeigen',
    showRemainingTime: 'Verbleibende Zeit anzeigen',
  },
+  nowPlayingInfo: {
+    tab: 'Info',
+    empty: 'Spiele etwas, um Infos zu sehen',
+    artist: 'Künstler*in',
+    songInfo: 'Songinfos',
+    onTour: 'Auf Tour',
+    noTourEvents: 'Keine bevorstehenden Konzerte',
+    tourLoading: 'Wird geladen…',
+    poweredByBandsintown: 'Tourdaten via Bandsintown',
+    bioReadMore: 'Mehr anzeigen',
+    bioReadLess: 'Weniger anzeigen',
+    showMoreTours_one: '{{count}} weiteres anzeigen',
+    showMoreTours_other: '{{count}} weitere anzeigen',
+    showLessTours: 'Weniger anzeigen',
+    enableBandsintownPrompt: 'Anstehende Konzerte anzeigen?',
+    enableBandsintownPromptDesc: 'Optional. Lädt Tourdaten der aktuellen Künstler*in über die öffentliche Bandsintown-API.',
+    enableBandsintownPrivacy: 'Beim Aktivieren wird der Name der aktuell gespielten Künstler*in an die Bandsintown-API übertragen, um Tourdaten abzurufen. Es werden keine Konto- oder persönlichen Daten gesendet.',
+    enableBandsintownAction: 'Aktivieren',
+    role: {
+      artist: 'Hauptkünstler*in',
+      albumArtist: 'Album-Künstler*in',
+      composer: 'Komponist*in',
+    },
+  },
  songInfo: {
    title: 'Song-Infos',
    songTitle: 'Titel',
@@ -608,6 +608,8 @@ export const enTranslation = {
    discordTemplateLargeText: 'Album tooltip (largeText)',
    nowPlayingEnabled: 'Show in Now Playing',
    nowPlayingEnabledDesc: 'Broadcast your currently playing track to the server\'s live listener view. Disable to stop sending playback data.',
+    enableBandsintown: 'Bandsintown tour dates',
+    enableBandsintownDesc: 'Show upcoming concerts for the current artist in the Info tab. Data is fetched from the public Bandsintown API.',
    lyricsServerFirst: 'Prefer server lyrics',
    lyricsServerFirstDesc: 'Check server-provided lyrics (embedded tags, sidecar files) before querying LRCLIB. Disable to use LRCLIB first.',
    enableNeteaselyrics: 'Netease Cloud Music lyrics',
@@ -1051,6 +1053,30 @@ export const enTranslation = {
    showDuration: 'Show duration',
    showRemainingTime: 'Show remaining time',
  },
+  nowPlayingInfo: {
+    tab: 'Info',
+    empty: 'Play something to see info',
+    artist: 'Artist',
+    songInfo: 'Song info',
+    onTour: 'On tour',
+    noTourEvents: 'No upcoming shows',
+    tourLoading: 'Loading…',
+    poweredByBandsintown: 'Tour data via Bandsintown',
+    bioReadMore: 'Read more',
+    bioReadLess: 'Show less',
+    showMoreTours_one: 'Show {{count}} more',
+    showMoreTours_other: 'Show {{count}} more',
+    showLessTours: 'Show less',
+    enableBandsintownPrompt: 'See upcoming tour dates?',
+    enableBandsintownPromptDesc: 'Optional. Loads concerts for the current artist via the public Bandsintown API.',
+    enableBandsintownPrivacy: 'When enabled, the name of the currently playing artist is sent to the Bandsintown API to fetch tour dates. No account or personal data leaves your device.',
+    enableBandsintownAction: 'Enable',
+    role: {
+      artist: 'Artist',
+      albumArtist: 'Album artist',
+      composer: 'Composer',
+    },
+  },
  songInfo: {
    title: 'Song Info',
    songTitle: 'Title',
@@ -599,6 +599,8 @@ export const esTranslation = {
    discordTemplateLargeText: 'Tooltip del álbum (largeText)',
    nowPlayingEnabled: 'Mostrar en Reproduciendo Ahora',
    nowPlayingEnabledDesc: 'Transmite tu pista actual a la vista de oyentes en vivo del servidor. Desactiva para dejar de enviar datos de reproducción.',
+    enableBandsintown: 'Fechas de gira de Bandsintown',
+    enableBandsintownDesc: 'Muestra próximos conciertos del artista actual en la pestaña Info. Los datos se obtienen de la API pública de Bandsintown.',
    lyricsServerFirst: 'Preferir letras del servidor',
    lyricsServerFirstDesc: 'Verifica primero letras provistas por el servidor (etiquetas embebidas, archivos sidecar) antes de consultar LRCLIB. Desactiva para usar LRCLIB primero.',
    enableNeteaselyrics: 'Letras de Netease Cloud Music',
@@ -1042,6 +1044,30 @@ export const esTranslation = {
    showDuration: 'Mostrar duración',
    showRemainingTime: 'Mostrar tiempo restante',
  },
+  nowPlayingInfo: {
+    tab: 'Info',
+    empty: 'Reproduce algo para ver información',
+    artist: 'Artista',
+    songInfo: 'Info de la canción',
+    onTour: 'En gira',
+    noTourEvents: 'No hay próximos conciertos',
+    tourLoading: 'Cargando…',
+    poweredByBandsintown: 'Datos de gira vía Bandsintown',
+    bioReadMore: 'Leer más',
+    bioReadLess: 'Ver menos',
+    showMoreTours_one: 'Mostrar {{count}} más',
+    showMoreTours_other: 'Mostrar {{count}} más',
+    showLessTours: 'Ver menos',
+    enableBandsintownPrompt: '¿Ver próximas fechas de gira?',
+    enableBandsintownPromptDesc: 'Opcional. Carga conciertos del artista actual vía la API pública de Bandsintown.',
+    enableBandsintownPrivacy: 'Al activar, el nombre del artista actual se envía a la API de Bandsintown para obtener fechas de gira. No se envían datos de cuenta ni personales.',
+    enableBandsintownAction: 'Activar',
+    role: {
+      artist: 'Artista',
+      albumArtist: 'Artista del álbum',
+      composer: 'Compositor',
+    },
+  },
  songInfo: {
    title: 'Información de Canción',
    songTitle: 'Título',
@@ -594,6 +594,8 @@ export const frTranslation = {
    discordTemplateLargeText: 'Info-bulle album (largeText)',
    nowPlayingEnabled: 'Afficher dans la fenêtre live',
    nowPlayingEnabledDesc: 'Diffuse le titre en cours de lecture vers la vue des auditeurs en direct du serveur. Désactiver pour ne pas envoyer de données de lecture.',
+    enableBandsintown: 'Dates de tournée Bandsintown',
+    enableBandsintownDesc: 'Affiche les concerts à venir de l\'artiste actuel dans l\'onglet Info. Les données proviennent de l\'API publique Bandsintown.',
    lyricsServerFirst: 'Préférer les paroles du serveur',
    lyricsServerFirstDesc: 'Consulter d\'abord les paroles fournies par le serveur (tags intégrés, fichiers sidecar) avant LRCLIB. Désactiver pour utiliser LRCLIB en priorité.',
    enableNeteaselyrics: 'Paroles Netease Cloud Music',
@@ -1037,6 +1039,30 @@ export const frTranslation = {
    showDuration: 'Afficher la durée',
    showRemainingTime: 'Afficher le temps restant',
  },
+  nowPlayingInfo: {
+    tab: 'Info',
+    empty: 'Lancez une lecture pour voir les infos',
+    artist: 'Artiste',
+    songInfo: 'Infos du morceau',
+    onTour: 'En tournée',
+    noTourEvents: 'Aucun concert à venir',
+    tourLoading: 'Chargement…',
+    poweredByBandsintown: 'Données de tournée via Bandsintown',
+    bioReadMore: 'En lire plus',
+    bioReadLess: 'Réduire',
+    showMoreTours_one: 'Afficher {{count}} de plus',
+    showMoreTours_other: 'Afficher {{count}} de plus',
+    showLessTours: 'Réduire',
+    enableBandsintownPrompt: 'Afficher les prochaines dates de tournée ?',
+    enableBandsintownPromptDesc: 'Optionnel. Charge les concerts de l\'artiste via l\'API publique Bandsintown.',
+    enableBandsintownPrivacy: 'Lors de l\'activation, le nom de l\'artiste en cours de lecture est envoyé à l\'API Bandsintown pour récupérer les dates de tournée. Aucun compte ni données personnelles ne quittent votre appareil.',
+    enableBandsintownAction: 'Activer',
+    role: {
+      artist: 'Artiste',
+      albumArtist: 'Artiste de l\'album',
+      composer: 'Compositeur',
+    },
+  },
  songInfo: {
    title: 'Infos du morceau',
    songTitle: 'Titre',
@@ -593,6 +593,8 @@ export const nbTranslation = {
    discordTemplateLargeText: 'Album-verktøytips (largeText)',
    nowPlayingEnabled: 'Vis i "Nå spiller"',
    nowPlayingEnabledDesc: 'Send sporet som spilles av til tjenerens live-lyttervisning. Deaktiver for å stoppe sending av avspillingsdata.',
+    enableBandsintown: 'Bandsintown-turnédatoer',
+    enableBandsintownDesc: 'Vis kommende konserter for gjeldende artist i Info-fanen. Data hentes fra det offentlige Bandsintown-API-et.',
    lyricsServerFirst: 'Foretrekk server-sangtekst',
    lyricsServerFirstDesc: 'Sjekk tjenerlevererte sangtekster (innebygde tagger, sidecar-filer) før LRCLIB. Deaktiver for å bruke LRCLIB først.',
    enableNeteaselyrics: 'Netease Cloud Music sangtekster',
@@ -1036,6 +1038,30 @@ export const nbTranslation = {
    showDuration: 'Vis varighet',
    showRemainingTime: 'Vis gjenværende tid',
  },
+  nowPlayingInfo: {
+    tab: 'Info',
+    empty: 'Spill noe for å se info',
+    artist: 'Artist',
+    songInfo: 'Sporinfo',
+    onTour: 'På turné',
+    noTourEvents: 'Ingen kommende konserter',
+    tourLoading: 'Laster…',
+    poweredByBandsintown: 'Turnédata via Bandsintown',
+    bioReadMore: 'Vis mer',
+    bioReadLess: 'Vis mindre',
+    showMoreTours_one: 'Vis {{count}} til',
+    showMoreTours_other: 'Vis {{count}} til',
+    showLessTours: 'Vis mindre',
+    enableBandsintownPrompt: 'Vis kommende turnédatoer?',
+    enableBandsintownPromptDesc: 'Valgfritt. Henter konserter for gjeldende artist via det offentlige Bandsintown-API-et.',
+    enableBandsintownPrivacy: 'Ved aktivering sendes navnet på artisten som spilles av til Bandsintown-API-et for å hente turnédatoer. Ingen konto- eller personopplysninger forlater enheten din.',
+    enableBandsintownAction: 'Aktiver',
+    role: {
+      artist: 'Artist',
+      albumArtist: 'Albumartist',
+      composer: 'Komponist',
+    },
+  },
  songInfo: {
    title: 'Sanginfo',
    songTitle: 'Tittel',
@@ -593,6 +593,8 @@ export const nlTranslation = {
    discordTemplateLargeText: 'Album-tooltip (largeText)',
    nowPlayingEnabled: 'Weergeven in live-venster',
    nowPlayingEnabledDesc: 'Stuurt het huidige nummer naar de live-luisteraarsweergave van de server. Uitschakelen om geen afspeelgegevens te verzenden.',
+    enableBandsintown: 'Bandsintown-tourdata',
+    enableBandsintownDesc: 'Toon aankomende concerten van de huidige artiest in het Info-tabblad. Gegevens komen van de openbare Bandsintown-API.',
    lyricsServerFirst: 'Server-songtekst voorrang geven',
    lyricsServerFirstDesc: 'Controleer eerst door de server geleverde songteksten (ingebedde tags, sidecar-bestanden) vóór LRCLIB. Uitschakelen om LRCLIB eerst te gebruiken.',
    enableNeteaselyrics: 'Netease Cloud Music songteksten',
@@ -1036,6 +1038,30 @@ export const nlTranslation = {
    showDuration: 'Toon duur',
    showRemainingTime: 'Toon resterende tijd',
  },
+  nowPlayingInfo: {
+    tab: 'Info',
+    empty: 'Speel iets af om informatie te zien',
+    artist: 'Artiest',
+    songInfo: 'Nummer-info',
+    onTour: 'Op tour',
+    noTourEvents: 'Geen aankomende concerten',
+    tourLoading: 'Laden…',
+    poweredByBandsintown: 'Tourdata via Bandsintown',
+    bioReadMore: 'Meer tonen',
+    bioReadLess: 'Minder tonen',
+    showMoreTours_one: '{{count}} meer tonen',
+    showMoreTours_other: '{{count}} meer tonen',
+    showLessTours: 'Minder tonen',
+    enableBandsintownPrompt: 'Aankomende tourdata tonen?',
+    enableBandsintownPromptDesc: 'Optioneel. Laadt concerten van de huidige artiest via de openbare Bandsintown-API.',
+    enableBandsintownPrivacy: 'Bij inschakelen wordt de naam van de huidige artiest naar de Bandsintown-API gestuurd om tourdata op te halen. Er worden geen account- of persoonlijke gegevens verzonden.',
+    enableBandsintownAction: 'Inschakelen',
+    role: {
+      artist: 'Artiest',
+      albumArtist: 'Albumartiest',
+      composer: 'Componist',
+    },
+  },
  songInfo: {
    title: 'Nummerinfo',
    songTitle: 'Titel',
@@ -619,6 +619,8 @@ export const ruTranslation = {
    nowPlayingEnabled: 'Показывать в «Сейчас играет»',
    nowPlayingEnabledDesc:
      'Отправлять на сервер, что вы сейчас слушаете. Отключите, чтобы не делиться этим.',
+    enableBandsintown: 'Даты туров Bandsintown',
+    enableBandsintownDesc: 'Показывает предстоящие концерты текущего исполнителя на вкладке «Инфо». Данные берутся из публичного API Bandsintown.',
    lyricsServerFirst: 'Предпочитать тексты с сервера',
    lyricsServerFirstDesc: 'Проверять тексты песен, предоставленные сервером (встроенные теги, sidecar-файлы) перед запросом LRCLIB. Отключите, чтобы сначала использовать LRCLIB.',
    enableNeteaselyrics: 'Тексты из Netease Cloud Music',
@@ -1097,6 +1099,32 @@ export const ruTranslation = {
    showDuration: 'Показать длительность',
    showRemainingTime: 'Показать оставшееся время',
  },
+  nowPlayingInfo: {
+    tab: 'Инфо',
+    empty: 'Включите воспроизведение, чтобы увидеть информацию',
+    artist: 'Исполнитель',
+    songInfo: 'О треке',
+    onTour: 'В туре',
+    noTourEvents: 'Нет предстоящих концертов',
+    tourLoading: 'Загрузка…',
+    poweredByBandsintown: 'Данные о туре через Bandsintown',
+    bioReadMore: 'Читать дальше',
+    bioReadLess: 'Свернуть',
+    showMoreTours_one: 'Показать ещё {{count}}',
+    showMoreTours_few: 'Показать ещё {{count}}',
+    showMoreTours_many: 'Показать ещё {{count}}',
+    showMoreTours_other: 'Показать ещё {{count}}',
+    showLessTours: 'Свернуть',
+    enableBandsintownPrompt: 'Показать предстоящие концерты?',
+    enableBandsintownPromptDesc: 'Опционально. Загружает концерты текущего исполнителя через публичный API Bandsintown.',
+    enableBandsintownPrivacy: 'При включении имя текущего исполнителя отправляется в API Bandsintown для получения дат концертов. Аккаунт и личные данные не передаются.',
+    enableBandsintownAction: 'Включить',
+    role: {
+      artist: 'Исполнитель',
+      albumArtist: 'Исполнитель альбома',
+      composer: 'Композитор',
+    },
+  },
  songInfo: {
    title: 'О треке',
    songTitle: 'Название',
@@ -589,6 +589,8 @@ export const zhTranslation = {
    discordTemplateLargeText: '专辑提示 (largeText)',
    nowPlayingEnabled: '在实时窗口中显示',
    nowPlayingEnabledDesc: '将当前播放的曲目广播到服务器的实时听众视图。禁用以停止发送播放数据。',
+    enableBandsintown: 'Bandsintown 巡演日期',
+    enableBandsintownDesc: '在信息标签页中显示当前艺术家的即将到来的演出。数据通过公开的 Bandsintown API 获取。',
    lyricsServerFirst: '优先使用服务器歌词',
    lyricsServerFirstDesc: '先查询服务器提供的歌词（内嵌标签、sidecar 文件），再查询 LRCLIB。禁用则优先使用 LRCLIB。',
    enableNeteaselyrics: '网易云音乐歌词',
@@ -1032,6 +1034,30 @@ export const zhTranslation = {
    showDuration: '显示时长',
    showRemainingTime: '显示剩余时间',
  },
+  nowPlayingInfo: {
+    tab: '信息',
+    empty: '播放歌曲以查看信息',
+    artist: '艺术家',
+    songInfo: '歌曲信息',
+    onTour: '巡演',
+    noTourEvents: '没有即将到来的演出',
+    tourLoading: '加载中…',
+    poweredByBandsintown: '巡演数据来自 Bandsintown',
+    bioReadMore: '展开',
+    bioReadLess: '收起',
+    showMoreTours_one: '显示更多 {{count}} 个',
+    showMoreTours_other: '显示更多 {{count}} 个',
+    showLessTours: '收起',
+    enableBandsintownPrompt: '查看即将到来的巡演日期？',
+    enableBandsintownPromptDesc: '可选。通过公开的 Bandsintown API 加载当前艺术家的演出。',
+    enableBandsintownPrivacy: '启用后，当前播放的艺术家名称将发送到 Bandsintown API 以获取巡演日期。不会发送任何账户或个人数据。',
+    enableBandsintownAction: '启用',
+    role: {
+      artist: '艺术家',
+      albumArtist: '专辑艺术家',
+      composer: '作曲',
+    },
+  },
  songInfo: {
    title: '歌曲信息',
    songTitle: '标题',