Selkies
Developer ReferenceDashboard (Wish)ComponentsDashboard

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

ParameterType
specany

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

ParameterTypeDefault valueDescription
specanyundefinedConditional-setting spec from conditional-settings.js.
serverSettingsanyundefinedThe last server settings payload, or null before one arrives.
ctxanyundefinedResolution context the spec reads (stream mode, encoder, ...).
depsany[]undefinedDependencies whose change triggers a re-resolve.
readanyreadStoredStorage 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

ParameterType
func(...args) => void
delaynumber

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

ParameterType
activeboolean

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

ParameterType
specany
uiValueany
setValueany
optsany

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

ParameterType
eventChangeEvent<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

ParameterType
modestring

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

ParameterType
ctxOverridesRecord<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

ParameterType
modestring

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

ParameterType
manualboolean

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

On this page

Edit on GitHub