@livekit/components-js-docs 0.1.0 → 0.1.2

package/generated-docs/react/component/connectionstatetoast.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ConnectionStateToast",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionStateToast.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ConnectionStateToast
@@ -7,7 +14,7 @@ The `ConnectionStateToast` component displays a toast notification indicating th
 ## Import
 
 ```typescript
-import { ConnectionStateToast } from '@livekit/components-react';
+import { ConnectionStateToast } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}

package/generated-docs/react/component/controlbar.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ControlBar",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/ControlBar.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ControlBar
@@ -7,7 +14,7 @@ The `ControlBar` prefab gives the user the basic user interface to control their
 ## Import
 
 ```typescript
-import { ControlBar } from '@livekit/components-react';
+import { ControlBar } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -31,6 +38,11 @@ _(Optional)_
 
 {% /parameter %}
 
+{% parameter name="saveUserChoices" type="boolean" optional=true %}
+_(Optional)_ If `true`<!-- -->, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room.
+
+{% /parameter %}
+
 {% parameter name="variation" type="'minimal' | 'verbose' | 'textOnly'" optional=true %}
 _(Optional)_
 

package/generated-docs/react/component/disconnectbutton.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "DisconnectButton",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/DisconnectButton.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # DisconnectButton
@@ -7,7 +14,7 @@ The `DisconnectButton` is a basic html button with the added ability to disconne
 ## Import
 
 ```typescript
-import { DisconnectButton } from '@livekit/components-react';
+import { DisconnectButton } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/focuslayout.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "FocusLayout",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/FocusLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # FocusLayout
@@ -7,7 +14,7 @@ The `FocusLayout` component is just a light wrapper around the `ParticipantTile`
 ## Import
 
 ```typescript
-import { FocusLayout } from '@livekit/components-react';
+import { FocusLayout } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
@@ -19,12 +26,16 @@ _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="track" type="TrackReferenceOrPlaceholder" optional=true %}
-_(Optional)_
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track to display in the focus layout.
 
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
-_(Optional)_ The track to display in the focus layout.
+{% parameter name="track" type="TrackReferenceOrPlaceholder" optional=true deprecated=true %}
+_(Optional)_
+
+{% callout type="caution" variation="compact" %}
+This property will be removed in a future version use `trackRef` instead.
 
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/focuslayoutcontainer.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "FocusLayoutContainer",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/FocusLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # FocusLayoutContainer
@@ -7,19 +14,27 @@ The `FocusLayoutContainer` is a layout component that expects two children: A sm
 ## Import
 
 ```typescript
-import { FocusLayoutContainer } from '@livekit/components-react';
+import { FocusLayoutContainer } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 0} /%}
 
 ## Properties
 
-{% parameter name="focusTrack" type="TrackReference" optional=true %}
+{% parameter name="focusTrack" type="TrackReference" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This property has no effect and will be removed in a future version.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="participants" type="Array<Participant>" optional=true %}
+{% parameter name="participants" type="Array<Participant>" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This property has no effect and will be removed in a future version.
+
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/focustoggle.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "FocusToggle",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/FocusToggle.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # FocusToggle
@@ -7,7 +14,7 @@ The `FocusToggle` puts the `ParticipantTile` in focus or removes it from focus.
 ## Import
 
 ```typescript
-import { FocusToggle } from '@livekit/components-react';
+import { FocusToggle } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -26,17 +33,25 @@ This component needs to live inside `LayoutContext` to work properly.
 
 ## Properties
 
-{% parameter name="participant" type="Participant" optional=true %}
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
 _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+{% parameter name="participant" type="Participant" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="trackSource" type="Track.Source" optional=true %}
