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, scalingDpiFollowed (the UI-scaling default the core re-derived) 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

deriveDpi()

function deriveDpi(manual): number;

Defined in: components/dashboard/settings.tsx:96

The default scaling_dpi, derived as the core derives it (lib/stream-density.js): from a manual resolution when one is set, since that framebuffer decides how large the desktop draws its UI and the local screen says nothing about it, and otherwise from the local display scaling (devicePixelRatio), so the remote desktop's fonts and UI match the local environment. A manual resolution is read off its shorter side -- an ultrawide is wide rather than dense -- and either density is snapped to the nearest option and clamped at both ends.

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.

Parameters

ParameterType
manual{ w: number; h: number; }
manual.wnumber
manual.hnumber

Returns

number


manualResolution()

function manualResolution(serverSettings): object;

Defined in: components/dashboard/settings.tsx:111

The manual resolution in force, as the cores resolve it: a deployment that forces one and names its size wins, since the core takes the server's over the client's there; otherwise the stored pick, and zeroes for a session sized to its window.

Parameters

ParameterType
serverSettingsany

Returns

object

w
w: number;
h
h: number;

explicitChoiceKey()

function explicitChoiceKey(spec): string;

Defined in: components/dashboard/settings.tsx:191

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:212

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:239

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:253

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:267

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:375

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:734

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:745

The core persists scaleLocallyManual itself when it applies the message.

Returns

void


handleHidpiToggle()

function handleHidpiToggle(): void;

Defined in: components/dashboard/settings.tsx:752

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:772

Asks the server to swap transports, then lets the core loader persist the mode and reload the page into the new stack.

The request carries this client's own session token, which a controller's is enough for; a stored master token overrides it, and where neither is accepted a 401 prompts for the master token once, keeps it in sessionStorage and retries. A viewer is refused 403 and asked nothing.

Parameters

ParameterType
modestring

Returns

Promise<void>


rederiveRateControl()

function rederiveRateControl(ctxOverrides): void;

Defined in: components/dashboard/settings.tsx:824

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:866

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:918

Anti-aliasing is client-only; the core persists antiAliasingEnabled itself.

Returns

void


handleUseBrowserCursorsToggle()

function handleUseBrowserCursorsToggle(): void;

Defined in: components/dashboard/settings.tsx:934

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


handleRawPointerMotionToggle()

function handleRawPointerMotionToggle(): void;

Defined in: components/dashboard/settings.tsx:939

Raw pointer motion toggle; the core owns persistence, as for browser cursors.

Returns

void


deriveHidpiForResolution()

function deriveHidpiForResolution(manual): void;

Defined in: components/dashboard/settings.tsx:956

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


deriveDpiForResolution()

function deriveDpiForResolution(): void;

Defined in: components/dashboard/settings.tsx:967

A resolution the operator sets carries its own UI-scaling default, since the framebuffer asked for decides how large the desktop draws its UI. Not stored, so it stays a default: a stored pick, or a locked or operator-explicit server value, outranks it as it does at connect.

Returns

void


resetHidpiToDerivedDefault()

function resetHidpiToDerivedDefault(): void;

Defined in: components/dashboard/settings.tsx:986

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:1003

Returns UI scaling to its derived default on reset-to-window, which with no resolution of its own left to read is the local display's scaling: 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