# Data Provider

TypeScript source: `providers/DataProvider.tsx`

## Components

### DataProvider

Source: `providers/DataProvider.tsx:183`

```ts
React.FC<DataProviderProps>
```

Provides shared viewer state resolved from explicit connection config and URL parameters.

#### Remarks

The provider keeps layout state synchronized with URL search parameters and chooses the active transport in this order: explicit
`connectionConfig`, WebRTC URL params, WebSocket URL param, environment default URL.

#### Example

```tsx
<DataProvider connectionConfig={{ type: 'ws', wsUrl: 'ws://localhost:8765' }}>
	{children}
</DataProvider>
```

## Types

### DataContext

Source: `providers/DataProvider.tsx:14`

Shared UI state derived from URL parameters and connection configuration.

#### Remarks

Values come from explicit `connectionConfig` first, then URL parameters, then local defaults. Mutation helpers update both React
state and the relevant URL parameters.

#### Members

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `changeColumns` | `(columns: number | null) => void` | | Updates the number of stream columns and persists it to the URL.<br
/>Remarks: Calling this also disables custom layout mode. |
| `changeCustomLayout` | `(value: boolean) => void` | | Enables or disables custom stream layout mode.<br />Remarks: Calling this
resets `columns` to `null` and persists layout `0` to the URL. |
| `changeWsUrl` | `(url: string) => void` | | Updates the WebSocket URL and clears WebRTC URL parameters.<br />Remarks: Calling
this removes `t` and `cid` from the URL so the next connection uses WebSocket settings. |
| `clientId` | `string` | | WebRTC client id used when `connectionType` is `webrtc`.<br />Remarks: Empty when WebRTC parameters
are not available. |
| `columns` | `number | null` | | Number of stream columns requested by the layout state, or `null` for automatic layout.<br
/>Remarks: `null` is persisted as layout `0` in the URL. |
| `connectionType` | `"ws" | "webrtc"` | | Active connection transport selected from props or URL parameters.<br />Remarks: WebRTC
is selected only when token and client id are available. |
| `customLayout` | `boolean` | `false` | Whether the user is controlling panel layout manually instead of using column layout. |
| `setUnits` | `(units: SelectedUnits) => void` |  | Updates the selected distance unit system. |
| `token` | `string` | | WebRTC auth token used when `connectionType` is `webrtc`.<br />Remarks: Empty when WebRTC parameters are
not available. |
| `units` | `SelectedUnits` | `'metric'` | Selected distance unit system for stream overlays. |
| `wsUrl` | `string` | | WebSocket endpoint used when `connectionType` is `ws`.<br />Remarks: Defaults to the local backend URL on
localhost/Electron and to the production default URL elsewhere. |

### DataProviderProps

Source: `providers/DataProvider.tsx:121`

```ts
React.PropsWithChildren & { connectionConfig?: { type: "ws"; wsUrl: string } | { clientId: string; token: string; type: "webrtc" } }
```

Props for the shared data provider.

#### Members

| Name | Type | Description |
| --- | --- | --- |
| `connectionConfig?` | `{ type: "ws"; wsUrl: string } | { clientId: string; token: string; type: "webrtc" }` | Optional
connection configuration supplied by the host application instead of URL parameters.<br />Remarks: When omitted, the provider
reads WebRTC parameters from `t` and `cid`, or a WebSocket URL from `ws_url`. If no URL parameters are present, it falls back to
the default WebSocket URL. |

### SelectedUnits

Source: `providers/DataProvider.tsx:116`

```ts
"imperial" | "metric"
```

Supported unit systems for stream overlay distance values.

## Functions

### useData

Source: `providers/DataProvider.tsx:111`

```ts
() => DataContext
```

Returns shared URL, layout, connection, and unit preferences for viewer components.

#### Remarks

Outside DataProvider, this hook returns the default WebSocket-based context.