+{% parameter name="trackSource" type="Track.Source" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/gridlayout.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "GridLayout",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/GridLayout.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # GridLayout
@@ -7,7 +14,7 @@ The `GridLayout` component displays the nested participants in a grid where ever
 ## Import
 
 ```typescript
-import { GridLayout } from '@livekit/components-react';
+import { GridLayout } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/layoutcontextprovider.md

@@ -0,0 +1,35 @@
+---
+{
+  "title": "LayoutContextProvider",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/LayoutContextProvider.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# LayoutContextProvider
+
+## Import
+
+```typescript
+import { LayoutContextProvider } from "@livekit/components-react";
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+
+## Properties
+
+{% parameter name="onPinChange" type="(state: PinState) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onWidgetChange" type="(state: WidgetState) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="value" type="LayoutContextType" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/component/livekitroom.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "LiveKitRoom",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/LiveKitRoom.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # LiveKitRoom
@@ -7,7 +14,7 @@ The `LiveKitRoom` component provides the room context to all its child component
 ## Import
 
 ```typescript
-import { LiveKitRoom } from '@livekit/components-react';
+import { LiveKitRoom } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/mediadevicemenu.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "MediaDeviceMenu",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/MediaDeviceMenu.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # MediaDeviceMenu
@@ -7,7 +14,7 @@ The `MediaDeviceMenu` component is a button that opens a menu that lists all med
 ## Import
 
 ```typescript
-import { MediaDeviceMenu } from '@livekit/components-react';
+import { MediaDeviceMenu } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/mediadeviceselect.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "MediaDeviceSelect",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/MediaDeviceSelect.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # MediaDeviceSelect
@@ -7,7 +14,7 @@ The `MediaDeviceSelect` list all media devices of one kind. Clicking on one of t
 ## Import
 
 ```typescript
-import { MediaDeviceSelect } from '@livekit/components-react';
+import { MediaDeviceSelect } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/participantaudiotile.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ParticipantAudioTile",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantAudioTile.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ParticipantAudioTile
@@ -7,7 +14,7 @@ The `ParticipantAudioTile` component is the base utility wrapper for displaying
 ## Import
 
 ```typescript
-import { ParticipantAudioTile } from '@livekit/components-react';
+import { ParticipantAudioTile } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -30,22 +37,34 @@ _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="participant" type="Participant" optional=true %}
-_(Optional)_
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track reference to display.
 
 {% /parameter %}
 
-{% parameter name="publication" type="TrackPublication" optional=true %}
+{% parameter name="participant" type="Participant" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="source" type="Track.Source" optional=true %}
+{% parameter name="publication" type="TrackPublication" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
-_(Optional)_ The track reference to display.
+{% parameter name="source" type="Track.Source" optional=true deprecated=true %}
+_(Optional)_
+
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
 
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/participantcontextifneeded.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ParticipantContextIfNeeded",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantTile.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ParticipantContextIfNeeded
@@ -7,7 +14,7 @@ The `ParticipantContextIfNeeded` component only creates a `ParticipantContext` i
 ## Import
 
 ```typescript
-import { ParticipantContextIfNeeded } from '@livekit/components-react';
+import { ParticipantContextIfNeeded } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/participantloop.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ParticipantLoop",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ParticipantLoop.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ParticipantLoop
@@ -7,7 +14,7 @@ The `ParticipantLoop` component loops over an array of participants to create a
 ## Import
 
 ```typescript
-import { ParticipantLoop } from '@livekit/components-react';
+import { ParticipantLoop } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/component/participantname.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ParticipantName",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantName.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ParticipantName
@@ -7,7 +14,7 @@ The `ParticipantName` component displays the name of the participant as a string
 ## Import
 
 ```typescript
-import { ParticipantName } from '@livekit/components-react';
+import { ParticipantName } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/participanttile.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "ParticipantTile",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantTile.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # ParticipantTile
@@ -7,7 +14,7 @@ The `ParticipantTile` component is the base utility wrapper for displaying a vis
 ## Import
 
 ```typescript
-import { ParticipantTile } from '@livekit/components-react';
+import { ParticipantTile } from "@livekit/components-react";
 ```
 
 ## Usage Example 1
@@ -42,22 +49,34 @@ _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="participant" type="Participant" optional=true %}
-_(Optional)_
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track reference to display.
 
 {% /parameter %}
 
-{% parameter name="publication" type="TrackPublication" optional=true %}
+{% parameter name="participant" type="Participant" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="source" type="Track.Source" optional=true %}
+{% parameter name="publication" type="TrackPublication" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
-_(Optional)_ The track reference to display.
+{% parameter name="source" type="Track.Source" optional=true deprecated=true %}
+_(Optional)_
+
+{% callout type="caution" variation="compact" %}
+This parameter will be removed in a future version use `trackRef` instead.
 
+{% /callout %}
 {% /parameter %}

package/generated-docs/react/component/prejoin.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "PreJoin",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/PreJoin.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # PreJoin
@@ -7,12 +14,12 @@ The `PreJoin` prefab component is normally presented to the user before he enter
 ## Import
 
 ```typescript
-import { PreJoin } from '@livekit/components-react';
+import { PreJoin } from "@livekit/components-react";
 ```
 
 ## Remarks
 
-This component is independent from the `LiveKitRoom` component and don't has to be nested inside it. Because it only access the local media tracks this component is self contained and works without connection to the LiveKit server.
+This component is independent of the `LiveKitRoom` component and should not be nested within it. Because it only access the local media tracks this component is self contained and works without connection to the LiveKit server.
 
 ## Usage
 
@@ -64,8 +71,8 @@ _(Optional)_ Provide your custom validation function. Only if validation is succ
 
 {% /parameter %}
 
-{% parameter name="showE2EEOptions" type="boolean" optional=true %}
-_(Optional)_
+{% parameter name="persistUserChoices" type="boolean" optional=true %}
+_(Optional)_ If true, user choices are persisted across sessions.
 
 {% /parameter %}
 
@@ -73,3 +80,12 @@ _(Optional)_
 _(Optional)_
 
 {% /parameter %}
+
+{% parameter name="showE2EEOptions" type="boolean" optional=true deprecated=true %}
+_(Optional)_
+
+{% callout type="caution" variation="compact" %}
+E2EE options will be removed from PreJoin in a future version \*
+
+{% /callout %}
+{% /parameter %}

package/generated-docs/react/component/roomaudiorenderer.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "RoomAudioRenderer",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/RoomAudioRenderer.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # RoomAudioRenderer
@@ -7,7 +14,7 @@ The `RoomAudioRenderer` component is a drop-in solution for adding audio to your
 ## Import
 
 ```typescript
-import { RoomAudioRenderer } from '@livekit/components-react';
+import { RoomAudioRenderer } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -19,3 +26,15 @@ import { RoomAudioRenderer } from '@livekit/components-react';
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="muted" type="boolean" optional=true %}
+_(Optional)_ If set to `true`<!-- -->, mutes all audio tracks rendered by the component.
+
+{% /parameter %}
+
+{% parameter name="volume" type="number" optional=true %}
+_(Optional)_ Sets the volume for all audio tracks rendered by this component. By default, the range is between `0.0` and `1.0`<!-- -->.
+
+{% /parameter %}

package/generated-docs/react/component/roomname.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "RoomName",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/RoomName.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # RoomName
@@ -7,7 +14,7 @@ The `RoomName` component renders the name of the connected LiveKit room inside a
 ## Import
 
 ```typescript
-import { RoomName } from '@livekit/components-react';
+import { RoomName } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/startaudio.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "StartAudio",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/StartAudio.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # StartAudio
@@ -7,7 +14,7 @@ The `StartAudio` component is only visible when the browser blocks audio playbac
 ## Import
 
 ```typescript
-import { StartAudio } from '@livekit/components-react';
+import { StartAudio } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/toast.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "Toast",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/Toast.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # Toast
@@ -7,7 +14,7 @@ The `Toast` component is a rudimentary way to display a message to the user. Thi
 ## Import
 
 ```typescript
-import { Toast } from '@livekit/components-react';
+import { Toast } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/component/trackloop.md

@@ -1,3 +1,10 @@
+---
+{
+  "title": "TrackLoop",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/TrackLoop.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # TrackLoop
@@ -7,7 +14,7 @@ The `TrackLoop` component loops over tracks. It is for example a easy way to loo
 ## Import
 
 ```typescript
-import { TrackLoop } from '@livekit/components-react';
+import { TrackLoop } from "@livekit/components-react";
 ```
 
 ## Usage