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>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed
1 parent
719d4d9afd
commit
c17b7ea11a
7 files changed
+948
No files matched your search
+165
@@ -91,6 +91,12 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527M9.5 14.473c1.5-.973 3.5-.973 5 .027M7 9c3-1.5 6.5-1 9 1"/></svg>Spotify Importer
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-section" id="nav-abs-section" style="display:none">
|
||||
<div class="nav-section-title">Hörbücher</div>
|
||||
<div class="nav-item" onclick="navigate('audiobooks')" data-page="audiobooks">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>Bibliothek
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@@ -301,6 +307,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AUDIOBOOKS -->
|
||||
<div class="page" id="page-audiobooks">
|
||||
<div class="page-header">
|
||||
<div class="page-title">Hörbücher <em>📚</em></div>
|
||||
</div>
|
||||
<div class="search-wrap" style="padding:0 0 16px">
|
||||
<div class="search-box" style="background:var(--surface);border-color:var(--border2)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
||||
<input id="abs-search-input" type="text" placeholder="Titel oder Autor suchen…" oninput="absOnSearch(this.value)">
|
||||
</div>
|
||||
</div>
|
||||
<div id="abs-books-grid" class="abs-books-grid"></div>
|
||||
</div>
|
||||
|
||||
<!-- AUDIOBOOK DETAIL -->
|
||||
<div class="page" id="page-abs-book-detail">
|
||||
<button class="back-btn" onclick="navigate('audiobooks')">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>Hörbücher
|
||||
</button>
|
||||
<div id="abs-book-detail-content"></div>
|
||||
</div>
|
||||
|
||||
<!-- SPOTIFY IMPORTER -->
|
||||
<div class="page" id="page-spotify-importer">
|
||||
<div class="page-header">
|
||||
@@ -498,6 +526,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<span style="width:24px;height:24px;border-radius:6px;background:var(--green-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">📚</span>
|
||||
Audiobookshelf
|
||||
</h3>
|
||||
<div class="field"><label>Server URL</label><input id="abs-s-url" type="url" placeholder="https://books.example.com"></div>
|
||||
<div class="field"><label>Benutzername</label><input id="abs-s-user" type="text" placeholder="admin"></div>
|
||||
<div class="field"><label>Passwort</label><input id="abs-s-pass" type="password" placeholder="••••••••"></div>
|
||||
<div id="abs-lib-picker" style="display:none" class="field">
|
||||
<label>Bibliothek</label>
|
||||
<select id="abs-lib-select" onchange="absSetLibrary(this.value)" style="width:100%;padding:10px 12px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none"></select>
|
||||
</div>
|
||||
<div class="settings-row" style="margin-top:8px;border-radius:9px">
|
||||
<span id="abs-s-status" style="font-size:13px;color:var(--green)"></span>
|
||||
<div style="display:flex;gap:8px">
|
||||
<button class="btn-outline" style="padding:6px 12px;font-size:12px;color:var(--danger);border-color:rgba(224,85,85,0.3)" onclick="absDisconnect()">Trennen</button>
|
||||
<button class="btn-outline" id="abs-s-connect-btn" style="padding:6px 12px;font-size:12px" onclick="absConnectSettings()">Verbinden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<span style="width:24px;height:24px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🎨</span>
|
||||
@@ -523,6 +571,123 @@
|
||||
<div class="toast-container" id="toast-container"></div>
|
||||
<audio id="audio-element"></audio>
|
||||
<audio id="preview-audio"></audio>
|
||||
<audio id="abs-audio"></audio>
|
||||
|
||||
<!-- AUDIOBOOKSHELF PLAYER OVERLAY -->
|
||||
<div id="abs-player" class="abs-player-overlay">
|
||||
<!-- Header -->
|
||||
<div class="abs-player-header">
|
||||
<button class="abs-hbtn" onclick="absClosePlayer()">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
<span class="abs-player-label">Hörbuch</span>
|
||||
<div style="width:36px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Cover -->
|
||||
<div class="abs-cover-area">
|
||||
<div class="abs-cover-wrap">
|
||||
<img id="abs-cover" src="" alt="" class="abs-cover-img" style="display:none">
|
||||
<div id="abs-cover-placeholder" class="abs-cover-ph">📚</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="abs-player-info">
|
||||
<div id="abs-title" class="abs-player-title">—</div>
|
||||
<div id="abs-author" class="abs-player-author"></div>
|
||||
<div id="abs-chapter-name" class="abs-player-chapter"></div>
|
||||
</div>
|
||||
|
||||
<!-- Progress bar -->
|
||||
<div class="abs-progress-area">
|
||||
<div class="abs-prog-bar" id="abs-prog-bar"
|
||||
onmousedown="absProgDown(event)" onmousemove="absProgMove(event)" onmouseup="absProgUp(event)"
|
||||
ontouchstart="absProgDown(event)" ontouchmove="absProgMove(event)" ontouchend="absProgUp(event)">
|
||||
<div class="abs-prog-track">
|
||||
<div class="abs-prog-fill" id="abs-prog-fill"></div>
|
||||
<div class="abs-prog-thumb" id="abs-prog-thumb"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="abs-prog-times">
|
||||
<span id="abs-time-cur">0:00</span>
|
||||
<span id="abs-time-rem">-0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main controls -->
|
||||
<div class="abs-controls">
|
||||
<button class="abs-ctrl-btn" onclick="absPrevChapter()" title="Voriges Kapitel">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
<button class="abs-ctrl-btn abs-skip-btn" onclick="absSkipSecs(-10)" title="-10s">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10"/>
|
||||
<polyline points="15 9 12 6 9 9"/>
|
||||
<path d="M12 6v4"/>
|
||||
</svg>
|
||||
<span class="abs-skip-label">10</span>
|
||||
</button>
|
||||
<button class="abs-play-pause" id="abs-playpause-btn" onclick="absTogglePlay()">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
</button>
|
||||
<button class="abs-ctrl-btn abs-skip-btn" onclick="absSkipSecs(30)" title="+30s">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M12 22C17.523 22 22 17.523 22 12S17.523 2 12 2 2 6.477 2 12"/>
|
||||
<polyline points="9 9 12 6 15 9"/>
|
||||
<path d="M12 6v4"/>
|
||||
</svg>
|
||||
<span class="abs-skip-label">30</span>
|
||||
</button>
|
||||
<button class="abs-ctrl-btn" onclick="absNextChapter()" title="Nächstes Kapitel">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Extra controls -->
|
||||
<div class="abs-extra-controls">
|
||||
<!-- Speed -->
|
||||
<div class="abs-picker-wrap">
|
||||
<button class="abs-extra-btn" id="abs-speed-btn" onclick="absToggleSpeedPicker()">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
<span id="abs-speed-val">1×</span>
|
||||
</button>
|
||||
<div id="abs-speed-picker" class="abs-picker">
|
||||
<button data-speed="0.75" onclick="absSetSpeed(0.75)">0.75×</button>
|
||||
<button data-speed="1" onclick="absSetSpeed(1)">1×</button>
|
||||
<button data-speed="1.25" onclick="absSetSpeed(1.25)">1.25×</button>
|
||||
<button data-speed="1.5" onclick="absSetSpeed(1.5)">1.5×</button>
|
||||
<button data-speed="1.75" onclick="absSetSpeed(1.75)">1.75×</button>
|
||||
<button data-speed="2" onclick="absSetSpeed(2)">2×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sleep timer -->
|
||||
<div class="abs-picker-wrap">
|
||||
<button class="abs-extra-btn" id="abs-sleep-btn" onclick="absToggleSleepPicker()">
|
||||
<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>
|
||||
</button>
|
||||
<div id="abs-sleep-picker" class="abs-picker abs-picker-right">
|
||||
<button onclick="absSleepIn(0)">Aus</button>
|
||||
<button onclick="absSleepIn(5)">5 Min</button>
|
||||
<button onclick="absSleepIn(10)">10 Min</button>
|
||||
<button onclick="absSleepIn(15)">15 Min</button>
|
||||
<button onclick="absSleepIn(30)">30 Min</button>
|
||||
<button onclick="absSleepIn(45)">45 Min</button>
|
||||
<button onclick="absSleepIn(60)">60 Min</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chapter list toggle -->
|
||||
<button class="abs-extra-btn" onclick="absToggleChapters()">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
|
||||
Kapitel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Chapter list -->
|
||||
<div id="abs-chapter-list" class="abs-chapter-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- CONTEXT MENU -->
|
||||
<div class="ctx-menu" id="ctx-menu" style="display:none"></div>
|
||||
|
||||
+626
@@ -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 = '';
|
||||
}
|
||||
+25
@@ -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);
|
||||
},
|
||||
});
|
||||
@@ -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,
|
||||
},
|
||||
};
|
||||
@@ -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 = '';
|
||||
|
||||
@@ -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);
|
||||
|
||||
+101
@@ -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))}
|
||||
}
|
||||
Reference in new issue
Block a user