feat: replace mpv with hls.js HTML5 video player (v0.4.0)

- Remove mpvController.ts and hlsTrimmer.ts entirely - Rewrite PlaybackService: streamlink --stream-url → HLS-URL → IPC event playback:hls-url - Add VideoPlayer.tsx (hls.js <video> wrapper, forwardRef with seek/seekTo/pause/play/stop/getCurrentTime) - Integrate VideoPlayer into ChannelScreen with direct videoRef calls (no IPC roundtrip for seek/pause) - Add global AppShell playback overlay for direct stream start (A-button in Browse/Category/StreamList) - Propagate onStartLive callback through BrowseScreen, CategoryScreen, StreamListScreen - Add CORS bypass for Twitch CDN (webRequest.onBeforeSendHeaders) and autoplay-policy switch - Update CSP: add media-src 'self' blob: for hls.js MediaSource API - Open chapter panel without stopping playback (pause + resume instead of stop/restart) - Drop IPC channels: seek, seekTo, resume, togglePause, getCurrentPosition, onTimeUpdate - Add IPC channel: playback:hls-url event with HlsUrlPayload
2026-11-15 09:33:09 +01:00 · 2026-05-10 08:33:07 +02:00
parent cde5fec9ff
commit 48ab6e551f
25 changed files with 947 additions and 1240 deletions
@@ -1,4 +1,4 @@
-import { app, BrowserWindow, shell, screen } from 'electron'
+import { app, BrowserWindow, shell, screen, session } from 'electron'
 import { join } from 'node:path'
 import { AuthService } from './auth/authService'
 import { HelixClient } from './twitch/helixClient'
@@ -8,6 +8,10 @@ import { startGamepadReader } from './input/gamepadReader'

 const isDev = !app.isPackaged

