118 lines
2.6 KiB
Markdown
118 lines
2.6 KiB
Markdown
# Frontend-Komponenten
|
|
|
|
Frontend: React + PrimeReact + Vite.
|
|
|
|
---
|
|
|
|
## Hauptseiten
|
|
|
|
### `DashboardPage.jsx`
|
|
|
|
Pipeline-Steuerung:
|
|
|
|
- Status/Progress/ETA
|
|
- Metadaten-Dialog
|
|
- Playlist-Entscheidung
|
|
- Review-Panel (Track-Auswahl)
|
|
- Queue-Interaktion (reorder/add/remove)
|
|
- Job-Aktionen (Start/Cancel/Retry/Re-Encode)
|
|
- Hardware-Monitoring-Anzeige
|
|
- Aktivitäts-Tracking (Skripte, Ketten, Cron)
|
|
|
|
### `SettingsPage.jsx`
|
|
|
|
Konfiguration:
|
|
|
|
- dynamisches Settings-Formular (`DynamicSettingsForm`)
|
|
- Skripte/Ketten inkl. Reorder/Test
|
|
- User-Presets
|
|
- Cron-Jobs (`CronJobsTab`)
|
|
|
|
### `HistoryPage.jsx`
|
|
|
|
Historie:
|
|
|
|
- Job-Liste/Filter
|
|
- Job-Details + Logs
|
|
- OMDb-Nachzuweisung
|
|
- Re-Encode/Restart-Workflows
|
|
|
|
### `ConverterPage.jsx`
|
|
|
|
Datei-Converter:
|
|
|
|
- Datei-Explorer des Converter-Eingangsordners (Baum-Ansicht)
|
|
- Upload von Audio/Video-Dateien (bis zu 50 Dateien gleichzeitig)
|
|
- Dateiverwaltung: Umbenennen, Verschieben, Löschen, Ordner erstellen
|
|
- Jobs aus Dateiauswahl erstellen
|
|
- Converter-Job-Konfiguration (Ausgabeformat, Preset, Tracks)
|
|
- Job-Start, Abbruch, Löschung
|
|
- Automatischer Scan-Status
|
|
|
|
### `DownloadsPage.jsx`
|
|
|
|
Download-Queue:
|
|
|
|
- Ausgabedateien aus der Job-Historie in die Queue einreihen
|
|
- Download-Status verfolgen (ausstehend, wird verarbeitet, bereit, fehlgeschlagen)
|
|
- Dateien als ZIP herunterladen
|
|
- Download-Einträge löschen
|
|
|
|
### `DatabasePage.jsx`
|
|
|
|
Expert-Modus:
|
|
|
|
- Tabellarische Rohsicht der Job-Datenbank
|
|
- Orphan-RAW-Import
|
|
|
|
---
|
|
|
|
## Wichtige Komponenten
|
|
|
|
- `PipelineStatusCard.jsx` — Pipeline-Status-Anzeige mit Progress
|
|
- `MetadataSelectionDialog.jsx` — OMDb-Metadaten-Auswahl
|
|
- `MediaInfoReviewPanel.jsx` — Track-Auswahl-Interface (Video/Audio/Untertitel)
|
|
- `JobDetailDialog.jsx` — Job-Detailansicht mit Logs
|
|
- `CronJobsTab.jsx` — Cron-Job-Verwaltung
|
|
- `DynamicSettingsForm.jsx` — Schema-gesteuertes Einstellungsformular
|
|
- `ConverterJobCard.jsx` — Converter-Job-Darstellung
|
|
- `CdRipConfigPanel.jsx` — Konfiguration für Audio-CD-Ripping
|
|
|
|
---
|
|
|
|
## API-Client (`api/client.js`)
|
|
|
|
- zentraler `request()` mit JSON-Handling
|
|
- Fehlerobjekt aus API wird auf `Error(message)` gemappt
|
|
- `VITE_API_BASE` default `/api`
|
|
|
|
---
|
|
|
|
## WebSocket (`hooks/useWebSocket.js`)
|
|
|
|
- URL: `VITE_WS_URL` oder automatisch `ws(s)://<host>/ws`
|
|
- Auto-Reconnect mit 1500ms Intervall
|
|
|
|
In `App.jsx` werden u. a. verarbeitet:
|
|
|
|
- `PIPELINE_STATE_CHANGED`
|
|
- `PIPELINE_PROGRESS`
|
|
- `PIPELINE_QUEUE_CHANGED`
|
|
- Disk erkannt / Disk entfernt
|
|
- `HARDWARE_MONITOR_UPDATE`
|
|
- `DOWNLOADS_UPDATED`
|
|
- `CONVERTER_SCAN_UPDATE`
|
|
- `RUNTIME_ACTIVITY_CHANGED`
|
|
|
|
---
|
|
|
|
## Build/Run
|
|
|
|
```bash
|
|
# dev
|
|
npm run dev --prefix frontend
|
|
|
|
# prod build
|
|
npm run build --prefix frontend
|
|
```
|