@livekit/components-js-docs 0.1.22 → 0.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/generated-docs/core/addmediatimestamptotranscription.md +22 -0
- package/generated-docs/core/allparticipantevents.md +2 -2
- package/generated-docs/core/allparticipantroomevents.md +2 -2
- package/generated-docs/core/allremoteparticipantevents.md +2 -2
- package/generated-docs/core/allremoteparticipantroomevents.md +2 -2
- package/generated-docs/core/cssprefix.md +2 -2
- package/generated-docs/core/datatopic.md +2 -2
- package/generated-docs/core/dedupesegments.md +22 -0
- package/generated-docs/core/defaultuserchoices.md +2 -2
- package/generated-docs/core/didactivesegmentschange.md +19 -0
- package/generated-docs/core/getactivetranscriptionsegments.md +23 -0
- package/generated-docs/core/grid_layouts.md +2 -2
- package/generated-docs/core/index.md +128 -120
- package/generated-docs/core/log.md +2 -2
- package/generated-docs/core/participanttrackevents.md +2 -2
- package/generated-docs/core/pin_default_state.md +2 -2
- package/generated-docs/core/receivedtranscriptionsegment.md +19 -0
- package/generated-docs/core/trackeventselector.md +19 -0
- package/generated-docs/core/tracksynctimeobserver.md +16 -0
- package/generated-docs/core/tracktranscriptionobserver.md +18 -0
- package/generated-docs/core/widget_default_state.md +2 -2
- package/generated-docs/react/audiotrack.md +2 -2
- package/generated-docs/react/audiovisualizer.md +2 -2
- package/generated-docs/react/chatentry.md +2 -2
- package/generated-docs/react/chattoggle.md +2 -2
- package/generated-docs/react/clearpinbutton.md +2 -2
- package/generated-docs/react/{layoutcontext.md → component/layoutcontext.md} +4 -4
- package/generated-docs/react/{livekitroom.md → component/livekitroom.md} +4 -8
- package/generated-docs/react/{participantcontext.md → component/participantcontext.md} +4 -4
- package/generated-docs/react/{roomcontext.md → component/roomcontext.md} +4 -4
- package/generated-docs/react/{trackrefcontext.md → component/trackrefcontext.md} +4 -4
- package/generated-docs/react/connectionqualityindicator.md +2 -2
- package/generated-docs/react/connectionstate.md +2 -2
- package/generated-docs/react/disconnectbutton.md +2 -2
- package/generated-docs/react/focustoggle.md +2 -2
- package/generated-docs/react/hook/useisencrypted.md +3 -0
- package/generated-docs/react/hook/usetracktranscription.md +34 -0
- package/generated-docs/react/index.md +9 -6
- package/generated-docs/react/mediadeviceselect.md +2 -2
- package/generated-docs/react/meta-data.json +1 -1
- package/generated-docs/react/participantaudiotile.md +2 -2
- package/generated-docs/react/participantname.md +2 -2
- package/generated-docs/react/participanttile.md +2 -2
- package/generated-docs/react/roomname.md +2 -2
- package/generated-docs/react/startaudio.md +2 -2
- package/generated-docs/react/trackmutedindicator.md +2 -2
- package/generated-docs/react/tracktoggle.md +2 -2
- package/generated-docs/react/tracktranscriptionoptions.buffersize.md +17 -0
- package/generated-docs/react/tracktranscriptionoptions.md +24 -0
- package/generated-docs/react/useisencryptedoptions.md +24 -0
- package/generated-docs/react/useisencryptedoptions.room.md +13 -0
- package/generated-docs/react/videotrack.md +2 -2
- package/package.json +2 -2
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "trackSyncTimeObserver",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/core/src/observables/track.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# trackSyncTimeObserver
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
export declare function trackSyncTimeObserver(track: Track): Observable<number>;
|
|
16
|
+
```
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "trackTranscriptionObserver",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/core/src/observables/track.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# trackTranscriptionObserver
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
export declare function trackTranscriptionObserver(
|
|
16
|
+
publication: TrackPublication
|
|
17
|
+
): Observable<[transcription: import("livekit-client").TranscriptionSegment[]]>;
|
|
18
|
+
```
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "WIDGET_DEFAULT_STATE
|
|
3
|
+
"title": "WIDGET_DEFAULT_STATE",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/core/src/types.ts"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# WIDGET_DEFAULT_STATE
|
|
10
|
+
# WIDGET_DEFAULT_STATE
|
|
11
11
|
|
|
12
12
|
**Signature:**
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "AudioTrack
|
|
3
|
+
"title": "AudioTrack",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/AudioTrack.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# AudioTrack
|
|
10
|
+
# AudioTrack
|
|
11
11
|
|
|
12
12
|
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.
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "AudioVisualizer
|
|
3
|
+
"title": "AudioVisualizer",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/AudioVisualizer.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# AudioVisualizer
|
|
10
|
+
# AudioVisualizer
|
|
11
11
|
|
|
12
12
|
The AudioVisualizer component is used to visualize the audio volume of a given audio track.
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "ChatEntry
|
|
3
|
+
"title": "ChatEntry",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ChatEntry.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# ChatEntry
|
|
10
|
+
# ChatEntry
|
|
11
11
|
|
|
12
12
|
The `ChatEntry` component holds and displays one chat message.
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "ChatToggle
|
|
3
|
+
"title": "ChatToggle",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/ChatToggle.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# ChatToggle
|
|
10
|
+
# ChatToggle
|
|
11
11
|
|
|
12
12
|
The `ChatToggle` component is a button that toggles the visibility of the `Chat` component.
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "ClearPinButton
|
|
3
|
+
"title": "ClearPinButton",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/ClearPinButton.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# ClearPinButton
|
|
10
|
+
# ClearPinButton
|
|
11
11
|
|
|
12
12
|
The `ClearPinButton` is a basic html button with the added ability to signal the `LayoutContext` that it should display the grid view again.
|
|
13
13
|
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "LayoutContext
|
|
3
|
+
"title": "LayoutContext",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/layout-context.ts"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# LayoutContext
|
|
10
|
+
# LayoutContext
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
## Import
|
|
13
13
|
|
|
14
14
|
```typescript
|
|
15
|
-
LayoutContext
|
|
15
|
+
import { LayoutContext } from "@livekit/components-react";
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
@@ -1,24 +1,20 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "LiveKitRoom
|
|
3
|
+
"title": "LiveKitRoom",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/LiveKitRoom.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# LiveKitRoom
|
|
10
|
+
# LiveKitRoom
|
|
11
11
|
|
|
12
12
|
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.
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
## Import
|
|
15
15
|
|
|
16
16
|
```typescript
|
|
17
|
-
LiveKitRoom
|
|
18
|
-
LiveKitRoomProps & {
|
|
19
|
-
children?: React.ReactNode;
|
|
20
|
-
} & React.RefAttributes<HTMLDivElement>
|
|
21
|
-
>;
|
|
17
|
+
import { LiveKitRoom } from "@livekit/components-react";
|
|
22
18
|
```
|
|
23
19
|
|
|
24
20
|
## Usage
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "ParticipantContext
|
|
3
|
+
"title": "ParticipantContext",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/participant-context.ts"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# ParticipantContext
|
|
10
|
+
# ParticipantContext
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
## Import
|
|
13
13
|
|
|
14
14
|
```typescript
|
|
15
|
-
ParticipantContext
|
|
15
|
+
import { ParticipantContext } from "@livekit/components-react";
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "RoomContext
|
|
3
|
+
"title": "RoomContext",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/room-context.ts"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# RoomContext
|
|
10
|
+
# RoomContext
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
## Import
|
|
13
13
|
|
|
14
14
|
```typescript
|
|
15
|
-
RoomContext
|
|
15
|
+
import { RoomContext } from "@livekit/components-react";
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "TrackRefContext
|
|
3
|
+
"title": "TrackRefContext",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/context/track-reference-context.ts"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# TrackRefContext
|
|
10
|
+
# TrackRefContext
|
|
11
11
|
|
|
12
12
|
This context provides a `TrackReferenceOrPlaceholder` to all child components.
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
## Import
|
|
15
15
|
|
|
16
16
|
```typescript
|
|
17
|
-
TrackRefContext
|
|
17
|
+
import { TrackRefContext } from "@livekit/components-react";
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "ConnectionQualityIndicator
|
|
3
|
+
"title": "ConnectionQualityIndicator",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ConnectionQualityIndicator.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# ConnectionQualityIndicator
|
|
10
|
+
# ConnectionQualityIndicator
|
|
11
11
|
|
|
12
12
|
The `ConnectionQualityIndicator` shows the individual connection quality of a participant.
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "ConnectionState
|
|
3
|
+
"title": "ConnectionState",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/ConnectionState.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# ConnectionState
|
|
10
|
+
# ConnectionState
|
|
11
11
|
|
|
12
12
|
The `ConnectionState` component displays the connection status of the room as strings (`"connected" | "connecting" | "disconnected" | "reconnecting"`<!-- -->).
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "DisconnectButton
|
|
3
|
+
"title": "DisconnectButton",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/DisconnectButton.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# DisconnectButton
|
|
10
|
+
# DisconnectButton
|
|
11
11
|
|
|
12
12
|
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.
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "FocusToggle
|
|
3
|
+
"title": "FocusToggle",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/FocusToggle.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# FocusToggle
|
|
10
|
+
# FocusToggle
|
|
11
11
|
|
|
12
12
|
The `FocusToggle` puts the `ParticipantTile` in focus or removes it from focus.
|
|
13
13
|
|
|
@@ -19,6 +19,9 @@ import { useIsEncrypted } from "@livekit/components-react";
|
|
|
19
19
|
|
|
20
20
|
## Properties
|
|
21
21
|
|
|
22
|
+
{% parameter name="options" type="UseIsEncryptedOptions" optional=true %}
|
|
23
|
+
{% /parameter %}
|
|
24
|
+
|
|
22
25
|
{% parameter name="participant" type="Participant" optional=true %}
|
|
23
26
|
{% /parameter %}
|
|
24
27
|
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "useTrackTranscription",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useTrackTranscription.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# useTrackTranscription
|
|
11
|
+
|
|
12
|
+
## Import
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
import { useTrackTranscription } from "@livekit/components-react";
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
19
|
+
|
|
20
|
+
## Properties
|
|
21
|
+
|
|
22
|
+
{% parameter name="trackRef" type="TrackReferenceOrPlaceholder" optional=false %}
|
|
23
|
+
{% /parameter %}
|
|
24
|
+
|
|
25
|
+
{% parameter name="options" type="TrackTranscriptionOptions" optional=true %}
|
|
26
|
+
{% /parameter %}
|
|
27
|
+
|
|
28
|
+
## Returns
|
|
29
|
+
|
|
30
|
+
```typescript
|
|
31
|
+
{
|
|
32
|
+
segments: ReceivedTranscriptionSegment[];
|
|
33
|
+
}
|
|
34
|
+
```
|
|
@@ -15,12 +15,17 @@
|
|
|
15
15
|
| [FocusLayout({ trackRef, ...htmlProps })](./react/component/focuslayout.md) | The <code>FocusLayout</code> component is just a light wrapper around the <code>ParticipantTile</code> to display a single participant. |
|
|
16
16
|
| [FocusLayoutContainer(props)](./react/component/focuslayoutcontainer.md) | The <code>FocusLayoutContainer</code> is a layout component that expects two children: A small side component: In a video conference, this is usually a carousel of participants who are not in focus. And a larger main component to display the focused participant. For example, with the <code>FocusLayout</code> component. |
|
|
17
17
|
| [GridLayout({ tracks, ...props })](./react/component/gridlayout.md) | The <code>GridLayout</code> component displays the nested participants in a grid where every participants has the same size. It also supports pagination if there are more participants than the grid can display. |
|
|
18
|
+
| [LayoutContext](./react/component/layoutcontext.md) | |
|
|
18
19
|
| [LayoutContextProvider({ value, onPinChange, onWidgetChange, children, })](./react/component/layoutcontextprovider.md) | |
|
|
20
|
+
| [LiveKitRoom](./react/component/livekitroom.md) | The <code>LiveKitRoom</code> 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. |
|
|
21
|
+
| [ParticipantContext](./react/component/participantcontext.md) | |
|
|
19
22
|
| [ParticipantContextIfNeeded(props)](./react/component/participantcontextifneeded.md) | The <code>ParticipantContextIfNeeded</code> component only creates a <code>ParticipantContext</code> if there is no <code>ParticipantContext</code> already. |
|
|
20
23
|
| [ParticipantLoop({ participants, ...props })](./react/component/participantloop.md) | The <code>ParticipantLoop</code> 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. |
|
|
21
24
|
| [RoomAudioRenderer({ volume, muted })](./react/component/roomaudiorenderer.md) | The <code>RoomAudioRenderer</code> 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. |
|
|
25
|
+
| [RoomContext](./react/component/roomcontext.md) | |
|
|
22
26
|
| [Toast(props)](./react/component/toast.md) | The <code>Toast</code> 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 <code>ConnectionStateToast</code> does. |
|
|
23
27
|
| [TrackLoop({ tracks, ...props })](./react/component/trackloop.md) | The <code>TrackLoop</code> component loops over tracks. It is for example a easy way to loop over all participant camera and screen share tracks. <code>TrackLoop</code> creates a <code>TrackRefContext</code> for each track that you can use to e.g. render the track. |
|
|
28
|
+
| [TrackRefContext](./react/component/trackrefcontext.md) | This context provides a <code>TrackReferenceOrPlaceholder</code> to all child components. |
|
|
24
29
|
|
|
25
30
|
## Prefabs
|
|
26
31
|
|
|
@@ -55,7 +60,7 @@
|
|
|
55
60
|
| [useFacingMode(trackReference)](./react/hook/usefacingmode.md) | Try to determine the <code>facingMode</code> of a local participant video track. |
|
|
56
61
|
| [useFocusToggle({ trackRef, props })](./react/hook/usefocustoggle.md) | The <code>useFocusToggle</code> hook is used to implement the <code>FocusToggle</code> or your custom implementation of it. The <code>TrackReferenceOrPlaceholder</code> is used to register a onClick handler and to identify the track to focus on. |
|
|
57
62
|
| [useGridLayout(gridElement, trackCount)](./react/hook/usegridlayout.md) | The <code>useGridLayout</code> hook tries to select the best layout to fit all tiles. If the available screen space is not enough, it will reduce the number of maximum visible tiles and select a layout that still works visually within the given limitations. As the order of tiles changes over time, the hook tries to keep visual updates to a minimum while trying to display important tiles such as speaking participants or screen shares. |
|
|
58
|
-
| [useIsEncrypted(participant)](./react/hook/useisencrypted.md)
|
|
63
|
+
| [useIsEncrypted(participant, options)](./react/hook/useisencrypted.md) | |
|
|
59
64
|
| [useIsMuted(trackRef)](./react/hook/useismuted.md) | The <code>useIsMuted</code> hook is used to implement the <code>TrackMutedIndicator</code> or your custom implementation of it. It returns a <code>boolean</code> that indicates if the track is muted or not. |
|
|
60
65
|
| [useIsSpeaking(participant)](./react/hook/useisspeaking.md) | The <code>useIsSpeaking</code> hook returns a <code>boolean</code> that indicates if the participant is speaking or not. |
|
|
61
66
|
| [useLayoutContext()](./react/hook/uselayoutcontext.md) | Ensures that a layout context is provided via context. If no layout context is provided, an error is thrown. |
|
|
@@ -95,6 +100,7 @@
|
|
|
95
100
|
| [useTrackRefContext()](./react/hook/usetrackrefcontext.md) | Ensures that a track reference is provided via context. If not inside a <code>TrackRefContext</code>, an error is thrown. |
|
|
96
101
|
| [useTracks(sources, options)](./react/hook/usetracks.md) | The <code>useTracks</code> hook returns an array of <code>TrackReference</code> or <code>TrackReferenceOrPlaceholder</code> depending on the provided <code>sources</code> property. If only subscribed tracks are desired, set the <code>onlySubscribed</code> property to <code>true</code>. |
|
|
97
102
|
| [useTrackToggle({ source, onChange, initialState, captureOptions, publishOptions, onDeviceError, ...rest })](./react/hook/usetracktoggle.md) | The <code>useTrackToggle</code> hook is used to implement the <code>TrackToggle</code> component and returns state and functionality of the given track. |
|
|
103
|
+
| [useTrackTranscription(trackRef, options)](./react/hook/usetracktranscription.md) | |
|
|
98
104
|
| [useTrackVolume(trackOrTrackReference, options)](./react/hook/usetrackvolume.md) | Hook for tracking the volume of an audio track using the Web Audio API. |
|
|
99
105
|
| [useVisualStableUpdate(trackReferences, maxItemsOnPage, options)](./react/hook/usevisualstableupdate.md) | The <code>useVisualStableUpdate</code> hook is used to prevent visually jarring jumps and shifts of elements in an array. The algorithm only starts to update when there are more items than visually fit on a page. If this is the case, it will make sure that speaking participants move to the first page and are always visible. |
|
|
100
106
|
|
|
@@ -133,10 +139,8 @@
|
|
|
133
139
|
| [FocusToggleProps](./react/focustoggleprops.md) | |
|
|
134
140
|
| [formatChatMessageLinks(message)](./react/formatchatmessagelinks.md) | |
|
|
135
141
|
| [GridLayoutProps](./react/gridlayoutprops.md) | |
|
|
136
|
-
| [LayoutContext](./react/layoutcontext.md) | |
|
|
137
142
|
| [LayoutContextProviderProps](./react/layoutcontextproviderprops.md) | |
|
|
138
143
|
| [LayoutContextType](./react/layoutcontexttype.md) | |
|
|
139
|
-
| [LiveKitRoom](./react/livekitroom.md) | The <code>LiveKitRoom</code> 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. |
|
|
140
144
|
| [LiveKitRoomProps](./react/livekitroomprops.md) | |
|
|
141
145
|
| [LocalUserChoices](./react/localuserchoices.md) | Represents the user's choices for video and audio input devices, as well as their username. |
|
|
142
146
|
| [MediaDeviceMenuProps](./react/mediadevicemenuprops.md) | |
|
|
@@ -147,7 +151,6 @@
|
|
|
147
151
|
| [MessageFormatter](./react/messageformatter.md) | |
|
|
148
152
|
| [MultiBandTrackVolumeOptions](./react/multibandtrackvolumeoptions.md) | Interface for configuring options for the useMultibandTrackVolume hook. |
|
|
149
153
|
| [ParticipantAudioTile](./react/participantaudiotile.md) | The <code>ParticipantAudioTile</code> component is the base utility wrapper for displaying a visual representation of a participant. This component can be used as a child of the <code>TileLoop</code> or independently if a participant is passed as a property. |
|
|
150
|
-
| [ParticipantContext](./react/participantcontext.md) | |
|
|
151
154
|
| [ParticipantLoopProps](./react/participantloopprops.md) | |
|
|
152
155
|
| [ParticipantName](./react/participantname.md) | The <code>ParticipantName</code> 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. |
|
|
153
156
|
| [ParticipantNameProps](./react/participantnameprops.md) | |
|
|
@@ -157,7 +160,6 @@
|
|
|
157
160
|
| [PreJoinProps](./react/prejoinprops.md) | Props for the PreJoin component. |
|
|
158
161
|
| [ReceivedChatMessage](./react/receivedchatmessage.md) | |
|
|
159
162
|
| [RoomAudioRendererProps](./react/roomaudiorendererprops.md) | |
|
|
160
|
-
| [RoomContext](./react/roomcontext.md) | |
|
|
161
163
|
| [RoomName](./react/roomname.md) | The <code>RoomName</code> component renders the name of the connected LiveKit room inside a span tag. |
|
|
162
164
|
| [RoomNameProps](./react/roomnameprops.md) | |
|
|
163
165
|
| [setLogExtension(extension, options)](./react/setlogextension.md) | Set the log extension for both the <code>@livekit/components-react</code> package and the <code>@livekit-client</code> package. To set the <code>@livekit-client</code> log extension, use the <code>liveKitClientLogExtension</code> prop on the <code>options</code> object. |
|
|
@@ -166,13 +168,14 @@
|
|
|
166
168
|
| [TrackLoopProps](./react/trackloopprops.md) | |
|
|
167
169
|
| [TrackMutedIndicator](./react/trackmutedindicator.md) | The <code>TrackMutedIndicator</code> 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. |
|
|
168
170
|
| [TrackMutedIndicatorProps](./react/trackmutedindicatorprops.md) | |
|
|
169
|
-
| [TrackRefContext](./react/trackrefcontext.md) | This context provides a <code>TrackReferenceOrPlaceholder</code> to all child components. |
|
|
170
171
|
| [TrackReference](./react/trackreference.md) | |
|
|
171
172
|
| [TrackReferenceOrPlaceholder](./react/trackreferenceorplaceholder.md) | |
|
|
172
173
|
| [TrackToggle](./react/tracktoggle.md) | With the <code>TrackToggle</code> 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. |
|
|
173
174
|
| [TrackToggleProps](./react/tracktoggleprops.md) | |
|
|
175
|
+
| [TrackTranscriptionOptions](./react/tracktranscriptionoptions.md) | |
|
|
174
176
|
| [UseChatToggleProps](./react/usechattoggleprops.md) | |
|
|
175
177
|
| [UseFocusToggleProps](./react/usefocustoggleprops.md) | |
|
|
178
|
+
| [UseIsEncryptedOptions](./react/useisencryptedoptions.md) | |
|
|
176
179
|
| [UseIsMutedOptions](./react/useismutedoptions.md) | |
|
|
177
180
|
| [UseLocalParticipantOptions](./react/uselocalparticipantoptions.md) | |
|
|
178
181
|
| [UseMediaDeviceSelectProps](./react/usemediadeviceselectprops.md) | |
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "MediaDeviceSelect
|
|
3
|
+
"title": "MediaDeviceSelect",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/controls/MediaDeviceSelect.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# MediaDeviceSelect
|
|
10
|
+
# MediaDeviceSelect
|
|
11
11
|
|
|
12
12
|
The `MediaDeviceSelect` list all media devices of one kind. Clicking on one of the listed devices make it the active media device.
|
|
13
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"components":[{"filename":"audioconference.md","title":"AudioConference"},{"filename":"carousellayout.md","title":"CarouselLayout"},{"filename":"chat.md","title":"Chat"},{"filename":"connectionstatetoast.md","title":"ConnectionStateToast"},{"filename":"controlbar.md","title":"ControlBar"},{"filename":"focuslayout.md","title":"FocusLayout"},{"filename":"focuslayoutcontainer.md","title":"FocusLayoutContainer"},{"filename":"gridlayout.md","title":"GridLayout"},{"filename":"layoutcontextprovider.md","title":"LayoutContextProvider"},{"filename":"mediadevicemenu.md","title":"MediaDeviceMenu"},{"filename":"participantcontextifneeded.md","title":"ParticipantContextIfNeeded"},{"filename":"participantloop.md","title":"ParticipantLoop"},{"filename":"prejoin.md","title":"PreJoin"},{"filename":"roomaudiorenderer.md","title":"RoomAudioRenderer"},{"filename":"toast.md","title":"Toast"},{"filename":"trackloop.md","title":"TrackLoop"},{"filename":"videoconference.md","title":"VideoConference"}],"hooks":[{"filename":"useaudioplayback.md","title":"useAudioPlayback"},{"filename":"usechat.md","title":"useChat"},{"filename":"usechattoggle.md","title":"useChatToggle"},{"filename":"useclearpinbutton.md","title":"useClearPinButton"},{"filename":"useconnectionqualityindicator.md","title":"useConnectionQualityIndicator"},{"filename":"useconnectionstate.md","title":"useConnectionState"},{"filename":"usecreatelayoutcontext.md","title":"useCreateLayoutContext"},{"filename":"usedatachannel.md","title":"useDataChannel"},{"filename":"usedatachannel_1.md","title":"useDataChannel"},{"filename":"usedisconnectbutton.md","title":"useDisconnectButton"},{"filename":"useensurecreatelayoutcontext.md","title":"useEnsureCreateLayoutContext"},{"filename":"useensurelayoutcontext.md","title":"useEnsureLayoutContext"},{"filename":"useensureparticipant.md","title":"useEnsureParticipant"},{"filename":"useensureroom.md","title":"useEnsureRoom"},{"filename":"useensuretrackref.md","title":"useEnsureTrackRef"},{"filename":"usefacingmode.md","title":"useFacingMode"},{"filename":"usefocustoggle.md","title":"useFocusToggle"},{"filename":"usegridlayout.md","title":"useGridLayout"},{"filename":"useisencrypted.md","title":"useIsEncrypted"},{"filename":"useismuted.md","title":"useIsMuted"},{"filename":"useisspeaking.md","title":"useIsSpeaking"},{"filename":"uselayoutcontext.md","title":"useLayoutContext"},{"filename":"uselivekitroom.md","title":"useLiveKitRoom"},{"filename":"uselocalparticipant.md","title":"useLocalParticipant"},{"filename":"uselocalparticipantpermissions.md","title":"useLocalParticipantPermissions"},{"filename":"usemaybelayoutcontext.md","title":"useMaybeLayoutContext"},{"filename":"usemaybeparticipantcontext.md","title":"useMaybeParticipantContext"},{"filename":"usemayberoomcontext.md","title":"useMaybeRoomContext"},{"filename":"usemaybetrackrefcontext.md","title":"useMaybeTrackRefContext"},{"filename":"usemediadevices.md","title":"useMediaDevices"},{"filename":"usemediadeviceselect.md","title":"useMediaDeviceSelect"},{"filename":"usemultibandtrackvolume.md","title":"useMultibandTrackVolume"},{"filename":"usepagination.md","title":"usePagination"},{"filename":"useparticipantcontext.md","title":"useParticipantContext"},{"filename":"useparticipantinfo.md","title":"useParticipantInfo"},{"filename":"useparticipantpermissions.md","title":"useParticipantPermissions"},{"filename":"useparticipants.md","title":"useParticipants"},{"filename":"useparticipanttile.md","title":"useParticipantTile"},{"filename":"useparticipanttracks.md","title":"useParticipantTracks"},{"filename":"usepersistentuserchoices.md","title":"usePersistentUserChoices"},{"filename":"usepinnedtracks.md","title":"usePinnedTracks"},{"filename":"usepreviewdevice.md","title":"usePreviewDevice"},{"filename":"usepreviewtracks.md","title":"usePreviewTracks"},{"filename":"useremoteparticipant.md","title":"useRemoteParticipant"},{"filename":"useremoteparticipants.md","title":"useRemoteParticipants"},{"filename":"useroomcontext.md","title":"useRoomContext"},{"filename":"useroominfo.md","title":"useRoomInfo"},{"filename":"usesortedparticipants.md","title":"useSortedParticipants"},{"filename":"usespeakingparticipants.md","title":"useSpeakingParticipants"},{"filename":"usestartaudio.md","title":"useStartAudio"},{"filename":"usestartvideo.md","title":"useStartVideo"},{"filename":"useswipe.md","title":"useSwipe"},{"filename":"usetoken.md","title":"useToken"},{"filename":"usetrackbyname.md","title":"useTrackByName"},{"filename":"usetrackmutedindicator.md","title":"useTrackMutedIndicator"},{"filename":"usetrackrefcontext.md","title":"useTrackRefContext"},{"filename":"usetracks.md","title":"useTracks"},{"filename":"usetracktoggle.md","title":"useTrackToggle"},{"filename":"usetrackvolume.md","title":"useTrackVolume"},{"filename":"usevisualstableupdate.md","title":"useVisualStableUpdate"}]}
|
|
1
|
+
{"components":[{"filename":"audioconference.md","title":"AudioConference"},{"filename":"carousellayout.md","title":"CarouselLayout"},{"filename":"chat.md","title":"Chat"},{"filename":"connectionstatetoast.md","title":"ConnectionStateToast"},{"filename":"controlbar.md","title":"ControlBar"},{"filename":"focuslayout.md","title":"FocusLayout"},{"filename":"focuslayoutcontainer.md","title":"FocusLayoutContainer"},{"filename":"gridlayout.md","title":"GridLayout"},{"filename":"layoutcontext.md","title":"LayoutContext"},{"filename":"layoutcontextprovider.md","title":"LayoutContextProvider"},{"filename":"livekitroom.md","title":"LiveKitRoom"},{"filename":"mediadevicemenu.md","title":"MediaDeviceMenu"},{"filename":"participantcontext.md","title":"ParticipantContext"},{"filename":"participantcontextifneeded.md","title":"ParticipantContextIfNeeded"},{"filename":"participantloop.md","title":"ParticipantLoop"},{"filename":"prejoin.md","title":"PreJoin"},{"filename":"roomaudiorenderer.md","title":"RoomAudioRenderer"},{"filename":"roomcontext.md","title":"RoomContext"},{"filename":"toast.md","title":"Toast"},{"filename":"trackloop.md","title":"TrackLoop"},{"filename":"trackrefcontext.md","title":"TrackRefContext"},{"filename":"videoconference.md","title":"VideoConference"}],"hooks":[{"filename":"useaudioplayback.md","title":"useAudioPlayback"},{"filename":"usechat.md","title":"useChat"},{"filename":"usechattoggle.md","title":"useChatToggle"},{"filename":"useclearpinbutton.md","title":"useClearPinButton"},{"filename":"useconnectionqualityindicator.md","title":"useConnectionQualityIndicator"},{"filename":"useconnectionstate.md","title":"useConnectionState"},{"filename":"usecreatelayoutcontext.md","title":"useCreateLayoutContext"},{"filename":"usedatachannel.md","title":"useDataChannel"},{"filename":"usedatachannel_1.md","title":"useDataChannel"},{"filename":"usedisconnectbutton.md","title":"useDisconnectButton"},{"filename":"useensurecreatelayoutcontext.md","title":"useEnsureCreateLayoutContext"},{"filename":"useensurelayoutcontext.md","title":"useEnsureLayoutContext"},{"filename":"useensureparticipant.md","title":"useEnsureParticipant"},{"filename":"useensureroom.md","title":"useEnsureRoom"},{"filename":"useensuretrackref.md","title":"useEnsureTrackRef"},{"filename":"usefacingmode.md","title":"useFacingMode"},{"filename":"usefocustoggle.md","title":"useFocusToggle"},{"filename":"usegridlayout.md","title":"useGridLayout"},{"filename":"useisencrypted.md","title":"useIsEncrypted"},{"filename":"useismuted.md","title":"useIsMuted"},{"filename":"useisspeaking.md","title":"useIsSpeaking"},{"filename":"uselayoutcontext.md","title":"useLayoutContext"},{"filename":"uselivekitroom.md","title":"useLiveKitRoom"},{"filename":"uselocalparticipant.md","title":"useLocalParticipant"},{"filename":"uselocalparticipantpermissions.md","title":"useLocalParticipantPermissions"},{"filename":"usemaybelayoutcontext.md","title":"useMaybeLayoutContext"},{"filename":"usemaybeparticipantcontext.md","title":"useMaybeParticipantContext"},{"filename":"usemayberoomcontext.md","title":"useMaybeRoomContext"},{"filename":"usemaybetrackrefcontext.md","title":"useMaybeTrackRefContext"},{"filename":"usemediadevices.md","title":"useMediaDevices"},{"filename":"usemediadeviceselect.md","title":"useMediaDeviceSelect"},{"filename":"usemultibandtrackvolume.md","title":"useMultibandTrackVolume"},{"filename":"usepagination.md","title":"usePagination"},{"filename":"useparticipantcontext.md","title":"useParticipantContext"},{"filename":"useparticipantinfo.md","title":"useParticipantInfo"},{"filename":"useparticipantpermissions.md","title":"useParticipantPermissions"},{"filename":"useparticipants.md","title":"useParticipants"},{"filename":"useparticipanttile.md","title":"useParticipantTile"},{"filename":"useparticipanttracks.md","title":"useParticipantTracks"},{"filename":"usepersistentuserchoices.md","title":"usePersistentUserChoices"},{"filename":"usepinnedtracks.md","title":"usePinnedTracks"},{"filename":"usepreviewdevice.md","title":"usePreviewDevice"},{"filename":"usepreviewtracks.md","title":"usePreviewTracks"},{"filename":"useremoteparticipant.md","title":"useRemoteParticipant"},{"filename":"useremoteparticipants.md","title":"useRemoteParticipants"},{"filename":"useroomcontext.md","title":"useRoomContext"},{"filename":"useroominfo.md","title":"useRoomInfo"},{"filename":"usesortedparticipants.md","title":"useSortedParticipants"},{"filename":"usespeakingparticipants.md","title":"useSpeakingParticipants"},{"filename":"usestartaudio.md","title":"useStartAudio"},{"filename":"usestartvideo.md","title":"useStartVideo"},{"filename":"useswipe.md","title":"useSwipe"},{"filename":"usetoken.md","title":"useToken"},{"filename":"usetrackbyname.md","title":"useTrackByName"},{"filename":"usetrackmutedindicator.md","title":"useTrackMutedIndicator"},{"filename":"usetrackrefcontext.md","title":"useTrackRefContext"},{"filename":"usetracks.md","title":"useTracks"},{"filename":"usetracktoggle.md","title":"useTrackToggle"},{"filename":"usetracktranscription.md","title":"useTrackTranscription"},{"filename":"usetrackvolume.md","title":"useTrackVolume"},{"filename":"usevisualstableupdate.md","title":"useVisualStableUpdate"}]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "ParticipantAudioTile
|
|
3
|
+
"title": "ParticipantAudioTile",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantAudioTile.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# ParticipantAudioTile
|
|
10
|
+
# ParticipantAudioTile
|
|
11
11
|
|
|
12
12
|
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.
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "ParticipantName
|
|
3
|
+
"title": "ParticipantName",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantName.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# ParticipantName
|
|
10
|
+
# ParticipantName
|
|
11
11
|
|
|
12
12
|
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.
|
|
13
13
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
{
|
|
3
|
-
"title": "ParticipantTile
|
|
3
|
+
"title": "ParticipantTile",
|
|
4
4
|
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/participant/ParticipantTile.tsx"
|
|
5
5
|
}
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
9
|
|
|
10
|
-
# ParticipantTile
|
|
10
|
+
# ParticipantTile
|
|
11
11
|
|
|
12
12
|
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.
|
|
13
13
|
|