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>
{/* Bitrate Override */}
{/* Bitrate */}
<div>
<div className="flex items-center justify-between mb-1.5">
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider">
Bitrate
</div>
{config.customBitrateKbps != null && (
{limits?.allowCustomBitrate !== false && config.customBitrateKbps != null && (
<button
onClick={() => setConfig({ customBitrateKbps: null })}
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>
)}
</div>
<div className="flex items-center gap-2">
<input
type="range"
min={BITRATE_MIN}
max={BITRATE_MAX}
step={BITRATE_STEP}
value={config.customBitrateKbps ?? Math.round(result.publish.videoEncoding.maxBitrate / 1000)}
onChange={(e) => setConfig({ customBitrateKbps: Number(e.target.value) })}
className="flex-1 h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0
[&::-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'
}`}>
{config.customBitrateKbps != null
? formatKbps(config.customBitrateKbps)
: `Auto`}
</span>
</div>
{limits?.allowCustomBitrate !== false ? (
<div className="flex items-center gap-2">
<input
type="range"
min={BITRATE_MIN}
max={BITRATE_MAX}
step={BITRATE_STEP}
value={config.customBitrateKbps ?? Math.round(result.publish.videoEncoding.maxBitrate / 1000)}
onChange={(e) => setConfig({ customBitrateKbps: Number(e.target.value) })}
className="flex-1 h-1.5 accent-accent-primary cursor-pointer appearance-none bg-interactive-muted rounded-full
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md
[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-0
[&::-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'
}`}>
{config.customBitrateKbps != null
? formatKbps(config.customBitrateKbps)
: `Auto`}
</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>
{/* System Audio */}