feat: Enhance iOS Safari audio streaming support with optimizations and specific headers
All checks were successful
Build and Push Docker Image / docker (push) Successful in 9s

This commit is contained in:
2025-10-19 23:18:25 +02:00
parent 18d14b097d
commit 70be1e7e39
11 changed files with 137 additions and 1328 deletions

160
README.md
View File

@@ -1,115 +1,75 @@
# Hitstar lokale Web-App (Prototyp)
# Hitstar Backend - Deno 2 + TypeScript
## Docker
Modern backend rewrite using Deno 2 and TypeScript with clean architecture principles.
Run the app in a container while using your local `data/` music folder:
## Architecture
1. Build the image
```powershell
docker compose build
```
2. Start the service
```powershell
docker compose up -d
```
3. Open http://localhost:5173
Notes:
- Your local `data/` is mounted read/write at `/app/data` inside the container, so you can manage tracks on the host.
- To rebuild after changes: `docker compose build --no-cache && docker compose up -d`.
Lokales Multiplayer-Webspiel inspiriert von HITSTER. Nutzt eure MP3-Dateien im Ordner `data/`, eine Lobby mit Raum-Code sowie WebSockets für den Mehrspieler-Modus.
## Features
- Lobby mit Raum-Erstellung und -Beitritt (Code)
- Mehrere Spieler pro Raum, Host startet das Spiel
- Lokale MP3-Wiedergabe via Browser-Audio (`/audio/<dateiname>`) keine externen Dienste
- Einfache Rundenlogik: DJ scannt Lied, Spieler raten vor/nach (vereinfachte Chronologie)
- Token-Zähler (Basis); Gewinnbedingung: 10 korrekt platzierte Karten
Hinweis: Regeln sind vereinfacht; „HITSTER!“-Challenges und exakter Zwischenplatzierungsmodus sind als Ausbaustufe geplant.
## Setup
1. MP3-Dateien in `data/` legen (Dateiname wird als Fallback-Titel genutzt; falls Tags vorhanden, werden Titel/Künstler/Jahr ausgelesen).
2. Abhängigkeiten installieren und Server starten.
### PowerShell-Befehle
```powershell
# In den Projektordner wechseln
Set-Location e:\git\hitstar
# Abhängigkeiten installieren
npm install
# Server starten
npm start
```
Dann im Browser öffnen: http://localhost:5173
## Nutzung
- Namen eingeben (speichert automatisch), Raum erstellen oder mit Code beitreten (Code wird angezeigt).
- Host klickt „Spiel starten“.
- DJ klickt „Lied scannen“; der Track spielt bei allen.
- Aktiver Spieler wählt „Vor“ oder „Nach“. Bei Erfolg wandert das Lied in seine Zeitleiste.
## Ordnerstruktur
- `public/` Client (HTML/CSS/JS)
- `src/server/` Express + WebSocket Server, Game-State
- `data/` eure Audio-Dateien und Playlists
### Playlist-Unterstützung
Die App unterstützt jetzt mehrere Playlists! Du kannst verschiedene Playlists für verschiedene Spielsessions erstellen:
**Ordnerstruktur für Playlists:**
This backend follows **Clean Architecture** principles with clear separation of concerns:
```
data/
├── (Audio-Dateien hier = "Default" Playlist)
├── 80s-Hits/
│ ├── Song1.opus
├── Song2.opus
│ └── ...
├── Rock-Classics/
│ ├── Song1.opus
│ └── ...
└── Party-Mix/
├── Song1.opus
└── ...
src/server-deno/
├── domain/ # Domain models, types, and business rules (no dependencies)
├── application/ # Use cases and application services
├── infrastructure/ # External concerns (file system, networking, etc.)
├── presentation/ # HTTP routes, WebSocket handlers
├── shared/ # Shared utilities, constants, types
└── main.ts # Application entry point and DI setup
```
**So funktioniert's:**
### Layers
1. **Standard-Playlist**: Audio-Dateien direkt im `data/`-Ordner werden als "Default"-Playlist erkannt
2. **Eigene Playlists**: Erstelle Unterordner im `data/`-Verzeichnis, z.B. `data/80s-Hits/`
3. **Playlist-Auswahl**: Als Raum-Host kannst du in der Lobby die gewünschte Playlist auswählen, bevor das Spiel startet
4. **Unterstützte Formate**: .mp3, .wav, .m4a, .ogg, .opus
1. **Domain Layer**: Pure business logic and types
- No external dependencies
- Models: Player, Room, Track, GameState
- Domain services for core game logic
**Empfehlung**: Nutze das `.opus`-Format für optimale Streaming-Performance und geringeren Speicherverbrauch. Das Konvertierungsskript `npm run audio:convert` wandelt automatisch alle Audio-Dateien in Opus um.
2. **Application Layer**: Use cases and orchestration
- Game service (start game, process guesses, etc.)
- Track service (load tracks, manage playlists)
- Room service (create/join rooms, manage players)
## Git & Audio-Dateien
3. **Infrastructure Layer**: External concerns
- File system operations
- Audio streaming
- Token management
- Metadata parsing
- In `.gitignore` sind alle gängigen Audio-Dateitypen ausgeschlossen (z. B. .mp3, .wav, .flac, .m4a, .ogg, …).
- Legt eure Musik lokal in `data/`. Diese Dateien werden nicht ins Git-Repo eingecheckt und bleiben nur auf eurem Rechner.
4. **Presentation Layer**: API and WebSocket
- REST routes for HTTP endpoints
- Socket.IO handlers for real-time game
## Nächste Schritte (optional)
## Running
- „HITSTER!“-Challenges per Token mit Positionsauswahl (zwischen zwei Karten)
- Team-Modus, Pro-/Expert-Regeln, exaktes Jahr
- Persistenz (Räume/Spielstände), Reconnect
- Drag & Drop-Zeitleiste, visuelle Platzierung
### Development
```bash
deno task dev
```
## Hinweis
### Production
```bash
deno task start
```
Nur für privaten Gebrauch. Musikdateien bleiben lokal bei euch.
### Testing
```bash
deno task test
deno task test:watch
```
### Code Quality
```bash
deno task lint
deno task fmt
deno task check
```
## Dependencies
- **@oak/oak**: Modern HTTP framework for Deno
- **socket.io**: Real-time bidirectional event-based communication
- **music-metadata**: Audio file metadata parsing
- **lru-cache**: Token and cover art caching
## Environment Variables
See `.env.example` for all available configuration options.