Compare commits
3 Commits
7b6f836475
...
bd00d4c728
| Author | SHA1 | Date | |
|---|---|---|---|
 Hitonabi
|
bd00d4c728 | ||
|
Hitonabi
|
90b708302e | ||
|
Hitonabi
|
7004d798d6 |
+46
-38
@@ -8,8 +8,6 @@ import SettingsPage from './pages/Settings'
|
||||
import LogsPage from './pages/Logs'
|
||||
import FirstRunWizard from './components/FirstRunWizard'
|
||||
|
||||
// Metadaten-Seite entfernt (24.07., Abnahme durch den Commander): die
|
||||
// Korrektur läuft komplett über das „Nicht korrekt?"-Popup am Dashboard.
|
||||
type Page = 'dashboard' | 'anleitung' | 'settings' | 'logs'
|
||||
|
||||
function App() {
|
||||
@@ -35,58 +33,68 @@ function App() {
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100 font-sans transition-colors duration-300">
|
||||
<div className="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 font-sans">
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 bg-slate-900 text-slate-100 flex flex-col">
|
||||
{/* Cinema Sidebar */}
|
||||
<aside className="w-64 bg-slate-900 dark:bg-slate-950 text-slate-100 flex flex-col border-r border-slate-800/80 shadow-2xl z-20">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
|
||||
<Disc size={28} className="text-white" />
|
||||
<div className="p-2.5 bg-gradient-to-br from-amber-500 via-indigo-600 to-purple-600 rounded-xl shadow-lg shadow-amber-500/20">
|
||||
<Disc size={26} className="text-white animate-pulse" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold tracking-tight">Rippy</h1>
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500">Automated Ripping</p>
|
||||
<h1 className="text-xl font-bold tracking-tight bg-gradient-to-r from-white via-slate-100 to-amber-300 bg-clip-text text-transparent">
|
||||
Rippy
|
||||
</h1>
|
||||
<p className="text-xs text-amber-400/80 font-medium tracking-wide uppercase">Cinema Edition</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="mx-3 flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800/50 text-slate-400 hover:bg-slate-700 hover:text-white transition-all duration-200"
|
||||
title={theme === 'dark' ? 'Light Mode' : 'Light Mode'}
|
||||
>
|
||||
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</button>
|
||||
<div className="px-3 mb-2">
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="w-full flex items-center justify-between px-3 py-2 rounded-xl bg-slate-800/50 hover:bg-slate-800 text-slate-400 hover:text-slate-200 border border-slate-800 transition-all duration-200 text-xs font-medium"
|
||||
title={theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren'}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
{theme === 'dark' ? <Moon size={15} className="text-amber-400" /> : <Sun size={15} className="text-amber-500" />}
|
||||
<span>{theme === 'dark' ? 'Dark Mode' : 'Light Mode'}</span>
|
||||
</span>
|
||||
<span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-slate-700/60 text-slate-300">
|
||||
{theme}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-3 py-2 space-y-1">
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setPage(item.id as Page)}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
|
||||
page === item.id
|
||||
? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30'
|
||||
: 'text-slate-400 hover:bg-slate-800 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<item.icon size={20} />
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
<nav className="flex-1 px-3 py-2 space-y-1.5">
|
||||
{navItems.map((item) => {
|
||||
const isActive = page === item.id
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setPage(item.id as Page)}
|
||||
className={`w-full flex items-center gap-3 px-3.5 py-2.5 rounded-xl transition-all duration-200 font-medium text-sm ${
|
||||
isActive
|
||||
? 'bg-gradient-to-r from-amber-500/20 via-slate-800 to-slate-800/80 text-amber-300 border-l-4 border-amber-500 shadow-md shadow-amber-500/10'
|
||||
: 'text-slate-400 hover:bg-slate-800/50 hover:text-slate-200 border-l-4 border-transparent'
|
||||
}`}
|
||||
>
|
||||
<item.icon size={19} className={isActive ? 'text-amber-400' : 'text-slate-400'} />
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Abmelden-Knopf entfernt (23.07.): es gibt (noch) keinen
|
||||
Login-Flow im UI — ein toter Knopf gaukelt nur einen vor. */}
|
||||
|
||||
<footer className="px-4 py-4 text-center text-xs text-slate-500 border-t border-slate-800">
|
||||
Created with <span className="text-rose-400">❤️</span> by LucyAI, Claude and KrBrZ
|
||||
<footer className="px-4 py-4 text-center text-[11px] text-slate-500 border-t border-slate-800/80">
|
||||
Created with <span className="text-rose-400">❤️</span> by LucyAI, Claude & KrBrZ
|
||||
</footer>
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 overflow-auto bg-slate-50 dark:bg-slate-950">
|
||||
<div className="max-w-7xl mx-auto p-6">
|
||||
<div className="max-w-7xl mx-auto p-6 md:p-8">
|
||||
{page === 'dashboard' && <Dashboard />}
|
||||
{page === 'anleitung' && <AnleitungPage />}
|
||||
{page === 'logs' && <LogsPage />}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { AlertTriangle, CheckCircle2, HelpCircle } from 'lucide-react'
|
||||
import { Modal } from './ui/Modal'
|
||||
import { Button } from './ui/Button'
|
||||
|
||||
interface ConfirmDialogProps {
|
||||
isOpen: boolean
|
||||
@@ -22,62 +23,51 @@ export default function ConfirmDialog({
|
||||
cancelText = 'Abbrechen',
|
||||
type = 'info',
|
||||
}: ConfirmDialogProps) {
|
||||
const { theme } = useDarkMode()
|
||||
|
||||
const getIcon = () => {
|
||||
switch (type) {
|
||||
case 'warning': return <span className="text-4xl">⚠️</span>
|
||||
case 'success': return <span className="text-4xl">✅</span>
|
||||
default: return <span className="text-4xl">🤔</span>
|
||||
case 'warning':
|
||||
return <AlertTriangle className="text-amber-500 w-8 h-8 flex-shrink-0" />
|
||||
case 'success':
|
||||
return <CheckCircle2 className="text-emerald-500 w-8 h-8 flex-shrink-0" />
|
||||
default:
|
||||
return <HelpCircle className="text-indigo-500 w-8 h-8 flex-shrink-0" />
|
||||
}
|
||||
}
|
||||
|
||||
const getConfirmColor = () => {
|
||||
const getConfirmVariant = () => {
|
||||
switch (type) {
|
||||
case 'warning': return 'bg-amber-600 hover:bg-amber-700 shadow-lg shadow-amber-500/30'
|
||||
case 'success': return 'bg-emerald-600 hover:bg-emerald-700 shadow-lg shadow-emerald-500/30'
|
||||
default: return 'bg-indigo-600 hover:bg-indigo-700 shadow-lg shadow-indigo-500/30'
|
||||
case 'warning':
|
||||
return 'amber'
|
||||
case 'success':
|
||||
return 'primary'
|
||||
default:
|
||||
return 'primary'
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm transition-all">
|
||||
<div className={`w-full max-w-md rounded-xl shadow-2xl transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
|
||||
{/* Header */}
|
||||
<div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
{getIcon()}
|
||||
<h2 className={`text-xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-6 py-6">
|
||||
<p className={`text-sm leading-relaxed ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
<Modal isOpen={isOpen} onClose={onClose} maxWidth="md">
|
||||
<div className="flex items-start gap-4">
|
||||
{getIcon()}
|
||||
<div className="space-y-2 flex-1">
|
||||
<h2 className="text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||
{title}
|
||||
</h2>
|
||||
<p className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
|
||||
{message}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className={`px-6 py-4 border-t transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex justify-end gap-3`}>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${theme === 'dark' ? 'text-slate-400 hover:bg-slate-700' : 'text-slate-600 hover:bg-slate-100'}`}
|
||||
>
|
||||
{cancelText}
|
||||
</button>
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium text-white transition-colors ${getConfirmColor()}`}
|
||||
>
|
||||
{confirmText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end gap-3 border-t border-slate-200 dark:border-slate-800 pt-4">
|
||||
<Button variant="secondary" onClick={onClose}>
|
||||
{cancelText}
|
||||
</Button>
|
||||
<Button variant={getConfirmVariant()} onClick={onConfirm}>
|
||||
{confirmText}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { HardDrive, Disc, AlertCircle, CheckCircle, RefreshCw } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { Card, CardHeader, CardTitle, CardContent } from './ui/Card'
|
||||
import { Button } from './ui/Button'
|
||||
import { TypeBadge } from './ui/Badge'
|
||||
import RipTargetModal, { RipOptionen } from './RipTargetModal'
|
||||
import MetadataKorrektur from './MetadataKorrektur'
|
||||
|
||||
@@ -35,7 +37,6 @@ interface Device {
|
||||
disc?: DiscInfo
|
||||
}
|
||||
|
||||
// TMDB liefert relative Poster-Pfade, OMDb absolute URLs — beides abdecken
|
||||
function posterUrl(disc?: DiscInfo): string | null {
|
||||
const p = disc?.metadata?.poster_path
|
||||
if (!p) return null
|
||||
@@ -51,12 +52,9 @@ export default function DeviceDiscovery() {
|
||||
const [actionBusy, setActionBusy] = useState(false)
|
||||
const [modalDevice, setModalDevice] = useState<Device | null>(null)
|
||||
const [korrekturDevice, setKorrekturDevice] = useState<Device | null>(null)
|
||||
const { theme } = useDarkMode()
|
||||
const { toast } = useToast()
|
||||
|
||||
const refreshDevices = async (manuell = false) => {
|
||||
// manuell = Klick auf den Refresh-Knopf: dreht das Icon und quittiert
|
||||
// per Toast — vorher gab der Knopf KEIN sichtbares Feedback.
|
||||
if (manuell) setRefreshing(true)
|
||||
try {
|
||||
const response = await api.get('/devices')
|
||||
@@ -115,233 +113,194 @@ export default function DeviceDiscovery() {
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'cd': return theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-600'
|
||||
case 'dvd': return theme === 'dark' ? 'bg-purple-900/30 text-purple-400' : 'bg-purple-100 text-purple-600'
|
||||
case 'bluray': return theme === 'dark' ? 'bg-pink-900/30 text-pink-400' : 'bg-pink-100 text-pink-600'
|
||||
case 'uhd': return theme === 'dark' ? 'bg-amber-900/30 text-amber-400' : 'bg-amber-100 text-amber-700'
|
||||
default: return theme === 'dark' ? 'bg-slate-700 text-slate-400' : 'bg-slate-100 text-slate-600'
|
||||
}
|
||||
}
|
||||
|
||||
const typLabel = (type: string) =>
|
||||
({ cd: 'CD', dvd: 'DVD', bluray: 'BLU-RAY', uhd: '4K UHD' } as Record<string, string>)[type] || type.toUpperCase()
|
||||
|
||||
const QUELLEN_LABEL: Record<string, string> = {
|
||||
tmdb: 'TMDB', omdb: 'OMDb', jikan: 'MyAnimeList', manuell: 'manuell gewählt',
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'empty': return theme === 'dark' ? 'bg-slate-700 text-slate-400' : 'bg-slate-100 text-slate-600'
|
||||
case 'ready': return theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-700'
|
||||
case 'ripping': return theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-700'
|
||||
default: return theme === 'dark' ? 'bg-slate-700 text-slate-400' : 'bg-slate-100 text-slate-600'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'empty': return <AlertCircle size={16} />
|
||||
case 'ready': return <CheckCircle size={16} />
|
||||
case 'ripping': return <RefreshCw size={16} className="animate-spin" />
|
||||
default: return <AlertCircle size={16} />
|
||||
case 'empty':
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-500/15 text-slate-400 border border-slate-500/30"><AlertCircle size={13} /> Keine Disc</span>
|
||||
case 'ready':
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30"><CheckCircle size={13} /> Bereit</span>
|
||||
case 'ripping':
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-sky-500/15 text-sky-600 dark:text-sky-400 border border-sky-500/30 animate-pulse"><RefreshCw size={13} className="animate-spin" /> Rippt</span>
|
||||
default:
|
||||
return <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-500/15 text-slate-400 border border-slate-500/30"><AlertCircle size={13} /> Unbekannt</span>
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<RefreshCw className="animate-spin text-indigo-600" size={24} />
|
||||
<RefreshCw className="animate-spin text-amber-500" size={24} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`rounded-xl shadow-sm border overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex items-center justify-between`}>
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<div>
|
||||
<h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Laufwerke</h2>
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Erkannte Geräte mit automatischer Typ-Erkennung</p>
|
||||
<CardTitle>Laufwerke</CardTitle>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Erkannte Geräte mit automatischer Typ-Erkennung</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => refreshDevices(true)}
|
||||
className={`p-2 rounded-lg transition-colors ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-600'}`}
|
||||
title="Geräte neu laden"
|
||||
>
|
||||
<RefreshCw size={20} className={loading || refreshing ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => refreshDevices(true)} title="Geräte neu laden">
|
||||
<RefreshCw size={18} className={loading || refreshing ? 'animate-spin' : ''} />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
|
||||
<div className="p-6 transition-colors duration-300">
|
||||
<CardContent>
|
||||
{/* Disc-Karte: WAS liegt gerade im Laufwerk (Auto-Pre-Scan) */}
|
||||
{devices.filter(d => d.status === 'ready' && d.disc).map(device => (
|
||||
<div
|
||||
key={`disc-${device.id}`}
|
||||
className={`mb-6 rounded-xl overflow-hidden border-2 flex ${theme === 'dark' ? 'border-indigo-500/40 bg-gradient-to-r from-indigo-950/60 to-slate-900' : 'border-indigo-200 bg-gradient-to-r from-indigo-50 to-white'}`}
|
||||
className="mb-6 rounded-2xl overflow-hidden border border-amber-500/40 bg-gradient-to-r from-amber-500/15 via-slate-900 to-slate-950 flex shadow-xl shadow-amber-500/5 backdrop-blur-md"
|
||||
>
|
||||
{posterUrl(device.disc) && (
|
||||
<img
|
||||
src={posterUrl(device.disc)!}
|
||||
alt={device.disc!.title}
|
||||
className="w-28 object-cover flex-shrink-0"
|
||||
className="w-32 object-cover flex-shrink-0 border-r border-slate-800"
|
||||
/>
|
||||
)}
|
||||
<div className="p-5 flex-1 min-w-0">
|
||||
<p className={`text-xs font-semibold uppercase tracking-wider mb-1 ${theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'}`}>
|
||||
Im Laufwerk erkannt
|
||||
</p>
|
||||
<h3 className={`text-xl font-bold truncate ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
{device.disc!.title}
|
||||
{device.disc!.year ? <span className={`font-normal ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}> ({device.disc!.year})</span> : null}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className={`text-xs font-medium px-2 py-0.5 rounded ${getTypeColor(device.type)}`}>
|
||||
{device.disc!.disc_type?.toUpperCase()}
|
||||
</span>
|
||||
<span className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Quelle: {QUELLEN_LABEL[device.disc!.metadata?.source || ''] || device.disc!.metadata?.source || 'Disc-Label'}
|
||||
{' · '}{Math.round((device.disc!.confidence || 0) * 100)} % sicher
|
||||
</span>
|
||||
<div className="p-5 flex-1 min-w-0 flex flex-col justify-between">
|
||||
<div>
|
||||
<p className="text-[11px] font-bold uppercase tracking-wider mb-1 text-amber-400">
|
||||
Im Laufwerk erkannt
|
||||
</p>
|
||||
<h3 className="text-xl font-bold truncate text-slate-900 dark:text-slate-100">
|
||||
{device.disc!.title}
|
||||
{device.disc!.year ? <span className="font-normal text-slate-500 dark:text-slate-400"> ({device.disc!.year})</span> : null}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<TypeBadge type={device.type} />
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Quelle: {QUELLEN_LABEL[device.disc!.metadata?.source || ''] || device.disc!.metadata?.source || 'Disc-Label'}
|
||||
{' · '}{Math.round((device.disc!.confidence || 0) * 100)} % sicher
|
||||
</span>
|
||||
</div>
|
||||
{device.disc!.metadata?.overview && (
|
||||
<p className="text-sm mt-2 line-clamp-2 text-slate-600 dark:text-slate-300">
|
||||
{device.disc!.metadata.overview}
|
||||
</p>
|
||||
)}
|
||||
{device.disc!.bereits_gerippt && (
|
||||
<p className="text-xs mt-2 px-3 py-1.5 rounded-xl inline-flex items-center gap-1.5 bg-amber-500/10 border border-amber-500/20 text-amber-600 dark:text-amber-300">
|
||||
<AlertCircle size={13} className="flex-shrink-0" />
|
||||
Diese Disc wurde bereits gerippt
|
||||
{device.disc!.bereits_gerippt.finished_at
|
||||
? ` (${new Date(device.disc!.bereits_gerippt.finished_at).toLocaleDateString('de-DE')})`
|
||||
: ''} — nochmal rippen ist möglich.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{device.disc!.metadata?.overview && (
|
||||
<p className={`text-sm mt-2 line-clamp-2 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-600'}`}>
|
||||
{device.disc!.metadata.overview}
|
||||
</p>
|
||||
)}
|
||||
{device.disc!.bereits_gerippt && (
|
||||
<p className={`text-xs mt-2 px-2.5 py-1.5 rounded-lg inline-flex items-center gap-1.5 ${theme === 'dark' ? 'bg-amber-900/30 text-amber-300' : 'bg-amber-50 text-amber-700'}`}>
|
||||
<AlertCircle size={13} className="flex-shrink-0" />
|
||||
Diese Disc wurde bereits gerippt
|
||||
{device.disc!.bereits_gerippt.finished_at
|
||||
? ` (${new Date(device.disc!.bereits_gerippt.finished_at).toLocaleDateString('de-DE')})`
|
||||
: ''} — nochmal rippen ist trotzdem möglich.
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mt-3">
|
||||
<button
|
||||
onClick={() => setModalDevice(device)}
|
||||
disabled={actionBusy}
|
||||
className="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors disabled:opacity-40"
|
||||
>
|
||||
<div className="flex items-center gap-3 mt-4">
|
||||
<Button variant="amber" onClick={() => setModalDevice(device)} disabled={actionBusy}>
|
||||
Rippen starten
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setKorrekturDevice(device)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${theme === 'dark' ? 'bg-slate-800 text-amber-300 hover:bg-slate-700' : 'bg-slate-100 text-amber-700 hover:bg-slate-200'}`}
|
||||
>
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={() => setKorrekturDevice(device)}>
|
||||
Nicht korrekt?
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{devices.length === 0 ? (
|
||||
<div className="text-center py-12 transition-colors duration-300">
|
||||
<div className={`mx-auto w-16 h-16 rounded-full flex items-center justify-center mb-4 ${theme === 'dark' ? 'bg-slate-700' : 'bg-slate-100'}`}>
|
||||
<HardDrive className={theme === 'dark' ? 'text-slate-400' : 'text-slate-400'} size={32} />
|
||||
<div className="text-center py-12">
|
||||
<div className="mx-auto w-16 h-16 rounded-2xl flex items-center justify-center mb-4 bg-slate-100 dark:bg-slate-800 text-slate-400">
|
||||
<HardDrive size={32} />
|
||||
</div>
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Keine Laufwerke gefunden</p>
|
||||
<p className={`text-xs mt-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Keine Laufwerke gefunden</p>
|
||||
<p className="text-xs mt-1 text-slate-400 dark:text-slate-500">
|
||||
Stelle sicher, dass ein Laufwerk angeschlossen ist
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 transition-colors duration-300">
|
||||
<div className="space-y-3">
|
||||
{devices.map(device => (
|
||||
<div key={device.id} className={`rounded-lg p-5 border transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-900 border-slate-700' : 'bg-slate-50 border-slate-200'}`}>
|
||||
<div key={device.id} className="rounded-xl p-4 border border-slate-200/80 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-950/80">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`p-3 rounded-lg ${getTypeColor(device.type)}`}>
|
||||
<Disc size={24} />
|
||||
<div className="p-3 rounded-xl bg-slate-200/60 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-700">
|
||||
<Disc size={22} className={device.status === 'ripping' ? 'animate-disc-spin text-amber-500' : ''} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className={`font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100">
|
||||
{device.name || 'Unbekanntes Laufwerk'}
|
||||
</h3>
|
||||
{device.status === 'ripping' && (
|
||||
<span className="flex items-center gap-1 text-xs font-medium text-blue-500">
|
||||
<RefreshCw size={12} className="animate-spin" />
|
||||
Rippt
|
||||
</span>
|
||||
)}
|
||||
<TypeBadge type={device.type} />
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
<span className={`text-xs font-mono px-2 py-1 rounded ${theme === 'dark' ? 'bg-slate-800 text-slate-400' : 'bg-slate-100 text-slate-600'}`}>
|
||||
<span className="text-xs font-mono px-2 py-0.5 rounded bg-slate-200/70 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border border-slate-300 dark:border-slate-700">
|
||||
{device.path}
|
||||
</span>
|
||||
{device.serial && (
|
||||
<span className={`text-xs px-2 py-1 rounded ${theme === 'dark' ? 'bg-slate-800 text-slate-400' : 'bg-slate-100 text-slate-600'}`}>
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-slate-200/70 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border border-slate-300 dark:border-slate-700">
|
||||
{device.serial}
|
||||
</span>
|
||||
)}
|
||||
{device.model && (
|
||||
<span className={`text-xs px-2 py-1 rounded ${theme === 'dark' ? 'bg-slate-800 text-slate-400' : 'bg-slate-100 text-slate-600'}`}>
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-slate-200/70 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border border-slate-300 dark:border-slate-700">
|
||||
{device.model}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-3">
|
||||
<span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium ${getStatusColor(device.status)}`}>
|
||||
{getStatusIcon(device.status)}
|
||||
{device.status === 'empty' ? 'Keine Disc' :
|
||||
device.status === 'ready' ? 'Bereit' :
|
||||
'Rippt'}
|
||||
</span>
|
||||
<span className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Typ: {typLabel(device.type)}
|
||||
</span>
|
||||
<div className="mt-3">
|
||||
{getStatusBadge(device.status)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setExpandedId(expandedId === device.id ? null : device.id)
|
||||
setActionFeedback(null)
|
||||
}}
|
||||
className={`text-sm font-medium transition-colors ${theme === 'dark' ? 'text-indigo-400 hover:text-indigo-300' : 'text-indigo-600 hover:text-indigo-700'}`}
|
||||
>
|
||||
{expandedId === device.id ? 'Schließen' : 'Details'}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{expandedId === device.id && (
|
||||
<div className={`mt-4 pt-4 border-t space-y-3 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
|
||||
<div className="mt-4 pt-4 border-t border-slate-200/80 dark:border-slate-800 space-y-3">
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1 text-sm">
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>Gerätepfad</span>
|
||||
<span className={`font-mono ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>{device.path}</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>Modell</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}>{device.model || 'unbekannt'}</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>Seriennummer</span>
|
||||
<span className={`font-mono text-xs ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>{device.serial || '—'}</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>Disc</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}>
|
||||
<span className="text-slate-500 dark:text-slate-400">Gerätepfad</span>
|
||||
<span className="font-mono text-slate-700 dark:text-slate-300">{device.path}</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">Modell</span>
|
||||
<span className="text-slate-700 dark:text-slate-300">{device.model || 'unbekannt'}</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">Seriennummer</span>
|
||||
<span className="font-mono text-xs text-slate-700 dark:text-slate-300">{device.serial || '—'}</span>
|
||||
<span className="text-slate-500 dark:text-slate-400">Disc</span>
|
||||
<span className="text-slate-700 dark:text-slate-300">
|
||||
{device.status === 'ready' ? `eingelegt (${typLabel(device.type)})` : 'keine'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 pt-1">
|
||||
<button
|
||||
<Button
|
||||
variant="amber"
|
||||
size="sm"
|
||||
onClick={() => setModalDevice(device)}
|
||||
disabled={actionBusy || device.status !== 'ready'}
|
||||
className="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
Rippen starten
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => ejectDisc(device)}
|
||||
disabled={actionBusy || device.status !== 'ready'}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${theme === 'dark' ? 'bg-slate-700 text-slate-200 hover:bg-slate-600' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}
|
||||
>
|
||||
Auswerfen
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{actionFeedback && (
|
||||
<p className={`text-sm ${actionFeedback.startsWith('✓') ? 'text-emerald-500' : 'text-rose-500'}`}>
|
||||
<p className={`text-sm font-medium ${actionFeedback.startsWith('✓') ? 'text-emerald-500' : 'text-rose-500'}`}>
|
||||
{actionFeedback}
|
||||
</p>
|
||||
)}
|
||||
@@ -351,10 +310,8 @@ export default function DeviceDiscovery() {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
{/* Ziel-Auswahl vor dem Rip-Start (Filme/Serien/Musik oder eigener
|
||||
Pfad — dort eingehängte Shares sind direkt wählbar) */}
|
||||
<RipTargetModal
|
||||
isOpen={modalDevice !== null}
|
||||
initialType={modalDevice?.type === 'cd' ? 'music' : (modalDevice?.disc?.metadata?.type === 'tv' ? 'series' : 'movies')}
|
||||
@@ -368,7 +325,6 @@ export default function DeviceDiscovery() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* „Nicht korrekt?"-Popup: Korrektur ohne Seitenwechsel */}
|
||||
<MetadataKorrektur
|
||||
devicePath={korrekturDevice?.path || ''}
|
||||
vorschlag={korrekturDevice?.disc?.title}
|
||||
@@ -376,6 +332,6 @@ export default function DeviceDiscovery() {
|
||||
onClose={() => setKorrekturDevice(null)}
|
||||
onUebernommen={refreshDevices}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Disc, Cpu, Globe, Tv, CheckCircle, ArrowRight } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { MEDIA_SERVER_OPTIONEN } from '../lib/mediaServer'
|
||||
|
||||
// Erster Start: Rippy universell einrichten (Commander-Ziel: All-in-one,
|
||||
// weitergebbar — keine Handarbeit in .env-Dateien nötig).
|
||||
import { Button } from './ui/Button'
|
||||
import { Input, Select } from './ui/Input'
|
||||
|
||||
interface WorkerInfo {
|
||||
name: string
|
||||
@@ -29,7 +27,6 @@ export default function FirstRunWizard({ onDone }: { onDone: () => void }) {
|
||||
const [workers, setWorkers] = useState<WorkerInfo[]>([])
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const { theme } = useDarkMode()
|
||||
|
||||
useEffect(() => {
|
||||
api.get('/capabilities')
|
||||
@@ -59,14 +56,12 @@ export default function FirstRunWizard({ onDone }: { onDone: () => void }) {
|
||||
}
|
||||
}
|
||||
|
||||
const feldKlasse = `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen flex items-center justify-center p-6 ${theme === 'dark' ? 'bg-slate-950' : 'bg-slate-100'}`}>
|
||||
<div className={`w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden ${theme === 'dark' ? 'bg-slate-900 border border-slate-800' : 'bg-white'}`}>
|
||||
<div className="bg-gradient-to-r from-indigo-600 to-purple-700 p-8 text-white">
|
||||
<div className="min-h-screen flex items-center justify-center p-6 bg-slate-100 dark:bg-slate-950">
|
||||
<div className="w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
|
||||
<div className="bg-gradient-to-r from-amber-500 via-indigo-600 to-purple-700 p-8 text-white">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Disc size={32} />
|
||||
<Disc size={32} className="animate-disc-spin" />
|
||||
<h1 className="text-2xl font-bold">Willkommen bei Rippy</h1>
|
||||
</div>
|
||||
<p className="opacity-90">Einmalige Einrichtung — dauert keine zwei Minuten. Alles ist später unter Einstellungen änderbar.</p>
|
||||
@@ -75,36 +70,38 @@ export default function FirstRunWizard({ onDone }: { onDone: () => void }) {
|
||||
<div className="p-8 space-y-8">
|
||||
{/* Metadaten-APIs */}
|
||||
<section>
|
||||
<h2 className={`flex items-center gap-2 text-lg font-semibold mb-3 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<Globe size={18} className="text-indigo-500" /> Metadaten-Erkennung
|
||||
<h2 className="flex items-center gap-2 text-lg font-semibold mb-3 text-slate-900 dark:text-slate-100">
|
||||
<Globe size={18} className="text-amber-500" /> Metadaten-Erkennung
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-1 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
TMDB API-Key <span className="text-indigo-500">(empfohlen)</span>
|
||||
</label>
|
||||
<input type="password" value={tmdbKey} onChange={e => setTmdbKey(e.target.value)} className={feldKlasse} placeholder="Kostenlos auf themoviedb.org" />
|
||||
</div>
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-1 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
OMDb API-Key <span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>(optional, zweite Quelle)</span>
|
||||
</label>
|
||||
<input type="password" value={omdbKey} onChange={e => setOmdbKey(e.target.value)} className={feldKlasse} placeholder="Kostenlos auf omdbapi.com" />
|
||||
</div>
|
||||
<p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
<Input
|
||||
type="password"
|
||||
label="TMDB API-Key (empfohlen)"
|
||||
value={tmdbKey}
|
||||
onChange={e => setTmdbKey(e.target.value)}
|
||||
placeholder="Kostenlos auf themoviedb.org"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
label="OMDb API-Key (optional, zweite Quelle)"
|
||||
value={omdbKey}
|
||||
onChange={e => setOmdbKey(e.target.value)}
|
||||
placeholder="Kostenlos auf omdbapi.com"
|
||||
/>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Ohne Keys rippt Rippy trotzdem — Discs heißen dann nur wie ihr Volume-Label.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Media-Server: worauf soll Rippy die Ablage vorbereiten? */}
|
||||
{/* Media-Server */}
|
||||
<section>
|
||||
<h2 className={`flex items-center gap-2 text-lg font-semibold mb-3 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<Tv size={18} className="text-indigo-500" /> Dein Media-Server
|
||||
<h2 className="flex items-center gap-2 text-lg font-semibold mb-3 text-slate-900 dark:text-slate-100">
|
||||
<Tv size={18} className="text-amber-500" /> Dein Media-Server
|
||||
</h2>
|
||||
<p className={`text-sm mb-3 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
<p className="text-sm mb-3 text-slate-500 dark:text-slate-400">
|
||||
Rippy benennt fertige Rips als „Titel (Jahr)" und legt für Jellyfin/Emby/Kodi
|
||||
zusätzlich movie.nfo + poster.jpg dazu — dein Server erkennt alles ohne Nacharbeit.
|
||||
zusätzlich movie.nfo + poster.jpg dazu.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-2">
|
||||
{MEDIA_SERVER_OPTIONEN.map(o => (
|
||||
@@ -113,76 +110,75 @@ export default function FirstRunWizard({ onDone }: { onDone: () => void }) {
|
||||
type="button"
|
||||
onClick={() => setMediaServer(o.wert)}
|
||||
title={o.hinweis}
|
||||
className={`px-3 py-2 rounded-lg text-sm font-medium border transition-all ${
|
||||
className={`px-3 py-2 rounded-xl text-sm font-medium border transition-all ${
|
||||
mediaServer === o.wert
|
||||
? theme === 'dark'
|
||||
? 'bg-indigo-900/40 border-indigo-500 text-indigo-300'
|
||||
: 'bg-indigo-50 border-indigo-600 text-indigo-700'
|
||||
: theme === 'dark'
|
||||
? 'bg-slate-800 border-slate-700 text-slate-400 hover:border-slate-600'
|
||||
: 'bg-slate-50 border-slate-200 text-slate-600 hover:border-slate-300'
|
||||
? 'bg-amber-500/20 border-amber-500 text-amber-600 dark:text-amber-300 font-semibold'
|
||||
: 'bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-600'
|
||||
}`}
|
||||
>
|
||||
{o.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className={`text-xs mt-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
<p className="text-xs mt-2 text-slate-500 dark:text-slate-400">
|
||||
{MEDIA_SERVER_OPTIONEN.find(o => o.wert === mediaServer)?.hinweis}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Verarbeitung + erkannte Hardware */}
|
||||
<section>
|
||||
<h2 className={`flex items-center gap-2 text-lg font-semibold mb-3 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<Cpu size={18} className="text-indigo-500" /> Verarbeitung
|
||||
<h2 className="flex items-center gap-2 text-lg font-semibold mb-3 text-slate-900 dark:text-slate-100">
|
||||
<Cpu size={18} className="text-amber-500" /> Verarbeitung
|
||||
</h2>
|
||||
|
||||
<div className={`rounded-lg p-4 mb-3 ${theme === 'dark' ? 'bg-slate-800' : 'bg-slate-50'}`}>
|
||||
<p className={`text-sm font-medium mb-2 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Erkannte Encoder in deinem System:</p>
|
||||
<div className="rounded-xl p-4 mb-3 bg-slate-50 dark:bg-slate-950/80 border border-slate-200 dark:border-slate-800">
|
||||
<p className="text-sm font-medium mb-2 text-slate-700 dark:text-slate-300">Erkannte Encoder in deinem System:</p>
|
||||
{workers.length === 0 ? (
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Noch kein Worker gemeldet — startet gerade?</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Noch kein Worker gemeldet — startet gerade?</p>
|
||||
) : (
|
||||
workers.map(w => (
|
||||
<div key={w.name} className="mb-1">
|
||||
<span className={`text-xs font-mono ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>{w.name}: </span>
|
||||
<span className="text-xs font-mono text-slate-500 dark:text-slate-400">{w.name}: </span>
|
||||
{w.encoders.map(e => (
|
||||
<span key={e} className={`inline-block text-xs px-2 py-0.5 rounded mr-1 ${e.startsWith('cpu') ? (theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-200 text-slate-600') : 'bg-emerald-600/20 text-emerald-500 font-medium'}`}>
|
||||
<span key={e} className={`inline-block text-xs px-2 py-0.5 rounded font-medium mr-1 ${
|
||||
e.startsWith('cpu')
|
||||
? 'bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300'
|
||||
: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
|
||||
}`}>
|
||||
{ENCODER_LABELS[e] || e}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<p className={`text-xs mt-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Tipp: GPU-Maschinen im Netz können als optionale Transcode-Worker angebunden werden (siehe README).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label className={`flex items-center gap-3 mb-3 text-sm ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
<input type="checkbox" checked={transcodeEnabled} onChange={e => setTranscodeEnabled(e.target.checked)} className="w-4 h-4 accent-indigo-600" />
|
||||
<label className="flex items-center gap-3 mb-3 text-sm text-slate-700 dark:text-slate-300">
|
||||
<input type="checkbox" checked={transcodeEnabled} onChange={e => setTranscodeEnabled(e.target.checked)} className="w-4 h-4 accent-amber-500 rounded" />
|
||||
Nach dem Rip auf Arbeitsgröße komprimieren (empfohlen — sonst ~40 GB pro Blu-ray)
|
||||
</label>
|
||||
|
||||
{transcodeEnabled && (
|
||||
<select value={preset} onChange={e => setPreset(e.target.value)} className={feldKlasse}>
|
||||
<Select value={preset} onChange={e => setPreset(e.target.value)}>
|
||||
<option value="H.265 MKV 1080p30">H.265 — klein & modern (Standard)</option>
|
||||
<option value="HQ 1080p30 Surround">H.264 — schneller auf schwacher CPU, etwas größer</option>
|
||||
</select>
|
||||
</Select>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{error && <p className="text-sm text-rose-500">{error}</p>}
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="amber"
|
||||
size="lg"
|
||||
onClick={abschliessen}
|
||||
disabled={saving}
|
||||
className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors disabled:opacity-50"
|
||||
className="w-full"
|
||||
>
|
||||
{saving ? 'Speichern…' : <>Los geht's <ArrowRight size={18} /></>}
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<p className={`text-xs text-center flex items-center justify-center gap-1 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
<p className="text-xs text-center flex items-center justify-center gap-1 text-slate-500 dark:text-slate-400">
|
||||
<CheckCircle size={12} /> Läuft komplett lokal — keine Cloud, keine Telemetrie.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { X, Film, Loader2, FolderOpen, AlertCircle, Download } from 'lucide-react'
|
||||
import { Film, Loader2, FolderOpen, AlertCircle, Download } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
|
||||
// Klick auf den Titel in „Neueste Jobs" (Commander-Wunsch 24.07.): sofort
|
||||
// sehen, WAS da gerippt wurde — Poster, Jahr, Beschreibung — plus die
|
||||
// nüchternen Job-Fakten (Ziel, Ausgabepfad, Fehler).
|
||||
import { Modal } from './ui/Modal'
|
||||
import { Button } from './ui/Button'
|
||||
import { StatusBadge } from './ui/Badge'
|
||||
|
||||
interface JobMeta {
|
||||
year?: number
|
||||
@@ -32,22 +30,12 @@ interface JobDetail {
|
||||
meta?: JobMeta | null
|
||||
}
|
||||
|
||||
// TMDB liefert relative Poster-Pfade, OMDb/Jikan absolute URLs
|
||||
function posterUrl(meta?: JobMeta | null): string | null {
|
||||
const p = meta?.poster_path
|
||||
if (!p) return null
|
||||
return p.startsWith('http') ? p : `https://image.tmdb.org/t/p/w342${p}`
|
||||
}
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
pending: 'Wartend',
|
||||
processing: 'Rippen',
|
||||
transcoding: 'Komprimieren',
|
||||
canceling: 'Wird abgebrochen…',
|
||||
completed: 'Fertig',
|
||||
failed: 'Fehler',
|
||||
}
|
||||
|
||||
interface JobDatei {
|
||||
name: string
|
||||
size_mb: number | null
|
||||
@@ -57,7 +45,6 @@ export default function JobDetailModal({ jobId, onClose }: { jobId: string | nul
|
||||
const [detail, setDetail] = useState<JobDetail | null>(null)
|
||||
const [dateien, setDateien] = useState<JobDatei[] | null>(null)
|
||||
const [laedt, setLaedt] = useState(false)
|
||||
const { theme } = useDarkMode()
|
||||
|
||||
useEffect(() => {
|
||||
if (!jobId) {
|
||||
@@ -69,7 +56,6 @@ export default function JobDetailModal({ jobId, onClose }: { jobId: string | nul
|
||||
api.get(`/jobs/${jobId}/detail`)
|
||||
.then(r => {
|
||||
setDetail(r.data)
|
||||
// Fertige Jobs: Dateiliste für die Download-Knöpfe nachladen
|
||||
if (r.data?.status === 'completed') {
|
||||
api.get(`/jobs/${jobId}/files`)
|
||||
.then(f => setDateien(f.data.files))
|
||||
@@ -86,154 +72,148 @@ export default function JobDetailModal({ jobId, onClose }: { jobId: string | nul
|
||||
const poster = posterUrl(meta)
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={onClose}>
|
||||
<div
|
||||
className={`w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-xl shadow-2xl ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className={`px-6 py-4 border-b flex items-center justify-between ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
|
||||
<h2 className={`text-lg font-bold truncate ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
{detail?.title || 'Job-Details'}
|
||||
</h2>
|
||||
<button onClick={onClose} className={`p-1.5 rounded flex-shrink-0 ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
|
||||
<X size={18} />
|
||||
</button>
|
||||
<Modal
|
||||
isOpen={!!jobId}
|
||||
onClose={onClose}
|
||||
title={detail?.title || 'Job-Details'}
|
||||
maxWidth="2xl"
|
||||
>
|
||||
{laedt ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="animate-spin text-amber-500" size={28} />
|
||||
</div>
|
||||
|
||||
{laedt ? (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="animate-spin text-indigo-500" size={28} />
|
||||
</div>
|
||||
) : !detail ? (
|
||||
<p className={`px-6 py-10 text-sm text-center ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
Job nicht gefunden.
|
||||
</p>
|
||||
) : (
|
||||
<div className="p-6 space-y-5">
|
||||
{/* Film/Serien-Info aus der Disc-Erkennung */}
|
||||
<div className="flex gap-5">
|
||||
{poster ? (
|
||||
<img src={poster} alt={detail.title || ''} className="w-32 rounded-lg object-cover flex-shrink-0 shadow-lg" />
|
||||
) : (
|
||||
<div className={`w-32 h-48 rounded-lg flex items-center justify-center flex-shrink-0 ${theme === 'dark' ? 'bg-slate-900 text-slate-600' : 'bg-slate-100 text-slate-400'}`}>
|
||||
<Film size={32} />
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<p className={`text-xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
{detail.title || 'Unbekannt'}
|
||||
{meta?.year ? <span className={`font-normal ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}> ({meta.year})</span> : null}
|
||||
</p>
|
||||
<p className={`text-xs mt-1 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
{meta?.type === 'tv' ? 'Serie' : 'Film'}
|
||||
{meta?.source ? ` · Quelle: ${meta.source}` : ''}
|
||||
{meta?.runtime ? ` · ${meta.runtime} min` : ''}
|
||||
</p>
|
||||
{meta?.genres && meta.genres.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{meta.genres.map(g => (
|
||||
<span key={g} className={`text-xs px-2 py-0.5 rounded-full ${theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-100 text-slate-600'}`}>{g}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{meta?.overview ? (
|
||||
<p className={`text-sm mt-3 leading-relaxed ${theme === 'dark' ? 'text-slate-300' : 'text-slate-600'}`}>
|
||||
{meta.overview}
|
||||
</p>
|
||||
) : (
|
||||
<p className={`text-sm mt-3 italic ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Keine Metadaten zu diesem Job gespeichert — die Disc wurde ohne Erkennung gerippt.
|
||||
</p>
|
||||
)}
|
||||
) : !detail ? (
|
||||
<p className="px-6 py-10 text-sm text-center text-slate-500 dark:text-slate-400">
|
||||
Job nicht gefunden.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{/* Film/Serien-Info aus der Disc-Erkennung */}
|
||||
<div className="flex gap-5">
|
||||
{poster ? (
|
||||
<img src={poster} alt={detail.title || ''} className="w-32 rounded-xl object-cover flex-shrink-0 shadow-lg shadow-black/30 border border-slate-700/50" />
|
||||
) : (
|
||||
<div className="w-32 h-48 rounded-xl flex items-center justify-center flex-shrink-0 bg-slate-100 dark:bg-slate-800 text-slate-400 dark:text-slate-500 border border-slate-200 dark:border-slate-700">
|
||||
<Film size={36} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nüchterne Job-Fakten */}
|
||||
<div className={`rounded-lg p-4 grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 text-sm ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}`}>
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>Status</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}>
|
||||
{STATUS_LABEL[detail.status] || detail.status}{detail.progress > 0 && detail.progress < 100 ? ` · ${detail.progress} %` : ''}
|
||||
</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>Laufwerk</span>
|
||||
<span className={`font-mono text-xs self-center ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>{detail.device || '—'}</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>Gestartet</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}>
|
||||
{detail.startTime ? new Date(detail.startTime).toLocaleString('de-DE') : '—'}
|
||||
</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>Beendet</span>
|
||||
<span className={theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}>
|
||||
{detail.endTime ? new Date(detail.endTime).toLocaleString('de-DE') : '—'}
|
||||
</span>
|
||||
{(detail.output_path || detail.target_dir) && (
|
||||
<>
|
||||
<span className={`flex items-center gap-1 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}><FolderOpen size={13} /> Ablage</span>
|
||||
<span className={`font-mono text-xs self-center break-all ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>
|
||||
{detail.output_path || detail.target_dir}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Download der fertigen Dateien — vorher kam man nur per scp dran */}
|
||||
{detail.status === 'completed' && dateien && dateien.length > 0 && (
|
||||
<div className={`rounded-lg p-4 ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}`}>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className={`text-sm font-medium flex items-center gap-2 ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>
|
||||
<Download size={15} /> Dateien herunterladen
|
||||
</p>
|
||||
{dateien.length > 1 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
// Gestaffelte Einzel-Downloads statt Server-seitigem
|
||||
// 40-GB-Zip — der Browser fragt ggf. einmal nach
|
||||
// Erlaubnis für mehrere Downloads.
|
||||
dateien.forEach((f, i) => {
|
||||
setTimeout(() => {
|
||||
const a = document.createElement('a')
|
||||
a.href = `/api/jobs/${detail.id}/files/${encodeURIComponent(f.name)}`
|
||||
a.download = f.name
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
a.remove()
|
||||
}, i * 400)
|
||||
})
|
||||
}}
|
||||
className="text-xs font-medium px-3 py-1.5 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors"
|
||||
>
|
||||
Alle herunterladen ({dateien.length})
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{dateien.map(f => (
|
||||
<a
|
||||
key={f.name}
|
||||
href={`/api/jobs/${detail.id}/files/${encodeURIComponent(f.name)}`}
|
||||
download
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${theme === 'dark' ? 'text-indigo-300 hover:bg-slate-800' : 'text-indigo-700 hover:bg-slate-100'}`}
|
||||
>
|
||||
<Download size={14} className="flex-shrink-0" />
|
||||
<span className="truncate min-w-0">{f.name}</span>
|
||||
{f.size_mb != null && (
|
||||
<span className={`ml-auto text-xs flex-shrink-0 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
{f.size_mb >= 1024 ? `${(f.size_mb / 1024).toFixed(1)} GB` : `${f.size_mb} MB`}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{detail.title || 'Unbekannt'}
|
||||
{meta?.year ? <span className="font-normal text-slate-500 dark:text-slate-400"> ({meta.year})</span> : null}
|
||||
</h3>
|
||||
<StatusBadge status={detail.status} />
|
||||
</div>
|
||||
<p className="text-xs mt-1 text-slate-500 dark:text-slate-400">
|
||||
{meta?.type === 'tv' ? 'Serie' : 'Film'}
|
||||
{meta?.source ? ` · Quelle: ${meta.source}` : ''}
|
||||
{meta?.runtime ? ` · ${meta.runtime} min` : ''}
|
||||
</p>
|
||||
{meta?.genres && meta.genres.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{meta.genres.map(g => (
|
||||
<span key={g} className="text-xs px-2.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-200 dark:border-slate-700">
|
||||
{g}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
{meta?.overview ? (
|
||||
<p className="text-sm mt-3 leading-relaxed text-slate-600 dark:text-slate-300 line-clamp-4">
|
||||
{meta.overview}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm mt-3 italic text-slate-400 dark:text-slate-500">
|
||||
Keine Metadaten zu diesem Job gespeichert — die Disc wurde ohne Erkennung gerippt.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{detail.error && (
|
||||
<div className={`rounded-lg p-4 flex items-start gap-2.5 text-sm ${theme === 'dark' ? 'bg-rose-900/30 text-rose-300' : 'bg-rose-50 text-rose-700'}`}>
|
||||
<AlertCircle size={16} className="flex-shrink-0 mt-0.5" />
|
||||
<span className="break-words min-w-0">{detail.error}</span>
|
||||
</div>
|
||||
{/* Job-Fakten Grid */}
|
||||
<div className="rounded-xl p-4 grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 text-sm bg-slate-50 dark:bg-slate-950/80 border border-slate-200/80 dark:border-slate-800">
|
||||
<span className="text-slate-500 dark:text-slate-400 font-medium">Status</span>
|
||||
<span className="text-slate-900 dark:text-slate-200">
|
||||
{detail.status}{detail.progress > 0 && detail.progress < 100 ? ` · ${detail.progress} %` : ''}
|
||||
</span>
|
||||
<span className="text-slate-500 dark:text-slate-400 font-medium">Laufwerk</span>
|
||||
<span className="font-mono text-xs self-center text-slate-900 dark:text-slate-200">{detail.device || '—'}</span>
|
||||
<span className="text-slate-500 dark:text-slate-400 font-medium">Gestartet</span>
|
||||
<span className="text-slate-900 dark:text-slate-200">
|
||||
{detail.startTime ? new Date(detail.startTime).toLocaleString('de-DE') : '—'}
|
||||
</span>
|
||||
<span className="text-slate-500 dark:text-slate-400 font-medium">Beendet</span>
|
||||
<span className="text-slate-900 dark:text-slate-200">
|
||||
{detail.endTime ? new Date(detail.endTime).toLocaleString('de-DE') : '—'}
|
||||
</span>
|
||||
{(detail.output_path || detail.target_dir) && (
|
||||
<>
|
||||
<span className="flex items-center gap-1 text-slate-500 dark:text-slate-400 font-medium"><FolderOpen size={13} /> Ablage</span>
|
||||
<span className="font-mono text-xs self-center break-all text-slate-900 dark:text-slate-200">
|
||||
{detail.output_path || detail.target_dir}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dateiliste & Download */}
|
||||
{detail.status === 'completed' && dateien && dateien.length > 0 && (
|
||||
<div className="rounded-xl p-4 bg-slate-50 dark:bg-slate-950/80 border border-slate-200/80 dark:border-slate-800">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<p className="text-sm font-medium flex items-center gap-2 text-slate-900 dark:text-slate-200">
|
||||
<Download size={15} className="text-amber-500" /> Dateien herunterladen
|
||||
</p>
|
||||
{dateien.length > 1 && (
|
||||
<Button
|
||||
variant="amber"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
dateien.forEach((f, i) => {
|
||||
setTimeout(() => {
|
||||
const a = document.createElement('a')
|
||||
a.href = `/api/jobs/${detail.id}/files/${encodeURIComponent(f.name)}`
|
||||
a.download = f.name
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
a.remove()
|
||||
}, i * 400)
|
||||
})
|
||||
}}
|
||||
>
|
||||
Alle herunterladen ({dateien.length})
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
{dateien.map(f => (
|
||||
<a
|
||||
key={f.name}
|
||||
href={`/api/jobs/${detail.id}/files/${encodeURIComponent(f.name)}`}
|
||||
download
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors text-amber-600 dark:text-amber-300 hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
<Download size={14} className="flex-shrink-0" />
|
||||
<span className="truncate min-w-0">{f.name}</span>
|
||||
{f.size_mb != null && (
|
||||
<span className="ml-auto text-xs flex-shrink-0 text-slate-500 dark:text-slate-400 font-mono">
|
||||
{f.size_mb >= 1024 ? `${(f.size_mb / 1024).toFixed(1)} GB` : `${f.size_mb} MB`}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{detail.error && (
|
||||
<div className="rounded-xl p-4 flex items-start gap-2.5 text-sm bg-rose-500/10 border border-rose-500/20 text-rose-600 dark:text-rose-400">
|
||||
<AlertCircle size={16} className="flex-shrink-0 mt-0.5" />
|
||||
<span className="break-words min-w-0">{detail.error}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Terminal, Play, CheckCircle, AlertCircle } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { Card, CardHeader, CardTitle } from './ui/Card'
|
||||
|
||||
interface LiveLogEntry {
|
||||
id: string
|
||||
@@ -14,7 +14,6 @@ interface LiveLogEntry {
|
||||
export default function LiveLogSection() {
|
||||
const [logs, setLogs] = useState<LiveLogEntry[]>([])
|
||||
const [currentJob, setCurrentJob] = useState<any>(null)
|
||||
const { theme } = useDarkMode()
|
||||
|
||||
useEffect(() => {
|
||||
const fetchJobs = async () => {
|
||||
@@ -50,28 +49,28 @@ export default function LiveLogSection() {
|
||||
|
||||
const getStatusColor = (level: string) => {
|
||||
switch (level) {
|
||||
case 'error': return 'text-rose-500'
|
||||
case 'warning': return 'text-amber-500'
|
||||
case 'success': return 'text-emerald-500'
|
||||
default: return 'text-blue-500'
|
||||
case 'error': return 'text-rose-500 dark:text-rose-400'
|
||||
case 'warning': return 'text-amber-500 dark:text-amber-400'
|
||||
case 'success': return 'text-emerald-500 dark:text-emerald-400'
|
||||
default: return 'text-sky-500 dark:text-sky-400'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusIcon = (level: string) => {
|
||||
switch (level) {
|
||||
case 'error': return <AlertCircle size={16} />
|
||||
case 'warning': return <AlertCircle size={16} />
|
||||
case 'success': return <CheckCircle size={16} />
|
||||
default: return <Terminal size={16} />
|
||||
case 'error': return <AlertCircle size={15} />
|
||||
case 'warning': return <AlertCircle size={15} />
|
||||
case 'success': return <CheckCircle size={15} />
|
||||
default: return <Terminal size={15} />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`rounded-xl shadow-sm border overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex items-center justify-between`}>
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<div>
|
||||
<h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Live-Log</h2>
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
<CardTitle>Live-Log</CardTitle>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{currentJob
|
||||
? `Aktiver Job: ${currentJob.type.toUpperCase()} (${currentJob.progress}%)`
|
||||
: 'Kein aktiver Job'}
|
||||
@@ -79,21 +78,19 @@ export default function LiveLogSection() {
|
||||
</div>
|
||||
{currentJob && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`px-3 py-1 rounded-full text-xs font-medium flex items-center gap-2 ${
|
||||
<div className={`px-3 py-1 rounded-full text-xs font-medium flex items-center gap-2 border ${
|
||||
currentJob.progress === 100
|
||||
? theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-700'
|
||||
: theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-700'
|
||||
? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30'
|
||||
: 'bg-sky-500/15 text-sky-600 dark:text-sky-400 border-sky-500/30'
|
||||
}`}>
|
||||
{currentJob.progress === 100 ? <CheckCircle size={12} /> : <Play size={12} />}
|
||||
{currentJob.progress}%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<div className={`max-h-[400px] overflow-y-auto p-4 space-y-2 transition-colors duration-300 font-mono text-xs ${
|
||||
theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'
|
||||
}`}>
|
||||
<div className="max-h-[380px] overflow-y-auto p-4 space-y-2 font-mono text-xs bg-slate-900/90 text-slate-200 border-b border-slate-800">
|
||||
{logs.length === 0 ? (
|
||||
<div className="text-center py-8 text-slate-500">
|
||||
<Terminal size={32} className="mx-auto mb-2 opacity-50" />
|
||||
@@ -101,14 +98,14 @@ export default function LiveLogSection() {
|
||||
</div>
|
||||
) : (
|
||||
logs.map((log) => (
|
||||
<div key={log.id} className={`flex items-start gap-2 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
<div key={log.id} className="flex items-start gap-2 text-slate-300">
|
||||
<span className="text-slate-500 whitespace-nowrap">
|
||||
{new Date(log.timestamp).toLocaleTimeString('de-DE', { hour12: false })}
|
||||
</span>
|
||||
<span className={`font-bold ${getStatusColor(log.level)}`}>
|
||||
[{log.source}]
|
||||
</span>
|
||||
<span className="flex-1">{log.message}</span>
|
||||
<span className="flex-1 text-slate-200">{log.message}</span>
|
||||
<span className={getStatusColor(log.level)}>
|
||||
{getStatusIcon(log.level)}
|
||||
</span>
|
||||
@@ -118,30 +115,28 @@ export default function LiveLogSection() {
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className={`px-6 py-3 border-t transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} grid grid-cols-3 gap-4`}>
|
||||
{currentJob && (
|
||||
<>
|
||||
<div>
|
||||
<p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Fortschritt</p>
|
||||
<p className={`text-lg font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
{currentJob.progress}%
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Gerät</p>
|
||||
<p className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
{currentJob.device || 'Unbekannt'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Typ</p>
|
||||
<p className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
{currentJob.type?.toUpperCase() || 'Unbekannt'}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{currentJob && (
|
||||
<div className="px-6 py-3 grid grid-cols-3 gap-4 bg-slate-50/50 dark:bg-slate-900/50">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">Fortschritt</p>
|
||||
<p className="text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||
{currentJob.progress}%
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">Gerät</p>
|
||||
<p className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{currentJob.device || 'Unbekannt'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">Typ</p>
|
||||
<p className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{currentJob.type?.toUpperCase() || 'Unbekannt'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Search, Loader2, X, Film } from 'lucide-react'
|
||||
import { Search, Loader2, Film } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
|
||||
// „Nicht korrekt?!"-Popup (Commander-Wunsch 23.07.): Korrektur direkt am
|
||||
// Dashboard — suchen, richtigen Treffer anklicken, Rippy merkt sich die Wahl
|
||||
// für diese Disc (30 Tage, per Disc-Fingerabdruck).
|
||||
import { Modal } from './ui/Modal'
|
||||
import { Button } from './ui/Button'
|
||||
import { Input } from './ui/Input'
|
||||
|
||||
interface SuchKandidat {
|
||||
title: string
|
||||
@@ -30,7 +28,6 @@ export default function MetadataKorrektur({ devicePath, vorschlag, isOpen, onClo
|
||||
const [kandidaten, setKandidaten] = useState<SuchKandidat[]>([])
|
||||
const [laeuft, setLaeuft] = useState(false)
|
||||
const [fehler, setFehler] = useState<string | null>(null)
|
||||
const { theme } = useDarkMode()
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
@@ -74,72 +71,68 @@ export default function MetadataKorrektur({ devicePath, vorschlag, isOpen, onClo
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
|
||||
<div className={`w-full max-w-2xl max-h-[85vh] flex flex-col rounded-xl shadow-2xl ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
|
||||
<div className={`px-6 py-4 border-b flex items-center justify-between ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
|
||||
<div>
|
||||
<h2 className={`text-lg font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Richtigen Titel wählen</h2>
|
||||
<p className={`text-xs mt-0.5 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
Deine Wahl gilt für diese Disc — auch beim nächsten Einlegen.
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={onClose} className={`p-1.5 rounded ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title="Richtigen Titel wählen"
|
||||
maxWidth="2xl"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Deine Wahl gilt für diese Disc — auch beim nächsten Einlegen.
|
||||
</p>
|
||||
|
||||
<div className="p-6 overflow-y-auto">
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
<div className="flex gap-3 items-end">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
value={suchbegriff}
|
||||
onChange={e => setSuchbegriff(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && suchen()}
|
||||
autoFocus
|
||||
placeholder="Titel eingeben…"
|
||||
className={`flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-700 border-slate-600 text-slate-100' : 'bg-white border-slate-300 text-slate-900'}`}
|
||||
/>
|
||||
<button
|
||||
onClick={suchen}
|
||||
disabled={!suchbegriff || laeuft}
|
||||
className="flex items-center gap-2 px-5 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors disabled:opacity-40"
|
||||
>
|
||||
{laeuft ? <Loader2 className="animate-spin" size={18} /> : <Search size={18} />}
|
||||
Suchen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{fehler && <p className="text-sm text-rose-500 mt-3">{fehler}</p>}
|
||||
|
||||
{kandidaten.length > 0 && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
|
||||
{kandidaten.map((k, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => waehlen(k)}
|
||||
className={`text-left rounded-lg border overflow-hidden transition-all hover:border-indigo-500 hover:shadow-lg ${theme === 'dark' ? 'bg-slate-900 border-slate-700' : 'bg-slate-50 border-slate-200'}`}
|
||||
>
|
||||
{k.poster ? (
|
||||
<img src={k.poster} alt={k.title} className="w-full h-40 object-cover" />
|
||||
) : (
|
||||
<div className={`w-full h-40 flex items-center justify-center ${theme === 'dark' ? 'bg-slate-800 text-slate-600' : 'bg-slate-100 text-slate-400'}`}>
|
||||
<Film size={32} />
|
||||
</div>
|
||||
)}
|
||||
<div className="p-2">
|
||||
<p className={`text-xs font-semibold leading-tight line-clamp-2 ${theme === 'dark' ? 'text-slate-200' : 'text-slate-800'}`}>{k.title}</p>
|
||||
<p className={`text-xs mt-0.5 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
{k.year || '—'} · {k.type === 'tv' ? 'Serie' : 'Film'} · {k.source}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="amber"
|
||||
onClick={suchen}
|
||||
disabled={!suchbegriff || laeuft}
|
||||
>
|
||||
{laeuft ? <Loader2 className="animate-spin" size={18} /> : <Search size={18} />}
|
||||
Suchen
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{fehler && <p className="text-sm text-rose-500 font-medium">{fehler}</p>}
|
||||
|
||||
{kandidaten.length > 0 && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3.5 pt-2 max-h-[60vh] overflow-y-auto">
|
||||
{kandidaten.map((k, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => waehlen(k)}
|
||||
className="text-left rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/80 overflow-hidden transition-all hover:border-amber-500/50 hover:shadow-lg hover:shadow-amber-500/10 group"
|
||||
>
|
||||
{k.poster ? (
|
||||
<img src={k.poster} alt={k.title} className="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-300" />
|
||||
) : (
|
||||
<div className="w-full h-40 flex items-center justify-center bg-slate-200 dark:bg-slate-900 text-slate-400 dark:text-slate-600">
|
||||
<Film size={32} />
|
||||
</div>
|
||||
)}
|
||||
<div className="p-2.5">
|
||||
<p className="text-xs font-semibold leading-tight line-clamp-2 text-slate-900 dark:text-slate-200 group-hover:text-amber-500 dark:group-hover:text-amber-400 transition-colors">
|
||||
{k.title}
|
||||
</p>
|
||||
<p className="text-[11px] mt-1 text-slate-500 dark:text-slate-400">
|
||||
{k.year || '—'} · {k.type === 'tv' ? 'Serie' : 'Film'} · {k.source}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Folder, FolderOpen, File, ArrowUp, CheckCircle } from 'lucide-react'
|
||||
import { Folder, FolderOpen, File, ArrowUp, CheckCircle, Film, Tv, Music } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { Modal } from './ui/Modal'
|
||||
import { Button } from './ui/Button'
|
||||
import { Input } from './ui/Input'
|
||||
|
||||
interface TargetConfig {
|
||||
id: string
|
||||
@@ -15,7 +17,7 @@ export interface RipOptionen {
|
||||
series?: string
|
||||
season?: number
|
||||
mainFeatureOnly?: boolean
|
||||
titles?: number[] // exakte Titel-Auswahl (Track-Tabelle)
|
||||
titles?: number[]
|
||||
}
|
||||
|
||||
interface TitelInfo {
|
||||
@@ -27,9 +29,9 @@ interface TitelInfo {
|
||||
|
||||
interface RipTargetModalProps {
|
||||
isOpen: boolean
|
||||
initialType?: TargetConfig['type'] // CD → Musik vorwählen (Medium-gerecht)
|
||||
discTitle?: string // Vorschlag für den Serien-Namen
|
||||
deviceId?: string // Laufwerks-ID (sr0) für den Titel-Scan
|
||||
initialType?: TargetConfig['type']
|
||||
discTitle?: string
|
||||
deviceId?: string
|
||||
onClose: () => void
|
||||
onSave: (target: TargetConfig, optionen: RipOptionen) => void
|
||||
}
|
||||
@@ -45,8 +47,6 @@ interface BrowseDir {
|
||||
path: string
|
||||
}
|
||||
|
||||
// Ziel-Auswahl vor dem Rip: Schnellwahl (Filme/Serien/Musik) ODER frei per
|
||||
// Ordner-Browser — auch in eingehängte Netzwerk-Ziele (NAS, PC-Freigabe).
|
||||
export default function RipTargetModal({ isOpen, initialType, discTitle, deviceId, onClose, onSave }: RipTargetModalProps) {
|
||||
const [selectedType, setSelectedType] = useState<TargetConfig['type']>('movies')
|
||||
const [serienName, setSerienName] = useState('')
|
||||
@@ -69,7 +69,6 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
|
||||
}
|
||||
}
|
||||
|
||||
// Polling, solange der Titel-Scan läuft (Info-Lauf dauert 20–120 s)
|
||||
useEffect(() => {
|
||||
if (scanStatus !== 'running' || !deviceId) return
|
||||
const interval = setInterval(async () => {
|
||||
@@ -78,7 +77,6 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
|
||||
if (r.data.status === 'done') {
|
||||
const tracks: TitelInfo[] = r.data.tracks || []
|
||||
setTitelListe(tracks)
|
||||
// Vorauswahl: alles ab 5 Minuten (Trailer/Menü-Schnipsel bleiben weg)
|
||||
setGewaehlt(new Set(tracks.filter(t => t.dauer_s >= 300).map(t => t.nr)))
|
||||
setScanStatus('done')
|
||||
} else if (r.data.status === 'error') {
|
||||
@@ -89,6 +87,7 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
|
||||
}, 3000)
|
||||
return () => clearInterval(interval)
|
||||
}, [scanStatus, deviceId])
|
||||
|
||||
const [targets, setTargets] = useState<TargetConfig[]>([
|
||||
{ id: '1', name: 'Filme', path: '/app/media/movies', type: 'movies', isActive: true },
|
||||
{ id: '2', name: 'Serien', path: '/app/media/series', type: 'series', isActive: true },
|
||||
@@ -99,9 +98,7 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
|
||||
const [browseDirs, setBrowseDirs] = useState<BrowseDir[]>([])
|
||||
const [browseFiles, setBrowseFiles] = useState<{ name: string, size_mb: number | null }[]>([])
|
||||
const [customPath, setCustomPath] = useState('')
|
||||
const { theme } = useDarkMode()
|
||||
|
||||
// Standard-Unterordner aus den Einstellungen ziehen (nicht hartkodiert)
|
||||
useEffect(() => {
|
||||
if (!isOpen) return
|
||||
setSelectedType(initialType || 'movies')
|
||||
@@ -144,11 +141,8 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
|
||||
optionen.series = serienName.trim()
|
||||
optionen.season = Math.max(1, staffel || 1)
|
||||
}
|
||||
// Explizite Titel-Auswahl schlägt alles andere
|
||||
if (scanStatus === 'done' && gewaehlt.size > 0 && gewaehlt.size < titelListe.length) {
|
||||
optionen.titles = [...gewaehlt].sort((a, b) => a - b)
|
||||
} else if (scanStatus === 'done' && gewaehlt.size > 0) {
|
||||
// Alle gewählt = normales „all" — keine Einzelaufrufe nötig
|
||||
}
|
||||
const target = targets.find(t => t.type === selectedType)
|
||||
if (customPath) {
|
||||
@@ -159,243 +153,195 @@ export default function RipTargetModal({ isOpen, initialType, discTitle, deviceI
|
||||
onClose()
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm transition-all">
|
||||
<div className={`w-full max-w-lg rounded-xl shadow-2xl transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
|
||||
{/* Header */}
|
||||
<div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
|
||||
<h2 className={`text-xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Rip-Ziel auswählen</h2>
|
||||
<p className={`text-sm mt-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
Schnellwahl oder eigenen Ordner wählen — Netzwerk-Ziele (NAS, PC) sind unter Einstellungen → Speicherziele einhängbar.
|
||||
</p>
|
||||
</div>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title="Rip-Ziel auswählen"
|
||||
maxWidth="lg"
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Schnellwahl oder eigenen Ordner wählen — Netzwerk-Ziele (NAS, PC) sind unter Einstellungen → Speicherziele einhängbar.
|
||||
</p>
|
||||
|
||||
{/* Body */}
|
||||
<div className="p-6 space-y-5">
|
||||
{/* Schnellwahl */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{targets.map((t) => (
|
||||
{/* Schnellwahl */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{targets.map((t) => {
|
||||
const isSelected = selectedType === t.type && !customPath
|
||||
return (
|
||||
<button
|
||||
key={t.type}
|
||||
onClick={() => { setSelectedType(t.type); setCustomPath('') }}
|
||||
className={`flex flex-col items-center justify-center gap-1.5 p-3 rounded-lg border transition-all ${
|
||||
selectedType === t.type && !customPath
|
||||
? theme === 'dark'
|
||||
? 'bg-indigo-900/30 border-indigo-500 text-indigo-400'
|
||||
: 'bg-indigo-50 border-indigo-600 text-indigo-700'
|
||||
: theme === 'dark'
|
||||
? 'bg-slate-900 border-slate-700 text-slate-400 hover:border-slate-600'
|
||||
: 'bg-slate-50 border-slate-200 text-slate-600 hover:border-slate-300'
|
||||
className={`flex flex-col items-center justify-center gap-1.5 p-3.5 rounded-xl border transition-all ${
|
||||
isSelected
|
||||
? 'bg-amber-500/15 border-amber-500 text-amber-600 dark:text-amber-300 font-semibold shadow-md shadow-amber-500/10'
|
||||
: 'bg-slate-50 dark:bg-slate-950/80 border-slate-200 dark:border-slate-800 text-slate-600 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-700'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">
|
||||
{t.type === 'movies' && '🎥'}
|
||||
{t.type === 'series' && '📺'}
|
||||
{t.type === 'music' && '🎵'}
|
||||
{t.type === 'movies' && <Film size={22} className={isSelected ? 'text-amber-500' : ''} />}
|
||||
{t.type === 'series' && <Tv size={22} className={isSelected ? 'text-amber-500' : ''} />}
|
||||
{t.type === 'music' && <Music size={22} className={isSelected ? 'text-amber-500' : ''} />}
|
||||
<span className="text-sm">{t.name}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Serien-Flow */}
|
||||
{selectedType === 'series' && (
|
||||
<div className="rounded-xl p-4 space-y-3 bg-slate-50 dark:bg-slate-950/80 border border-slate-200 dark:border-slate-800">
|
||||
<div className="grid grid-cols-[1fr_90px] gap-3">
|
||||
<Input
|
||||
label="Serienname"
|
||||
value={serienName}
|
||||
onChange={e => setSerienName(e.target.value)}
|
||||
placeholder="z. B. Neon Genesis Evangelion"
|
||||
/>
|
||||
<Input
|
||||
label="Staffel"
|
||||
type="number"
|
||||
min={1}
|
||||
value={staffel}
|
||||
onChange={e => setStaffel(parseInt(e.target.value) || 1)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Ablage: {serienName.trim() || '<Serie>'}/Season {String(Math.max(1, staffel || 1)).padStart(2, '0')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hauptfilm-Wahl */}
|
||||
{selectedType === 'movies' && scanStatus !== 'done' && (
|
||||
<label className="flex items-center gap-3 text-sm text-slate-700 dark:text-slate-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={nurHauptfilm}
|
||||
onChange={e => setNurHauptfilm(e.target.checked)}
|
||||
className="w-4 h-4 accent-amber-500 rounded"
|
||||
/>
|
||||
Nur Hauptfilm rippen (längster Titel — Extras/Trailer bleiben weg)
|
||||
</label>
|
||||
)}
|
||||
|
||||
{/* Titel-Auswahl (Track-Tabelle) */}
|
||||
{deviceId && selectedType !== 'music' && (
|
||||
<div className="rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden bg-slate-50/50 dark:bg-slate-950/50">
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b border-slate-200 dark:border-slate-800">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-slate-900 dark:text-slate-200">Titel-Auswahl (optional)</span>
|
||||
{scanStatus === 'idle' && (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Disc scannen und einzelne Titel an-/abwählen.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{scanStatus === 'running' ? (
|
||||
<span className="text-xs flex items-center gap-2 text-slate-500 dark:text-slate-400">
|
||||
<span className="animate-spin rounded-full h-3.5 w-3.5 border-2 border-amber-500 border-t-transparent" />
|
||||
Disc wird gelesen (20–120 s)…
|
||||
</span>
|
||||
<span className="text-sm font-medium">{t.name}</span>
|
||||
) : (
|
||||
<Button variant="secondary" size="sm" onClick={scanStarten}>
|
||||
{scanStatus === 'done' ? 'Neu scannen' : 'Disc scannen'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{scanStatus === 'error' && (
|
||||
<p className="text-xs text-rose-500 px-4 py-2.5">{scanFehler}</p>
|
||||
)}
|
||||
|
||||
{scanStatus === 'done' && titelListe.length > 0 && (
|
||||
<>
|
||||
<div className="max-h-44 overflow-y-auto">
|
||||
{titelListe.map(t => (
|
||||
<label
|
||||
key={t.nr}
|
||||
className="flex items-center gap-3 px-4 py-2 text-sm cursor-pointer border-b border-slate-200/50 dark:border-slate-800/50 hover:bg-slate-100 dark:hover:bg-slate-800/60"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={gewaehlt.has(t.nr)}
|
||||
onChange={e => {
|
||||
const neu = new Set(gewaehlt)
|
||||
if (e.target.checked) neu.add(t.nr); else neu.delete(t.nr)
|
||||
setGewaehlt(neu)
|
||||
}}
|
||||
className="w-4 h-4 accent-amber-500 rounded"
|
||||
/>
|
||||
<span className="font-mono text-xs w-14 font-semibold text-slate-700 dark:text-slate-300">Titel {t.nr}</span>
|
||||
<span className="text-slate-600 dark:text-slate-300">{dauerText(t.dauer_s)}</span>
|
||||
{t.kapitel > 0 && (
|
||||
<span className="text-xs text-slate-400">{t.kapitel} Kap.</span>
|
||||
)}
|
||||
<span className="ml-auto text-xs font-mono text-slate-400">
|
||||
{t.groesse_bytes > 0 ? `${(t.groesse_bytes / 1024 ** 3).toFixed(1)} GB` : ''}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs px-4 py-2 bg-slate-100 dark:bg-slate-900 text-slate-500 dark:text-slate-400">
|
||||
{gewaehlt.size} von {titelListe.length} Titeln gewählt
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Ordner-Browser */}
|
||||
<div className="rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden bg-slate-50/50 dark:bg-slate-950/50">
|
||||
<div className="flex items-center gap-2 px-3 py-2 border-b border-slate-200 dark:border-slate-800 bg-slate-100/50 dark:bg-slate-900/50">
|
||||
<button
|
||||
onClick={() => browseParent && laden(browseParent)}
|
||||
disabled={!browseParent}
|
||||
className="p-1 rounded-lg disabled:opacity-30 hover:bg-slate-200 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400"
|
||||
title="Ordner hoch"
|
||||
>
|
||||
<ArrowUp size={16} />
|
||||
</button>
|
||||
<span className="text-xs font-mono truncate flex-1 text-slate-500 dark:text-slate-400">{browsePath}</span>
|
||||
<Button
|
||||
variant={customPath === browsePath ? 'amber' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setCustomPath(browsePath)}
|
||||
>
|
||||
{customPath === browsePath ? '✓ gewählt' : 'Diesen Ordner nutzen'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="max-h-36 overflow-y-auto p-1">
|
||||
{browseDirs.map(d => (
|
||||
<button
|
||||
key={d.path}
|
||||
onClick={() => laden(d.path)}
|
||||
className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left rounded-lg transition-colors text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
<Folder size={14} className="text-slate-400" />
|
||||
{d.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Serien-Flow: Name + Staffel → Ablage <Serie>/Season NN, Episoden
|
||||
werden nach dem Rip per Laufzeit-Abgleich (TMDB) benannt */}
|
||||
{selectedType === 'series' && (
|
||||
<div className={`rounded-lg p-3 space-y-2 ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}`}>
|
||||
<div className="grid grid-cols-[1fr_90px] gap-3">
|
||||
<div>
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Serienname</label>
|
||||
<input
|
||||
value={serienName}
|
||||
onChange={e => setSerienName(e.target.value)}
|
||||
placeholder="z. B. Neon Genesis Evangelion"
|
||||
className={`w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Staffel</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={staffel}
|
||||
onChange={e => setStaffel(parseInt(e.target.value) || 1)}
|
||||
className={`w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Ablage: {serienName.trim() || '<Serie>'}/Season {String(Math.max(1, staffel || 1)).padStart(2, '0')} —
|
||||
Episoden werden nach dem Rip per Laufzeit-Abgleich (TMDB) automatisch
|
||||
zu „S{String(Math.max(1, staffel || 1)).padStart(2, '0')}E01…" benannt (nur bei eindeutiger Zuordnung).
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hauptfilm-Wahl: pro Rip übersteuerbar (Standard = Einstellung);
|
||||
eine explizite Titel-Auswahl unten schlägt diese Option */}
|
||||
{selectedType === 'movies' && scanStatus !== 'done' && (
|
||||
<label className={`flex items-center gap-2.5 text-sm px-1 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={nurHauptfilm}
|
||||
onChange={e => setNurHauptfilm(e.target.checked)}
|
||||
className="w-4 h-4 accent-indigo-600"
|
||||
/>
|
||||
Nur Hauptfilm rippen (längster Titel — Extras/Trailer bleiben weg)
|
||||
</label>
|
||||
)}
|
||||
|
||||
{/* Titel-Auswahl (Track-Tabelle): erst scannen, dann abwählen */}
|
||||
{deviceId && selectedType !== 'music' && (
|
||||
<div className={`rounded-lg border ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
|
||||
<div className={`flex items-center justify-between px-3 py-2 ${scanStatus === 'done' ? (theme === 'dark' ? 'border-b border-slate-700' : 'border-b border-slate-200') : ''}`}>
|
||||
<div>
|
||||
<span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>Titel-Auswahl (optional)</span>
|
||||
{scanStatus === 'idle' && (
|
||||
<p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Disc scannen und einzelne Titel an-/abwählen — statt alles oder nur Hauptfilm.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{scanStatus === 'running' ? (
|
||||
<span className={`text-xs flex items-center gap-2 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
<span className="animate-spin rounded-full h-3.5 w-3.5 border-2 border-indigo-500 border-t-transparent" />
|
||||
Disc wird gelesen (20–120 s)…
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
onClick={scanStarten}
|
||||
className={`text-xs font-medium px-3 py-1.5 rounded-lg transition-colors ${theme === 'dark' ? 'bg-slate-700 text-indigo-300 hover:bg-slate-600' : 'bg-slate-200 text-indigo-700 hover:bg-slate-300'}`}
|
||||
>
|
||||
{scanStatus === 'done' ? 'Neu scannen' : 'Disc scannen'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{scanStatus === 'error' && (
|
||||
<p className="text-xs text-rose-500 px-3 py-2">{scanFehler}</p>
|
||||
)}
|
||||
{scanStatus === 'done' && titelListe.length === 0 && (
|
||||
<p className={`text-xs px-3 py-2 ${theme === 'dark' ? 'text-amber-400' : 'text-amber-600'}`}>
|
||||
Keine Titel lesbar — vermutlich kann diese Disc nicht entschlüsselt
|
||||
werden (Details stehen nach einem Rip-Versuch im Job-Fehler).
|
||||
</p>
|
||||
)}
|
||||
{scanStatus === 'done' && titelListe.length > 0 && (
|
||||
<>
|
||||
<div className="max-h-44 overflow-y-auto">
|
||||
{titelListe.map(t => (
|
||||
<label
|
||||
key={t.nr}
|
||||
className={`flex items-center gap-2.5 px-3 py-1.5 text-sm cursor-pointer ${theme === 'dark' ? 'text-slate-300 hover:bg-slate-700/50' : 'text-slate-700 hover:bg-slate-50'}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={gewaehlt.has(t.nr)}
|
||||
onChange={e => {
|
||||
const neu = new Set(gewaehlt)
|
||||
if (e.target.checked) neu.add(t.nr); else neu.delete(t.nr)
|
||||
setGewaehlt(neu)
|
||||
}}
|
||||
className="w-4 h-4 accent-indigo-600 flex-shrink-0"
|
||||
/>
|
||||
<span className="font-mono text-xs w-14 flex-shrink-0">Titel {t.nr}</span>
|
||||
<span className="flex-shrink-0">{dauerText(t.dauer_s)}</span>
|
||||
{t.kapitel > 0 && (
|
||||
<span className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>{t.kapitel} Kap.</span>
|
||||
)}
|
||||
<span className={`ml-auto text-xs flex-shrink-0 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
{t.groesse_bytes > 0 ? `${(t.groesse_bytes / 1024 ** 3).toFixed(1)} GB` : ''}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<p className={`text-xs px-3 py-2 border-t ${theme === 'dark' ? 'border-slate-700 text-slate-500' : 'border-slate-200 text-slate-400'}`}>
|
||||
{gewaehlt.size} von {titelListe.length} Titeln gewählt
|
||||
{' · '}~{([...gewaehlt].reduce((s, nr) => s + (titelListe.find(t => t.nr === nr)?.groesse_bytes || 0), 0) / 1024 ** 3).toFixed(1)} GB
|
||||
{' · '}Vorauswahl: alles ab 5 Minuten
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Ordner-Browser */}
|
||||
<div className={`rounded-lg border overflow-hidden ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
|
||||
<div className={`flex items-center gap-2 px-3 py-2 border-b ${theme === 'dark' ? 'border-slate-700 bg-slate-900' : 'border-slate-200 bg-slate-50'}`}>
|
||||
<button
|
||||
onClick={() => browseParent && laden(browseParent)}
|
||||
disabled={!browseParent}
|
||||
className={`p-1 rounded disabled:opacity-30 ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-200 text-slate-500'}`}
|
||||
title="Ordner hoch"
|
||||
>
|
||||
<ArrowUp size={16} />
|
||||
</button>
|
||||
<span className={`text-xs font-mono truncate flex-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{browsePath}</span>
|
||||
<button
|
||||
onClick={() => setCustomPath(browsePath)}
|
||||
className={`text-xs font-medium px-2.5 py-1 rounded transition-colors ${customPath === browsePath ? 'bg-indigo-600 text-white' : theme === 'dark' ? 'bg-slate-700 text-indigo-300 hover:bg-slate-600' : 'bg-slate-200 text-indigo-700 hover:bg-slate-300'}`}
|
||||
>
|
||||
{customPath === browsePath ? '✓ gewählt' : 'Diesen Ordner nutzen'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-40 overflow-y-auto">
|
||||
{browseDirs.length === 0 && browseFiles.length === 0 ? (
|
||||
<p className={`text-xs px-3 py-3 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Ordner ist leer</p>
|
||||
) : (
|
||||
<>
|
||||
{browseDirs.map(d => (
|
||||
<button
|
||||
key={d.path}
|
||||
onClick={() => laden(d.path)}
|
||||
className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${theme === 'dark' ? 'text-slate-300 hover:bg-slate-700' : 'text-slate-700 hover:bg-slate-100'}`}
|
||||
>
|
||||
<Folder size={15} className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'} />
|
||||
{d.name}
|
||||
</button>
|
||||
))}
|
||||
{browseFiles.map(f => (
|
||||
<div key={f.name} className={`flex items-center gap-2 px-3 py-1.5 text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
<File size={14} className="flex-shrink-0" />
|
||||
<span className="truncate">{f.name}</span>
|
||||
{f.size_mb != null && (
|
||||
<span className="ml-auto text-xs flex-shrink-0">
|
||||
{f.size_mb >= 1024 ? `${(f.size_mb / 1024).toFixed(1)} GB` : `${f.size_mb} MB`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gewähltes Ziel */}
|
||||
<div className={`flex items-center gap-2 text-sm px-3 py-2 rounded-lg ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}`}>
|
||||
{customPath ? <FolderOpen size={16} className="text-indigo-500" /> : <CheckCircle size={16} className="text-emerald-500" />}
|
||||
<span className={`font-mono text-xs truncate ${theme === 'dark' ? 'text-slate-300' : 'text-slate-600'}`}>
|
||||
{customPath || targets.find(t => t.type === selectedType)?.path}
|
||||
</span>
|
||||
</div>
|
||||
{/* Gewähltes Ziel Display */}
|
||||
<div className="flex items-center gap-2 text-sm px-3.5 py-2.5 rounded-xl bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
|
||||
{customPath ? <FolderOpen size={16} className="text-amber-500" /> : <CheckCircle size={16} className="text-emerald-500" />}
|
||||
<span className="font-mono text-xs truncate text-slate-700 dark:text-slate-300">
|
||||
{customPath || targets.find(t => t.type === selectedType)?.path}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className={`px-6 py-4 border-t transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex justify-end gap-3`}>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${theme === 'dark' ? 'text-slate-400 hover:bg-slate-700' : 'text-slate-600 hover:bg-slate-100'}`}
|
||||
>
|
||||
<div className="flex justify-end gap-3 pt-3 border-t border-slate-200 dark:border-slate-800">
|
||||
<Button variant="secondary" onClick={onClose}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-500/30"
|
||||
>
|
||||
</Button>
|
||||
<Button variant="amber" onClick={handleSave}>
|
||||
Rippen starten
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { HardDrive, Plus, Trash2, CheckCircle, AlertCircle, RefreshCw, Folder, File, ArrowUp, FolderPlus } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
|
||||
// Netzwerk-Speicherziele (NAS/PC-Freigaben) direkt aus dem UI einhängen —
|
||||
// jedes Ziel erscheint danach in der Ziel-Auswahl beim Rippen.
|
||||
import { Card, CardHeader, CardTitle, CardContent } from './ui/Card'
|
||||
import { Button } from './ui/Button'
|
||||
import { Input, Select } from './ui/Input'
|
||||
|
||||
interface Mount {
|
||||
name: string
|
||||
@@ -42,7 +41,6 @@ export default function StorageMounts() {
|
||||
const [browseFiles, setBrowseFiles] = useState<{ name: string, size_mb: number | null }[]>([])
|
||||
const [neuerOrdner, setNeuerOrdner] = useState('')
|
||||
const [browserOffen, setBrowserOffen] = useState(false)
|
||||
const { theme } = useDarkMode()
|
||||
const { toast } = useToast()
|
||||
|
||||
const browsen = async (pfad: string) => {
|
||||
@@ -151,211 +149,231 @@ export default function StorageMounts() {
|
||||
}
|
||||
}
|
||||
|
||||
const feld = `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Vorhandene Ziele */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Verfügbare Ziele</h3>
|
||||
<button onClick={() => laden(true)} title="Ziele neu laden" className={`p-1.5 rounded ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<HardDrive size={20} className="text-amber-500" />
|
||||
<span>Verfügbare Ziele</span>
|
||||
</CardTitle>
|
||||
<Button variant="ghost" size="sm" onClick={() => laden(true)} title="Ziele neu laden">
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
</div>
|
||||
{targets.length === 0 ? (
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Noch keine Unterordner in /app/media — sie entstehen beim ersten Rip oder Mount.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{targets.map(t => (
|
||||
<div key={t.path} className={`flex items-center justify-between p-3 rounded-lg ${theme === 'dark' ? 'bg-slate-800' : 'bg-slate-50'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<HardDrive size={18} className={t.is_mount ? 'text-emerald-500' : theme === 'dark' ? 'text-slate-500' : 'text-slate-400'} />
|
||||
<div>
|
||||
<span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-200' : 'text-slate-800'}`}>{t.name}</span>
|
||||
<span className={`text-xs ml-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
{t.is_mount ? 'Netzwerk-Mount' : 'lokal'}{t.free_gb != null ? ` · ${t.free_gb} GB frei` : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{mounts.some(m => m.name === t.name) && (
|
||||
<button onClick={() => entfernen(t.name)} disabled={busy} className="p-1.5 rounded text-rose-500 hover:bg-rose-500/10">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Ordner-Verwaltung — bewusst eingeklappt: fürs tägliche Rippen nicht
|
||||
nötig (Ziel wählt man im „Rippen starten"-Dialog), war unbeschriftet
|
||||
und verwirrte mehr als sie half (Commander-Feedback 24.07.). */}
|
||||
<div className={`rounded-lg border overflow-hidden ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
|
||||
<button
|
||||
onClick={() => setBrowserOffen(!browserOffen)}
|
||||
className={`w-full flex items-center justify-between px-4 py-3 text-left transition-colors ${theme === 'dark' ? 'hover:bg-slate-800' : 'hover:bg-slate-50'}`}
|
||||
>
|
||||
<div>
|
||||
<h3 className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
Ordner-Verwaltung (optional)
|
||||
</h3>
|
||||
<p className={`text-xs mt-0.5 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Unterordner in der Ablage anschauen und neue anlegen — z. B. „anime" oder
|
||||
„doku", die danach im „Rippen starten"-Dialog wählbar sind. Fürs normale
|
||||
Rippen brauchst du das hier nicht.
|
||||
</p>
|
||||
</div>
|
||||
<span className={`text-xs flex-shrink-0 ml-3 ${theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'}`}>
|
||||
{browserOffen ? 'zuklappen ▲' : 'aufklappen ▼'}
|
||||
</span>
|
||||
</button>
|
||||
{browserOffen && (<>
|
||||
<div className={`flex items-center gap-2 px-3 py-2 border-y ${theme === 'dark' ? 'border-slate-700 bg-slate-900' : 'border-slate-200 bg-slate-50'}`}>
|
||||
<button
|
||||
onClick={() => browseParent && browsen(browseParent)}
|
||||
disabled={!browseParent}
|
||||
className={`p-1 rounded disabled:opacity-30 ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-200 text-slate-500'}`}
|
||||
title="Ordner hoch"
|
||||
>
|
||||
<ArrowUp size={16} />
|
||||
</button>
|
||||
<span className={`text-xs font-mono truncate flex-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{browsePath}</span>
|
||||
<input
|
||||
value={neuerOrdner}
|
||||
onChange={e => setNeuerOrdner(e.target.value)}
|
||||
placeholder="neuer-ordner"
|
||||
className={`w-32 px-2 py-1 text-xs border rounded ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`}
|
||||
/>
|
||||
<button
|
||||
onClick={ordnerAnlegen}
|
||||
disabled={!neuerOrdner}
|
||||
className={`p-1.5 rounded disabled:opacity-30 text-indigo-500 ${theme === 'dark' ? 'hover:bg-slate-700' : 'hover:bg-slate-200'}`}
|
||||
title="Ordner anlegen"
|
||||
>
|
||||
<FolderPlus size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-36 overflow-y-auto">
|
||||
{browseDirs.length === 0 && browseFiles.length === 0 ? (
|
||||
<p className={`text-xs px-3 py-3 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Ordner ist leer</p>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{targets.length === 0 ? (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Noch keine Unterordner in /app/media — sie entstehen beim ersten Rip oder Mount.</p>
|
||||
) : (
|
||||
<>
|
||||
{browseDirs.map(d => (
|
||||
<button
|
||||
key={d.path}
|
||||
onClick={() => browsen(d.path)}
|
||||
className={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${theme === 'dark' ? 'text-slate-300 hover:bg-slate-700' : 'text-slate-700 hover:bg-slate-100'}`}
|
||||
>
|
||||
<Folder size={15} className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'} />
|
||||
{d.name}
|
||||
</button>
|
||||
))}
|
||||
{/* Dateien mit anzeigen (grau, nicht klickbar) — vorher wirkte
|
||||
z. B. der bluray-Ordner „leer", obwohl die MKVs drinlagen */}
|
||||
{browseFiles.map(f => (
|
||||
<div
|
||||
key={f.name}
|
||||
className={`flex items-center gap-2 px-3 py-1.5 text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}
|
||||
>
|
||||
<File size={14} className="flex-shrink-0" />
|
||||
<span className="truncate">{f.name}</span>
|
||||
{f.size_mb != null && (
|
||||
<span className="ml-auto text-xs flex-shrink-0">
|
||||
{f.size_mb >= 1024 ? `${(f.size_mb / 1024).toFixed(1)} GB` : `${f.size_mb} MB`}
|
||||
</span>
|
||||
<div className="space-y-2.5">
|
||||
{targets.map(t => (
|
||||
<div key={t.path} className="flex items-center justify-between p-3.5 rounded-xl border border-slate-200/80 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/80">
|
||||
<div className="flex items-center gap-3">
|
||||
<HardDrive size={18} className={t.is_mount ? 'text-amber-500' : 'text-slate-400 dark:text-slate-500'} />
|
||||
<div>
|
||||
<span className="text-sm font-medium text-slate-900 dark:text-slate-200">{t.name}</span>
|
||||
<span className="text-xs ml-2 text-slate-500 dark:text-slate-400">
|
||||
{t.is_mount ? 'Netzwerk-Mount' : 'lokal'}{t.free_gb != null ? ` · ${t.free_gb} GB frei` : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{mounts.some(m => m.name === t.name) && (
|
||||
<button onClick={() => entfernen(t.name)} disabled={busy} className="p-1.5 rounded-lg text-rose-500 hover:bg-rose-500/10 transition-colors">
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Ordner-Verwaltung */}
|
||||
<Card>
|
||||
<button
|
||||
onClick={() => setBrowserOffen(!browserOffen)}
|
||||
className="w-full flex items-center justify-between p-6 text-left transition-colors hover:bg-slate-50/50 dark:hover:bg-slate-800/30"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
Ordner-Verwaltung (optional)
|
||||
</h3>
|
||||
<p className="text-xs mt-0.5 text-slate-500 dark:text-slate-400">
|
||||
Unterordner in der Ablage anschauen und neue anlegen — z. B. „anime" oder „doku".
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs flex-shrink-0 ml-3 text-amber-600 dark:text-amber-400 font-medium">
|
||||
{browserOffen ? 'zuklappen ▲' : 'aufklappen ▼'}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{browserOffen && (
|
||||
<div className="border-t border-slate-200/80 dark:border-slate-800/80">
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 bg-slate-50 dark:bg-slate-950/90 border-b border-slate-200/80 dark:border-slate-800">
|
||||
<button
|
||||
onClick={() => browseParent && browsen(browseParent)}
|
||||
disabled={!browseParent}
|
||||
className="p-1.5 rounded-lg disabled:opacity-30 hover:bg-slate-200 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400 transition-colors"
|
||||
title="Ordner hoch"
|
||||
>
|
||||
<ArrowUp size={16} />
|
||||
</button>
|
||||
<span className="text-xs font-mono truncate flex-1 text-slate-500 dark:text-slate-400">{browsePath}</span>
|
||||
<input
|
||||
value={neuerOrdner}
|
||||
onChange={e => setNeuerOrdner(e.target.value)}
|
||||
placeholder="neuer-ordner"
|
||||
className="w-36 px-2.5 py-1 text-xs border rounded-lg bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-amber-500/50"
|
||||
/>
|
||||
<button
|
||||
onClick={ordnerAnlegen}
|
||||
disabled={!neuerOrdner}
|
||||
className="p-1.5 rounded-lg disabled:opacity-30 text-amber-500 hover:bg-amber-500/10 transition-colors"
|
||||
title="Ordner anlegen"
|
||||
>
|
||||
<FolderPlus size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="max-h-44 overflow-y-auto p-2">
|
||||
{browseDirs.length === 0 && browseFiles.length === 0 ? (
|
||||
<p className="text-xs p-3 text-slate-400 dark:text-slate-500">Ordner ist leer</p>
|
||||
) : (
|
||||
<>
|
||||
{browseDirs.map(d => (
|
||||
<button
|
||||
key={d.path}
|
||||
onClick={() => browsen(d.path)}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 text-sm rounded-lg text-left transition-colors text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
>
|
||||
<Folder size={15} className="text-slate-400 dark:text-slate-500" />
|
||||
{d.name}
|
||||
</button>
|
||||
))}
|
||||
{browseFiles.map(f => (
|
||||
<div
|
||||
key={f.name}
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-slate-400 dark:text-slate-500"
|
||||
>
|
||||
<File size={14} className="flex-shrink-0" />
|
||||
<span className="truncate">{f.name}</span>
|
||||
{f.size_mb != null && (
|
||||
<span className="ml-auto text-xs flex-shrink-0 font-mono">
|
||||
{f.size_mb >= 1024 ? `${(f.size_mb / 1024).toFixed(1)} GB` : `${f.size_mb} MB`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Neues Netzwerk-Ziel */}
|
||||
<div className={`rounded-lg p-4 border ${theme === 'dark' ? 'border-slate-700 bg-slate-800/50' : 'border-slate-200 bg-slate-50'}`}>
|
||||
<h3 className={`font-medium mb-3 flex items-center gap-2 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<Plus size={18} className="text-indigo-500" /> Netzwerk-Ziel hinzufügen
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Name (klein, ohne Leerzeichen)</label>
|
||||
<input value={name} onChange={e => setName(e.target.value.toLowerCase())} className={feld} placeholder="nas-filme" />
|
||||
</div>
|
||||
<div>
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Typ</label>
|
||||
<select value={typ} onChange={e => setTyp(e.target.value as 'nfs' | 'cifs')} className={feld}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Plus size={20} className="text-amber-500" />
|
||||
<span>Netzwerk-Ziel hinzufügen</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Name (klein, ohne Leerzeichen)"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value.toLowerCase())}
|
||||
placeholder="nas-filme"
|
||||
/>
|
||||
<Select
|
||||
label="Typ"
|
||||
value={typ}
|
||||
onChange={e => setTyp(e.target.value as 'nfs' | 'cifs')}
|
||||
>
|
||||
<option value="nfs">NFS (NAS/Linux)</option>
|
||||
<option value="cifs">SMB/CIFS (Windows-Freigabe, NAS)</option>
|
||||
</select>
|
||||
</div>
|
||||
{typ === 'nfs' ? (
|
||||
<div className="md:col-span-2">
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
Quelle (host:/export/pfad)
|
||||
</label>
|
||||
<input value={source} onChange={e => setSource(e.target.value)} className={feld} placeholder="192.168.1.10:/volume1/filme" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
</Select>
|
||||
|
||||
{typ === 'nfs' ? (
|
||||
<div className="md:col-span-2">
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
Rechner (dein PC oder NAS — Name oder IP)
|
||||
</label>
|
||||
<input value={host} onChange={e => setHost(e.target.value)} className={feld} placeholder="192.168.178.20 oder TOBIS-PC" />
|
||||
<Input
|
||||
label="Quelle (host:/export/pfad)"
|
||||
value={source}
|
||||
onChange={e => setSource(e.target.value)}
|
||||
placeholder="192.168.1.10:/volume1/filme"
|
||||
/>
|
||||
</div>
|
||||
{/* Zugangsdaten VOR der Freigaben-Abfrage (Befund 24.07.):
|
||||
Windows/NAS lehnen Gast-Abfragen fast immer mit
|
||||
ACCESS_DENIED ab — ohne Benutzer/Passwort scheiterte der
|
||||
Knopf darunter scheinbar grundlos. */}
|
||||
<div>
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Benutzer</label>
|
||||
<input value={username} onChange={e => setUsername(e.target.value)} className={feld} autoComplete="off" placeholder="Freigabe-Benutzer" />
|
||||
</div>
|
||||
<div>
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Passwort</label>
|
||||
<input type="password" value={password} onChange={e => setPassword(e.target.value)} className={feld} autoComplete="new-password" />
|
||||
</div>
|
||||
<p className={`md:col-span-2 text-xs -mt-1 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Windows-PCs und die meisten NAS verlangen Benutzer + Passwort — ohne Angaben
|
||||
versucht Rippy einen Gast-Zugriff, der meist mit „Zugriff verweigert" endet.
|
||||
</p>
|
||||
<div className="md:col-span-2">
|
||||
<button
|
||||
onClick={freigabenAuflisten}
|
||||
disabled={!host || sharesBusy}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-40 ${theme === 'dark' ? 'bg-slate-700 text-indigo-300 hover:bg-slate-600' : 'bg-slate-200 text-indigo-700 hover:bg-slate-300'}`}
|
||||
>
|
||||
{sharesBusy ? 'Suche…' : 'Freigaben auflisten'}
|
||||
</button>
|
||||
</div>
|
||||
{shares.length > 0 && (
|
||||
) : (
|
||||
<>
|
||||
<div className="md:col-span-2">
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Freigabe wählen</label>
|
||||
<select value={selectedShare} onChange={e => setSelectedShare(e.target.value)} className={feld}>
|
||||
{shares.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
<Input
|
||||
label="Rechner (dein PC oder NAS — Name oder IP)"
|
||||
value={host}
|
||||
onChange={e => setHost(e.target.value)}
|
||||
placeholder="192.168.178.20 oder TOBIS-PC"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<Input
|
||||
label="Benutzer"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
autoComplete="off"
|
||||
placeholder="Freigabe-Benutzer"
|
||||
/>
|
||||
<Input
|
||||
label="Passwort"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<p className="md:col-span-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
Windows-PCs und die meisten NAS verlangen Benutzer + Passwort — ohne Angaben versucht Rippy einen Gast-Zugriff.
|
||||
</p>
|
||||
<div className="md:col-span-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={freigabenAuflisten}
|
||||
disabled={!host || sharesBusy}
|
||||
>
|
||||
{sharesBusy ? 'Suche…' : 'Freigaben auflisten'}
|
||||
</Button>
|
||||
</div>
|
||||
{shares.length > 0 && (
|
||||
<div className="md:col-span-2">
|
||||
<Select
|
||||
label="Freigabe wählen"
|
||||
value={selectedShare}
|
||||
onChange={e => setSelectedShare(e.target.value)}
|
||||
>
|
||||
{shares.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="amber"
|
||||
onClick={hinzufuegen}
|
||||
disabled={busy || !name || (typ === 'nfs' ? !source : !(host && selectedShare))}
|
||||
>
|
||||
{busy ? 'Hänge ein…' : 'Einhängen & speichern'}
|
||||
</Button>
|
||||
|
||||
{feedback && (
|
||||
<p className={`text-sm flex items-center gap-2 font-medium ${feedback.startsWith('✓') ? 'text-emerald-500' : 'text-rose-500'}`}>
|
||||
{feedback.startsWith('✓') ? <CheckCircle size={16} /> : <AlertCircle size={16} />}
|
||||
{feedback}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={hinzufuegen}
|
||||
disabled={busy || !name || (typ === 'nfs' ? !source : !(host && selectedShare))}
|
||||
className="mt-4 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors disabled:opacity-40"
|
||||
>
|
||||
{busy ? 'Hänge ein…' : 'Einhängen & speichern'}
|
||||
</button>
|
||||
{feedback && (
|
||||
<p className={`mt-3 text-sm flex items-center gap-2 ${feedback.startsWith('✓') ? 'text-emerald-500' : 'text-rose-500'}`}>
|
||||
{feedback.startsWith('✓') ? <CheckCircle size={16} /> : <AlertCircle size={16} />}
|
||||
{feedback}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Server, RefreshCw, Copy, CheckCircle, Trash2 } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
|
||||
// Worker-Verwaltung (Commander-Anforderung 23.07.): Welche Maschinen encoden,
|
||||
// sind sie erreichbar, und wie bindet man eine neue an? Ein Worker "installiert
|
||||
// sich" über einen Copy-Paste-Befehl auf der Zielmaschine — danach taucht er
|
||||
// hier automatisch auf und zieht sich Kompressions-Jobs aus der Warteschlange.
|
||||
import { Card, CardHeader, CardTitle, CardContent } from './ui/Card'
|
||||
import { Button } from './ui/Button'
|
||||
import { Input } from './ui/Input'
|
||||
|
||||
interface WorkerInfo {
|
||||
name: string
|
||||
@@ -42,13 +39,8 @@ export default function WorkerVerwaltung() {
|
||||
const [kopiert, setKopiert] = useState(false)
|
||||
const [variante, setVariante] = useState<'linux' | 'windows'>('linux')
|
||||
const [rippyHost, setRippyHost] = useState(window.location.hostname)
|
||||
const { theme } = useDarkMode()
|
||||
const { toast } = useToast()
|
||||
|
||||
// Worker verbinden sich DIREKT mit Redis/Postgres (6379/5432) — das geht
|
||||
// nur im Heimnetz. Wer das UI gerade über eine externe Domain (Reverse-
|
||||
// Proxy) aufruft, würde sonst Befehle mit der falschen Adresse kopieren
|
||||
// (Befund 24.07.: 401 vom Proxy statt Installer).
|
||||
const siehtOeffentlichAus =
|
||||
!/^(\d{1,3}\.){3}\d{1,3}$/.test(rippyHost) &&
|
||||
!rippyHost.endsWith('.local') &&
|
||||
@@ -92,123 +84,127 @@ export default function WorkerVerwaltung() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Verbundene Worker */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Verbundene Worker</h3>
|
||||
<button onClick={() => laden(true)} title="Worker neu laden" className={`p-1.5 rounded ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Server size={20} className="text-amber-500" />
|
||||
<span>Verbundene Worker</span>
|
||||
</CardTitle>
|
||||
<Button variant="ghost" size="sm" onClick={() => laden(true)} title="Worker neu laden">
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
</div>
|
||||
{workers.length === 0 ? (
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Noch kein Worker gemeldet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{workers.map(w => (
|
||||
<div key={w.name} className={`flex items-center justify-between p-3 rounded-lg ${theme === 'dark' ? 'bg-slate-800' : 'bg-slate-50'}`}>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<span
|
||||
className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${w.online ? 'bg-emerald-500' : 'bg-rose-500'}`}
|
||||
title={w.online ? 'erreichbar (Ping OK)' : 'nicht erreichbar'}
|
||||
/>
|
||||
<Server size={18} className={theme === 'dark' ? 'text-slate-400' : 'text-slate-500'} />
|
||||
<div className="min-w-0">
|
||||
<p className={`text-sm font-medium truncate ${theme === 'dark' ? 'text-slate-200' : 'text-slate-800'}`}>{w.name}</p>
|
||||
<p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
{w.online ? 'online' : 'offline'} · Lebenszeichen {relativeZeit(w.last_seen)}
|
||||
{w.info?.ip ? ` · IP ${w.info.ip}` : ''}
|
||||
{w.info?.hostname && w.info.hostname !== w.name ? ` · ID ${w.info.hostname}` : ''}
|
||||
</p>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{workers.length === 0 ? (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Noch kein Worker gemeldet.</p>
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
{workers.map(w => (
|
||||
<div key={w.name} className="flex items-center justify-between p-3.5 rounded-xl border border-slate-200/80 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/80">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<span
|
||||
className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${w.online ? 'bg-emerald-500 shadow-sm shadow-emerald-500/50' : 'bg-rose-500'}`}
|
||||
title={w.online ? 'erreichbar (Ping OK)' : 'nicht erreichbar'}
|
||||
/>
|
||||
<Server size={18} className="text-slate-400 dark:text-slate-500" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate text-slate-900 dark:text-slate-200">{w.name}</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{w.online ? 'online' : 'offline'} · Lebenszeichen {relativeZeit(w.last_seen)}
|
||||
{w.info?.ip ? ` · IP ${w.info.ip}` : ''}
|
||||
{w.info?.hostname && w.info.hostname !== w.name ? ` · ID ${w.info.hostname}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-wrap gap-1 justify-end">
|
||||
{w.encoders.map(e => (
|
||||
<span key={e} className={`text-xs px-2.5 py-0.5 rounded-md font-medium border ${
|
||||
e.startsWith('cpu')
|
||||
? 'bg-slate-200/80 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-700'
|
||||
: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30'
|
||||
}`}>
|
||||
{ENCODER_LABELS[e] || e}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{!w.online && (
|
||||
<button
|
||||
onClick={() => {
|
||||
api.delete(`/workers/${encodeURIComponent(w.name)}`)
|
||||
.then(() => { toast('success', `„${w.name}" entfernt — ein aktiver Worker meldet sich binnen 1 min zurück`); laden() })
|
||||
.catch(() => toast('error', 'Entfernen fehlgeschlagen'))
|
||||
}}
|
||||
title="Verwaisten Eintrag entfernen"
|
||||
className="p-1.5 rounded-lg text-rose-500 hover:bg-rose-500/10 transition-colors"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-wrap gap-1 justify-end">
|
||||
{w.encoders.map(e => (
|
||||
<span key={e} className={`text-xs px-2 py-0.5 rounded ${e.startsWith('cpu') ? (theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-200 text-slate-600') : 'bg-emerald-600/20 text-emerald-500 font-medium'}`}>
|
||||
{ENCODER_LABELS[e] || e}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{!w.online && (
|
||||
<button
|
||||
onClick={() => {
|
||||
api.delete(`/workers/${encodeURIComponent(w.name)}`)
|
||||
.then(() => { toast('success', `„${w.name}" entfernt — ein aktiver Worker meldet sich binnen 1 min zurück`); laden() })
|
||||
.catch(() => toast('error', 'Entfernen fehlgeschlagen'))
|
||||
}}
|
||||
title="Verwaisten Eintrag entfernen (alte Container-ID nach Rebuild) — aktive Worker melden sich automatisch wieder an"
|
||||
className="p-1.5 rounded text-rose-500 hover:bg-rose-500/10"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Neue Maschine anbinden */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Maschine als Encoding-Worker anbinden</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="max-w-md">
|
||||
<Input
|
||||
label="Rippy-Adresse aus Sicht des Workers (Heimnetz-IP oder -Name)"
|
||||
value={rippyHost}
|
||||
onChange={e => setRippyHost(e.target.value.trim())}
|
||||
placeholder="192.168.178.162"
|
||||
/>
|
||||
{siehtOeffentlichAus && (
|
||||
<p className="text-xs mt-2 p-3 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-700 dark:text-amber-300">
|
||||
⚠️ Das sieht nach einer externen Domain aus (Reverse-Proxy). Worker verbinden sich
|
||||
direkt mit Redis/Postgres (Ports 6379/5432) — das geht nur im Heimnetz. Hier die <strong>LAN-IP</strong> eintragen, z. B. 192.168.178.162.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{([['linux', '🐧 Linux (Docker)'], ['windows', '🪟 Windows (nativ, ohne Docker)']] as const).map(([wert, label]) => (
|
||||
<Button
|
||||
key={wert}
|
||||
variant={variante === wert ? 'amber' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setVariante(wert)}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Neue Maschine anbinden — zwei Varianten */}
|
||||
<div className={`rounded-lg p-4 border ${theme === 'dark' ? 'border-slate-700 bg-slate-800/50' : 'border-slate-200 bg-slate-50'}`}>
|
||||
<h3 className={`font-medium mb-2 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Maschine als Encoding-Worker anbinden</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{variante === 'linux'
|
||||
? 'Auf der Linux-Maschine (mit Docker) ausführen — WORKER_NAME frei wählen, unter dem Namen taucht sie oben auf und übernimmt Kompressions-Jobs. GPU wird erkannt und angezeigt.'
|
||||
: 'In einer PowerShell auf dem Windows-PC ausführen (braucht nur Python 3.10+ — kein Docker, kein git). Der Installer holt Worker-Code und HandBrake automatisch.'}
|
||||
</p>
|
||||
|
||||
{/* Rippy-Adresse für die Befehle: Worker reden DIREKT mit Redis/
|
||||
Postgres — das geht nur im Heimnetz, nie über die externe Domain */}
|
||||
<div className="mb-3">
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
Rippy-Adresse aus Sicht des Workers (Heimnetz-IP oder -Name)
|
||||
</label>
|
||||
<input
|
||||
value={rippyHost}
|
||||
onChange={e => setRippyHost(e.target.value.trim())}
|
||||
className={`w-full max-w-xs px-3 py-2 border rounded-lg text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`}
|
||||
placeholder="192.168.178.162"
|
||||
/>
|
||||
{siehtOeffentlichAus && (
|
||||
<p className={`text-xs mt-1.5 px-2.5 py-1.5 rounded-lg inline-block ${theme === 'dark' ? 'bg-amber-900/30 text-amber-300' : 'bg-amber-50 text-amber-700'}`}>
|
||||
⚠️ Das sieht nach einer externen Domain aus (Reverse-Proxy). Worker verbinden sich
|
||||
direkt mit Redis/Postgres (Ports 6379/5432) — das geht nur im Heimnetz, und der
|
||||
Proxy blockt den Installer-Download (401). Hier die <strong>LAN-IP</strong> der
|
||||
Rippy-Maschine eintragen, z. B. 192.168.178.162.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 mb-3">
|
||||
{([['linux', '🐧 Linux (Docker)'], ['windows', '🪟 Windows (nativ, ohne Docker)']] as const).map(([wert, label]) => (
|
||||
<div className="relative rounded-xl p-4 font-mono text-xs whitespace-pre overflow-x-auto bg-slate-900 text-slate-200 border border-slate-800">
|
||||
{installBefehl}
|
||||
<button
|
||||
key={wert}
|
||||
onClick={() => setVariante(wert)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-all ${
|
||||
variante === wert
|
||||
? theme === 'dark' ? 'bg-indigo-900/40 border-indigo-500 text-indigo-300' : 'bg-indigo-50 border-indigo-600 text-indigo-700'
|
||||
: theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500' : 'bg-white border-slate-300 text-slate-600 hover:border-slate-400'
|
||||
}`}
|
||||
onClick={kopieren}
|
||||
className="absolute top-3 right-3 p-1.5 rounded-lg bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
|
||||
title="Kopieren"
|
||||
>
|
||||
{label}
|
||||
{kopiert ? <CheckCircle size={15} className="text-emerald-400" /> : <Copy size={15} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className={`text-xs mb-3 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
{variante === 'linux'
|
||||
? 'Auf der Linux-Maschine (mit Docker) ausführen — WORKER_NAME frei wählen, unter dem Namen taucht sie oben auf und übernimmt Kompressions-Jobs. GPU wird erkannt und angezeigt.'
|
||||
: 'In einer PowerShell auf dem Windows-PC ausführen (braucht nur Python 3.10+ — kein Docker, kein git). Der Installer holt Worker-Code und HandBrake automatisch und erzeugt: start-tray.bat (Tray-Symbol neben der Uhr mit Start/Stopp/Status), start-worker.bat (Konsole, für Fehlersuche) und uninstall.ps1 (entfernt alles rückstandsfrei inkl. Worker-Eintrag hier). Autostart bei Anmeldung: Parameter -Autostart anhängen.'}
|
||||
</p>
|
||||
<div className={`relative rounded-lg p-3 font-mono text-xs whitespace-pre overflow-x-auto ${theme === 'dark' ? 'bg-slate-950 text-slate-300' : 'bg-slate-900 text-slate-200'}`}>
|
||||
{installBefehl}
|
||||
<button
|
||||
onClick={kopieren}
|
||||
className="absolute top-2 right-2 p-1.5 rounded bg-slate-700 text-slate-300 hover:bg-slate-600"
|
||||
title="Kopieren"
|
||||
>
|
||||
{kopiert ? <CheckCircle size={14} className="text-emerald-400" /> : <Copy size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
<p className={`text-xs mt-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
Beide Varianten bedienen nur die Kompressions-Queue — gerippt wird immer hier,
|
||||
wo das Laufwerk hängt. Voraussetzung: die Maschine erreicht diesen Rippy-Host im Netz.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Beide Varianten bedienen nur die Kompressions-Queue — gerippt wird immer hier, wo das Laufwerk hängt.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Disc } from 'lucide-react'
|
||||
import { STATUS_STYLES, DISC_TYPE_STYLES } from '../../lib/design'
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function StatusBadge({ status, className = '' }: StatusBadgeProps) {
|
||||
const config = STATUS_STYLES[status as keyof typeof STATUS_STYLES] || {
|
||||
badge: 'bg-slate-500/15 text-slate-400 border-slate-500/30',
|
||||
label: status,
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${config.badge} ${className}`}>
|
||||
{config.label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
interface TypeBadgeProps {
|
||||
type: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function TypeBadge({ type, className = '' }: TypeBadgeProps) {
|
||||
const config = DISC_TYPE_STYLES[type as keyof typeof DISC_TYPE_STYLES] || {
|
||||
badge: 'bg-slate-500/15 text-slate-400 border-slate-500/30',
|
||||
label: type.toUpperCase(),
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium border ${config.badge} ${className}`}>
|
||||
<Disc size={13} />
|
||||
{config.label}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { ButtonHTMLAttributes, ReactNode } from 'react'
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'amber'
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
children: ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Button({
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
children,
|
||||
className = '',
|
||||
disabled,
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
const base = 'inline-flex items-center justify-center font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98]'
|
||||
|
||||
const variants = {
|
||||
primary: 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/25 dark:shadow-indigo-900/40 focus:ring-indigo-500',
|
||||
amber: 'bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-slate-950 font-semibold shadow-lg shadow-amber-500/20 focus:ring-amber-500',
|
||||
secondary: 'bg-slate-100 dark:bg-slate-800/80 hover:bg-slate-200 dark:hover:bg-slate-700/80 text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700/80 focus:ring-slate-400',
|
||||
ghost: 'bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800/60 text-slate-600 dark:text-slate-300 focus:ring-slate-400',
|
||||
danger: 'bg-rose-600/90 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20 focus:ring-rose-500',
|
||||
}
|
||||
|
||||
const sizes = {
|
||||
sm: 'px-2.5 py-1.5 text-xs gap-1.5',
|
||||
md: 'px-4 py-2 text-sm gap-2',
|
||||
lg: 'px-5 py-2.5 text-base gap-2.5',
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${base} ${variants[variant]} ${sizes[size]} ${className}`}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface CardProps {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
glow?: boolean
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
export function Card({ children, className = '', glow = false, onClick }: CardProps) {
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`rounded-2xl border transition-all duration-300 ${
|
||||
glow ? 'shadow-[0_0_30px_-5px_rgba(245,158,11,0.15)] border-amber-500/30' : 'shadow-lg shadow-black/5 border-slate-200/80 dark:border-slate-800/80'
|
||||
} bg-white/90 dark:bg-slate-900/80 backdrop-blur-md text-slate-900 dark:text-slate-100 ${
|
||||
onClick ? 'cursor-pointer hover:border-slate-300 dark:hover:border-slate-700 hover:shadow-xl' : ''
|
||||
} ${className}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CardHeader({ children, className = '' }: { children: ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={`px-6 py-4 border-b border-slate-200/80 dark:border-slate-800/80 flex items-center justify-between ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CardTitle({ children, className = '' }: { children: ReactNode; className?: string }) {
|
||||
return (
|
||||
<h2 className={`text-lg font-semibold tracking-tight text-slate-900 dark:text-slate-100 ${className}`}>
|
||||
{children}
|
||||
</h2>
|
||||
)
|
||||
}
|
||||
|
||||
export function CardContent({ children, className = '' }: { children: ReactNode; className?: string }) {
|
||||
return (
|
||||
<div className={`p-6 ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { InputHTMLAttributes, SelectHTMLAttributes, ReactNode } from 'react'
|
||||
|
||||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string
|
||||
error?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Input({ label, error, className = '', ...props }: InputProps) {
|
||||
return (
|
||||
<div className="space-y-1.5 w-full">
|
||||
{label && (
|
||||
<label className="block text-xs font-medium text-slate-700 dark:text-slate-300">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<input
|
||||
className={`w-full px-3.5 py-2 rounded-xl text-sm border bg-white dark:bg-slate-900/90 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-700/80 focus:outline-none focus:ring-2 focus:ring-amber-500/50 focus:border-amber-500 transition-colors duration-200 placeholder:text-slate-400 dark:placeholder:text-slate-600 ${
|
||||
error ? 'border-rose-500 ring-rose-500/20' : ''
|
||||
} ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
{error && <p className="text-xs text-rose-500">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
||||
label?: string
|
||||
children: ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Select({ label, children, className = '', ...props }: SelectProps) {
|
||||
return (
|
||||
<div className="space-y-1.5 w-full">
|
||||
{label && (
|
||||
<label className="block text-xs font-medium text-slate-700 dark:text-slate-300">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<select
|
||||
className={`w-full px-3.5 py-2 rounded-xl text-sm border bg-white dark:bg-slate-900/90 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-700/80 focus:outline-none focus:ring-2 focus:ring-amber-500/50 focus:border-amber-500 transition-colors duration-200 ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface ToggleProps {
|
||||
checked: boolean
|
||||
onChange: (checked: boolean) => void
|
||||
label?: string
|
||||
description?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export function Toggle({ checked, onChange, label, description, disabled }: ToggleProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between py-2">
|
||||
{(label || description) && (
|
||||
<div className="space-y-0.5">
|
||||
{label && <span className="text-sm font-medium text-slate-900 dark:text-slate-100">{label}</span>}
|
||||
{description && <p className="text-xs text-slate-500 dark:text-slate-400">{description}</p>}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 ${
|
||||
checked ? 'bg-amber-500' : 'bg-slate-200 dark:bg-slate-700'
|
||||
} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<span
|
||||
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
|
||||
checked ? 'translate-x-5' : 'translate-x-0'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { ReactNode, useEffect } from 'react'
|
||||
import { X } from 'lucide-react'
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
title?: string
|
||||
children: ReactNode
|
||||
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl'
|
||||
}
|
||||
|
||||
export function Modal({ isOpen, onClose, title, children, maxWidth = 'lg' }: ModalProps) {
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = 'unset'
|
||||
window.removeEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
}, [isOpen, onClose])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const maxWidening = {
|
||||
sm: 'max-w-sm',
|
||||
md: 'max-w-md',
|
||||
lg: 'max-w-lg',
|
||||
xl: 'max-w-xl',
|
||||
'2xl': 'max-w-2xl',
|
||||
'4xl': 'max-w-4xl',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 overflow-y-auto">
|
||||
{/* Glass Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-slate-950/70 backdrop-blur-md transition-opacity duration-300 animate-in fade-in"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Modal Dialog */}
|
||||
<div className={`relative w-full ${maxWidening[maxWidth]} bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-2xl shadow-black/40 overflow-hidden z-10 animate-in zoom-in-95 duration-200`}>
|
||||
{title && (
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-6">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string
|
||||
subtitle?: string
|
||||
action?: ReactNode
|
||||
}
|
||||
|
||||
export function PageHeader({ title, subtitle, action }: PageHeaderProps) {
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">{title}</h1>
|
||||
{subtitle && <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{subtitle}</p>}
|
||||
</div>
|
||||
{action && <div>{action}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+19
-49
@@ -2,57 +2,13 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--bg-color: #f8fafc;
|
||||
--bg-secondary: #f1f5f9;
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #64748b;
|
||||
--accent-color: #6366f1;
|
||||
--accent-hover: #4f46e5;
|
||||
--border-color: #e2e8f0;
|
||||
--card-bg: #ffffff;
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #e2e8f0;
|
||||
--success-color: #22c55e;
|
||||
--error-color: #ef4444;
|
||||
@layer base {
|
||||
body {
|
||||
@apply m-0 bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 font-sans antialiased selection:bg-amber-500/30 selection:text-amber-400;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-color: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--accent-color: #818cf8;
|
||||
--accent-hover: #6366f1;
|
||||
--border-color: #334155;
|
||||
--card-bg: #1e293b;
|
||||
--input-bg: #0f172a;
|
||||
--input-border: #334155;
|
||||
}
|
||||
|
||||
* {
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Toast-Einflug (ToastContext): von rechts reinploppen */
|
||||
/* Toast Einflug */
|
||||
@keyframes toast-rein {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -67,3 +23,17 @@ code {
|
||||
.toast-rein {
|
||||
animation: toast-rein 0.25s ease-out;
|
||||
}
|
||||
|
||||
/* Subtile Disc-Rotation für Cinematic Spotlight */
|
||||
@keyframes disc-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-disc-spin {
|
||||
animation: disc-spin 14s linear infinite;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
// Centralized Design System & Style Tokens for Rippy (Cinematic Cinema OS)
|
||||
|
||||
export const STATUS_STYLES = {
|
||||
pending: {
|
||||
badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/30',
|
||||
label: 'Wartend',
|
||||
},
|
||||
processing: {
|
||||
badge: 'bg-sky-500/15 text-sky-600 dark:text-sky-400 border-sky-500/30 animate-pulse',
|
||||
label: 'Rippen',
|
||||
},
|
||||
transcoding: {
|
||||
badge: 'bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-500/30',
|
||||
label: 'Komprimieren',
|
||||
},
|
||||
canceling: {
|
||||
badge: 'bg-orange-500/15 text-orange-600 dark:text-orange-400 border-orange-500/30',
|
||||
label: 'Wird abgebrochen…',
|
||||
},
|
||||
completed: {
|
||||
badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30',
|
||||
label: 'Fertig',
|
||||
},
|
||||
failed: {
|
||||
badge: 'bg-rose-500/15 text-rose-600 dark:text-rose-400 border-rose-500/30',
|
||||
label: 'Fehler',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const DISC_TYPE_STYLES = {
|
||||
cd: {
|
||||
badge: 'bg-indigo-500/15 text-indigo-600 dark:text-indigo-400 border-indigo-500/30',
|
||||
aura: 'from-indigo-500/20 via-indigo-900/10 to-transparent',
|
||||
glow: 'shadow-[0_0_20px_-5px_rgba(99,102,241,0.2)]',
|
||||
label: 'CD',
|
||||
},
|
||||
dvd: {
|
||||
badge: 'bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-500/30',
|
||||
aura: 'from-purple-500/20 via-purple-900/10 to-transparent',
|
||||
glow: 'shadow-[0_0_20px_-5px_rgba(168,85,247,0.2)]',
|
||||
label: 'DVD',
|
||||
},
|
||||
bluray: {
|
||||
badge: 'bg-sky-500/15 text-sky-600 dark:text-sky-400 border-sky-500/30',
|
||||
aura: 'from-sky-500/20 via-sky-900/10 to-transparent',
|
||||
glow: 'shadow-[0_0_20px_-5px_rgba(14,165,233,0.2)]',
|
||||
label: 'BLU-RAY',
|
||||
},
|
||||
uhd: {
|
||||
badge: 'bg-amber-500/20 text-amber-700 dark:text-amber-300 border-amber-500/40 font-semibold shadow-sm shadow-amber-500/20',
|
||||
aura: 'from-amber-500/25 via-amber-900/15 to-transparent',
|
||||
glow: 'shadow-[0_0_25px_-5px_rgba(245,158,11,0.25)]',
|
||||
label: '4K UHD',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const LOG_LEVEL_STYLES = {
|
||||
INFO: {
|
||||
color: 'text-sky-600 dark:text-sky-400',
|
||||
bg: 'bg-sky-500/10',
|
||||
border: 'border-sky-500/20',
|
||||
},
|
||||
WARNING: {
|
||||
color: 'text-amber-600 dark:text-amber-400',
|
||||
bg: 'bg-amber-500/10',
|
||||
border: 'border-amber-500/20',
|
||||
},
|
||||
ERROR: {
|
||||
color: 'text-rose-600 dark:text-rose-400',
|
||||
bg: 'bg-rose-500/10',
|
||||
border: 'border-rose-500/20',
|
||||
},
|
||||
DEBUG: {
|
||||
color: 'text-slate-500 dark:text-slate-400',
|
||||
bg: 'bg-slate-500/10',
|
||||
border: 'border-slate-500/20',
|
||||
},
|
||||
} as const
|
||||
|
||||
export const ENCODER_BADGES: Record<string, { label: string; highlight: boolean }> = {
|
||||
'cpu-x264': { label: 'H.264 (CPU)', highlight: false },
|
||||
'cpu-x265': { label: 'H.265 (CPU)', highlight: false },
|
||||
'vaapi': { label: 'VAAPI ⚡', highlight: true },
|
||||
'nvenc': { label: 'NVENC ⚡', highlight: true },
|
||||
}
|
||||
@@ -1,37 +1,33 @@
|
||||
import { ReactNode } from 'react'
|
||||
import { BookOpen, Disc, Tv, HardDrive, Bell, Wrench, Cpu, Download, HelpCircle } from 'lucide-react'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
|
||||
// Anleitungs-Tab (Commander-Wunsch 24.07.): Rippy erklärt sich selbst —
|
||||
// keine externen Wikis, keine README-Suche. Reiner Text, keine API-Aufrufe.
|
||||
import { Disc, Tv, HardDrive, Bell, Wrench, Cpu, Download, HelpCircle } from 'lucide-react'
|
||||
import { PageHeader } from '../components/ui/PageHeader'
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/Card'
|
||||
|
||||
function Abschnitt({ icon: Icon, titel, children }: { icon: any, titel: string, children: ReactNode }) {
|
||||
const { theme } = useDarkMode()
|
||||
return (
|
||||
<section className={`rounded-xl border p-6 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<h2 className={`text-lg font-semibold mb-3 flex items-center gap-2 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<Icon size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
|
||||
{titel}
|
||||
</h2>
|
||||
<div className={`space-y-2 text-sm leading-relaxed ${theme === 'dark' ? 'text-slate-300' : 'text-slate-600'}`}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2.5">
|
||||
<Icon size={20} className="text-amber-500" />
|
||||
<span>{titel}</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AnleitungPage() {
|
||||
const { theme } = useDarkMode()
|
||||
const fett = theme === 'dark' ? 'text-slate-100 font-medium' : 'text-slate-900 font-medium'
|
||||
const fett = "font-semibold text-slate-900 dark:text-slate-100"
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-4xl transition-colors duration-300">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Anleitung</h1>
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
So funktioniert Rippy — vom Einlegen bis zum fertigen Film in deinem Media-Server.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-6 max-w-4xl">
|
||||
<PageHeader
|
||||
title="Anleitung & Hilfe"
|
||||
subtitle="So funktioniert Rippy — vom Einlegen der Disc bis zum fertigen Film in deinem Media-Server"
|
||||
/>
|
||||
|
||||
<Abschnitt icon={Disc} titel="Der normale Weg: Disc rein, fertig">
|
||||
<p>
|
||||
|
||||
+193
-255
@@ -1,12 +1,16 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Clock, Activity, AlertCircle, CheckCircle, Disc, Download, FileSpreadsheet, HardDrive, Trash2 } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { PageHeader } from '../components/ui/PageHeader'
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/Card'
|
||||
import { Button } from '../components/ui/Button'
|
||||
import { StatusBadge, TypeBadge } from '../components/ui/Badge'
|
||||
import ConfirmDialog from '../components/ConfirmDialog'
|
||||
import DeviceDiscovery from '../components/DeviceDiscovery'
|
||||
import JobDetailModal from '../components/JobDetailModal'
|
||||
import LiveLogSection from '../components/LiveLogSection'
|
||||
import { ENCODER_BADGES } from '../lib/design'
|
||||
|
||||
interface Job {
|
||||
id: string
|
||||
@@ -29,105 +33,19 @@ async function fetchJobs(): Promise<Job[]> {
|
||||
}
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: string }) {
|
||||
const { theme } = useDarkMode()
|
||||
const styles = theme === 'dark'
|
||||
? {
|
||||
pending: 'bg-amber-900/30 text-amber-400 ring-amber-700/20',
|
||||
processing: 'bg-blue-900/30 text-blue-400 ring-blue-700/20',
|
||||
transcoding: 'bg-purple-900/30 text-purple-400 ring-purple-700/20',
|
||||
canceling: 'bg-orange-900/30 text-orange-400 ring-orange-700/20',
|
||||
completed: 'bg-emerald-900/30 text-emerald-400 ring-emerald-700/20',
|
||||
failed: 'bg-rose-900/30 text-rose-400 ring-rose-700/20',
|
||||
}
|
||||
: {
|
||||
pending: 'bg-amber-100 text-amber-700 ring-amber-600/20',
|
||||
processing: 'bg-blue-100 text-blue-700 ring-blue-600/20',
|
||||
transcoding: 'bg-purple-100 text-purple-700 ring-purple-600/20',
|
||||
canceling: 'bg-orange-100 text-orange-700 ring-orange-600/20',
|
||||
completed: 'bg-emerald-100 text-emerald-700 ring-emerald-600/20',
|
||||
failed: 'bg-rose-100 text-rose-700 ring-rose-600/20',
|
||||
}
|
||||
|
||||
const labels = {
|
||||
pending: 'Wartend',
|
||||
processing: 'Rippen',
|
||||
transcoding: 'Komprimieren',
|
||||
canceling: 'Wird abgebrochen…',
|
||||
completed: 'Fertig',
|
||||
failed: 'Fehler',
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ring-1 ring-inset ${styles[status as keyof typeof styles] || 'bg-gray-100 text-gray-700 ring-gray-600/10'}`}>
|
||||
{labels[status as keyof typeof labels] || status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function TypeBadge({ type }: { type: string }) {
|
||||
const { theme } = useDarkMode()
|
||||
// 4K UHD sichtbar abheben (Commander-Wunsch 24.07.) — es IST eine Blu-ray,
|
||||
// aber der Unterschied (Laufwerk! Größe!) muss auf einen Blick erkennbar sein.
|
||||
const colors: Record<string, string> = theme === 'dark'
|
||||
? {
|
||||
cd: 'bg-blue-900/30 text-blue-400',
|
||||
dvd: 'bg-purple-900/30 text-purple-400',
|
||||
bluray: 'bg-pink-900/30 text-pink-400',
|
||||
uhd: 'bg-amber-900/30 text-amber-400',
|
||||
}
|
||||
: {
|
||||
cd: 'bg-blue-100 text-blue-600',
|
||||
dvd: 'bg-purple-100 text-purple-600',
|
||||
bluray: 'bg-pink-100 text-pink-600',
|
||||
uhd: 'bg-amber-100 text-amber-700',
|
||||
}
|
||||
const labels: Record<string, string> = {
|
||||
cd: 'CD', dvd: 'DVD', bluray: 'BLU-RAY', uhd: '4K UHD',
|
||||
}
|
||||
const fallback = theme === 'dark' ? 'bg-slate-800 text-slate-300' : 'bg-slate-100 text-slate-700'
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium ${colors[type] || fallback}`}>
|
||||
<Disc size={14} />
|
||||
{labels[type] || type.toUpperCase()}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function ProgressBar({ progress }: { progress: number }) {
|
||||
const { theme } = useDarkMode()
|
||||
const bgColors = theme === 'dark'
|
||||
? {
|
||||
empty: 'bg-slate-700',
|
||||
indicator: 'bg-gradient-to-r from-indigo-500 to-purple-600',
|
||||
done: 'bg-emerald-500',
|
||||
}
|
||||
: {
|
||||
empty: 'bg-slate-200',
|
||||
indicator: 'bg-gradient-to-r from-indigo-500 to-purple-600',
|
||||
done: 'bg-emerald-500',
|
||||
}
|
||||
|
||||
const textColors = theme === 'dark'
|
||||
? {
|
||||
label: 'text-slate-400',
|
||||
value: 'text-slate-200',
|
||||
}
|
||||
: {
|
||||
label: 'text-slate-500',
|
||||
value: 'text-slate-900',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-32">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className={`text-xs font-medium ${textColors.label}`}>Fortschritt</span>
|
||||
<span className={`text-xs font-medium ${textColors.value}`}>{progress}%</span>
|
||||
<span className="text-xs font-medium text-slate-500 dark:text-slate-400">Fortschritt</span>
|
||||
<span className="text-xs font-mono font-semibold text-slate-900 dark:text-slate-200">{progress}%</span>
|
||||
</div>
|
||||
<div className={`w-full ${bgColors.empty} rounded-full h-2 overflow-hidden`}>
|
||||
<div className="w-full bg-slate-200 dark:bg-slate-800 rounded-full h-2 overflow-hidden border border-slate-300/30 dark:border-slate-700/30">
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all duration-500 ease-out ${
|
||||
progress === 100 ? bgColors.done : bgColors.indicator
|
||||
progress === 100
|
||||
? 'bg-emerald-500 shadow-sm shadow-emerald-500/50'
|
||||
: 'bg-gradient-to-r from-amber-500 via-indigo-500 to-purple-600 shadow-sm shadow-indigo-500/50'
|
||||
}`}
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
@@ -141,13 +59,6 @@ interface WorkerInfo {
|
||||
encoders: string[]
|
||||
}
|
||||
|
||||
const ENCODER_KURZ: Record<string, string> = {
|
||||
'cpu-x264': 'H.264 (CPU)',
|
||||
'cpu-x265': 'H.265 (CPU)',
|
||||
'vaapi': 'VAAPI ⚡',
|
||||
'nvenc': 'NVENC ⚡',
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const [jobs, setJobs] = useState<Job[]>([])
|
||||
const [workers, setWorkers] = useState<WorkerInfo[]>([])
|
||||
@@ -155,7 +66,6 @@ export default function Dashboard() {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [detailJobId, setDetailJobId] = useState<string | null>(null)
|
||||
const [aufraeumenOffen, setAufraeumenOffen] = useState(false)
|
||||
const { theme } = useDarkMode()
|
||||
const { toast } = useToast()
|
||||
|
||||
const jobLoeschen = async (job: Job) => {
|
||||
@@ -207,153 +117,219 @@ export default function Dashboard() {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8 transition-colors duration-300">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-2 transition-colors duration-300">
|
||||
<h1 className="text-3xl font-bold dark:text-slate-100 text-slate-900">Dashboard</h1>
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Übersicht über alle Ripping-Jobs und Geräte</p>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<PageHeader
|
||||
title="Dashboard"
|
||||
subtitle="Übersicht über alle Ripping-Jobs, Geräte und Systemauslastung"
|
||||
/>
|
||||
|
||||
{/* System-Leiste: Encoder + aktiver Job auf einen Blick */}
|
||||
<div className={`flex flex-wrap items-center gap-x-6 gap-y-2 rounded-xl border px-5 py-3 text-sm ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity size={16} className="text-indigo-500" />
|
||||
<span className={theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}>Encoder:</span>
|
||||
{workers.length === 0 ? (
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>kein Worker</span>
|
||||
) : (
|
||||
workers.flatMap(w => w.encoders).filter((e, i, a) => a.indexOf(e) === i).map(e => (
|
||||
<span key={e} className={`text-xs px-2 py-0.5 rounded ${e.startsWith('cpu') ? (theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-100 text-slate-600') : 'bg-emerald-600/20 text-emerald-500 font-medium'}`}>
|
||||
{ENCODER_KURZ[e] || e}
|
||||
{/* Cinematic Spotlight Card für aktiven Rip/Transcode */}
|
||||
{aktiverJob && (
|
||||
<Card glow className="relative overflow-hidden border-amber-500/40 bg-gradient-to-r from-amber-500/15 via-slate-900 to-slate-950 p-6 shadow-2xl">
|
||||
<div className="flex flex-col md:flex-row items-center gap-6">
|
||||
<div className="relative flex-shrink-0">
|
||||
<div className="w-24 h-24 rounded-full bg-gradient-to-br from-amber-500 via-indigo-600 to-purple-600 flex items-center justify-center p-1 shadow-xl shadow-amber-500/20 animate-disc-spin">
|
||||
<div className="w-full h-full rounded-full border-4 border-dashed border-white/40 flex items-center justify-center">
|
||||
<Disc size={36} className="text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="absolute -top-1 -right-1 flex h-4 w-4">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-4 w-4 bg-amber-500"></span>
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={16} className="text-indigo-500" />
|
||||
<span className={theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}>Aktiv:</span>
|
||||
{aktiverJob ? (
|
||||
<span className={theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}>
|
||||
{aktiverJob.status === 'transcoding' ? 'Komprimieren' : 'Rippen'} · {aktiverJob.progress} %
|
||||
</span>
|
||||
) : (
|
||||
<span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>kein Job</span>
|
||||
)}
|
||||
</div>
|
||||
{plaetze.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<HardDrive size={16} className="text-indigo-500" />
|
||||
<span className={theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}>Frei:</span>
|
||||
{plaetze.map(p => (
|
||||
<span
|
||||
key={p.name}
|
||||
title={`${p.name}: ${p.frei_gb} von ${p.gesamt_gb} GB frei`}
|
||||
className={`text-xs px-2 py-0.5 rounded ${p.frei_gb < 60 ? 'bg-amber-600/20 text-amber-500 font-medium' : theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-100 text-slate-600'}`}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0 text-center md:text-left space-y-2">
|
||||
<div className="flex items-center justify-center md:justify-start gap-2 flex-wrap">
|
||||
<span className="px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wider bg-amber-500/20 text-amber-300 border border-amber-500/30">
|
||||
{aktiverJob.status === 'transcoding' ? 'Komprimieren' : 'Rippen'} aktiv
|
||||
</span>
|
||||
<TypeBadge type={aktiverJob.type} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-100 truncate">
|
||||
{aktiverJob.title || 'Aktiver Job'}
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400">
|
||||
Gerät: <span className="font-mono text-slate-300">{aktiverJob.device}</span> · Gestartet: {new Date(aktiverJob.startTime).toLocaleTimeString('de-DE')}
|
||||
</p>
|
||||
|
||||
<div className="pt-2">
|
||||
<div className="flex items-center justify-between text-xs font-medium text-slate-300 mb-1">
|
||||
<span>{aktiverJob.status === 'transcoding' ? 'HandBrake Kompression' : 'MakeMKV Extraktion'}</span>
|
||||
<span className="font-mono font-bold text-amber-400">{aktiverJob.progress}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-slate-950/80 rounded-full h-2.5 overflow-hidden border border-amber-500/30">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-amber-500 via-indigo-500 to-purple-500 transition-all duration-500 ease-out shadow-lg shadow-amber-500/50"
|
||||
style={{ width: `${aktiverJob.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 flex-shrink-0">
|
||||
<Button variant="secondary" size="sm" onClick={() => setDetailJobId(aktiverJob.id)}>
|
||||
Details
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => api.post(`/jobs/${aktiverJob.id}/cancel`).catch(() => {})}
|
||||
>
|
||||
{p.name.startsWith('Media') ? 'Media' : 'Arbeit'} {p.frei_gb} GB
|
||||
</span>
|
||||
))}
|
||||
Abbrechen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Laufwerke + erkannte Disc */}
|
||||
{/* System-Telemetrie Leiste */}
|
||||
<Card>
|
||||
<CardContent className="p-4 flex flex-wrap items-center gap-x-8 gap-y-3 text-sm">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Activity size={17} className="text-amber-500" />
|
||||
<span className="text-slate-500 dark:text-slate-400 font-medium">Encoder:</span>
|
||||
{workers.length === 0 ? (
|
||||
<span className="text-slate-400 dark:text-slate-500 italic">kein Worker</span>
|
||||
) : (
|
||||
workers.flatMap(w => w.encoders).filter((e, i, a) => a.indexOf(e) === i).map(e => (
|
||||
<span key={e} className={`text-xs px-2.5 py-0.5 rounded-md font-medium border ${
|
||||
e.startsWith('cpu')
|
||||
? 'bg-slate-200/80 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-700'
|
||||
: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30'
|
||||
}`}>
|
||||
{ENCODER_BADGES[e]?.label || e}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Clock size={17} className="text-amber-500" />
|
||||
<span className="text-slate-500 dark:text-slate-400 font-medium">Aktiv:</span>
|
||||
{aktiverJob ? (
|
||||
<span className="text-slate-900 dark:text-slate-200 font-medium">
|
||||
{aktiverJob.status === 'transcoding' ? 'Komprimieren' : 'Rippen'} · {aktiverJob.progress} %
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-slate-400 dark:text-slate-500 italic">kein Job</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{plaetze.length > 0 && (
|
||||
<div className="flex items-center gap-2.5 ml-auto">
|
||||
<HardDrive size={17} className="text-amber-500" />
|
||||
<span className="text-slate-500 dark:text-slate-400 font-medium">Frei:</span>
|
||||
{plaetze.map(p => (
|
||||
<span
|
||||
key={p.name}
|
||||
title={`${p.name}: ${p.frei_gb} von ${p.gesamt_gb} GB frei`}
|
||||
className={`text-xs px-2.5 py-0.5 rounded-md font-mono border ${
|
||||
p.frei_gb < 60
|
||||
? 'bg-amber-500/20 text-amber-700 dark:text-amber-300 border-amber-500/30 font-semibold'
|
||||
: 'bg-slate-200/80 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-700'
|
||||
}`}
|
||||
>
|
||||
{p.name.startsWith('Media') ? 'Media' : 'Arbeit'} {p.frei_gb} GB
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Laufwerke & Erkennung */}
|
||||
<DeviceDiscovery />
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 transition-colors duration-300">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={Clock}
|
||||
label="Warteschlange"
|
||||
value={stats.pending.toString()}
|
||||
color="amber"
|
||||
darkMode={theme === 'dark'}
|
||||
badgeStyle="bg-amber-500/15 text-amber-500 border-amber-500/20"
|
||||
/>
|
||||
<StatCard
|
||||
icon={Activity}
|
||||
label="Bearbeitung"
|
||||
value={stats.processing.toString()}
|
||||
color="blue"
|
||||
darkMode={theme === 'dark'}
|
||||
badgeStyle="bg-sky-500/15 text-sky-500 border-sky-500/20"
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle}
|
||||
label="Fertig"
|
||||
value={stats.completed.toString()}
|
||||
color="emerald"
|
||||
darkMode={theme === 'dark'}
|
||||
badgeStyle="bg-emerald-500/15 text-emerald-500 border-emerald-500/20"
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertCircle}
|
||||
label="Fehler"
|
||||
value={stats.failed.toString()}
|
||||
color="rose"
|
||||
darkMode={theme === 'dark'}
|
||||
badgeStyle="bg-rose-500/15 text-rose-500 border-rose-500/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recent Jobs */}
|
||||
{/* Schnellaktionen + doppelte Geräte-Sektion sind raus (23.07.): alle
|
||||
vier Knöpfe und der zweite Details-Button waren funktionslos —
|
||||
die echte Geräte-Steuerung lebt in DeviceDiscovery oben. */}
|
||||
<div className={`rounded-xl shadow-sm border overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex items-center justify-between`}>
|
||||
<h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Neueste Jobs</h2>
|
||||
{/* Recent Jobs Table */}
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<CardTitle>Neueste Jobs</CardTitle>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{jobs.length} Jobs insgesamt</span>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">{jobs.length} Jobs insgesamt</span>
|
||||
{jobs.length > 0 && (
|
||||
<a
|
||||
href="/api/jobs/export"
|
||||
download
|
||||
title="Job-Historie als CSV herunterladen (öffnet in Excel)"
|
||||
className={`inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-lg transition-colors ${theme === 'dark' ? 'bg-slate-700 text-slate-300 hover:bg-slate-600' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
||||
className="inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
<FileSpreadsheet size={13} />
|
||||
CSV
|
||||
</a>
|
||||
)}
|
||||
{jobs.some(j => j.status === 'completed' || j.status === 'failed') && (
|
||||
<button
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setAufraeumenOffen(true)}
|
||||
title="Alle fertigen und fehlgeschlagenen Jobs aus der Liste entfernen (Dateien bleiben)"
|
||||
className={`inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-lg transition-colors ${theme === 'dark' ? 'bg-slate-700 text-slate-300 hover:bg-slate-600' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
||||
title="Alle fertigen und fehlgeschlagenen Jobs aus der Liste entfernen"
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
Erledigte aufräumen
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto transition-colors duration-300">
|
||||
<table className="w-full transition-colors duration-300">
|
||||
<thead className={theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}>
|
||||
</CardHeader>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-50 dark:bg-slate-950/80 border-b border-slate-200/80 dark:border-slate-800">
|
||||
<tr>
|
||||
<th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Typ</th>
|
||||
<th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Titel</th>
|
||||
<th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Status</th>
|
||||
<th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Gerät</th>
|
||||
<th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Fortschritt</th>
|
||||
<th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Startzeit</th>
|
||||
<th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Aktion</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Typ</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Titel</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Status</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Gerät</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Fortschritt</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Startzeit</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className={`divide-y ${theme === 'dark' ? 'divide-slate-700' : 'divide-slate-200'}`}>
|
||||
<tbody className="divide-y divide-slate-200/80 dark:divide-slate-800">
|
||||
{jobs.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="px-6 py-12 text-center transition-colors duration-300">
|
||||
<div className={`mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-400'}`}>Noch keine Jobs</div>
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Füge eine CD, DVD oder Blu-ray hinzu, um zu starten</p>
|
||||
<td colSpan={7} className="px-6 py-12 text-center">
|
||||
<div className="mb-1 font-semibold text-slate-500 dark:text-slate-400">Noch keine Jobs</div>
|
||||
<p className="text-sm text-slate-400 dark:text-slate-500">Füge eine CD, DVD oder Blu-ray hinzu, um zu starten</p>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
jobs.slice(0, 10).map(job => (
|
||||
<tr key={job.id} className={`transition-colors duration-300 ${theme === 'dark' ? 'hover:bg-slate-700/40' : 'hover:bg-slate-50'}`}>
|
||||
<tr key={job.id} className="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/40">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<TypeBadge type={job.type} />
|
||||
</td>
|
||||
@@ -361,7 +337,7 @@ export default function Dashboard() {
|
||||
<button
|
||||
onClick={() => setDetailJobId(job.id)}
|
||||
title="Details zu diesem Titel anzeigen"
|
||||
className={`text-sm font-medium text-left hover:underline transition-colors ${theme === 'dark' ? 'text-slate-100 hover:text-indigo-300' : 'text-slate-900 hover:text-indigo-600'}`}
|
||||
className="text-sm font-medium text-left hover:underline text-slate-900 dark:text-slate-100 hover:text-amber-500 dark:hover:text-amber-400 transition-colors"
|
||||
>
|
||||
{job.title || 'Unbekannt'}
|
||||
</button>
|
||||
@@ -369,58 +345,59 @@ export default function Dashboard() {
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<StatusBadge status={job.status} />
|
||||
</td>
|
||||
<td className={`px-6 py-4 whitespace-nowrap text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-500 dark:text-slate-400">
|
||||
{job.device}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<ProgressBar progress={job.progress} />
|
||||
</td>
|
||||
<td className={`px-6 py-4 whitespace-nowrap text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-500 dark:text-slate-400">
|
||||
{new Date(job.startTime).toLocaleString('de-DE')}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{job.status === 'completed' && (
|
||||
<button
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => setDetailJobId(job.id)}
|
||||
title="Fertige Dateien herunterladen (öffnet die Job-Details)"
|
||||
className={`inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-lg transition-colors ${theme === 'dark' ? 'bg-slate-700 text-emerald-300 hover:bg-slate-600' : 'bg-slate-100 text-emerald-700 hover:bg-slate-200'}`}
|
||||
title="Fertige Dateien herunterladen (öffnet Job-Details)"
|
||||
>
|
||||
<Download size={13} />
|
||||
<Download size={13} className="text-emerald-500" />
|
||||
Download
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{/* Nur wenn Rohdaten wirklich daliegen — an einem Job,
|
||||
der nie gerippt hat, war der Knopf Unsinn */}
|
||||
{job.status === 'failed' && job.can_retry && (
|
||||
<button
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
api.post(`/jobs/${job.id}/retry-transcode`)
|
||||
.then(() => toast('success', 'Kompression neu eingereiht'))
|
||||
.catch((e: any) => toast('error', e?.response?.data?.detail || 'Neu anstoßen fehlgeschlagen'))
|
||||
}}
|
||||
title="Kompression neu anstoßen (Rohdatei bleibt nach Fehlschlägen erhalten)"
|
||||
className={`text-xs font-medium px-3 py-1.5 rounded-lg transition-colors ${theme === 'dark' ? 'bg-slate-700 text-indigo-300 hover:bg-slate-600' : 'bg-slate-100 text-indigo-700 hover:bg-slate-200'}`}
|
||||
title="Kompression neu anstoßen"
|
||||
>
|
||||
Neu komprimieren
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{(job.status === 'completed' || job.status === 'failed') && (
|
||||
<button
|
||||
onClick={() => jobLoeschen(job)}
|
||||
title="Job aus der Liste entfernen — fertige Dateien bleiben liegen"
|
||||
className={`ml-2 p-1.5 rounded-lg transition-colors text-rose-500 ${theme === 'dark' ? 'hover:bg-slate-700' : 'hover:bg-slate-100'}`}
|
||||
title="Job aus der Liste entfernen"
|
||||
className="ml-2 p-1.5 rounded-lg text-rose-500 hover:bg-rose-500/10 transition-colors"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
{(job.status === 'pending' || job.status === 'processing' || job.status === 'transcoding') && (
|
||||
<button
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => api.post(`/jobs/${job.id}/cancel`).catch(() => {})}
|
||||
title="Job abbrechen (Rohdaten bleiben erhalten)"
|
||||
className={`text-xs font-medium px-3 py-1.5 rounded-lg transition-colors ${theme === 'dark' ? 'bg-slate-700 text-rose-300 hover:bg-slate-600' : 'bg-slate-100 text-rose-700 hover:bg-slate-200'}`}
|
||||
title="Job abbrechen"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -429,12 +406,10 @@ export default function Dashboard() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Live-Log ganz unten — Detail-Ansicht, nicht Haupt-Info */}
|
||||
<LiveLogSection />
|
||||
|
||||
{/* Klick auf einen Job-Titel: Film-/Serien-Info + Job-Fakten */}
|
||||
<JobDetailModal jobId={detailJobId} onClose={() => setDetailJobId(null)} />
|
||||
|
||||
<ConfirmDialog
|
||||
@@ -450,55 +425,18 @@ export default function Dashboard() {
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({ icon: Icon, label, value, color, darkMode }: { icon: any, label: string, value: string, color: string, darkMode: boolean }) {
|
||||
const { theme } = useDarkMode()
|
||||
const bgColors = darkMode
|
||||
? {
|
||||
card: 'bg-slate-800 border-slate-700',
|
||||
iconBg: {
|
||||
amber: 'bg-amber-700',
|
||||
blue: 'bg-blue-700',
|
||||
emerald: 'bg-emerald-700',
|
||||
rose: 'bg-rose-700',
|
||||
},
|
||||
iconText: {
|
||||
amber: 'text-amber-300',
|
||||
blue: 'text-blue-300',
|
||||
emerald: 'text-emerald-300',
|
||||
rose: 'text-rose-300',
|
||||
},
|
||||
textLabel: 'text-slate-400',
|
||||
textValue: 'text-slate-200',
|
||||
}
|
||||
: {
|
||||
card: 'bg-white border-slate-200',
|
||||
iconBg: {
|
||||
amber: 'bg-amber-500',
|
||||
blue: 'bg-blue-500',
|
||||
emerald: 'bg-emerald-500',
|
||||
rose: 'bg-rose-500',
|
||||
},
|
||||
iconText: {
|
||||
amber: 'text-amber-600',
|
||||
blue: 'text-blue-600',
|
||||
emerald: 'text-emerald-600',
|
||||
rose: 'text-rose-600',
|
||||
},
|
||||
textLabel: 'text-slate-500',
|
||||
textValue: 'text-slate-900',
|
||||
}
|
||||
|
||||
function StatCard({ icon: Icon, label, value, badgeStyle }: { icon: any, label: string, value: string, badgeStyle: string }) {
|
||||
return (
|
||||
<div className={`${bgColors.card} rounded-xl shadow-sm border p-6 hover:shadow-md transition-shadow`}>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`${bgColors.iconBg[color as keyof typeof bgColors.iconBg]} p-3 rounded-lg`}>
|
||||
<Icon className={`${bgColors.iconText[color as keyof typeof bgColors.iconText]} w-6 h-6`} />
|
||||
<Card>
|
||||
<CardContent className="p-5 flex items-center gap-4">
|
||||
<div className={`p-3 rounded-xl border ${badgeStyle}`}>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-sm font-medium ${bgColors.textLabel}`}>{label}</p>
|
||||
<p className={`text-3xl font-bold ${bgColors.textValue}`}>{value}</p>
|
||||
<p className="text-xs font-medium text-slate-500 dark:text-slate-400">{label}</p>
|
||||
<p className="text-3xl font-bold text-slate-900 dark:text-slate-100">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
+93
-126
@@ -1,8 +1,10 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Terminal, AlertCircle, CheckCircle, RefreshCw } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
import { PageHeader } from '../components/ui/PageHeader'
|
||||
import { Card, CardContent } from '../components/ui/Card'
|
||||
import { Button } from '../components/ui/Button'
|
||||
|
||||
interface LogEntry {
|
||||
id: string
|
||||
@@ -18,12 +20,9 @@ export default function LogsPage() {
|
||||
const [filter, setFilter] = useState<string>('all')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const { theme } = useDarkMode()
|
||||
const { toast } = useToast()
|
||||
|
||||
const refreshLogs = async (manuell = false) => {
|
||||
// Echte Ereignisse aus der Datenbank — die Mock-Einträge („The Matrix
|
||||
// gerippt") sind raus. Was hier steht, ist passiert; sonst ist es leer.
|
||||
if (manuell) setRefreshing(true)
|
||||
try {
|
||||
const response = await api.get('/logs', { params: { limit: 200 } })
|
||||
@@ -46,19 +45,19 @@ export default function LogsPage() {
|
||||
|
||||
const getLevelColor = (level: string) => {
|
||||
switch (level) {
|
||||
case 'error': return theme === 'dark' ? 'bg-rose-900/30 text-rose-400 border-rose-700/20' : 'bg-rose-100 text-rose-700 border-rose-600/20'
|
||||
case 'warning': return theme === 'dark' ? 'bg-amber-900/30 text-amber-400 border-amber-700/20' : 'bg-amber-100 text-amber-700 border-amber-600/20'
|
||||
case 'success': return theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400 border-emerald-700/20' : 'bg-emerald-100 text-emerald-700 border-emerald-600/20'
|
||||
default: return theme === 'dark' ? 'bg-blue-900/30 text-blue-400 border-blue-700/20' : 'bg-blue-100 text-blue-700 border-blue-600/20'
|
||||
case 'error': return 'bg-rose-500/15 text-rose-600 dark:text-rose-400 border-rose-500/30'
|
||||
case 'warning': return 'bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/30'
|
||||
case 'success': return 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30'
|
||||
default: return 'bg-sky-500/15 text-sky-600 dark:text-sky-400 border-sky-500/30'
|
||||
}
|
||||
}
|
||||
|
||||
const getLevelIcon = (level: string) => {
|
||||
switch (level) {
|
||||
case 'error': return <AlertCircle size={16} />
|
||||
case 'warning': return <AlertCircle size={16} />
|
||||
case 'success': return <CheckCircle size={16} />
|
||||
default: return <Terminal size={16} />
|
||||
case 'error': return <AlertCircle size={15} />
|
||||
case 'warning': return <AlertCircle size={15} />
|
||||
case 'success': return <CheckCircle size={15} />
|
||||
default: return <Terminal size={15} />
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,153 +82,121 @@ export default function LogsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 transition-colors duration-300">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-2 transition-colors duration-300">
|
||||
<h1 className="text-3xl font-bold dark:text-slate-100 text-slate-900">Logs</h1>
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Alle relevanten Log-Informationen des Ripping-Systems</p>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="System-Logs"
|
||||
subtitle="Alle relevanten Ereignisse und Protokolle des Ripping-Systems auf einen Blick"
|
||||
action={
|
||||
<Button variant="secondary" onClick={() => refreshLogs(true)}>
|
||||
<RefreshCw size={15} className={loading || refreshing ? 'animate-spin' : ''} />
|
||||
Neu laden
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 transition-colors duration-300">
|
||||
<div className={`rounded-lg p-4 border transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-blue-500/10 text-blue-500">
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="p-4 flex items-center gap-3">
|
||||
<div className="p-2.5 rounded-xl bg-sky-500/15 text-sky-500 border border-sky-500/20">
|
||||
<Terminal size={18} />
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Info</span>
|
||||
</div>
|
||||
<p className={`text-2xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>{stats.info}</p>
|
||||
</div>
|
||||
<div className={`rounded-lg p-4 border transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-amber-500/10 text-amber-500">
|
||||
<div>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400 font-medium">Info</span>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stats.info}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4 flex items-center gap-3">
|
||||
<div className="p-2.5 rounded-xl bg-amber-500/15 text-amber-500 border border-amber-500/20">
|
||||
<AlertCircle size={18} />
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Warnung</span>
|
||||
</div>
|
||||
<p className={`text-2xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>{stats.warning}</p>
|
||||
</div>
|
||||
<div className={`rounded-lg p-4 border transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-emerald-500/10 text-emerald-500">
|
||||
<div>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400 font-medium">Warnungen</span>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stats.warning}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4 flex items-center gap-3">
|
||||
<div className="p-2.5 rounded-xl bg-emerald-500/15 text-emerald-500 border border-emerald-500/20">
|
||||
<CheckCircle size={18} />
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Erfolg</span>
|
||||
</div>
|
||||
<p className={`text-2xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>{stats.success}</p>
|
||||
</div>
|
||||
<div className={`rounded-lg p-4 border transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-rose-500/10 text-rose-500">
|
||||
<div>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400 font-medium">Erfolge</span>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stats.success}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-4 flex items-center gap-3">
|
||||
<div className="p-2.5 rounded-xl bg-rose-500/15 text-rose-500 border border-rose-500/20">
|
||||
<AlertCircle size={18} />
|
||||
</div>
|
||||
<span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Fehler</span>
|
||||
</div>
|
||||
<p className={`text-2xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>{stats.error}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400 font-medium">Fehler</span>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stats.error}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className={`rounded-lg p-4 border transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Filter:</span>
|
||||
<button
|
||||
onClick={() => setFilter('all')}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
|
||||
filter === 'all'
|
||||
? 'bg-indigo-600 text-white'
|
||||
: theme === 'dark' ? 'bg-slate-700 text-slate-300 hover:bg-slate-600' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
Alle
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilter('info')}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
|
||||
filter === 'info'
|
||||
? 'bg-blue-600 text-white'
|
||||
: theme === 'dark' ? 'bg-slate-700 text-slate-300 hover:bg-slate-600' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
Info
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilter('success')}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
|
||||
filter === 'success'
|
||||
? 'bg-emerald-600 text-white'
|
||||
: theme === 'dark' ? 'bg-slate-700 text-slate-300 hover:bg-slate-600' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
Erfolg
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilter('warning')}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
|
||||
filter === 'warning'
|
||||
? 'bg-amber-600 text-white'
|
||||
: theme === 'dark' ? 'bg-slate-700 text-slate-300 hover:bg-slate-600' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
Warnung
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilter('error')}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
|
||||
filter === 'error'
|
||||
? 'bg-rose-600 text-white'
|
||||
: theme === 'dark' ? 'bg-slate-700 text-slate-300 hover:bg-slate-600' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
Fehler
|
||||
</button>
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
onClick={() => refreshLogs(true)}
|
||||
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${theme === 'dark' ? 'bg-slate-700 text-slate-300 hover:bg-slate-600' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
|
||||
>
|
||||
<RefreshCw size={14} className={loading || refreshing ? 'animate-spin' : ''} />
|
||||
Neu laden
|
||||
</button>
|
||||
{/* Filters & Log List */}
|
||||
<Card className="overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-slate-200/80 dark:border-slate-800 flex items-center gap-2 flex-wrap bg-slate-50/50 dark:bg-slate-900/50">
|
||||
<span className="text-xs font-medium text-slate-500 dark:text-slate-400 mr-2">Filter:</span>
|
||||
{['all', 'info', 'success', 'warning', 'error'].map(f => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setFilter(f)}
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium transition-all ${
|
||||
filter === f
|
||||
? 'bg-amber-500 text-slate-950 font-bold shadow-md shadow-amber-500/20'
|
||||
: 'bg-slate-200/70 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
{f === 'all' ? 'Alle' : getLevelLabel(f)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logs List */}
|
||||
<div className={`rounded-lg border overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
|
||||
<div className="max-h-[600px] overflow-y-auto">
|
||||
{filteredLogs.length === 0 ? (
|
||||
<div className="text-center py-12 transition-colors duration-300">
|
||||
<div className={`mx-auto w-16 h-16 rounded-full flex items-center justify-center mb-4 ${theme === 'dark' ? 'bg-slate-700' : 'bg-slate-100'}`}>
|
||||
<Terminal className={theme === 'dark' ? 'text-slate-400' : 'text-slate-400'} size={32} />
|
||||
<div className="text-center py-16">
|
||||
<div className="mx-auto w-16 h-16 rounded-2xl flex items-center justify-center mb-3 bg-slate-100 dark:bg-slate-800 text-slate-400 border border-slate-200 dark:border-slate-700">
|
||||
<Terminal size={32} />
|
||||
</div>
|
||||
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Keine Logs gefunden</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Keine Logs für diesen Filter vorhanden</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-slate-200 dark:divide-slate-700">
|
||||
<div className="divide-y divide-slate-200/80 dark:divide-slate-800">
|
||||
{filteredLogs.map(log => (
|
||||
<div key={log.id} className={`p-4 transition-colors duration-300 hover:${theme === 'dark' ? 'bg-slate-700/50' : 'bg-slate-50'}`}>
|
||||
<div key={log.id} className="p-4 transition-colors hover:bg-slate-50/80 dark:hover:bg-slate-800/40">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`mt-1 p-1.5 rounded ${getLevelColor(log.level)}`}>
|
||||
<div className={`mt-0.5 p-1.5 rounded-lg border ${getLevelColor(log.level)}`}>
|
||||
{getLevelIcon(log.level)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className={`text-xs font-mono px-1.5 py-0.5 rounded ${theme === 'dark' ? 'bg-slate-700 text-slate-400' : 'bg-slate-100 text-slate-600'}`}>
|
||||
<span className="text-xs font-mono px-2 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border border-slate-200 dark:border-slate-700">
|
||||
{log.source}
|
||||
</span>
|
||||
<span className={`text-xs font-medium ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
<span className="text-xs text-slate-400 font-mono">
|
||||
{log.timestamp}
|
||||
</span>
|
||||
<span className={`text-xs font-medium px-2 py-0.5 rounded-full ${getLevelColor(log.level)}`}>
|
||||
<span className={`text-xs font-medium px-2 py-0.5 rounded-full border ${getLevelColor(log.level)}`}>
|
||||
{getLevelLabel(log.level)}
|
||||
</span>
|
||||
</div>
|
||||
<p className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{log.message}
|
||||
</p>
|
||||
{log.details && (
|
||||
<p className={`text-xs mt-1 font-mono ${theme === 'dark' ? 'text-slate-500' : 'text-slate-500'}`}>
|
||||
<p className="text-xs mt-1 font-mono text-slate-500 dark:text-slate-400">
|
||||
{log.details}
|
||||
</p>
|
||||
)}
|
||||
@@ -240,7 +207,7 @@ export default function LogsPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
+435
-598
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user