Phase 5-9: Matching-Engine, Podcast-Support, Web-Interface + Player
Backend: - Matching-Orchestrator mit deutschen Serien-Patterns (drei ???, TKKG, ...) - Vollständige MusicBrainz-Integration (Tracklist → Kapitel, Cover Art Archive) - OpenLibrary + Google Books als Fallback-Quellen - Auto-Accept (≥0.75) vs zu_prüfen (0.5-0.75) vs kein Match - Manuelles Matching: GET /api/items/:id/match/search, POST apply - RSS-Feed-Manager: feedparser, iTunes Search, periodisches Update - APScheduler für Podcast-Feed-Updates (konfigurierbares Intervall) - Podcast-Router: Feed-URL setzen, Episoden, Feed-Suche - HLS: FFmpeg läuft als Background-Task, wartet auf ersten Segment - main.py: APScheduler + neue Router eingebunden Frontend (React + Vite + Tailwind + HLS.js): - Login-Seite mit Fehlerbehandlung - Library-Seite: Grid/Listen-Ansicht, Suche, Tag-Filter, Pagination, Scan - BookCard: Cover, Fortschrittsbalken, zu_prüfen Badge, Quick-Play - BookDetail: Metadaten, Matching-Panel, Kapitel-Liste, Lesezeichen - AudioPlayer: HLS.js, Kapitel-Marker auf Fortschrittsbalken, Speed, Sleep-Timer, Lesezeichen, Keyboard-Shortcuts (Space/Arrows) - MiniPlayer: persistent an Fußzeile, expandierbar - PodcastDetail: Feed-URL, iTunes-Suche, Episoden-Liste - Admin-Panel: Benutzer/Bibliotheken/Einstellungen verwalten - App.tsx: React Router, Auth-Guard, Player-Overlay Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Audiolib
@@ -1,17 +1,107 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect } from 'react'
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { useAuthStore } from './store/authStore'
|
||||
import { usePlayerStore } from './store/playerStore'
|
||||
import Layout from './components/common/Layout'
|
||||
import AudioPlayer from './components/player/AudioPlayer'
|
||||
import Login from './pages/Login'
|
||||
import Library from './pages/Library'
|
||||
import BookDetail from './pages/BookDetail'
|
||||
import PodcastDetail from './pages/PodcastDetail'
|
||||
import Admin from './pages/Admin'
|
||||
|
||||
function PrivateRoute({ children }: { children: React.ReactNode }) {
|
||||
const token = useAuthStore((s) => s.token)
|
||||
if (!token) return <Navigate to="/login" replace />
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
function AppRoutes() {
|
||||
const { user, loadAuth } = useAuthStore()
|
||||
const { libraries } = useAuthStore()
|
||||
const { expanded, setExpanded } = usePlayerStore()
|
||||
|
||||
useEffect(() => { loadAuth() }, [])
|
||||
|
||||
const defaultLib = libraries?.[0]?.id
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold text-primary mb-4">Audiolib</h1>
|
||||
<p className="text-gray-400 text-lg">Web-Interface wird in Phase 8 implementiert.</p>
|
||||
<p className="text-gray-500 mt-2 text-sm">
|
||||
Die Swift-App kann bereits über{' '}
|
||||
<code className="bg-surface px-2 py-1 rounded text-primary">localhost:3000</code>{' '}
|
||||
verbunden werden.
|
||||
</p>
|
||||
</div>
|
||||
<>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route
|
||||
path="/*"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<Layout>
|
||||
<Routes>
|
||||
<Route path="/" element={
|
||||
defaultLib
|
||||
? <Navigate to={`/library/${defaultLib}`} replace />
|
||||
: <div className="p-6 text-gray-400">Keine Bibliothek. Im Admin-Bereich anlegen.</div>
|
||||
} />
|
||||
<Route path="/library/:libraryId" element={<Library />} />
|
||||
<Route path="/book/:id" element={<BookDetail />} />
|
||||
<Route path="/podcasts" element={<PodcastList />} />
|
||||
<Route path="/podcast/:id" element={<PodcastDetail />} />
|
||||
<Route path="/admin" element={<Admin />} />
|
||||
</Routes>
|
||||
</Layout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
|
||||
{/* Vollbild-Player als Overlay */}
|
||||
{expanded && (
|
||||
<div className="fixed inset-0 bg-background z-50 overflow-y-auto">
|
||||
<AudioPlayer />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function PodcastList() {
|
||||
const { libraries } = useAuthStore()
|
||||
const [podcasts, setPodcasts] = React.useState<any[]>([])
|
||||
const podcastLib = libraries.find((l: any) => l.mediaType === 'podcast')
|
||||
|
||||
React.useEffect(() => {
|
||||
import('./api/client').then(({ default: api }) => {
|
||||
api.get('/api/podcasts').then((r) => setPodcasts(r.data.podcasts || []))
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-white mb-6">Podcasts</h1>
|
||||
{podcasts.length === 0 ? (
|
||||
<p className="text-gray-500">Noch keine Podcasts. Library vom Typ „Podcast" scannen.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
||||
{podcasts.map((p: any) => (
|
||||
<a key={p.id} href={`/podcast/${p.id}`} className="group block">
|
||||
<div className="aspect-square bg-surface rounded-lg overflow-hidden mb-2">
|
||||
{p.cover
|
||||
? <img src={p.cover} alt={p.title} className="w-full h-full object-cover" />
|
||||
: <div className="w-full h-full flex items-center justify-center text-gray-600 text-4xl">🎙</div>
|
||||
}
|
||||
</div>
|
||||
<p className="text-sm font-medium text-white truncate">{p.title}</p>
|
||||
<p className="text-xs text-gray-400">{p.numEpisodes} Episoden</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AppRoutes />
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
10
frontend/src/api/auth.ts
Normal file
10
frontend/src/api/auth.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import api from './client'
|
||||
|
||||
export const login = (username: string, password: string) =>
|
||||
api.post('/login', { username, password }).then((r) => r.data)
|
||||
|
||||
export const authorize = () =>
|
||||
api.get('/api/authorize').then((r) => r.data)
|
||||
|
||||
export const logout = () =>
|
||||
api.post('/logout').then((r) => r.data)
|
||||
22
frontend/src/api/client.ts
Normal file
22
frontend/src/api/client.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({ baseURL: '/' })
|
||||
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) config.headers.Authorization = `Bearer ${token}`
|
||||
return config
|
||||
})
|
||||
|
||||
api.interceptors.response.use(
|
||||
(r) => r,
|
||||
(err) => {
|
||||
if (err.response?.status === 401) {
|
||||
localStorage.removeItem('token')
|
||||
window.location.href = '/login'
|
||||
}
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
export default api
|
||||
30
frontend/src/api/items.ts
Normal file
30
frontend/src/api/items.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import api from './client'
|
||||
|
||||
export const getItem = (id: string) =>
|
||||
api.get(`/api/items/${id}`).then((r) => r.data)
|
||||
|
||||
export const updateItem = (id: string, data: object) =>
|
||||
api.patch(`/api/items/${id}`, data).then((r) => r.data)
|
||||
|
||||
export const deleteItem = (id: string) =>
|
||||
api.delete(`/api/items/${id}`).then((r) => r.data)
|
||||
|
||||
export const startPlayback = (id: string, body?: object) =>
|
||||
api.post(`/api/items/${id}/play`, body || {}).then((r) => r.data)
|
||||
|
||||
export const syncSession = (sessionId: string, data: object) =>
|
||||
api.post(`/api/playback-session/${sessionId}/sync`, data).then((r) => r.data)
|
||||
|
||||
export const closeSession = (sessionId: string) =>
|
||||
api.delete(`/api/playback-session/${sessionId}`).then((r) => r.data)
|
||||
|
||||
export const searchMatch = (id: string, q?: string) =>
|
||||
api.get(`/api/items/${id}/match/search`, { params: q ? { q } : {} }).then((r) => r.data)
|
||||
|
||||
export const applyMatch = (id: string, match: object) =>
|
||||
api.post(`/api/items/${id}/match/apply`, match).then((r) => r.data)
|
||||
|
||||
export const triggerMatch = (id: string) =>
|
||||
api.post(`/api/items/${id}/match`).then((r) => r.data)
|
||||
|
||||
export const coverUrl = (id: string) => `/api/items/${id}/cover`
|
||||
21
frontend/src/api/libraries.ts
Normal file
21
frontend/src/api/libraries.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import api from './client'
|
||||
|
||||
export const getLibraries = () =>
|
||||
api.get('/api/libraries').then((r) => r.data.libraries)
|
||||
|
||||
export const getLibraryItems = (
|
||||
libraryId: string,
|
||||
params?: { page?: number; limit?: number; search?: string; sort?: string }
|
||||
) => api.get(`/api/libraries/${libraryId}/items`, { params }).then((r) => r.data)
|
||||
|
||||
export const searchLibrary = (libraryId: string, q: string) =>
|
||||
api.get(`/api/libraries/${libraryId}/search`, { params: { q } }).then((r) => r.data)
|
||||
|
||||
export const scanLibrary = (libraryId: string) =>
|
||||
api.post(`/api/libraries/${libraryId}/scan`).then((r) => r.data)
|
||||
|
||||
export const createLibrary = (data: object) =>
|
||||
api.post('/api/libraries', data).then((r) => r.data)
|
||||
|
||||
export const deleteLibrary = (id: string) =>
|
||||
api.delete(`/api/libraries/${id}`).then((r) => r.data)
|
||||
34
frontend/src/api/me.ts
Normal file
34
frontend/src/api/me.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import api from './client'
|
||||
|
||||
export const getMe = () =>
|
||||
api.get('/api/me').then((r) => r.data)
|
||||
|
||||
export const updateProgress = (libraryItemId: string, data: object) =>
|
||||
api.patch(`/api/me/progress/${libraryItemId}`, data).then((r) => r.data)
|
||||
|
||||
export const syncLocalProgress = (data: object) =>
|
||||
api.post('/api/me/sync-local-progress', data).then((r) => r.data)
|
||||
|
||||
export const createBookmark = (libraryItemId: string, time: number, title: string) =>
|
||||
api.post(`/api/me/bookmark/${libraryItemId}`, { time, title }).then((r) => r.data)
|
||||
|
||||
export const deleteBookmark = (libraryItemId: string, time: number) =>
|
||||
api.delete(`/api/me/bookmark/${libraryItemId}/${time}`).then((r) => r.data)
|
||||
|
||||
export const getUsers = () =>
|
||||
api.get('/api/users').then((r) => r.data)
|
||||
|
||||
export const createUser = (data: object) =>
|
||||
api.post('/api/users', data).then((r) => r.data)
|
||||
|
||||
export const updateUser = (id: string, data: object) =>
|
||||
api.patch(`/api/users/${id}`, data).then((r) => r.data)
|
||||
|
||||
export const deleteUser = (id: string) =>
|
||||
api.delete(`/api/users/${id}`).then((r) => r.data)
|
||||
|
||||
export const getSettings = () =>
|
||||
api.get('/api/settings').then((r) => r.data)
|
||||
|
||||
export const updateSettings = (data: object) =>
|
||||
api.patch('/api/settings', data).then((r) => r.data)
|
||||
29
frontend/src/components/common/CoverImage.tsx
Normal file
29
frontend/src/components/common/CoverImage.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React, { useState } from 'react'
|
||||
import { BookOpen } from 'lucide-react'
|
||||
|
||||
interface Props {
|
||||
src?: string | null
|
||||
alt?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export default function CoverImage({ src, alt, className = '' }: Props) {
|
||||
const [error, setError] = useState(false)
|
||||
|
||||
if (!src || error) {
|
||||
return (
|
||||
<div className={`bg-surface flex items-center justify-center ${className}`}>
|
||||
<BookOpen className="text-gray-600" size={32} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt || ''}
|
||||
className={`object-cover ${className}`}
|
||||
onError={() => setError(true)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
20
frontend/src/components/common/Layout.tsx
Normal file
20
frontend/src/components/common/Layout.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react'
|
||||
import Sidebar from './Sidebar'
|
||||
import MiniPlayer from '../player/MiniPlayer'
|
||||
import { usePlayerStore } from '../../store/playerStore'
|
||||
|
||||
interface Props { children: React.ReactNode }
|
||||
|
||||
export default function Layout({ children }: Props) {
|
||||
const item = usePlayerStore((s) => s.item)
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-background overflow-hidden">
|
||||
<Sidebar />
|
||||
<main className={`flex-1 overflow-y-auto ${item ? 'pb-24' : ''}`}>
|
||||
{children}
|
||||
</main>
|
||||
{item && <MiniPlayer />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
76
frontend/src/components/common/Sidebar.tsx
Normal file
76
frontend/src/components/common/Sidebar.tsx
Normal file
@@ -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 (
|
||||
<aside className="w-56 bg-surface flex-shrink-0 flex flex-col border-r border-white/5">
|
||||
{/* Logo */}
|
||||
<div className="p-4 flex items-center gap-2 border-b border-white/5">
|
||||
<BookOpen className="text-primary" size={22} />
|
||||
<span className="font-bold text-white text-lg">Audiolib</span>
|
||||
</div>
|
||||
|
||||
{/* Libraries */}
|
||||
<nav className="flex-1 overflow-y-auto p-2">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Bibliotheken</p>
|
||||
{libraries.map((lib: any) => (
|
||||
<NavLink
|
||||
key={lib.id}
|
||||
to={`/library/${lib.id}`}
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
|
||||
isActive ? 'bg-primary/20 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Library size={16} />
|
||||
{lib.name}
|
||||
</NavLink>
|
||||
))}
|
||||
|
||||
<div className="mt-4 border-t border-white/5 pt-2">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider px-2 py-2">Navigation</p>
|
||||
<NavLink
|
||||
to="/podcasts"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
|
||||
isActive ? 'bg-primary/20 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Mic2 size={16} />
|
||||
Podcasts
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-2 border-t border-white/5">
|
||||
{user?.isAdmin && (
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
|
||||
isActive ? 'bg-primary/20 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Settings size={16} />
|
||||
Admin
|
||||
</NavLink>
|
||||
)}
|
||||
<button
|
||||
onClick={logout}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-400 hover:text-white hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<LogOut size={16} />
|
||||
Abmelden
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
75
frontend/src/components/library/BookCard.tsx
Normal file
75
frontend/src/components/library/BookCard.tsx
Normal file
@@ -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 (
|
||||
<div
|
||||
className="group relative bg-surface rounded-lg overflow-hidden cursor-pointer hover:ring-1 hover:ring-primary/50 transition-all"
|
||||
onClick={() => navigate(`/book/${item.id}`)}
|
||||
>
|
||||
<div className="relative aspect-square">
|
||||
<CoverImage
|
||||
src={hasCover ? coverUrl(item.id) : null}
|
||||
alt={title}
|
||||
className="w-full h-full"
|
||||
/>
|
||||
{isPlaying && (
|
||||
<div className="absolute inset-0 bg-black/40 flex items-center justify-center">
|
||||
<div className="w-3 h-3 bg-primary rounded-full animate-pulse" />
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
className="absolute bottom-2 right-2 bg-primary text-black rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg"
|
||||
onClick={(e) => { e.stopPropagation(); play(item) }}
|
||||
>
|
||||
<Play size={14} fill="currentColor" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
{series && (
|
||||
<p className="text-xs text-primary truncate mb-0.5">
|
||||
{series.name}{series.sequence ? ` #${series.sequence}` : ''}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm font-medium text-white truncate">{title}</p>
|
||||
{author && <p className="text-xs text-gray-400 truncate mt-0.5">{author}</p>}
|
||||
|
||||
{progress && !progress.isFinished && (
|
||||
<div className="mt-2 h-0.5 bg-white/10 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary rounded-full"
|
||||
style={{ width: `${Math.min((progress.currentTime / progress.duration) * 100, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tags.includes('zu_prüfen') && (
|
||||
<div className="mt-1.5 flex items-center gap-1">
|
||||
<AlertCircle size={10} className="text-yellow-400 flex-shrink-0" />
|
||||
<span className="text-xs text-yellow-400">zu prüfen</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
304
frontend/src/components/player/AudioPlayer.tsx
Normal file
304
frontend/src/components/player/AudioPlayer.tsx
Normal file
@@ -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<HTMLAudioElement>(null)
|
||||
const hlsRef = useRef<Hls | null>(null)
|
||||
const [showChapters, setShowChapters] = useState(false)
|
||||
const [showSpeedMenu, setShowSpeedMenu] = useState(false)
|
||||
const [showSleepMenu, setShowSleepMenu] = useState(false)
|
||||
const [muted, setMuted] = useState(false)
|
||||
|
||||
const meta = item?.media?.metadata || {}
|
||||
const title = meta.title || item?.relPath || ''
|
||||
const author = meta.authors?.[0]?.name || ''
|
||||
|
||||
// HLS laden sobald sich die Session ändert
|
||||
useEffect(() => {
|
||||
if (!session || !audioRef.current) return
|
||||
const hlsUrl = session.audioTracks?.[0]?.contentUrl
|
||||
if (!hlsUrl) return
|
||||
|
||||
if (hlsRef.current) { hlsRef.current.destroy(); hlsRef.current = null }
|
||||
|
||||
const audio = audioRef.current
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls({ startPosition: session.currentTime || 0 })
|
||||
hls.loadSource(hlsUrl)
|
||||
hls.attachMedia(audio)
|
||||
hlsRef.current = hls
|
||||
} else if (audio.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
audio.src = hlsUrl
|
||||
audio.currentTime = session.currentTime || 0
|
||||
}
|
||||
|
||||
audio.playbackRate = playbackRate
|
||||
audio.volume = volume
|
||||
audio.play().catch(() => {})
|
||||
|
||||
return () => {
|
||||
if (hlsRef.current) { hlsRef.current.destroy(); hlsRef.current = null }
|
||||
}
|
||||
}, [session?.id])
|
||||
|
||||
// isPlaying <-> audio
|
||||
useEffect(() => {
|
||||
if (!audioRef.current) return
|
||||
if (isPlaying) audioRef.current.play().catch(() => {})
|
||||
else audioRef.current.pause()
|
||||
}, [isPlaying])
|
||||
|
||||
useEffect(() => {
|
||||
if (audioRef.current) audioRef.current.playbackRate = playbackRate
|
||||
}, [playbackRate])
|
||||
|
||||
useEffect(() => {
|
||||
if (audioRef.current) audioRef.current.volume = muted ? 0 : volume
|
||||
}, [volume, muted])
|
||||
|
||||
// Keyboard shortcuts
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.target instanceof HTMLInputElement) return
|
||||
if (e.code === 'Space') { e.preventDefault(); setPlaying(!isPlaying) }
|
||||
if (e.code === 'ArrowRight') audioRef.current && (audioRef.current.currentTime += 30)
|
||||
if (e.code === 'ArrowLeft') audioRef.current && (audioRef.current.currentTime -= 10)
|
||||
}
|
||||
window.addEventListener('keydown', handler)
|
||||
return () => window.removeEventListener('keydown', handler)
|
||||
}, [isPlaying])
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
if (!audioRef.current) return
|
||||
setCurrentTime(audioRef.current.currentTime)
|
||||
}
|
||||
|
||||
const handleLoadedMetadata = () => {
|
||||
if (!audioRef.current) return
|
||||
setDuration(audioRef.current.duration)
|
||||
}
|
||||
|
||||
const handleEnded = () => {
|
||||
setPlaying(false)
|
||||
syncProgress()
|
||||
}
|
||||
|
||||
const handleSeekBar = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const t = parseFloat(e.target.value)
|
||||
if (audioRef.current) audioRef.current.currentTime = t
|
||||
seek(t)
|
||||
}
|
||||
|
||||
const fmtTime = (s: number) => {
|
||||
if (!isFinite(s)) return '0:00'
|
||||
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 currentChapter = chapters.findLast?.((c: any) => currentTime >= c.start) || chapters[0]
|
||||
|
||||
const addBookmark = async () => {
|
||||
if (!item) return
|
||||
const label = currentChapter?.title || fmtTime(currentTime)
|
||||
await createBookmark(item.id, currentTime, label)
|
||||
}
|
||||
|
||||
const SPEEDS = [0.75, 1, 1.25, 1.5, 1.75, 2]
|
||||
const SLEEP_OPTIONS = [15 * 60, 30 * 60, 45 * 60, 60 * 60]
|
||||
|
||||
// Chapter progress markers
|
||||
const chapterMarkers = chapters.map((c: any) => ({
|
||||
pct: duration > 0 ? (c.start / duration) * 100 : 0,
|
||||
}))
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-background p-6 overflow-y-auto">
|
||||
<audio
|
||||
ref={audioRef}
|
||||
onTimeUpdate={handleTimeUpdate}
|
||||
onLoadedMetadata={handleLoadedMetadata}
|
||||
onEnded={handleEnded}
|
||||
/>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<button onClick={() => setExpanded(false)} className="text-gray-400 hover:text-white">
|
||||
<ChevronLeft size={24} />
|
||||
</button>
|
||||
<span className="text-sm text-gray-400">Jetzt läuft</span>
|
||||
<button onClick={stop} className="text-gray-400 hover:text-white">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Cover */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<CoverImage
|
||||
src={item ? coverUrl(item.id) : null}
|
||||
alt={title}
|
||||
className="w-64 h-64 rounded-xl shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div className="text-center mb-6">
|
||||
{currentChapter && (
|
||||
<p className="text-xs text-primary mb-1 truncate">{currentChapter.title}</p>
|
||||
)}
|
||||
<h2 className="text-xl font-bold text-white truncate">{title}</h2>
|
||||
{author && <p className="text-gray-400 mt-1 truncate">{author}</p>}
|
||||
</div>
|
||||
|
||||
{/* Progress bar with chapter markers */}
|
||||
<div className="mb-4 relative">
|
||||
<div className="relative h-1.5 bg-white/10 rounded-full mb-1">
|
||||
{chapterMarkers.map((m: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute top-0 w-0.5 h-full bg-white/20"
|
||||
style={{ left: `${m.pct}%` }}
|
||||
/>
|
||||
))}
|
||||
<div
|
||||
className="absolute top-0 left-0 h-full bg-primary rounded-full pointer-events-none"
|
||||
style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }}
|
||||
/>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={duration || 0}
|
||||
step={1}
|
||||
value={currentTime}
|
||||
onChange={handleSeekBar}
|
||||
className="absolute inset-0 w-full opacity-0 cursor-pointer h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-500">
|
||||
<span>{fmtTime(currentTime)}</span>
|
||||
<span>-{fmtTime(duration - currentTime)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center justify-center gap-6 mb-6">
|
||||
<button
|
||||
className="text-gray-400 hover:text-white"
|
||||
onClick={() => audioRef.current && (audioRef.current.currentTime -= 30)}
|
||||
>
|
||||
<SkipBack size={28} />
|
||||
</button>
|
||||
<button
|
||||
className="w-14 h-14 rounded-full bg-primary text-black flex items-center justify-center hover:bg-primary/80 transition-colors"
|
||||
onClick={() => setPlaying(!isPlaying)}
|
||||
>
|
||||
{isPlaying ? <Pause size={24} fill="currentColor" /> : <Play size={24} fill="currentColor" />}
|
||||
</button>
|
||||
<button
|
||||
className="text-gray-400 hover:text-white"
|
||||
onClick={() => audioRef.current && (audioRef.current.currentTime += 30)}
|
||||
>
|
||||
<SkipForward size={28} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Secondary controls */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Speed */}
|
||||
<div className="relative">
|
||||
<button
|
||||
className="text-sm text-gray-400 hover:text-white px-2 py-1 rounded"
|
||||
onClick={() => setShowSpeedMenu(!showSpeedMenu)}
|
||||
>
|
||||
{playbackRate}×
|
||||
</button>
|
||||
{showSpeedMenu && (
|
||||
<div className="absolute bottom-8 left-0 bg-surface border border-white/10 rounded-lg shadow-xl overflow-hidden z-10">
|
||||
{SPEEDS.map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
className={`block w-full px-4 py-2 text-sm text-left hover:bg-white/5 ${playbackRate === s ? 'text-primary' : 'text-gray-300'}`}
|
||||
onClick={() => { setPlaybackRate(s); setShowSpeedMenu(false) }}
|
||||
>
|
||||
{s}×
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bookmark */}
|
||||
<button className="text-gray-400 hover:text-white" onClick={addBookmark}>
|
||||
<BookmarkPlus size={20} />
|
||||
</button>
|
||||
|
||||
{/* Sleep Timer */}
|
||||
<div className="relative">
|
||||
<button
|
||||
className={`hover:text-white ${sleepTimerActive ? 'text-primary' : 'text-gray-400'}`}
|
||||
onClick={() => sleepTimerActive ? cancelSleepTimer() : setShowSleepMenu(!showSleepMenu)}
|
||||
>
|
||||
<Moon size={20} />
|
||||
</button>
|
||||
{sleepTimerActive && sleepTimer !== null && (
|
||||
<span className="text-xs text-primary ml-1">{Math.floor(sleepTimer / 60)}m</span>
|
||||
)}
|
||||
{showSleepMenu && (
|
||||
<div className="absolute bottom-8 right-0 bg-surface border border-white/10 rounded-lg shadow-xl overflow-hidden z-10">
|
||||
{SLEEP_OPTIONS.map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
className="block w-full px-4 py-2 text-sm text-left text-gray-300 hover:bg-white/5"
|
||||
onClick={() => { setSleepTimer(s); setShowSleepMenu(false) }}
|
||||
>
|
||||
{s / 60} Min
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Chapter List */}
|
||||
<button
|
||||
className={`hover:text-white ${showChapters ? 'text-primary' : 'text-gray-400'}`}
|
||||
onClick={() => setShowChapters(!showChapters)}
|
||||
>
|
||||
<List size={20} />
|
||||
</button>
|
||||
|
||||
{/* Volume */}
|
||||
<button className="text-gray-400 hover:text-white" onClick={() => setMuted(!muted)}>
|
||||
{muted ? <VolumeX size={20} /> : <Volume2 size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Chapter List Panel */}
|
||||
{showChapters && chapters.length > 0 && (
|
||||
<ChapterList
|
||||
chapters={chapters}
|
||||
currentTime={currentTime}
|
||||
onSeek={(t) => { if (audioRef.current) audioRef.current.currentTime = t; seek(t) }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
39
frontend/src/components/player/ChapterList.tsx
Normal file
39
frontend/src/components/player/ChapterList.tsx
Normal file
@@ -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 (
|
||||
<div className="mt-4 border-t border-white/10 pt-4 max-h-64 overflow-y-auto">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-2">Kapitel</p>
|
||||
{chapters.map((ch, i) => (
|
||||
<button
|
||||
key={ch.id}
|
||||
className={`w-full flex items-center gap-3 px-2 py-2 rounded-lg text-left transition-colors ${
|
||||
i === active ? 'bg-primary/10 text-primary' : 'text-gray-400 hover:text-white hover:bg-white/5'
|
||||
}`}
|
||||
onClick={() => onSeek(ch.start)}
|
||||
>
|
||||
<span className="text-xs font-mono w-10 flex-shrink-0">{fmt(ch.start)}</span>
|
||||
<span className="text-sm truncate">{ch.title}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
53
frontend/src/components/player/MiniPlayer.tsx
Normal file
53
frontend/src/components/player/MiniPlayer.tsx
Normal file
@@ -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 (
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-surface border-t border-white/10 z-50">
|
||||
{/* Progress bar */}
|
||||
<div className="h-0.5 bg-white/10">
|
||||
<div className="h-full bg-primary transition-all" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<div
|
||||
className="cursor-pointer flex items-center gap-3 flex-1 min-w-0"
|
||||
onClick={() => setExpanded(true)}
|
||||
>
|
||||
<CoverImage
|
||||
src={item.media?.coverPath ? coverUrl(item.id) : null}
|
||||
alt={title}
|
||||
className="w-10 h-10 rounded flex-shrink-0"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-white truncate">{title}</p>
|
||||
{author && <p className="text-xs text-gray-400 truncate">{author}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button
|
||||
className="w-9 h-9 rounded-full bg-primary text-black flex items-center justify-center"
|
||||
onClick={() => setPlaying(!isPlaying)}
|
||||
>
|
||||
{isPlaying ? <Pause size={16} fill="currentColor" /> : <Play size={16} fill="currentColor" />}
|
||||
</button>
|
||||
<button className="text-gray-400 hover:text-white p-1" onClick={stop}>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
262
frontend/src/pages/Admin.tsx
Normal file
262
frontend/src/pages/Admin.tsx
Normal file
@@ -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<Tab>('users')
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-white mb-6">Administration</h1>
|
||||
<div className="flex gap-1 mb-6 bg-surface rounded-xl p-1 w-fit">
|
||||
{(['users', 'libraries', 'settings'] as Tab[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setTab(t)}
|
||||
className={`px-4 py-2 rounded-lg text-sm transition-colors ${
|
||||
tab === t ? 'bg-primary text-black font-medium' : 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{t === 'users' ? 'Benutzer' : t === 'libraries' ? 'Bibliotheken' : 'Einstellungen'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === 'users' && <UsersPanel />}
|
||||
{tab === 'libraries' && <LibrariesPanel />}
|
||||
{tab === 'settings' && <SettingsPanel />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function UsersPanel() {
|
||||
const [users, setUsers] = useState<any[]>([])
|
||||
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 (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="text-gray-400 text-sm">{users.length} Benutzer</p>
|
||||
<button
|
||||
onClick={() => setShowCreate(!showCreate)}
|
||||
className="flex items-center gap-2 bg-primary text-black px-3 py-2 rounded-lg text-sm font-medium"
|
||||
>
|
||||
<Plus size={14} /> Neu
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showCreate && (
|
||||
<div className="bg-surface border border-white/10 rounded-xl p-4 mb-4 space-y-3">
|
||||
<h3 className="text-sm font-semibold text-white">Neuer Benutzer</h3>
|
||||
<input
|
||||
type="text" placeholder="Benutzername"
|
||||
value={form.username} onChange={(e) => 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"
|
||||
/>
|
||||
<input
|
||||
type="password" placeholder="Passwort"
|
||||
value={form.password} onChange={(e) => 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"
|
||||
/>
|
||||
<label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
||||
<input type="checkbox" checked={form.isAdmin} onChange={(e) => setForm({ ...form, isAdmin: e.target.checked })} />
|
||||
Admin-Rechte
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={handleCreate} disabled={!form.username || !form.password}
|
||||
className="bg-primary text-black px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
|
||||
Anlegen
|
||||
</button>
|
||||
<button onClick={() => setShowCreate(false)} className="text-gray-400 px-4 py-2 rounded-lg text-sm hover:text-white">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? <Loader2 className="text-primary animate-spin" size={24} /> : (
|
||||
<div className="space-y-1">
|
||||
{users.map((u: any) => (
|
||||
<div key={u.id} className="flex items-center gap-4 bg-surface px-4 py-3 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-white">{u.username}</p>
|
||||
<p className="text-xs text-gray-500">{u.email || 'Keine E-Mail'} · {u.isAdmin ? 'Admin' : 'Benutzer'}</p>
|
||||
</div>
|
||||
<button onClick={() => handleDelete(u.id)} className="text-gray-500 hover:text-red-400 p-1">
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function LibrariesPanel() {
|
||||
const [libraries, setLibraries] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [scanning, setScanning] = useState<string | null>(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 (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="text-gray-400 text-sm">{libraries.length} Bibliotheken</p>
|
||||
<button onClick={() => setShowCreate(!showCreate)}
|
||||
className="flex items-center gap-2 bg-primary text-black px-3 py-2 rounded-lg text-sm font-medium">
|
||||
<Plus size={14} /> Neu
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showCreate && (
|
||||
<div className="bg-surface border border-white/10 rounded-xl p-4 mb-4 space-y-3">
|
||||
<h3 className="text-sm font-semibold text-white">Neue Bibliothek</h3>
|
||||
<input type="text" placeholder="Name (z.B. Hörbücher)"
|
||||
value={form.name} onChange={(e) => 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"
|
||||
/>
|
||||
<input type="text" placeholder="Pfad (z.B. /audiofiles/hörbucher)"
|
||||
value={form.path} onChange={(e) => 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"
|
||||
/>
|
||||
<select value={form.mediaType} onChange={(e) => setForm({ ...form, mediaType: e.target.value })}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none">
|
||||
<option value="book">Hörbücher</option>
|
||||
<option value="podcast">Podcasts</option>
|
||||
</select>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={handleCreate} disabled={!form.name || !form.path}
|
||||
className="bg-primary text-black px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
|
||||
Anlegen
|
||||
</button>
|
||||
<button onClick={() => setShowCreate(false)} className="text-gray-400 px-4 py-2 rounded-lg text-sm hover:text-white">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? <Loader2 className="text-primary animate-spin" size={24} /> : (
|
||||
<div className="space-y-2">
|
||||
{libraries.map((lib: any) => (
|
||||
<div key={lib.id} className="flex items-center gap-4 bg-surface px-4 py-3 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-white">{lib.name}</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{lib.folders?.[0]?.fullPath || ''} · {lib.mediaType}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={() => handleScan(lib.id)} disabled={scanning === lib.id}
|
||||
className="flex items-center gap-1 text-xs text-gray-400 hover:text-white bg-white/5 px-3 py-1.5 rounded-lg disabled:opacity-50">
|
||||
<RefreshCw size={12} className={scanning === lib.id ? 'animate-spin' : ''} />
|
||||
Scan
|
||||
</button>
|
||||
<button onClick={() => handleDelete(lib.id)} className="text-gray-500 hover:text-red-400 p-1">
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SettingsPanel() {
|
||||
const [settings, setSettings] = useState<any>(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 <Loader2 className="text-primary animate-spin" size={24} />
|
||||
|
||||
const toggle = (key: string) => (
|
||||
<button
|
||||
onClick={() => save(key, !settings[key])}
|
||||
className={`relative w-10 h-5 rounded-full transition-colors ${settings[key] ? 'bg-primary' : 'bg-white/20'}`}
|
||||
>
|
||||
<span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform ${settings[key] ? 'translate-x-5' : 'translate-x-0.5'}`} />
|
||||
</button>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-4 max-w-lg">
|
||||
{saved && (
|
||||
<div className="flex items-center gap-2 text-primary text-sm">
|
||||
<Check size={14} /> Gespeichert
|
||||
</div>
|
||||
)}
|
||||
{[
|
||||
{ key: 'autoMatchBooks', label: 'Auto-Match Hörbücher' },
|
||||
{ key: 'autoMatchPodcasts', label: 'Auto-Match Podcasts' },
|
||||
].map(({ key, label }) => (
|
||||
<div key={key} className="flex items-center justify-between bg-surface px-4 py-3 rounded-lg">
|
||||
<p className="text-sm text-gray-300">{label}</p>
|
||||
{toggle(key)}
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center justify-between bg-surface px-4 py-3 rounded-lg">
|
||||
<p className="text-sm text-gray-300">Feed-Update Intervall (Stunden)</p>
|
||||
<input
|
||||
type="number" min={1} max={168}
|
||||
value={settings.podcastUpdateIntervalHours || 24}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
274
frontend/src/pages/BookDetail.tsx
Normal file
274
frontend/src/pages/BookDetail.tsx
Normal file
@@ -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<any>(null)
|
||||
const [progress, setProgress] = useState<any>(null)
|
||||
const [bookmarks, setBookmarks] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [matchResults, setMatchResults] = useState<any[]>([])
|
||||
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 (
|
||||
<div className="flex justify-center py-16"><Loader2 className="text-primary animate-spin" size={32} /></div>
|
||||
)
|
||||
if (!item) return <div className="p-6 text-gray-400">Nicht gefunden</div>
|
||||
|
||||
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 (
|
||||
<div className="p-6 max-w-4xl">
|
||||
<button onClick={() => navigate(-1)} className="flex items-center gap-2 text-gray-400 hover:text-white mb-6 text-sm">
|
||||
<ArrowLeft size={16} /> Zurück
|
||||
</button>
|
||||
|
||||
<div className="flex gap-6 mb-8 flex-wrap">
|
||||
{/* Cover */}
|
||||
<CoverImage
|
||||
src={item.media?.coverPath ? coverUrl(id!) : null}
|
||||
alt={title}
|
||||
className="w-48 h-48 rounded-xl flex-shrink-0 shadow-2xl"
|
||||
/>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{series && (
|
||||
<p className="text-primary text-sm mb-1">
|
||||
{series.name}{series.sequence ? ` #${series.sequence}` : ''}
|
||||
</p>
|
||||
)}
|
||||
<h1 className="text-2xl font-bold text-white mb-1">{title}</h1>
|
||||
{author && <p className="text-gray-400 mb-2">{author}</p>}
|
||||
{meta.narrator && <p className="text-gray-500 text-sm mb-2">Sprecher: {meta.narrator}</p>}
|
||||
{meta.publisher && <p className="text-gray-500 text-sm">Verlag: {meta.publisher} {meta.publishedYear ? `(${meta.publishedYear})` : ''}</p>}
|
||||
|
||||
{item.media?.duration > 0 && (
|
||||
<p className="text-gray-500 text-sm mt-1">{fmtTime(item.media.duration)}</p>
|
||||
)}
|
||||
|
||||
{/* Progress */}
|
||||
{progress && !progress.isFinished && (
|
||||
<div className="mt-3">
|
||||
<div className="h-1 bg-white/10 rounded-full w-48">
|
||||
<div className="h-full bg-primary rounded-full" style={{ width: `${Math.min((progress.currentTime / progress.duration) * 100, 100)}%` }} />
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">{fmtTime(progress.currentTime)} von {fmtTime(progress.duration)}</p>
|
||||
</div>
|
||||
)}
|
||||
{progress?.isFinished && <p className="text-primary text-sm mt-2">✓ Abgeschlossen</p>}
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{tags.map((tag) => (
|
||||
<span key={tag} className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-xs ${
|
||||
tag === 'zu_prüfen' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-white/10 text-gray-300'
|
||||
}`}>
|
||||
{tag}
|
||||
<button onClick={() => handleRemoveTag(tag)} className="hover:text-white">
|
||||
<X size={10} />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 mt-4 flex-wrap">
|
||||
<button
|
||||
onClick={() => play(item)}
|
||||
className="flex items-center gap-2 bg-primary text-black font-semibold px-4 py-2 rounded-lg hover:bg-primary/80"
|
||||
>
|
||||
<Play size={16} fill="currentColor" />
|
||||
{isCurrentItem ? 'Läuft...' : progress ? 'Weiter hören' : 'Abspielen'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowMatchPanel(!showMatchPanel)}
|
||||
className="flex items-center gap-2 bg-surface border border-white/10 px-4 py-2 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/5"
|
||||
>
|
||||
<Search size={14} />
|
||||
Match
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAutoMatch}
|
||||
disabled={matchLoading}
|
||||
className="flex items-center gap-2 bg-surface border border-white/10 px-4 py-2 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/5 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw size={14} className={matchLoading ? 'animate-spin' : ''} />
|
||||
Auto-Match
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{meta.description && (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Beschreibung</h3>
|
||||
<p className="text-gray-300 text-sm leading-relaxed whitespace-pre-line">{meta.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Match info */}
|
||||
{item.matchedSource && item.matchedSource !== 'none' && (
|
||||
<div className="mb-4 flex items-center gap-2 text-xs text-gray-500">
|
||||
<Check size={12} className="text-primary" />
|
||||
Metadaten via {item.matchedSource}
|
||||
{item.matchConfidence && ` (${Math.round(item.matchConfidence * 100)}%)`}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Manual Match Panel */}
|
||||
{showMatchPanel && (
|
||||
<div className="mb-6 bg-surface border border-white/10 rounded-xl p-4">
|
||||
<h3 className="text-sm font-semibold text-white mb-3">Manuelles Matching</h3>
|
||||
<div className="flex gap-2 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
value={matchQuery}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSearchMatch}
|
||||
disabled={matchLoading}
|
||||
className="bg-primary text-black px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
{matchLoading ? <Loader2 size={14} className="animate-spin" /> : 'Suchen'}
|
||||
</button>
|
||||
</div>
|
||||
{matchResults.map((r, i) => (
|
||||
<div key={i} className="flex items-center gap-3 py-2 border-t border-white/5 hover:bg-white/3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white truncate">{r.title}</p>
|
||||
<p className="text-xs text-gray-400">{r.author} · {r.source} · {Math.round(r.confidence * 100)}%</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleApplyMatch(r)}
|
||||
className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-lg hover:bg-primary/30"
|
||||
>
|
||||
Anwenden
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chapters */}
|
||||
{chapters.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">
|
||||
Kapitel ({chapters.length})
|
||||
</h3>
|
||||
<ChapterList
|
||||
chapters={chapters}
|
||||
currentTime={isCurrentItem ? currentTime : 0}
|
||||
onSeek={(t) => {
|
||||
if (isCurrentItem) usePlayerStore.getState().seek(t)
|
||||
else play(item).then(() => usePlayerStore.getState().seek(t))
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bookmarks */}
|
||||
{bookmarks.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Lesezeichen</h3>
|
||||
<div className="space-y-1">
|
||||
{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 (
|
||||
<div key={i} className="flex items-center gap-3 py-2 border-t border-white/5">
|
||||
<span className="text-xs font-mono text-gray-500 w-16">{fmt(b.time)}</span>
|
||||
<span className="text-sm text-gray-300 flex-1">{b.title}</span>
|
||||
<button
|
||||
onClick={async () => {
|
||||
await deleteBookmark(id!, b.time)
|
||||
setBookmarks(bks => bks.filter((_, j) => j !== i))
|
||||
}}
|
||||
className="text-gray-500 hover:text-red-400"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
183
frontend/src/pages/Library.tsx
Normal file
183
frontend/src/pages/Library.tsx
Normal file
@@ -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<any[]>([])
|
||||
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<Record<string, any>>({})
|
||||
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<string, any> = {}
|
||||
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<typeof setTimeout>
|
||||
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 (
|
||||
<div className="p-6">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center gap-3 mb-6 flex-wrap">
|
||||
<div className="relative flex-1 min-w-48">
|
||||
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Suchen..."
|
||||
className="w-full bg-surface border border-white/10 rounded-lg pl-9 pr-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
onChange={(e) => searchDebounce(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{allTags.length > 0 && (
|
||||
<select
|
||||
value={filterTag}
|
||||
onChange={(e) => setFilterTag(e.target.value)}
|
||||
className="bg-surface border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
>
|
||||
<option value="">Alle Tags</option>
|
||||
{allTags.map((t) => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleScan}
|
||||
disabled={scanning}
|
||||
className="flex items-center gap-2 bg-surface border border-white/10 px-3 py-2 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/5 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw size={14} className={scanning ? 'animate-spin' : ''} />
|
||||
Scan
|
||||
</button>
|
||||
|
||||
<div className="flex bg-surface border border-white/10 rounded-lg overflow-hidden">
|
||||
<button
|
||||
className={`p-2 ${view === 'grid' ? 'bg-white/10 text-white' : 'text-gray-400'}`}
|
||||
onClick={() => setView('grid')}
|
||||
><Grid size={16} /></button>
|
||||
<button
|
||||
className={`p-2 ${view === 'list' ? 'bg-white/10 text-white' : 'text-gray-400'}`}
|
||||
onClick={() => setView('list')}
|
||||
><List size={16} /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
{total} {total === 1 ? 'Eintrag' : 'Einträge'}
|
||||
{filterTag && ` · Filter: ${filterTag}`}
|
||||
</p>
|
||||
|
||||
{/* Grid */}
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-16">
|
||||
<Loader2 className="text-primary animate-spin" size={32} />
|
||||
</div>
|
||||
) : enriched.length === 0 ? (
|
||||
<div className="text-center py-16 text-gray-500">
|
||||
<p className="text-lg mb-2">Keine Einträge gefunden</p>
|
||||
<p className="text-sm">Klicke auf „Scan" um die Bibliothek zu durchsuchen.</p>
|
||||
</div>
|
||||
) : view === 'grid' ? (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
|
||||
{enriched.map((item) => <BookCard key={item.id} item={item} />)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{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 (
|
||||
<div key={item.id} className="flex items-center gap-4 bg-surface hover:bg-white/5 px-4 py-3 rounded-lg cursor-pointer">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white truncate">{title}</p>
|
||||
{author && <p className="text-xs text-gray-400">{author}</p>}
|
||||
</div>
|
||||
{p && !p.isFinished && (
|
||||
<div className="w-24 h-1 bg-white/10 rounded-full overflow-hidden flex-shrink-0">
|
||||
<div className="h-full bg-primary" style={{ width: `${Math.min((p.currentTime / p.duration) * 100, 100)}%` }} />
|
||||
</div>
|
||||
)}
|
||||
{p?.isFinished && <span className="text-xs text-primary flex-shrink-0">Fertig</span>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{total > PAGE_SIZE && (
|
||||
<div className="flex justify-center gap-2 mt-8">
|
||||
<button
|
||||
disabled={page === 0}
|
||||
onClick={() => setPage(p => p - 1)}
|
||||
className="px-4 py-2 bg-surface border border-white/10 rounded-lg text-sm text-gray-300 disabled:opacity-50 hover:bg-white/5"
|
||||
>
|
||||
Zurück
|
||||
</button>
|
||||
<span className="px-4 py-2 text-sm text-gray-400">
|
||||
{page + 1} / {Math.ceil(total / PAGE_SIZE)}
|
||||
</span>
|
||||
<button
|
||||
disabled={(page + 1) * PAGE_SIZE >= total}
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
className="px-4 py-2 bg-surface border border-white/10 rounded-lg text-sm text-gray-300 disabled:opacity-50 hover:bg-white/5"
|
||||
>
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
67
frontend/src/pages/Login.tsx
Normal file
67
frontend/src/pages/Login.tsx
Normal file
@@ -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 (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-sm">
|
||||
<div className="flex items-center justify-center gap-3 mb-8">
|
||||
<BookOpen className="text-primary" size={32} />
|
||||
<h1 className="text-3xl font-bold text-white">Audiolib</h1>
|
||||
</div>
|
||||
|
||||
<form onSubmit={submit} className="bg-surface rounded-xl p-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Benutzername</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
placeholder="admin"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Passwort</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="text-red-400 text-sm">{error}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !username || !password}
|
||||
className="w-full bg-primary text-black font-semibold py-2.5 rounded-lg hover:bg-primary/80 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading && <Loader2 size={16} className="animate-spin" />}
|
||||
Anmelden
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
154
frontend/src/pages/PodcastDetail.tsx
Normal file
154
frontend/src/pages/PodcastDetail.tsx
Normal file
@@ -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<any>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [feedInput, setFeedInput] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [searchQ, setSearchQ] = useState('')
|
||||
const [searchResults, setSearchResults] = useState<any[]>([])
|
||||
|
||||
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 <div className="flex justify-center py-16"><Loader2 className="text-primary animate-spin" size={32} /></div>
|
||||
if (!podcast) return <div className="p-6 text-gray-400">Nicht gefunden</div>
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-3xl">
|
||||
<button onClick={() => navigate(-1)} className="flex items-center gap-2 text-gray-400 hover:text-white mb-6 text-sm">
|
||||
<ArrowLeft size={16} /> Zurück
|
||||
</button>
|
||||
|
||||
<div className="flex gap-6 mb-8">
|
||||
<CoverImage src={podcast.cover} alt={podcast.title} className="w-40 h-40 rounded-xl flex-shrink-0 shadow-xl" />
|
||||
<div className="flex-1">
|
||||
<h1 className="text-2xl font-bold text-white mb-1">{podcast.title}</h1>
|
||||
{podcast.author && <p className="text-gray-400 mb-2">{podcast.author}</p>}
|
||||
<p className="text-sm text-gray-500">{podcast.numEpisodes} Episoden</p>
|
||||
|
||||
{podcast.feedLastChecked && (
|
||||
<p className="text-xs text-gray-600 mt-1">
|
||||
Zuletzt aktualisiert: {fmtDate(podcast.feedLastChecked)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button onClick={handleUpdate} className="mt-3 flex items-center gap-2 bg-surface border border-white/10 px-3 py-1.5 rounded-lg text-sm text-gray-300 hover:text-white hover:bg-white/5">
|
||||
<RefreshCw size={13} /> Feed aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{podcast.description && (
|
||||
<p className="text-gray-400 text-sm leading-relaxed mb-6">{podcast.description}</p>
|
||||
)}
|
||||
|
||||
{/* Feed URL */}
|
||||
<div className="bg-surface border border-white/10 rounded-xl p-4 mb-6">
|
||||
<h3 className="text-sm font-semibold text-white mb-3">RSS-Feed</h3>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="url"
|
||||
value={feedInput}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSetFeed}
|
||||
disabled={saving || !feedInput}
|
||||
className="bg-primary text-black px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
{saving ? <Loader2 size={14} className="animate-spin" /> : 'Speichern'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Feed-Suche */}
|
||||
<div className="mt-3 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQ}
|
||||
onChange={(e) => 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"
|
||||
/>
|
||||
<button onClick={handleSearchFeed} className="bg-white/10 px-3 py-2 rounded-lg text-sm text-gray-300 hover:bg-white/20">
|
||||
Suchen
|
||||
</button>
|
||||
</div>
|
||||
{searchResults.map((r, i) => (
|
||||
<div key={i} className="flex items-center gap-3 mt-2 py-2 border-t border-white/5">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-white">{r.title}</p>
|
||||
<p className="text-xs text-gray-500">{r.author} · {r.trackCount} Episoden</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { setFeedInput(r.feedUrl); setSearchResults([]) }}
|
||||
className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-lg hover:bg-primary/30"
|
||||
>
|
||||
Verwenden
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Episodes */}
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Episoden</h3>
|
||||
<div className="space-y-1">
|
||||
{podcast.episodes?.map((ep: any) => (
|
||||
<div key={ep.id} className="flex items-start gap-3 py-3 border-t border-white/5">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white truncate">{ep.title || 'Unbekannte Episode'}</p>
|
||||
<div className="flex items-center gap-3 mt-0.5">
|
||||
{ep.pubDate && <span className="text-xs text-gray-500">{fmtDate(ep.pubDate)}</span>}
|
||||
{ep.duration > 0 && <span className="text-xs text-gray-500">{fmtDur(ep.duration)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(!podcast.episodes || podcast.episodes.length === 0) && (
|
||||
<p className="text-gray-500 text-sm py-4">Keine Episoden. Feed konfigurieren und aktualisieren.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
52
frontend/src/store/authStore.ts
Normal file
52
frontend/src/store/authStore.ts
Normal file
@@ -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<void>
|
||||
loadAuth: () => Promise<void>
|
||||
logout: () => Promise<void>
|
||||
}
|
||||
|
||||
export const useAuthStore = create<AuthState>((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: [] })
|
||||
},
|
||||
}))
|
||||
121
frontend/src/store/playerStore.ts
Normal file
121
frontend/src/store/playerStore.ts
Normal file
@@ -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<void>
|
||||
stop: () => Promise<void>
|
||||
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<void>
|
||||
}
|
||||
|
||||
let syncInterval: ReturnType<typeof setInterval> | null = null
|
||||
let sleepInterval: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
export const usePlayerStore = create<PlayerState>((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 { }
|
||||
},
|
||||
}))
|
||||
Reference in New Issue
Block a user