@livekit/components-js-docs 0.1.25 → 0.1.27

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

@@ -0,0 +1,50 @@
+---
+{
+  "title": "AudioTrack",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/AudioTrack.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# AudioTrack
+
+The AudioTrack component is responsible for rendering participant audio tracks. This component must have access to the participant's context, or alternatively pass it a `Participant` as a property.
+
+## Import
+
+```typescript
+import { AudioTrack } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<ParticipantTile>
+  <AudioTrack trackRef={trackRef} />
+</ParticipantTile>
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="muted" type="boolean" optional=true %}
+_(Optional)_ Mutes the audio track if set to `true`<!-- -->.
+
+{% /parameter %}
+
+{% parameter name="onSubscriptionStatusChanged" type="(subscribed: boolean) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReference" optional=true %}
+_(Optional)_ The track reference of the track from which the audio is to be rendered.
+
+{% /parameter %}
+
+{% parameter name="volume" type="number" optional=true %}
+_(Optional)_ Sets the volume of the audio track. By default, the range is between `0.0` and `1.0`<!-- -->.
+
+{% /parameter %}

package/generated-docs/react/{audiovisualizer.md → component/audiovisualizer.md}

@@ -11,12 +11,10 @@
 
 The AudioVisualizer component is used to visualize the audio volume of a given audio track.
 
-**Signature:**
+## Import
 
 ```typescript
-AudioVisualizer: React.ForwardRefExoticComponent<
-  AudioVisualizerProps & React.RefAttributes<SVGSVGElement>
->;
+import { AudioVisualizer } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -30,3 +28,10 @@ Requires a `TrackReferenceOrPlaceholder` to be provided either as a property or
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="trackRef" type="TrackReference" optional=true %}
+_(Optional)_
+
+{% /parameter %}

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

@@ -0,0 +1,50 @@
+---
+{
+  "title": "ChatEntry",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ChatEntry.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# ChatEntry
+
+The `ChatEntry` component holds and displays one chat message.
+
+## Import
+
+```typescript
+import { ChatEntry } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<Chat>
+  <ChatEntry />
+</Chat>
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="entry" type="ReceivedChatMessage" optional=false %}
+The chat massage object to display.
+
+{% /parameter %}
+
+{% parameter name="hideName" type="boolean" optional=true %}
+_(Optional)_ Hide sender name. Useful when displaying multiple consecutive chat messages from the same person.
+
+{% /parameter %}
+
+{% parameter name="hideTimestamp" type="boolean" optional=true %}
+_(Optional)_ Hide message timestamp.
+
+{% /parameter %}
+
+{% parameter name="messageFormatter" type="MessageFormatter" optional=true %}
+_(Optional)_ An optional formatter for the message body.
+
+{% /parameter %}

package/generated-docs/react/{chattoggle.md → component/chattoggle.md}

@@ -11,12 +11,10 @@
 
 The `ChatToggle` component is a button that toggles the visibility of the `Chat` component.
 
-**Signature:**
+## Import
 
 ```typescript
-ChatToggle: React.ForwardRefExoticComponent<
-  ChatToggleProps & React.RefAttributes<HTMLButtonElement>
->;
+import { ChatToggle } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/{clearpinbutton.md → component/clearpinbutton.md}

@@ -11,12 +11,10 @@
 
 The `ClearPinButton` is a basic html button with the added ability to signal the `LayoutContext` that it should display the grid view again.
 
-**Signature:**
+## Import
 
 ```typescript
-ClearPinButton: React.ForwardRefExoticComponent<
-  ClearPinButtonProps & React.RefAttributes<HTMLButtonElement>
->;
+import { ClearPinButton } from "@livekit/components-react";
 ```
 
 ## Remarks

package/generated-docs/react/{connectionqualityindicator.md → component/connectionqualityindicator.md}

@@ -11,12 +11,10 @@
 
 The `ConnectionQualityIndicator` shows the individual connection quality of a participant.
 
-**Signature:**
+## Import
 
 ```typescript
-ConnectionQualityIndicator: React.ForwardRefExoticComponent<
-  ConnectionQualityIndicatorProps & React.RefAttributes<HTMLDivElement>
->;
+import { ConnectionQualityIndicator } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/{connectionstate.md → component/connectionstate.md}

@@ -11,12 +11,10 @@
 
 The `ConnectionState` component displays the connection status of the room as strings (`"connected" | "connecting" | "disconnected" | "reconnecting"`<!-- -->).
 
-**Signature:**
+## Import
 
 ```typescript
-ConnectionState: React.ForwardRefExoticComponent<
-  ConnectionStatusProps & React.RefAttributes<HTMLDivElement>
->;
+import { ConnectionState } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -28,3 +26,10 @@ ConnectionState: React.ForwardRefExoticComponent<
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="room" type="Room" optional=true %}
+_(Optional)_ The room from which the connection status should be displayed.
+
+{% /parameter %}

