twitch4steamdeck/todo.md

Twitch4SteamDeck — TODO

Checkboxen-Tracker. Nach jedem erledigten Punkt sofort abhaken und kurzes Update in CLAUDE_PROGRESS.md ergänzen.

Phase 0 — Projekt-Skelett

• package.json, tsconfig (root/node/web)
• electron.vite.config.ts, electron-builder.yml, .gitignore
• Main-Stub mit BrowserWindow
• Preload-Stub mit contextBridge
• Renderer (React + Big-Screen-Baseline-CSS)
• Smoke-Test: npm install && npm run dev zeigt Fenster

Phase 1 — Twitch OAuth Device Code Flow

• deviceCodeFlow.ts (request + polling + refresh)
• tokenStore.ts (safeStorage-Persistenz)
• authService.ts (Lifecycle + EventEmitter)
• IPC-Handler + Preload-Bridge
• LoginScreen.tsx (QR + Code + Countdown)
• App.tsx Routing nach Auth-Status
• .env.example
• End-to-End-Verifikation durch User (Login mit echter Twitch-App durchführen)
• Token-Persistenz prüfen: App-Neustart → bleibt eingeloggt
• Logout testen: userData/twitch-tokens.bin wird gelöscht (später)

Phase 2 — Twitch Helix-Client + Followed-Channels-Home-Screen

• src/main/twitch/types.ts (Helix-Response-Typen)
• src/main/twitch/helixClient.ts (fetch-Wrapper, Auth-Header, Client-ID-Header, Paginierung)
• Helix-Endpoints implementieren:
  • GET /users (eigener User → user_id cachen)
  • GET /channels/followed?user_id=… (paginiert)
  • GET /streams?user_id=… (batched, max 100 IDs pro Call)
• IPC: twitch:get-followed registrieren (merged live-Status + Avatar)
• Preload-API erweitern: window.t4sd.twitch.getFollowed
• FollowingScreen.tsx — Karten-Grid mit Live-Indicator, Vorschaubild, Titel, Zuschauerzahl
• Spatial-Navigation: eigene Implementierung (Arrow-Keys + Region-Switch Sidebar ↔ Main)
• Gamepad-Service: src/renderer/src/input/gamepad.ts (Gamepad-API → Keyboard-Events)
• FocusableCard.tsx — Block-Layout, Avatar + Name + Titel + Spiel + Viewer-Badge
• AppShell.tsx + Sidebar.tsx — Layout mit linker Navigation (Du folgst / Durchsuchen / Mein Account)
• Icons.tsx — inline SVG-Icons (Heart, Compass, User)
• BrowseScreen.tsx + AccountScreen.tsx — Platzhalter-Screens mit Logout
• End-to-End-Verifikation durch User (2026-04-07: Karten + Tastatur-Nav bestätigt)

Phase 3 — Streamlink + mpv (Live-Wiedergabe)

Vorab (Dev-Setup, Windows)

• User: mpv installieren — winget install shinchiro.mpv, via setx zum PATH
• User: streamlink installieren — winget install streamlink (8.2.1)
• User: Baseline-Test erfolgreich: streamlink --twitch-disable-ads twitch.tv/streamerhouse best --player mpv

Backend (Main-Prozess)

• src/main/playback/types.ts
• src/main/playback/streamlink.ts — resolveStreamlinkBin() (Win32-Pfad-Auflösung), spawnStreamlink() mit --player mpv --player-args "..." (Variante 2)
• src/main/playback/mpvController.ts — Named Pipe (Win32) / Unix Socket (Linux), connect mit Retry, quit(), disconnect()
• src/main/playback/playbackService.ts
• IPC-Kanäle: playback:start-live, playback:stop, playback:event

Renderer (UI)

• Preload + t4sd.d.ts erweitern: window.t4sd.playback.{startLive, stop, onEvent}
• src/renderer/src/screens/ChannelScreen.tsx (Hero + Live-Button + Zustandsanzeige)
• Routing in AppShell.tsx: selectedChannel-State → ChannelScreen
• FocusableCard.onSelect → setzt selectedChannel via onSelectChannel-Prop
• Spatial-Nav: Escape/B im ChannelScreen → Stop oder Zurück

Verifikation

