From c17b7ea11a0435dc81e7a51f5d766511ae4c54ae Mon Sep 17 00:00:00 2001 From: Honey Date: Sun, 3 May 2026 14:35:00 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Audiobookshelf=20integration=20?= =?UTF-8?q?=E2=80=94=20browse,=20stream,=20chapters,=20sleep=20timer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - src/abs.js: full ABS API client + player engine - Login/token auth, library browsing, search - Playback session API (multi-file book support via startOffset) - Progress sync to ABS every 30s and on pause - Chapter navigation (prev/next/seek-to), ±10s / ±30s skip - Speed control (0.75–2×), sleep timer with countdown - index.html: sidebar nav, audiobooks/detail pages, full-screen player overlay, ABS settings section (URL + credentials + library picker) - state.js: abs + absPlayer state objects - views.js: navigate() handles 'audiobooks' and 'abs-book-detail' - styles.css: book grid, detail page, player overlay, pickers Co-Authored-By: Claude Sonnet 4.6 --- index.html | 165 ++++++++++++++ src/abs.js | 626 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/main.js | 25 ++ src/state.js | 20 ++ src/ui.js | 2 + src/views.js | 9 + styles.css | 101 +++++++++ 7 files changed, 948 insertions(+) create mode 100644 src/abs.js diff --git a/index.html b/index.html index 9c85953..5c32d4f 100644 --- a/index.html +++ b/index.html @@ -91,6 +91,12 @@ Spotify Importer + @@ -301,6 +307,28 @@ + +
+
+
Hörbücher 📚
+
+
+
+ + +
+
+
+
+ + +
+ +
+
+
@@ -498,6 +526,26 @@
+
+

+ 📚 + Audiobookshelf +

+
+
+
+ +
+ +
+ + +
+
+