+// Erlaubt video.play() ohne vorangehende User-Geste (nötig, weil play() in hls.js-Callbacks
+// aufgerufen wird, die asynchron weit nach dem ursprünglichen Click-Event stattfinden).
+app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required')
+
 function createWindow(): BrowserWindow {
  const isLinux = process.platform === 'linux'
  const { width, height } = isLinux
@@ -49,7 +53,45 @@ function createWindow(): BrowserWindow {
  return win
 }

+/**
+ * CORS-Bypass für Twitch CDN und HLS-Streams.
+ * hls.js im Renderer sendet Requests von localhost/file:// — Twitch CDN erwartet
+ * Origin: https://www.twitch.tv. Wir setzen Origin + Referer auf ausgehenden Requests
+ * und ergänzen CORS-Response-Header, damit Chromium die Antworten akzeptiert.
+ */
+function setupTwitchCors(): void {
+  const isTwitchCdn = (url: string): boolean =>
+    url.includes('twitchsvc.net') ||
+    url.includes('cloudfront.net') ||
+    url.includes('twitch.tv') ||
+    url.includes('twitch.amazon.com')
+
+  session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
+    if (isTwitchCdn(details.url)) {
+      details.requestHeaders['Origin'] = 'https://www.twitch.tv'
+      details.requestHeaders['Referer'] = 'https://www.twitch.tv/'
+    }
+    callback({ requestHeaders: details.requestHeaders })
+  })
+
+  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
+    if (isTwitchCdn(details.url)) {
+      const headers: Record<string, string[]> = {}
+      for (const [k, v] of Object.entries(details.responseHeaders ?? {})) {
+        headers[k.toLowerCase()] = Array.isArray(v) ? v : [v]
+      }
+      headers['access-control-allow-origin'] = ['*']
+      headers['access-control-allow-headers'] = ['*']
+      headers['access-control-allow-methods'] = ['GET, HEAD, OPTIONS']
+      callback({ responseHeaders: headers })
+    } else {
+      callback({})
+    }
+  })
+}
+
 app.whenReady().then(async () => {
+  setupTwitchCors()
  const clientId = import.meta.env.MAIN_VITE_TWITCH_CLIENT_ID ?? ''
  const auth = new AuthService(clientId)
  await auth.init()
@@ -66,7 +108,7 @@ app.whenReady().then(async () => {

  app.on('before-quit', () => {
    stopGamepad()
-    playback.stopAll()
+    playback.stop()
  })

  if (!clientId) {
@@ -1,8 +1,11 @@
 import { app, BrowserWindow, ipcMain } from 'electron'
+import { appendFileSync } from 'node:fs'
+import { join } from 'node:path'
 import type { AuthEvent, AuthService } from '../auth/authService'
 import type { HelixClient } from '../twitch/helixClient'
 import type { PlaybackService } from '../playback/playbackService'
-import type { PlaybackEvent, PlaybackTimeUpdate } from '../playback/types'
+import type { HlsUrlPayload } from '../playback/playbackService'
+import type { PlaybackEvent } from '../playback/types'
 import { getProgressMap } from '../store/historyRepo'

 export const IPC = {
@@ -26,18 +29,12 @@ export const IPC = {
  playbackStartLive: 'playback:start-live',
  playbackStartVod: 'playback:start-vod',
  playbackStop: 'playback:stop',
-  playbackSeek: 'playback:seek',
-  playbackTogglePause: 'playback:toggle-pause',
  playbackPause: 'playback:pause',
-  playbackResume: 'playback:resume',
-  playbackSeekTo: 'playback:seek-to',
-  playbackGetCurrentPosition: 'playback:get-current-position',
-  playbackSetLoggingEnabled: 'playback:set-logging-enabled',
-  playbackGetLogPath: 'playback:get-log-path',
+  playbackReportPosition: 'playback:report-position',
  /** main → renderer */
  playbackEvent: 'playback:event',
-  /** main → renderer: ~1 Hz position updates during VOD playback */
-  playbackTimeUpdate: 'playback:time-update'
+  /** main → renderer: HLS-URL + Metadaten für den Renderer-seitigen Video-Player */
+  playbackHlsUrl: 'playback:hls-url'
 } as const

 export function registerIpcHandlers(
@@ -102,32 +99,30 @@ export function registerIpcHandlers(
      playback.startVod(vodId, channelLogin, title, durationSeconds, startSeconds)
  )
  ipcMain.handle(IPC.playbackStop, () => playback.stop())
-  ipcMain.handle(IPC.playbackSeek, (_e, seconds: number) => playback.seek(seconds))
-  ipcMain.handle(IPC.playbackTogglePause, () => playback.togglePause())
-  ipcMain.handle(IPC.playbackSeekTo, (_e, seconds: number) => playback.seekTo(seconds))
-  ipcMain.handle(IPC.playbackResume, () => playback.resume())
-  ipcMain.handle(IPC.playbackGetCurrentPosition, () => playback.getCurrentPosition())
-  ipcMain.handle(IPC.playbackSetLoggingEnabled, (_e, enabled: boolean) => playback.setLoggingEnabled(enabled))
-  ipcMain.handle(IPC.playbackGetLogPath, () => playback.getLogPath())
  ipcMain.handle(IPC.playbackPause, () => {
-    playback.pause()
+    // Fokus auf Electron-Fenster zurückholen (Windows: Win Gamepad API braucht Fokus)
    for (const win of BrowserWindow.getAllWindows()) win.focus()
  })
+  ipcMain.handle(
+    IPC.playbackReportPosition,
+    (_e, vodId: string, positionSeconds: number, durationSeconds: number) => {
+      playback.updateVodPosition(vodId, positionSeconds, durationSeconds)
+    }
+  )

  playback.on('playback-event', (event: PlaybackEvent) => {
    for (const win of BrowserWindow.getAllWindows()) {
      win.webContents.send(IPC.playbackEvent, event)
-      // Auf Windows stiehlt mpv den OS-Fokus → Electron refokussieren,
-      // damit navigator.getGamepads() weiter Daten liefert.
-      if (process.platform === 'win32' && event.kind === 'started') {
-        win.focus()
-      }
    }
  })

-  playback.on('playback-time-update', (data: PlaybackTimeUpdate) => {
+  playback.on('playback-hls-url', (payload: HlsUrlPayload) => {
+    try {
+      const logPath = join(app.getPath('userData'), 'debug-playback.log')
+      appendFileSync(logPath, `[${new Date().toISOString()}] HLS URL (isLive=${payload.isLive}): ${payload.url}\n`)
+    } catch { /* ignore log errors */ }
    for (const win of BrowserWindow.getAllWindows()) {
-      win.webContents.send(IPC.playbackTimeUpdate, data)
+      win.webContents.send(IPC.playbackHlsUrl, payload)
    }
  })
 }
@@ -1,235 +0,0 @@
-/**
- * Erzeugt eine gekürzte HLS-Playlist, die erst ab einem Zielsegment beginnt.
- * Einsatzfälle:
- * - laufende Twitch-Live-VODs als statischen Snapshot einfrieren
- * - fMP4-Streams nahe der Zielposition starten, ohne HLS-internen Seek
- *   im Demuxer ausführen zu müssen
- *
- * Wichtig: Die Playlist wird über localhost ausgeliefert statt als lokale Datei.
- * FFmpeg blockiert bei file://-HLS-Playlists ansonsten https-Subrequests
- * (Protocol-Whitelist: nur file,crypto,data).
- */
-
-import * as http from 'node:http'
-
-interface HlsSegment {
-  duration: number
-  uri: string
-  /** Zusätzliche Tags vor dem Segment (z.B. #EXT-X-BYTERANGE) */
-  tags: string[]
-}
-
-interface ParsedPlaylist {
-  headerLines: string[]
-  mapLine: string | null
-  segments: HlsSegment[]
-  mediaSequence: number
-  hasEndList: boolean
-}
-
-function resolveUrl(base: string, relative: string): string {
-  if (/^https?:\/\//i.test(relative)) return relative
-  return new URL(relative, base).toString()
-}
-
-function parsePlaylist(text: string, baseUrl: string): ParsedPlaylist {
-  const lines = text.split(/\r?\n/)
-  const headerLines: string[] = []
-  let mapLine: string | null = null
-  const segments: HlsSegment[] = []
-  let mediaSequence = 0
-  let hasEndList = false
-
-  let pendingDuration: number | null = null
-  let pendingTags: string[] = []
-  let inHeader = true
-
-  for (const line of lines) {
-    const trimmed = line.trim()
-    if (!trimmed) continue
-
-    if (trimmed === '#EXT-X-ENDLIST') {
-      hasEndList = true
-      continue
-    }
-
-    if (trimmed.startsWith('#EXT-X-MEDIA-SEQUENCE:')) {
-      mediaSequence = parseInt(trimmed.split(':')[1], 10) || 0
-      // Nicht in headerLines aufnehmen — wird neu berechnet
-      continue
-    }
-
-    if (trimmed.startsWith('#EXT-X-MAP:')) {
-      // Init-Segment URI absolut auflösen
-      mapLine = trimmed.replace(/URI="([^"]+)"/, (_m, uri: string) => {
-        return `URI="${resolveUrl(baseUrl, uri)}"`
-      })
-      inHeader = false
-      continue
-    }
-
-    if (trimmed.startsWith('#EXTINF:')) {
-      inHeader = false
-      const durationStr = trimmed.replace('#EXTINF:', '').replace(',', '')
-      pendingDuration = parseFloat(durationStr)
-      continue
-    }
-
-    // Segment-URI (kein #-Prefix)
-    if (!trimmed.startsWith('#') && pendingDuration !== null) {
-      segments.push({
-        duration: pendingDuration,
-        uri: resolveUrl(baseUrl, trimmed),
-        tags: pendingTags
-      })
-      pendingDuration = null
-      pendingTags = []
-      continue
-    }
-
-    // Sonstige Tags
-    if (trimmed.startsWith('#')) {
-      if (inHeader) {
-        headerLines.push(trimmed)
-      } else if (pendingDuration === null) {
-        // Tag zwischen Segmenten (z.B. #EXT-X-DISCONTINUITY)
-        pendingTags.push(trimmed)
-      } else {
-        // Tag direkt vor einem Segment (z.B. #EXT-X-BYTERANGE)
-        pendingTags.push(trimmed)
-      }
-    }
-  }
-
-  return { headerLines, mapLine, segments, mediaSequence, hasEndList }
-}
-
-export interface TrimResult {
-  url: string
-  /** Absolute Zeit (Sekunden) ab der die gekürzte Playlist beginnt */
-  playlistStartSeconds: number
-  close: () => Promise<void>
-}
-
-/**
- * Erstellt eine gekürzte HLS-Playlist die ab ~targetSeconds beginnt.
- * Liefert sie über einen lokalen HTTP-Server aus und gibt URL + Startzeit zurück.
- */
-export async function createTrimmedPlaylist(
-  hlsUrl: string,
-  targetSeconds: number
-): Promise<TrimResult> {
-  const res = await fetch(hlsUrl, { signal: AbortSignal.timeout(5000) })
-  if (!res.ok) throw new Error(`HLS-Playlist fetch failed: ${res.status}`)
-  const text = await res.text()
-
-  const playlist = parsePlaylist(text, hlsUrl)
-
-  // Zielsegment finden
-  let cumulative = 0
-  let targetIndex = 0
-  for (let i = 0; i < playlist.segments.length; i++) {
-    if (cumulative + playlist.segments[i].duration > targetSeconds) {
-      targetIndex = i
-      break
-    }
-    cumulative += playlist.segments[i].duration
-    if (i === playlist.segments.length - 1) {
-      targetIndex = i
-      cumulative -= playlist.segments[i].duration
-    }
-  }
-
-  // Für fMP4 keinen zusätzlichen Warmup-Segmentpuffer verwenden.
-  // Jeder nachgelagerte Seek triggert sonst wieder den gleichen Demuxer-Bug.
-  const trimStart = targetIndex
-
-  // playlistStartSeconds = Summe der Dauer aller übersprungenen Segmente
-  let playlistStartSeconds = 0
-  for (let i = 0; i < trimStart; i++) {
-    playlistStartSeconds += playlist.segments[i].duration
-  }
-
-  // Neue Playlist zusammenbauen
-  const lines: string[] = []
-
-  // Header — PLAYLIST-TYPE wird herausgefiltert und unten neu als VOD gesetzt
-  for (const h of playlist.headerLines) {
-    if (!h.startsWith('#EXT-X-PLAYLIST-TYPE')) {
-      lines.push(h)
-    }
-  }
-  // Immer VOD setzen: getrimmte Playlist ist ein statischer Snapshot.
-  // Live-VODs haben ggf. EVENT-Type oder gar keinen Type — beides führt dazu,
-  // dass mpv die Playlist als Live-Stream behandelt und den Seek ignoriert.
-  lines.push('#EXT-X-PLAYLIST-TYPE:VOD')
-  // Media-Sequence passend setzen
-  lines.push(`#EXT-X-MEDIA-SEQUENCE:${playlist.mediaSequence + trimStart}`)
-
-  // Init-Segment (EXT-X-MAP)
-  if (playlist.mapLine) {
-    lines.push(playlist.mapLine)
-  }
-
-  // Segmente ab trimStart
-  for (let i = trimStart; i < playlist.segments.length; i++) {
-    const seg = playlist.segments[i]
-    for (const tag of seg.tags) {
-      lines.push(tag)
-    }
-    lines.push(`#EXTINF:${seg.duration.toFixed(3)},`)
-    lines.push(seg.uri)
-  }
-
-  // Immer ENDLIST setzen — statischer Snapshot endet hier.
-  // Ohne ENDLIST wäre eine VOD-Playlist laut HLS-Spec (RFC 8216) ungültig,
-  // und mpv würde weiter auf neue Segmente warten statt die Datei als fertig zu behandeln.
-  lines.push('#EXT-X-ENDLIST')
-
-  const playlistText = lines.join('\n')
-  const route = `/trimmed-${Date.now()}-${Math.random().toString(36).slice(2)}.m3u8`
-
-  const server = http.createServer((req, res) => {
-    if (req.url !== route) {
-      res.writeHead(404)
-      res.end('not found')
-      return
-    }
-    res.writeHead(200, {
-      'Content-Type': 'application/vnd.apple.mpegurl; charset=utf-8',
-      'Cache-Control': 'no-store'
-    })
-    res.end(playlistText)
-  })
-
-  await new Promise<void>((resolve, reject) => {
-    server.once('error', reject)
-    server.listen(0, '127.0.0.1', () => {
-      server.off('error', reject)
-      resolve()
-    })
-  })
-
-  const address = server.address()
-  if (!address || typeof address === 'string') {
-    server.close()
-    throw new Error('trimmed playlist server address unavailable')
-  }
-
-  return {
-    url: `http://127.0.0.1:${address.port}${route}`,
-    playlistStartSeconds,
-    close: async () => {
-      await new Promise<void>((resolve) => server.close(() => resolve()))
-    }
-  }
-}
-
-export async function cleanupTrimmedPlaylist(trimmed: TrimResult | null): Promise<void> {
-  if (!trimmed) return
-  try {
-    await trimmed.close()
-  } catch {
-    // Bereits geschlossen — OK
-  }
-}
@@ -1,197 +0,0 @@
-import * as net from 'node:net'
-import * as os from 'node:os'
-import * as path from 'node:path'
-
-export function getMpvIpcPath(): string {
-  if (process.platform === 'win32') {
-    return '\\\\.\\pipe\\twitch4sd-mpv'
-  }
-  return path.join(os.tmpdir(), 'twitch4sd-mpv.sock')
-}
-
-export class MpvController {
-  private socket: net.Socket | null = null
-  private buf = ''
-  private nextRequestId = 1
-  private pendingRequests = new Map<number, (value: unknown) => void>()
-  private propertyObservers = new Map<string, Set<(value: unknown) => void>>()
-  private eventObservers = new Map<string, Set<() => void>>()
-
-  constructor(private ipcPath: string) {}
-
-  async connect(retries = 12, delayMs = 250): Promise<void> {
-    for (let i = 0; i < retries; i++) {
-      try {
-        await this._tryConnect()
-        return
-      } catch {
-        if (i < retries - 1) {
-          await new Promise<void>((r) => setTimeout(r, delayMs))
-        }
-      }
-    }
-    console.warn('[mpv] IPC connect failed after', retries, 'retries — continuing without IPC')
-  }
-
-  private _tryConnect(): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const sock = net.createConnection({ path: this.ipcPath })
-      sock.once('connect', () => {
-        this.socket = sock
-        sock.on('error', () => { /* ignore socket errors after connect */ })
-        sock.on('data', (chunk: Buffer) => this.onData(chunk))
-        resolve()
-      })
-      sock.once('error', reject)
-    })
-  }
-
-  /** Beobachtet time-pos; ruft cb mit Sekunden auf. Throttling liegt beim Aufrufer. */
-  observeTimePos(cb: (seconds: number) => void): void {
-    if (!this.socket?.writable) return
-
-    let observers = this.propertyObservers.get('time-pos')
-    if (!observers) {
-      observers = new Set()
-      this.propertyObservers.set('time-pos', observers)
-      this._send({ command: ['observe_property', 1, 'time-pos'] })
-    }
-
-    observers.add((value: unknown) => {
-      if (typeof value === 'number') cb(value)
-    })
-  }
-
-  pollTimePos(intervalMs: number, cb: (seconds: number) => void): () => void {
-    const id = setInterval(async () => {
-      const pos = await this.getTimePos()
-      if (pos !== null) cb(pos)
-    }, intervalMs)
-    return () => clearInterval(id)
-  }
-
-  onEvent(eventName: string, cb: () => void): void {
-    let observers = this.eventObservers.get(eventName)
-    if (!observers) {
-      observers = new Set()
-      this.eventObservers.set(eventName, observers)
-    }
-    observers.add(cb)
-  }
-
-  seek(seconds: number): void {
-    if (this.socket?.writable) {
-      this._send({ command: ['seek', seconds, 'relative+keyframes'] })
-    }
-  }
-
-  seekAbsolute(seconds: number): void {
-    if (this.socket?.writable) {
-      this._send({ command: ['seek', seconds, 'absolute+keyframes'] })
-    }
-  }
-
-  /** Lädt eine URL neu (oder dieselbe) mit optionaler Startposition.
-   *  Erzwingt komplette Demuxer-Neuinitialisierung — umgeht fMP4-Seek-Bug. */
-  loadFile(url: string, startSeconds?: number): void {
-    if (!this.socket?.writable) return
-    if (startSeconds !== undefined && startSeconds > 0) {
-      this._send({ command: ['loadfile', url, 'replace', '-1', `start=${startSeconds}`] })
-    } else {
-      this._send({ command: ['loadfile', url, 'replace'] })
-    }
-  }
-
-  togglePause(): void {
-    if (this.socket?.writable) {
-      this._send({ command: ['cycle', 'pause'] })
-    }
-  }
-
-  setPause(paused: boolean): void {
-    if (this.socket?.writable) {
-      this._send({ command: ['set_property', 'pause', paused] })
-    }
-  }
-
-  getTimePos(): Promise<number | null> {
-    return this.getProperty('time-pos').then((value) => (
-      typeof value === 'number' ? value : null
-    ))
-  }
-
-  quit(): void {
-    if (this.socket?.writable) {
-      try {
-        this._send({ command: ['quit'] })
-      } catch { /* ignore */ }
-    }
-    this.socket?.destroy()
-    this.socket = null
-  }
-
-  disconnect(): void {
-    this.socket?.destroy()
-    this.socket = null
-    this.buf = ''
-    this.pendingRequests.clear()
-    this.propertyObservers.clear()
-    this.eventObservers.clear()
-  }
-
-  private _send(msg: object): void {
-    this.socket?.write(JSON.stringify(msg) + '\n')
-  }
-
-  private getProperty(name: string): Promise<unknown> {
-    if (!this.socket?.writable) return Promise.resolve(null)
-
-    const requestId = this.nextRequestId++
-    return new Promise((resolve) => {
-      this.pendingRequests.set(requestId, resolve)
-      this._send({ command: ['get_property', name], request_id: requestId })
-    })
-  }
-
-  private onData(chunk: Buffer): void {
-    this.buf += chunk.toString()
-    const lines = this.buf.split('\n')
-    this.buf = lines.pop() ?? ''
-
-    for (const line of lines) {
-      if (!line.trim()) continue
-      try {
-        const msg = JSON.parse(line) as {
-          event?: string
-          name?: string
-          data?: unknown
-          request_id?: number
-        }
-
-        if (typeof msg.request_id === 'number') {
-          const resolver = this.pendingRequests.get(msg.request_id)
-          if (resolver) {
-            this.pendingRequests.delete(msg.request_id)
-            resolver(msg.data)
-          }
-        }
-
-        if (msg.event === 'property-change' && typeof msg.name === 'string') {
-          const observers = this.propertyObservers.get(msg.name)
-          if (observers) {
-            for (const observer of observers) observer(msg.data)
-          }
-        }
-
-        if (typeof msg.event === 'string') {
-          const observers = this.eventObservers.get(msg.event)
-          if (observers) {
-            for (const observer of observers) observer()
-          }
-        }
-      } catch {
-        /* ignore malformed lines */
-      }
-    }
-  }
-}
@@ -1,143 +1,35 @@
 import { EventEmitter } from 'node:events'
-import type { ChildProcess } from 'node:child_process'
-import { app } from 'electron'
-import path from 'node:path'
-import { spawnStreamlink, getStreamUrl, spawnMpv } from './streamlink'
-import { getMpvIpcPath, MpvController } from './mpvController'
-import { createTrimmedPlaylist, cleanupTrimmedPlaylist, type TrimResult } from './hlsTrimmer'
-import type { PlaybackEvent, PlaybackTimeUpdate } from './types'
+import { getStreamUrl } from './streamlink'
+import type { PlaybackEvent } from './types'
 import * as history from '../store/historyRepo'

-const POSITION_WRITE_INTERVAL_MS = 5_000
-
-interface CurrentPlayback {
-  process: ChildProcess
-  mpv: MpvController
-  hlsUrl: string
-  isFmp4: boolean
-  playbackOffsetSeconds: number
-  lastKnownAbsolutePositionSeconds: number | null
-  pendingRelativeSeekSeconds: number
-  pendingAbsoluteSeekSeconds: number | null
-  seekFlushTimer: NodeJS.Timeout | null
-  trimmedPlaylist: TrimResult | null
-  seekGeneration: number
-  loadGeneration: number
-  pendingLoadGeneration: number | null
-  stopPolling?: (() => void) | null
-}
-
-const SEEK_FLUSH_DELAY_MS = 180
-
-interface InspectedVodPlaylist {
-  isFmp4: boolean
-  isOpenEnded: boolean
-}
-
-/**
- * Laufende Twitch-VODs liefern oft eine offene EVENT-/DVR-Playlist.
- * Diese muss lokal als statischer Snapshot eingefroren werden, sonst startet mpv am Live-Rand.
- */
-async function inspectVodPlaylist(hlsUrl: string): Promise<InspectedVodPlaylist> {
-  try {
-    const res = await fetch(hlsUrl, { signal: AbortSignal.timeout(3000) })
-    if (!res.ok) {
-      return { isFmp4: true, isOpenEnded: false }
-    }
-    const text = await res.text()
-    const playlistTypeMatch = text.match(/^#EXT-X-PLAYLIST-TYPE:(.+)$/m)
-    const playlistType = playlistTypeMatch?.[1]?.trim().toUpperCase() ?? null
-    const hasEndList = text.includes('#EXT-X-ENDLIST')
-
-    return {
-      isFmp4: text.includes('#EXT-X-MAP'),
-      isOpenEnded: !hasEndList || playlistType === 'EVENT'
-    }
-  } catch {
-    return { isFmp4: true, isOpenEnded: false }
-  }
+export interface HlsUrlPayload {
+  url: string
+  isLive: boolean
+  startPosition: number
+  durationSeconds: number
+  vodId?: string
 }

 export class PlaybackService extends EventEmitter {
-  private current: CurrentPlayback | null = null
-  private readonly ipcPath = getMpvIpcPath()
-  private readonly mpvLogPath = path.join(app.getPath('userData'), 'mpv.log')
-  private loggingEnabled = true
-
-  constructor() {
-    super()
-  }
-
-  private isReloading(current: CurrentPlayback): boolean {
-    return current.seekGeneration !== current.loadGeneration
-  }
-
-  private async getAbsolutePlaybackPosition(current: CurrentPlayback): Promise<number | null> {
-    if (this.isReloading(current) && current.lastKnownAbsolutePositionSeconds !== null) {
-      return current.lastKnownAbsolutePositionSeconds
-    }
-
-    const pos = await current.mpv.getTimePos()
-    if (this.current !== current) return null
-    if (pos === null) return current.lastKnownAbsolutePositionSeconds
-
-    const absolutePos = current.playbackOffsetSeconds + pos
-    current.lastKnownAbsolutePositionSeconds = absolutePos
-    return absolutePos
-  }
-
  async startLive(channelLogin: string, quality = 'best'): Promise<void> {
-    if (this.current) await this.stop()
-
-    const proc = spawnStreamlink(`twitch.tv/${channelLogin}`, quality)
-
-    let stderrBuf = ''
-    proc.stdout?.on('data', (d: Buffer) => console.log('[streamlink]', d.toString().trim()))
-    proc.stderr?.on('data', (d: Buffer) => {
-      const s = d.toString()
-      console.log('[streamlink stderr]', s.trim())
-      stderrBuf += s
-    })
-
-    proc.on('error', (e: Error) => {
-      if (this.current?.process === proc) this.current = null
+    let hlsUrl: string
+    try {
+      hlsUrl = await getStreamUrl(`twitch.tv/${channelLogin}`, quality)
+    } catch (e) {
      this.emit('playback-event', {
        kind: 'error',
-        message: `streamlink nicht gefunden: ${e.message}`
+        message: `Stream-URL konnte nicht abgerufen werden: ${e}`
      } satisfies PlaybackEvent)
-    })
-
-    proc.on('exit', (code) => {
-      if (this.current?.process === proc) this.current = null
-      if (code !== 0 && code !== null) {
-        const snippet = stderrBuf.trim().split('\n').slice(-6).join('\n').substring(0, 500)
-        this.emit('playback-event', {
-          kind: 'error',
-          message: `streamlink Exit ${code}:\n${snippet || '(kein Output)'}`
-        } satisfies PlaybackEvent)
-      } else {
-        this.emit('playback-event', { kind: 'stopped' } satisfies PlaybackEvent)
-      }
-    })
-
-    // Für Live: mpv wird von streamlink gestartet, kein direkter IPC nötig
-    const mpv = new MpvController(this.ipcPath)
-    this.current = {
-      process: proc,
-      mpv,
-      hlsUrl: '',
-      isFmp4: false,
-      playbackOffsetSeconds: 0,
-      lastKnownAbsolutePositionSeconds: null,
-      pendingRelativeSeekSeconds: 0,
-      pendingAbsoluteSeekSeconds: null,
-      seekFlushTimer: null,
-      trimmedPlaylist: null,
-      seekGeneration: 0,
-      loadGeneration: 0,
-      pendingLoadGeneration: null
+      return
    }
-    this.emit('playback-event', { kind: 'started', channelLogin, isLive: true } satisfies PlaybackEvent)
+    this.emit('playback-hls-url', {
+      url: hlsUrl,
+      isLive: true,
+      startPosition: 0,
+      durationSeconds: 0
+    } satisfies HlsUrlPayload)
+    this.emit('playback-event', { kind: 'started', isLive: true } satisfies PlaybackEvent)
  }

  async startVod(
@@ -147,8 +39,6 @@ export class PlaybackService extends EventEmitter {
    durationSeconds: number,
    startSeconds?: number
  ): Promise<void> {
-    if (this.current) await this.stop()
-
    const resumePos = history.getPosition(vodId)
    history.upsertVod({
      vod_id: vodId,
@@ -170,282 +60,25 @@ export class PlaybackService extends EventEmitter {
    }

    const effectiveStart = startSeconds !== undefined ? startSeconds : resumePos
-    const { isFmp4, isOpenEnded } = await inspectVodPlaylist(hlsUrl)
-
-    // Laufende Live-VODs kommen als offene EVENT-/DVR-Playlist zurück.
-    // Diese muss unabhängig vom Container als lokaler Snapshot eingefroren werden,
-    // sonst startet mpv am Live-Rand statt am VOD-Anfang bzw. Kapitel-Offset.
-    // Geschlossene fMP4-VODs nutzen denselben Pfad weiterhin als Seek-Workaround.
-    let mpvUrl = hlsUrl
-    let trimmedPlaylist: TrimResult | null = null
-    let playbackOffsetSeconds = 0
-    const shouldStartViaTrimmedPlaylist = isOpenEnded || (isFmp4 && effectiveStart > 20)
-    if (shouldStartViaTrimmedPlaylist) {
-      try {
-        const trim = await createTrimmedPlaylist(hlsUrl, effectiveStart)
-        mpvUrl = trim.url
-        trimmedPlaylist = trim
-        playbackOffsetSeconds = trim.playlistStartSeconds
-      } catch (e) {
-        console.warn('[playback] Trimmed playlist failed, falling back to original URL:', e)
-      }
-    }
-
-    const proc = spawnMpv(mpvUrl, {
-      ipcPath: this.ipcPath,
-      logPath: this.loggingEnabled ? this.mpvLogPath : undefined
-    })
-
-    let mpvStderrBuf = ''
-    proc.stdout?.on('data', (d: Buffer) => console.log('[mpv]', d.toString().trim()))
-    proc.stderr?.on('data', (d: Buffer) => {
-      const s = d.toString()
-      console.log('[mpv stderr]', s.trim())
-      mpvStderrBuf += s
-    })
-
-    proc.on('error', (e: Error) => {
-      if (this.current?.process === proc) this.current = null
-      this.emit('playback-event', {
-        kind: 'error',
-        message: `mpv nicht gefunden: ${e.message}`
-      } satisfies PlaybackEvent)
-    })
-
-    proc.on('exit', (code) => {
-      if (this.current?.process === proc) this.current = null
-      if (code !== 0 && code !== null) {
-        const snippet = mpvStderrBuf.trim().split('\n').slice(-6).join('\n').substring(0, 500)
-        this.emit('playback-event', {
-          kind: 'error',
-          message: `mpv Exit ${code}:\n${snippet || '(kein Output)'}`
-        } satisfies PlaybackEvent)
-      } else {
-        this.emit('playback-event', { kind: 'stopped' } satisfies PlaybackEvent)
-      }
-    })
-
-    const mpv = new MpvController(this.ipcPath)
-    this.current = {
-      process: proc,
-      mpv,
-      hlsUrl,
-      isFmp4,
-      playbackOffsetSeconds,
-      lastKnownAbsolutePositionSeconds: effectiveStart > 0 ? effectiveStart : 0,
-      pendingRelativeSeekSeconds: 0,
-      pendingAbsoluteSeekSeconds: null,
-      seekFlushTimer: null,
-      trimmedPlaylist,
-      seekGeneration: 0,
-      loadGeneration: 0,
-      pendingLoadGeneration: null
-    }
-    this.emit('playback-event', { kind: 'started', durationSeconds } satisfies PlaybackEvent)
-
-    // IPC verbinden, initialen Resume-Seek erst nach `playback-restart` setzen und Position tracken.
-    mpv.connect().then(() => {
-      let initialSeekDone = effectiveStart <= 0 || shouldStartViaTrimmedPlaylist || isFmp4
-
-      if (!shouldStartViaTrimmedPlaylist && isFmp4 && effectiveStart > 0 && effectiveStart < 20) {
-        void this.reloadFmp4AtAbsolutePosition(effectiveStart)
-      }
-
-      // playback-restart feuert nach dem ersten dekodierten Frame.
-      mpv.onEvent('playback-restart', () => {
-        if (!this.current || this.current.mpv !== mpv) return
-
-        if (this.current.pendingLoadGeneration !== null) {
-          this.current.loadGeneration = this.current.pendingLoadGeneration
-          this.current.pendingLoadGeneration = null
-        }
-
-        // Initialer Seek für TS-Streams (fMP4 wird über Trimmed-Playlist gelöst)
-        if (initialSeekDone) return
-        initialSeekDone = true
-        mpv.seekAbsolute(effectiveStart)
-      })
-
-      // Position-Tracking
-      let lastWrite = 0
-      let lastTimeUpdateEmit = 0
-      const writePosition = (seconds: number): void => {
-        const now = Date.now()
-        if (!this.current || this.current.mpv !== mpv) return
-        if (this.isReloading(this.current)) return
-
-        const absoluteSeconds = seconds + this.current.playbackOffsetSeconds
-        this.current.lastKnownAbsolutePositionSeconds = absoluteSeconds
-
-        // ~1 Hz push to renderer for the player overlay seek bar
-        if (now - lastTimeUpdateEmit >= 1_000) {
-          lastTimeUpdateEmit = now
-          this.emit('playback-time-update', { positionSeconds: absoluteSeconds } satisfies PlaybackTimeUpdate)
-        }
-
-        // 5s throttle for SQLite history writes
-        if (now - lastWrite < POSITION_WRITE_INTERVAL_MS) return
-        lastWrite = now
-        const pos = Math.floor(absoluteSeconds)
-        history.updatePosition(vodId, pos)
-        if (durationSeconds > 0 && pos / durationSeconds > 0.95) {
-          history.markCompleted(vodId)
-        }
-      }
-
-      mpv.observeTimePos(writePosition)
-
-      // Fallback: Falls observe_property nie feuert, nach 10s auf Polling wechseln
-      setTimeout(() => {
-        if (lastWrite === 0 && this.current?.mpv === mpv) {
-          console.warn('[mpv] observe_property time-pos nicht aktiv, starte Poll-Fallback')
-          const stop = mpv.pollTimePos(POSITION_WRITE_INTERVAL_MS, writePosition)
-          if (this.current) this.current.stopPolling = stop
-        }
-      }, 10_000)
-    }).catch(() => {
-      console.warn('[mpv] IPC nicht verfügbar — Resume-Tracking deaktiviert')
-    })
+    this.emit('playback-hls-url', {
+      url: hlsUrl,
+      isLive: false,
+      startPosition: effectiveStart,
+      durationSeconds,
+      vodId
+    } satisfies HlsUrlPayload)
+    this.emit('playback-event', { kind: 'started', durationSeconds, isLive: false } satisfies PlaybackEvent)
  }

-  seek(seconds: number): void {
-    if (!this.current) return
-    this.current.pendingRelativeSeekSeconds += seconds
-    this.current.pendingAbsoluteSeekSeconds = null
-    this.scheduleSeekFlush()
+  stop(): void {
+    this.emit('playback-event', { kind: 'stopped' } satisfies PlaybackEvent)
  }

-  togglePause(): void {
-    this.current?.mpv.togglePause()
-  }
-
-  pause(): void {
-    this.current?.mpv.setPause(true)
-  }
-
-  resume(): void {
-    this.current?.mpv.setPause(false)
-  }
-
-  seekTo(seconds: number): void {
-    if (!this.current) return
-    this.current.pendingRelativeSeekSeconds = 0
-    this.current.pendingAbsoluteSeekSeconds = seconds
-    this.scheduleSeekFlush()
-  }
-
-  getCurrentPosition(): Promise<number | null> {
-    if (!this.current) return Promise.resolve(null)
-    return this.getAbsolutePlaybackPosition(this.current)
-  }
-
-  async stop(): Promise<void> {
-    if (!this.current) return
-    const { process: proc, mpv, seekFlushTimer, trimmedPlaylist, stopPolling } = this.current
-    this.current = null
-
-    if (seekFlushTimer) clearTimeout(seekFlushTimer)
-    if (stopPolling) stopPolling()
-    cleanupTrimmedPlaylist(trimmedPlaylist).catch(() => {})
-    try { mpv.quit() } catch { /* ignore */ }
-    mpv.disconnect()
-
-    await new Promise<void>((r) => setTimeout(r, 400))
-    if (!proc.killed) proc.kill()
-  }
-
-  stopAll(): void {
-    this.stop().catch(() => {})
-  }
-
-  setLoggingEnabled(enabled: boolean): void {
-    this.loggingEnabled = enabled
-  }
-
-  getLogPath(): string {
-    return this.mpvLogPath
-  }
-
-  /** fMP4: Auf eine absolute VOD-Zeit neu laden, ohne mpv-internen HLS-Seek zu verwenden. */
-  private async reloadFmp4AtAbsolutePosition(targetSeconds: number): Promise<void> {
-    if (!this.current) return
-
-    const current = this.current
-    const generation = current.seekGeneration + 1
-    const normalizedTarget = Math.max(0, targetSeconds)
-    const previousTrimmed = current.trimmedPlaylist
-    const previousAbsolutePosition = current.lastKnownAbsolutePositionSeconds
-
-    current.seekGeneration = generation
-    current.lastKnownAbsolutePositionSeconds = normalizedTarget
-
-    if (normalizedTarget < 20) {
-      current.playbackOffsetSeconds = 0
-      current.trimmedPlaylist = null
-      current.pendingLoadGeneration = generation
-      current.mpv.loadFile(current.hlsUrl, normalizedTarget > 0 ? normalizedTarget : undefined)
-      cleanupTrimmedPlaylist(previousTrimmed).catch(() => {})
-      return
-    }
-
-    try {
-      const trimmed = await createTrimmedPlaylist(current.hlsUrl, normalizedTarget)
-      if (this.current !== current || current.seekGeneration !== generation) {
-        await cleanupTrimmedPlaylist(trimmed)
-        return
-      }
-
-      current.playbackOffsetSeconds = trimmed.playlistStartSeconds
-      current.trimmedPlaylist = trimmed
-      current.pendingLoadGeneration = generation
-      current.mpv.loadFile(trimmed.url)
-      cleanupTrimmedPlaylist(previousTrimmed).catch(() => {})
-    } catch (e) {
-      if (this.current === current && current.seekGeneration === generation) {
-        current.seekGeneration = current.loadGeneration
-        current.pendingLoadGeneration = null
-        current.lastKnownAbsolutePositionSeconds = previousAbsolutePosition
-      }
-      console.warn('[playback] Trimmed playlist failed:', e)
+  updateVodPosition(vodId: string, positionSeconds: number, durationSeconds: number): void {
+    const pos = Math.floor(positionSeconds)
+    history.updatePosition(vodId, pos)
+    if (durationSeconds > 0 && pos / durationSeconds > 0.95) {
+      history.markCompleted(vodId)
    }
  }
-
-  private scheduleSeekFlush(): void {
-    if (!this.current) return
-    if (this.current.seekFlushTimer) {
-      clearTimeout(this.current.seekFlushTimer)
-    }
-
-    this.current.seekFlushTimer = setTimeout(async () => {
-      if (!this.current) return
-      this.current.seekFlushTimer = null
-
-      const { isFmp4 } = this.current
-
-      const absoluteSeek = this.current.pendingAbsoluteSeekSeconds
-      if (absoluteSeek !== null) {
-        this.current.pendingAbsoluteSeekSeconds = null
-        if (isFmp4) {
-          await this.reloadFmp4AtAbsolutePosition(absoluteSeek)
-        } else {
-          this.current.mpv.seekAbsolute(absoluteSeek)
-        }
-        return
-      }
-
-      const relativeSeek = this.current.pendingRelativeSeekSeconds
-      this.current.pendingRelativeSeekSeconds = 0
-      if (relativeSeek !== 0) {
-        if (isFmp4) {
-          const absolutePos = await this.getAbsolutePlaybackPosition(this.current)
-          if (absolutePos !== null && this.current) {
-            await this.reloadFmp4AtAbsolutePosition(absolutePos + relativeSeek)
-          }
-        } else {
-          this.current.mpv.seek(relativeSeek)
-        }
-      }
-    }, SEEK_FLUSH_DELAY_MS)
-  }
-
 }
@@ -1,4 +1,4 @@
-import { spawn, type ChildProcess } from 'node:child_process'
+import { spawn } from 'node:child_process'
 import { existsSync } from 'node:fs'
 import { join } from 'node:path'

@@ -16,38 +16,11 @@ function resolveStreamlinkBin(): string {
  return 'streamlink'
 }

-function resolveMpvBin(): string {
-  if (process.platform === 'win32') {
-    const candidates = [
-      join(process.env.ProgramFiles ?? '', 'MPV Player', 'mpv.exe'),
-      join(process.env.LOCALAPPDATA ?? '', 'Programs', 'mpv', 'mpv.exe'),
-      join(process.env.LOCALAPPDATA ?? '', 'Programs', 'mpv-player', 'mpv.exe')
-    ]
-    for (const p of candidates) {
-      if (existsSync(p)) return p
-    }
-  }
-  return 'mpv'
-}
-
 const STREAMLINK_BIN = resolveStreamlinkBin()
-const MPV_BIN = resolveMpvBin()
-
-/** Startet streamlink so dass es mpv als Player verwendet (für Live-Streams). */
-export function spawnStreamlink(url: string, quality: string): ChildProcess {
-  // --vo=gpu: Legacy-OpenGL-Renderer (gpu-next/libplacebo scheitert in Flatpak ohne Vulkan)
-  // --hwdec=auto: VAAPI-Fallback auf SW-Dekodierung wenn nötig
-  // --force-window=yes: Fenster auch bei vo-Init-Problemen erzwingen
-  return spawn(
-    STREAMLINK_BIN,
-    ['--player', MPV_BIN, '--player-args', '--fullscreen --vo=gpu --hwdec=auto --force-window=yes', url, quality],
-    { stdio: ['ignore', 'pipe', 'pipe'] }
-  )
-}

 /**
- * Fragt streamlink nach der direkten HLS-URL für einen VOD.
- * mpv kann diese URL dann nativ laden und darin seeked.
+ * Fragt streamlink nach der direkten HLS-URL für einen Stream oder VOD.
+ * Wird für Live-Streams (twitch.tv/<login>) und VODs (twitch.tv/videos/<id>) verwendet.
 */
 export function getStreamUrl(url: string, quality: string): Promise<string> {
  return new Promise((resolve, reject) => {
@@ -58,31 +31,13 @@ export function getStreamUrl(url: string, quality: string): Promise<string> {
    proc.stdout?.on('data', (d: Buffer) => { out += d.toString() })
    proc.on('error', reject)
    proc.on('exit', (code) => {
-      const hlsUrl = out.trim()
+      // Nimm die letzte Zeile die mit https:// beginnt — ignoriert Info-/Warn-Zeilen
+      const hlsUrl = out.split('\n').map((l) => l.trim()).filter((l) => l.startsWith('https://')).at(-1) ?? ''
      if (code === 0 && hlsUrl) {
        resolve(hlsUrl)
      } else {
-        reject(new Error(`streamlink --stream-url exit ${code}`))
+        reject(new Error(`streamlink --stream-url exit ${code}, stdout: ${out.trim().slice(0, 200)}`))
      }
    })
  })
 }
-
-export interface MpvOptions {
-  ipcPath: string
-  logPath?: string
-}
-
-/** Startet mpv direkt mit einer URL (HLS oder lokal). IPC-Socket wird gesetzt. */
-export function spawnMpv(url: string, { ipcPath, logPath }: MpvOptions): ChildProcess {
-  const args = [
-    url,
-    `--input-ipc-server=${ipcPath}`,
-    '--fullscreen',
-    '--msg-level=all=v'
-  ]
-  if (logPath) {
-    args.push(`--log-file=${logPath}`)
-  }
-  return spawn(MPV_BIN, args, { stdio: ['ignore', 'pipe', 'pipe'] })
-}
@@ -15,7 +15,3 @@ export interface PlaybackEvent {
  durationSeconds?: number
  isLive?: boolean
 }
-
-export interface PlaybackTimeUpdate {
-  positionSeconds: number
-}
@@ -20,16 +20,10 @@ const IPC = {
  playbackStartLive: 'playback:start-live',
  playbackStartVod: 'playback:start-vod',
  playbackStop: 'playback:stop',
-  playbackSeek: 'playback:seek',
-  playbackTogglePause: 'playback:toggle-pause',
  playbackPause: 'playback:pause',
-  playbackResume: 'playback:resume',
-  playbackSeekTo: 'playback:seek-to',
-  playbackGetCurrentPosition: 'playback:get-current-position',
-  playbackSetLoggingEnabled: 'playback:set-logging-enabled',
-  playbackGetLogPath: 'playback:get-log-path',
+  playbackReportPosition: 'playback:report-position',
  playbackEvent: 'playback:event',
-  playbackTimeUpdate: 'playback:time-update',
+  playbackHlsUrl: 'playback:hls-url',

  gamepadInput: 'gamepad-input'
 } as const
@@ -79,6 +73,14 @@ export interface PlaybackEvent {
  isLive?: boolean
 }

+export interface HlsUrlPayload {
+  url: string
+  isLive: boolean
+  startPosition: number
+  durationSeconds: number
+  vodId?: string
+}
+
 export interface GameInfo {
  id: string
  name: string
@@ -154,23 +156,18 @@ const api = {
    startVod: (vodId: string, channelLogin: string, title: string, durationSeconds: number, startSeconds?: number): Promise<void> =>
      ipcRenderer.invoke(IPC.playbackStartVod, vodId, channelLogin, title, durationSeconds, startSeconds),
    stop: (): Promise<void> => ipcRenderer.invoke(IPC.playbackStop),
-    seek: (seconds: number): Promise<void> => ipcRenderer.invoke(IPC.playbackSeek, seconds),
-    togglePause: (): Promise<void> => ipcRenderer.invoke(IPC.playbackTogglePause),
    pause: (): Promise<void> => ipcRenderer.invoke(IPC.playbackPause),
-    resume: (): Promise<void> => ipcRenderer.invoke(IPC.playbackResume),
-    seekTo: (seconds: number): Promise<void> => ipcRenderer.invoke(IPC.playbackSeekTo, seconds),
-    getCurrentPosition: (): Promise<number | null> => ipcRenderer.invoke(IPC.playbackGetCurrentPosition),
-    setLoggingEnabled: (enabled: boolean): Promise<void> => ipcRenderer.invoke(IPC.playbackSetLoggingEnabled, enabled),
-    getLogPath: (): Promise<string> => ipcRenderer.invoke(IPC.playbackGetLogPath),
+    reportPosition: (vodId: string, positionSeconds: number, durationSeconds: number): Promise<void> =>
+      ipcRenderer.invoke(IPC.playbackReportPosition, vodId, positionSeconds, durationSeconds),
    onEvent: (cb: (event: PlaybackEvent) => void): (() => void) => {
      const listener = (_e: IpcRendererEvent, event: PlaybackEvent): void => cb(event)
      ipcRenderer.on(IPC.playbackEvent, listener)
      return () => ipcRenderer.removeListener(IPC.playbackEvent, listener)
    },
-    onTimeUpdate: (cb: (data: { positionSeconds: number }) => void): (() => void) => {
-      const listener = (_e: IpcRendererEvent, data: { positionSeconds: number }): void => cb(data)
-      ipcRenderer.on(IPC.playbackTimeUpdate, listener)
-      return () => ipcRenderer.removeListener(IPC.playbackTimeUpdate, listener)
+    onHlsUrl: (cb: (payload: HlsUrlPayload) => void): (() => void) => {
+      const listener = (_e: IpcRendererEvent, payload: HlsUrlPayload): void => cb(payload)
+      ipcRenderer.on(IPC.playbackHlsUrl, listener)
+      return () => ipcRenderer.removeListener(IPC.playbackHlsUrl, listener)
    }
  },
  gamepad: {
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1280, initial-scale=1" />
    <meta http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https:;" />
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https:; media-src 'self' blob:;" />
    <title>Twitch4SteamDeck</title>
  </head>
  <body>
@@ -0,0 +1,168 @@
+import Hls from 'hls.js'
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+
+export interface VideoPlayerHandle {
+  seek(delta: number): void
+  seekTo(abs: number): void
+  togglePause(): void
+  pause(): void
+  play(): void
+  stop(): void
+  getCurrentTime(): number
+}
+
+interface Props {
+  hlsUrl: string
+  startPosition: number
+  isLive: boolean
+  vodId?: string
+  durationSeconds?: number
+  onPlaying?: () => void
+  onPaused?: () => void
+  onEnded?: () => void
+  onError?: (msg: string) => void
+  onTimeUpdate?: (seconds: number) => void
+}
+
+const POSITION_REPORT_INTERVAL_MS = 5_000
+
+export const VideoPlayer = forwardRef<VideoPlayerHandle, Props>(
+  ({ hlsUrl, startPosition, isLive, vodId, durationSeconds, onPlaying, onPaused, onEnded, onError, onTimeUpdate }, ref) => {
+    const videoRef = useRef<HTMLVideoElement>(null)
+    const hlsRef = useRef<Hls | null>(null)
+
+    useImperativeHandle(ref, () => ({
+      seek(delta: number) {
+        const v = videoRef.current
+        if (!v) return
+        v.currentTime = Math.max(0, v.currentTime + delta)
+      },
+      seekTo(abs: number) {
+        const v = videoRef.current
+        if (!v) return
+        v.currentTime = Math.max(0, abs)
+      },
+      togglePause() {
+        const v = videoRef.current
+        if (!v) return
+        if (v.paused) v.play().catch(() => {})
+        else v.pause()
+      },
+      pause() {
+        videoRef.current?.pause()
+      },
+      play() {
+        videoRef.current?.play().catch(() => {})
+      },
+      stop() {
+        const hls = hlsRef.current
+        if (hls) {
+          hls.destroy()
+          hlsRef.current = null
+        }
+        const v = videoRef.current
+        if (v) {
+          v.src = ''
+          v.load()
+        }
+      },
+      getCurrentTime() {
+        return videoRef.current?.currentTime ?? 0
+      }
+    }))
+
+    // HLS-Player initialisieren und URL laden
+    useEffect(() => {
+      const video = videoRef.current
+      if (!video) return
+
+      // Bestehende hls.js-Instanz zerstören
+      if (hlsRef.current) {
+        hlsRef.current.destroy()
+        hlsRef.current = null
+      }
+
+      console.log('[VideoPlayer] Hls.isSupported:', Hls.isSupported(), '| URL:', hlsUrl.slice(0, 80))
+
+      if (Hls.isSupported()) {
+        const hls = new Hls({ enableWorker: false })
+        hlsRef.current = hls
+
+        // Erst Media attachieren, dann Source laden (zuverlässiger in Electron/Chromium)
+        hls.attachMedia(video)
+        console.log('[VideoPlayer] attachMedia aufgerufen')
+
+        hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+          console.log('[VideoPlayer] MEDIA_ATTACHED — lade Source')
+          hls.loadSource(hlsUrl)
+        })
+
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          console.log('[VideoPlayer] MANIFEST_PARSED — readyState:', video.readyState, 'networkState:', video.networkState)
+          if (startPosition > 0 && !isLive) {
+            video.currentTime = startPosition
+          }
+          // Mit der korrekten Reihenfolge (attachMedia → MEDIA_ATTACHED → loadSource)
+          // ist die MediaSource beim MANIFEST_PARSED-Event bereits am Video-Element —
+          // play() kann direkt aufgerufen werden.
+          video.play().then(() => {
+            console.log('[VideoPlayer] play() erfolgreich')
+          }).catch((err: unknown) => {
+            console.error('[VideoPlayer] play() fehlgeschlagen:', err)
+            onError?.(`Wiedergabe konnte nicht gestartet werden: ${err}`)
+          })
+        })
+
+        hls.on(Hls.Events.ERROR, (_evt, data) => {
+          console.warn('[VideoPlayer] hls.js Fehler:', data.type, data.details, data.fatal)
+          if (data.fatal) {
+            onError?.(`HLS-Fehler: ${data.type} – ${data.details}`)
+          }
+        })
+      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        // Native HLS (nicht Electron, aber als Fallback)
+        video.src = hlsUrl
+        if (startPosition > 0 && !isLive) {
+          video.currentTime = startPosition
+        }
+        video.play().catch(() => {})
+      } else {
+        onError?.('HLS wird in dieser Umgebung nicht unterstützt')
+      }
+
+      return () => {
+        if (hlsRef.current) {
+          hlsRef.current.destroy()
+          hlsRef.current = null
+        }
+      }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hlsUrl])
+
+    // VOD-Fortschritt alle 5s an Main-Prozess melden (für SQLite History)
+    useEffect(() => {
+      if (!vodId || !durationSeconds || isLive) return
+      const id = setInterval(() => {
+        const v = videoRef.current
+        if (!v || v.paused || v.ended) return
+        void window.t4sd.playback.reportPosition(vodId, v.currentTime, durationSeconds)
+      }, POSITION_REPORT_INTERVAL_MS)
+      return () => clearInterval(id)
+    }, [vodId, durationSeconds, isLive])
+
+    return (
+      <div style={{ position: 'fixed', inset: 0, zIndex: 100, background: '#000' }}>
+        <video
+          ref={videoRef}
+          style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+          onPlaying={onPlaying}
+          onPause={onPaused}
+          onEnded={onEnded}
+          onTimeUpdate={(e) => onTimeUpdate?.((e.target as HTMLVideoElement).currentTime)}
+        />
+      </div>
+    )
+  }
+)
+
+VideoPlayer.displayName = 'VideoPlayer'
@@ -6,7 +6,6 @@ export interface AppSettings {
  streamBadgeMode: StreamBadgeMode
  sidebarWidth: number
  badgeGap: number
-  mpvLoggingEnabled: boolean
 }

 const STORAGE_KEY = 't4sd:settings'
@@ -19,8 +18,7 @@ const BADGE_GAP_DEFAULT = 6
 const DEFAULTS: AppSettings = {
  streamBadgeMode: 'language',
  sidebarWidth: SIDEBAR_DEFAULT,
-  badgeGap: BADGE_GAP_DEFAULT,
-  mpvLoggingEnabled: true
+  badgeGap: BADGE_GAP_DEFAULT
 }

 export { SIDEBAR_MIN, SIDEBAR_MAX, SIDEBAR_DEFAULT, BADGE_GAP_MIN, BADGE_GAP_MAX, BADGE_GAP_DEFAULT }
@@ -38,10 +36,7 @@ function loadSettings(): AppSettings {
        ? (parsed.streamBadgeMode as StreamBadgeMode)
        : DEFAULTS.streamBadgeMode,
      sidebarWidth: sw >= SIDEBAR_MIN && sw <= SIDEBAR_MAX ? sw : SIDEBAR_DEFAULT,
-      badgeGap: bg >= BADGE_GAP_MIN && bg <= BADGE_GAP_MAX ? bg : BADGE_GAP_DEFAULT,
-      mpvLoggingEnabled: typeof parsed.mpvLoggingEnabled === 'boolean'
-        ? parsed.mpvLoggingEnabled
-        : DEFAULTS.mpvLoggingEnabled
+      badgeGap: bg >= BADGE_GAP_MIN && bg <= BADGE_GAP_MAX ? bg : BADGE_GAP_DEFAULT
    }
  } catch {
    return DEFAULTS
@@ -61,7 +56,6 @@ interface SettingsCtx {
  setStreamBadgeMode: (mode: StreamBadgeMode) => void
  setSidebarWidth: (width: number) => void
  setBadgeGap: (gap: number) => void
-  setMpvLoggingEnabled: (enabled: boolean) => void
 }

 const SettingsContext = createContext<SettingsCtx | null>(null)
@@ -74,10 +68,6 @@ export function SettingsProvider({ children }: { children: React.ReactNode }): J
    document.documentElement.style.setProperty('--badge-gap', `${settings.badgeGap}px`)
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

-  useEffect(() => {
-    void window.t4sd.playback.setLoggingEnabled(settings.mpvLoggingEnabled)
-  }, [settings.mpvLoggingEnabled])
-
  const setStreamBadgeMode = useCallback((mode: StreamBadgeMode) => {
    setSettings((prev) => {
      const next = { ...prev, streamBadgeMode: mode }
@@ -106,16 +96,8 @@ export function SettingsProvider({ children }: { children: React.ReactNode }): J
    document.documentElement.style.setProperty('--badge-gap', `${clamped}px`)
  }, [])

-  const setMpvLoggingEnabled = useCallback((enabled: boolean) => {
-    setSettings((prev) => {
-      const next = { ...prev, mpvLoggingEnabled: enabled }
-      saveSettings(next)
-      return next
-    })
-  }, [])
-
  return (
-    <SettingsContext.Provider value={{ settings, setStreamBadgeMode, setSidebarWidth, setBadgeGap, setMpvLoggingEnabled }}>
+    <SettingsContext.Provider value={{ settings, setStreamBadgeMode, setSidebarWidth, setBadgeGap }}>
      {children}
    </SettingsContext.Provider>
  )
@@ -1,6 +1,8 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { PlaybackOverlay } from '../components/PlaybackOverlay'
 import { GamepadHintItem } from '../components/GamepadPrompt'
 import Sidebar, { SIDEBAR_ITEMS, type TabKey } from '../components/Sidebar'
+import { VideoPlayer, type VideoPlayerHandle } from '../components/VideoPlayer'
 import AccountScreen from './AccountScreen'
 import BrowseScreen from './BrowseScreen'
 import CategoryScreen from './CategoryScreen'
@@ -8,10 +10,11 @@ import ChannelScreen from './ChannelScreen'
 import FollowingScreen from './FollowingScreen'
 import SettingsScreen from './SettingsScreen'
 import StreamListScreen from './StreamListScreen'
-import type { FollowedChannelInfo, GameInfo } from '../types/t4sd'
+import type { FollowedChannelInfo, GameInfo, HlsUrlPayload } from '../types/t4sd'

 type Region = 'sidebar' | 'main'
 type QuitChoice = 'yes' | 'no'
+type GlobalPlayState = 'idle' | 'starting' | 'playing' | 'paused'

 interface Props {
  onLogout: () => void
@@ -26,6 +29,39 @@ export default function AppShell({ onLogout }: Props): JSX.Element {
  const [quitDialogOpen, setQuitDialogOpen] = useState(false)
  const [quitDialogChoice, setQuitDialogChoice] = useState<QuitChoice>('no')

+  // Globaler Playback-State — für Direkt-Start aus BrowseScreen/StreamListScreen/CategoryScreen
+  const [liveChannel, setLiveChannel] = useState<FollowedChannelInfo | null>(null)
+  const [liveHlsPayload, setLiveHlsPayload] = useState<HlsUrlPayload | null>(null)
+  const [livePlayState, setLivePlayState] = useState<GlobalPlayState>('idle')
+  const [livePosition, setLivePosition] = useState(0)
+  const liveVideoRef = useRef<VideoPlayerHandle>(null)
+  // Verhindert dass ChannelScreen-Events den globalen Overlay aktivieren
+  const isGlobalPlaybackInitiated = useRef(false)
+
+  const isGlobalPlaying = livePlayState !== 'idle'
+
+  // IPC-Listener für globalen Playback (nur wenn kein ChannelScreen aktiv)
+  useEffect(() => {
+    const unsubHls = window.t4sd.playback.onHlsUrl((payload: HlsUrlPayload) => {
+      if (isGlobalPlaybackInitiated.current) {
+        setLiveHlsPayload(payload)
+      }
+    })
+    const unsubEvent = window.t4sd.playback.onEvent((ev) => {
+      if (!isGlobalPlaybackInitiated.current) return
+      if (ev.kind === 'started') {
+        setLivePlayState('playing')
+      } else if (ev.kind === 'stopped' || ev.kind === 'error') {
+        isGlobalPlaybackInitiated.current = false
+        setLiveHlsPayload(null)
+        setLivePlayState('idle')
+        setLiveChannel(null)
+        setLivePosition(0)
+      }
+    })
+    return () => { unsubHls(); unsubEvent() }
+  }, [])
+
  const requestSidebar = useCallback(() => {
    const idx = SIDEBAR_ITEMS.findIndex((t) => t.key === tab)
    setSidebarIndex(idx >= 0 ? idx : 0)
@@ -54,6 +90,19 @@ export default function AppShell({ onLogout }: Props): JSX.Element {
    setSelectedChannel(ch)
  }, [])

+  // Direkt-Start: kein ChannelScreen — globaler Overlay startet sofort
+  const handleStartLive = useCallback((ch: FollowedChannelInfo) => {
+    isGlobalPlaybackInitiated.current = true
+    setLiveChannel(ch)
+    setLivePlayState('starting')
+    void window.t4sd.playback.startLive(ch.broadcasterLogin)
+  }, [])
+
+  const handleStopLive = useCallback(() => {
+    liveVideoRef.current?.stop()
+    void window.t4sd.playback.stop()
+  }, [])
+
  const handleBack = useCallback(() => {
    setSelectedChannel(null)
  }, [])
@@ -62,6 +111,48 @@ export default function AppShell({ onLogout }: Props): JSX.Element {
    setSelectedCategory(game)
  }, [])

+  // Key-Handler für den globalen Playback-Overlay (B=Stop, A=Pause, Pfeile=Seek)
+  useEffect(() => {
+    if (!isGlobalPlaying) return
+    const onKey = (e: KeyboardEvent): void => {
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault()
+          handleStopLive()
+          break
+        case 'Enter':
+        case ' ':
+          e.preventDefault()
+          if (livePlayState === 'playing') {
+            liveVideoRef.current?.pause()
+            setLivePlayState('paused')
+          } else if (livePlayState === 'paused') {
+            liveVideoRef.current?.play()
+            setLivePlayState('playing')
+          }
+          break
+        case 'ArrowLeft':
+          e.preventDefault()
+          liveVideoRef.current?.seek(-30)
+          break
+        case 'ArrowRight':
+          e.preventDefault()
+          liveVideoRef.current?.seek(30)
+          break
+        case 'l2':
+          e.preventDefault()
+          liveVideoRef.current?.seek(-300)
+          break
+        case 'r2':
+          e.preventDefault()
+          liveVideoRef.current?.seek(300)
+          break
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [isGlobalPlaying, livePlayState, handleStopLive])
+
  // Key-Handler für die Sidebar (wenn sie den Fokus hat)
  useEffect(() => {
    if (region !== 'sidebar') return
@@ -121,7 +212,7 @@ export default function AppShell({ onLogout }: Props): JSX.Element {
    return () => window.removeEventListener('keydown', onKey)
  }, [region, sidebarIndex, quitDialogOpen, openQuitDialog, closeQuitDialog, confirmQuitDialog])

-  const mainFocus = region === 'main'
+  const mainFocus = region === 'main' && !isGlobalPlaying
  const activeItem = SIDEBAR_ITEMS.find((item) => item.key === tab) ?? SIDEBAR_ITEMS[0]

  return (
@@ -143,6 +234,7 @@ export default function AppShell({ onLogout }: Props): JSX.Element {
          <CategoryScreen
            game={selectedCategory}
            onSelectChannel={handleSelectChannel}
+            onStartLive={handleStartLive}
            onBack={() => setSelectedCategory(null)}
          />
        ) : (
@@ -159,6 +251,7 @@ export default function AppShell({ onLogout }: Props): JSX.Element {
                hasFocus={mainFocus}
                onRequestSidebar={requestSidebar}
                onSelectChannel={handleSelectChannel}
+                onStartLive={handleStartLive}
                onSelectCategory={handleSelectCategory}
              />
            )}
@@ -169,6 +262,7 @@ export default function AppShell({ onLogout }: Props): JSX.Element {
                language={activeItem.screen.language}
                onRequestSidebar={requestSidebar}
                onSelectChannel={handleSelectChannel}
+                onStartLive={handleStartLive}
              />
            )}
            {activeItem.screen.kind === 'account' && (
@@ -184,6 +278,68 @@ export default function AppShell({ onLogout }: Props): JSX.Element {
          </>
        )}
      </div>
+
+      {/* Globaler Video-Overlay — startet direkt ohne ChannelScreen */}
+      {isGlobalPlaying && !selectedChannel && (
+        <>
+          {/* Lade-Overlay während streamlink läuft */}
+          {livePlayState === 'starting' && !liveHlsPayload && (
+            <div style={{
+              position: 'fixed', inset: 0, zIndex: 100,
+              background: '#000', display: 'flex',
+              alignItems: 'center', justifyContent: 'center',
+              color: '#fff', fontSize: '1.25rem'
+            }}>
+              Starte Wiedergabe…
+            </div>
+          )}
+          {/* VideoPlayer + Overlay sobald HLS-URL da ist */}
+          {liveHlsPayload && (
+            <>
+              <VideoPlayer
+                ref={liveVideoRef}
+                hlsUrl={liveHlsPayload.url}
+                startPosition={0}
+                isLive={true}
+                onPlaying={() => setLivePlayState('playing')}
+                onPaused={() => setLivePlayState('paused')}
+                onEnded={handleStopLive}
+                onError={() => {
+                  isGlobalPlaybackInitiated.current = false
+                  setLiveHlsPayload(null)
+                  setLivePlayState('idle')
+                  setLiveChannel(null)
+                }}
+                onTimeUpdate={(s) => setLivePosition(s)}
+              />
+              {(livePlayState === 'playing' || livePlayState === 'paused') && (
+                <PlaybackOverlay
+                  playState={livePlayState}
+                  isLive={true}
+                  durationSeconds={0}
+                  currentPosition={livePosition}
+                  channelName={liveChannel?.broadcasterName ?? ''}
+                  channelAvatar={liveChannel?.profileImageUrl ?? ''}
+                  title={liveChannel?.streamTitle ?? ''}
+                  onTogglePause={() => {
+                    if (livePlayState === 'playing') {
+                      liveVideoRef.current?.pause()
+                      setLivePlayState('paused')
+                    } else {
+                      liveVideoRef.current?.play()
+                      setLivePlayState('playing')
+                    }
+                  }}
+                  onSeek={(s) => liveVideoRef.current?.seek(s)}
+                  onSeekTo={(s) => liveVideoRef.current?.seekTo(s)}
+                  onStop={handleStopLive}
+                />
+              )}
+            </>
+          )}
+        </>
+      )}
+
      {quitDialogOpen && (
        <div className="quit-dialog-overlay">
          <div className="quit-dialog" role="dialog" aria-modal="true" aria-labelledby="quit-dialog-title">
@@ -7,6 +7,7 @@ interface Props {
  hasFocus: boolean
  onRequestSidebar: () => void
  onSelectChannel: (ch: FollowedChannelInfo) => void
+  onStartLive: (ch: FollowedChannelInfo) => void
  onSelectCategory: (game: GameInfo) => void
 }

@@ -30,6 +31,7 @@ export default function BrowseScreen({
  hasFocus,
  onRequestSidebar,
  onSelectChannel,
+  onStartLive,
  onSelectCategory
 }: Props): JSX.Element {
  const [topStreams, setTopStreams] = useState<FollowedChannelInfo[]>([])
@@ -40,7 +42,6 @@ export default function BrowseScreen({
  const [gridIndex, setGridIndex] = useState(0)
  const [nextCursor, setNextCursor] = useState<string | undefined>(undefined)
  const [isLoadingMore, setIsLoadingMore] = useState(false)
-  const [isPlaying, setIsPlaying] = useState(false)
  const gridRef = useRef<HTMLDivElement>(null)

  const load = useCallback(async () => {
@@ -82,13 +83,6 @@ export default function BrowseScreen({
    void load()
  }, [load])

-  useEffect(() => {
-    return window.t4sd.playback.onEvent((ev) => {
-      if (ev.kind === 'started') setIsPlaying(true)
-      else if (ev.kind === 'stopped' || ev.kind === 'error') setIsPlaying(false)
-    })
-  }, [])
-
  // Nächste Seite automatisch nachladen wenn letztes Element fokussiert wird
  useEffect(() => {
    if (focusRegion !== 'grid' || loadState !== 'ok') return
@@ -108,15 +102,6 @@ export default function BrowseScreen({
    if (!hasFocus) return

    const onKey = (e: KeyboardEvent): void => {
-      // Während der Wiedergabe: nur Stop erlauben, Navigation blockieren
-      if (isPlaying) {
-        e.preventDefault()
-        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
-          void window.t4sd.playback.stop()
-        }
-        return
-      }
-
      if (e.key === 'y' || e.key === 'Y') {
        void load()
        return
@@ -145,7 +130,7 @@ export default function BrowseScreen({
          case 'Enter': {
            e.preventDefault()
            const ch = topStreams[shelfIndex]
-            if (ch) void window.t4sd.playback.startLive(ch.broadcasterLogin)
+            if (ch) onStartLive(ch)
            break
          }
          case 'x':
@@ -202,7 +187,7 @@ export default function BrowseScreen({

    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
-  }, [hasFocus, loadState, focusRegion, shelfIndex, gridIndex, topStreams, topGames, getGridColumns, onRequestSidebar, onSelectChannel, onSelectCategory, load, isPlaying])
+  }, [hasFocus, loadState, focusRegion, shelfIndex, gridIndex, topStreams, topGames, getGridColumns, onRequestSidebar, onSelectChannel, onStartLive, onSelectCategory, load])

  // Grid-Karte in den Viewport scrollen wenn fokussiert
  useEffect(() => {
@@ -271,7 +256,7 @@ export default function BrowseScreen({
                  <button
                    key={ch.broadcasterId}
                    className={`browse-stream-card${focusRegion === 'shelf' && shelfIndex === i ? ' browse-stream-card--focused' : ''}`}
-                    onClick={() => void window.t4sd.playback.startLive(ch.broadcasterLogin)}
+                    onClick={() => onStartLive(ch)}
                    tabIndex={-1}
                  >
                    <div className="browse-stream-card__thumb">
@@ -6,16 +6,16 @@ import FocusableCard from '../components/FocusableCard'
 interface Props {
  game: GameInfo
  onSelectChannel: (ch: FollowedChannelInfo) => void
+  onStartLive: (ch: FollowedChannelInfo) => void
  onBack: () => void
 }

 type LoadState = 'loading' | 'ok' | 'error'

-export default function CategoryScreen({ game, onSelectChannel, onBack }: Props): JSX.Element {
+export default function CategoryScreen({ game, onSelectChannel, onStartLive, onBack }: Props): JSX.Element {
  const [streams, setStreams] = useState<FollowedChannelInfo[]>([])
  const [loadState, setLoadState] = useState<LoadState>('loading')
  const [focusedIndex, setFocusedIndex] = useState(0)
-  const [isPlaying, setIsPlaying] = useState(false)
  const gridRef = useRef<HTMLDivElement>(null)

  const load = useCallback(async () => {
@@ -35,13 +35,6 @@ export default function CategoryScreen({ game, onSelectChannel, onBack }: Props)
    void load()
  }, [load])

-  useEffect(() => {
-    return window.t4sd.playback.onEvent((ev) => {
-      if (ev.kind === 'started') setIsPlaying(true)
-      else if (ev.kind === 'stopped' || ev.kind === 'error') setIsPlaying(false)
-    })
-  }, [])
-
  const getColumns = useCallback((): number => {
    const grid = gridRef.current
    if (!grid) return 4
@@ -51,15 +44,6 @@ export default function CategoryScreen({ game, onSelectChannel, onBack }: Props)

  useEffect(() => {
    const onKey = (e: KeyboardEvent): void => {
-      // Während der Wiedergabe: nur Stop erlauben, Navigation blockieren
-      if (isPlaying) {
-        e.preventDefault()
-        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
-          void window.t4sd.playback.stop()
-        }
-        return
-      }
-
      if (e.key === 'y' || e.key === 'Y') {
        void load()
        return
@@ -97,7 +81,7 @@ export default function CategoryScreen({ game, onSelectChannel, onBack }: Props)
        case 'Enter': {
          e.preventDefault()
          const ch = streams[focusedIndex]
-          if (ch) void window.t4sd.playback.startLive(ch.broadcasterLogin)
+          if (ch) onStartLive(ch)
          break
        }
        case 'x':
@@ -112,7 +96,7 @@ export default function CategoryScreen({ game, onSelectChannel, onBack }: Props)

    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
-  }, [loadState, streams, focusedIndex, isPlaying, getColumns, onBack, onSelectChannel, load])
+  }, [loadState, streams, focusedIndex, getColumns, onBack, onSelectChannel, onStartLive, load])

  return (
    <div className="category-screen">
@@ -169,7 +153,7 @@ export default function CategoryScreen({ game, onSelectChannel, onBack }: Props)
              channel={ch}
              focused={i === focusedIndex}
              onFocus={() => setFocusedIndex(i)}
-              onSelect={() => void window.t4sd.playback.startLive(ch.broadcasterLogin)}
+              onSelect={() => onStartLive(ch)}
            />
          ))}
        </div>
@@ -1,7 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { GamepadHintItem, GamepadPrompt } from '../components/GamepadPrompt'
 import { PlaybackOverlay } from '../components/PlaybackOverlay'
-import type { FollowedChannelInfo, PlaybackEvent, VodChapter, VodInfo, VodProgress } from '../types/t4sd'
+import { VideoPlayer, type VideoPlayerHandle } from '../components/VideoPlayer'
+import type { FollowedChannelInfo, HlsUrlPayload, PlaybackEvent, VodChapter, VodInfo, VodProgress } from '../types/t4sd'

 interface Props {
  channel: FollowedChannelInfo
@@ -77,8 +78,12 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
  const [currentPosition, setCurrentPosition] = useState(0)
  const [vodDuration, setVodDuration] = useState(0)
  const [isLivePlayback, setIsLivePlayback] = useState(false)
+  // HLS-Player state
+  const [hlsPayload, setHlsPayload] = useState<HlsUrlPayload | null>(null)
+
  const watchBtnRef = useRef<HTMLButtonElement>(null)
  const chapterListRef = useRef<HTMLUListElement>(null)
+  const videoRef = useRef<VideoPlayerHandle>(null)

  useEffect(() => {
    window.t4sd.twitch
@@ -105,7 +110,7 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
            setChapterPanelVod(null)
            setFocusRegion('hero')
            if (wasPlayingBeforeChapters) {
-              void window.t4sd.playback.resume()
+              videoRef.current?.play()
              setPlayState('playing')
            }
          } else {
@@ -125,12 +130,12 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
          const chapter = chapters[chapterIndex]
          if (duringPlayback) {
            if (chapter) {
-              void window.t4sd.playback.seekTo(chapter.positionSeconds)
-              void window.t4sd.playback.resume()
+              videoRef.current?.seekTo(chapter.positionSeconds)
+              videoRef.current?.play()
              setPlayState('playing')
            } else {
              if (wasPlayingBeforeChapters) {
-                void window.t4sd.playback.resume()
+                videoRef.current?.play()
                setPlayState('playing')
              }
            }
@@ -153,34 +158,35 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
        switch (e.key) {
          case 'l2':
            e.preventDefault()
-            void window.t4sd.playback.seek(-300)
+            videoRef.current?.seek(-300)
            break
          case 'r2':
            e.preventDefault()
-            void window.t4sd.playback.seek(300)
+            videoRef.current?.seek(300)
            break
          case 'ArrowLeft':
            e.preventDefault()
-            void window.t4sd.playback.seek(-30)
+            videoRef.current?.seek(-30)
            break
          case 'ArrowRight':
            e.preventDefault()
-            void window.t4sd.playback.seek(30)
+            videoRef.current?.seek(30)
            break
          case 'Enter':
          case ' ':
            e.preventDefault()
            if (playState === 'playing') {
-              void window.t4sd.playback.togglePause()
+              void window.t4sd.playback.pause()
+              videoRef.current?.pause()
              setPlayState('paused')
            } else if (playState === 'paused') {
-              void window.t4sd.playback.togglePause()
+              videoRef.current?.play()
              setPlayState('playing')
            }
            break
          case 'Escape':
            e.preventDefault()
-            void window.t4sd.playback.stop()
+            void handleStop()
            break
          case 'y': {
            e.preventDefault()
@@ -246,6 +252,7 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
    return () => window.removeEventListener('keydown', onKey)
  }, [focusRegion, playState, vods, shelfIndex, onBack, chapters, chapterIndex, chapterPanelVod, wasPlayingBeforeChapters, currentVod])

+  // playback:event — verarbeitet started / stopped / error
  useEffect(() => {
    const unsub = window.t4sd.playback.onEvent((ev: PlaybackEvent) => {
      if (ev.kind === 'started') {
@@ -256,6 +263,7 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
      } else if (ev.kind === 'stopped') {
        const nextChapterVod = pendingChapterVod
        setPlayState('idle')
+        setHlsPayload(null)
        setChapterPanelVod(null)
        setCurrentVod(null)
        // Progress nach Stop neu laden
@@ -273,6 +281,7 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
        }
      } else if (ev.kind === 'error') {
        setPlayState('error')
+        setHlsPayload(null)
        setChapterPanelVod(null)
        setCurrentVod(null)
        setPendingChapterVod(null)
@@ -282,19 +291,19 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
    return unsub
  }, [pendingChapterVod, vods])

-  // Subscribe to ~1 Hz position updates from main process for the overlay seek bar
+  // playback:hls-url — HLS-URL vom Main-Prozess empfangen und an VideoPlayer weiterleiten
  useEffect(() => {
-    if (playState !== 'playing' && playState !== 'paused') return
-    const unsub = window.t4sd.playback.onTimeUpdate(({ positionSeconds }) => {
-      setCurrentPosition(positionSeconds)
+    const unsub = window.t4sd.playback.onHlsUrl((payload: HlsUrlPayload) => {
+      setHlsPayload(payload)
    })
    return unsub
-  }, [playState])
+  }, [])

  useEffect(() => {
    watchBtnRef.current?.focus()
  }, [])

+
  useEffect(() => {
    if (!chapterListRef.current) return
    const item = chapterListRef.current.children[chapterIndex] as HTMLElement | undefined
@@ -321,19 +330,17 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
  const jumpChapter = async (direction: 1 | -1): Promise<void> => {
    if (!currentVod) return

-    const [loadedChapters, currentPosition] = await Promise.all([
-      loadChapters(currentVod.id),
-      window.t4sd.playback.getCurrentPosition()
-    ])
-    if (loadedChapters.length === 0 || currentPosition === null) return
+    const currentTime = videoRef.current?.getCurrentTime() ?? 0
+    const loadedChapters = await loadChapters(currentVod.id)
+    if (loadedChapters.length === 0) return

    const epsilon = 1
    const target = direction > 0
-      ? loadedChapters.find((chapter) => chapter.positionSeconds > currentPosition + epsilon)
-      : [...loadedChapters].reverse().find((chapter) => chapter.positionSeconds < currentPosition - epsilon)
+      ? loadedChapters.find((chapter) => chapter.positionSeconds > currentTime + epsilon)
+      : [...loadedChapters].reverse().find((chapter) => chapter.positionSeconds < currentTime - epsilon)

    if (target) {
-      await window.t4sd.playback.seekTo(target.positionSeconds)
+      videoRef.current?.seekTo(target.positionSeconds)
    }
  }

@@ -371,8 +378,18 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {

  const openChapterPanel = (vod: VodInfo, duringPlayback: boolean): void => {
    if (duringPlayback) {
-      setPendingChapterVod(vod)
-      void window.t4sd.playback.stop()
+      videoRef.current?.pause()
+      setWasPlayingBeforeChapters(playState === 'playing')
+      setPlayState('paused')
+      setChapterPanelVod(vod)
+      setChapters([])
+      setChapterIndex(0)
+      setChaptersLoading(true)
+      setFocusRegion('chapters')
+      void loadChapters(vod.id)
+        .then((loaded) => setChapters(loaded))
+        .catch(() => {})
+        .finally(() => setChaptersLoading(false))
      return
    }
    showChapterPanel(vod)
@@ -401,11 +418,13 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
  }

  const handleStop = async (): Promise<void> => {
+    videoRef.current?.stop()
    await window.t4sd.playback.stop()
  }

  const thumb = resolveThumbnail(channel.thumbnailUrl)
  const trackOffset = shelfIndex * (CARD_W + CARD_GAP)
+  const isActivePlayback = playState === 'playing' || playState === 'paused'

  return (
    <div className="channel-screen">
@@ -475,7 +494,7 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
              </button>
            )}

-            {(playState === 'playing' || playState === 'paused') && (
+            {isActivePlayback && (
              <span className="channel-screen__playing-hint">
                ● Wiedergabe{playState === 'paused' ? ' (Pause)' : ''}
              </span>
@@ -591,7 +610,7 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
            {!chaptersLoading && chapters.length === 0 && (
              <p className="chapter-overlay__msg">
                Keine Kapitel gefunden.{' '}
-                {(playState === 'playing' || playState === 'paused') ? (
+                {isActivePlayback ? (
                  <span className="gamepad-inline-action">
                    <GamepadPrompt prompt="a" />
                    <span>zum Fortsetzen.</span>
@@ -622,8 +641,29 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
        </div>
      )}

+      {/* HTML5 Video Player — rendert innerhalb des Electron-Fensters */}
+      {hlsPayload && (
+        <VideoPlayer
+          ref={videoRef}
+          hlsUrl={hlsPayload.url}
+          startPosition={hlsPayload.startPosition}
+          isLive={hlsPayload.isLive}
+          vodId={hlsPayload.vodId}
+          durationSeconds={hlsPayload.durationSeconds}
+          onTimeUpdate={(s) => setCurrentPosition(s)}
+          onPlaying={() => setPlayState('playing')}
+          onPaused={() => setPlayState('paused')}
+          onEnded={() => void handleStop()}
+          onError={(msg) => {
+            setPlayState('error')
+            setErrorMsg(msg)
+            setHlsPayload(null)
+          }}
+        />
+      )}
+
      {/* Player overlay – shown during VOD/Live playback */}
-      {(playState === 'playing' || playState === 'paused') && (
+      {isActivePlayback && (
        <PlaybackOverlay
          playState={playState}
          durationSeconds={vodDuration}
@@ -635,14 +675,15 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
          onTogglePause={() => {
            if (playState === 'playing') {
              void window.t4sd.playback.pause()
+              videoRef.current?.pause()
              setPlayState('paused')
            } else {
-              void window.t4sd.playback.resume()
+              videoRef.current?.play()
              setPlayState('playing')
            }
          }}
-          onSeek={(s) => void window.t4sd.playback.seek(s)}
-          onSeekTo={(s) => void window.t4sd.playback.seekTo(s)}
+          onSeek={(s) => videoRef.current?.seek(s)}
+          onSeekTo={(s) => videoRef.current?.seekTo(s)}
          onStop={() => void handleStop()}
        />
      )}
@@ -33,23 +33,17 @@ const OPTIONS: Option[] = [
 const SIDEBAR_STEP = 10
 const BADGE_GAP_STEP = 2

-/** Total focusable rows: badge options + sidebar slider + badge gap slider + logging toggle */
+/** Total focusable rows: badge options + sidebar slider + badge gap slider */
 const SIDEBAR_SLIDER_ROW = OPTIONS.length
 const BADGE_GAP_SLIDER_ROW = OPTIONS.length + 1
-const LOGGING_TOGGLE_ROW = OPTIONS.length + 2
-const TOTAL_ROWS = OPTIONS.length + 3
+const TOTAL_ROWS = OPTIONS.length + 2

 export default function SettingsScreen({ hasFocus, onRequestSidebar }: Props): JSX.Element {
-  const { settings, setStreamBadgeMode, setSidebarWidth, setBadgeGap, setMpvLoggingEnabled } = useSettings()
-  const [logPath, setLogPath] = useState('/home/deck/.var/app/tv.twitch4steamdeck.App/config/Electron/mpv.log')
+  const { settings, setStreamBadgeMode, setSidebarWidth, setBadgeGap } = useSettings()
  const [focusedIndex, setFocusedIndex] = useState(() =>
    Math.max(0, OPTIONS.findIndex((o) => o.mode === settings.streamBadgeMode))
  )

-  useEffect(() => {
-    void window.t4sd.playback.getLogPath().then(setLogPath).catch(() => {})
-  }, [])
-
  useEffect(() => {
    if (!hasFocus) return
    const onKey = (e: KeyboardEvent): void => {
@@ -94,8 +88,6 @@ export default function SettingsScreen({ hasFocus, onRequestSidebar }: Props): J
            setSidebarWidth(SIDEBAR_DEFAULT)
          } else if (focusedIndex === BADGE_GAP_SLIDER_ROW) {
            setBadgeGap(BADGE_GAP_DEFAULT)
-          } else if (focusedIndex === LOGGING_TOGGLE_ROW) {
-            setMpvLoggingEnabled(!settings.mpvLoggingEnabled)
          }
          break
        }
@@ -103,7 +95,7 @@ export default function SettingsScreen({ hasFocus, onRequestSidebar }: Props): J
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
-  }, [hasFocus, focusedIndex, settings.sidebarWidth, settings.badgeGap, settings.mpvLoggingEnabled, onRequestSidebar, setStreamBadgeMode, setSidebarWidth, setBadgeGap, setMpvLoggingEnabled])
+  }, [hasFocus, focusedIndex, settings.sidebarWidth, settings.badgeGap, onRequestSidebar, setStreamBadgeMode, setSidebarWidth, setBadgeGap])

  const rowRefs = useRef<Array<HTMLElement | null>>([])

@@ -115,7 +107,6 @@ export default function SettingsScreen({ hasFocus, onRequestSidebar }: Props): J

  const sidebarSliderFocused = hasFocus && focusedIndex === SIDEBAR_SLIDER_ROW
  const badgeGapSliderFocused = hasFocus && focusedIndex === BADGE_GAP_SLIDER_ROW
-  const loggingToggleFocused = hasFocus && focusedIndex === LOGGING_TOGGLE_ROW

  return (
    <div className="screen settings-screen">
@@ -235,38 +226,6 @@ export default function SettingsScreen({ hasFocus, onRequestSidebar }: Props): J
        </div>
      </div>

-      <div className="settings-section">
-        <h3 className="settings-section__title">mpv-Logging</h3>
-        <p className="settings-section__hint">
-          Aktiviert oder deaktiviert die mpv-Logdatei für Diagnosezwecke.
-          Logpfad auf dem Steam Deck: <code>{logPath}</code>
-        </p>
-
-        <button
-          ref={(el) => { rowRefs.current[LOGGING_TOGGLE_ROW] = el }}
-          className={[
-            'settings-option',
-            settings.mpvLoggingEnabled ? 'settings-option--active' : '',
-            loggingToggleFocused ? 'settings-option--focused' : ''
-          ].filter(Boolean).join(' ')}
-          onClick={() => {
-            setFocusedIndex(LOGGING_TOGGLE_ROW)
-            setMpvLoggingEnabled(!settings.mpvLoggingEnabled)
-          }}
-          tabIndex={loggingToggleFocused ? 0 : -1}
-        >
-          <span className="settings-option__radio" aria-hidden="true">
-            {settings.mpvLoggingEnabled ? '●' : '○'}
-          </span>
-          <span className="settings-option__label">
-            {settings.mpvLoggingEnabled ? 'Logging aktiviert' : 'Logging deaktiviert'}
-          </span>
-          <span className="settings-option__preview">
-            {settings.mpvLoggingEnabled ? 'mpv schreibt in mpv.log' : 'keine neue mpv.log wird geschrieben'}
-          </span>
-        </button>
-      </div>
-
      {!hasFocus && (
        <div className="screen__state" style={{ flex: 0 }}>
          <SettingsIcon style={{ width: 48, height: 48, opacity: 0.2 }} />
@@ -9,6 +9,7 @@ interface Props {
  language: string
  onRequestSidebar: () => void
  onSelectChannel: (ch: FollowedChannelInfo) => void
+  onStartLive: (ch: FollowedChannelInfo) => void
 }

 type LoadState = 'loading' | 'ok' | 'error'
@@ -18,14 +19,14 @@ export default function StreamListScreen({
  title,
  language,
  onRequestSidebar,
-  onSelectChannel
+  onSelectChannel,
+  onStartLive
 }: Props): JSX.Element {
  const [streams, setStreams] = useState<FollowedChannelInfo[]>([])
  const [loadState, setLoadState] = useState<LoadState>('loading')
  const [focusedIndex, setFocusedIndex] = useState(0)
  const [nextCursor, setNextCursor] = useState<string | undefined>(undefined)
  const [isLoadingMore, setIsLoadingMore] = useState(false)
-  const [isPlaying, setIsPlaying] = useState(false)
  const gridRef = useRef<HTMLDivElement>(null)

  const load = useCallback(async () => {
@@ -61,13 +62,6 @@ export default function StreamListScreen({
    void load()
  }, [load])

-  useEffect(() => {
-    return window.t4sd.playback.onEvent((ev) => {
-      if (ev.kind === 'started') setIsPlaying(true)
-      else if (ev.kind === 'stopped' || ev.kind === 'error') setIsPlaying(false)
-    })
-  }, [])
-
  useEffect(() => {
    if (loadState !== 'ok' || focusedIndex !== streams.length - 1 || !nextCursor || isLoadingMore) return
    void loadMore()
@@ -84,14 +78,6 @@ export default function StreamListScreen({
    if (!hasFocus) return

    const onKey = (e: KeyboardEvent): void => {
-      if (isPlaying) {
-        e.preventDefault()
-        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
-          void window.t4sd.playback.stop()
-        }
-        return
-      }
-
      if (e.key === 'y' || e.key === 'Y') {
        void load()
        return
@@ -134,7 +120,7 @@ export default function StreamListScreen({
        case 'Enter': {
          e.preventDefault()
          const ch = streams[focusedIndex]
-          if (ch) void window.t4sd.playback.startLive(ch.broadcasterLogin)
+          if (ch) onStartLive(ch)
          break
        }
        case 'x':
@@ -153,7 +139,7 @@ export default function StreamListScreen({

    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
-  }, [hasFocus, isPlaying, load, loadState, streams, focusedIndex, getColumns, onRequestSidebar, onSelectChannel])
+  }, [hasFocus, load, loadState, streams, focusedIndex, getColumns, onRequestSidebar, onSelectChannel, onStartLive])

  return (
    <div className="screen screen--stream-list">
@@ -200,7 +186,7 @@ export default function StreamListScreen({
              channel={ch}
              focused={hasFocus && i === focusedIndex}
              onFocus={() => setFocusedIndex(i)}
-              onSelect={() => void window.t4sd.playback.startLive(ch.broadcasterLogin)}
+              onSelect={() => onStartLive(ch)}
            />
          ))}
          {isLoadingMore && (
@@ -52,6 +52,14 @@ export interface PlaybackEvent {
  isLive?: boolean
 }

+export interface HlsUrlPayload {
+  url: string
+  isLive: boolean
+  startPosition: number
+  durationSeconds: number
+  vodId?: string
+}
+
 export interface VodInfo {
  id: string
  title: string
@@ -107,16 +115,10 @@ export interface T4sdApi {
    startLive: (channelLogin: string, quality?: string) => Promise<void>
    startVod: (vodId: string, channelLogin: string, title: string, durationSeconds: number, startSeconds?: number) => Promise<void>
    stop: () => Promise<void>
-    seek: (seconds: number) => Promise<void>
-    togglePause: () => Promise<void>
    pause: () => Promise<void>
-    resume: () => Promise<void>
-    seekTo: (seconds: number) => Promise<void>
-    getCurrentPosition: () => Promise<number | null>
-    setLoggingEnabled: (enabled: boolean) => Promise<void>
-    getLogPath: () => Promise<string>
+    reportPosition: (vodId: string, positionSeconds: number, durationSeconds: number) => Promise<void>
    onEvent: (cb: (event: PlaybackEvent) => void) => () => void
-    onTimeUpdate: (cb: (data: { positionSeconds: number }) => void) => () => void
+    onHlsUrl: (cb: (payload: HlsUrlPayload) => void) => () => void
  }
  gamepad: {
    onInput: (cb: (key: string) => void) => () => void