From 211174f889fd47339568bf547b64305c15774d00 Mon Sep 17 00:00:00 2001
From: Andre <200930841+Andre-Bzk@users.noreply.github.com>
Date: Thu, 14 May 2026 12:57:29 +0200
Subject: [PATCH] refactor: extract IPC channel names into a single source of
 truth

Duplicate raw string literals across handlers.ts, preload/index.ts made
typos undetectable at compile time and renames a multi-file grep problem.
A single channels.ts now owns all channel names; both files import from it.

Also fixes two bugs found during testing:
- LoginScreen and AccountScreen buttons were not triggerable via gamepad
  A-button: synthetic KeyboardEvents are untrusted and don't fire native
  button clicks. Added explicit keydown handlers that call the action directly.
- AppShell loading overlay could disappear while hlsPayload was still null
  if the playback:event 'started' IPC message arrived before playback:hls-url.
  Overlay now stays visible until hlsPayload is set, regardless of playState.
---
 CLAUDE.md                                  | 26 +++++++++++++---
 src/main/ipc/channels.ts                   | 36 ++++++++++++++++++++++
 src/main/ipc/handlers.ts                   | 35 ++-------------------
 src/preload/index.ts                       | 34 +-------------------
 src/renderer/src/screens/AccountScreen.tsx |  2 ++
 src/renderer/src/screens/AppShell.tsx      |  2 +-
 src/renderer/src/screens/LoginScreen.tsx   | 10 ++++++
 src/renderer/src/types/t4sd.d.ts           |  1 +
 8 files changed, 75 insertions(+), 71 deletions(-)
 create mode 100644 src/main/ipc/channels.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index 9049124..1c4afaa 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -39,7 +39,10 @@ Renderer (React)
 │                          ChannelScreen (Hauptscreen), StreamListScreen, Settings, Account
 ├── components/
 │   ├── VideoPlayer.tsx  — hls.js <video> Wrapper (forwardRef, imperative handle)
-│   └── PlaybackOverlay.tsx — DOM-Overlay über dem Video (z-index: 300)
+│   ├── PlaybackOverlay.tsx — DOM-Overlay über dem Video (z-index: 300)
+│   └── GamepadPrompt.tsx — Typisierte Gamepad-Button-Icons (Face, Shoulder, D-Pad)
+├── hooks/
+│   └── usePlaybackSession.ts — Gemeinsamer Playback-State-Hook für AppShell + ChannelScreen
 ├── input/gamepad.ts     — Browser Gamepad API (Windows, Dev-Mode)
 └── context/SettingsContext.tsx — localStorage-Settings (streamBadgeMode, sidebarWidth, …)
 ```
@@ -96,6 +99,8 @@ src/main/
     authService.ts            — Auth-Lifecycle, Token-Refresh, Event-Emitter
     deviceCodeFlow.ts         — OAuth Device Code + Polling (https://id.twitch.tv/oauth2/)
     tokenStore.ts             — safeStorage-Verschlüsselung, Fallback auf plaintext
+  constants/
+    input.ts                  — TRIGGER_THRESHOLD, DEDUP_WINDOW_MS, HOTPLUG_SCAN_INTERVAL_MS
   input/
     gamepadReader.ts          — evdev /dev/input/event* Leser (via js*-Discovery), Hotplug (3s-Scan), Deduplizierung (40ms); BTN_*-Codes für controller-unabhängiges Mapping
   ipc/
@@ -104,6 +109,8 @@ src/main/
     playbackService.ts        — Orchestrator: streamlink --stream-url → HLS-URL → playback-hls-url Event; startVod(quality?); getAvailableQualities()
     streamlink.ts             — getStreamUrl() + getAvailableQualities() via streamlink (--stream-url für URL, --json für Qualitätsliste)
     types.ts                  — Quality-Typ, PlaybackEvent, HlsUrlPayload
+  prefs/
+    hlsCachePref.ts           — In-Memory-Flag für HLS-Disk-Cache-Aktivierung (gesetzt via app:set-hls-cache-enabled IPC)
   store/
     db.ts                     — SQLite-Init, WAL-Modus, Migration (vod_history-Tabelle)
     historyRepo.ts            — upsertVod, updatePosition, markCompleted, getProgressMap
@@ -133,15 +140,23 @@ src/renderer/src/
   components/
     VideoPlayer.tsx           — hls.js <video> Wrapper, forwardRef (seek, seekTo, pause, play, stop, getCurrentTime); attachMedia vor loadSource; play() in MANIFEST_PARSED
     PlaybackOverlay.tsx       — DOM-Overlay (Seek-Bar, Kanalinfo, Gamepad-Hints, Auto-Hide, Qualitäts-Button + Panel); playState: 'playing'|'paused'
+    GamepadPrompt.tsx         — Typisierter Gamepad-Button-Renderer (<GamepadPrompt prompt="a"/>, <GamepadHintItem>)
     FocusableCard.tsx         — Wiederverwendbare Kanal-Karte (Thumbnail, Badge, Progress)
     Sidebar.tsx               — Navigationssidebar (6 Tabs)
     LanguageBadge.tsx         — Sprach-/Flagge-Badge
     Icons.tsx                 — SVG-Icons
+  constants/
+    ui.ts                     — CARD_W, CARD_GAP, STREAM_W, STREAM_GAP (Karten-/Grid-Größen)
+    playback.ts               — OVERLAY_HIDE_DELAY_MS, DOUBLE_TAP_MS, POSITION_REPORT_INTERVAL_MS
+    input.ts                  — AXIS_THRESHOLD, REPEAT_INITIAL_MS, REPEAT_INTERVAL_MS
   context/
     SettingsContext.tsx        — localStorage-Settings (streamBadgeMode, sidebarWidth, badgeGap), CSS-Custom-Properties-Sync
+  hooks/
+    usePlaybackSession.ts     — Gemeinsamer Hook: hlsPayload, playState, videoRef, Quality-Panel-State, startLive/startVod/stop; genutzt von AppShell + ChannelScreen
   input/
     gamepad.ts                — Browser Gamepad API, rAF-Poll, Achsen-Debounce
   lib/
+    formatting.ts             — Gemeinsame Format-Utilities (Zeit, Zahlen, Dauer)
     languageBadge.ts          — ISO-Code → Flagge/Kürzel Mapping (~40 Sprachen)
   styles/
     global.css                — Dark Theme (#0e0e10, #9147ff Akzent), 1280x800-optimiert
@@ -168,17 +183,20 @@ Alle Renderer→Main-Calls gehen über `window.t4sd.*` (definiert in `src/preloa
 2. Bridge-Methode in `src/preload/index.ts`
 3. Typ-Deklaration in `src/renderer/src/types/t4sd.d.ts`
 
