# StreamA2026 - Setup Anleitung

## Was wurde erstellt

Ein komplettes Streaming-System mit folgenden Komponenten:

### Backend (FastAPI/Python)
- **JWT Authentifizierung** mit Refresh Tokens und Sessions
- **RESTful API** für Streams, Kommentare, Tags
- **WebSocket Support** für Echtzeit-Kommunikation
- **SSE (Server-Sent Events)** für System-Events
- **Background Daemon** für FFmpeg-Verarbeitung und Health-Checks
- **PostgreSQL** als Datenbank
- **Redis** für Caching und Sessions
- **FFmpeg** für HLS/DASH Konvertierung

### Frontend (React/TypeScript)
- **Moderne UI** mit TailwindCSS
- **Stream-Liste** ohne Mock-Daten (zeigt "No streams available" wenn leer)
- **Video-Player** mit HLS.js Unterstützung
- **Kommentar-System** ohne Mock-Daten
- **Upload-Funktion** für Videos
- **Login/Register** mit JWT Auth

### Webserver Konfiguration
- **Nginx** mit Proxy für Frontend/Backend/WebSocket/SSE
- **Caddy** für SSL/TLS mit automatischem HTTPS
- **HLS/DASH** Streaming Unterstützung
- **Flyway** für Datenbank-Migrationen

### Projektstruktur
```
StreamA2026/
├── backend/              # FastAPI Backend
│   ├── app/
│   │   ├── api/        # API Routes (auth, streams, comments, tags, health)
│   │   ├── models/     # SQLAlchemy Models
│   │   ├── schemas/    # Pydantic Schemas
│   │   ├── auth.py     # JWT Auth
│   │   ├── daemon.py   # Background Daemon
│   │   ├── websocket.py # WebSocket Manager
│   │   ├── sse.py      # SSE Events
│   │   └── main.py     # FastAPI App
│   ├── Dockerfile
│   └── requirements.txt
├── frontend/            # React Frontend
│   ├── src/
│   │   ├── components/ # Layout
│   │   ├── pages/      # Home, Login, Register, StreamDetail, Upload
│   │   ├── contexts/   # AuthContext
│   │   └── services/   # API Services
│   ├── Dockerfile
│   └── package.json
├── nginx/              # Nginx Konfiguration
├── caddy/              # Caddy Konfiguration
├── flyway/             # Flyway Migrationen
├── docker-compose.yml  # Alle Services
├── .env.example        # Umgebungsvariablen Beispiel
└── .env                # Erstellte Konfiguration
```

## Voraussetzungen

1. **Docker Desktop** für Windows installieren
   - Download: https://www.docker.com/products/docker-desktop/
   - Nach Installation: Docker Desktop starten

2. Optional: **Git** (falls nicht bereits installiert)

## Installation & Start

### 1. Docker Desktop starten
Stelle sicher, dass Docker Desktop läuft und WSL 2 aktiviert ist.

### 2. System starten
```powershell
cd d:\Gits\StreamA2026
docker compose up -d
```

### 3. Auf Services warten
Die Services benötigen beim ersten Start einige Minuten zum:
- Docker Images bauen (Backend + Frontend)
- PostgreSQL initialisieren
- Dependencies installieren

Status prüfen:
```powershell
docker compose ps
```

Logs ansehen:
```powershell
docker compose logs -f
```

### 4. Zugriff auf die Anwendung
- **Frontend**: http://localhost:3000
- **Backend API**: http://localhost:8000
- **API Dokumentation**: http://localhost:8000/docs

## System Features

### API Endpoints (alle ohne Mock-Daten)

**Authentifizierung:**
- `POST /api/auth/register` - Neuen Benutzer registrieren
- `POST /api/auth/login` - Login (gibt JWT Token zurück)
- `POST /api/auth/refresh` - Access Token refreshen
- `POST /api/auth/logout` - Logout
- `GET /api/auth/me` - Aktuellen Benutzer abrufen

**Streams:**
- `GET /api/streams` - Alle Streams auflisten (leere Liste wenn keine vorhanden)
- `GET /api/streams/{id}` - Stream Details abrufen
- `POST /api/streams` - Neuen Stream erstellen
- `PUT /api/streams/{id}` - Stream aktualisieren
- `DELETE /api/streams/{id}` - Stream löschen
- `POST /api/streams/{id}/upload` - Video hochladen

**Kommentare:**
- `GET /api/streams/{id}/comments` - Kommentare auflisten (leer wenn keine vorhanden)
- `POST /api/streams/{id}/comments` - Kommentar hinzufügen
- `PUT /api/streams/{id}/comments/{comment_id}` - Kommentar aktualisieren
- `DELETE /api/streams/{id}/comments/{comment_id}` - Kommentar löschen

