Migrate to Vite + ES module architecture
Split monolithic app.js (~1850 lines) into maintainable ES modules: - src/state.js — shared mutable state (S object) - src/utils.js — md5, esc, formatDur, toast - src/api.js — Subsonic API, Navidrome REST, iTunes API - src/player.js — playback, transport, queue, media session, preview - src/views.js — navigation, page loaders, card makers, search - src/ui.js — all modals, overlays, sidebar, settings - src/pwa.js — service worker registration + update banner - src/main.js — app init, connect, window globals Updated Dockerfile to multi-stage (Node build → nginx serve). Static assets (sw.js, manifest.json, icon.svg) moved to public/. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed
1 parent
ce53c48835
commit
9aded56713
18 files changed
+3134
-2
No files matched your search
@@ -0,0 +1,519 @@
|
||||
import { S } from './state.js';
|
||||
import { esc, formatDur, toast } from './utils.js';
|
||||
import { api, coverUrl, ndAuth } from './api.js';
|
||||
// Circular imports — safe (only used inside function bodies)
|
||||
import { playQueue, dlSongLocal, toggleStar, togglePlay, renderQueue, syncNpStar, updateStarBtn, npToggleStar, playCurrent, _syncNpDirect, setPlayIcon } from './player.js';
|
||||
import { navigate, loadPlaylists } from './views.js';
|
||||
|
||||
// ─── SIDEBAR ───
|
||||
export function openSidebar() {
|
||||
document.getElementById('sidebar').classList.add('mobile-open');
|
||||
document.getElementById('mobile-overlay').classList.add('active');
|
||||
}
|
||||
export function closeSidebar() {
|
||||
document.getElementById('sidebar').classList.remove('mobile-open');
|
||||
document.getElementById('mobile-overlay').classList.remove('active');
|
||||
}
|
||||
export function switchNavMode(mode) {
|
||||
const lib = document.getElementById('bnav-library');
|
||||
const disc = document.getElementById('bnav-discover');
|
||||
if(!lib || !disc) return;
|
||||
lib.style.display = mode==='library' ? 'flex' : 'none';
|
||||
disc.style.display = mode==='discover' ? 'flex' : 'none';
|
||||
document.getElementById('bnav-tab-library')?.classList.toggle('active', mode==='library');
|
||||
document.getElementById('bnav-tab-discover')?.classList.toggle('active', mode==='discover');
|
||||
}
|
||||
|
||||
// ─── MOBILE SEARCH ───
|
||||
export function toggleMobileSearch() {
|
||||
const bar = document.getElementById('mobile-search-bar');
|
||||
const btn = document.getElementById('mobile-search-btn');
|
||||
const open = bar.style.display==='none' || bar.style.display==='';
|
||||
bar.style.display = open ? 'block' : 'none';
|
||||
btn.style.color = open ? 'var(--accent)' : 'var(--text2)';
|
||||
if(open) { setTimeout(() => document.getElementById('mobile-search-input').focus(), 50); }
|
||||
else { closeMobileSearch(); }
|
||||
}
|
||||
export function closeMobileSearch() {
|
||||
const bar = document.getElementById('mobile-search-bar');
|
||||
const inp = document.getElementById('mobile-search-input');
|
||||
const btn = document.getElementById('mobile-search-btn');
|
||||
bar.style.display = 'none';
|
||||
btn.style.color = 'var(--text2)';
|
||||
inp.value = '';
|
||||
navigate('home');
|
||||
}
|
||||
|
||||
// ─── SETUP ───
|
||||
export function switchSetupTab(t) {
|
||||
document.querySelectorAll('.setup-tab').forEach((el,i) => el.classList.toggle('active', i===(t==='navidrome'?0:1)));
|
||||
document.querySelectorAll('.setup-pane').forEach((el,i) => el.classList.toggle('active', i===(t==='navidrome'?0:1)));
|
||||
}
|
||||
export function showSetupError(m) {
|
||||
const el = document.getElementById('setup-error');
|
||||
el.textContent = m; el.style.display = 'block';
|
||||
}
|
||||
|
||||
// ─── SETTINGS ───
|
||||
export function openSettings() {
|
||||
document.getElementById('s-url').value = S.cfg.url || '';
|
||||
document.getElementById('s-user').value = S.cfg.user || '';
|
||||
document.getElementById('s-pass').value = '';
|
||||
document.getElementById('s-lastfm').value = S.cfg.lastfmKey || '';
|
||||
document.getElementById('s-backend').value = S.cfg.backendUrl || '';
|
||||
document.getElementById('settings-modal').classList.add('open');
|
||||
checkBackend();
|
||||
}
|
||||
export function closeSettings() { document.getElementById('settings-modal').classList.remove('open'); }
|
||||
export function saveSettings() {
|
||||
const pass = document.getElementById('s-pass').value;
|
||||
S.cfg.url = document.getElementById('s-url').value.trim().replace(/\/$/,'');
|
||||
S.cfg.user = document.getElementById('s-user').value.trim();
|
||||
if(pass) S.cfg.pass = pass;
|
||||
S.cfg.lastfmKey = document.getElementById('s-lastfm').value.trim();
|
||||
S.cfg.backendUrl = document.getElementById('s-backend').value.trim().replace(/\/$/,'');
|
||||
localStorage.setItem('ns_cfg', JSON.stringify(S.cfg));
|
||||
closeSettings(); toast('✅ Gespeichert');
|
||||
}
|
||||
export async function checkBackend() {
|
||||
const dot = document.getElementById('backend-status-dot');
|
||||
const txt = document.getElementById('backend-status-text');
|
||||
const url = document.getElementById('s-backend').value.trim() || S.cfg.backendUrl;
|
||||
if(!url) { dot.className='status-dot'; txt.textContent='Keine URL konfiguriert'; return; }
|
||||
dot.className='status-dot'; txt.textContent='Verbinde…';
|
||||
try {
|
||||
const r = await fetch(`${url}/api/health`, {signal: AbortSignal.timeout(4000)});
|
||||
const d = await r.json();
|
||||
dot.className='status-dot ok';
|
||||
txt.textContent = `Verbunden · yt-dlp ${d.ytdlpVersion||'OK'} · ${d.musicPath||''}`;
|
||||
} catch(e) { dot.className='status-dot err'; txt.textContent='Nicht erreichbar: '+e.message; }
|
||||
}
|
||||
|
||||
// ─── CONTEXT MENU ───
|
||||
export function showCtxMenu(e, song, list, idx) {
|
||||
const menu = document.getElementById('ctx-menu');
|
||||
menu.innerHTML = '';
|
||||
const items = [
|
||||
{ icon: '▶', label: 'Abspielen', fn: () => playQueue(list, idx) },
|
||||
{ icon: '+', label: 'Als Nächstes einfügen', fn: () => {
|
||||
S.queue.splice(S.qIdx+1, 0, {...song});
|
||||
renderQueue(); toast('In Warteschlange eingefügt');
|
||||
}},
|
||||
{ icon: '⬇', label: 'Am Ende der Queue', fn: () => {
|
||||
S.queue.push({...song}); renderQueue(); toast('Zur Queue hinzugefügt');
|
||||
}},
|
||||
{ sep: true },
|
||||
{ icon: '🎶', label: 'Zu Playlist hinzufügen →', submenu: true, fn: () => openPlModal([song]) },
|
||||
{ icon: '⭐', label: song._starred ? 'Aus Favoriten entfernen' : 'Zu Favoriten', fn: () => {
|
||||
api(song._starred ? 'unstar' : 'star', `&id=${song.id}`)
|
||||
.then(() => { song._starred = !song._starred; toast(song._starred ? '⭐ Favorit hinzugefügt' : 'Favorit entfernt'); })
|
||||
.catch(err => toast('Fehler: ' + err.message));
|
||||
}},
|
||||
{ sep: true },
|
||||
{ icon: 'ℹ', label: 'Song-Info', fn: () => showSongInfo(song) },
|
||||
{ icon: '⬇', label: 'Herunterladen', fn: () => dlSongLocal(song) },
|
||||
];
|
||||
items.forEach(item => {
|
||||
if(item.sep) { const d=document.createElement('div'); d.className='ctx-separator'; menu.appendChild(d); return; }
|
||||
const el = document.createElement('div'); el.className = 'ctx-item';
|
||||
el.innerHTML = `<span style="font-size:14px;width:18px;text-align:center">${item.icon}</span><span>${item.label}</span>`;
|
||||
el.onclick = () => { hideCtxMenu(); item.fn(); };
|
||||
menu.appendChild(el);
|
||||
});
|
||||
const vw=window.innerWidth, vh=window.innerHeight;
|
||||
let x=e.clientX, y=e.clientY;
|
||||
menu.style.left='-9999px'; menu.style.top='-9999px'; menu.style.display='block';
|
||||
const w=menu.offsetWidth, h=menu.offsetHeight;
|
||||
if(x+w>vw-8) x=vw-w-8;
|
||||
if(y+h>vh-8) y=vh-h-8;
|
||||
menu.style.left=x+'px'; menu.style.top=y+'px';
|
||||
}
|
||||
export function hideCtxMenu() {
|
||||
const m = document.getElementById('ctx-menu');
|
||||
m.style.display='none'; m.innerHTML='';
|
||||
}
|
||||
document.addEventListener('click', e => {
|
||||
if(!document.getElementById('ctx-menu').contains(e.target)) hideCtxMenu();
|
||||
});
|
||||
document.addEventListener('keydown', e => { if(e.key==='Escape') hideCtxMenu(); });
|
||||
|
||||
// ─── PLAYLIST MODAL (Add to / Create) ───
|
||||
export async function openPlModal(songs) {
|
||||
S.plModalSongs = songs;
|
||||
document.getElementById('pl-modal-title').textContent =
|
||||
songs.length===1 ? `"${songs[0].title}" zu Playlist` : `${songs.length} Songs zu Playlist`;
|
||||
document.getElementById('pl-new-name').value = '';
|
||||
const list = document.getElementById('pl-list');
|
||||
list.innerHTML = '<div style="font-size:12px;color:var(--text3);padding:8px">Lädt…</div>';
|
||||
document.getElementById('pl-modal').classList.add('open');
|
||||
try {
|
||||
const r = await api('getPlaylists');
|
||||
S.cachedPlaylists = r.playlists?.playlist || [];
|
||||
list.innerHTML = '';
|
||||
if(!S.cachedPlaylists.length) {
|
||||
list.innerHTML = '<div style="font-size:12px;color:var(--text3);padding:8px">Noch keine Playlists vorhanden</div>';
|
||||
return;
|
||||
}
|
||||
S.cachedPlaylists.forEach(pl => {
|
||||
const row = document.createElement('div'); row.className = 'pl-row';
|
||||
row.innerHTML = `<svg width="14" height="14" 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"/></svg>
|
||||
<span>${esc(pl.name)}</span><span style="margin-left:auto;font-size:11px;color:var(--text3)">${pl.songCount} Titel</span>`;
|
||||
row.onclick = () => addSongsToPlaylist(pl.id, pl.name);
|
||||
list.appendChild(row);
|
||||
});
|
||||
} catch(e) { list.innerHTML = `<div style="color:var(--danger);font-size:12px;padding:8px">${e.message}</div>`; }
|
||||
}
|
||||
export function closePlModal() {
|
||||
document.getElementById('pl-modal').classList.remove('open');
|
||||
S.plModalSongs = [];
|
||||
}
|
||||
export async function addSongsToPlaylist(plId, plName) {
|
||||
closePlModal();
|
||||
try {
|
||||
const ids = S.plModalSongs.map(s => `&songIdToAdd=${s.id}`).join('');
|
||||
await api('updatePlaylist', `&playlistId=${plId}${ids}`);
|
||||
toast(`✅ ${S.plModalSongs.length===1 ? S.plModalSongs[0].title : S.plModalSongs.length+' Songs'} → ${plName}`);
|
||||
} catch(e) { toast('Fehler: ' + e.message); }
|
||||
}
|
||||
export async function createAndAddPlaylist() {
|
||||
const name = document.getElementById('pl-new-name').value.trim();
|
||||
if(!name) { document.getElementById('pl-new-name').focus(); return; }
|
||||
closePlModal();
|
||||
try {
|
||||
const ids = S.plModalSongs.map(s => `&songId=${s.id}`).join('');
|
||||
await api('createPlaylist', `&name=${encodeURIComponent(name)}${ids}`);
|
||||
toast(`✅ Playlist "${name}" erstellt`);
|
||||
if(document.getElementById('page-playlists').classList.contains('active')) loadPlaylists();
|
||||
} catch(e) { toast('Fehler: ' + e.message); }
|
||||
}
|
||||
export function createPlaylistPrompt() {
|
||||
document.getElementById('pl-new-name').value = '';
|
||||
S.plModalSongs = [];
|
||||
document.getElementById('pl-modal-title').textContent = 'Neue Playlist erstellen';
|
||||
document.getElementById('pl-list').innerHTML = '<div style="font-size:12px;color:var(--text3);padding:8px 0">Füge Songs später per Rechtsklick hinzu.</div>';
|
||||
document.getElementById('pl-modal').classList.add('open');
|
||||
}
|
||||
document.addEventListener('click', e => {
|
||||
const m = document.getElementById('pl-modal');
|
||||
if(m.classList.contains('open') && e.target===m) closePlModal();
|
||||
});
|
||||
|
||||
// ─── SONG INFO MODAL ───
|
||||
export function showSongInfo(s) {
|
||||
const cv = coverUrl(s.coverArt, 200);
|
||||
document.getElementById('info-cover').innerHTML = cv
|
||||
? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">`
|
||||
: '<div class="no-art" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px">🎵</div>';
|
||||
document.getElementById('info-top-title').textContent = s.title || '—';
|
||||
document.getElementById('info-top-sub').textContent = (s.artist||'—') + (s.album ? ' · '+s.album : '');
|
||||
const fields = [
|
||||
['Titel', s.title],
|
||||
['Künstler', s.artist],
|
||||
['Album', s.album],
|
||||
['Jahr', s.year],
|
||||
['Track #', s.track],
|
||||
['Disc #', s.discNumber],
|
||||
['Genre', s.genre],
|
||||
['Dauer', formatDur(s.duration)],
|
||||
['Bitrate', s.bitRate ? s.bitRate+' kbps' : null],
|
||||
['Format', s.suffix?.toUpperCase()],
|
||||
['Dateigröße', s.size ? Math.round(s.size/1024/1024*10)/10+' MB' : null],
|
||||
['Pfad', s.path],
|
||||
['Plays', s.playCount],
|
||||
].filter(([,v]) => v!=null && v!=='' && v!==undefined);
|
||||
document.getElementById('info-rows').innerHTML = fields.map(([l,v]) =>
|
||||
`<div class="info-row"><span class="info-label">${l}</span><span class="info-val">${esc(String(v))}</span></div>`
|
||||
).join('');
|
||||
document.getElementById('info-modal').classList.add('open');
|
||||
}
|
||||
export function closeInfoModal() { document.getElementById('info-modal').classList.remove('open'); }
|
||||
document.addEventListener('click', e => {
|
||||
const m = document.getElementById('info-modal');
|
||||
if(m.classList.contains('open') && e.target===m) closeInfoModal();
|
||||
});
|
||||
|
||||
// ─── DOWNLOAD MODAL ───
|
||||
export function openDlModal(track) {
|
||||
if(!S.cfg.backendUrl) { toast('⚠ Kein Backend konfiguriert. Bitte in Einstellungen eintragen.'); return; }
|
||||
S.downloadTarget = track; S.dlType = 'track';
|
||||
document.querySelectorAll('.modal-opt').forEach(o => o.classList.toggle('selected', o.dataset.type==='track'));
|
||||
const info = document.getElementById('dl-modal-info');
|
||||
const art = track.artworkUrl100 || track.artworkUrl60 || '';
|
||||
info.innerHTML = `${art ? `<div class="modal-art"><img src="${art}"></div>` : '<div class="modal-art" style="display:flex;align-items:center;justify-content:center;font-size:28px">🎵</div>'}
|
||||
<div class="qi-info"><div class="mti-name">${esc(track.trackName||track.collectionName||'—')}</div><div class="mti-sub">${esc(track.artistName||'—')}${track.collectionName?' · '+esc(track.collectionName):''}</div></div>`;
|
||||
document.getElementById('dl-album-sub').textContent = track.collectionName ? `"${track.collectionName}" herunterladen` : 'Album herunterladen';
|
||||
document.getElementById('download-modal').classList.add('open');
|
||||
}
|
||||
export function closeDlModal() { document.getElementById('download-modal').classList.remove('open'); }
|
||||
export function selectDlType(el, type) {
|
||||
S.dlType = type;
|
||||
document.querySelectorAll('.modal-opt').forEach(o => o.classList.remove('selected'));
|
||||
el.classList.add('selected');
|
||||
}
|
||||
export async function executeDownload() {
|
||||
if(!S.downloadTarget || !S.cfg.backendUrl) return;
|
||||
closeDlModal();
|
||||
const jobId = 'job_' + Date.now();
|
||||
const payload = {
|
||||
type: S.dlType,
|
||||
artist: S.downloadTarget.artistName || 'Unknown Artist',
|
||||
title: S.downloadTarget.trackName || S.downloadTarget.collectionName || 'Unknown',
|
||||
album: S.downloadTarget.collectionName || '',
|
||||
artworkUrl: S.downloadTarget.artworkUrl100 || S.downloadTarget.artworkUrl60 || '',
|
||||
itunesId: S.downloadTarget.trackId || S.downloadTarget.collectionId || null,
|
||||
collectionId: S.downloadTarget.collectionId || null,
|
||||
};
|
||||
addJob(jobId, payload.title, payload.artist);
|
||||
try {
|
||||
const res = await fetch(`${S.cfg.backendUrl}/api/download`, {
|
||||
method: 'POST', headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({...payload, jobId}),
|
||||
});
|
||||
if(!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
pollJob(jobId);
|
||||
} catch(e) {
|
||||
updateJob(jobId, 'error', 'Verbindung zum Backend fehlgeschlagen');
|
||||
toast('❌ Backend nicht erreichbar: '+e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── JOBS ───
|
||||
function addJob(id, title, artist) {
|
||||
S.jobs[id] = {title, artist, progress:0, status:'pending'};
|
||||
renderJobs();
|
||||
}
|
||||
function updateJob(id, status, msg, progress) {
|
||||
if(!S.jobs[id]) return;
|
||||
S.jobs[id] = {...S.jobs[id], status, msg:msg||'', progress: progress ?? S.jobs[id].progress};
|
||||
renderJobs();
|
||||
if(status==='done') setTimeout(() => { delete S.jobs[id]; renderJobs(); }, 5000);
|
||||
if(status==='error') setTimeout(() => { delete S.jobs[id]; renderJobs(); }, 8000);
|
||||
}
|
||||
function renderJobs() {
|
||||
const panel = document.getElementById('jobs-panel');
|
||||
panel.innerHTML = '';
|
||||
Object.entries(S.jobs).forEach(([id,j]) => {
|
||||
const c = document.createElement('div'); c.className = 'job-card';
|
||||
const isDone=j.status==='done', isErr=j.status==='error';
|
||||
const statusText = isErr ? 'Fehler' : isDone ? '✓ Fertig! Bibliothek wird gescannt…' : j.msg || 'Wird heruntergeladen…';
|
||||
c.innerHTML = `<div class="job-header">
|
||||
<div class="job-title">${esc(j.title)}</div>
|
||||
<div class="job-status">${esc(j.artist)}</div>
|
||||
</div>
|
||||
<div class="job-bar"><div class="job-fill ${isDone?'done':isErr?'error':''}" style="width:${isDone?100:isErr?100:j.progress}%"></div></div>
|
||||
<div class="job-sub">${statusText}</div>`;
|
||||
panel.appendChild(c);
|
||||
});
|
||||
}
|
||||
async function pollJob(jobId) {
|
||||
if(!S.jobs[jobId]) return;
|
||||
try {
|
||||
const res = await fetch(`${S.cfg.backendUrl}/api/status/${jobId}`);
|
||||
const d = await res.json();
|
||||
updateJob(jobId, d.status, d.message, d.progress);
|
||||
if(d.status!=='done' && d.status!=='error') setTimeout(() => pollJob(jobId), 1500);
|
||||
else if(d.status==='done') toast(`✅ ${S.jobs[jobId]?.title||'Track'} gespeichert!`);
|
||||
} catch { updateJob(jobId, 'error', 'Status-Abfrage fehlgeschlagen'); }
|
||||
}
|
||||
|
||||
// ─── EDIT PLAYLIST MODAL ───
|
||||
export function openEditPlModal(pl) {
|
||||
const overlay = document.getElementById('edit-pl-overlay');
|
||||
document.getElementById('edit-pl-name').value = pl.name || '';
|
||||
document.getElementById('edit-pl-desc').value = pl.comment || '';
|
||||
const tog = document.getElementById('edit-pl-public-toggle');
|
||||
tog.classList.toggle('on', !!pl.public);
|
||||
const cv = coverUrl(pl.coverArt, 300);
|
||||
document.getElementById('edit-pl-cover').innerHTML = cv
|
||||
? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">`
|
||||
: '<div class="no-art" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px">🎶</div>';
|
||||
overlay.classList.add('open');
|
||||
}
|
||||
export function closeEditPlModal() { document.getElementById('edit-pl-overlay').classList.remove('open'); }
|
||||
export async function saveEditPlaylist() {
|
||||
const pl = S._currentPlaylist; if(!pl) return;
|
||||
const name = document.getElementById('edit-pl-name').value.trim();
|
||||
if(!name) { toast('Name darf nicht leer sein'); return; }
|
||||
const comment = document.getElementById('edit-pl-desc').value.trim();
|
||||
const pub = document.getElementById('edit-pl-public-toggle').classList.contains('on');
|
||||
const btn = document.querySelector('.edit-pl-btn-save');
|
||||
btn.disabled=true; btn.textContent='Speichern…';
|
||||
try {
|
||||
await api('updatePlaylist', `&playlistId=${pl.id}&name=${encodeURIComponent(name)}&comment=${encodeURIComponent(comment)}&public=${pub}`);
|
||||
S._currentPlaylist = {...S._currentPlaylist, name, comment, public:pub};
|
||||
document.getElementById('playlist-detail-name').textContent = name;
|
||||
const descEl = document.getElementById('playlist-detail-desc');
|
||||
if(descEl) { descEl.textContent=comment; descEl.style.display=comment?'':'none'; }
|
||||
closeEditPlModal();
|
||||
toast('Playlist aktualisiert');
|
||||
} catch(e) { toast('Fehler: '+e.message); }
|
||||
finally { btn.disabled=false; btn.textContent='Speichern'; }
|
||||
}
|
||||
export function editPlUploadCover() { document.getElementById('edit-pl-file').click(); }
|
||||
export async function editPlCoverSelected(input) {
|
||||
const file = input.files?.[0]; if(!file || !S._currentPlaylist) return;
|
||||
input.value = '';
|
||||
const preview = URL.createObjectURL(file);
|
||||
document.getElementById('edit-pl-cover').innerHTML = `<img src="${preview}" style="width:100%;height:100%;object-fit:cover">`;
|
||||
try {
|
||||
const token = await ndAuth();
|
||||
const form = new FormData(); form.append('image', file, file.name);
|
||||
const res = await fetch(`${S.cfg.url}/api/playlist/${S._currentPlaylist.id}/image`, {
|
||||
method: 'POST',
|
||||
headers: {'X-Nd-Authorization': 'Bearer '+token},
|
||||
body: form,
|
||||
});
|
||||
if(!res.ok) throw new Error(res.status);
|
||||
toast('Cover aktualisiert');
|
||||
setTimeout(() => {
|
||||
const bust = coverUrl(S._currentPlaylist.coverArt, 300) + '&_cb=' + Date.now();
|
||||
const detailImg = document.getElementById('playlist-cover');
|
||||
if(detailImg) detailImg.innerHTML = `<img src="${bust}" onerror="this.parentNode.innerHTML='<div class=\\'no-art\\'>🎶</div>'">`;
|
||||
document.getElementById('edit-pl-cover').innerHTML = `<img src="${bust}" style="width:100%;height:100%;object-fit:cover">`;
|
||||
}, 800);
|
||||
} catch(e) {
|
||||
S._ndToken = null;
|
||||
toast('Cover-Upload fehlgeschlagen: '+e.message);
|
||||
const cv = coverUrl(S._currentPlaylist.coverArt, 300);
|
||||
document.getElementById('edit-pl-cover').innerHTML = cv
|
||||
? `<img src="${cv}" style="width:100%;height:100%;object-fit:cover">`
|
||||
: '<div class="no-art" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px">🎶</div>';
|
||||
}
|
||||
}
|
||||
export async function editPlRemoveCover() {
|
||||
if(!S._currentPlaylist) return;
|
||||
try {
|
||||
const token = await ndAuth();
|
||||
const res = await fetch(`${S.cfg.url}/api/playlist/${S._currentPlaylist.id}/image`, {
|
||||
method: 'DELETE', headers: {'X-Nd-Authorization': 'Bearer '+token},
|
||||
});
|
||||
if(!res.ok) throw new Error(res.status);
|
||||
toast('Cover entfernt');
|
||||
S._currentPlaylist.coverArt = null;
|
||||
document.getElementById('edit-pl-cover').innerHTML = '<div class="no-art" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px">🎶</div>';
|
||||
document.getElementById('playlist-cover').innerHTML = '<div class="no-art">🎶</div>';
|
||||
} 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';
|
||||
document.getElementById('np-overlay').classList.toggle('queue-mode', S.npQueueMode);
|
||||
document.getElementById('np-tab-player').classList.toggle('active', !S.npQueueMode);
|
||||
document.getElementById('np-tab-queue').classList.toggle('active', S.npQueueMode);
|
||||
if(S.npQueueMode) renderNpQueue();
|
||||
}
|
||||
|
||||
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