From b2f772208ffdfa9caf8b0f507b59c4fb866afa59 Mon Sep 17 00:00:00 2001
From: Daniel <daniel@daddelolymp.de>
Date: Mon, 9 Mar 2026 11:42:48 +0100
Subject: [PATCH] Streaming: 30fps Presets entfernt, Dropdown breiter

Qualitaetsstufen: 720p60, 1080p60, 2K60, 4K60, 4K165 Ultra.
Dropdown von 120px auf 160px verbreitert damit Text nicht abgeschnitten wird.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/plugins/streaming/StreamingTab.tsx | 13 ++++++-------
 web/src/plugins/streaming/streaming.css    |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/src/plugins/streaming/StreamingTab.tsx b/web/src/plugins/streaming/StreamingTab.tsx
index cd85e68..de270f4 100644
--- a/web/src/plugins/streaming/StreamingTab.tsx
+++ b/web/src/plugins/streaming/StreamingTab.tsx
@@ -46,11 +46,10 @@ function formatElapsed(startedAt: string): string {
 // ── Quality Presets ──
 
 const QUALITY_PRESETS = [
-  { label: '720p30',  width: 1280, height: 720,  fps: 30, bitrate: 2_500_000 },
-  { label: '1080p30', width: 1920, height: 1080, fps: 30, bitrate: 5_000_000 },
-  { label: '1080p60', width: 1920, height: 1080, fps: 60, bitrate: 8_000_000 },
-  { label: '1440p60', width: 2560, height: 1440, fps: 60, bitrate: 14_000_000 },
-  { label: '4K60',    width: 3840, height: 2160, fps: 60, bitrate: 25_000_000 },
+  { label: '720p60',      width: 1280, height: 720,  fps: 60, bitrate: 4_000_000 },
+  { label: '1080p60',     width: 1920, height: 1080, fps: 60, bitrate: 8_000_000 },
+  { label: '2K60',        width: 2560, height: 1440, fps: 60, bitrate: 14_000_000 },
+  { label: '4K60',        width: 3840, height: 2160, fps: 60, bitrate: 25_000_000 },
   { label: '4K165 Ultra', width: 3840, height: 2160, fps: 165, bitrate: 50_000_000 },
 ] as const;
 
@@ -62,7 +61,7 @@ export default function StreamingTab({ data }: { data: any }) {
   const [userName, setUserName] = useState(() => localStorage.getItem('streaming_name') || '');
   const [streamTitle, setStreamTitle] = useState('Screen Share');
   const [streamPassword, setStreamPassword] = useState('');
-  const [qualityIdx, setQualityIdx] = useState(2); // Default: 1080p60
+  const [qualityIdx, setQualityIdx] = useState(1); // Default: 1080p60
   const [error, setError] = useState<string | null>(null);
   const [joinModal, setJoinModal] = useState<JoinModal | null>(null);
   const [myStreamId, setMyStreamId] = useState<string | null>(null);
@@ -100,7 +99,7 @@ export default function StreamingTab({ data }: { data: any }) {
   // Refs that mirror state (avoid stale closures in WS handler)
   const isBroadcastingRef = useRef(false);
   const viewingRef = useRef<ViewState | null>(null);
-  const qualityRef = useRef<typeof QUALITY_PRESETS[number]>(QUALITY_PRESETS[2]);
+  const qualityRef = useRef<typeof QUALITY_PRESETS[number]>(QUALITY_PRESETS[1]);
   useEffect(() => { isBroadcastingRef.current = isBroadcasting; }, [isBroadcasting]);
   useEffect(() => { viewingRef.current = viewing; }, [viewing]);
   useEffect(() => { qualityRef.current = QUALITY_PRESETS[qualityIdx]; }, [qualityIdx]);
diff --git a/web/src/plugins/streaming/streaming.css b/web/src/plugins/streaming/streaming.css
index 9d43c2e..e0e6c91 100644
--- a/web/src/plugins/streaming/streaming.css
+++ b/web/src/plugins/streaming/streaming.css
@@ -409,7 +409,7 @@
 }
 
 .stream-select-quality {
-  width: 120px;
+  width: 160px;
   padding: 10px 14px;
   border: 1px solid var(--bg-tertiary);
   border-radius: var(--radius);