• Stream startet: mpv-Fenster öffnet sich, Stream spielt ab (2026-04-08) (Fix: --twitch-api-header entfernt, resolveMpvBin() ergänzt)
• User: Stop-Verhalten: mpv-Fenster schließt sich, keine Zombie-Prozesse (2026-04-08)
• User: Logout → Login → Stream starten funktioniert ohne App-Neustart (2026-04-08) ⚠️ --twitch-disable-ads ist von streamlink deaktiviert — Werbung wird ggf. abgespielt (Post-MVP)

Phase 4 — VOD-Browsing + -Wiedergabe

• Helix GET /videos?user_id=…&type=archive → getVideos() in helixClient
• VOD-Shelf im ChannelScreen (horizontal, obere Hälfte fix)
• playback:start-vod IPC-Kanal + PlaybackService.startVod()
• mpv --start=<seconds> beim Spawn (Parameter vorbereitet für Phase 5)
• User: VOD-Wiedergabe + Stop-Verhalten verifiziert (2026-04-08)

Phase 5 — Lokaler VOD-Verlauf (Resume)

• SQLite-Setup: src/main/store/db.ts (better-sqlite3, Migration)
• historyRepo.ts mit vod_history-Tabelle
• mpv time-pos-Observer schreibt alle ~5s in DB
• Auto-Resume: beim VOD-Start Position aus DB lesen → --start=<s>
• Auto-Complete bei >95% Wiedergabefortschritt
• Resume-Indikator auf VOD-Karte (Fortschrittsbalken + „0:16 von 6:22" + „Vor X Min.")
• Completed-Indikator (dunkles Overlay + Checkmark)
• User: Verifiziert (2026-04-08)
• „Continue Watching"-Reihe — entfällt (nicht benötigt)

Phase 5.5 — Browse-Menü: Kategorien + Top Live-Streams

• HelixGame, GameInfo Typen in types.ts
• helixClient.ts: getTopGames() + getTopStreams(gameId?)
• IPC: twitch:get-top-games, twitch:get-top-streams
• Preload + t4sd.d.ts: Typen + API-Methoden
• gamepad.ts: Button 2 (X) → 'x', Button 3 (Y) → 'y'
• BrowseScreen.tsx: Shelf (Top Live) + Grid (Kategorien), Key-Mapping
• CategoryScreen.tsx: Streams-Grid pro Game
• AppShell.tsx: selectedCategory-Routing
• global.css: Browse/Game-Card-Styles
• User: End-to-End-Verifikation (Browse laden, Live starten, Kategorie-Drilldown)

Phase 5.6 — Einstellungen + Sprach-Badge/Flagge

• language in HelixStream + FollowedChannelInfo (types.ts, preload, t4sd.d.ts)
• helixClient.ts: language in getTopStreams + getFollowedWithLiveStatus
• SettingsContext.tsx: Provider + useSettings() + localStorage-Persistenz
• Icons.tsx: SettingsIcon (Zahnrad)
• Sidebar.tsx: 4. Tab „Einstellungen"
• LanguageBadge.tsx: Badge/Flag/Both Rendering + 38-Sprachen-Map
• SettingsScreen.tsx: Radio-Liste mit 4 Optionen
• AppShell.tsx: Settings-Tab routen
• main.tsx: <SettingsProvider> um App
• FocusableCard.tsx: LanguageBadge unten-rechts
• BrowseScreen.tsx: LanguageBadge in Shelf-Cards
• global.css: Badge + Settings-Screen Styles
• User: End-to-End-Verifikation (Einstellungen + Badge funktionieren, Persistenz bestätigt; Flaggen erst auf Steam Deck testbar)

Phase 6 — Flatpak-Packaging

• flatpak/tv.twitch4steamdeck.App.yml Manifest (Runtime, Module, Permissions)
• mpv + streamlink als Flatpak-Module bündeln
• Test-Build: flatpak-builder --user --install build-dir flatpak/…yml
• Auf Steam Deck (oder VM) installieren und Login + Live + VOD durchspielen
• Als Non-Steam-Game in Gaming Mode hinzufügen, dort testen

Post-MVP (bewusst nicht im ersten Release)

• Chat (Live + VOD-Replay) inkl. BTTV/FFZ/7TV
• Suche / Kategorien-Browsing
• Eigene Twitch-Client-ID im Build verankert
• README mit Disclaimer (ToS) + Setup-Anleitung
• Flathub-Einreichung