root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Streaming: 30fps Presets entfernt, Dropdown breiter

Browse source 
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>
This commit is contained in:
Daniel 2026-03-09 11:42:48 +01:00
parent 966664d3a7
commit b2f772208f
2 changed files with 7 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
web/src/plugins/streaming/StreamingTab.tsx
View file

@ -46,11 +46,10 @@ function formatElapsed(startedAt: string): string {
// ── Quality Presets ── // ── Quality Presets ──
const QUALITY_PRESETS = [ const QUALITY_PRESETS = [
{ label: '720p30', width: 1280, height: 720, fps: 30, bitrate: 2_500_000 }, { label: '720p60', width: 1280, height: 720, fps: 60, bitrate: 4_000_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: '1080p60', width: 1920, height: 1080, fps: 60, bitrate: 8_000_000 }, { label: '2K60', width: 2560, height: 1440, fps: 60, bitrate: 14_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: '4K60', width: 3840, height: 2160, fps: 60, bitrate: 25_000_000 },
{ label: '4K165 Ultra', width: 3840, height: 2160, fps: 165, bitrate: 50_000_000 }, { label: '4K165 Ultra', width: 3840, height: 2160, fps: 165, bitrate: 50_000_000 },
] as const; ] as const;
@ -62,7 +61,7 @@ export default function StreamingTab({ data }: { data: any }) {
const [userName, setUserName] = useState(() => localStorage.getItem('streaming_name') || ''); const [userName, setUserName] = useState(() => localStorage.getItem('streaming_name') || '');
const [streamTitle, setStreamTitle] = useState('Screen Share'); const [streamTitle, setStreamTitle] = useState('Screen Share');
const [streamPassword, setStreamPassword] = useState(''); 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 [error, setError] = useState<string | null>(null);
const [joinModal, setJoinModal] = useState<JoinModal | null>(null); const [joinModal, setJoinModal] = useState<JoinModal | null>(null);
const [myStreamId, setMyStreamId] = useState<string | 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) // Refs that mirror state (avoid stale closures in WS handler)
const isBroadcastingRef = useRef(false); const isBroadcastingRef = useRef(false);
const viewingRef = useRef<ViewState | null>(null); 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(() => { isBroadcastingRef.current = isBroadcasting; }, [isBroadcasting]);
useEffect(() => { viewingRef.current = viewing; }, [viewing]); useEffect(() => { viewingRef.current = viewing; }, [viewing]);
useEffect(() => { qualityRef.current = QUALITY_PRESETS[qualityIdx]; }, [qualityIdx]); useEffect(() => { qualityRef.current = QUALITY_PRESETS[qualityIdx]; }, [qualityIdx]);

2
web/src/plugins/streaming/streaming.css
View file

@ -409,7 +409,7 @@
} }
.stream-select-quality { .stream-select-quality {
width: 120px; width: 160px;
padding: 10px 14px; padding: 10px 14px;
border: 1px solid var(--bg-tertiary); border: 1px solid var(--bg-tertiary);
border-radius: var(--radius); border-radius: var(--radius);