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>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed
1 parent
d8908c69e9
commit
308a27d293
11 files changed
+78
-54
No files matched your search
@@ -0,0 +1,754 @@
|
||||
import { S } from '../state.js';
|
||||
import { esc, toast } from '../utils.js';
|
||||
import { cancelMusicAutoplay } from '../player/player.js';
|
||||
|
||||
// ─── HTTP HELPERS ───
|
||||
// API calls are routed through the NovaSonic backend proxy to avoid CORS restrictions.
|
||||
// Audio streaming uses <audio src> directly (HTML media elements bypass CORS).
|
||||
async function absRequest(method, path, body) {
|
||||
const backend = S.cfg.backendUrl;
|
||||
let url, headers;
|
||||
|
||||
if (backend) {
|
||||
// Proxy through NovaSonic backend — no CORS issue
|
||||
url = `${backend}/api/abs-proxy${path}`;
|
||||
headers = {
|
||||
'Content-Type': 'application/json',
|
||||
'X-ABS-URL': S.abs.url,
|
||||
'X-ABS-Token': S.abs.token || '',
|
||||
};
|
||||
} else {
|
||||
// Direct — requires CORS to be configured on the ABS server
|
||||
url = `${S.abs.url}${path}`;
|
||||
headers = { 'Content-Type': 'application/json' };
|
||||
if (S.abs.token) headers['Authorization'] = `Bearer ${S.abs.token}`;
|
||||
}
|
||||
|
||||
const opts = { method, headers };
|
||||
if (body !== undefined) opts.body = JSON.stringify(body);
|
||||
const res = await fetch(url, opts);
|
||||
if (!res.ok) {
|
||||
const txt = await res.text().catch(() => '');
|
||||
throw new Error(`ABS ${method} ${path}: HTTP ${res.status} ${txt.slice(0, 120)}`);
|
||||
}
|
||||
const txt = await res.text();
|
||||
return txt ? JSON.parse(txt) : {};
|
||||
}
|
||||
const absGet = p => absRequest('GET', p);
|
||||
const absPost = (p, b) => absRequest('POST', p, b);
|
||||
const absPatch = (p, b) => absRequest('PATCH', p, b);
|
||||
|
||||
// ─── AUTH ───
|
||||
export async function absVerifyApiKey(url, apiKey) {
|
||||
S.abs.url = url.replace(/\/$/, '');
|
||||
S.abs.token = apiKey;
|
||||
// Verify by fetching current user — throws if token is invalid
|
||||
const me = await absGet('/api/me');
|
||||
S.abs.userId = me.id || null;
|
||||
return me;
|
||||
}
|
||||
|
||||
// ─── LIBRARIES ───
|
||||
export async function absGetLibraries() {
|
||||
const d = await absGet('/api/libraries');
|
||||
return d.libraries || [];
|
||||
}
|
||||
|
||||
export async function absGetItems(libId, { page = 0, limit = 100, search = '' } = {}) {
|
||||
if (search) {
|
||||
const d = await absGet(`/api/libraries/${libId}/search?q=${encodeURIComponent(search)}&limit=40`);
|
||||
const items = (d.book || d.podcast || []).map(r => r.libraryItem || r);
|
||||
return { items, total: items.length };
|
||||
}
|
||||
const d = await absGet(
|
||||
`/api/libraries/${libId}/items?expanded=1&limit=${limit}&page=${page}` +
|
||||
`&sort=media.metadata.title&asc=1&include=progress`
|
||||
);
|
||||
return { items: d.results || [], total: d.total || 0 };
|
||||
}
|
||||
|
||||
export async function absGetItem(itemId) {
|
||||
return absGet(`/api/items/${itemId}?expanded=1`);
|
||||
}
|
||||
|
||||
export function absCoverUrl(itemId) {
|
||||
if (!S.abs.token || !S.abs.url || !itemId) return null;
|
||||
return `${S.abs.url}/api/items/${itemId}/cover?token=${encodeURIComponent(S.abs.token)}`;
|
||||
}
|
||||
|
||||
// ─── PROGRESS ───
|
||||
export async function absGetProgress(itemId) {
|
||||
try { return await absGet(`/api/me/progress/${itemId}`); } catch { return null; }
|
||||
}
|
||||
|
||||
async function absSaveProgress(itemId, currentTime, duration) {
|
||||
if (!itemId || !S.abs.token) return;
|
||||
try {
|
||||
const progress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
|
||||
await absPatch(`/api/me/progress/${itemId}`, {
|
||||
currentTime, duration, progress,
|
||||
isFinished: progress >= 0.99,
|
||||
lastUpdate: Date.now(),
|
||||
});
|
||||
} catch (e) { console.warn('ABS progress sync failed:', e.message); }
|
||||
}
|
||||
|
||||
// ─── PLAYBACK SESSION ───
|
||||
async function absStartSession(itemId) {
|
||||
return absPost(`/api/items/${itemId}/play`, {
|
||||
deviceInfo: { clientName: 'NovaSonic', clientVersion: '1.0' },
|
||||
supportedMimeTypes: ['audio/mpeg', 'audio/mp4', 'audio/aac', 'audio/ogg', 'audio/flac', 'audio/m4b'],
|
||||
mediaPlayer: 'html5',
|
||||
forceDirectPlay: true,
|
||||
forceTranscode: false,
|
||||
});
|
||||
}
|
||||
|
||||
async function absCloseSession(sessionId) {
|
||||
try { await absPost(`/api/session/${sessionId}/close`, {}); } catch {}
|
||||
}
|
||||
|
||||
// ─── PLAYER INTERNALS ───
|
||||
let _audio = null;
|
||||
let _syncTimer = null;
|
||||
let _absMiniVisible = false; // true = ABS bar covers the music player, only toggled on play start
|
||||
let _sleepTimer = null;
|
||||
let _sleepEndTime = null;
|
||||
let _sleepTick = null;
|
||||
|
||||
function _getAudio() {
|
||||
if (!_audio) {
|
||||
_audio = document.getElementById('abs-audio');
|
||||
_audio.addEventListener('timeupdate', _onTimeUpdate);
|
||||
_audio.addEventListener('ended', _onTrackEnded);
|
||||
_audio.addEventListener('play', () => { S.absPlayer.playing = true; _absMiniVisible = true; _renderControls(); _startSync(); });
|
||||
_audio.addEventListener('pause', () => { S.absPlayer.playing = false; _renderControls(); _doSync(); });
|
||||
}
|
||||
return _audio;
|
||||
}
|
||||
|
||||
function _globalTime() {
|
||||
const ap = S.absPlayer;
|
||||
const track = ap.audioTracks[ap.trackIdx];
|
||||
return (track?.startOffset ?? 0) + (_audio?.currentTime ?? 0);
|
||||
}
|
||||
|
||||
function _onTimeUpdate() {
|
||||
const ap = S.absPlayer;
|
||||
ap.currentTime = _globalTime();
|
||||
_updateChapter();
|
||||
_renderProgress();
|
||||
}
|
||||
|
||||
function _onTrackEnded() {
|
||||
const ap = S.absPlayer;
|
||||
if (ap.trackIdx < ap.audioTracks.length - 1) {
|
||||
ap.trackIdx++;
|
||||
_loadTrack(ap.trackIdx, 0);
|
||||
_audio.play().catch(() => {});
|
||||
} else {
|
||||
ap.playing = false;
|
||||
_doSync(true);
|
||||
_renderControls();
|
||||
toast('📚 Hörbuch beendet');
|
||||
}
|
||||
}
|
||||
|
||||
function _loadTrack(idx, localOffset = 0) {
|
||||
const ap = S.absPlayer;
|
||||
const track = ap.audioTracks[idx];
|
||||
if (!track) return;
|
||||
ap.trackIdx = idx;
|
||||
const sep = track.contentUrl.includes('?') ? '&' : '?';
|
||||
_audio.src = `${S.abs.url}${track.contentUrl}${sep}token=${encodeURIComponent(S.abs.token)}`;
|
||||
_audio.playbackRate = ap.speed;
|
||||
_audio.currentTime = Math.max(0, localOffset);
|
||||
}
|
||||
|
||||
function _findTrack(globalTime) {
|
||||
const tracks = S.absPlayer.audioTracks;
|
||||
if (!tracks.length) return { idx: 0, local: globalTime };
|
||||
let idx = 0;
|
||||
for (let i = 0; i < tracks.length; i++) {
|
||||
if (globalTime >= tracks[i].startOffset) idx = i;
|
||||
}
|
||||
return { idx, local: Math.max(0, globalTime - (tracks[idx].startOffset ?? 0)) };
|
||||
}
|
||||
|
||||
function _updateChapter() {
|
||||
const ap = S.absPlayer;
|
||||
if (!ap.chapters.length) return;
|
||||
const t = ap.currentTime;
|
||||
let idx = 0;
|
||||
for (let i = 0; i < ap.chapters.length; i++) {
|
||||
if (ap.chapters[i].start <= t) idx = i;
|
||||
}
|
||||
if (idx !== ap.chapterIdx) {
|
||||
ap.chapterIdx = idx;
|
||||
_renderChapterName();
|
||||
_renderChapterList();
|
||||
}
|
||||
}
|
||||
|
||||
function _startSync() {
|
||||
if (_syncTimer) return;
|
||||
_syncTimer = setInterval(() => _doSync(), 30_000);
|
||||
}
|
||||
function _stopSync() { if (_syncTimer) { clearInterval(_syncTimer); _syncTimer = null; } }
|
||||
function _doSync(finished = false) {
|
||||
const ap = S.absPlayer;
|
||||
if (ap.item) absSaveProgress(ap.item.id, ap.currentTime, ap.duration);
|
||||
}
|
||||
|
||||
// ─── PUBLIC PLAYER ───
|
||||
export async function absPlayItem(item) {
|
||||
const ap = S.absPlayer;
|
||||
const audio = _getAudio();
|
||||
|
||||
cancelMusicAutoplay(); // pause music + invalidate any stale canplay callbacks
|
||||
if (ap._sessionId) { absCloseSession(ap._sessionId); ap._sessionId = null; }
|
||||
_stopSync();
|
||||
audio.pause();
|
||||
|
||||
toast('⏳ Lade Hörbuch…');
|
||||
let session;
|
||||
try {
|
||||
session = await absStartSession(item.id);
|
||||
} catch (e) {
|
||||
toast(`❌ ${e.message}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const tracks = session.audioTracks || [];
|
||||
const chapters = session.chapters || item.media?.chapters || [];
|
||||
const duration = tracks.reduce((s, t) => s + (t.duration ?? 0), 0) || (item.media?.duration ?? 0);
|
||||
|
||||
const saved = await absGetProgress(item.id);
|
||||
const startTime = (saved?.currentTime && saved.currentTime > 10) ? saved.currentTime : 0;
|
||||
|
||||
ap.item = item;
|
||||
ap._sessionId = session.id;
|
||||
ap.audioTracks = tracks;
|
||||
ap.chapters = chapters;
|
||||
ap.duration = duration;
|
||||
ap.currentTime = startTime;
|
||||
ap.chapterIdx = -1;
|
||||
ap.speed = ap.speed || 1.0;
|
||||
|
||||
if (tracks.length) {
|
||||
const { idx, local } = _findTrack(startTime);
|
||||
_loadTrack(idx, local);
|
||||
} else if (item.media?.audioFiles?.[0]) {
|
||||
const f = item.media.audioFiles[0];
|
||||
_audio.src = `${S.abs.url}/api/items/${item.id}/file/${f.index ?? 0}?token=${encodeURIComponent(S.abs.token)}`;
|
||||
_audio.playbackRate = ap.speed;
|
||||
_audio.currentTime = startTime;
|
||||
ap.duration = item.media.duration || 0;
|
||||
}
|
||||
|
||||
_updateChapter();
|
||||
absOpenPlayer();
|
||||
_renderPlayer();
|
||||
|
||||
try { await audio.play(); } catch (e) { toast('Wiedergabe: ' + e.message); }
|
||||
}
|
||||
|
||||
export function absTogglePlay() {
|
||||
const audio = _getAudio();
|
||||
if (S.absPlayer.playing) {
|
||||
audio.pause();
|
||||
} else {
|
||||
if (S.audio && !S.audio.paused) S.audio.pause();
|
||||
audio.play().catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
export function absInterrupt() {
|
||||
// Always hide the ABS bar when music takes over, regardless of ABS play state
|
||||
if (_absMiniVisible) { _absMiniVisible = false; _renderMiniBar(); }
|
||||
if (!S.absPlayer.item || !S.absPlayer.playing) return;
|
||||
_getAudio().pause();
|
||||
}
|
||||
|
||||
export function absSeek(globalTime) {
|
||||
const ap = S.absPlayer;
|
||||
globalTime = Math.max(0, Math.min(globalTime, ap.duration || Infinity));
|
||||
ap.currentTime = globalTime;
|
||||
if (ap.audioTracks.length) {
|
||||
const { idx, local } = _findTrack(globalTime);
|
||||
if (idx !== ap.trackIdx) {
|
||||
_loadTrack(idx, local);
|
||||
if (ap.playing) _audio.play().catch(() => {});
|
||||
} else {
|
||||
_audio.currentTime = local;
|
||||
}
|
||||
} else {
|
||||
_getAudio().currentTime = globalTime;
|
||||
}
|
||||
_renderProgress();
|
||||
}
|
||||
|
||||
export function absSkipSecs(secs) { absSeek(S.absPlayer.currentTime + secs); }
|
||||
|
||||
export function absNextChapter() {
|
||||
const ap = S.absPlayer;
|
||||
const next = ap.chapters[ap.chapterIdx + 1];
|
||||
if (next) absSeek(next.start);
|
||||
}
|
||||
|
||||
export function absPrevChapter() {
|
||||
const ap = S.absPlayer;
|
||||
const cur = ap.chapters[ap.chapterIdx];
|
||||
if (cur && ap.currentTime - cur.start > 5) { absSeek(cur.start); return; }
|
||||
const prev = ap.chapters[ap.chapterIdx - 1];
|
||||
if (prev) absSeek(prev.start);
|
||||
}
|
||||
|
||||
export function absSetSpeed(speed) {
|
||||
S.absPlayer.speed = speed;
|
||||
if (_audio) _audio.playbackRate = speed;
|
||||
document.querySelectorAll('#abs-speed-picker button').forEach(b =>
|
||||
b.classList.toggle('active', parseFloat(b.dataset.speed) === speed));
|
||||
const lbl = document.getElementById('abs-speed-val');
|
||||
if (lbl) lbl.textContent = `${speed}×`;
|
||||
document.getElementById('abs-speed-picker')?.classList.remove('open');
|
||||
}
|
||||
|
||||
export function absSleepIn(minutes) {
|
||||
clearTimeout(_sleepTimer); clearInterval(_sleepTick);
|
||||
_sleepTimer = null; _sleepTick = null; _sleepEndTime = null;
|
||||
document.getElementById('abs-sleep-picker')?.classList.remove('open');
|
||||
document.getElementById('abs-sleep-custom-row')?.classList.remove('active');
|
||||
if (!minutes) { S.absPlayer.sleepRemaining = null; _renderSleepBtn(); return; }
|
||||
_sleepEndTime = Date.now() + minutes * 60_000;
|
||||
_updateSleepTick();
|
||||
_sleepTimer = setTimeout(() => {
|
||||
_getAudio().pause();
|
||||
S.absPlayer.sleepRemaining = null; _sleepEndTime = null;
|
||||
clearInterval(_sleepTick); _sleepTick = null;
|
||||
_renderSleepBtn();
|
||||
toast('😴 Sleep Timer: Pause');
|
||||
}, minutes * 60_000);
|
||||
_sleepTick = setInterval(_updateSleepTick, 1000);
|
||||
_renderSleepBtn();
|
||||
}
|
||||
|
||||
function _updateSleepTick() {
|
||||
if (!_sleepEndTime) return;
|
||||
S.absPlayer.sleepRemaining = Math.max(0, Math.round((_sleepEndTime - Date.now()) / 1000));
|
||||
_renderSleepBtn();
|
||||
}
|
||||
|
||||
// ─── OVERLAY ───
|
||||
export function absOpenPlayer() {
|
||||
S.absPlayer.open = true;
|
||||
document.getElementById('abs-player')?.classList.add('open');
|
||||
}
|
||||
export function absClosePlayer() {
|
||||
S.absPlayer.open = false;
|
||||
document.getElementById('abs-player')?.classList.remove('open');
|
||||
}
|
||||
|
||||
export function absToggleChapters() {
|
||||
document.getElementById('abs-chapter-list')?.classList.toggle('open');
|
||||
_renderChapterList();
|
||||
}
|
||||
|
||||
export function absToggleSpeedPicker() {
|
||||
document.getElementById('abs-sleep-picker')?.classList.remove('open');
|
||||
document.getElementById('abs-speed-picker')?.classList.toggle('open');
|
||||
}
|
||||
|
||||
export function absToggleSleepPicker() {
|
||||
document.getElementById('abs-speed-picker')?.classList.remove('open');
|
||||
document.getElementById('abs-sleep-picker')?.classList.toggle('open');
|
||||
}
|
||||
|
||||
export function absSeekToChapter(idx) {
|
||||
const ch = S.absPlayer.chapters[idx];
|
||||
if (ch) absSeek(ch.start);
|
||||
}
|
||||
|
||||
// ─── CHAPTER TRACK MODE ───
|
||||
let _chapterTrackMode = localStorage.getItem('ns_abs_chtrack') === '1';
|
||||
|
||||
export function absToggleChapterTrack() {
|
||||
_chapterTrackMode = !_chapterTrackMode;
|
||||
localStorage.setItem('ns_abs_chtrack', _chapterTrackMode ? '1' : '0');
|
||||
document.getElementById('abs-chtrack-btn')?.classList.toggle('active', _chapterTrackMode);
|
||||
_renderProgress();
|
||||
}
|
||||
|
||||
function _chapterWindow() {
|
||||
const ap = S.absPlayer;
|
||||
if (!_chapterTrackMode || ap.chapterIdx < 0 || !ap.chapters.length) return null;
|
||||
const ch = ap.chapters[ap.chapterIdx];
|
||||
if (!ch || ch.start == null) return null;
|
||||
const nextCh = ap.chapters[ap.chapterIdx + 1];
|
||||
const end = nextCh?.start ?? ch.end ?? ap.duration;
|
||||
if (end <= ch.start) return null;
|
||||
return { start: ch.start, end };
|
||||
}
|
||||
|
||||
// ─── PROGRESS SCRUB ───
|
||||
let _scrubbing = false;
|
||||
export function absProgDown(e) { _scrubbing = true; _scrub(e); }
|
||||
export function absProgMove(e) { if (_scrubbing) _scrub(e); }
|
||||
export function absProgUp(e) { if (_scrubbing) { _scrubbing = false; _scrub(e); } }
|
||||
function _scrub(e) {
|
||||
const bar = document.getElementById('abs-prog-bar');
|
||||
if (!bar) return;
|
||||
const rect = bar.getBoundingClientRect();
|
||||
const pct = Math.max(0, Math.min(1, ((e.touches?.[0]?.clientX ?? e.clientX) - rect.left) / rect.width));
|
||||
const win = _chapterWindow();
|
||||
absSeek(win ? win.start + pct * (win.end - win.start) : pct * S.absPlayer.duration);
|
||||
}
|
||||
|
||||
// ─── RENDER HELPERS ───
|
||||
function _renderMiniBar() {
|
||||
const ap = S.absPlayer;
|
||||
const bar = document.getElementById('abs-mini-bar');
|
||||
if (!bar) return;
|
||||
if (!ap.item || !_absMiniVisible) { bar.classList.remove('visible'); return; }
|
||||
bar.classList.add('visible');
|
||||
const meta = ap.item?.media?.metadata || {};
|
||||
const cover = absCoverUrl(ap.item?.id);
|
||||
const coverEl = document.getElementById('abs-mini-cover');
|
||||
if (coverEl) {
|
||||
coverEl.innerHTML = cover
|
||||
? `<img src="${cover}" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:6px" onerror="this.style.display='none'">`
|
||||
: '📚';
|
||||
}
|
||||
const titleEl = document.getElementById('abs-mini-title');
|
||||
if (titleEl) titleEl.textContent = meta.title || 'Unbekannt';
|
||||
const ch = ap.chapters[ap.chapterIdx];
|
||||
const chEl = document.getElementById('abs-mini-chapter');
|
||||
if (chEl) chEl.textContent = ch?.title || meta.authorName || '';
|
||||
const playBtn = document.getElementById('abs-mini-play');
|
||||
if (playBtn) {
|
||||
playBtn.innerHTML = ap.playing
|
||||
? `<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>`
|
||||
: `<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>`;
|
||||
}
|
||||
}
|
||||
|
||||
function _fmt(secs) {
|
||||
if (!isFinite(secs) || secs < 0) secs = 0;
|
||||
const h = Math.floor(secs / 3600);
|
||||
const m = Math.floor((secs % 3600) / 60);
|
||||
const s = Math.floor(secs % 60);
|
||||
return h > 0
|
||||
? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
|
||||
: `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function _renderPlayer() {
|
||||
const ap = S.absPlayer;
|
||||
const meta = ap.item?.media?.metadata || {};
|
||||
const cover = absCoverUrl(ap.item?.id);
|
||||
const el = document.getElementById('abs-player');
|
||||
if (!el) return;
|
||||
const img = el.querySelector('#abs-cover');
|
||||
if (img) { img.src = cover || ''; img.style.display = cover ? '' : 'none'; }
|
||||
const pl = el.querySelector('#abs-cover-placeholder');
|
||||
if (pl) pl.style.display = cover ? 'none' : 'flex';
|
||||
el.querySelector('#abs-title').textContent = meta.title || 'Unbekannt';
|
||||
el.querySelector('#abs-author').textContent = meta.authorName || '';
|
||||
_renderProgress();
|
||||
_renderControls();
|
||||
_renderChapterName();
|
||||
_renderSleepBtn();
|
||||
_renderMiniBar();
|
||||
document.getElementById('abs-chtrack-btn')?.classList.toggle('active', _chapterTrackMode);
|
||||
}
|
||||
|
||||
function _renderProgress() {
|
||||
const ap = S.absPlayer;
|
||||
const win = _chapterWindow();
|
||||
const dispCur = win ? Math.max(0, ap.currentTime - win.start) : ap.currentTime;
|
||||
const dispDur = win ? win.end - win.start : ap.duration;
|
||||
const pct = dispDur > 0 ? Math.min(100, (dispCur / dispDur) * 100) : 0;
|
||||
|
||||
const fill = document.getElementById('abs-prog-fill');
|
||||
const thumb = document.getElementById('abs-prog-thumb');
|
||||
if (fill) fill.style.width = `${pct}%`;
|
||||
if (thumb) thumb.style.left = `${pct}%`;
|
||||
const cur = document.getElementById('abs-time-cur');
|
||||
const rem = document.getElementById('abs-time-rem');
|
||||
if (cur) cur.textContent = _fmt(dispCur);
|
||||
if (rem) rem.textContent = `-${_fmt(dispDur - dispCur)}`;
|
||||
|
||||
// mini bar strip always shows full-book progress
|
||||
const miniPct = ap.duration > 0 ? Math.min(100, (ap.currentTime / ap.duration) * 100) : 0;
|
||||
const miniFill = document.getElementById('abs-mini-prog-fill');
|
||||
if (miniFill) miniFill.style.width = `${miniPct}%`;
|
||||
}
|
||||
|
||||
function _renderControls() {
|
||||
const ap = S.absPlayer;
|
||||
const btn = document.getElementById('abs-playpause-btn');
|
||||
if (!btn) return;
|
||||
btn.innerHTML = ap.playing
|
||||
? `<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>`
|
||||
: `<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>`;
|
||||
const sv = document.getElementById('abs-speed-val');
|
||||
if (sv) sv.textContent = `${ap.speed}×`;
|
||||
_renderMiniBar();
|
||||
}
|
||||
|
||||
function _renderChapterName() {
|
||||
const ch = S.absPlayer.chapters[S.absPlayer.chapterIdx];
|
||||
const el = document.getElementById('abs-chapter-name');
|
||||
if (el) el.textContent = ch?.title || '';
|
||||
_renderMiniBar();
|
||||
}
|
||||
|
||||
function _renderChapterList() {
|
||||
const ap = S.absPlayer;
|
||||
const el = document.getElementById('abs-chapter-list');
|
||||
if (!el || !el.classList.contains('open')) return;
|
||||
el.innerHTML = ap.chapters.map((ch, i) => `
|
||||
<div class="abs-ch-item${i === ap.chapterIdx ? ' active' : ''}" onclick="absSeekToChapter(${i})">
|
||||
<span class="abs-ch-num">${i + 1}</span>
|
||||
<span class="abs-ch-title">${esc(ch.title || `Kapitel ${i + 1}`)}</span>
|
||||
<span class="abs-ch-start">${_fmt(ch.start)}</span>
|
||||
</div>`).join('');
|
||||
}
|
||||
|
||||
function _renderSleepBtn() {
|
||||
const btn = document.getElementById('abs-sleep-btn');
|
||||
if (!btn) return;
|
||||
const rem = S.absPlayer.sleepRemaining;
|
||||
const moonSvg = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>`;
|
||||
if (rem != null) {
|
||||
const m = Math.floor(rem / 60), s = String(rem % 60).padStart(2, '0');
|
||||
btn.innerHTML = `${moonSvg}<span>${m}:${s}</span>`;
|
||||
btn.classList.add('active');
|
||||
} else {
|
||||
btn.innerHTML = moonSvg;
|
||||
btn.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
// ─── BOOKS VIEW ───
|
||||
export async function loadAbsBooks(libId, search = '') {
|
||||
const grid = document.getElementById('abs-books-grid');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '<div class="abs-loading">Lade Bücher…</div>';
|
||||
try {
|
||||
const { items } = await absGetItems(libId, { search });
|
||||
if (!items.length) {
|
||||
grid.innerHTML = '<p class="abs-empty">Keine Bücher gefunden.</p>';
|
||||
return;
|
||||
}
|
||||
grid.innerHTML = items.map(item => {
|
||||
const meta = item.media?.metadata || {};
|
||||
const cover = absCoverUrl(item.id);
|
||||
const prog = item.userMediaProgress;
|
||||
const pct = prog ? Math.round((prog.progress ?? 0) * 100) : 0;
|
||||
return `
|
||||
<div class="abs-book-card" onclick="absOpenBook('${item.id}')">
|
||||
<div class="abs-book-cover-wrap">
|
||||
${cover
|
||||
? `<img src="${cover}" class="abs-book-cover" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">`
|
||||
: ''}
|
||||
<div class="abs-book-cover-ph" style="display:${cover ? 'none' : 'flex'}">📚</div>
|
||||
${pct > 0 && pct < 99 ? `<div class="abs-book-prog-wrap"><div class="abs-book-prog-fill" style="width:${pct}%"></div></div>` : ''}
|
||||
${pct >= 99 ? '<div class="abs-book-done">✓</div>' : ''}
|
||||
</div>
|
||||
<div class="abs-book-title">${esc(meta.title || 'Unbekannt')}</div>
|
||||
<div class="abs-book-author">${esc(meta.authorName || '')}</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
} catch (e) {
|
||||
grid.innerHTML = `<p class="abs-error">Fehler: ${esc(e.message)}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
export function absOpenBook(itemId) {
|
||||
const { navigate } = window;
|
||||
navigate('abs-book-detail', { id: itemId });
|
||||
}
|
||||
|
||||
export async function loadAbsBookDetail(itemId) {
|
||||
const el = document.getElementById('abs-book-detail-content');
|
||||
if (!el) return;
|
||||
el.innerHTML = '<div class="abs-loading">Lade Buch…</div>';
|
||||
try {
|
||||
const [item, prog] = await Promise.all([absGetItem(itemId), absGetProgress(itemId)]);
|
||||
window._absCurrentItem = item;
|
||||
const meta = item.media?.metadata || {};
|
||||
const cover = absCoverUrl(item.id);
|
||||
const chapters = item.media?.chapters || [];
|
||||
const duration = item.media?.duration ?? 0;
|
||||
const curTime = prog?.currentTime ?? 0;
|
||||
const pct = duration > 0 ? Math.round((curTime / duration) * 100) : 0;
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="abs-detail-header">
|
||||
<div class="abs-detail-cover-wrap">
|
||||
${cover
|
||||
? `<img src="${cover}" class="abs-detail-cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">`
|
||||
: ''}
|
||||
<div class="abs-detail-cover-ph" style="display:${cover ? 'none' : 'flex'}">📚</div>
|
||||
</div>
|
||||
<div class="abs-detail-meta">
|
||||
<h2 class="abs-detail-title">${esc(meta.title || 'Unbekannt')}</h2>
|
||||
<div class="abs-detail-author">${esc(meta.authorName || '')}</div>
|
||||
${meta.seriesName ? `<div class="abs-detail-series">${esc(meta.seriesName)}</div>` : ''}
|
||||
${meta.publishedYear ? `<div class="abs-detail-year">${esc(String(meta.publishedYear))}</div>` : ''}
|
||||
${duration ? `<div class="abs-detail-dur">${_fmt(duration)}</div>` : ''}
|
||||
${pct > 0 ? `
|
||||
<div class="abs-detail-progress-wrap">
|
||||
<div class="abs-detail-progress-bar"><div style="width:${pct}%"></div></div>
|
||||
<span>${pct}% gehört</span>
|
||||
</div>` : ''}
|
||||
<button class="abs-play-btn" onclick="absPlayItem(window._absCurrentItem)">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
${curTime > 60 ? 'Weiterhören' : 'Abspielen'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
${meta.description ? `<div class="abs-detail-desc">${esc(meta.description)}</div>` : ''}
|
||||
${chapters.length ? `
|
||||
<div class="abs-detail-chapters">
|
||||
<h3 class="abs-detail-chapters-title">Kapitel <span class="abs-ch-count">${chapters.length}</span></h3>
|
||||
${chapters.map((ch, i) => `
|
||||
<div class="abs-chapter-row" onclick="absPlayChapter(${ch.start})">
|
||||
<span class="abs-ch-num">${i + 1}</span>
|
||||
<span class="abs-ch-title">${esc(ch.title || `Kapitel ${i + 1}`)}</span>
|
||||
<span class="abs-ch-start">${_fmt(ch.start)}</span>
|
||||
</div>`).join('')}
|
||||
</div>` : ''}`;
|
||||
} catch (e) {
|
||||
el.innerHTML = `<p class="abs-error">Fehler: ${esc(e.message)}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
export function absPlayChapter(startTime) {
|
||||
if (!window._absCurrentItem) return;
|
||||
absPlayItem(window._absCurrentItem).then(() => {
|
||||
// Give audio time to load then seek
|
||||
setTimeout(() => absSeek(startTime), 800);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── SETTINGS ───
|
||||
export function absInitFromStorage() {
|
||||
try {
|
||||
const d = JSON.parse(localStorage.getItem('ns_abs') || 'null');
|
||||
if (d?.url && d?.token) {
|
||||
S.abs.url = d.url;
|
||||
S.abs.token = d.token;
|
||||
S.abs.userId = d.userId || null;
|
||||
S.abs.currentLibraryId = d.libId || null;
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function absSaveToStorage() {
|
||||
localStorage.setItem('ns_abs', JSON.stringify({
|
||||
url: S.abs.url, token: S.abs.token,
|
||||
userId: S.abs.userId, libId: S.abs.currentLibraryId,
|
||||
}));
|
||||
}
|
||||
|
||||
function _showAbsNavItem(show) {
|
||||
document.getElementById('nav-abs-section')?.style && (document.getElementById('nav-abs-section').style.display = show ? '' : 'none');
|
||||
const bnav = document.getElementById('bnav-audiobooks');
|
||||
if (bnav) bnav.style.display = show ? '' : 'none';
|
||||
}
|
||||
|
||||
function _setAbsStatusRow(state, msg) {
|
||||
// state: 'connected' | 'error' | 'none'
|
||||
const statusEl = document.getElementById('abs-s-status');
|
||||
const dotEl = document.getElementById('abs-s-dot');
|
||||
const btnEl = document.getElementById('abs-s-connect-btn');
|
||||
if (statusEl) statusEl.textContent = msg || 'Nicht verbunden';
|
||||
if (dotEl) {
|
||||
dotEl.style.display = state === 'none' ? 'none' : 'block';
|
||||
dotEl.className = 'status-dot' + (state === 'connected' ? ' ok' : state === 'error' ? ' err' : '');
|
||||
}
|
||||
if (btnEl) {
|
||||
btnEl.disabled = false;
|
||||
if (state === 'connected') {
|
||||
btnEl.textContent = 'Trennen';
|
||||
btnEl.style.color = 'var(--danger)';
|
||||
btnEl.style.borderColor = 'rgba(224,85,85,0.3)';
|
||||
} else {
|
||||
btnEl.textContent = 'Verbinden';
|
||||
btnEl.style.color = '';
|
||||
btnEl.style.borderColor = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function absOpenSettings() {
|
||||
const urlEl = document.getElementById('abs-s-url');
|
||||
if (urlEl) urlEl.value = S.abs.url || '';
|
||||
if (S.abs.token) {
|
||||
_setAbsStatusRow('connected', 'Verbunden · ' + (S.abs.url || ''));
|
||||
} else {
|
||||
_setAbsStatusRow('none', 'Nicht verbunden');
|
||||
}
|
||||
}
|
||||
|
||||
export function absToggleConnection() {
|
||||
if (S.abs.token) absDisconnect(); else absConnectSettings();
|
||||
}
|
||||
|
||||
export async function absConnectSettings() {
|
||||
const url = document.getElementById('abs-s-url')?.value.trim().replace(/\/$/, '');
|
||||
const apiKey = document.getElementById('abs-s-apikey')?.value.trim();
|
||||
if (!url || !apiKey) { toast('❌ URL und API Key ausfüllen'); return; }
|
||||
const btn = document.getElementById('abs-s-connect-btn');
|
||||
if (btn) { btn.disabled = true; btn.textContent = 'Verbinde…'; }
|
||||
try {
|
||||
await absVerifyApiKey(url, apiKey);
|
||||
const libs = await absGetLibraries();
|
||||
if (!S.abs.currentLibraryId) S.abs.currentLibraryId = libs[0]?.id || null;
|
||||
absSaveToStorage();
|
||||
_renderLibPicker(libs);
|
||||
_showAbsNavItem(true);
|
||||
toast('✅ Audiobookshelf verbunden');
|
||||
_setAbsStatusRow('connected', 'Verbunden · ' + url);
|
||||
} catch (e) {
|
||||
S.abs.token = null;
|
||||
toast(`❌ ABS Verbindung fehlgeschlagen: ${e.message}`);
|
||||
_setAbsStatusRow('error', 'Fehler: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function _renderLibPicker(libs) {
|
||||
const wrap = document.getElementById('abs-lib-picker');
|
||||
if (!wrap) return;
|
||||
wrap.style.display = libs.length > 1 ? '' : 'none';
|
||||
const sel = wrap.querySelector('select');
|
||||
if (sel) {
|
||||
sel.innerHTML = libs.map(l =>
|
||||
`<option value="${esc(l.id)}"${l.id === S.abs.currentLibraryId ? ' selected' : ''}>${esc(l.name)}</option>`
|
||||
).join('');
|
||||
}
|
||||
}
|
||||
|
||||
export function absSetLibrary(libId) {
|
||||
S.abs.currentLibraryId = libId;
|
||||
absSaveToStorage();
|
||||
}
|
||||
|
||||
export async function absLoadSettingsLibraries() {
|
||||
if (!S.abs.token) return;
|
||||
try {
|
||||
const libs = await absGetLibraries();
|
||||
_renderLibPicker(libs);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
export function absDisconnect() {
|
||||
S.abs.url = ''; S.abs.token = null;
|
||||
S.abs.userId = null; S.abs.currentLibraryId = null;
|
||||
localStorage.removeItem('ns_abs');
|
||||
_showAbsNavItem(false);
|
||||
toast('Audiobookshelf getrennt');
|
||||
_setAbsStatusRow('none', 'Nicht verbunden');
|
||||
}
|
||||
Reference in new issue
Block a user