Frontend-Komponenten¶

Das Frontend ist mit React 18 und PrimeReact gebaut und kommuniziert über REST-API und WebSocket mit dem Backend.

Seiten (Pages)¶

DashboardPage.jsx¶

Die Hauptseite von Ripster – zeigt den aktuellen Pipeline-Status und ermöglicht alle Workflow-Aktionen.

Funktionen: - Anzeige des aktuellen Pipeline-Zustands (IDLE, ANALYZING, RIPPING, ENCODING, ...) - Live-Fortschrittsbalken mit ETA - Trigger für Metadaten-Dialog - Playlist-Entscheidungs-UI (bei Blu-ray Obfuskierung) - Encode-Review mit Track-Auswahl - Job-Steuerung (Start, Abbruch, Retry)

Zugehörige Komponenten: - PipelineStatusCard – Status-Widget - MetadataSelectionDialog – OMDb-Suche und Playlist-Auswahl - MediaInfoReviewPanel – Track-Auswahl vor dem Encoding - DiscDetectedDialog – Benachrichtigung bei Disc-Erkennung

SettingsPage.jsx¶

Konfigurationsoberfläche für alle Ripster-Einstellungen.

Funktionen: - Dynamisch generiertes Formular aus dem Settings-Schema - Echtzeit-Validierungsfeedback - PushOver-Verbindungstest - Automatische Aktualisierung des Encode-Reviews bei relevanten Änderungen

HistoryPage.jsx¶

Job-Historie mit vollständigem Audit-Trail.

Funktionen: - Sortier- und filterbares Job-Verzeichnis - Statusfilter (FINISHED, ERROR, WAITING_FOR_USER_DECISION, ...) - Job-Detail-Dialog mit vollständigen Logs - Re-Encode, Löschen und Metadaten-Zuweisung - Import von Orphan-Raw-Ordnern

Komponenten (Components)¶

MetadataSelectionDialog.jsx¶

Dialog für die Metadaten-Auswahl nach der Disc-Analyse.

┌─────────────────────────────────────┐
│ Metadaten auswählen                 │
├─────────────────────────────────────┤
│ Suche: [Inception              ] 🔍 │
├─────────────────────────────────────┤
│ Ergebnisse:                         │
│ ▶ Inception (2010) – Movie          │
│   Inception: ... (2011) – Series    │
├─────────────────────────────────────┤
│ Playlist (nur Blu-ray):             │
│ ▶ 00800.mpls (2:30:15) ✓ Empfohlen  │
│   00801.mpls (0:01:23)              │
├─────────────────────────────────────┤
│                   [Bestätigen]      │
└─────────────────────────────────────┘

MediaInfoReviewPanel.jsx¶

Track-Auswahl-Panel vor dem Encoding.

┌─────────────────────────────────────┐
│ Encode-Review                       │
├─────────────────────────────────────┤
│ Audio-Tracks:                       │
│ ☑ Track 1: Deutsch (AC-3, 5.1)     │
│ ☑ Track 2: English (TrueHD, 7.1)   │
│ ☐ Track 3: Français (AC-3, 2.0)    │
├─────────────────────────────────────┤
│ Untertitel:                         │
│ ☑ Track 1: Deutsch                  │
│ ☐ Track 2: English                  │
├─────────────────────────────────────┤
│              [Encodierung starten]  │
└─────────────────────────────────────┘

DynamicSettingsForm.jsx¶

Wiederverwendbares Formular, das aus dem Settings-Schema generiert wird.

Unterstützte Feldtypen:

PipelineStatusCard.jsx¶

Status-Anzeige-Widget für die Dashboard-Seite.

JobDetailDialog.jsx¶

Vollständiger Job-Detail-Dialog mit Logs-Viewer.

Hooks¶

useWebSocket.js¶

Zentraler Custom-Hook für die WebSocket-Verbindung.

const { status, lastMessage } = useWebSocket({
  onMessage: (msg) => {
    if (msg.type === 'PIPELINE_STATE_CHANGE') {
      setPipelineState(msg.data);
    }
  }
});

Features: - Automatische Verbindung zu /ws - Reconnect mit exponential backoff - Message-Parsing (JSON) - Status-Tracking (connecting, connected, disconnected)

API-Client (client.js)¶

Zentraler HTTP-Client für alle Backend-Anfragen.

// Beispiel-Aufrufe
const state = await api.getPipelineState();
const results = await api.searchOmdb('Inception');
await api.selectMetadata(jobId, omdbData, playlist);
await api.confirmEncode(jobId, { audioTracks: [0, 1], subtitleTracks: [0] });

Features: - Zentralisierte Fehlerbehandlung - Automatische JSON-Serialisierung - Basis-URL aus Umgebungsvariable (VITE_API_BASE)

Build & Entwicklung¶

Entwicklungsserver¶

cd frontend
npm run dev
# → http://localhost:5173

Vite-Proxy-Konfiguration¶

In der Entwicklungsumgebung proxied Vite API-Anfragen zum Backend:

// vite.config.js
proxy: {
  '/api': 'http://localhost:3001',
  '/ws': { target: 'ws://localhost:3001', ws: true }
}

Production-Build¶

cd frontend
npm run build
# → frontend/dist/