feat: Audiobookshelf integration — browse, stream, chapters, sleep timer

- 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 <noreply@anthropic.com>

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
+    ? `<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}×`;
+}
+
+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) => `
+    <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.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 =>
+      `<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.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 = '';
+}

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);
+  },
 });

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,
+  },
 };

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    = '';

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);