fix: VP9 default for both modes, clean up codec pill UI

VP9 empirically outperforms H.264 in gaming (Chrome may not use
NVENC for screen share H.264). Codec pills now match other pill
styles — simple labels, no description text. Mode change no longer
auto-switches codec; user's codec choice is independent.
This commit is contained in:
Jannis Braun
2026-03-24 00:59:04 +01:00
parent 2b2e1c7386
commit 65a1fc1402
2 changed files with 9 additions and 17 deletions
@@ -20,9 +20,9 @@ const MODES: { value: ScreenShareConfig['mode']; label: string }[] = [
{ value: 'text', label: 'Text' }, { value: 'text', label: 'Text' },
]; ];
const CODECS: { value: ScreenShareConfig['codec']; label: string; desc: string }[] = [ const CODECS: { value: ScreenShareConfig['codec']; label: string }[] = [
{ value: 'vp9', label: 'VP9', desc: 'Less bandwidth, more CPU' }, { value: 'vp9', label: 'VP9' },
{ value: 'h264', label: 'H.264', desc: 'Less CPU, more bandwidth' }, { value: 'h264', label: 'H.264' },
]; ];
function formatBitrate(bps: number): string { function formatBitrate(bps: number): string {
@@ -193,12 +193,9 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
<button <button
key={c.value} key={c.value}
onClick={() => setConfig({ codec: c.value })} onClick={() => setConfig({ codec: c.value })}
className={`${pillBase} flex-1 flex flex-col items-center gap-0.5 !py-1.5 ${config.codec === c.value ? pillSelected : pillUnselected}`} className={`${pillBase} ${config.codec === c.value ? pillSelected : pillUnselected}`}
> >
<span>{c.label}</span> {c.label}
<span className={`text-[9px] font-normal ${config.codec === c.value ? 'text-white/70' : 'text-txt-tertiary'}`}>
{c.desc}
</span>
</button> </button>
))} ))}
</div> </div>
+4 -9
View File
@@ -146,7 +146,7 @@ export const useVoiceStore = create<VoiceState>()(
inputDeviceId: 'default', inputDeviceId: 'default',
outputDeviceId: 'default', outputDeviceId: 'default',
focusedParticipantId: null, focusedParticipantId: null,
screenShareConfig: { height: 720, fps: 60, mode: 'gaming', codec: 'h264', customBitrateKbps: null, shareAudio: !isElectron() }, screenShareConfig: { height: 720, fps: 60, mode: 'gaming', codec: 'vp9', customBitrateKbps: null, shareAudio: !isElectron() },
participantVolumes: new Map(), participantVolumes: new Map(),
setParticipantVolume: (userId, volume) => { setParticipantVolume: (userId, volume) => {
set((state) => { set((state) => {
@@ -326,14 +326,9 @@ export const useVoiceStore = create<VoiceState>()(
toggleScreenShare: () => set((state) => ({ isScreenSharing: !state.isScreenSharing })), toggleScreenShare: () => set((state) => ({ isScreenSharing: !state.isScreenSharing })),
setFocusedParticipant: (id) => set({ focusedParticipantId: id }), setFocusedParticipant: (id) => set({ focusedParticipantId: id }),
setScreenShareConfig: (config) => set((state) => { setScreenShareConfig: (config) => set((state) => ({
const merged = { ...state.screenShareConfig, ...config }; screenShareConfig: { ...state.screenShareConfig, ...config },
// When mode changes (without an explicit codec override), auto-set the smart default })),
if (config.mode && !config.codec) {
merged.codec = config.mode === 'gaming' ? 'h264' : 'vp9';
}
return { screenShareConfig: merged };
}),
noiseSuppression: true, noiseSuppression: true,
echoCancellation: true, echoCancellation: true,
autoGainControl: true, autoGainControl: true,