package/generated-docs/react/{disconnectbutton.md → component/disconnectbutton.md}

@@ -11,12 +11,10 @@
 
 The `DisconnectButton` is a basic html button with the added ability to disconnect from a LiveKit room. Normally this is the big red button that allows end users to leave the video or audio call.
 
-**Signature:**
+## Import
 
 ```typescript
-DisconnectButton: React.ForwardRefExoticComponent<
-  DisconnectButtonProps & React.RefAttributes<HTMLButtonElement>
->;
+import { DisconnectButton } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -28,3 +26,10 @@ DisconnectButton: React.ForwardRefExoticComponent<
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="stopTracks" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/{focustoggle.md → component/focustoggle.md}

@@ -11,12 +11,10 @@
 
 The `FocusToggle` puts the `ParticipantTile` in focus or removes it from focus.
 
-**Signature:**
+## Import
 
 ```typescript
-FocusToggle: React.ForwardRefExoticComponent<
-  FocusToggleProps & React.RefAttributes<HTMLButtonElement>
->;
+import { FocusToggle } from "@livekit/components-react";
 ```
 
 ## Remarks
@@ -32,3 +30,10 @@ This component needs to live inside `LayoutContext` to work properly.
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_
+
+{% /parameter %}

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

@@ -26,3 +26,80 @@ import { LiveKitRoom } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="serverUrl" type="string | undefined" optional=false %}
+URL to the LiveKit server. For example: `wss://<domain>.livekit.cloud` To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string url can the connection be established.
+
+{% /parameter %}
+
+{% parameter name="token" type="string | undefined" optional=false %}
+A user specific access token for a client to authenticate to the room. This token is necessary to establish a connection to the room. To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string token can the connection be established.
+
+{% /parameter %}
+
+{% parameter name="audio" type="AudioCaptureOptions | boolean" optional=true %}
+_(Optional)_ Publish audio immediately after connecting to your LiveKit room.
+
+{% /parameter %}
+
+{% parameter name="connect" type="boolean" optional=true %}
+_(Optional)_ If set to true a connection to LiveKit room is initiated.
+
+{% /parameter %}
+
+{% parameter name="connectOptions" type="RoomConnectOptions" optional=true %}
+_(Optional)_ Define options how to connect to the LiveKit server.
+
+{% /parameter %}
+
+{% parameter name="onConnected" type="() => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onDisconnected" type="() => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onEncryptionError" type="(error: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onError" type="(error: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onMediaDeviceFailure" type="(failure?: MediaDeviceFailure) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="options" type="RoomOptions" optional=true %}
+_(Optional)_ Options for when creating a new room. When you pass your own room instance to this component, these options have no effect. Instead, set the options directly in the room instance.
+
+{% /parameter %}
+
+{% parameter name="room" type="Room" optional=true %}
+_(Optional)_ Optional room instance. By passing your own room instance you overwrite the `options` parameter, make sure to set the options directly on the room instance itself.
+
+{% /parameter %}
+
+{% parameter name="screen" type="ScreenShareCaptureOptions | boolean" optional=true %}
+_(Optional)_ Publish screen share immediately after connecting to your LiveKit room.
+
+{% /parameter %}
+
+{% parameter name="simulateParticipants" type="number | undefined" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="video" type="VideoCaptureOptions | boolean" optional=true %}
+_(Optional)_ Publish video immediately after connecting to your LiveKit room.
+
+{% /parameter %}

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

@@ -0,0 +1,73 @@
+---
+{
+  "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
+
+The `MediaDeviceSelect` list all media devices of one kind. Clicking on one of the listed devices make it the active media device.
+
+## Import
+
+```typescript
+import { MediaDeviceSelect } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <MediaDeviceSelect kind="audioinput" />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="kind" type="MediaDeviceKind" optional=false %}
+{% /parameter %}
+
+{% parameter name="exactMatch" type="boolean" optional=true %}
+_(Optional)_ will force the browser to only return the specified device will call `onDeviceSelectError` with the error in case this fails
+
+{% /parameter %}
+
+{% parameter name="initialSelection" type="string" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onActiveDeviceChange" type="(deviceId: string) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onDeviceListChange" type="(devices: MediaDeviceInfo[]) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onDeviceSelectError" type="(e: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onError" type="(e: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="requestPermissions" type="boolean" optional=true %}
+_(Optional)_ this will call getUserMedia if the permissions are not yet given to enumerate the devices with device labels. in some browsers multiple calls to getUserMedia result in multiple permission prompts. It's generally advised only flip this to true, once a (preview) track has been acquired successfully with the appropriate permissions.
+
+{% /parameter %}
+
+{% parameter name="track" type="LocalAudioTrack | LocalVideoTrack" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/{participantaudiotile.md → component/participantaudiotile.md}

@@ -11,12 +11,10 @@
 
 The `ParticipantAudioTile` component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the `TileLoop` or independently if a participant is passed as a property.
 
-**Signature:**
+## Import
 
 ```typescript
-ParticipantAudioTile: React.ForwardRefExoticComponent<
-  ParticipantTileProps & React.RefAttributes<HTMLDivElement>
->;
+import { ParticipantAudioTile } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -26,3 +24,20 @@ ParticipantAudioTile: React.ForwardRefExoticComponent<
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="disableSpeakingIndicator" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onParticipantClick" type="(event: ParticipantClickEvent) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track reference to display.
+
+{% /parameter %}

package/generated-docs/react/{participantname.md → component/participantname.md}

@@ -11,12 +11,10 @@
 
 The `ParticipantName` component displays the name of the participant as a string within an HTML span element. If no participant name is undefined the participant identity string is displayed.
 
-**Signature:**
+## Import
 
 ```typescript
-ParticipantName: React.ForwardRefExoticComponent<
-  ParticipantNameProps & React.RefAttributes<HTMLSpanElement>
->;
+import { ParticipantName } from "@livekit/components-react";
 ```
 
 ## Usage

package/generated-docs/react/{participanttile.md → component/participanttile.md}

@@ -11,12 +11,10 @@
 
 The `ParticipantTile` component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the `TrackLoop` component or by passing a track reference as property.
 
-**Signature:**
+## Import
 
 ```typescript
-ParticipantTile: React.ForwardRefExoticComponent<
-  ParticipantTileProps & React.RefAttributes<HTMLDivElement>
->;
+import { ParticipantTile } from "@livekit/components-react";
 ```
 
 ## Usage Example 1
@@ -38,3 +36,20 @@ Using the `ParticipantTile` component as a child of the `TrackLoop` component:
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 2} /%}
+
+## Properties
+
+{% parameter name="disableSpeakingIndicator" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onParticipantClick" type="(event: ParticipantClickEvent) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track reference to display.
+
+{% /parameter %}

package/generated-docs/react/{roomname.md → component/roomname.md}

@@ -11,10 +11,10 @@
 
 The `RoomName` component renders the name of the connected LiveKit room inside a span tag.
 
-**Signature:**
+## Import
 
 ```typescript
-RoomName: React.ForwardRefExoticComponent<RoomNameProps & React.RefAttributes<HTMLSpanElement>>;
+import { RoomName } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -26,3 +26,10 @@ RoomName: React.ForwardRefExoticComponent<RoomNameProps & React.RefAttributes<HT
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="childrenPosition" type="'before' | 'after'" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/{startaudio.md → component/startaudio.md}

@@ -11,12 +11,10 @@
 
 The `StartAudio` component is only visible when the browser blocks audio playback. This is due to some browser implemented autoplay policies. To start audio playback, the user must perform a user-initiated event such as clicking this button. As soon as audio playback starts, the button hides itself again.
 
-**Signature:**
+## Import
 
 ```typescript
-StartAudio: React.ForwardRefExoticComponent<
-  AllowAudioPlaybackProps & React.RefAttributes<HTMLButtonElement>
->;
+import { StartAudio } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -28,3 +26,8 @@ StartAudio: React.ForwardRefExoticComponent<
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="label" type="string" optional=false %}
+{% /parameter %}

