feat: complete dashboard redesign, proxy unification, and Windows compatibility fixes

This commit is contained in:
2026-04-02 12:13:37 +02:00
parent 8192388c5d
commit fec4e4635c
33 changed files with 3002 additions and 135 deletions

356
AUDIO_SETUP_REAL.md Normal file
View File

@@ -0,0 +1,356 @@
# 🎵 Echtes Audio Setup - Spotify & AirPlay
## ✅ FIXES ANGEWENDET
### 1. VITE_USE_MOCK = false
- Dashboard nutzt jetzt **echte Services**
- Keine Mock-Daten mehr
- Verbindet zu Mopidy, Snapcast, SignalK
### 2. Karte crasht nicht mehr
- Simple Navigation Map (ohne MapLibre)
- Zeigt Position, Kurs, Geschwindigkeit
- Kein externer Tile-Server nötig
---
## 🎯 WICHTIG: Audio im Dev-Mode
### Warum hörst du NICHTS?
**Im Dev-Mode:**
```
Spotify/AirPlay/Mopidy
/tmp/audio/*.pcm (Named Pipes)
Snapserver (Docker)
Snapclients (Docker mit --player file:filename=null)
🔇 Audio wird VERWORFEN (null player)
```
**Warum?**
- Docker kann nicht direkt zu Windows-Lautsprechern
- Audio-Pipes funktionieren nicht über Docker Desktop VM-Grenze
- Die Zonen nutzen `--player file:filename=null` = stumm
---
## 🔊 3 WEGE UM AUDIO ZU HÖREN
### Option 1: Snapcast Web Audio (Browser) ✅ EINFACHST
**So gehts:**
1. Öffne: http://localhost:1780
2. Klicke auf 🔊 Symbol (oben rechts)
3. Wähle eine Zone (z.B. "zone-salon")
4. **Browser fragt nach Mikrofon-Berechtigung** → Erlaube (nutzt nur Audio OUT!)
5. Musik in Mopidy starten → http://localhost:6680/iris/
6. **Audio läuft über deinen Browser!**
**Vorteile:**
- ✅ Keine Installation
- ✅ Funktioniert sofort
- ✅ Web Audio API (Chrome, Firefox, Edge)
**Nachteile:**
- ⚠️ Tab muss offen bleiben
- ⚠️ Kann latency haben (~500ms)
---
### Option 2: Snapclient auf Windows (Native) ✅ BESTE QUALITÄT
**Installation:**
1. Download: https://github.com/badaix/snapcast/releases/latest
2. Datei: `snapclient-X.XX.X-win64.zip`
3. Entpacken nach `C:\Program Files\Snapcast\`
**Starten:**
```powershell
# Terminal öffnen
snapclient --host localhost --port 1704 --hostID windows-pc --player wasapi
```
**Oder mit make (falls installiert):**
```powershell
make windows-audio
```
**Vorteile:**
- ✅ Perfekte Audio-Qualität
- ✅ Niedrige Latenz (~20ms)
- ✅ Native Windows Audio (WASAPI)
**Nachteile:**
- ⚠️ Muss manuell gestartet werden
- ⚠️ Extra Terminal-Fenster
---
### Option 3: Docker Zone mit PulseAudio (WSL2) ⚠️ NUR LINUX
**Nur wenn du WSL2 mit PulseAudio hast:**
```bash
# In WSL2 Terminal
pulseaudio --start
```
Dann in `docker-compose.dev.yml`:
```yaml
zone-windows:
build: ./docker/snapclient
command: ["--hostID", "zone-windows", "--player", "pulse"]
environment:
- PULSE_SERVER=unix:/run/user/1000/pulse/native
volumes:
- /run/user/1000/pulse:/run/user/1000/pulse
```
**Nicht empfohlen für Windows!**
---
## 🎵 MUSIK QUELLEN AKTIVIEREN
### Spotify Connect ✅
**Im Dev-Mode läuft librespot als Stub (dummy).**
**Um echtes Spotify zu nutzen:**
**Option A: Librespot auf Windows (EMPFOHLEN)**
```powershell
# Download: https://github.com/librespot-org/librespot/releases
# Oder mit Rust installieren:
cargo install librespot
# Starten:
librespot --name "Bordanlage" --backend rodio
```
Dann in Spotify App → Geräte → "Bordanlage" auswählen
**Option B: Docker librespot (Production Mode)**
```powershell
# Nutze docker-compose.yml (ohne .dev overlay)
docker compose up -d librespot
```
⚠️ Aber: Audio geht nach `/tmp/audio/spotify.pcm` → Du hörst nichts!
---
### AirPlay ✅
**Shairport-Sync läuft im Docker.**
**Von iPhone/Mac:**
1. Control Center öffnen
2. AirPlay Symbol
3. "Bordanlage AirPlay" auswählen
4. Musik abspielen
⚠️ **Problem:** Audio geht nach `/tmp/audio/airplay.pcm` → Du hörst nichts!
**Lösung:**
- Nutze Snapcast Web Audio (Option 1)
- Oder native Snapclient (Option 2)
- AirPlay → Pipe → Snapserver → Snapclient → Windows!
---
### Mopidy (Local Files + Radio) ✅
**Läuft bereits!**
**Musik abspielen:**
1. Öffne: http://localhost:6680/iris/
2. Klicke "Browse" → "TuneIn"
3. Suche "BBC Radio" oder "NDR"
4. Klicke auf Sender → Play
**Local Files:**
1. Kopiere MP3/FLAC nach `./music/`
2. Library Scan triggern:
```powershell
curl -X POST http://localhost:6680/mopidy/rpc `
-H "Content-Type: application/json" `
-d '{"jsonrpc":"2.0","id":1,"method":"library.refresh"}'
```
3. Warte ~30 Sek
4. Reload Mopidy UI → Files sind da!
---
## 🧪 AUDIO TEST WORKFLOW
### Test 1: Mopidy → Snapcast → Browser
```
1. Öffne: http://localhost:6680/iris/
→ Klicke Browse → TuneIn
→ Wähle "BBC Radio 1"
→ Klicke Play
2. Öffne: http://localhost:1780
→ Klicke 🔊 Symbol
→ Wähle "zone-salon"
→ Erlaube Browser Audio
3. Musik sollte jetzt laufen! 🎵
```
**Falls nicht:**
- F12 → Console → Fehler?
- Snapcast Web zeigt "zone-salon" connected?
- Mopidy zeigt "Playing"?
---
### Test 2: Dashboard Player
```
1. Öffne: http://localhost:8090
2. Klicke Tab "Audio"
→ Klicke "Radio" Sub-Tab
→ Suche "BBC" oder "NDR"
→ Klicke auf Sender
3. Zurück zu "Overview" Tab
→ Player zeigt Track
→ [▶] Play/Pause funktioniert
4. Browser Audio aktivieren (Snapcast Web)
→ http://localhost:1780
→ 🔊 Symbol → Zone wählen
```
---
## 🔧 TROUBLESHOOTING
### Problem: "Dashboard zeigt 'Audio not connected'"
**Ursache:** Mopidy WebSocket Connection failed
**Fix:**
```powershell
# Mopidy Logs prüfen
docker compose -f docker-compose.yml -f docker-compose.dev.yml logs mopidy
# Mopidy neu starten
docker compose -f docker-compose.yml -f docker-compose.dev.yml restart mopidy
# Browser neu laden (Ctrl+R)
```
### Problem: "Zones zeigen alle 'offline'"
**Ursache:** Snapcast JSON-RPC Connection failed
**Fix:**
```powershell
# Snapserver Logs prüfen
docker compose -f docker-compose.yml -f docker-compose.dev.yml logs snapserver
# Snapserver neu starten
docker compose -f docker-compose.yml -f docker-compose.dev.yml restart snapserver
# Alle Zonen neu starten
docker compose -f docker-compose.yml -f docker-compose.dev.yml restart zone-salon zone-cockpit zone-bug zone-heck
```
### Problem: "Snapcast Web Audio funktioniert nicht"
**Check:**
1. Nutzt du Chrome/Firefox/Edge? (Safari hat Probleme)
2. Hast du Mikrofon-Berechtigung erteilt? (wird für Web Audio benötigt)
3. Tab bleibt offen?
4. F12 → Console → Web Audio Fehler?
**Fix:**
```javascript
// Browser Console:
navigator.mediaDevices.getUserMedia({ audio: true })
.then(() => console.log("✅ Audio erlaubt"))
.catch(err => console.log("❌ Audio blockiert:", err))
```
### Problem: "Spotify Device wird nicht gefunden"
**Im Dev-Mode:**
- librespot läuft als Stub (dummy)
- Nutze native librespot auf Windows (siehe oben)
**Production Mode:**
- `docker-compose.yml` nutzen (ohne .dev)
- Aber: Audio geht nach Pipe, du hörst nichts!
- → Nutze native librespot
---
## 📊 SERVICE STATUS PRÜFEN
```powershell
# Alle Audio Services
docker compose -f docker-compose.yml -f docker-compose.dev.yml ps | findstr "mopidy snapserver zone"
# Mopidy API Test
curl http://localhost:6680/mopidy/rpc -X POST -H "Content-Type: application/json" -d '{"jsonrpc":"2.0","id":1,"method":"core.get_version"}'
# Snapcast Status (WebSocket, schwieriger zu testen)
# → Nutze http://localhost:1780 (Web UI)
# SignalK API Test
curl http://localhost:3000/signalk/v1/api/vessels/self
```
---
## ✅ ZUSAMMENFASSUNG
### Was funktioniert JETZT:
✅ **Dashboard:**
- Echte Services (VITE_USE_MOCK=false)
- Kein Karten-Crash mehr (Simple Map)
- Audio Player zeigt echte Mopidy-Daten
✅ **Audio System:**
- Mopidy läuft (Port 6680)
- Snapserver läuft (Port 1704, 1705, 1780)
- 4 Zonen connected (aber stumm)
✅ **Musik Quellen:**
- Mopidy + Iris (Local Files + TuneIn Radio)
- Shairport (AirPlay Receiver)
- librespot (Spotify Connect - als Stub)
### Was du noch tun musst:
❗ **Audio hören:**
1. **Einfach:** Snapcast Web Audio (http://localhost:1780 → 🔊)
2. **Best:** Native Snapclient auf Windows
❗ **Spotify aktivieren:**
- Native librespot auf Windows starten (siehe Anleitung oben)
❗ **AirPlay testen:**
- iPhone → AirPlay → "Bordanlage AirPlay"
- Audio hören → Snapcast Web Audio aktivieren
---
## 🚢 AUF DEM BOOT (später)
**Dann funktioniert ALLES automatisch:**
- Echte ALSA-Lautsprecher in Zonen
- Spotify Connect über Boot-Netzwerk
- AirPlay über Boot-Netzwerk
- Alles läuft ohne Windows
**Setup:** Siehe `KIOSK_SETUP.md`