components/dashboard/settings
The Settings panel of the wish dashboard: Video, Audio and Resolution tabs over the streaming core.
State arrives through the message events the core posts on window:
serverSettings (the server's settings payload, per key a value,
allowed, min/max, default, locked and overridden),
effectiveCursorState and audioDeviceSelected. Changes go back as
window.postMessage messages: settings (debounced key/value batches the
core forwards to the server), mode, setScaleLocally,
setManualResolution, resetResolutionToWindow, setAntiAliasing, and
whatever the shared conditional-setting specs post. The transport is seeded
from window.__SELKIES_STREAMING_MODE__, and window.__selkiesModeSwitching
is raised around a transport switch.
Every value persists under a localStorage key from getPrefixedKey, which
adds the _display2 suffix for per-display settings on a secondary display;
the cores read the same keys. The cores also persist every value they are
told to apply, so a stored key alone cannot tell a user's explicit pick from
one the dashboard derived (HiDPI from the resolution mode, rate control from
the encoder). Settings that are also derived therefore carry an
_explicit_choice marker beside their value and resolve through the shared
specs of selkies-web-core/lib/conditional-settings.js, which honor pinned,
locked and operator-overridden server values: a derived write never pins
them, and an unmarked stored echo is dropped once the ladder moves on.
Functions
deriveDpiFromDpr()
function deriveDpiFromDpr(): number;Defined in: components/dashboard/settings.tsx:86
The default scaling_dpi: the local display scaling (devicePixelRatio) put
through the core's autoDeriveDpi formula, so the remote desktop's fonts and
UI match the local environment. The density is snapped to the nearest option
and clamped at both ends, and it is independent of the resolution.
The ladder that governs the desktop is an operator override (which the server refuses to let clients clobber), then the stored pick, then this derived default; the cores send stored-else-derived on every connect.
Returns
number
explicitChoiceKey()
function explicitChoiceKey(spec): string;Defined in: components/dashboard/settings.tsx:153
The marker key, suffixed onto the already-prefixed value key so it inherits the per-display suffix and a secondary display keeps its own choice.
Parameters
| Parameter | Type |
|---|---|
spec | any |
Returns
string
useConditionalSetting()
function useConditionalSetting(
spec,
serverSettings,
ctx,
deps,
read?
): readonly [any, Dispatch<any>];Defined in: components/dashboard/settings.tsx:174
Drives a conditional setting: lazy init, then a re-resolve whenever the
server settings or any dependency in deps changes (server sync and
encoder or manual-resolution re-derivation alike). The resolver honors
explicit choices, so a re-resolve never clobbers a pinned value.
Re-resolving writes state rather than deriving during render because the caller edits the value afterwards; deriving would discard their choice.
Parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
spec | any | undefined | Conditional-setting spec from conditional-settings.js. |
serverSettings | any | undefined | The last server settings payload, or null before one arrives. |
ctx | any | undefined | Resolution context the spec reads (stream mode, encoder, ...). |
deps | any[] | undefined | Dependencies whose change triggers a re-resolve. |
read | any | readStored | Storage reader; the explicit-choice reader for settings that are also derived. |
Returns
readonly [any, Dispatch<any>]
A [value, setValue] pair.
debounce()
function debounce<A>(func, delay): (...args) => void;Defined in: components/dashboard/settings.tsx:201
Trailing-edge debounce: the last call within delay wins.
Type Parameters
| Type Parameter |
|---|
A extends unknown[] |
Parameters
| Parameter | Type |
|---|---|
func | (...args) => void |
delay | number |
Returns
(...args) => void
setModeSwitching()
function setModeSwitching(active): void;Defined in: components/dashboard/settings.tsx:215
Sets the cross-script flag the cores read around a transport switch, so the old peer's teardown does not surface a "Server disconnected" alert. Kept outside the component: it is a signal to the runtime core, not component state.
Parameters
| Parameter | Type |
|---|---|
active | boolean |
Returns
void
Settings()
function Settings(): Element;Defined in: components/dashboard/settings.tsx:229
The Settings panel: Video, Audio and Resolution tabs, each hidden when the server's UI customization disables it. Server settings are seeded from the cached broadcast because the panel mounts after the core connects, and every value stays editable afterwards with localStorage taking precedence.
Each conditional setting is one useConditionalSetting call over a shared
spec: the hook owns init and server sync, and client-driven changes go
through writeConditional.
Returns
Element
writeConditional()
function writeConditional(
spec,
uiValue,
setValue,
opts?
): void;Defined in: components/dashboard/settings.tsx:323
The one write path for conditional settings: optimistic setState, persistence only for an explicit choice (which pins it; a derived value keeps following), then propagation through the spec.
Parameters
| Parameter | Type |
|---|---|
spec | any |
uiValue | any |
setValue | any |
opts | any |
Returns
void
handleManualWidthChange()
function handleManualWidthChange(event): void;Defined in: components/dashboard/settings.tsx:654
A half-typed size stays in component state: the stored manual_width and
manual_height mean "a manual resolution is applied", which the HiDPI
and UI-scaling derivations read, so only Set, a preset and Reset write them.
Parameters
| Parameter | Type |
|---|---|
event | ChangeEvent<HTMLInputElement> |
Returns
void
handleScaleLocallyToggle()
function handleScaleLocallyToggle(): void;Defined in: components/dashboard/settings.tsx:665
The core persists scaleLocallyManual itself when it applies the message.
Returns
void
handleHidpiToggle()
function handleHidpiToggle(): void;Defined in: components/dashboard/settings.tsx:672
An explicit toggle pins the choice; the core persists useCssScaling when it applies the message.
Returns
void
handleStreamModeChange()
function handleStreamModeChange(mode): Promise<void>;Defined in: components/dashboard/settings.tsx:692
Asks the server to swap transports, then lets the core loader persist the mode and reload the page into the new stack.
/api/switch is gated on the master token (Bearer) when set, or Basic
credentials via same-origin. With Basic Auth off the Bearer is required
but the dashboard is not given it, so a 401 prompts once, keeps the token
in sessionStorage, and retries.
Parameters
| Parameter | Type |
|---|---|
mode | string |
Returns
Promise<void>
rederiveRateControl()
function rederiveRateControl(ctxOverrides): void;Defined in: components/dashboard/settings.tsx:743
Re-derives rate control from the encoder and software encoding unless
it is pinned by an explicit client or server choice. A derived change
is not persisted, so it keeps following. ctxOverrides carries the
value just chosen, ahead of the re-render that would put it in
conditionalCtx.
Parameters
| Parameter | Type |
|---|---|
ctxOverrides | Record<string, unknown> |
Returns
void
handleRateControlChange()
function handleRateControlChange(mode): void;Defined in: components/dashboard/settings.tsx:785
An explicit choice is persisted, which pins it against encoder changes.
Parameters
| Parameter | Type |
|---|---|
mode | string |
Returns
void
handleAntiAliasingToggle()
function handleAntiAliasingToggle(): void;Defined in: components/dashboard/settings.tsx:837
Anti-aliasing is client-only; the core persists antiAliasingEnabled itself.
Returns
void
handleUseBrowserCursorsToggle()
function handleUseBrowserCursorsToggle(): void;Defined in: components/dashboard/settings.tsx:853
Propagates the new preference and lets the core, which owns persistence, report the effective (possibly multi-monitor-forced) value back. Derived from the displayed value: while multi-monitor forces the toggle on, the base preference may be off, and negating the base would silently persist the forced value over the user's real choice.
Returns
void
deriveHidpiForResolution()
function deriveHidpiForResolution(manual): void;Defined in: components/dashboard/settings.tsx:867
Pairs the resolution mode with CSS scaling: HiDPI off when a manual or preset resolution is set, on when reset, as a derived (unpinned) write. An explicit toggle or a locked or overridden server value pins HiDPI and stops the resolution buttons from re-deriving it.
Parameters
| Parameter | Type |
|---|---|
manual | boolean |
Returns
void
resetHidpiToDerivedDefault()
function resetHidpiToDerivedDefault(): void;Defined in: components/dashboard/settings.tsx:882
Restores HiDPI to its default on reset-to-window. Unlike the
resolution-derived writes, which respect a pinned choice, a reset means
"back to defaults", so the client's own pin is dropped even under an
operator-explicit value: use_css_scaling overridden does not imply
locked, and a kept pin would keep outranking the operator's value in the
resolution ladder. The operator value (when explicit) or the derived
default is then applied without storing; only a locked value leaves
everything alone.
Returns
void
resetDpiToDerivedDefault()
function resetDpiToDerivedDefault(): void;Defined in: components/dashboard/settings.tsx:898
Returns UI scaling to its derived (devicePixelRatio) default on reset-to-window: the pinned client choice is dropped and the derived value propagates like a user change. A locked or operator-overridden value governs scaling instead, the same gate as the startup derived-default post, so nothing happens then.
Returns
void