feat: artist concerts via Bandsintown — button + modal with ticket links

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/main.js

@@ -14,7 +14,7 @@ import {
 import {
   navigate, _navGoBack, _navLoad, onHeaderSearch, closeHeaderSearch,
   onGlobalSearch, s_goArtist, s_goAlbum, playerBarGoArtist, playerBarGoAlbum,
-  searchSimilarArtist, searchAndPreview, loadItunesAlbum,
+  searchSimilarArtist, searchAndPreview, loadItunesAlbum, closeEventsModal,
   loadAlbums, loadStarred, loadRandom, filterStarred, filterPlaylist,
   plReorderEnter, plReorderSave, plReorderCancel, toggleAllGenres,
 } from './views/views.js';
@@ -300,7 +300,7 @@ Object.assign(window, {
   // Navigation
   navigate, onHeaderSearch, closeHeaderSearch, onGlobalSearch, s_goArtist, s_goAlbum,
   playerBarGoArtist, playerBarGoAlbum, searchSimilarArtist, searchAndPreview,
-  loadItunesAlbum,
+  loadItunesAlbum, closeEventsModal,
   // Player
   playQueue, togglePlay, prevSong, nextSong, toggleShuffle, toggleRepeat,
   toggleQueue, setVolume, seekTo, starCurrent, downloadCurrent, playPreview,

src/views/detail.js

@@ -7,6 +7,7 @@ import { showCtxMenu, openDlModal } from '../ui/ui.js';
 // Circular — safe (called inside event handlers / function bodies)
 import { navigate, _navGoBack } from './navigation.js';
 import { getArtistImage } from './home.js';
+import { fetchEvents, openEventsModal } from './events.js';
 
 // ─── QUICK PLAY HELPERS ───
 export async function quickPlayAlbum(a) {
@@ -85,7 +86,7 @@ export async function loadArtistDetail(artist) {
   const hasND       = !!artist.id;
   const knownItunes = artist.itunesArtistId || null;
 
-  const [imgRes, albumRes, infoRes, topRes, iArtistRes] = await Promise.allSettled([
+  const [imgRes, albumRes, infoRes, topRes, iArtistRes, eventsRes] = await Promise.allSettled([
     hasND ? getArtistImage(artist.id)                                          : Promise.resolve(null),
     hasND ? api('getArtist',    `&id=${artist.id}`)                            : Promise.resolve(null),
     hasND ? api('getArtistInfo2',`&id=${artist.id}&count=8`)                   : Promise.resolve(null),
@@ -93,6 +94,7 @@ export async function loadArtistDetail(artist) {
     knownItunes
       ? Promise.resolve([{ artistId: knownItunes }])
       : itunesSearch(artist.name, 'musicArtist', 5),
+    fetchEvents(artist.name),
   ]);
 
   const _normWords = s => new Set((s || '').toLowerCase().replace(/[^a-z0-9]/g, ' ').split(/\s+/).filter(Boolean));
@@ -226,6 +228,14 @@ export async function loadArtistDetail(artist) {
       actionBar.appendChild(playTopBtn);
       actionBar.appendChild(shuffleBtn);
     }
+    const events = eventsRes.status === 'fulfilled' ? (eventsRes.value || []) : [];
+    if(events.length) {
+      const evBtn = document.createElement('button');
+      evBtn.className = 'artist-action-btn';
+      evBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> Konzerte <span style="font-size:11px;opacity:.7">(${events.length})</span>`;
+      evBtn.onclick = () => openEventsModal(events, artist.name);
+      actionBar.appendChild(evBtn);
+    }
   }
 
   if(albEl) { albEl.innerHTML = ''; _renderArtistAlbums(albEl, ndAlbums, iAlbums, artist); }

src/views/events.js

@@ -0,0 +1,43 @@
+import { esc } from '../utils.js';
+
+export async function fetchEvents(artistName) {
+  try {
+    const r = await fetch(`https://rest.bandsintown.com/artists/${encodeURIComponent(artistName)}/events?app_id=novasonic`);
+    if(!r.ok) return [];
+    const data = await r.json();
+    if(!Array.isArray(data)) return [];
+    return data.filter(e => new Date(e.datetime) > new Date());
+  } catch { return []; }
+}
+
+export function openEventsModal(events, artistName) {
+  const modal = document.getElementById('events-modal');
+  const title = document.getElementById('events-modal-title');
+  const list  = document.getElementById('events-modal-list');
+  if(!modal || !list) return;
+
+  title.textContent = `Konzerte · ${artistName}`;
+  list.innerHTML = events.map(e => {
+    const d = new Date(e.datetime);
+    const date = d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', year: 'numeric' });
+    const time = d.getHours() === 0 && d.getMinutes() === 0 ? '' : d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+    const venue = e.venue?.name || '';
+    const city  = [e.venue?.city, e.venue?.country].filter(Boolean).join(', ');
+    const offer = e.offers?.find(o => o.url) || null;
+    const soldOut = offer?.status === 'unavailable';
+    return `<div class="event-row">
+      <div class="event-date">${esc(date)}${time ? `<span class="event-time">${esc(time)}</span>` : ''}</div>
+      <div class="event-venue">
+        <div class="event-venue-name">${esc(venue)}</div>
+        <div class="event-venue-city">${esc(city)}</div>
+      </div>
+      ${offer ? `<a class="event-book-btn${soldOut ? ' sold-out' : ''}" href="${esc(offer.url)}" target="_blank" rel="noopener">${soldOut ? 'Ausverkauft' : 'Buchen →'}</a>` : ''}
+    </div>`;
+  }).join('');
+
+  modal.classList.add('open');
+}
+
+export function closeEventsModal() {
+  document.getElementById('events-modal')?.classList.remove('open');
+}

src/views/views.js

@@ -6,3 +6,4 @@ export * from './detail.js';
 export * from './playlists.js';
 export * from './search.js';
 export * from './discover.js';
+export * from './events.js';