@livekit/components-js-docs 0.0.5 → 0.1.1

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

@@ -1,13 +1,20 @@
+---
+{
+  "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
 
-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.
+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.
 
 ## Import
 
 ```typescript
-import { ParticipantAudioTile } from '@livekit/components-react';
+import { ParticipantAudioTile } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -30,17 +37,34 @@ _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="participant" type="Participant" optional=true %}
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track reference to display.
+
+{% /parameter %}
+
+{% 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="publication" type="TrackPublication" 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="source" type="Track.Source" optional=true %}
+{% 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,11 +1,28 @@
+---
+{
+  "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
 
+The `ParticipantContextIfNeeded` component only creates a `ParticipantContext` if there is no `ParticipantContext` already.
+
 ## Import
 
 ```typescript
-import { ParticipantContextIfNeeded } from '@livekit/components-react';
+import { ParticipantContextIfNeeded } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<ParticipantContextIfNeeded participant={trackReference.participant}>
+  ...
+</ParticipantContextIfNeeded>
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}

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

@@ -1,13 +1,20 @@
+---
+{
+  "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
 
-The ParticipantLoop component loops over an array of participants to create a context for every participant. This component takes exactly one child component as a template. By providing your own template as a child you have full control over the look and feel of your participant representations.
+The `ParticipantLoop` component loops over an array of participants to create a context for every participant. This component takes exactly one child component as a template. By providing your own template as a child you have full control over the look and feel of your participant representations.
 
 ## Import
 
 ```typescript
-import { ParticipantLoop } from '@livekit/components-react';
+import { ParticipantLoop } from "@livekit/components-react";
 ```
 
 ## Remarks

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

@@ -1,13 +1,20 @@
+---
+{
+  "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
 
-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.
+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.
 
 ## Import
 
 ```typescript
-import { ParticipantName } from '@livekit/components-react';
+import { ParticipantName } from "@livekit/components-react";
 ```
 
 ## Usage

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

@@ -1,24 +1,41 @@
+---
+{
+  "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
 
-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 spreading a track reference as properties.
+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.
 
 ## Import
 
 ```typescript
-import { ParticipantTile } from '@livekit/components-react';
+import { ParticipantTile } from "@livekit/components-react";
 ```
 
-## Usage
+## Usage Example 1
+
+Using the `ParticipantTile` component with a track reference:
 
 ```tsx
-<ParticipantTile source={Track.Source.Camera} />
+<ParticipantTile trackRef={trackRef} />
+```
 
-<ParticipantTile {...trackReference} />
+## Usage Example 2
+
+Using the `ParticipantTile` component as a child of the `TrackLoop` component:
+
+```tsx
+<TrackLoop>
+  <ParticipantTile />
+</TrackLoop>
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 1} /%}
+{% partial file="p_usage.md" variables={exampleCount: 2} /%}
 
 ## Properties
 
@@ -32,17 +49,34 @@ _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="participant" type="Participant" optional=true %}
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
+_(Optional)_ The track reference to display.
+
+{% /parameter %}
+
+{% 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="publication" type="TrackPublication" 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="source" type="Track.Source" optional=true %}
+{% 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,18 +1,25 @@
+---
+{
+  "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
 
-The PreJoin prefab component is normally presented to the user before he enters a room. This component allows the user to check and select the preferred media device (camera und microphone). On submit the user decisions are returned, which can then be passed on to the LiveKitRoom so that the user enters the room with the correct media devices.
+The `PreJoin` prefab component is normally presented to the user before he enters a room. This component allows the user to check and select the preferred media device (camera und microphone). On submit the user decisions are returned, which can then be passed on to the `LiveKitRoom` so that the user enters the room with the correct media devices.
 
 ## 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 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.
 
 ## Usage
 
@@ -64,6 +71,11 @@ _(Optional)_ Provide your custom validation function. Only if validation is succ
 
 {% /parameter %}
 
+{% parameter name="showE2EEOptions" type="boolean" optional=true %}
+_(Optional)_
+
+{% /parameter %}
+
 {% parameter name="userLabel" type="string" optional=true %}
 _(Optional)_
 

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

@@ -1,13 +1,20 @@
+---
+{
+  "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
 
-The RoomAudioRenderer component is a drop-in solution for adding audio to your LiveKit app. It takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
+The `RoomAudioRenderer` component is a drop-in solution for adding audio to your LiveKit app. It takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
 
 ## Import
 
 ```typescript
-import { RoomAudioRenderer } from '@livekit/components-react';
+import { RoomAudioRenderer } from "@livekit/components-react";
 ```
 
 ## Usage

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

@@ -1,13 +1,20 @@
+---
+{
+  "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
 
-The RoomName component renders the name of the connected LiveKit room inside a span tag.
+The `RoomName` component renders the name of the connected LiveKit room inside a span tag.
 
 ## Import
 
 ```typescript
-import { RoomName } from '@livekit/components-react';
+import { RoomName } from "@livekit/components-react";
 ```
 
 ## Usage

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

@@ -1,13 +1,20 @@
+---
+{
+  "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
 
-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.
+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.
 
 ## Import
 
 ```typescript
-import { StartAudio } from '@livekit/components-react';
+import { StartAudio } from "@livekit/components-react";
 ```
 
 ## Usage

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

@@ -1,11 +1,26 @@
+---
+{
+  "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
 
+The `Toast` component is a rudimentary way to display a message to the user. This message should be short lived and not require user interaction. For example, displaying the current connection state like `ConnectionStateToast` does.
+
 ## Import
 
 ```typescript
-import { Toast } from '@livekit/components-react';
+import { Toast } from "@livekit/components-react";
+```
+
+## Usage
+
+```tsx
+<Toast>Connecting...</Toast>
 ```
 
-{% partial file="p_usage.md" variables={exampleCount: 0} /%}
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}

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

@@ -1,23 +1,30 @@
+---
+{
+  "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
 
-The TrackLoop component loops over tracks. It is for example a easy way to loop over all participant camera and screen share tracks. TrackLoop creates a TrackContext for each track that you can use to e.g. render the track.
+The `TrackLoop` component loops over tracks. It is for example a easy way to loop over all participant camera and screen share tracks. `TrackLoop` creates a `TrackRefContext` for each track that you can use to e.g. render the track.
 
 ## Import
 
 ```typescript
-import { TrackLoop } from '@livekit/components-react';
+import { TrackLoop } from "@livekit/components-react";
 ```
 
 ## Usage
 
 ```tsx
-const tracks = useTracks([Track.Source.Camera]);
-<TrackLoop tracks={tracks} >
- <TrackContext.Consumer>
-   {(track) => track && <VideoTrack {...track}/>}
- </TrackContext.Consumer>
+const trackRefs = useTracks([Track.Source.Camera]);
+<TrackLoop tracks={trackRefs} >
+ <TrackRefContext.Consumer>
+   {(trackRef) => trackRef && <VideoTrack trackRef={trackRef}/>}
+ </TrackRefContext.Consumer>
 <TrackLoop />
 ```
 

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

@@ -1,13 +1,20 @@
+---
+{
+  "title": "TrackMutedIndicator",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/TrackMutedIndicator.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # TrackMutedIndicator
 
-The TrackMutedIndicator shows whether the participant's camera or microphone is muted or not.
+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.
 
 ## Import
 
 ```typescript
-import { TrackMutedIndicator } from '@livekit/components-react';
+import { TrackMutedIndicator } from "@livekit/components-react";
 ```
 
 ## Usage
@@ -21,15 +28,30 @@ import { TrackMutedIndicator } from '@livekit/components-react';
 
 ## Properties
 
-{% parameter name="source" type="Track.Source" optional=false %}
+{% parameter name="show" type="'always' | 'muted' | 'unmuted'" optional=true %}
+_(Optional)_
+
 {% /parameter %}
 
-{% parameter name="participant" type="Participant" optional=true %}
+{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=true %}
 _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="show" type="'always' | 'muted' | 'unmuted'" 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 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/tracktoggle.md

@@ -1,13 +1,20 @@
+---
+{
+  "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.
+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';
+import { TrackToggle } from "@livekit/components-react";
 ```
 
 ## Usage

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

@@ -1,18 +1,25 @@
+---
+{
+  "title": "VideoConference",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/prefabs/VideoConference.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # VideoConference
 
-This component is the default setup of a classic LiveKit video conferencing app. It provides functionality like switching between participant grid view and focus view.
+The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application. It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers of participants, basic non-persistent chat, screen sharing, and more.
 
 ## Import
 
 ```typescript
-import { VideoConference } from '@livekit/components-react';
+import { VideoConference } from "@livekit/components-react";
 ```
 
 ## Remarks
 
-The component is implemented with other LiveKit components like `FocusContextProvider`<!-- -->, `GridLayout`<!-- -->, `ControlBar`<!-- -->, `FocusLayoutContainer` and `FocusLayout`<!-- -->.
+The component is implemented with other LiveKit components like `FocusContextProvider`<!-- -->, `GridLayout`<!-- -->, `ControlBar`<!-- -->, `FocusLayoutContainer` and `FocusLayout`<!-- -->. You can use this components as a starting point for your own custom video conferencing application.
 
 ## Usage
 

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

@@ -1,54 +1,84 @@
+---
+{
+  "title": "VideoTrack",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/VideoTrack.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 # VideoTrack
 
-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.
+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.
 
 ## Import
 
 ```typescript
-import { VideoTrack } from '@livekit/components-react';
+import { VideoTrack } from "@livekit/components-react";
 ```
 
 ## Usage
 
 ```tsx
-<VideoTrack source={Track.Source.Camera} />
+<VideoTrack trackRef={trackRef} />
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
 
 ## Properties
 
-{% parameter name="source" type="Track.Source" optional=false %}
+{% parameter name="manageSubscription" type="boolean" optional=true %}
+_(Optional)_
+
 {% /parameter %}
 
-{% parameter name="manageSubscription" type="boolean" optional=true %}
+{% parameter name="onSubscriptionStatusChanged" type="(subscribed: boolean) => void" optional=true %}
 _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="name" type="string" optional=true %}
+{% parameter name="onTrackClick" type="(evt: ParticipantClickEvent) => void" optional=true %}
 _(Optional)_
 
 {% /parameter %}
 
-{% parameter name="onSubscriptionStatusChanged" type="(subscribed: boolean) => void" optional=true %}
+{% parameter name="trackRef" type="TrackReference" optional=true %}
+_(Optional)_ The track reference of the track to render.
+
+{% /parameter %}
+
+{% parameter name="name" type="string" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This property will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="onTrackClick" type="(evt: ParticipantClickEvent) => void" optional=true %}
+{% parameter name="participant" type="Participant" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This property will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="participant" type="Participant" optional=true %}
+{% parameter name="publication" type="TrackPublication" optional=true deprecated=true %}
 _(Optional)_
 
+{% callout type="caution" variation="compact" %}
+This property will be removed in a future version use `trackRef` instead.
+
+{% /callout %}
 {% /parameter %}
 
-{% parameter name="publication" type="TrackPublication" optional=true %}
+{% parameter name="source" type="Track.Source" 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/connectionqualityindicatoroptions.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "ConnectionQualityIndicatorOptions interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useConnectionQualityIndicator.ts"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ConnectionQualityIndicatorOptions interface
+# ConnectionQualityIndicatorOptions interface
 
 **Signature:**
 

package/generated-docs/react/connectionqualityindicatoroptions.participant.md

@@ -1,6 +1,10 @@
+---
+{ "title": "ConnectionQualityIndicatorOptions.participant property" }
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ConnectionQualityIndicatorOptions.participant property
+# ConnectionQualityIndicatorOptions.participant property
 
 **Signature:**
 

package/generated-docs/react/connectionqualityindicatorprops.md

@@ -1,6 +1,13 @@
+---
+{
+  "title": "ConnectionQualityIndicatorProps interface",
+  "linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ConnectionQualityIndicator.tsx"
+}
+---
+
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-## ConnectionQualityIndicatorProps interface
+# ConnectionQualityIndicatorProps interface
 
 **Signature:**