@livekit/components-js-docs 0.1.1 → 0.1.3
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/LICENSE +201 -0
- package/generated-docs/core/chatmessage.md +2 -0
- package/generated-docs/core/chatoptions.md +24 -0
- package/generated-docs/core/createmediadeviceobserver.md +2 -1
- package/generated-docs/core/createurlregexp.md +4 -4
- package/generated-docs/core/index.md +8 -4
- package/generated-docs/core/loaduserchoices.md +27 -0
- package/generated-docs/core/localuserchoices.md +28 -0
- package/generated-docs/core/pinstate.md +2 -0
- package/generated-docs/core/receivedchatmessage.md +2 -0
- package/generated-docs/core/roomvideoplaybackallowedobservable.md +18 -0
- package/generated-docs/core/saveuserchoices.md +20 -0
- package/generated-docs/core/setupchat.md +1 -5
- package/generated-docs/core/setupstartvideo.md +20 -0
- package/generated-docs/core/trackreference.md +2 -0
- package/generated-docs/core/trackreferenceorplaceholder.md +2 -0
- package/generated-docs/core/trackreferenceplaceholder.md +2 -0
- package/generated-docs/core/widgetstate.md +2 -0
- package/generated-docs/react/audiotrackprops.md +12 -11
- package/generated-docs/react/audiotrackprops.muted.md +21 -0
- package/generated-docs/react/audiotrackprops.volume.md +1 -1
- package/generated-docs/react/audiovisualizerprops.md +4 -4
- package/generated-docs/react/carousellayoutprops.md +5 -5
- package/generated-docs/react/chatentryprops.md +6 -6
- package/generated-docs/react/chatmessage.md +25 -0
- package/generated-docs/{core/participantclickevent.track.md → react/chatmessage.message.md} +3 -3
- package/generated-docs/react/{chatprops.messageencoder.md → chatmessage.timestamp.md} +3 -3
- package/generated-docs/react/chatprops.md +2 -4
- package/generated-docs/react/component/audiotrack.md +6 -1
- package/generated-docs/react/component/chat.md +0 -10
- package/generated-docs/react/component/controlbar.md +5 -0
- package/generated-docs/react/component/layoutcontextprovider.md +35 -0
- package/generated-docs/react/component/livekitroom.md +5 -0
- package/generated-docs/react/component/mediadeviceselect.md +5 -0
- package/generated-docs/react/component/prejoin.md +12 -3
- package/generated-docs/react/component/roomaudiorenderer.md +12 -0
- package/generated-docs/react/controlbarprops.md +5 -4
- package/generated-docs/react/controlbarprops.saveuserchoices.md +17 -0
- package/generated-docs/react/focuslayoutcontainerprops.md +4 -4
- package/generated-docs/react/focuslayoutprops.md +5 -5
- package/generated-docs/react/focustoggleprops.md +5 -5
- package/generated-docs/react/gridlayoutprops.md +4 -4
- package/generated-docs/react/hook/useaudioplayback.md +34 -0
- package/generated-docs/react/hook/usechat.md +2 -5
- package/generated-docs/react/hook/usefacingmode.md +35 -0
- package/generated-docs/react/hook/useisencrypted.md +29 -0
- package/generated-docs/react/hook/uselivekitroom.md +3 -0
- package/generated-docs/react/hook/usemediadeviceselect.md +5 -0
- package/generated-docs/react/hook/usepagination.md +52 -0
- package/generated-docs/react/hook/usepersistentuserchoices.md +38 -0
- package/generated-docs/react/hook/usepreviewtracks.md +32 -0
- package/generated-docs/react/hook/usestartaudio.md +43 -0
- package/generated-docs/react/hook/usestartvideo.md +43 -0
- package/generated-docs/react/hook/useswipe.md +44 -0
- package/generated-docs/react/index.md +188 -163
- package/generated-docs/react/layoutcontextproviderprops.md +26 -0
- package/generated-docs/react/layoutcontextproviderprops.onpinchange.md +13 -0
- package/generated-docs/react/layoutcontextproviderprops.onwidgetchange.md +13 -0
- package/generated-docs/react/layoutcontextproviderprops.value.md +13 -0
- package/generated-docs/react/livekitroomprops.md +1 -0
- package/generated-docs/react/livekitroomprops.onencryptionerror.md +13 -0
- package/generated-docs/react/localuserchoices.md +4 -2
- package/generated-docs/react/mediadeviceselectprops.md +3 -2
- package/generated-docs/react/mediadeviceselectprops.onerror.md +13 -0
- package/generated-docs/react/messagedecoder.md +20 -0
- package/generated-docs/react/messageencoder.md +20 -0
- package/generated-docs/react/meta-data.json +1 -1
- package/generated-docs/react/participanttileprops.md +8 -8
- package/generated-docs/react/pinstate.md +20 -0
- package/generated-docs/react/prejoinprops.md +15 -12
- package/generated-docs/react/prejoinprops.persistuserchoices.md +17 -0
- package/generated-docs/react/prejoinprops.showe2eeoptions.md +10 -0
- package/generated-docs/react/{chatprops.messagedecoder.md → receivedchatmessage.from.md} +3 -3
- package/generated-docs/react/receivedchatmessage.md +26 -0
- package/generated-docs/react/roomaudiorendererprops.md +25 -0
- package/generated-docs/react/roomaudiorendererprops.muted.md +21 -0
- package/generated-docs/react/roomaudiorendererprops.volume.md +17 -0
- package/generated-docs/react/setloglevel.md +20 -0
- package/generated-docs/react/trackloopprops.md +4 -4
- package/generated-docs/react/trackmutedindicatorprops.md +6 -6
- package/generated-docs/react/trackreference.md +22 -0
- package/generated-docs/react/trackreferenceorplaceholder.md +20 -0
- package/generated-docs/react/tracktoggleprops.md +7 -7
- package/generated-docs/react/usefocustoggleprops.md +6 -6
- package/generated-docs/react/usemediadeviceselectprops.md +1 -0
- package/generated-docs/react/usemediadeviceselectprops.onerror.md +17 -0
- package/generated-docs/react/useparticipanttileprops.md +9 -9
- package/generated-docs/react/usepersistentuserchoicesoptions.defaults.md +17 -0
- package/generated-docs/react/usepersistentuserchoicesoptions.md +28 -0
- package/generated-docs/react/usepersistentuserchoicesoptions.preventload.md +17 -0
- package/generated-docs/react/usepersistentuserchoicesoptions.preventsave.md +17 -0
- package/generated-docs/react/usestartaudioprops.md +25 -0
- package/generated-docs/react/usestartaudioprops.props.md +13 -0
- package/generated-docs/react/usestartaudioprops.room.md +13 -0
- package/generated-docs/react/usestartvideoprops.md +25 -0
- package/generated-docs/react/usestartvideoprops.props.md +13 -0
- package/generated-docs/react/usestartvideoprops.room.md +13 -0
- package/generated-docs/react/useswipeoptions.md +22 -0
- package/generated-docs/react/usetrackshookreturntype.md +1 -1
- package/generated-docs/react/usevisualstableupdateoptions.md +3 -3
- package/generated-docs/react/videoconferenceprops.md +2 -2
- package/generated-docs/react/videotrackprops.md +12 -12
- package/generated-docs/react/widgetstate.md +21 -0
- package/package.json +5 -6
- package/generated-docs/core/istrackreference.md +0 -16
- package/generated-docs/core/participantclickevent.md +0 -23
- package/generated-docs/core/participantclickevent.participant.md +0 -13
|
@@ -21,8 +21,8 @@ export interface CarouselLayoutProps extends React.HTMLAttributes<HTMLMediaEleme
|
|
|
21
21
|
|
|
22
22
|
## Properties
|
|
23
23
|
|
|
24
|
-
| Property | Type
|
|
25
|
-
| ---------------------------------------------------------- |
|
|
26
|
-
| [children](./react/carousellayoutprops.children.md) | React.ReactNode
|
|
27
|
-
| [orientation?](./react/carousellayoutprops.orientation.md) | 'vertical' \| 'horizontal'
|
|
28
|
-
| [tracks](./react/carousellayoutprops.tracks.md) | [TrackReferenceOrPlaceholder](./
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| ---------------------------------------------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
26
|
+
| [children](./react/carousellayoutprops.children.md) | React.ReactNode | |
|
|
27
|
+
| [orientation?](./react/carousellayoutprops.orientation.md) | 'vertical' \| 'horizontal' | _(Optional)_ Place the tiles vertically or horizontally next to each other. If undefined orientation is guessed by the dimensions of the container. |
|
|
28
|
+
| [tracks](./react/carousellayoutprops.tracks.md) | [TrackReferenceOrPlaceholder](./react/trackreferenceorplaceholder.md)<!-- -->\[\] | |
|
|
@@ -23,9 +23,9 @@ export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement>
|
|
|
23
23
|
|
|
24
24
|
## Properties
|
|
25
25
|
|
|
26
|
-
| Property | Type
|
|
27
|
-
| --------------------------------------------------------------- |
|
|
28
|
-
| [entry](./react/chatentryprops.entry.md) | [ReceivedChatMessage](./
|
|
29
|
-
| [hideName?](./react/chatentryprops.hidename.md) | boolean
|
|
30
|
-
| [hideTimestamp?](./react/chatentryprops.hidetimestamp.md) | boolean
|
|
31
|
-
| [messageFormatter?](./react/chatentryprops.messageformatter.md) | [MessageFormatter](./react/messageformatter.md)
|
|
26
|
+
| Property | Type | Description |
|
|
27
|
+
| --------------------------------------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
28
|
+
| [entry](./react/chatentryprops.entry.md) | [ReceivedChatMessage](./react/receivedchatmessage.md) | The chat massage object to display. |
|
|
29
|
+
| [hideName?](./react/chatentryprops.hidename.md) | boolean | _(Optional)_ Hide sender name. Useful when displaying multiple consecutive chat messages from the same person. |
|
|
30
|
+
| [hideTimestamp?](./react/chatentryprops.hidetimestamp.md) | boolean | _(Optional)_ Hide message timestamp. |
|
|
31
|
+
| [messageFormatter?](./react/chatentryprops.messageformatter.md) | [MessageFormatter](./react/messageformatter.md) | _(Optional)_ An optional formatter for the message body. |
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "ChatMessage interface",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/../core/src/components/chat.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# ChatMessage interface
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
export interface ChatMessage
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
19
|
+
|
|
20
|
+
## Properties
|
|
21
|
+
|
|
22
|
+
| Property | Type | Description |
|
|
23
|
+
| --------------------------------------------- | ------ | ----------- |
|
|
24
|
+
| [message](./react/chatmessage.message.md) | string | |
|
|
25
|
+
| [timestamp](./react/chatmessage.timestamp.md) | number | |
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
{ "title": "
|
|
2
|
+
{ "title": "ChatMessage.message property" }
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
6
|
|
|
7
|
-
#
|
|
7
|
+
# ChatMessage.message property
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
|
|
12
|
+
message: string;
|
|
13
13
|
```
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
|
-
{ "title": "
|
|
2
|
+
{ "title": "ChatMessage.timestamp property" }
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
6
|
|
|
7
|
-
#
|
|
7
|
+
# ChatMessage.timestamp property
|
|
8
8
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
|
|
12
|
+
timestamp: number;
|
|
13
13
|
```
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
**Signature:**
|
|
13
13
|
|
|
14
14
|
```typescript
|
|
15
|
-
export interface ChatProps extends React.HTMLAttributes<HTMLDivElement
|
|
15
|
+
export interface ChatProps extends React.HTMLAttributes<HTMLDivElement>, ChatOptions
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
**Extends:** React.HTMLAttributes<HTMLDivElement>
|
|
18
|
+
**Extends:** React.HTMLAttributes<HTMLDivElement>, ChatOptions
|
|
19
19
|
|
|
20
20
|
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
21
21
|
|
|
@@ -23,6 +23,4 @@ export interface ChatProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
23
23
|
|
|
24
24
|
| Property | Type | Description |
|
|
25
25
|
| ---------------------------------------------------------- | ----------------------------------------------- | ------------ |
|
|
26
|
-
| [messageDecoder?](./react/chatprops.messagedecoder.md) | [MessageDecoder](./core/messagedecoder.md) | _(Optional)_ |
|
|
27
|
-
| [messageEncoder?](./react/chatprops.messageencoder.md) | [MessageEncoder](./core/messageencoder.md) | _(Optional)_ |
|
|
28
26
|
| [messageFormatter?](./react/chatprops.messageformatter.md) | [MessageFormatter](./react/messageformatter.md) | _(Optional)_ |
|
|
@@ -29,6 +29,11 @@ import { AudioTrack } from "@livekit/components-react";
|
|
|
29
29
|
|
|
30
30
|
## Properties
|
|
31
31
|
|
|
32
|
+
{% parameter name="muted" type="boolean" optional=true %}
|
|
33
|
+
_(Optional)_ Mutes the audio track if set to `true`<!-- -->.
|
|
34
|
+
|
|
35
|
+
{% /parameter %}
|
|
36
|
+
|
|
32
37
|
{% parameter name="onSubscriptionStatusChanged" type="(subscribed: boolean) => void" optional=true %}
|
|
33
38
|
_(Optional)_
|
|
34
39
|
|
|
@@ -40,7 +45,7 @@ _(Optional)_ The track reference of the track from which the audio is to be rend
|
|
|
40
45
|
{% /parameter %}
|
|
41
46
|
|
|
42
47
|
{% parameter name="volume" type="number" optional=true %}
|
|
43
|
-
_(Optional)_
|
|
48
|
+
_(Optional)_ Sets the volume of the audio track. By default, the range is between `0.0` and `1.0`<!-- -->.
|
|
44
49
|
|
|
45
50
|
{% /parameter %}
|
|
46
51
|
|
|
@@ -29,16 +29,6 @@ import { Chat } from "@livekit/components-react";
|
|
|
29
29
|
|
|
30
30
|
## Properties
|
|
31
31
|
|
|
32
|
-
{% parameter name="messageDecoder" type="MessageDecoder" optional=true %}
|
|
33
|
-
_(Optional)_
|
|
34
|
-
|
|
35
|
-
{% /parameter %}
|
|
36
|
-
|
|
37
|
-
{% parameter name="messageEncoder" type="MessageEncoder" optional=true %}
|
|
38
|
-
_(Optional)_
|
|
39
|
-
|
|
40
|
-
{% /parameter %}
|
|
41
|
-
|
|
42
32
|
{% parameter name="messageFormatter" type="MessageFormatter" optional=true %}
|
|
43
33
|
_(Optional)_
|
|
44
34
|
|
|
@@ -38,6 +38,11 @@ _(Optional)_
|
|
|
38
38
|
|
|
39
39
|
{% /parameter %}
|
|
40
40
|
|
|
41
|
+
{% parameter name="saveUserChoices" type="boolean" optional=true %}
|
|
42
|
+
_(Optional)_ If `true`<!-- -->, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room.
|
|
43
|
+
|
|
44
|
+
{% /parameter %}
|
|
45
|
+
|
|
41
46
|
{% parameter name="variation" type="'minimal' | 'verbose' | 'textOnly'" optional=true %}
|
|
42
47
|
_(Optional)_
|
|
43
48
|
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "LayoutContextProvider",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/components/layout/LayoutContextProvider.tsx"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# LayoutContextProvider
|
|
11
|
+
|
|
12
|
+
## Import
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
import { LayoutContextProvider } from "@livekit/components-react";
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
19
|
+
|
|
20
|
+
## Properties
|
|
21
|
+
|
|
22
|
+
{% parameter name="onPinChange" type="(state: PinState) => void" optional=true %}
|
|
23
|
+
_(Optional)_
|
|
24
|
+
|
|
25
|
+
{% /parameter %}
|
|
26
|
+
|
|
27
|
+
{% parameter name="onWidgetChange" type="(state: WidgetState) => void" optional=true %}
|
|
28
|
+
_(Optional)_
|
|
29
|
+
|
|
30
|
+
{% /parameter %}
|
|
31
|
+
|
|
32
|
+
{% parameter name="value" type="LayoutContextType" optional=true %}
|
|
33
|
+
_(Optional)_
|
|
34
|
+
|
|
35
|
+
{% /parameter %}
|
|
@@ -64,6 +64,11 @@ _(Optional)_
|
|
|
64
64
|
|
|
65
65
|
{% /parameter %}
|
|
66
66
|
|
|
67
|
+
{% parameter name="onEncryptionError" type="(error: Error) => void" optional=true %}
|
|
68
|
+
_(Optional)_
|
|
69
|
+
|
|
70
|
+
{% /parameter %}
|
|
71
|
+
|
|
67
72
|
{% parameter name="onError" type="(error: Error) => void" optional=true %}
|
|
68
73
|
_(Optional)_
|
|
69
74
|
|
|
@@ -57,6 +57,11 @@ _(Optional)_
|
|
|
57
57
|
|
|
58
58
|
{% /parameter %}
|
|
59
59
|
|
|
60
|
+
{% parameter name="onError" type="(e: Error) => void" optional=true %}
|
|
61
|
+
_(Optional)_
|
|
62
|
+
|
|
63
|
+
{% /parameter %}
|
|
64
|
+
|
|
60
65
|
{% parameter name="requestPermissions" type="boolean" optional=true %}
|
|
61
66
|
_(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.
|
|
62
67
|
|
|
@@ -19,7 +19,7 @@ import { PreJoin } from "@livekit/components-react";
|
|
|
19
19
|
|
|
20
20
|
## Remarks
|
|
21
21
|
|
|
22
|
-
This component is independent
|
|
22
|
+
This component is independent of the `LiveKitRoom` component and should not be nested within it. Because it only access the local media tracks this component is self contained and works without connection to the LiveKit server.
|
|
23
23
|
|
|
24
24
|
## Usage
|
|
25
25
|
|
|
@@ -71,8 +71,8 @@ _(Optional)_ Provide your custom validation function. Only if validation is succ
|
|
|
71
71
|
|
|
72
72
|
{% /parameter %}
|
|
73
73
|
|
|
74
|
-
{% parameter name="
|
|
75
|
-
_(Optional)_
|
|
74
|
+
{% parameter name="persistUserChoices" type="boolean" optional=true %}
|
|
75
|
+
_(Optional)_ If true, user choices are persisted across sessions.
|
|
76
76
|
|
|
77
77
|
{% /parameter %}
|
|
78
78
|
|
|
@@ -80,3 +80,12 @@ _(Optional)_
|
|
|
80
80
|
_(Optional)_
|
|
81
81
|
|
|
82
82
|
{% /parameter %}
|
|
83
|
+
|
|
84
|
+
{% parameter name="showE2EEOptions" type="boolean" optional=true deprecated=true %}
|
|
85
|
+
_(Optional)_
|
|
86
|
+
|
|
87
|
+
{% callout type="caution" variation="compact" %}
|
|
88
|
+
E2EE options will be removed from PreJoin in a future version \*
|
|
89
|
+
|
|
90
|
+
{% /callout %}
|
|
91
|
+
{% /parameter %}
|
|
@@ -26,3 +26,15 @@ import { RoomAudioRenderer } from "@livekit/components-react";
|
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
{% partial file="p_usage.md" variables={exampleCount: 1} /%}
|
|
29
|
+
|
|
30
|
+
## Properties
|
|
31
|
+
|
|
32
|
+
{% parameter name="muted" type="boolean" optional=true %}
|
|
33
|
+
_(Optional)_ If set to `true`<!-- -->, mutes all audio tracks rendered by the component.
|
|
34
|
+
|
|
35
|
+
{% /parameter %}
|
|
36
|
+
|
|
37
|
+
{% parameter name="volume" type="number" optional=true %}
|
|
38
|
+
_(Optional)_ Sets the volume for all audio tracks rendered by this component. By default, the range is between `0.0` and `1.0`<!-- -->.
|
|
39
|
+
|
|
40
|
+
{% /parameter %}
|
|
@@ -21,7 +21,8 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
21
21
|
|
|
22
22
|
## Properties
|
|
23
23
|
|
|
24
|
-
| Property
|
|
25
|
-
|
|
|
26
|
-
| [controls?](./react/controlbarprops.controls.md)
|
|
27
|
-
| [
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| -------------------------------------------------------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
26
|
+
| [controls?](./react/controlbarprops.controls.md) | [ControlBarControls](./react/controlbarcontrols.md) | _(Optional)_ |
|
|
27
|
+
| [saveUserChoices?](./react/controlbarprops.saveuserchoices.md) | boolean | _(Optional)_ If <code>true</code>, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room. |
|
|
28
|
+
| [variation?](./react/controlbarprops.variation.md) | 'minimal' \| 'verbose' \| 'textOnly' | _(Optional)_ |
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
---
|
|
2
|
+
{ "title": "ControlBarProps.saveUserChoices property" }
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
|
+
|
|
7
|
+
# ControlBarProps.saveUserChoices property
|
|
8
|
+
|
|
9
|
+
If `true`<!-- -->, the user's device choices will be persisted. This will enables the user to have the same device choices when they rejoin the room.
|
|
10
|
+
|
|
11
|
+
**Signature:**
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
saveUserChoices?: boolean;
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
@@ -21,7 +21,7 @@ export interface FocusLayoutContainerProps extends React.HTMLAttributes<HTMLDivE
|
|
|
21
21
|
|
|
22
22
|
## Properties
|
|
23
23
|
|
|
24
|
-
| Property | Type
|
|
25
|
-
| ------------------------------------------------------------------ |
|
|
26
|
-
| [focusTrack?](./react/focuslayoutcontainerprops.focustrack.md) | [TrackReference](./
|
|
27
|
-
| [participants?](./react/focuslayoutcontainerprops.participants.md) | Array<Participant>
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| ------------------------------------------------------------------ | ------------------------------------------- | ------------ |
|
|
26
|
+
| [focusTrack?](./react/focuslayoutcontainerprops.focustrack.md) | [TrackReference](./react/trackreference.md) | _(Optional)_ |
|
|
27
|
+
| [participants?](./react/focuslayoutcontainerprops.participants.md) | Array<Participant> | _(Optional)_ |
|
|
@@ -21,8 +21,8 @@ export interface FocusLayoutProps extends React.HTMLAttributes<HTMLElement>
|
|
|
21
21
|
|
|
22
22
|
## Properties
|
|
23
23
|
|
|
24
|
-
| Property | Type
|
|
25
|
-
| --------------------------------------------------------------------- |
|
|
26
|
-
| [onParticipantClick?](./react/focuslayoutprops.onparticipantclick.md) | (evt:
|
|
27
|
-
| [track?](./react/focuslayoutprops.track.md) | [TrackReferenceOrPlaceholder](./
|
|
28
|
-
| [trackRef?](./react/focuslayoutprops.trackref.md) | [TrackReferenceOrPlaceholder](./
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| --------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------ |
|
|
26
|
+
| [onParticipantClick?](./react/focuslayoutprops.onparticipantclick.md) | (evt: ParticipantClickEvent) => void | _(Optional)_ |
|
|
27
|
+
| [track?](./react/focuslayoutprops.track.md) | [TrackReferenceOrPlaceholder](./react/trackreferenceorplaceholder.md) | _(Optional)_ |
|
|
28
|
+
| [trackRef?](./react/focuslayoutprops.trackref.md) | [TrackReferenceOrPlaceholder](./react/trackreferenceorplaceholder.md) | _(Optional)_ The track to display in the focus layout. |
|
|
@@ -21,8 +21,8 @@ export interface FocusToggleProps extends React.ButtonHTMLAttributes<HTMLButtonE
|
|
|
21
21
|
|
|
22
22
|
## Properties
|
|
23
23
|
|
|
24
|
-
| Property | Type
|
|
25
|
-
| ------------------------------------------------------- |
|
|
26
|
-
| [participant?](./react/focustoggleprops.participant.md) | Participant
|
|
27
|
-
| [trackRef?](./react/focustoggleprops.trackref.md) | [TrackReferenceOrPlaceholder](./
|
|
28
|
-
| [trackSource?](./react/focustoggleprops.tracksource.md) | Track.Source
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| ------------------------------------------------------- | --------------------------------------------------------------------- | ------------ |
|
|
26
|
+
| [participant?](./react/focustoggleprops.participant.md) | Participant | _(Optional)_ |
|
|
27
|
+
| [trackRef?](./react/focustoggleprops.trackref.md) | [TrackReferenceOrPlaceholder](./react/trackreferenceorplaceholder.md) | _(Optional)_ |
|
|
28
|
+
| [trackSource?](./react/focustoggleprops.tracksource.md) | Track.Source | _(Optional)_ |
|
|
@@ -21,7 +21,7 @@ export interface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement>, P
|
|
|
21
21
|
|
|
22
22
|
## Properties
|
|
23
23
|
|
|
24
|
-
| Property | Type
|
|
25
|
-
| ----------------------------------------------- |
|
|
26
|
-
| [children](./react/gridlayoutprops.children.md) | React.ReactNode
|
|
27
|
-
| [tracks](./react/gridlayoutprops.tracks.md) | [TrackReferenceOrPlaceholder](./
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| ----------------------------------------------- | --------------------------------------------------------------------------------- | ----------- |
|
|
26
|
+
| [children](./react/gridlayoutprops.children.md) | React.ReactNode | |
|
|
27
|
+
| [tracks](./react/gridlayoutprops.tracks.md) | [TrackReferenceOrPlaceholder](./react/trackreferenceorplaceholder.md)<!-- -->\[\] | |
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "useAudioPlayback",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useAudioPlayback.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# useAudioPlayback
|
|
11
|
+
|
|
12
|
+
In many browsers to start audio playback, the user must perform a user-initiated event such as clicking a button. The `useAudioPlayback` hook returns an object with a boolean `canPlayAudio` flag that indicates whether audio playback is allowed in the current context, as well as a `startAudio` function that can be called in a button `onClick` callback to start audio playback in the current context.
|
|
13
|
+
|
|
14
|
+
## Import
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
import { useAudioPlayback } from "@livekit/components-react";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
21
|
+
|
|
22
|
+
## Properties
|
|
23
|
+
|
|
24
|
+
{% parameter name="room" type="Room" optional=true %}
|
|
25
|
+
{% /parameter %}
|
|
26
|
+
|
|
27
|
+
## Returns
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
{
|
|
31
|
+
canPlayAudio: boolean;
|
|
32
|
+
startAudio: () => Promise<void>;
|
|
33
|
+
}
|
|
34
|
+
```
|
|
@@ -25,10 +25,7 @@ It is possible to pass configurations for custom message encoding and decoding.
|
|
|
25
25
|
|
|
26
26
|
## Properties
|
|
27
27
|
|
|
28
|
-
{% parameter name="options" type="
|
|
29
|
-
messageEncoder?: MessageEncoder;
|
|
30
|
-
messageDecoder?: MessageDecoder;
|
|
31
|
-
}" optional=true %}
|
|
28
|
+
{% parameter name="options" type="ChatOptions" optional=true %}
|
|
32
29
|
{% /parameter %}
|
|
33
30
|
|
|
34
31
|
## Returns
|
|
@@ -36,7 +33,7 @@ It is possible to pass configurations for custom message encoding and decoding.
|
|
|
36
33
|
```typescript
|
|
37
34
|
{
|
|
38
35
|
send: ((message: string) => Promise<void>) | undefined;
|
|
39
|
-
chatMessages:
|
|
36
|
+
chatMessages: ReceivedChatMessage[];
|
|
40
37
|
isSending: boolean;
|
|
41
38
|
}
|
|
42
39
|
```
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "useFacingMode",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useFacingMode.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# useFacingMode
|
|
11
|
+
|
|
12
|
+
Try to determine the `facingMode` of a local participant video track.
|
|
13
|
+
|
|
14
|
+
## Import
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
import { useFacingMode } from "@livekit/components-react";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Remarks
|
|
21
|
+
|
|
22
|
+
Works only on local video tracks.
|
|
23
|
+
|
|
24
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
25
|
+
|
|
26
|
+
## Properties
|
|
27
|
+
|
|
28
|
+
{% parameter name="trackReference" type="TrackReferenceOrPlaceholder" optional=false %}
|
|
29
|
+
{% /parameter %}
|
|
30
|
+
|
|
31
|
+
## Returns
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
"user" | "environment" | "left" | "right" | "undefined";
|
|
35
|
+
```
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "useIsEncrypted",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useIsEncrypted.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# useIsEncrypted
|
|
11
|
+
|
|
12
|
+
## Import
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
import { useIsEncrypted } from "@livekit/components-react";
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
19
|
+
|
|
20
|
+
## Properties
|
|
21
|
+
|
|
22
|
+
{% parameter name="participant" type="Participant" optional=true %}
|
|
23
|
+
{% /parameter %}
|
|
24
|
+
|
|
25
|
+
## Returns
|
|
26
|
+
|
|
27
|
+
```typescript
|
|
28
|
+
boolean;
|
|
29
|
+
```
|
|
@@ -59,6 +59,9 @@ Define options how to connect to the LiveKit server.
|
|
|
59
59
|
{% parameter name="onDisconnected" type="() => void" optional=true %}
|
|
60
60
|
{% /parameter %}
|
|
61
61
|
|
|
62
|
+
{% parameter name="onEncryptionError" type="(error: Error) => void" optional=true %}
|
|
63
|
+
{% /parameter %}
|
|
64
|
+
|
|
62
65
|
{% parameter name="onError" type="(error: Error) => void" optional=true %}
|
|
63
66
|
{% /parameter %}
|
|
64
67
|
|
|
@@ -32,6 +32,11 @@ const { devices, activeDeviceId, setActiveMediaDevice } = useMediaDeviceSelect({
|
|
|
32
32
|
{% parameter name="kind" type="MediaDeviceKind" optional=false %}
|
|
33
33
|
{% /parameter %}
|
|
34
34
|
|
|
35
|
+
{% parameter name="onError" type="(e: Error) => void" optional=true %}
|
|
36
|
+
this callback gets called if an error is thrown when failing to select a device and also if a user denied permissions, eventhough the `requestPermissions` option is set to `true`<!-- -->. Most commonly this will emit a MediaDeviceError
|
|
37
|
+
|
|
38
|
+
{% /parameter %}
|
|
39
|
+
|
|
35
40
|
{% parameter name="requestPermissions" type="boolean" optional=true %}
|
|
36
41
|
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.
|
|
37
42
|
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "usePagination",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/usePagination.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# usePagination
|
|
11
|
+
|
|
12
|
+
The `usePagination` hook implements simple pagination logic for use with arrays.
|
|
13
|
+
|
|
14
|
+
## Import
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
import { usePagination } from "@livekit/components-react";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
const tracks = useTracks();
|
|
24
|
+
const pagination = usePagination(4, tracks);
|
|
25
|
+
|
|
26
|
+
<TrackLoop tracks={pagination.tracks} />;
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
{% partial file="p_usage.md" variables={exampleCount: 1} /%}
|
|
30
|
+
|
|
31
|
+
## Properties
|
|
32
|
+
|
|
33
|
+
{% parameter name="itemPerPage" type="number" optional=false %}
|
|
34
|
+
{% /parameter %}
|
|
35
|
+
|
|
36
|
+
{% parameter name="trackReferences" type="TrackReferenceOrPlaceholder[]" optional=false %}
|
|
37
|
+
{% /parameter %}
|
|
38
|
+
|
|
39
|
+
## Returns
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
{
|
|
43
|
+
totalPageCount: number;
|
|
44
|
+
nextPage: () => void;
|
|
45
|
+
prevPage: () => void;
|
|
46
|
+
setPage: (num: number) => void;
|
|
47
|
+
firstItemIndex: number;
|
|
48
|
+
lastItemIndex: number;
|
|
49
|
+
tracks: TrackReferenceOrPlaceholder[];
|
|
50
|
+
currentPage: number;
|
|
51
|
+
}
|
|
52
|
+
```
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "usePersistentUserChoices",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/usePersistentUserChoices.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# usePersistentUserChoices
|
|
11
|
+
|
|
12
|
+
A hook that provides access to user choices stored in local storage, such as selected media devices and their current state (on or off), as well as the user name.
|
|
13
|
+
|
|
14
|
+
## Import
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
import { usePersistentUserChoices } from "@livekit/components-react";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
21
|
+
|
|
22
|
+
## Properties
|
|
23
|
+
|
|
24
|
+
{% parameter name="options" type="UsePersistentUserChoicesOptions" optional=true %}
|
|
25
|
+
{% /parameter %}
|
|
26
|
+
|
|
27
|
+
## Returns
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
{
|
|
31
|
+
userChoices: LocalUserChoices;
|
|
32
|
+
saveAudioInputEnabled: (isEnabled: boolean) => void;
|
|
33
|
+
saveVideoInputEnabled: (isEnabled: boolean) => void;
|
|
34
|
+
saveAudioInputDeviceId: (deviceId: string) => void;
|
|
35
|
+
saveVideoInputDeviceId: (deviceId: string) => void;
|
|
36
|
+
saveUsername: (username: string) => void;
|
|
37
|
+
}
|
|
38
|
+
```
|