package/generated-docs/react/{trackmutedindicator.md → component/trackmutedindicator.md}

@@ -11,12 +11,10 @@
 
 The `TrackMutedIndicator` shows whether the participant's camera or microphone is muted or not. By default, a muted/unmuted icon is displayed for a camera, microphone, and screen sharing track.
 
-**Signature:**
+## Import
 
 ```typescript
-TrackMutedIndicator: React.ForwardRefExoticComponent<
-  TrackMutedIndicatorProps & React.RefAttributes<HTMLDivElement>
->;
+import { TrackMutedIndicator } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -26,3 +24,13 @@ TrackMutedIndicator: React.ForwardRefExoticComponent<
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=false %}
+{% /parameter %}
+
+{% parameter name="show" type="'always' | 'muted' | 'unmuted'" optional=true %}
+_(Optional)_
+
+{% /parameter %}

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

@@ -0,0 +1,64 @@
+---
+{
+  "title": "TrackToggle",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/TrackToggle.tsx"
+}
+---
+
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+# TrackToggle
+
+With the `TrackToggle` component it is possible to mute and unmute your camera and microphone. The component uses an html button element under the hood so you can treat it like a button.
+
+## Import
+
+```typescript
+import { TrackToggle } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <TrackToggle source={Track.Source.Microphone} />
+  <TrackToggle source={Track.Source.Camera} />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="source" type="T" optional=false %}
+{% /parameter %}
+
+{% parameter name="captureOptions" type="CaptureOptionsBySource<T>" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="initialState" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onChange" type="(enabled: boolean, isUserInitiated: boolean) => void" optional=true %}
+_(Optional)_ Function that is called when the enabled state of the toggle changes. The second function argument `isUserInitiated` is `true` if the change was initiated by a user interaction, such as a click.
+
+{% /parameter %}
+
+{% parameter name="onDeviceError" type="(error: Error) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="publishOptions" type="TrackPublishOptions" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="showIcon" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}

package/generated-docs/react/{videotrack.md → component/videotrack.md}

@@ -11,12 +11,10 @@
 
 The `VideoTrack` component is responsible for rendering participant video tracks like `camera` and `screen_share`<!-- -->. This component must have access to the participant's context, or alternatively pass it a `Participant` as a property.
 
-**Signature:**
+## Import
 
 ```typescript
-VideoTrack: React.ForwardRefExoticComponent<
-  VideoTrackProps & React.RefAttributes<HTMLVideoElement>
->;
+import { VideoTrack } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -26,3 +24,25 @@ VideoTrack: React.ForwardRefExoticComponent<
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
+
+## Properties
+
+{% parameter name="manageSubscription" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onSubscriptionStatusChanged" type="(subscribed: boolean) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="onTrackClick" type="(evt: ParticipantClickEvent) => void" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
+{% parameter name="trackRef" type="TrackReference" optional=true %}
+_(Optional)_ The track reference of the track to render.
+
+{% /parameter %}