devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

feat: conditionally show bitrate slider based on instance allowCustomBitrate

Browse Source
This commit is contained in:
Jannis Braun
2026-03-25 04:09:18 +01:00
parent 3627974ba1
commit f0104d19b7
1 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/voice/ScreenShareSettingsPopover.tsx
+36 -25
View File
@@ -217,13 +217,13 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
)} )}
</div> </div>
{/* Bitrate Override */} {/* Bitrate */}
<div> <div>
<div className="flex items-center justify-between mb-1.5"> <div className="flex items-center justify-between mb-1.5">
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider"> <div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider">
Bitrate Bitrate
</div> </div>
{config.customBitrateKbps != null && ( {limits?.allowCustomBitrate !== false && config.customBitrateKbps != null && (
<button <button
onClick={() => setConfig({ customBitrateKbps: null })} onClick={() => setConfig({ customBitrateKbps: null })}
className="text-[11px] text-accent-primary hover:text-accent-lavender font-medium transition-colors" className="text-[11px] text-accent-primary hover:text-accent-lavender font-medium transition-colors"
@@ -232,29 +232,40 @@ export function ScreenShareSettingsPopover({ open, onClose, anchorRef }: ScreenS
</button> </button>
)} )}
</div> </div>
<div className="flex items-center gap-2"> {limits?.allowCustomBitrate !== false ? (
<input <div className="flex items-center gap-2">
type="range" <input
min={BITRATE_MIN} type="range"
max={BITRATE_MAX} min={BITRATE_MIN}
step={BITRATE_STEP} max={BITRATE_MAX}
value={config.customBitrateKbps ?? Math.round(result.publish.videoEncoding.maxBitrate / 1000)} step={BITRATE_STEP}
onChange={(e) => setConfig({ customBitrateKbps: Number(e.target.value) })} value={config.customBitrateKbps ?? Math.round(result.publish.videoEncoding.maxBitrate / 1000)}
className="flex-1 h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full onChange={(e) => setConfig({ customBitrateKbps: Number(e.target.value) })}
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 className="flex-1 h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5
[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
[&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0
[&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer" [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:rounded-full
/> [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer"
<span className={`text-[12px] font-medium min-w-[64px] text-right ${ />
config.customBitrateKbps != null ? 'text-txt-primary' : 'text-txt-tertiary' <span className={`text-[12px] font-medium min-w-[64px] text-right ${
}`}> config.customBitrateKbps != null ? 'text-txt-primary' : 'text-txt-tertiary'
{config.customBitrateKbps != null }`}>
? formatKbps(config.customBitrateKbps) {config.customBitrateKbps != null
: `Auto`} ? formatKbps(config.customBitrateKbps)
</span> : `Auto`}
</div> </span>
</div>
) : (
<div>
<div className="text-[12px] text-txt-secondary font-medium">
{formatKbps(Math.round(result.publish.videoEncoding.maxBitrate / 1000))}
</div>
<div className="text-[10px] text-txt-tertiary mt-0.5">
Custom bitrate disabled by administrator
</div>
</div>
)}
</div> </div>
{/* System Audio */} {/* System Audio */}