+IPC-Namespaces: `app:` (quit, Cache-Größe, Cache leeren, HLS-Cache-Toggle), `auth:`, `twitch:`, `history:`, `playback:`, `gamepad:` (Main→Renderer-Events).
+
 ### Zwei Playback-Kontexte
 
+Beide Kontexte nutzen `usePlaybackSession` (`src/renderer/src/hooks/usePlaybackSession.ts`) — der Hook kapselt `hlsPayload`, `playState`, `videoRef`, Quality-Panel-State sowie `startLive`/`startVod`/`stop`. Der `active`-Parameter steuert, ob der Hook auf IPC-Events (hls-url, playback-event) subscribed.
+
 **1. ChannelScreen-Playback** (Live + VOD, X-Button oder „Du folgst"):
 - Nutzer navigiert zur ChannelScreen → drückt „▶ Live ansehen" oder wählt einen VOD
-- ChannelScreen hält eigenen `hlsPayload`-State, eigenen `videoRef`, eigene PlaybackOverlay
+- ChannelScreen instanziiert `usePlaybackSession({ active: true })` — hält eigene Session, eigene PlaybackOverlay
 - VOD-Features: Resume, Kapitel-Panel, Position-Tracking
 
 **2. Globaler AppShell-Overlay** (Direkt-Start, A-Button in BrowseScreen/StreamListScreen/CategoryScreen):
 - Nutzer drückt A auf einer Stream-Karte → `onStartLive(ch)` → AppShell ruft `startLive()` direkt auf
-- AppShell hält `liveChannel`, `liveHlsPayload`, `livePlayState`, `liveVideoRef`
-- `isGlobalPlaybackInitiated` Ref verhindert, dass ChannelScreen-IPC-Events den globalen Overlay aktivieren
+- AppShell instanziiert `usePlaybackSession({ active: !isChannelScreenActive })` — `active` schaltet IPC-Subscription frei
 - Während Playback: `hasFocus={false}` für alle Browse-Screens → keine Tastenkonflikte
 - AppShell-eigener Keydown-Handler: Escape=Stop, Enter=Pause, Pfeile=Seek
 - Nur Live-Streams (kein VOD, kein Resume, kein Position-Tracking)
diff --git a/src/main/ipc/channels.ts b/src/main/ipc/channels.ts
new file mode 100644
index 0000000..2f0bee4
--- /dev/null
+++ b/src/main/ipc/channels.ts
@@ -0,0 +1,36 @@
+export const IPC = {
+  appQuit: 'app:quit',
+  authStatus: 'auth:get-status',
+  authStart: 'auth:start-device-flow',
+  authCancel: 'auth:cancel',
+  authLogout: 'auth:logout',
+  authConfigured: 'auth:is-configured',
+  /** main → renderer */
+  authEvent: 'auth:event',
+
+  twitchGetFollowed: 'twitch:get-followed',
+  twitchGetOwnUser: 'twitch:get-own-user',
+  twitchGetVideos: 'twitch:get-videos',
+  twitchGetTopGames: 'twitch:get-top-games',
+  twitchGetTopStreams: 'twitch:get-top-streams',
+  twitchGetVodChapters: 'twitch:get-vod-chapters',
+  historyGetProgress: 'history:get-progress',
+
+  playbackStartLive: 'playback:start-live',
+  playbackStartVod: 'playback:start-vod',
+  playbackStop: 'playback:stop',
+  playbackPause: 'playback:pause',
+  playbackReportPosition: 'playback:report-position',
+  playbackGetQualities: 'playback:get-qualities',
+  /** main → renderer */
+  playbackEvent: 'playback:event',
+  /** main → renderer: HLS-URL + Metadaten für den Renderer-seitigen Video-Player */
+  playbackHlsUrl: 'playback:hls-url',
+
+  appGetCacheSize: 'app:get-cache-size',
+  appClearCache: 'app:clear-cache',
+  appSetHlsCacheEnabled: 'app:set-hls-cache-enabled',
+
+  /** main → renderer */
+  gamepadInput: 'gamepad-input'
+} as const
diff --git a/src/main/ipc/handlers.ts b/src/main/ipc/handlers.ts
index 82cae33..8d5738b 100644
--- a/src/main/ipc/handlers.ts
+++ b/src/main/ipc/handlers.ts
@@ -8,40 +8,9 @@ import type { PlaybackService } from '../playback/playbackService'
 import type { HlsUrlPayload } from '../playback/playbackService'
 import type { PlaybackEvent } from '../playback/types'
 import { getProgressMap } from '../store/historyRepo'
+import { IPC } from './channels'
 
-export const IPC = {
-  appQuit: 'app:quit',
-  authStatus: 'auth:get-status',
-  authStart: 'auth:start-device-flow',
-  authCancel: 'auth:cancel',
-  authLogout: 'auth:logout',
-  authConfigured: 'auth:is-configured',
-  /** main → renderer */
-  authEvent: 'auth:event',
-
-  twitchGetFollowed: 'twitch:get-followed',
-  twitchGetOwnUser: 'twitch:get-own-user',
-  twitchGetVideos: 'twitch:get-videos',
-  twitchGetTopGames: 'twitch:get-top-games',
-  twitchGetTopStreams: 'twitch:get-top-streams',
-  twitchGetVodChapters: 'twitch:get-vod-chapters',
-  historyGetProgress: 'history:get-progress',
-
-  playbackStartLive: 'playback:start-live',
-  playbackStartVod: 'playback:start-vod',
-  playbackStop: 'playback:stop',
-  playbackPause: 'playback:pause',
-  playbackReportPosition: 'playback:report-position',
-  playbackGetQualities: 'playback:get-qualities',
-  /** main → renderer */
-  playbackEvent: 'playback:event',
-  /** main → renderer: HLS-URL + Metadaten für den Renderer-seitigen Video-Player */
-  playbackHlsUrl: 'playback:hls-url',
-
-  appGetCacheSize: 'app:get-cache-size',
-  appClearCache: 'app:clear-cache',
-  appSetHlsCacheEnabled: 'app:set-hls-cache-enabled'
-} as const
+export { IPC }
 
 export function registerIpcHandlers(
   auth: AuthService,
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 236baec..645722d 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -1,37 +1,5 @@
 import { contextBridge, ipcRenderer, type IpcRendererEvent } from 'electron'
-
-const IPC = {
-  appQuit: 'app:quit',
-  authStatus: 'auth:get-status',
-  authStart: 'auth:start-device-flow',
-  authCancel: 'auth:cancel',
-  authLogout: 'auth:logout',
-  authConfigured: 'auth:is-configured',
-  authEvent: 'auth:event',
-
-  twitchGetFollowed: 'twitch:get-followed',
-  twitchGetOwnUser: 'twitch:get-own-user',
-  twitchGetVideos: 'twitch:get-videos',
-  twitchGetTopGames: 'twitch:get-top-games',
-  twitchGetTopStreams: 'twitch:get-top-streams',
-  twitchGetVodChapters: 'twitch:get-vod-chapters',
-  historyGetProgress: 'history:get-progress',
-
-  playbackStartLive: 'playback:start-live',
-  playbackStartVod: 'playback:start-vod',
-  playbackStop: 'playback:stop',
-  playbackPause: 'playback:pause',
-  playbackReportPosition: 'playback:report-position',
-  playbackGetQualities: 'playback:get-qualities',
-  playbackEvent: 'playback:event',
-  playbackHlsUrl: 'playback:hls-url',
-
-  appGetCacheSize: 'app:get-cache-size',
-  appClearCache: 'app:clear-cache',
-  appSetHlsCacheEnabled: 'app:set-hls-cache-enabled',
-
-  gamepadInput: 'gamepad-input'
-} as const
+import { IPC } from '../main/ipc/channels'
 
 export type AuthStatus = 'logged-out' | 'logged-in'
 
diff --git a/src/renderer/src/screens/AccountScreen.tsx b/src/renderer/src/screens/AccountScreen.tsx
index 55ac86e..97fe27b 100644
--- a/src/renderer/src/screens/AccountScreen.tsx
+++ b/src/renderer/src/screens/AccountScreen.tsx
@@ -50,6 +50,8 @@ export default function AccountScreen({ hasFocus, onRequestSidebar, onLogout }:
       if (e.key === 'ArrowLeft') {
         e.preventDefault()
         onRequestSidebar()
+      } else if (e.key === 'Enter') {
+        void handleLogout()
       }
     }
     window.addEventListener('keydown', onKey)
diff --git a/src/renderer/src/screens/AppShell.tsx b/src/renderer/src/screens/AppShell.tsx
index 8ec46b4..c917290 100644
--- a/src/renderer/src/screens/AppShell.tsx
+++ b/src/renderer/src/screens/AppShell.tsx
@@ -307,7 +307,7 @@ export default function AppShell({ onLogout }: Props): JSX.Element {
       {isGlobalPlaying && !selectedChannel && (
         <>
           {/* Lade-Overlay während streamlink läuft */}
-          {livePlayState === 'starting' && !liveHlsPayload && (
+          {!liveHlsPayload && livePlayState !== 'error' && (
             <div style={{
               position: 'fixed', inset: 0, zIndex: 100,
               background: '#000', display: 'flex',
diff --git a/src/renderer/src/screens/LoginScreen.tsx b/src/renderer/src/screens/LoginScreen.tsx
index 42bda9f..ed783c3 100644
--- a/src/renderer/src/screens/LoginScreen.tsx
+++ b/src/renderer/src/screens/LoginScreen.tsx
@@ -25,6 +25,16 @@ export default function LoginScreen({ onAuthorized }: Props): JSX.Element {
     startBtnRef.current?.focus()
   }, [])
 
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key !== 'Enter') return
+      if (phase.kind === 'idle' || phase.kind === 'error') void start()
+      else if (phase.kind === 'awaiting') void cancel()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [phase])
+
   // Auth-Events aus Main abonnieren.
   useEffect(() => {
     const off = window.t4sd.auth.onEvent((event) => {
diff --git a/src/renderer/src/types/t4sd.d.ts b/src/renderer/src/types/t4sd.d.ts
index ba64e67..b08baa5 100644
--- a/src/renderer/src/types/t4sd.d.ts
+++ b/src/renderer/src/types/t4sd.d.ts
@@ -1,4 +1,5 @@
 // Spiegel der Preload-API. Manuell synchron halten zu src/preload/index.ts.
+// IPC-Channel-Namen: src/main/ipc/channels.ts (Renderer kann nicht direkt importieren).
 
 export type AuthStatus = 'logged-out' | 'logged-in'