Frontend-Komponenten¶

Frontend: React + PrimeReact + Vite.

Hauptseiten¶

`DashboardPage.jsx`¶

Pipeline-Steuerung:

Status/Progress/ETA
Metadaten-Dialog
Playlist-Entscheidung
Review-Panel
Queue-Interaktion (reorder/add/remove)
Job-Aktionen (Start/Cancel/Retry/Re-Encode)
Hardware-Monitoring-Anzeige

`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

Wichtige Komponenten¶

PipelineStatusCard.jsx
MetadataSelectionDialog.jsx
MediaInfoReviewPanel.jsx
JobDetailDialog.jsx
CronJobsTab.jsx

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

Build/Run¶

# dev
npm run dev --prefix frontend

# prod build
npm run build --prefix frontend