**Tags:**
- `GET /api/tags` - Alle Tags auflisten
- `POST /api/tags` - Neuen Tag erstellen
- `POST /api/tags/streams/{stream_id}/{tag_id}` - Tag zu Stream hinzufügen
- `DELETE /api/tags/streams/{stream_id}/{tag_id}` - Tag von Stream entfernen

**Health:**
- `GET /api/health` - System-Health-Check

**Real-time:**
- `WS /ws/stream/{id}` - WebSocket für Stream-spezifische Events
- `WS /ws` - Globaler WebSocket
- `SSE /api/events` - Server-Sent Events für System-Events

## Frontend Verhalten (Clean ohne Mock-Daten)

- **Startseite**: Zeigt "No streams available" wenn keine Streams existieren
- **Stream-Detail**: Zeigt "Video not processed yet" wenn kein HLS vorhanden
- **Kommentare**: Zeigt "No comments yet" wenn keine Kommentare vorhanden
- **Details**: Zeigt "-" für fehlende Werte (z.B. Duration)

## Hintergrundprozesse (Daemon)

Der Daemon übernimmt:
- **FFmpeg Jobs**: HLS/DASH Konvertierung im Hintergrund
- **Thumbnail Generation**: Automatische Thumbnail-Erstellung
- **Health Checks**: Regelmäßige Prüfung von DB und Redis
- **Session Cleanup**: Alte Sessions automatisch löschen
- **Event Publishing**: Events über SSE und WebSocket senden

## Produktion Deployment

### Umgebungsvariablen anpassen
In `.env` für Produktion ändern:
```env
POSTGRES_PASSWORD=starkes_passwort
REDIS_PASSWORD=starkes_passwort
JWT_SECRET_KEY=langer_zufälliger_secret_key
ALLOWED_ORIGINS=https://deine-domain.com
LOG_LEVEL=INFO
```

### Domain konfigurieren
In `caddy/Caddyfile`:
```
domain.deine-domain.com {
    reverse_proxy backend:8000
    reverse_proxy frontend:3000
}
```

### SSL/TLS (HTTPS)
Caddy konfiguriert SSL/TLS automatisch mit Let's Encrypt:
1. Domain in `caddy/Caddyfile` konfigurieren
2. Caddy übernimmt Zertifikats-Erstellung und -Erneuerung automatisch
3. HTTP zu HTTPS Redirect ist automatisch aktiv

## Erweiterbarkeit

### Neuen Service hinzufügen
1. Service zu `docker-compose.yml` hinzufügen
2. Backend an neuen Service anbinden
3. Umgebungsvariablen in `.env.example` hinzufügen

### Neue API Endpoints
1. Schema in `backend/app/schemas/` erstellen
2. Model in `backend/app/models/` erstellen
3. Route in `backend/app/api/` erstellen
4. In `backend/app/main.py` inkludieren

### Neue Frontend-Seite
1. Page in `frontend/src/pages/` erstellen
2. Route in `frontend/src/App.tsx` hinzufügen
3. Navigation in `frontend/src/components/Layout.tsx` ergänzen

## Fehlersuche

### Container starten nicht
```powershell
docker compose logs backend
docker compose logs frontend
docker compose logs postgres
docker compose logs redis
```

### Datenbank-Verbindungsfehler
Prüfen ob PostgreSQL Container läuft:
```powershell
docker compose ps postgres
```

### Frontend zeigt keine Daten
1. API direkt testen: http://localhost:8000/docs
2. Backend Logs prüfen
3. CORS Einstellungen in `.env` prüfen

### FFmpeg Fehler im Daemon
Daemon Logs prüfen:
```powershell
docker compose logs daemon
```

## Nächste Schritte nach Docker Installation

1. **Docker Desktop installieren und starten**
2. **System starten**: `docker compose up -d`
3. **Warten** auf alle Services (ca. 5-10 Minuten beim ersten Start)
4. **Frontend öffnen**: http://localhost:3000
5. **Benutzer registrieren** über UI
6. **Ersten Stream hochladen** über Upload-Seite
7. **Warten** auf FFmpeg Verarbeitung im Hintergrund
8. **Stream abspielen** wenn Status "ready"

## Support

Bei Problemen:
- Logs prüfen: `docker compose logs -f [service]`
- Container neu starten: `docker compose restart [service]`
- Alles neu bauen: `docker compose up -d --build`
- Volumes löschen für frischen Start: `docker compose down -v`