🎨 @@ -523,6 +571,123 @@
+ + + +
+ +
+ + Hörbuch +
+
+ + +
+
+ +
📚
+
+
+ + +
+
—
+
+
+
+ + +
+
+
+
+
+
+
+
+ 0:00 + -0:00 +
+
+ + +
+ + + + + +
+ + +
+ +
+ +
+ + + + + + +
+
+ + +
+ +
+ + + + + + + +
+
+ + + +
+ + +
+
diff --git a/src/abs.js b/src/abs.js new file mode 100644 index 0000000..eac0864 --- /dev/null +++ b/src/abs.js @@ -0,0 +1,626 @@ +import { S } from './state.js'; +import { esc, toast } from './utils.js'; + +// ─── HTTP HELPERS ─── +async function absRequest(method, path, body) { + const 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(`${S.abs.url}${path}`, 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 absLogin(url, user, pass) { + S.abs.url = url.replace(/\/$/, ''); + const data = await absPost('/login', { username: user, password: pass }); + if (!data.token) throw new Error('Kein Token in der Antwort'); + S.abs.token = data.token; + S.abs.userId = data.user?.id || null; + return data; +} + +// ─── 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 _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; _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(); + + 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(); + S.absPlayer.playing ? audio.pause() : audio.play().catch(() => {}); +} + +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'); + 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); +} + +// ─── 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 x = (e.touches?.[0]?.clientX ?? e.clientX) - rect.left; + absSeek((Math.max(0, Math.min(1, x / rect.width))) * S.absPlayer.duration); +} + +// ─── RENDER HELPERS ─── +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(); +} + +function _renderProgress() { + const ap = S.absPlayer; + const pct = ap.duration > 0 ? (ap.currentTime / ap.duration) * 100 : 0; + const fill = document.getElementById('abs-prog-fill'); + const thumb = document.getElementById('abs-prog-thumb'); + if (fill) fill.style.width = `${Math.min(100, pct)}%`; + if (thumb) thumb.style.left = `${Math.min(100, pct)}%`; + const cur = document.getElementById('abs-time-cur'); + const rem = document.getElementById('abs-time-rem'); + if (cur) cur.textContent = _fmt(ap.currentTime); + if (rem) rem.textContent = `-${_fmt(ap.duration - ap.currentTime)}`; +} + +function _renderControls() { + const ap = S.absPlayer; + const btn = document.getElementById('abs-playpause-btn'); + if (!btn) return; + btn.innerHTML = ap.playing + ? `` + : ``; + const sv = document.getElementById('abs-speed-val'); + if (sv) sv.textContent = `${ap.speed}×`; +} + +function _renderChapterName() { + const ch = S.absPlayer.chapters[S.absPlayer.chapterIdx]; + const el = document.getElementById('abs-chapter-name'); + if (el) el.textContent = ch?.title || ''; +} + +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) => ` +
+ ${i + 1} + ${esc(ch.title || `Kapitel ${i + 1}`)} + ${_fmt(ch.start)} +
`).join(''); +} + +function _renderSleepBtn() { + const btn = document.getElementById('abs-sleep-btn'); + if (!btn) return; + const rem = S.absPlayer.sleepRemaining; + const moonSvg = ``; + if (rem != null) { + const m = Math.floor(rem / 60), s = String(rem % 60).padStart(2, '0'); + btn.innerHTML = `${moonSvg}${m}:${s}`; + 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 = '
Lade Bücher…
'; + try { + const { items } = await absGetItems(libId, { search }); + if (!items.length) { + grid.innerHTML = '

Keine Bücher gefunden.

'; + 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 ` +
+
+ ${cover + ? `` + : ''} +
📚
+ ${pct > 0 && pct < 99 ? `
` : ''} + ${pct >= 99 ? '
✓
' : ''} +
+
${esc(meta.title || 'Unbekannt')}
+
${esc(meta.authorName || '')}
+
`; + }).join(''); + } catch (e) { + grid.innerHTML = `

Fehler: ${esc(e.message)}

`; + } +} + +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 = '
Lade Buch…
'; + 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 = ` +
+
+ ${cover + ? `` + : ''} +
📚
+
+
+

${esc(meta.title || 'Unbekannt')}

+
${esc(meta.authorName || '')}
+ ${meta.seriesName ? `
${esc(meta.seriesName)}
` : ''} + ${meta.publishedYear ? `
${esc(String(meta.publishedYear))}
` : ''} + ${duration ? `
${_fmt(duration)}
` : ''} + ${pct > 0 ? ` +
+
+ ${pct}% gehört +
` : ''} + +
+
+ ${meta.description ? `
${esc(meta.description)}
` : ''} + ${chapters.length ? ` +
+

Kapitel ${chapters.length}

+ ${chapters.map((ch, i) => ` +
+ ${i + 1} + ${esc(ch.title || `Kapitel ${i + 1}`)} + ${_fmt(ch.start)} +
`).join('')} +
` : ''}`; + } catch (e) { + el.innerHTML = `

Fehler: ${esc(e.message)}

`; + } +} + +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.user = d.user || ''; + 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, user: S.abs.user, token: S.abs.token, + userId: S.abs.userId, libId: S.abs.currentLibraryId, + })); +} + +export function absOpenSettings() { + const url = document.getElementById('abs-s-url'); + const user = document.getElementById('abs-s-user'); + if (url) url.value = S.abs.url || ''; + if (user) user.value = S.abs.user || ''; + const statusEl = document.getElementById('abs-s-status'); + if (statusEl) statusEl.textContent = S.abs.token ? '✅ Verbunden' : ''; +} + +export async function absConnectSettings() { + const url = document.getElementById('abs-s-url')?.value.trim().replace(/\/$/, ''); + const user = document.getElementById('abs-s-user')?.value.trim(); + const pass = document.getElementById('abs-s-pass')?.value; + if (!url || !user || !pass) { toast('❌ URL, Benutzer und Passwort ausfüllen'); return; } + const btn = document.getElementById('abs-s-connect-btn'); + if (btn) { btn.disabled = true; btn.textContent = 'Verbinde…'; } + try { + await absLogin(url, user, pass); + const libs = await absGetLibraries(); + if (!S.abs.currentLibraryId) S.abs.currentLibraryId = libs[0]?.id || null; + absSaveToStorage(); + _renderLibPicker(libs); + document.getElementById('nav-abs-section').style.display = ''; + toast('✅ Audiobookshelf verbunden'); + const statusEl = document.getElementById('abs-s-status'); + if (statusEl) statusEl.textContent = '✅ Verbunden'; + } catch (e) { + toast(`❌ ABS Verbindung fehlgeschlagen: ${e.message}`); + } finally { + if (btn) { btn.disabled = false; btn.textContent = 'Verbinden'; } + } +} + +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 => + `` + ).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.user = ''; S.abs.token = null; + S.abs.userId = null; S.abs.currentLibraryId = null; + localStorage.removeItem('ns_abs'); + toast('Audiobookshelf getrennt'); + const statusEl = document.getElementById('abs-s-status'); + if (statusEl) statusEl.textContent = ''; +} diff --git a/src/main.js b/src/main.js index d63c549..b2d864f 100644 --- a/src/main.js +++ b/src/main.js @@ -18,6 +18,14 @@ import { loadRandom, } from './views.js'; import { loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll } from './spotify.js'; +import { + absInitFromStorage, absOpenSettings, absConnectSettings, absSetLibrary, absDisconnect, + absPlayItem, absTogglePlay, absSeek, absSkipSecs, absNextChapter, absPrevChapter, + absSetSpeed, absSleepIn, absOpenPlayer, absClosePlayer, absToggleChapters, + absToggleSpeedPicker, absToggleSleepPicker, absSeekToChapter, absProgDown, absProgMove, + absProgUp, loadAbsBooks, absOpenBook, loadAbsBookDetail, absPlayChapter, + absLoadSettingsLibraries, +} from './abs.js'; import { openNowPlaying, closeNowPlaying, switchNpTab, npGoArtist, npGoAlbum, openNpMenu, closeNpMenu, @@ -74,6 +82,11 @@ function disconnect() { async function startApp() { document.getElementById('setup-screen').style.display='none'; document.getElementById('app').style.display='flex'; + absInitFromStorage(); + if (S.abs.token) { + document.getElementById('nav-abs-section').style.display = ''; + absLoadSettingsLibraries(); + } if(_navLoad() && S._navCursor >= 0 && S._navStack[S._navCursor]) { const last = S._navStack[S._navCursor]; S._navJumping = true; @@ -250,4 +263,16 @@ Object.assign(window, { toggleNotifPanel, deleteNotif, clearNotifs, _notifNavigate, _pickTheme, // App doConnect, disconnect, + // Audiobookshelf + absPlayItem, absTogglePlay, absSeek, absSkipSecs, absNextChapter, absPrevChapter, + absSetSpeed, absSleepIn, absOpenPlayer, absClosePlayer, absToggleChapters, + absToggleSpeedPicker, absToggleSleepPicker, absSeekToChapter, + absProgDown, absProgMove, absProgUp, + absOpenBook, absPlayChapter, absConnectSettings, absSetLibrary, absDisconnect, + absOnSearch: (val) => { + clearTimeout(window._absSearchTimer); + window._absSearchTimer = setTimeout(() => { + if (S.abs.currentLibraryId) loadAbsBooks(S.abs.currentLibraryId, val.trim()); + }, 350); + }, }); diff --git a/src/state.js b/src/state.js index 36216b5..a4418de 100644 --- a/src/state.js +++ b/src/state.js @@ -45,4 +45,24 @@ export const S = { // Artist images cache artistImgCache: {}, + + // Audiobookshelf + abs: { + url: '', user: '', token: null, userId: null, + currentLibraryId: null, + }, + absPlayer: { + open: false, + item: null, + _sessionId: null, + audioTracks: [], + trackIdx: 0, + chapters: [], + chapterIdx: -1, + playing: false, + currentTime: 0, + duration: 0, + speed: 1.0, + sleepRemaining: null, + }, }; diff --git a/src/ui.js b/src/ui.js index 347db77..ec3cef8 100644 --- a/src/ui.js +++ b/src/ui.js @@ -57,6 +57,8 @@ export function showSetupError(m) { // ─── SETTINGS ─── export function openSettings() { + // Lazy import to avoid circular dep — abs.js imports views.js + import('./abs.js').then(m => m.absOpenSettings()); document.getElementById('s-url').value = S.cfg.url || ''; document.getElementById('s-user').value = S.cfg.user || ''; document.getElementById('s-pass').value = ''; diff --git a/src/views.js b/src/views.js index 38f9739..0c26373 100644 --- a/src/views.js +++ b/src/views.js @@ -35,6 +35,7 @@ export function navigate(page, data=null) { closeSidebar(); if(['discover','new-releases','recommendations','random','spotify-importer'].includes(page)) switchNavMode('discover'); else if(['home','artists','albums','starred','playlists'].includes(page)) switchNavMode('library'); + // ABS pages don't switch the bottom nav mode (they have their own sidebar section) if(page==='home') loadHomeData(); if(page==='artists' && !document.getElementById('artists-grid').children.length) loadArtists(); @@ -50,6 +51,14 @@ export function navigate(page, data=null) { if(page==='playlist-detail' && data) loadPlaylistDetail(data); if(page==='recommendations') loadRecommendations(); if(page==='spotify-importer') loadSpotifyImporter(); + if(page==='audiobooks') { + import('./abs.js').then(m => { + if (S.abs.currentLibraryId) m.loadAbsBooks(S.abs.currentLibraryId); + }); + } + if(page==='abs-book-detail' && data) { + import('./abs.js').then(m => m.loadAbsBookDetail(data.id)); + } if(!S._navJumping) { S._navStack = S._navStack.slice(0, S._navCursor + 1); diff --git a/styles.css b/styles.css index 2c21c02..7093d1f 100644 --- a/styles.css +++ b/styles.css @@ -850,3 +850,104 @@ nav{flex:1;overflow-y:auto;padding:4px 10px} /* ── SEARCH page ── */ .search-section{margin-bottom:24px} .search-section-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px} + +/* ═══════════════════════════════════════════════════ + AUDIOBOOKSHELF +═══════════════════════════════════════════════════ */ + +/* -- Books grid -- */ +.abs-books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;padding-bottom:20px} +.abs-book-card{cursor:pointer;transition:transform .15s} +.abs-book-card:hover{transform:translateY(-2px)} +.abs-book-cover-wrap{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface);margin-bottom:8px;box-shadow:0 4px 12px rgba(0,0,0,.4)} +.abs-book-cover{width:100%;height:100%;object-fit:cover;display:block} +.abs-book-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;background:var(--surface2)} +.abs-book-prog-wrap{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.15)} +.abs-book-prog-fill{height:100%;background:var(--accent);transition:width .3s} +.abs-book-done{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#000} +.abs-book-title{font-size:12px;font-weight:600;line-height:1.3;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.abs-book-author{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} +.abs-loading{padding:40px 20px;text-align:center;color:var(--text2);font-size:14px} +.abs-empty{padding:40px 20px;text-align:center;color:var(--text2);font-size:14px} +.abs-error{padding:20px;color:var(--danger);font-size:13px} + +/* -- Book detail -- */ +.abs-detail-header{display:flex;gap:20px;margin-bottom:20px;align-items:flex-start} +.abs-detail-cover-wrap{flex-shrink:0;width:140px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.5)} +.abs-detail-cover{width:100%;height:100%;object-fit:cover;display:block} +.abs-detail-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:50px;background:var(--surface2)} +.abs-detail-meta{flex:1;min-width:0} +.abs-detail-title{font-size:20px;font-weight:800;line-height:1.2;margin-bottom:6px} +.abs-detail-author{font-size:13px;color:var(--text2);margin-bottom:4px} +.abs-detail-series{font-size:12px;color:var(--accent);margin-bottom:4px} +.abs-detail-year{font-size:12px;color:var(--text3);margin-bottom:4px} +.abs-detail-dur{font-size:12px;color:var(--text3);margin-bottom:8px} +.abs-detail-progress-wrap{display:flex;align-items:center;gap:8px;margin-bottom:10px} +.abs-detail-progress-bar{flex:1;height:4px;background:var(--surface2);border-radius:2px;overflow:hidden} +.abs-detail-progress-bar div{height:100%;background:var(--accent);border-radius:2px} +.abs-detail-progress-wrap span{font-size:11px;color:var(--text2);flex-shrink:0} +.abs-play-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#000;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s,transform .15s;margin-top:8px} +.abs-play-btn:hover{opacity:.9;transform:translateY(-1px)} +.abs-detail-desc{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:20px;background:var(--surface);border-radius:var(--radius-sm);padding:14px;border:1px solid var(--border);max-height:120px;overflow-y:auto} +.abs-detail-chapters{margin-top:4px} +.abs-detail-chapters-title{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px} +.abs-ch-count{font-size:12px;font-weight:400;color:var(--text2)} +.abs-chapter-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s} +.abs-chapter-row:hover{background:var(--surface)} +.abs-ch-num{font-size:11px;color:var(--text3);min-width:20px;text-align:right;flex-shrink:0} +.abs-ch-title{flex:1;font-size:13px;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} +.abs-ch-start{font-size:11px;color:var(--text3);flex-shrink:0;font-variant-numeric:tabular-nums} + +/* -- Player overlay -- */ +.abs-player-overlay{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);overflow:hidden} +.abs-player-overlay.open{transform:translateY(0)} +.abs-player-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px;flex-shrink:0} +.abs-player-label{font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.5px;text-transform:uppercase} +.abs-hbtn{background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .15s} +.abs-hbtn:hover{color:var(--text)} +.abs-cover-area{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 40px;min-height:0} +.abs-cover-wrap{width:min(280px,calc(100vw - 80px));aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)} +.abs-cover-img{width:100%;height:100%;object-fit:cover;display:block} +.abs-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;background:var(--surface2)} +.abs-player-info{text-align:center;padding:12px 24px 0;flex-shrink:0} +.abs-player-title{font-size:18px;font-weight:800;line-height:1.2;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.abs-player-author{font-size:13px;color:var(--text2);margin-bottom:4px} +.abs-player-chapter{font-size:12px;color:var(--accent);min-height:18px} +.abs-progress-area{padding:12px 24px 0;flex-shrink:0} +.abs-prog-bar{position:relative;height:32px;display:flex;align-items:center;cursor:pointer;touch-action:none} +.abs-prog-track{position:relative;width:100%;height:4px;background:var(--surface2);border-radius:2px;overflow:visible} +.abs-prog-fill{height:100%;background:var(--accent);border-radius:2px;pointer-events:none} +.abs-prog-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--text);box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none;transition:transform .1s} +.abs-prog-bar:active .abs-prog-thumb{transform:translate(-50%,-50%) scale(1.3)} +.abs-prog-times{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums} +.abs-controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px 0;flex-shrink:0} +.abs-ctrl-btn{background:none;border:none;color:var(--text2);cursor:pointer;padding:10px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;position:relative;flex-direction:column;gap:2px} +.abs-ctrl-btn:hover{color:var(--text);background:var(--surface)} +.abs-skip-label{font-size:9px;font-weight:700;color:var(--text3);line-height:1} +.abs-play-pause{width:62px;height:62px;border-radius:50%;background:var(--accent);border:none;color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px var(--accent-glow);transition:transform .15s,opacity .15s;flex-shrink:0;margin:0 8px} +.abs-play-pause:hover{transform:scale(1.05);opacity:.9} +.abs-play-pause:active{transform:scale(.97)} +.abs-extra-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 20px 16px;flex-shrink:0} +.abs-picker-wrap{position:relative} +.abs-extra-btn{display:flex;align-items:center;gap:5px;padding:7px 12px;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--text2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;transition:color .15s,background .15s;white-space:nowrap} +.abs-extra-btn:hover,.abs-extra-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)} +.abs-picker{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.5);overflow:hidden;z-index:10;min-width:90px} +.abs-picker.abs-picker-right{left:auto;right:0;transform:none} +.abs-picker.open{display:block} +.abs-picker button{display:block;width:100%;padding:9px 16px;background:none;border:none;color:var(--text);font-family:var(--font);font-size:13px;cursor:pointer;text-align:left;transition:background .15s;white-space:nowrap} +.abs-picker button:hover{background:var(--surface2)} +.abs-picker button.active{color:var(--accent);font-weight:700} +.abs-chapter-list{flex-shrink:0;overflow-y:auto;max-height:0;transition:max-height .3s ease;border-top:1px solid transparent} +.abs-chapter-list.open{max-height:220px;border-color:var(--border)} +.abs-ch-item{display:flex;align-items:center;gap:10px;padding:8px 20px;cursor:pointer;transition:background .15s} +.abs-ch-item:hover{background:var(--surface)} +.abs-ch-item.active{background:var(--accent-dim)} +.abs-ch-item.active .abs-ch-title{color:var(--accent)} +.abs-ch-item.active .abs-ch-num{color:var(--accent)} +@media(max-width:768px){ + .abs-books-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px} + .abs-detail-header{flex-direction:column;align-items:center;text-align:center} + .abs-detail-cover-wrap{width:180px} + .abs-cover-area{padding:8px 24px} + .abs-cover-wrap{width:min(240px,calc(100vw - 48px))} +}