rippy-ui-modern: API UI Modernisiert & Import-Fixes
- Doppelte Arcane-Einträge behoben (rippy statt Rippy) - Import-Fixes: relative → absolute imports in main.py, cache/__init__.py, prescan/__init__.py, clients/__init__.py - Neue Dateien: cache.py, prescan.py, Settings.tsx - API-Port 8000 in docker-compose.yml gemappt - UI mit Sidebar, Dark Mode, Einstellungen-Tabs Fixes: #2978 (doppelte Einträge), #2888 (Import-Fehler)
This commit is contained in:
Hitonabi
@@ -0,0 +1,340 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Settings, Save, Disc, Cpu, Database, Globe, AlertCircle, CheckCircle } from 'lucide-react'
|
||||
|
||||
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)
|
||||
|
||||
useEffect(() => {
|
||||
const loadSettings = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${import.meta.env.VITE_API_URL}/settings`)
|
||||
setSettings(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 axios.post(`${import.meta.env.VITE_API_URL}/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">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-bold text-slate-900">Einstellungen</h1>
|
||||
<p className="text-slate-500">Konfiguriere Rippy nach deinen Wünschen</p>
|
||||
</div>
|
||||
|
||||
{saved && (
|
||||
<div className="p-4 bg-emerald-50 border border-emerald-200 rounded-lg flex items-center gap-3 text-emerald-700">
|
||||
<CheckCircle className="flex-shrink-0" size={24} />
|
||||
<span className="font-medium">Einstellungen erfolgreich gespeichert!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-slate-200">
|
||||
<TabButton icon={Disc} label="Ripping" isActive={true} />
|
||||
<TabButton icon={Cpu} label="Verarbeitung" isActive={false} />
|
||||
<TabButton icon={Database} label="Datenbank" isActive={false} />
|
||||
<TabButton icon={Globe} label="APIs" isActive={false} />
|
||||
<TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={false} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-8">
|
||||
{/* Ripping Settings */}
|
||||
<section>
|
||||
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
|
||||
<Disc size={20} className="text-indigo-600" />
|
||||
Ripping-Einstellungen
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-indigo-100 rounded-lg">
|
||||
<Disc className="text-indigo-600" size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-slate-900">Alle Tracks rippen</h3>
|
||||
<p className="text-sm text-slate-500">Rippe alle Tracks einer CD (nicht nur Main Feature)</p>
|
||||
</div>
|
||||
</div>
|
||||
<Toggle
|
||||
checked={settings.ripAllTracks}
|
||||
onChange={(v) => handleChange('ripAllTracks', v)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-100 rounded-lg">
|
||||
<Disc className="text-purple-600" size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-slate-900">Nur Hauptfeature</h3>
|
||||
<p className="text-sm text-slate-500">Rippe bei DVDs/Blu-rays nur das Hauptfeature</p>
|
||||
</div>
|
||||
</div>
|
||||
<Toggle
|
||||
checked={settings.mainFeatureOnly}
|
||||
onChange={(v) => handleChange('mainFeatureOnly', v)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-emerald-100 rounded-lg">
|
||||
<Disc className="text-emerald-600" size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-slate-900">Automatischer Auswurf</h3>
|
||||
<p className="text-sm text-slate-500">Disk nach erfolgreichem Ripping auswerfen</p>
|
||||
</div>
|
||||
</div>
|
||||
<Toggle
|
||||
checked={settings.autoEject}
|
||||
onChange={(v) => handleChange('autoEject', v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Output Directories */}
|
||||
<section>
|
||||
<h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
|
||||
<Database size={20} className="text-indigo-600" />
|
||||
Ausgabeverzeichnisse
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium 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 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
|
||||
placeholder="/app/media"
|
||||
/>
|
||||
<p className="text-xs text-slate-500">Basisverzeichnis für alle Ausgaben</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium 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 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
|
||||
placeholder="movies"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium 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 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
|
||||
placeholder="series"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium 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 bg-white border border-slate-300 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 text-slate-900 mb-4 flex items-center gap-2">
|
||||
<Globe size={20} className="text-indigo-600" />
|
||||
API-Schlüssel
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium 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 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
|
||||
placeholder="Dein TMDB API Key"
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Hol dir einen Key auf <a href="https://www.themoviedb.org/" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:underline">themoviedb.org</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium 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 bg-white border border-slate-300 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 text-slate-900 mb-4 flex items-center gap-2">
|
||||
<AlertCircle size={20} className="text-indigo-600" />
|
||||
Webhook-Benachrichtigungen
|
||||
</h2>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium 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 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
|
||||
placeholder="https://discord.com/api/webhooks/..."
|
||||
/>
|
||||
<p className="text-xs 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 border-t border-slate-200">
|
||||
<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 }: { icon: any, label: string, isActive: boolean }) {
|
||||
return (
|
||||
<button
|
||||
className={`px-6 py-3 text-sm font-medium transition-colors border-b-2 ${
|
||||
isActive
|
||||
? 'border-indigo-600 text-indigo-600'
|
||||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function Toggle({ checked, onChange }: { checked: boolean, onChange: (v: boolean) => void }) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
checked ? 'bg-indigo-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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user