refactor: split views.js and ui.js into focused modules
Extract 3 new files from oversized source files: - src/components.js (~86 lines): makeCard, makeAlbumCard, makeSongItem, makeGlobalTrackItem, mkSection — reusable DOM builders - src/spotify.js (~187 lines): loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll, and private render/artwork helpers - src/nowplaying.js (~255 lines): openNowPlaying, closeNowPlaying, syncNowPlaying, switchNpTab, full lyrics engine, renderNpQueue, npGoArtist/Album, openNpMenu/closeNpMenu views.js: 1121 → 864 lines ui.js: 706 → 462 lines Update imports in main.js, player.js, views.js accordingly. Build verified: 15 modules, no errors. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed
1 parent
4bdf3c7cbc
commit
16b7faee2b
7 files changed
+540
-508
No files matched your search
@@ -460,247 +460,3 @@ export async function editPlRemoveCover() {
|
||||
} catch(e) { S._ndToken = null; toast('Fehler: '+e.message); }
|
||||
}
|
||||
|
||||
// ─── NOW PLAYING OVERLAY ───
|
||||
export function openNowPlaying() {
|
||||
S.npOpen = true;
|
||||
const overlay = document.getElementById('np-overlay');
|
||||
overlay.classList.add('open');
|
||||
if(S.npQueueMode) switchNpTab('player');
|
||||
syncNowPlaying();
|
||||
if(!overlay._swipeAttached) {
|
||||
overlay._swipeAttached = true;
|
||||
let startY=0, startT=0, dragging=false;
|
||||
const handle = document.getElementById('np-drag-handle');
|
||||
function onStart(clientY) { startY=clientY; startT=Date.now(); dragging=true; overlay.style.transition='none'; }
|
||||
function onMove(clientY) { if(!dragging) return; const dy=Math.max(0,clientY-startY); overlay.style.transform=`translateY(${dy}px)`; }
|
||||
function onEnd(clientY) {
|
||||
if(!dragging) return; dragging=false; overlay.style.transition='';
|
||||
const dy=clientY-startY, dt=Date.now()-startT;
|
||||
if(dt<250&&dy>50 || dy>window.innerHeight*0.3) closeNowPlaying();
|
||||
else overlay.style.transform='';
|
||||
}
|
||||
overlay.addEventListener('touchstart', e => {
|
||||
const rect=overlay.getBoundingClientRect();
|
||||
if(e.touches[0].clientY-rect.top < 100) onStart(e.touches[0].clientY);
|
||||
}, {passive:true});
|
||||
overlay.addEventListener('touchmove', e => onMove(e.touches[0].clientY), {passive:true});
|
||||
overlay.addEventListener('touchend', e => onEnd(e.changedTouches[0].clientY), {passive:true});
|
||||
handle.addEventListener('mousedown', e => { onStart(e.clientY); e.preventDefault(); });
|
||||
document.addEventListener('mousemove', e => onMove(e.clientY));
|
||||
document.addEventListener('mouseup', e => onEnd(e.clientY));
|
||||
}
|
||||
}
|
||||
|
||||
export function closeNowPlaying() {
|
||||
S.npOpen = false;
|
||||
const overlay = document.getElementById('np-overlay');
|
||||
overlay.style.transform = '';
|
||||
overlay.classList.remove('open');
|
||||
}
|
||||
|
||||
export function syncNowPlaying() {
|
||||
if(!S.npOpen) return;
|
||||
const s = S.queue[S.qIdx];
|
||||
if(!s) return;
|
||||
_syncNpDirect(s);
|
||||
const shuffleBtn = document.getElementById('np-shuffle-btn');
|
||||
const repeatBtn = document.getElementById('np-repeat-btn');
|
||||
const volSlider = document.getElementById('np-vol-slider');
|
||||
if(shuffleBtn) shuffleBtn.classList.toggle('active', S.shuffle);
|
||||
if(repeatBtn) repeatBtn.classList.toggle('active', S.repeat !== false);
|
||||
if(volSlider) volSlider.value = Math.round(S.audio.volume * 100);
|
||||
const playing = !S.audio.paused;
|
||||
const npIcon = document.getElementById('np-play-icon');
|
||||
if(npIcon) npIcon.innerHTML = playing
|
||||
? '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>'
|
||||
: '<polygon points="5 3 19 12 5 21 5 3"/>';
|
||||
const cover = document.getElementById('np-cover');
|
||||
if(cover) cover.classList.toggle('playing', playing);
|
||||
}
|
||||
|
||||
export function switchNpTab(tab) {
|
||||
S.npQueueMode = tab === 'queue';
|
||||
S.npLyricsMode = tab === 'lyrics';
|
||||
const overlay = document.getElementById('np-overlay');
|
||||
overlay.classList.toggle('queue-mode', S.npQueueMode);
|
||||
overlay.classList.toggle('lyrics-mode', S.npLyricsMode);
|
||||
document.getElementById('np-tab-player').classList.toggle('active', tab === 'player');
|
||||
document.getElementById('np-tab-lyrics').classList.toggle('active', S.npLyricsMode);
|
||||
document.getElementById('np-tab-queue').classList.toggle('active', S.npQueueMode);
|
||||
if(S.npQueueMode) renderNpQueue();
|
||||
if(S.npLyricsMode) { const s = S.queue[S.qIdx]; if(s) _loadNpLyrics(s.id); }
|
||||
}
|
||||
|
||||
// ─── LYRICS ───
|
||||
let _lyricsLines = [];
|
||||
let _lyricsSongId = null;
|
||||
|
||||
const LYRICS_LOOKAHEAD_MS = 200; // highlight line this many ms before its timestamp
|
||||
|
||||
function _parseLrc(text) {
|
||||
let offsetMs = 0;
|
||||
const lines = [];
|
||||
for(const raw of text.split('\n')) {
|
||||
const offM = raw.match(/^\[offset:\s*([+-]?\d+)\s*\]/i);
|
||||
if(offM) { offsetMs = parseInt(offM[1]); continue; }
|
||||
const m = raw.match(/^\[(\d+):(\d+(?:\.\d+)?)\](.*)/);
|
||||
if(m) lines.push({ start: Math.round((parseInt(m[1])*60 + parseFloat(m[2]))*1000), value: m[3].trim() });
|
||||
}
|
||||
// [offset:N] shifts all timestamps by N ms (positive = lines appear later)
|
||||
if(offsetMs) lines.forEach(l => l.start = Math.max(0, l.start + offsetMs));
|
||||
return lines.sort((a,b) => a.start - b.start).filter(l => l.value);
|
||||
}
|
||||
|
||||
function _renderSyncedLines(content, lines) {
|
||||
const top = document.createElement('div');
|
||||
top.style.cssText = 'height:40vh;flex-shrink:0';
|
||||
content.appendChild(top);
|
||||
_lyricsLines = lines.map(line => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'lyrics-line';
|
||||
el.textContent = line.value;
|
||||
el.onclick = () => { S.audio.currentTime = line.start / 1000; };
|
||||
content.appendChild(el);
|
||||
return { start: line.start, el };
|
||||
});
|
||||
const bot = document.createElement('div');
|
||||
bot.style.cssText = 'height:40vh;flex-shrink:0';
|
||||
content.appendChild(bot);
|
||||
updateLyricsHighlight(S.audio.currentTime * 1000);
|
||||
}
|
||||
|
||||
async function _loadNpLyrics(songId) {
|
||||
const content = document.getElementById('np-lyrics-content');
|
||||
if(!content) return;
|
||||
if(_lyricsSongId === songId && (_lyricsLines.length || content.querySelector('.lyrics-plain,.lyrics-none'))) {
|
||||
if(_lyricsLines.length) updateLyricsHighlight(S.audio.currentTime * 1000);
|
||||
return;
|
||||
}
|
||||
_lyricsSongId = songId;
|
||||
_lyricsLines = [];
|
||||
content.innerHTML = '<div style="text-align:center;padding:60px 0;color:rgba(255,255,255,.3);font-size:14px">Lade Lyrics…</div>';
|
||||
|
||||
const s = S.queue[S.qIdx];
|
||||
const { getLyricsBySongId } = await import('./api.js');
|
||||
|
||||
// 1. Try Navidrome structured lyrics (may already be synced if .lrc sidecar scanned)
|
||||
const lyrics = await getLyricsBySongId(songId);
|
||||
const track = lyrics[0];
|
||||
if(track?.synced && track.line?.length) {
|
||||
content.innerHTML = '';
|
||||
_renderSyncedLines(content, track.line.map(l => ({ start: l.start, value: l.value || '' })).filter(l => l.value));
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Fallback: fetch synced lyrics directly from LRCLIB
|
||||
let lrcText = null;
|
||||
try {
|
||||
const p = new URLSearchParams({ artist_name: s?.artist||'', track_name: s?.title||'' });
|
||||
if(s?.album) p.set('album_name', s.album);
|
||||
const r = await fetch(`https://lrclib.net/api/get?${p}`, { signal: AbortSignal.timeout(8000) });
|
||||
if(r.ok) { const d = await r.json(); lrcText = d.syncedLyrics || null; }
|
||||
} catch {}
|
||||
|
||||
content.innerHTML = '';
|
||||
if(lrcText) {
|
||||
const parsed = _parseLrc(lrcText);
|
||||
if(parsed.length) { _renderSyncedLines(content, parsed); return; }
|
||||
}
|
||||
|
||||
// 3. Plain text fallback (Navidrome unsynced or LRCLIB plainLyrics)
|
||||
const plain = track?.line?.length
|
||||
? track.line.map(l => l.value).join('\n')
|
||||
: null;
|
||||
if(plain) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'lyrics-plain';
|
||||
el.textContent = plain;
|
||||
content.appendChild(el);
|
||||
} else {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'lyrics-none';
|
||||
el.style.cssText = 'text-align:center;padding:60px 0;color:rgba(255,255,255,.3);font-size:14px';
|
||||
el.textContent = 'Keine Lyrics verfügbar';
|
||||
content.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
export function updateLyricsHighlight(currentMs) {
|
||||
if(!_lyricsLines.length || !S.npLyricsMode) return;
|
||||
const adjusted = currentMs + LYRICS_LOOKAHEAD_MS;
|
||||
let activeIdx = -1;
|
||||
for(let i = 0; i < _lyricsLines.length; i++) {
|
||||
if(_lyricsLines[i].start <= adjusted) activeIdx = i;
|
||||
else break;
|
||||
}
|
||||
_lyricsLines.forEach((line, i) => {
|
||||
line.el.classList.toggle('active', i === activeIdx);
|
||||
line.el.classList.toggle('past', i < activeIdx);
|
||||
});
|
||||
if(activeIdx >= 0) _lyricsLines[activeIdx].el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
|
||||
export function onNpSongChange(songId) {
|
||||
_lyricsSongId = null;
|
||||
_lyricsLines = [];
|
||||
const content = document.getElementById('np-lyrics-content');
|
||||
if(content) content.innerHTML = '';
|
||||
if(S.npLyricsMode) _loadNpLyrics(songId);
|
||||
}
|
||||
|
||||
export function renderNpQueue() {
|
||||
const el = document.getElementById('np-queue-list');
|
||||
if(!el) return;
|
||||
el.innerHTML = '';
|
||||
if(!S.queue.length) {
|
||||
el.innerHTML = '<div style="text-align:center;padding:40px;color:rgba(255,255,255,.3)">Warteschlange leer</div>';
|
||||
return;
|
||||
}
|
||||
S.queue.forEach((s, i) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'np-queue-item' + (i===S.qIdx ? ' nq-active' : '');
|
||||
const cv = coverUrl(s.coverArt, 60);
|
||||
item.innerHTML = `<div class="nqi-num">${i+1}</div><div class="nqi-art">${cv ? `<img src="${cv}">` : '♪'}</div><div class="nqi-info"><div class="nqi-title">${esc(s.title)}</div><div class="nqi-artist">${esc(s.artist||'')}</div></div>`;
|
||||
item.onclick = () => { S.qIdx=i; playCurrent(); switchNpTab('player'); };
|
||||
el.appendChild(item);
|
||||
});
|
||||
el.querySelector('.nq-active')?.scrollIntoView({block:'nearest'});
|
||||
}
|
||||
|
||||
export function npGoArtist() {
|
||||
const s = S.queue[S.qIdx]; if(!s) return;
|
||||
closeNowPlaying();
|
||||
if(s.artistId) navigate('artist-detail', {id:s.artistId, name:s.artist});
|
||||
}
|
||||
export function npGoAlbum() {
|
||||
const s = S.queue[S.qIdx]; if(!s || !s.albumId) return;
|
||||
closeNowPlaying();
|
||||
navigate('album-detail', {id:s.albumId, name:s.album||'', artist:s.artist||'', artistId:s.artistId||'', coverArt:s.coverArt||''});
|
||||
}
|
||||
|
||||
// ─── NP ACTION SHEET ───
|
||||
export function openNpMenu() {
|
||||
const s = S.queue[S.qIdx]; if(!s) return;
|
||||
const cv = coverUrl(s.coverArt, 80);
|
||||
document.getElementById('np-sheet-song').innerHTML = `
|
||||
<div class="thumb">${cv ? `<img src="${cv}">` : '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px">🎵</div>'}</div>
|
||||
<div><div class="title">${esc(s.title)}</div><div class="sub">${esc(s.artist||'')}${s.album?' · '+esc(s.album):''}</div></div>`;
|
||||
const items = [
|
||||
{ icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>', label: 'Song-Info anzeigen', fn: () => { closeNpMenu(); showSongInfo(s); } },
|
||||
{ icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>', label: 'Zu Playlist hinzufügen', fn: () => { closeNpMenu(); openPlModal([s]); } },
|
||||
{ icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>', label: 'Zum Künstler', fn: () => { closeNpMenu(); npGoArtist(); } },
|
||||
{ icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>', label: 'Zum Album', fn: () => { closeNpMenu(); closeNowPlaying(); if(s.albumId) navigate('album-detail',{id:s.albumId,name:s.album,artist:s.artist,artistId:s.artistId,coverArt:s.coverArt}); } },
|
||||
{ icon: '<svg width="18" height="18" viewBox="0 0 24 24" fill="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>', label: s._starred||s.starred ? 'Aus Favoriten entfernen' : 'Zu Favoriten hinzufügen', fn: () => { closeNpMenu(); npToggleStar(); } },
|
||||
{ icon: '<svg width="18" height="18" 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>', label: 'Herunterladen', fn: () => { closeNpMenu(); dlSongLocal(s); } },
|
||||
];
|
||||
document.getElementById('np-sheet-items').innerHTML = items.map((item,i) =>
|
||||
`<div class="np-sheet-item" data-idx="${i}">${item.icon}<span>${item.label}</span></div>`
|
||||
).join('');
|
||||
document.querySelectorAll('.np-sheet-item').forEach((el,i) => el.addEventListener('click', () => items[i].fn()));
|
||||
document.getElementById('np-sheet-overlay').classList.add('open');
|
||||
document.getElementById('np-sheet').classList.add('open');
|
||||
}
|
||||
export function closeNpMenu() {
|
||||
document.getElementById('np-sheet-overlay').classList.remove('open');
|
||||
document.getElementById('np-sheet').classList.remove('open');
|
||||
}
|
||||
Reference in new issue
Block a user