refactor: restructure src into player/views/ui subfolders; fix notification skip buttons

- Move player.js + nowplaying.js → src/player/ - Move views.js + spotify/soundcloud/youtube/abs → src/views/ - Move ui.js + components.js → src/ui/ - Update all import paths (static + lazy) across every file - MusicService: wrap ExoPlayer in ForwardingPlayer that always advertises next/prev commands so the notification skip buttons stay visible in radio mode even when the JS queue has only one native track Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-06 13:12:27 +02:00
1 parent d8908c69e9
commit 308a27d293
@@ -0,0 +1,105 @@
+import { S } from '../state.js';
+import { esc, formatDur } from '../utils.js';
+
+// Exposed on window so inline onerror= handlers can call it.
+// Retries the same src up to 3 times with increasing delays, then shows fallback.
+window._imgRetry = function(img, fallback) {
+  const n = (img._r = (img._r || 0) + 1);
+  if (n > 3 || !img.src) { img.parentNode.innerHTML = `<div class="no-art">${fallback}</div>`; return; }
+  setTimeout(() => { const s = img.src; img.src = ''; img.src = s; }, 1500 * n);
+};
+import { coverUrl, dispTitle, dispArtistParts, dispAlbum, dispArtistById, dispAlbumName } from '../api.js';
+// Circular imports — safe (only used inside event handlers after module init)
+import { playQueue, toggleStar, playPreview, parseArtists } from '../player/player.js';
+import { showCtxMenu, openDlModal } from './ui.js';
+import { navigate, quickPlayAlbum, quickPlayArtist } from '../views/views.js';
+
+// ─── GENERIC CARD ───
+export function makeCard(title, sub, imgUrl, fallback='💿') {
+  const c = document.createElement('div');
+  c.className = 'card';
+  c.innerHTML = `<div class="card-art">
+    ${imgUrl ? `<img src="${imgUrl}" loading="lazy" onerror="_imgRetry(this,'${fallback}')">` : `<div class="no-art">${fallback}</div>`}
+    <div class="play-overlay"><button class="play-btn"><svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg></button></div>
+  </div>
+  <div class="card-info"><div class="card-title">${esc(title)}</div><div class="card-sub">${esc(sub||'')}</div></div>`;
+  return c;
+}
+
+export function makeAlbumCard(a) {
+  const cv = coverUrl(a.coverArt, 512);
+  const c = makeCard(dispAlbumName(a.name), dispArtistById(a.artistId, a.artist||''), cv, '💿');
+  c.querySelector('.card-art').onclick = (e) => { e.stopPropagation(); quickPlayAlbum(a); };
+  c.querySelector('.card-info').onclick = () => navigate('album-detail', a);
+  return c;
+}
+
+// ─── SONG LIST ITEM (library) ───
+export function makeSongItem(s, idx, list, { noArtistLink = false } = {}) {
+  const el = document.createElement('div');
+  if(s.starred && !s._starred) s._starred = true;
+  el.className = 'song-item' + (S.queue[S.qIdx]?.id === s.id ? ' playing' : '');
+  el.dataset.songId = s.id;
+  const cv = coverUrl(s.coverArt, 128);
+  const artistParts = dispArtistParts(s, parseArtists);
+  const artistHtml = artistParts.length
+    ? artistParts.map(a => noArtistLink
+        ? `<span style="color:var(--text2)">${esc(a.name)}</span>`
+        : `<span class="song-link" onclick="event.stopPropagation();s_goArtist(event,'${esc(a.originalName||a.name)}','${a.id||''}')">${esc(a.name)}</span>`
+      ).join('<span style="color:var(--text3)"> • </span>')
+    : '';
+
+  const playsHtml = S.cfg.showPlayCount
+    ? `<span class="song-plays">${s.playCount ? s.playCount.toLocaleString() + '<span class="song-plays-x">×</span>' : '—'}</span>`
+    : '';
+  el.innerHTML = `<div class="song-num">${idx+1}</div>
+    <div class="song-thumb">${cv ? `<img src="${cv}" loading="lazy" onerror="_imgRetry(this,'♪')">` : '<div class="no-art">♪</div>'}</div>
+    <div class="song-info">
+      <div class="song-title">${esc(dispTitle(s))}</div>
+      <div class="song-artist">${artistHtml}</div>
+    </div>
+    <div class="song-meta">
+      <span class="song-dur">${formatDur(s.duration)}</span>
+      <div class="song-actions">
+        <button class="icon-btn${s._starred?' starred':''}" title="Favorit"><svg width="12" height="12" viewBox="0 0 24 24" fill="${s._starred?'currentColor':'none'}" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
+        <button class="icon-btn song-menu-btn" title="Mehr Optionen"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg></button>
+      </div>
+      ${playsHtml}
+    </div>`;
+  const btns = el.querySelectorAll('.icon-btn');
+  btns[0].onclick = (e) => { e.stopPropagation(); toggleStar(s, btns[0]); };
+  btns[1].onclick = (e) => { e.stopPropagation(); showCtxMenu(e, s, list, idx); };
+  el.onclick = () => playQueue(list, idx, { noShuffle: true });
+  el.addEventListener('contextmenu', e => { e.preventDefault(); showCtxMenu(e, s, list, idx); });
+  return el;
+}
+
+// ─── GLOBAL TRACK ITEM (iTunes / Spotify results) ───
+export function makeGlobalTrackItem(t, idx, list) {
+  const el = document.createElement('div');
+  el.className = 'gtrack-item';
+  const art = t.artworkUrl60 || t.artworkUrl100 || '';
+  el.innerHTML = `
+    <div class="gtrack-art">${art ? `<img src="${art}" loading="lazy" onerror="this.parentNode.innerHTML='<div style=\\'width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px\\'>🎵</div>'">` : '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px">🎵</div>'}</div>
+    <div class="gtrack-num">${t.trackNumber || ''}</div>
+    <div class="gtrack-info">
+      <div class="gtrack-title">${esc(t.trackName||t.collectionName||'—')}${t.trackExplicitness==='explicit'?'<span class="explicit-badge">E</span>':''}</div>
+      <div class="gtrack-sub">${esc(t.artistName||'—')} · ${esc(t.collectionName||'')} ${t.releaseDate?'· '+new Date(t.releaseDate).getFullYear():''}</div>
+    </div>
+    <div class="gtrack-actions">
+      ${t.previewUrl ? `<button class="icon-btn blue" title="30s Preview" onclick="event.stopPropagation();playPreview(${JSON.stringify(t).replace(/"/g,'&quot;')})"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>` : ''}
+      <button class="icon-btn green" title="Auf Server laden" onclick="event.stopPropagation();openDlModal(${JSON.stringify(t).replace(/"/g,'&quot;')})">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+      </button>
+    </div>`;
+  el.onclick = () => { if(t.previewUrl) playPreview(t); };
+  return el;
+}
+
+// ─── SEARCH SECTION HEADER ───
+export function mkSection(title) {
+  const d = document.createElement('div');
+  d.className = 'search-section';
+  d.innerHTML = `<div class="search-section-title">${title}</div>`;
+  return d;
+}