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
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user