Hitonabi
f2da1ad525
Vorher lief der Vite-ENTWICKLUNGSSERVER als Produktion, und vier Dateien riefen hartkodiert http://localhost:8000 auf — vom PC aus fragte der Browser damit den PC selbst nach Laufwerken (deshalb blieb das UI immer leer); Settings nutzte ein nie gesetztes VITE_API_URL. Die Logs-Seite zeigte fest einprogrammierte Fantasie-Einträge ("The Matrix gerippt"). - lib/api.ts: axios-Instanz mit baseURL /api; nginx proxied /api → api:8000 (ein Origin, kein CORS), SSE-tauglich (proxy_buffering off) - Dockerfile: Vite-Build → nginx:alpine statt npm run dev - Logs + LiveLog von echtem /logs-Endpoint; MetadataPreview: echte Laufwerke aus /devices statt erfundener /dev/bluray-Optionen, startet echten Job Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
349 lines
17 KiB
TypeScript
349 lines
17 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Settings, Save, Disc, Cpu, Database, Globe, AlertCircle, CheckCircle } from 'lucide-react'
|
|
import { api } from '../lib/api'
|
|
import { useDarkMode } from '../context/ThemeContext'
|
|
|
|
interface SettingsState {
|
|
tmdbApiKey: string
|
|
tvdbApiKey: string
|
|
outputDir: string
|
|
movieDir: string
|
|
seriesDir: string
|
|
musicDir: string
|
|
ripAllTracks: boolean
|
|
mainFeatureOnly: boolean
|
|
autoEject: boolean
|
|
notificationWebhook: string
|
|
}
|
|
|
|
const defaultSettings: SettingsState = {
|
|
tmdbApiKey: '',
|
|
tvdbApiKey: '',
|
|
outputDir: '/app/media',
|
|
movieDir: 'movies',
|
|
seriesDir: 'series',
|
|
musicDir: 'music',
|
|
ripAllTracks: true,
|
|
mainFeatureOnly: false,
|
|
autoEject: true,
|
|
notificationWebhook: '',
|
|
}
|
|
|
|
export default function SettingsPage() {
|
|
const [settings, setSettings] = useState<SettingsState>(defaultSettings)
|
|
const [loading, setLoading] = useState(true)
|
|
const [saving, setSaving] = useState(false)
|
|
const [saved, setSaved] = useState(false)
|
|
const { theme } = useDarkMode()
|
|
|
|
useEffect(() => {
|
|
const loadSettings = async () => {
|
|
try {
|
|
const response = await api.get('/settings')
|
|
// Leeres Objekt von der API = noch nichts gespeichert → Defaults behalten
|
|
setSettings({ ...defaultSettings, ...response.data })
|
|
} catch {
|
|
setSettings(defaultSettings)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
loadSettings()
|
|
}, [])
|
|
|
|
const handleChange = (field: keyof SettingsState, value: any) => {
|
|
setSettings(prev => ({ ...prev, [field]: value }))
|
|
setSaved(false)
|
|
}
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true)
|
|
try {
|
|
await api.post('/settings', settings)
|
|
setSaved(true)
|
|
setTimeout(() => setSaved(false), 3000)
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={`max-w-4xl space-y-6 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
|
<div className="flex flex-col gap-2 transition-colors duration-300">
|
|
<h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Einstellungen</h1>
|
|
<p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Konfiguriere Rippy nach deinen Wünschen</p>
|
|
</div>
|
|
|
|
{saved && (
|
|
<div className={`p-4 rounded-lg flex items-center gap-3 font-medium transition-colors duration-300 ${theme === 'dark' ? 'bg-emerald-900/30 border border-emerald-700 text-emerald-400' : 'bg-emerald-50 border border-emerald-200 text-emerald-700'}`}>
|
|
<CheckCircle className="flex-shrink-0" size={24} />
|
|
<span>Einstellungen erfolgreich gespeichert!</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className={`rounded-xl shadow-sm overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'}`}>
|
|
{/* Tabs */}
|
|
<div className={`flex transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-b`}>
|
|
<TabButton icon={Disc} label="Ripping" isActive={true} darkMode={theme === 'dark'} />
|
|
<TabButton icon={Cpu} label="Verarbeitung" isActive={false} darkMode={theme === 'dark'} />
|
|
<TabButton icon={Database} label="Datenbank" isActive={false} darkMode={theme === 'dark'} />
|
|
<TabButton icon={Globe} label="APIs" isActive={false} darkMode={theme === 'dark'} />
|
|
<TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={false} darkMode={theme === 'dark'} />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6 space-y-8 transition-colors duration-300">
|
|
{/* Ripping Settings */}
|
|
<section>
|
|
<h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
|
<Disc size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
|
|
Ripping-Einstellungen
|
|
</h2>
|
|
|
|
<div className="space-y-4 transition-colors duration-300">
|
|
<div className="flex items-center justify-between p-4 transition-colors duration-300">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2 rounded-lg transition-colors duration-300 ${theme === 'dark' ? 'bg-indigo-900/30 text-indigo-400' : 'bg-indigo-100 text-indigo-600'}`}>
|
|
<Disc size={20} />
|
|
</div>
|
|
<div>
|
|
<h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Alle Tracks rippen</h3>
|
|
<p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Rippe alle Tracks einer CD (nicht nur Main Feature)</p>
|
|
</div>
|
|
</div>
|
|
<Toggle
|
|
checked={settings.ripAllTracks}
|
|
onChange={(v) => handleChange('ripAllTracks', v)}
|
|
darkMode={theme === 'dark'}
|
|
/>
|
|
</div>
|
|
|
|
<div className={`flex items-center justify-between p-4 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2 rounded-lg transition-colors duration-300 ${theme === 'dark' ? 'bg-purple-900/30 text-purple-400' : 'bg-purple-100 text-purple-600'}`}>
|
|
<Disc size={20} />
|
|
</div>
|
|
<div>
|
|
<h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Nur Hauptfeature</h3>
|
|
<p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Rippe bei DVDs/Blu-rays nur das Hauptfeature</p>
|
|
</div>
|
|
</div>
|
|
<Toggle
|
|
checked={settings.mainFeatureOnly}
|
|
onChange={(v) => handleChange('mainFeatureOnly', v)}
|
|
darkMode={theme === 'dark'}
|
|
/>
|
|
</div>
|
|
|
|
<div className={`flex items-center justify-between p-4 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2 rounded-lg transition-colors duration-300 ${theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-600'}`}>
|
|
<Disc size={20} />
|
|
</div>
|
|
<div>
|
|
<h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Automatischer Auswurf</h3>
|
|
<p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Disk nach erfolgreichem Ripping auswerfen</p>
|
|
</div>
|
|
</div>
|
|
<Toggle
|
|
checked={settings.autoEject}
|
|
onChange={(v) => handleChange('autoEject', v)}
|
|
darkMode={theme === 'dark'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Output Directories */}
|
|
<section>
|
|
<h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
|
<Database size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
|
|
Ausgabeverzeichnisse
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 transition-colors duration-300">
|
|
<div className="space-y-2 transition-colors duration-300">
|
|
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
|
Hauptverzeichnis
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={settings.outputDir}
|
|
onChange={(e) => handleChange('outputDir', e.target.value)}
|
|
className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200 focus:ring-indigo-500' : 'bg-white border-slate-300 text-slate-900 focus:ring-indigo-600'} border rounded-lg focus:ring-2 focus:border-transparent transition-all`}
|
|
placeholder="/app/media"
|
|
/>
|
|
<p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Basisverzeichnis für alle Ausgaben</p>
|
|
</div>
|
|
|
|
<div className="space-y-2 transition-colors duration-300">
|
|
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
|
Filme
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={settings.movieDir}
|
|
onChange={(e) => handleChange('movieDir', e.target.value)}
|
|
className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
|
|
placeholder="movies"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2 transition-colors duration-300">
|
|
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
|
Serien
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={settings.seriesDir}
|
|
onChange={(e) => handleChange('seriesDir', e.target.value)}
|
|
className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
|
|
placeholder="series"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2 transition-colors duration-300">
|
|
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
|
Musik
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={settings.musicDir}
|
|
onChange={(e) => handleChange('musicDir', e.target.value)}
|
|
className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
|
|
placeholder="music"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* API Keys */}
|
|
<section>
|
|
<h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
|
<Globe size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
|
|
API-Schlüssel
|
|
</h2>
|
|
|
|
<div className="space-y-4 transition-colors duration-300">
|
|
<div className="space-y-2 transition-colors duration-300">
|
|
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
|
TMDB API Key
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={settings.tmdbApiKey}
|
|
onChange={(e) => handleChange('tmdbApiKey', e.target.value)}
|
|
className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
|
|
placeholder="Dein TMDB API Key"
|
|
/>
|
|
<p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
|
Hol dir einen Key auf <a href="https://www.themoviedb.org/" target="_blank" rel="noopener noreferrer" className={`${theme === 'dark' ? 'text-indigo-400 hover:underline' : 'text-indigo-600 hover:underline'}`}>themoviedb.org</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2 transition-colors duration-300">
|
|
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
|
TVDb API Key
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={settings.tvdbApiKey}
|
|
onChange={(e) => handleChange('tvdbApiKey', e.target.value)}
|
|
className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
|
|
placeholder="Dein TVDb API Key"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Webhook */}
|
|
<section>
|
|
<h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
|
|
<AlertCircle size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
|
|
Webhook-Benachrichtigungen
|
|
</h2>
|
|
|
|
<div className="space-y-2 transition-colors duration-300">
|
|
<label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
|
|
Webhook URL
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={settings.notificationWebhook}
|
|
onChange={(e) => handleChange('notificationWebhook', e.target.value)}
|
|
className={`w-full px-3 py-2 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
|
|
placeholder="https://discord.com/api/webhooks/..."
|
|
/>
|
|
<p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
|
Optional: URL für Benachrichtigungen bei Job-Ende (Discord, Slack, etc.)
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Save Button */}
|
|
<div className={`flex items-center justify-end gap-4 pt-6 transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-t`}>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{saving ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
|
|
Speichern...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save size={20} />
|
|
Einstellungen speichern
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TabButton({ icon: Icon, label, isActive, darkMode }: { icon: any, label: string, isActive: boolean, darkMode: boolean }) {
|
|
const { theme } = useDarkMode()
|
|
return (
|
|
<button
|
|
className={`px-6 py-3 text-sm font-medium transition-colors border-b-2 ${
|
|
isActive
|
|
? `${darkMode ? 'border-indigo-500 text-indigo-400' : 'border-indigo-600 text-indigo-600'}`
|
|
: `${darkMode ? 'border-transparent text-slate-400 hover:text-slate-300' : 'border-transparent text-slate-500 hover:text-slate-700'}`
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function Toggle({ checked, onChange, darkMode }: { checked: boolean, onChange: (v: boolean) => void, darkMode: boolean }) {
|
|
const { theme } = useDarkMode()
|
|
return (
|
|
<button
|
|
onClick={() => onChange(!checked)}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
|
checked ? 'bg-indigo-600' : darkMode ? 'bg-slate-600' : 'bg-slate-300'
|
|
}`}
|
|
>
|
|
<span
|
|
className={`${
|
|
checked ? 'translate-x-6' : 'translate-x-1'
|
|
} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
|
|
/>
|
|
</button>
|
|
)
|
|
}
|