@livekit/components-js-docs 0.1.18 → 0.1.20

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

@@ -1,20 +1,22 @@
 ---
 {
-  "title": "ParticipantTile",
+  "title": "ParticipantTile variable",
   "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
+# ParticipantTile variable
 
 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
+**Signature:**
 
 ```typescript
-import { ParticipantTile } from "@livekit/components-react";
+ParticipantTile: React.ForwardRefExoticComponent<
+  ParticipantTileProps & React.RefAttributes<HTMLDivElement>
+>;
 ```
 
 ## Usage Example 1
@@ -36,20 +38,3 @@ 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/{component/roomname.md → roomname.md}

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

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

@@ -1,20 +1,22 @@
 ---
 {
-  "title": "StartAudio",
+  "title": "StartAudio variable",
   "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
+# StartAudio variable
 
 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
+**Signature:**
 
 ```typescript
-import { StartAudio } from "@livekit/components-react";
+StartAudio: React.ForwardRefExoticComponent<
+  AllowAudioPlaybackProps & React.RefAttributes<HTMLButtonElement>
+>;
 ```
 
 ## Usage
@@ -26,8 +28,3 @@ import { StartAudio } from "@livekit/components-react";
 ```
 
 {% partial file="p_usage.md" variables={exampleCount: 1} /%}
-
-## Properties
-
-{% parameter name="label" type="string" optional=false %}
-{% /parameter %}

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

@@ -1,37 +1,28 @@
 ---
 {
-  "title": "TrackMutedIndicator",
+  "title": "TrackMutedIndicator variable",
   "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
+# TrackMutedIndicator variable
 
 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
+**Signature:**
 
 ```typescript
-import { TrackMutedIndicator } from "@livekit/components-react";
+TrackMutedIndicator: React.ForwardRefExoticComponent<
+  TrackMutedIndicatorProps & React.RefAttributes<HTMLDivElement>
+>;
 ```
 
 ## Usage
 
 ```tsx
-<TrackMutedIndicator source={Track.Source.Camera} />
-<TrackMutedIndicator source={Track.Source.Microphone} />
+<TrackMutedIndicator trackRef={trackRef} />
 ```
 
 {% 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/tracktoggle.md

@@ -0,0 +1,31 @@
+---
+{
+  "title": "TrackToggle variable",
+  "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 variable
+
+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.
+
+**Signature:**
+
+```typescript
+TrackToggle: React.ForwardRefExoticComponent<
+  TrackToggleProps<ToggleSource> & React.RefAttributes<HTMLButtonElement>
+>;
+```
+
+## Usage
+
+```tsx
+<LiveKitRoom>
+  <TrackToggle source={Track.Source.Microphone} />
+  <TrackToggle source={Track.Source.Camera} />
+</LiveKitRoom>
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}

package/generated-docs/react/videotrack.md

@@ -0,0 +1,28 @@
+---
+{
+  "title": "VideoTrack variable",
+  "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 variable
+
+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:**
+
+```typescript
+VideoTrack: React.ForwardRefExoticComponent<
+  VideoTrackProps & React.RefAttributes<HTMLVideoElement>
+>;
+```
+
+## Usage
+
+```tsx
+<VideoTrack trackRef={trackRef} />
+```
+
+{% partial file="p_usage.md" variables={exampleCount: 1} /%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/components-js-docs",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "Automatically generated documentation pages for LiveKit Components JS. Intended to be consumed by the documentation page.",
   "repository": {
     "type": "git",
@@ -8,7 +8,7 @@
     "directory": "/docs/beta-docs"
   },
   "dependencies": {
-    "@livekit/components-react": "2.1.2"
+    "@livekit/components-react": "2.2.0"
   },
   "author": "",
   "license": "Apache-2.0",

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

@@ -1,50 +0,0 @@
----
-{
-  "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/component/chatentry.md

@@ -1,50 +0,0 @@
----
-{
-  "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/component/livekitroom.md

@@ -1,105 +0,0 @@
----
-{
-  "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
-
-The `LiveKitRoom` component provides the room context to all its child components. It is generally the starting point of your LiveKit app and the root of the LiveKit component tree. It provides the room state as a React context to all child components, so you don't have to pass it yourself.
-
-## Import
-
-```typescript
-import { LiveKitRoom } from "@livekit/components-react";
-```
-
-## Usage
-
-```tsx
-<LiveKitRoom token="<livekit-token>" serverUrl="<url-to-livekit-server>" connect={true}>
-  ...
-</LiveKitRoom>
-```
-
-{% 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

@@ -1,73 +0,0 @@
----
-{
-  "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/component/tracktoggle.md

@@ -1,54 +0,0 @@
----
-{
-  "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="showIcon" type="boolean" optional=true %}
-_(Optional)_
-
-{% /parameter %}

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

@@ -1,48 +0,0 @@
----
-{
-  "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.
-
-## Import
-
-```typescript
-import { VideoTrack } from "@livekit/components-react";
-```
-
-## Usage
-
-```tsx
-<VideoTrack trackRef={trackRef} />
-```
-
-{% 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 %}