-
+ <>
+ Audiolib
-Web-Interface wird in Phase 8 implementiert.
-
- Die Swift-App kann bereits über{' '}
- localhost:3000{' '}
- verbunden werden.
-
Keine Bibliothek. Im Admin-Bereich anlegen.
+ } />
+
+
+ )}
+
+ )
+}
+
+function PodcastList() {
+ const { libraries } = useAuthStore()
+ const [podcasts, setPodcasts] = React.useState
+
)
}
+
+export default function App() {
+ return (
+ Podcasts
+ {podcasts.length === 0 ? ( +Noch keine Podcasts. Library vom Typ „Podcast" scannen.
+ ) : ( +
+ {podcasts.map((p: any) => (
+
+
+ )}
+ {p.cover
+ ? 
+ :
+ 🎙
+ }
+ {p.title}
+{p.numEpisodes} Episoden
+ + ))} +
+
+ )
+ }
+
+ return (
+
+
+ {children}
+
+ {item &&
+ )
+}
diff --git a/frontend/src/components/common/Sidebar.tsx b/frontend/src/components/common/Sidebar.tsx
new file mode 100644
index 0000000..dd33947
--- /dev/null
+++ b/frontend/src/components/common/Sidebar.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import { Library, Mic2, Settings, LogOut, BookOpen } from 'lucide-react'
+import { useAuthStore } from '../../store/authStore'
+
+export default function Sidebar() {
+ const { libraries, user, logout } = useAuthStore()
+
+ return (
+
+ )
+}
diff --git a/frontend/src/components/library/BookCard.tsx b/frontend/src/components/library/BookCard.tsx
new file mode 100644
index 0000000..e1cf903
--- /dev/null
+++ b/frontend/src/components/library/BookCard.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Play, AlertCircle } from 'lucide-react'
+import CoverImage from '../common/CoverImage'
+import { coverUrl } from '../../api/items'
+import { usePlayerStore } from '../../store/playerStore'
+
+interface Props { item: any }
+
+export default function BookCard({ item }: Props) {
+ const navigate = useNavigate()
+ const play = usePlayerStore((s) => s.play)
+ const currentItem = usePlayerStore((s) => s.item)
+
+ const meta = item.media?.metadata || {}
+ const title = meta.title || item.relPath || 'Unbekannt'
+ const author = meta.authors?.[0]?.name || ''
+ const series = meta.series?.[0]
+ const progress = item._progress
+ const tags: string[] = item.media?.tags || []
+ const isPlaying = currentItem?.id === item.id
+ const hasCover = item.media?.coverPath
+
+ return (
+ navigate(`/book/${item.id}`)}
+ >
+
+ )
+}
diff --git a/frontend/src/components/player/AudioPlayer.tsx b/frontend/src/components/player/AudioPlayer.tsx
new file mode 100644
index 0000000..1745548
--- /dev/null
+++ b/frontend/src/components/player/AudioPlayer.tsx
@@ -0,0 +1,304 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Hls from 'hls.js'
+import {
+ Play, Pause, SkipBack, SkipForward, Volume2, VolumeX,
+ List, BookmarkPlus, Moon, X, ChevronLeft
+} from 'lucide-react'
+import { usePlayerStore } from '../../store/playerStore'
+import { createBookmark } from '../../api/me'
+import CoverImage from '../common/CoverImage'
+import { coverUrl } from '../../api/items'
+import ChapterList from './ChapterList'
+
+export default function AudioPlayer() {
+ const {
+ item, session, currentTime, duration, isPlaying, playbackRate, volume, chapters,
+ sleepTimerActive, sleepTimer,
+ setPlaying, setCurrentTime, setDuration, setPlaybackRate, setVolume,
+ seek, stop, setExpanded, setSleepTimer, cancelSleepTimer, syncProgress,
+ } = usePlayerStore()
+
+ const audioRef = useRef
+
+
+
+
+
+ )}
+
+
+ {series && (
+
+ + {series.name}{series.sequence ? ` #${series.sequence}` : ''} +
+ )} +{title}
+ {author &&{author}
} + + {progress && !progress.isFinished && ( +
+
+
+ )}
+
+ {tags.includes('zu_prüfen') && (
+
+
+ )}
+
+
+
+ {/* Header */}
+ ('users')
+
+ return (
+ ([])
+ const [loading, setLoading] = useState(true)
+ const [showCreate, setShowCreate] = useState(false)
+ const [form, setForm] = useState({ username: '', password: '', isAdmin: false })
+
+ useEffect(() => { getUsers().then(setUsers).finally(() => setLoading(false)) }, [])
+
+ const handleCreate = async () => {
+ await createUser(form)
+ const updated = await getUsers()
+ setUsers(updated)
+ setShowCreate(false)
+ setForm({ username: '', password: '', isAdmin: false })
+ }
+
+ const handleDelete = async (id: string) => {
+ if (!confirm('Benutzer wirklich löschen?')) return
+ await deleteUser(id)
+ setUsers(users.filter((u) => u.id !== id))
+ }
+
+ return (
+ ([])
+ const [loading, setLoading] = useState(true)
+ const [scanning, setScanning] = useState(null)
+ const [showCreate, setShowCreate] = useState(false)
+ const [form, setForm] = useState({ name: '', path: '', mediaType: 'book' })
+
+ useEffect(() => { getLibraries().then(setLibraries).finally(() => setLoading(false)) }, [])
+
+ const handleScan = async (id: string) => {
+ setScanning(id)
+ await scanLibrary(id).catch(() => {})
+ setTimeout(() => setScanning(null), 5000)
+ }
+
+ const handleCreate = async () => {
+ await createLibrary({ name: form.name, folders: [{ fullPath: form.path }], media_type: form.mediaType })
+ const libs = await getLibraries()
+ setLibraries(libs)
+ setShowCreate(false)
+ setForm({ name: '', path: '', mediaType: 'book' })
+ }
+
+ const handleDelete = async (id: string) => {
+ if (!confirm('Bibliothek wirklich löschen?')) return
+ await deleteLibrary(id)
+ setLibraries(libs => libs.filter((l) => l.id !== id))
+ }
+
+ return (
+ (null)
+ const [loading, setLoading] = useState(true)
+ const [saved, setSaved] = useState(false)
+
+ useEffect(() => { getSettings().then(setSettings).finally(() => setLoading(false)) }, [])
+
+ const save = async (key: string, value: any) => {
+ await updateSettings({ [key]: value })
+ setSettings((s: any) => ({ ...s, [key]: value }))
+ setSaved(true)
+ setTimeout(() => setSaved(false), 2000)
+ }
+
+ if (loading) return (null)
+ const [progress, setProgress] = useState(null)
+ const [bookmarks, setBookmarks] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [matchResults, setMatchResults] = useState([])
+ const [matchQuery, setMatchQuery] = useState('')
+ const [matchLoading, setMatchLoading] = useState(false)
+ const [showMatchPanel, setShowMatchPanel] = useState(false)
+ const { play, item: currentItem, currentTime } = usePlayerStore()
+
+ useEffect(() => {
+ if (!id) return
+ Promise.all([getItem(id), getMe()]).then(([itemData, me]) => {
+ setItem(itemData)
+ setProgress(me.mediaProgress?.find((p: any) => p.libraryItemId === id) || null)
+ setBookmarks(me.bookmarks?.filter((b: any) => b.libraryItemId === id) || [])
+ setLoading(false)
+ })
+ }, [id])
+
+ if (loading) return (
+ ([])
+ const [total, setTotal] = useState(0)
+ const [page, setPage] = useState(0)
+ const [search, setSearch] = useState('')
+ const [loading, setLoading] = useState(false)
+ const [scanning, setScanning] = useState(false)
+ const [progressMap, setProgressMap] = useState>({})
+ const [view, setView] = useState<'grid' | 'list'>('grid')
+ const [filterTag, setFilterTag] = useState('')
+
+ const load = useCallback(async () => {
+ if (!libraryId) return
+ setLoading(true)
+ try {
+ const data = await getLibraryItems(libraryId, { page, limit: PAGE_SIZE, search: search || undefined })
+ setItems(data.results || [])
+ setTotal(data.total || 0)
+ } finally {
+ setLoading(false)
+ }
+ }, [libraryId, page, search])
+
+ useEffect(() => { load() }, [load])
+
+ useEffect(() => {
+ getMe().then((me) => {
+ const map: Record = {}
+ for (const p of me.mediaProgress || []) map[p.libraryItemId] = p
+ setProgressMap(map)
+ }).catch(() => {})
+ }, [])
+
+ const handleScan = async () => {
+ if (!libraryId) return
+ setScanning(true)
+ await scanLibrary(libraryId).catch(() => {})
+ setTimeout(() => { setScanning(false); load() }, 3000)
+ }
+
+ const searchDebounce = useCallback(
+ (() => {
+ let t: ReturnType
+ return (v: string) => { clearTimeout(t); setSearch(v); setPage(0) }
+ })(),
+ []
+ )
+
+ const displayed = filterTag
+ ? items.filter((i) => (i.media?.tags || []).includes(filterTag))
+ : items
+
+ const allTags = [...new Set(items.flatMap((i) => i.media?.tags || []))]
+
+ // Inject progress into items
+ const enriched = displayed.map((i) => ({ ...i, _progress: progressMap[i.id] }))
+
+ return (
+ (null)
+ const [loading, setLoading] = useState(true)
+ const [feedInput, setFeedInput] = useState('')
+ const [saving, setSaving] = useState(false)
+ const [searchQ, setSearchQ] = useState('')
+ const [searchResults, setSearchResults] = useState([])
+
+ useEffect(() => {
+ if (!id) return
+ api.get(`/api/podcasts/${id}`).then((r) => {
+ setPodcast(r.data)
+ setFeedInput(r.data.feedUrl || '')
+ setLoading(false)
+ }).catch(() => setLoading(false))
+ }, [id])
+
+ const handleSetFeed = async () => {
+ if (!id || !feedInput) return
+ setSaving(true)
+ await api.patch(`/api/podcasts/${id}/feed`, { feedUrl: feedInput })
+ const updated = await api.get(`/api/podcasts/${id}`)
+ setPodcast(updated.data)
+ setSaving(false)
+ }
+
+ const handleUpdate = async () => {
+ if (!id) return
+ await api.post(`/api/podcasts/${id}/update-feed`)
+ }
+
+ const handleSearchFeed = async () => {
+ const r = await api.get('/api/podcasts/search', { params: { q: searchQ } })
+ setSearchResults(r.data.results || [])
+ }
+
+ const fmtDate = (s: string | null) => s ? new Date(s).toLocaleDateString('de-DE') : ''
+ const fmtDur = (s: number) => {
+ const m = Math.floor(s / 60)
+ return m > 0 ? `${m} Min` : ''
+ }
+
+ if (loading) return
+ loadAuth: () => Promise
+ logout: () => Promise
+}
+
+export const useAuthStore = create((set) => ({
+ user: null,
+ libraries: [],
+ token: localStorage.getItem('token'),
+ loading: false,
+
+ login: async (username, password) => {
+ set({ loading: true })
+ try {
+ const data = await apiLogin(username, password)
+ const token = data.user?.token
+ if (token) localStorage.setItem('token', token)
+ set({ user: data.user, libraries: [], token, loading: false })
+ const auth = await authorize()
+ set({ user: auth.user, libraries: auth.libraries || [] })
+ } catch (e) {
+ set({ loading: false })
+ throw e
+ }
+ },
+
+ loadAuth: async () => {
+ const token = localStorage.getItem('token')
+ if (!token) return
+ try {
+ const auth = await authorize()
+ set({ user: auth.user, libraries: auth.libraries || [], token })
+ } catch {
+ localStorage.removeItem('token')
+ set({ user: null, token: null, libraries: [] })
+ }
+ },
+
+ logout: async () => {
+ try { await apiLogout() } catch { }
+ localStorage.removeItem('token')
+ set({ user: null, token: null, libraries: [] })
+ },
+}))
diff --git a/frontend/src/store/playerStore.ts b/frontend/src/store/playerStore.ts
new file mode 100644
index 0000000..68b6979
--- /dev/null
+++ b/frontend/src/store/playerStore.ts
@@ -0,0 +1,121 @@
+import { create } from 'zustand'
+import { startPlayback, syncSession, closeSession } from '../api/items'
+import { updateProgress } from '../api/me'
+
+interface Chapter { id: number; start: number; end: number; title: string }
+
+interface PlayerState {
+ item: any | null
+ session: any | null
+ currentTime: number
+ duration: number
+ isPlaying: boolean
+ playbackRate: number
+ volume: number
+ sleepTimer: number | null // Sekunden verbleibend
+ sleepTimerActive: boolean
+ chapters: Chapter[]
+ expanded: boolean
+
+ play: (item: any) => Promise
+ stop: () => Promise
+ seek: (time: number) => void
+ setPlaying: (v: boolean) => void
+ setCurrentTime: (t: number) => void
+ setDuration: (d: number) => void
+ setPlaybackRate: (r: number) => void
+ setVolume: (v: number) => void
+ setSleepTimer: (seconds: number) => void
+ cancelSleepTimer: () => void
+ setExpanded: (v: boolean) => void
+ syncProgress: () => Promise
+}
+
+let syncInterval: ReturnType | null = null
+let sleepInterval: ReturnType | null = null
+
+export const usePlayerStore = create((set, get) => ({
+ item: null,
+ session: null,
+ currentTime: 0,
+ duration: 0,
+ isPlaying: false,
+ playbackRate: 1,
+ volume: 1,
+ sleepTimer: null,
+ sleepTimerActive: false,
+ chapters: [],
+ expanded: false,
+
+ play: async (item: any) => {
+ const { session: oldSession, stop } = get()
+ if (oldSession) await stop()
+
+ const session = await startPlayback(item.id, { mediaPlayer: 'audiolib-web' })
+ set({
+ item,
+ session,
+ currentTime: session.currentTime || 0,
+ duration: session.duration || 0,
+ chapters: session.chapters || [],
+ isPlaying: true,
+ expanded: false,
+ })
+
+ // Sync alle 15 Sekunden
+ if (syncInterval) clearInterval(syncInterval)
+ syncInterval = setInterval(() => get().syncProgress(), 15000)
+ },
+
+ stop: async () => {
+ const { session } = get()
+ if (syncInterval) { clearInterval(syncInterval); syncInterval = null }
+ if (sleepInterval) { clearInterval(sleepInterval); sleepInterval = null }
+ if (session) {
+ try { await closeSession(session.id) } catch { }
+ }
+ set({ item: null, session: null, isPlaying: false, currentTime: 0, sleepTimerActive: false })
+ },
+
+ seek: (time) => set({ currentTime: time }),
+
+ setPlaying: (v) => set({ isPlaying: v }),
+
+ setCurrentTime: (t) => set({ currentTime: t }),
+
+ setDuration: (d) => set({ duration: d }),
+
+ setPlaybackRate: (r) => set({ playbackRate: r }),
+
+ setVolume: (v) => set({ volume: v }),
+
+ setSleepTimer: (seconds) => {
+ if (sleepInterval) clearInterval(sleepInterval)
+ set({ sleepTimer: seconds, sleepTimerActive: true })
+ sleepInterval = setInterval(() => {
+ const { sleepTimer } = get()
+ if (sleepTimer === null || sleepTimer <= 0) {
+ clearInterval(sleepInterval!)
+ set({ isPlaying: false, sleepTimerActive: false, sleepTimer: null })
+ return
+ }
+ set({ sleepTimer: sleepTimer - 1 })
+ }, 1000)
+ },
+
+ cancelSleepTimer: () => {
+ if (sleepInterval) { clearInterval(sleepInterval); sleepInterval = null }
+ set({ sleepTimer: null, sleepTimerActive: false })
+ },
+
+ setExpanded: (v) => set({ expanded: v }),
+
+ syncProgress: async () => {
+ const { session, currentTime, duration, item } = get()
+ if (!session || !item) return
+ try {
+ await syncSession(session.id, { currentTime, duration, timeListening: 15 })
+ await updateProgress(item.id, { currentTime, duration })
+ } catch { }
+ },
+}))
+
+ Jetzt läuft
+
+
+
+ {/* Cover */}
+
+
+
+ {/* Title */}
+
+ {currentChapter && (
+
+
+ {/* Progress bar with chapter markers */}
+ {currentChapter.title}
+ )} +{title}
+ {author &&{author}
} +
+ { if (audioRef.current) audioRef.current.currentTime = t; seek(t) }}
+ />
+ )}
+
+ )
+}
diff --git a/frontend/src/components/player/ChapterList.tsx b/frontend/src/components/player/ChapterList.tsx
new file mode 100644
index 0000000..a270e9a
--- /dev/null
+++ b/frontend/src/components/player/ChapterList.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+
+interface Chapter { id: number; start: number; end: number; title: string }
+interface Props {
+ chapters: Chapter[]
+ currentTime: number
+ onSeek: (time: number) => void
+}
+
+export default function ChapterList({ chapters, currentTime, onSeek }: Props) {
+ const fmt = (s: number) => {
+ const h = Math.floor(s / 3600)
+ const m = Math.floor((s % 3600) / 60)
+ const sec = Math.floor(s % 60)
+ return h > 0
+ ? `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
+ : `${m}:${sec.toString().padStart(2, '0')}`
+ }
+
+ const active = chapters.findLastIndex?.((c) => currentTime >= c.start) ?? -1
+
+ return (
+
+ {chapterMarkers.map((m: any, i: number) => (
+
+ ))}
+
+
+ {/* Controls */}
+ 0 ? (currentTime / duration) * 100 : 0}%` }}
+ />
+
+
+
+ {fmtTime(currentTime)}
+ -{fmtTime(duration - currentTime)}
+
+
+
+
+
+
+
+ {/* Secondary controls */}
+
+ {/* Speed */}
+
+
+ {/* Chapter List Panel */}
+ {showChapters && chapters.length > 0 && (
+
+
+ {showSpeedMenu && (
+
+
+ {/* Bookmark */}
+
+
+ {/* Sleep Timer */}
+
+ {SPEEDS.map((s) => (
+
+ ))}
+
+ )}
+
+
+ {sleepTimerActive && sleepTimer !== null && (
+ {Math.floor(sleepTimer / 60)}m
+ )}
+ {showSleepMenu && (
+
+
+ {/* Chapter List */}
+
+
+ {/* Volume */}
+
+
+ {SLEEP_OPTIONS.map((s) => (
+
+ ))}
+
+ )}
+
+
+ )
+}
diff --git a/frontend/src/components/player/MiniPlayer.tsx b/frontend/src/components/player/MiniPlayer.tsx
new file mode 100644
index 0000000..6acc285
--- /dev/null
+++ b/frontend/src/components/player/MiniPlayer.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { Play, Pause, X, ChevronUp } from 'lucide-react'
+import { usePlayerStore } from '../../store/playerStore'
+import CoverImage from '../common/CoverImage'
+import { coverUrl } from '../../api/items'
+
+export default function MiniPlayer() {
+ const { item, currentTime, duration, isPlaying, setPlaying, stop, setExpanded } = usePlayerStore()
+ if (!item) return null
+
+ const meta = item.media?.metadata || {}
+ const title = meta.title || item.relPath || ''
+ const author = meta.authors?.[0]?.name || ''
+ const pct = duration > 0 ? (currentTime / duration) * 100 : 0
+
+ return (
+ Kapitel
+ {chapters.map((ch, i) => ( + + ))} +
+ {/* Progress bar */}
+
+ )
+}
diff --git a/frontend/src/pages/Admin.tsx b/frontend/src/pages/Admin.tsx
new file mode 100644
index 0000000..b61a403
--- /dev/null
+++ b/frontend/src/pages/Admin.tsx
@@ -0,0 +1,262 @@
+import React, { useEffect, useState } from 'react'
+import { Users, Library, Settings, Trash2, Plus, RefreshCw, Loader2, Check, X } from 'lucide-react'
+import { getUsers, createUser, deleteUser, getSettings, updateSettings } from '../api/me'
+import { getLibraries, scanLibrary, createLibrary, deleteLibrary } from '../api/libraries'
+
+type Tab = 'users' | 'libraries' | 'settings'
+
+export default function Admin() {
+ const [tab, setTab] = useState
+
+
+
+
+
+ setExpanded(true)}
+ >
+
+
+
+
+ {title}
+ {author &&{author}
} +
+
+
+
+
+
+ )
+}
+
+function UsersPanel() {
+ const [users, setUsers] = useStateAdministration
+
+ {(['users', 'libraries', 'settings'] as Tab[]).map((t) => (
+
+ ))}
+
+
+ {tab === 'users' &&
+
+ )
+}
+
+function LibrariesPanel() {
+ const [libraries, setLibraries] = useState
+
+
+ {showCreate && (
+ {users.length} Benutzer
+ +
+
+ )}
+
+ {loading ? Neuer Benutzer
+ setForm({ ...form, username: e.target.value })} + className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary" + /> + setForm({ ...form, password: e.target.value })} + className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary" + /> + +
+
+
+
+
+ {users.map((u: any) => (
+
+ )}
+
+
+ ))}
+
+
+
+ {u.username}
+{u.email || 'Keine E-Mail'} · {u.isAdmin ? 'Admin' : 'Benutzer'}
+
+
+ )
+}
+
+function SettingsPanel() {
+ const [settings, setSettings] = useState
+
+
+ {showCreate && (
+ {libraries.length} Bibliotheken
+ +
+
+ )}
+
+ {loading ? Neue Bibliothek
+ setForm({ ...form, name: e.target.value })} + className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary" + /> + setForm({ ...form, path: e.target.value })} + className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary" + /> + +
+
+
+
+
+ {libraries.map((lib: any) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+ {lib.name}
++ {lib.folders?.[0]?.fullPath || ''} · {lib.mediaType} +
+
+ {saved && (
+
+ )
+}
diff --git a/frontend/src/pages/BookDetail.tsx b/frontend/src/pages/BookDetail.tsx
new file mode 100644
index 0000000..57cb918
--- /dev/null
+++ b/frontend/src/pages/BookDetail.tsx
@@ -0,0 +1,274 @@
+import React, { useEffect, useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import {
+ Play, ArrowLeft, Tag, RefreshCw, Search, Check,
+ Loader2, Trash2, X, ExternalLink, BookmarkPlus
+} from 'lucide-react'
+import { getItem, updateItem, triggerMatch, searchMatch, applyMatch, coverUrl } from '../api/items'
+import { getMe, createBookmark, deleteBookmark } from '../api/me'
+import { usePlayerStore } from '../store/playerStore'
+import CoverImage from '../components/common/CoverImage'
+import ChapterList from '../components/player/ChapterList'
+
+export default function BookDetail() {
+ const { id } = useParams<{ id: string }>()
+ const navigate = useNavigate()
+ const [item, setItem] = useState
+
+ )}
+ {[
+ { key: 'autoMatchBooks', label: 'Auto-Match Hörbücher' },
+ { key: 'autoMatchPodcasts', label: 'Auto-Match Podcasts' },
+ ].map(({ key, label }) => (
+
+
+ ))}
+ {label}
+ {toggle(key)} +
+
+ Feed-Update Intervall (Stunden)
+ save('podcastUpdateIntervalHours', parseInt(e.target.value))} + className="w-16 bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-sm text-white text-center focus:outline-none focus:ring-1 focus:ring-primary" + /> +Nicht gefunden
+
+ const meta = item.media?.metadata || {}
+ const title = meta.title || item.relPath || 'Unbekannt'
+ const author = meta.authors?.map((a: any) => a.name).join(', ') || ''
+ const series = meta.series?.[0]
+ const chapters = item.media?.chapters || []
+ const tags: string[] = item.media?.tags || []
+ const isCurrentItem = currentItem?.id === id
+
+ const handleRemoveTag = async (tag: string) => {
+ const newTags = tags.filter((t) => t !== tag)
+ const updated = await updateItem(id!, { tags: newTags })
+ setItem(updated)
+ }
+
+ const handleSearchMatch = async () => {
+ if (!id) return
+ setMatchLoading(true)
+ const res = await searchMatch(id, matchQuery || undefined)
+ setMatchResults(res.results || [])
+ setMatchLoading(false)
+ }
+
+ const handleApplyMatch = async (match: any) => {
+ if (!id) return
+ const updated = await applyMatch(id, match)
+ setItem(updated)
+ setShowMatchPanel(false)
+ setMatchResults([])
+ }
+
+ const handleAutoMatch = async () => {
+ if (!id) return
+ setMatchLoading(true)
+ await triggerMatch(id)
+ setTimeout(async () => {
+ const updated = await getItem(id)
+ setItem(updated)
+ setMatchLoading(false)
+ }, 3000)
+ }
+
+ const fmtTime = (s: number) => {
+ const h = Math.floor(s / 3600)
+ const m = Math.floor((s % 3600) / 60)
+ return h > 0 ? `${h}h ${m}m` : `${m}m`
+ }
+
+ return (
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Library.tsx b/frontend/src/pages/Library.tsx
new file mode 100644
index 0000000..04b6694
--- /dev/null
+++ b/frontend/src/pages/Library.tsx
@@ -0,0 +1,183 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { useParams } from 'react-router-dom'
+import { Search, RefreshCw, Grid, List, Loader2 } from 'lucide-react'
+import { getLibraryItems, scanLibrary } from '../api/libraries'
+import { getMe } from '../api/me'
+import BookCard from '../components/library/BookCard'
+
+const PAGE_SIZE = 48
+
+export default function Library() {
+ const { libraryId } = useParams<{ libraryId: string }>()
+ const [items, setItems] = useState
+ {/* Cover */}
+
+
+ {/* Description */}
+ {meta.description && (
+
+ {series && (
+
+ + {series.name}{series.sequence ? ` #${series.sequence}` : ''} +
+ )} +{title}
+ {author &&{author}
} + {meta.narrator &&Sprecher: {meta.narrator}
} + {meta.publisher &&Verlag: {meta.publisher} {meta.publishedYear ? `(${meta.publishedYear})` : ''}
} + + {item.media?.duration > 0 && ( +{fmtTime(item.media.duration)}
+ )} + + {/* Progress */} + {progress && !progress.isFinished && ( +
+
+ )}
+ {progress?.isFinished &&
+
+
+ {fmtTime(progress.currentTime)} von {fmtTime(progress.duration)}
+✓ Abgeschlossen
} + + {/* Tags */} +
+ {tags.map((tag) => (
+
+ {tag}
+
+
+ ))}
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+ )}
+
+ {/* Match info */}
+ {item.matchedSource && item.matchedSource !== 'none' && (
+ Beschreibung
+{meta.description}
+
+
+ )}
+
+ {/* Manual Match Panel */}
+ {showMatchPanel && (
+
+
+ )}
+
+ {/* Chapters */}
+ {chapters.length > 0 && (
+ Manuelles Matching
+
+ setMatchQuery(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && handleSearchMatch()}
+ placeholder={`${meta.title || 'Suche...'}`}
+ className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
+ />
+
+
+ {matchResults.map((r, i) => (
+
+
+ ))}
+
+
+
+ {r.title}
+{r.author} · {r.source} · {Math.round(r.confidence * 100)}%
+
+ {
+ if (isCurrentItem) usePlayerStore.getState().seek(t)
+ else play(item).then(() => usePlayerStore.getState().seek(t))
+ }}
+ />
+
+ )}
+
+ {/* Bookmarks */}
+ {bookmarks.length > 0 && (
+ + Kapitel ({chapters.length}) +
+
+
+ )}
+ Lesezeichen
+
+ {bookmarks.map((b, i) => {
+ const fmt = (s: number) => {
+ const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = Math.floor(s % 60)
+ return h > 0 ? `${h}:${m.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}` : `${m}:${sec.toString().padStart(2,'0')}`
+ }
+ return (
+
+
+ {fmt(b.time)}
+ {b.title}
+
+
+ )
+ })}
+
+ {/* Toolbar */}
+
+ )
+}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 0000000..f2469b6
--- /dev/null
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { BookOpen, Loader2 } from 'lucide-react'
+import { useAuthStore } from '../store/authStore'
+
+export default function Login() {
+ const [username, setUsername] = useState('')
+ const [password, setPassword] = useState('')
+ const [error, setError] = useState('')
+ const { login, loading } = useAuthStore()
+ const navigate = useNavigate()
+
+ const submit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setError('')
+ try {
+ await login(username, password)
+ navigate('/', { replace: true })
+ } catch {
+ setError('Ungültige Anmeldedaten')
+ }
+ }
+
+ return (
+
+
+
+ {/* Stats */}
+
+
+
+ {allTags.length > 0 && (
+
+ )}
+
+
+
+
+
+
+
+ + {total} {total === 1 ? 'Eintrag' : 'Einträge'} + {filterTag && ` · Filter: ${filterTag}`} +
+ + {/* Grid */} + {loading ? ( +
+
+ ) : enriched.length === 0 ? (
+
+
+ ) : view === 'grid' ? (
+ Keine Einträge gefunden
+Klicke auf „Scan" um die Bibliothek zu durchsuchen.
+
+ {enriched.map((item) =>
+ ) : (
+
+ {enriched.map((item) => {
+ const meta = item.media?.metadata || {}
+ const title = meta.title || item.relPath || 'Unbekannt'
+ const author = meta.authors?.[0]?.name || ''
+ const p = item._progress
+ return (
+
+ )}
+
+ {/* Pagination */}
+ {total > PAGE_SIZE && (
+
+
+ )
+ })}
+
+
+ {p && !p.isFinished && (
+ {title}
+ {author &&{author}
} +
+
+
+ )}
+ {p?.isFinished && Fertig}
+
+
+
+ {page + 1} / {Math.ceil(total / PAGE_SIZE)}
+
+
+
+ )}
+
+
+ )
+}
diff --git a/frontend/src/pages/PodcastDetail.tsx b/frontend/src/pages/PodcastDetail.tsx
new file mode 100644
index 0000000..d9bbf57
--- /dev/null
+++ b/frontend/src/pages/PodcastDetail.tsx
@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, RefreshCw, Loader2, ExternalLink } from 'lucide-react'
+import api from '../api/client'
+import CoverImage from '../components/common/CoverImage'
+import { coverUrl } from '../api/items'
+
+export default function PodcastDetail() {
+ const { id } = useParams<{ id: string }>()
+ const navigate = useNavigate()
+ const [podcast, setPodcast] = useState
+
+
+
+
+
+ Audiolib
+Nicht gefunden
+
+ return (
+
+
+
+
+ )
+}
diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts
new file mode 100644
index 0000000..8c2c8fa
--- /dev/null
+++ b/frontend/src/store/authStore.ts
@@ -0,0 +1,52 @@
+import { create } from 'zustand'
+import { login as apiLogin, authorize, logout as apiLogout } from '../api/auth'
+
+interface AuthState {
+ user: any | null
+ libraries: any[]
+ token: string | null
+ loading: boolean
+ login: (username: string, password: string) => Promise
+
+
+ {podcast.description && (
+
+
+ {podcast.title}
+ {podcast.author &&{podcast.author}
} +{podcast.numEpisodes} Episoden
+ + {podcast.feedLastChecked && ( ++ Zuletzt aktualisiert: {fmtDate(podcast.feedLastChecked)} +
+ )} + + +{podcast.description}
+ )} + + {/* Feed URL */} +
+
+
+ {/* Episodes */}
+ RSS-Feed
+
+ setFeedInput(e.target.value)}
+ placeholder="https://..."
+ className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
+ />
+
+
+
+ {/* Feed-Suche */}
+
+ setSearchQ(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && handleSearchFeed()}
+ placeholder="Podcast suchen..."
+ className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none"
+ />
+
+
+ {searchResults.map((r, i) => (
+
+
+ ))}
+
+
+
+ {r.title}
+{r.author} · {r.trackCount} Episoden
+Episoden
+
+ {podcast.episodes?.map((ep: any) => (
+
+
+
+ ))}
+ {(!podcast.episodes || podcast.episodes.length === 0) && (
+
+
+ {ep.title || 'Unbekannte Episode'}
+
+ {ep.pubDate && {fmtDate(ep.pubDate)}}
+ {ep.duration > 0 && {fmtDur(ep.duration)}}
+
+ Keine Episoden. Feed konfigurieren und aktualisieren.
+ )} +