@livekit/components-js-docs 0.1.28 → 0.1.30
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/gridlayoutdefinition.md +5 -5
- package/generated-docs/core/gridlayoutinfo.md +24 -0
- package/generated-docs/core/index.md +3 -1
- package/generated-docs/core/participantattributesobserver.md +25 -0
- package/generated-docs/core/selectgridlayout.md +2 -2
- package/generated-docs/react/component/controlbar.md +8 -0
- package/generated-docs/react/controlbarprops.md +6 -5
- package/generated-docs/react/controlbarprops.ondeviceerror.md +16 -0
- package/generated-docs/react/gridlayoutdefinition.md +24 -0
- package/generated-docs/react/hook/usegridlayout.md +8 -1
- package/generated-docs/react/hook/useparticipantattribute.md +40 -0
- package/generated-docs/react/hook/useparticipantattributes.md +31 -0
- package/generated-docs/react/index.md +6 -2
- package/generated-docs/react/meta-data.json +1 -1
- package/generated-docs/react/useparticipantattributesoptions.md +32 -0
- package/generated-docs/react/useparticipantattributesoptions.participant.md +13 -0
- package/package.json +2 -2
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
|
|
14
14
|
```typescript
|
|
15
15
|
export type GridLayoutDefinition = {
|
|
16
|
-
name: string;
|
|
17
16
|
columns: number;
|
|
18
17
|
rows: number;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
minHeight: number;
|
|
18
|
+
minWidth?: number;
|
|
19
|
+
minHeight?: number;
|
|
20
|
+
orientation?: "landscape" | "portrait";
|
|
23
21
|
};
|
|
24
22
|
```
|
|
23
|
+
|
|
24
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "GridLayoutInfo type",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/core/src/helper/grid-layouts.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# GridLayoutInfo type
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
export type GridLayoutInfo = {
|
|
16
|
+
name: string;
|
|
17
|
+
columns: number;
|
|
18
|
+
rows: number;
|
|
19
|
+
maxTiles: number;
|
|
20
|
+
minWidth: number;
|
|
21
|
+
minHeight: number;
|
|
22
|
+
orientation?: "landscape" | "portrait";
|
|
23
|
+
};
|
|
24
|
+
```
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
| [getTrackReferenceSource(trackReference)](./core/gettrackreferencesource.md) | Returns the Source of the TrackReference. |
|
|
49
49
|
| [GRID_LAYOUTS](./core/grid_layouts.md) | |
|
|
50
50
|
| [GridLayoutDefinition](./core/gridlayoutdefinition.md) | |
|
|
51
|
+
| [GridLayoutInfo](./core/gridlayoutinfo.md) | |
|
|
51
52
|
| [isEqualTrackRef(a, b)](./core/isequaltrackref.md) | |
|
|
52
53
|
| [isLocal(p)](./core/islocal.md) | |
|
|
53
54
|
| [isMobileBrowser()](./core/ismobilebrowser.md) | Mobile browser detection based on <code>navigator.userAgent</code> string. Defaults to returning <code>false</code> if not in a browser. |
|
|
@@ -68,6 +69,7 @@
|
|
|
68
69
|
| [observeParticipantMedia(participant)](./core/observeparticipantmedia.md) | |
|
|
69
70
|
| [observeRoomEvents(room, events)](./core/observeroomevents.md) | |
|
|
70
71
|
| [observeTrackEvents(track, events)](./core/observetrackevents.md) | |
|
|
72
|
+
| [participantAttributesObserver(participant)](./core/participantattributesobserver.md) | |
|
|
71
73
|
| [participantByIdentifierObserver(room, { kind, identity }, options)](./core/participantbyidentifierobserver.md) | |
|
|
72
74
|
| [participantEventSelector(participant, event)](./core/participanteventselector.md) | |
|
|
73
75
|
| [ParticipantFilter](./core/participantfilter.md) | |
|
|
@@ -92,7 +94,7 @@
|
|
|
92
94
|
| [saveUserChoices(userChoices, preventSave)](./core/saveuserchoices.md) | Saves user choices to local storage. |
|
|
93
95
|
| [screenShareObserver(room)](./core/screenshareobserver.md) | |
|
|
94
96
|
| [ScreenShareTrackMap](./core/screensharetrackmap.md) | |
|
|
95
|
-
| [selectGridLayout(
|
|
97
|
+
| [selectGridLayout(layoutDefinitions, participantCount, width, height)](./core/selectgridlayout.md) | |
|
|
96
98
|
| [sendMessage(localParticipant, payload, options)](./core/sendmessage.md) | Publish data from the LocalParticipant. |
|
|
97
99
|
| [setDifference(setA, setB)](./core/setdifference.md) | |
|
|
98
100
|
| [setLogExtension(extension, options)](./core/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. |
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "participantAttributesObserver",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/core/src/observables/participant.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# participantAttributesObserver
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
export declare function participantAttributesObserver(participant: Participant): Observable<
|
|
16
|
+
| {
|
|
17
|
+
changed: Readonly<Record<string, string>>;
|
|
18
|
+
attributes: Readonly<Record<string, string>>;
|
|
19
|
+
}
|
|
20
|
+
| {
|
|
21
|
+
changed: Readonly<Record<string, string>>;
|
|
22
|
+
attributes: Readonly<Record<string, string>>;
|
|
23
|
+
}
|
|
24
|
+
>;
|
|
25
|
+
```
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
|
|
14
14
|
```typescript
|
|
15
15
|
export declare function selectGridLayout(
|
|
16
|
-
|
|
16
|
+
layoutDefinitions: GridLayoutDefinition[],
|
|
17
17
|
participantCount: number,
|
|
18
18
|
width: number,
|
|
19
19
|
height: number
|
|
20
|
-
):
|
|
20
|
+
): GridLayoutInfo;
|
|
21
21
|
```
|
|
@@ -38,6 +38,14 @@ _(Optional)_
|
|
|
38
38
|
|
|
39
39
|
{% /parameter %}
|
|
40
40
|
|
|
41
|
+
{% parameter name="onDeviceError" type="(error: {
|
|
42
|
+
source: Track.Source;
|
|
43
|
+
error: Error;
|
|
44
|
+
}) => void" optional=true %}
|
|
45
|
+
_(Optional)_
|
|
46
|
+
|
|
47
|
+
{% /parameter %}
|
|
48
|
+
|
|
41
49
|
{% parameter name="saveUserChoices" type="boolean" optional=true %}
|
|
42
50
|
_(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
51
|
|
|
@@ -21,8 +21,9 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
21
21
|
|
|
22
22
|
## Properties
|
|
23
23
|
|
|
24
|
-
| Property | Type
|
|
25
|
-
| -------------------------------------------------------------- |
|
|
26
|
-
| [controls?](./react/controlbarprops.controls.md) | [ControlBarControls](./react/controlbarcontrols.md)
|
|
27
|
-
| [
|
|
28
|
-
| [
|
|
24
|
+
| Property | Type | Description |
|
|
25
|
+
| -------------------------------------------------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
26
|
+
| [controls?](./react/controlbarprops.controls.md) | [ControlBarControls](./react/controlbarcontrols.md) | _(Optional)_ |
|
|
27
|
+
| [onDeviceError?](./react/controlbarprops.ondeviceerror.md) | (error: { source: Track.Source; error: Error; }) => void | _(Optional)_ |
|
|
28
|
+
| [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. |
|
|
29
|
+
| [variation?](./react/controlbarprops.variation.md) | 'minimal' \| 'verbose' \| 'textOnly' | _(Optional)_ |
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
---
|
|
2
|
+
{ "title": "ControlBarProps.onDeviceError property" }
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
|
+
|
|
7
|
+
# ControlBarProps.onDeviceError property
|
|
8
|
+
|
|
9
|
+
**Signature:**
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
onDeviceError?: (error: {
|
|
13
|
+
source: Track.Source;
|
|
14
|
+
error: Error;
|
|
15
|
+
}) => void;
|
|
16
|
+
```
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "GridLayoutDefinition type",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/../core/src/helper/grid-layouts.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# GridLayoutDefinition type
|
|
11
|
+
|
|
12
|
+
**Signature:**
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
export type GridLayoutDefinition = {
|
|
16
|
+
columns: number;
|
|
17
|
+
rows: number;
|
|
18
|
+
minWidth?: number;
|
|
19
|
+
minHeight?: number;
|
|
20
|
+
orientation?: "landscape" | "portrait";
|
|
21
|
+
};
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
@@ -33,10 +33,17 @@ const { layout } = useGridLayout(gridElement, trackCount);
|
|
|
33
33
|
{% parameter name="trackCount" type="number" optional=false %}
|
|
34
34
|
{% /parameter %}
|
|
35
35
|
|
|
36
|
+
{% parameter name="options" type="{
|
|
37
|
+
gridLayouts?: GridLayoutDefinition[];
|
|
38
|
+
}" optional=true %}
|
|
39
|
+
{% /parameter %}
|
|
40
|
+
|
|
36
41
|
## Returns
|
|
37
42
|
|
|
38
43
|
```typescript
|
|
39
44
|
{
|
|
40
|
-
layout:
|
|
45
|
+
layout: GridLayoutInfo;
|
|
46
|
+
containerWidth: number;
|
|
47
|
+
containerHeight: number;
|
|
41
48
|
}
|
|
42
49
|
```
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "useParticipantAttribute",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useParticipantAttributes.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# useParticipantAttribute
|
|
11
|
+
|
|
12
|
+
The `useParticipantAttribute` hook returns the latest value of a given attribute key of a participant. It requires a `Participant` object passed as property in the `UseParticipantAttributesOptions` or via the `ParticipantContext`<!-- -->.
|
|
13
|
+
|
|
14
|
+
## Import
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
import { useParticipantAttribute } from "@livekit/components-react";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
const myAttributeValue = useParticipantAttribute("targetAttributeName");
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
{% partial file="p_usage.md" variables={exampleCount: 1} /%}
|
|
27
|
+
|
|
28
|
+
## Properties
|
|
29
|
+
|
|
30
|
+
{% parameter name="attributeKey" type="string" optional=false %}
|
|
31
|
+
{% /parameter %}
|
|
32
|
+
|
|
33
|
+
{% parameter name="options" type="UseParticipantAttributesOptions" optional=true %}
|
|
34
|
+
{% /parameter %}
|
|
35
|
+
|
|
36
|
+
## Returns
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
string;
|
|
40
|
+
```
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "useParticipantAttributes",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useParticipantAttributes.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# useParticipantAttributes
|
|
11
|
+
|
|
12
|
+
## Import
|
|
13
|
+
|
|
14
|
+
```typescript
|
|
15
|
+
import { useParticipantAttributes } from "@livekit/components-react";
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
{% partial file="p_usage.md" variables={exampleCount: 0} /%}
|
|
19
|
+
|
|
20
|
+
## Properties
|
|
21
|
+
|
|
22
|
+
{% parameter name="props" type="UseParticipantAttributesOptions" optional=true %}
|
|
23
|
+
{% /parameter %}
|
|
24
|
+
|
|
25
|
+
## Returns
|
|
26
|
+
|
|
27
|
+
```typescript
|
|
28
|
+
{
|
|
29
|
+
attributes: Readonly<Record<string, string>>;
|
|
30
|
+
}
|
|
31
|
+
```
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
52
52
|
| [AudioConference({ ...props })](./react/component/audioconference.md) | This component is the default setup of a classic LiveKit audio conferencing app. It provides functionality like switching between participant grid view and focus view. |
|
|
53
53
|
| [Chat({ messageFormatter, messageDecoder, messageEncoder, channelTopic, ...props })](./react/component/chat.md) | The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants in the room. Only users who are in the room at the time of dispatch will receive the message. |
|
|
54
|
-
| [ControlBar({ variation, controls, saveUserChoices, ...props })](./react/component/controlbar.md)
|
|
54
|
+
| [ControlBar({ variation, controls, saveUserChoices, onDeviceError, ...props })](./react/component/controlbar.md) | The <code>ControlBar</code> prefab gives the user the basic user interface to control their media devices (camera, microphone and screen share), open the <code>Chat</code> and leave the room. |
|
|
55
55
|
| [MediaDeviceMenu({ kind, initialSelection, onActiveDeviceChange, tracks, requestPermissions, ...props })](./react/component/mediadevicemenu.md) | The <code>MediaDeviceMenu</code> component is a button that opens a menu that lists all media devices and allows the user to select them. |
|
|
56
56
|
| [PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, ...htmlProps })](./react/component/prejoin.md) | The <code>PreJoin</code> prefab component is normally presented to the user before he enters a room. This component allows the user to check and select the preferred media device (camera und microphone). On submit the user decisions are returned, which can then be passed on to the <code>LiveKitRoom</code> so that the user enters the room with the correct media devices. |
|
|
57
57
|
| [VideoConference({ chatMessageFormatter, chatMessageDecoder, chatMessageEncoder, SettingsComponent, ...props })](./react/component/videoconference.md) | The <code>VideoConference</code> ready-made component is your drop-in solution for a classic video conferencing application. It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers of participants, basic non-persistent chat, screen sharing, and more. |
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
| [useEnsureTrackRef(trackRef)](./react/hook/useensuretrackref.md) | Ensures that a track reference is provided, either via context or explicitly as a parameter. If not inside a <code>TrackRefContext</code> and no track reference is provided, an error is thrown. |
|
|
78
78
|
| [useFacingMode(trackReference)](./react/hook/usefacingmode.md) | Try to determine the <code>facingMode</code> of a local participant video track. |
|
|
79
79
|
| [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. |
|
|
80
|
-
| [useGridLayout(gridElement, trackCount)](./react/hook/usegridlayout.md)
|
|
80
|
+
| [useGridLayout(gridElement, trackCount, options)](./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. |
|
|
81
81
|
| [useIsEncrypted(participant, options)](./react/hook/useisencrypted.md) | |
|
|
82
82
|
| [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. |
|
|
83
83
|
| [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. |
|
|
@@ -93,6 +93,8 @@
|
|
|
93
93
|
| [useMediaDeviceSelect({ kind, room, track, requestPermissions, onError, })](./react/hook/usemediadeviceselect.md) | The <code>useMediaDeviceSelect</code> hook is used to implement the <code>MediaDeviceSelect</code> component and returns o.a. the list of devices of a given kind (audioinput or videoinput), the currently active device and a function to set the the active device. |
|
|
94
94
|
| [useMultibandTrackVolume(trackOrTrackReference, options)](./react/hook/usemultibandtrackvolume.md) | Hook for tracking the volume of an audio track across multiple frequency bands using the Web Audio API. |
|
|
95
95
|
| [usePagination(itemPerPage, trackReferences)](./react/hook/usepagination.md) | The <code>usePagination</code> hook implements simple pagination logic for use with arrays. |
|
|
96
|
+
| [useParticipantAttribute(attributeKey, options)](./react/hook/useparticipantattribute.md) | The <code>useParticipantAttribute</code> hook returns the latest value of a given attribute key of a participant. It requires a <code>Participant</code> object passed as property in the <code>UseParticipantAttributesOptions</code> or via the <code>ParticipantContext</code>. |
|
|
97
|
+
| [useParticipantAttributes(props)](./react/hook/useparticipantattributes.md) | |
|
|
96
98
|
| [useParticipantContext()](./react/hook/useparticipantcontext.md) | Ensures that a participant is provided via context. If not inside a <code>ParticipantContext</code>, an error is thrown. |
|
|
97
99
|
| [useParticipantInfo(props)](./react/hook/useparticipantinfo.md) | |
|
|
98
100
|
| [useParticipantPermissions(options)](./react/hook/useparticipantpermissions.md) | |
|
|
@@ -148,6 +150,7 @@
|
|
|
148
150
|
| [FocusLayoutProps](./react/focuslayoutprops.md) | |
|
|
149
151
|
| [FocusToggleProps](./react/focustoggleprops.md) | |
|
|
150
152
|
| [formatChatMessageLinks(message)](./react/formatchatmessagelinks.md) | |
|
|
153
|
+
| [GridLayoutDefinition](./react/gridlayoutdefinition.md) | |
|
|
151
154
|
| [GridLayoutProps](./react/gridlayoutprops.md) | |
|
|
152
155
|
| [LayoutContextProviderProps](./react/layoutcontextproviderprops.md) | |
|
|
153
156
|
| [LayoutContextType](./react/layoutcontexttype.md) | |
|
|
@@ -182,6 +185,7 @@
|
|
|
182
185
|
| [UseIsMutedOptions](./react/useismutedoptions.md) | |
|
|
183
186
|
| [UseLocalParticipantOptions](./react/uselocalparticipantoptions.md) | |
|
|
184
187
|
| [UseMediaDeviceSelectProps](./react/usemediadeviceselectprops.md) | |
|
|
188
|
+
| [UseParticipantAttributesOptions](./react/useparticipantattributesoptions.md) | The <code>useParticipantAttributes</code> hook returns the attributes of a given participant and allows to set them. It requires a <code>Participant</code> object passed as property or via the <code>ParticipantContext</code>. |
|
|
185
189
|
| [UseParticipantInfoOptions](./react/useparticipantinfooptions.md) | The <code>useParticipantInfo</code> hook returns the identity, name, and metadata of a given participant. It requires a <code>Participant</code> object passed as property or via the <code>ParticipantContext</code>. |
|
|
186
190
|
| [UseParticipantPermissionsOptions](./react/useparticipantpermissionsoptions.md) | The <code>useParticipantPermissions</code> hook returns the permissions of a given participant. |
|
|
187
191
|
| [UseParticipantsOptions](./react/useparticipantsoptions.md) | |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"components":[{"filename":"audioconference.md","title":"AudioConference"},{"filename":"audiotrack.md","title":"AudioTrack"},{"filename":"audiovisualizer.md","title":"AudioVisualizer"},{"filename":"carousellayout.md","title":"CarouselLayout"},{"filename":"chat.md","title":"Chat"},{"filename":"chatentry.md","title":"ChatEntry"},{"filename":"chattoggle.md","title":"ChatToggle"},{"filename":"clearpinbutton.md","title":"ClearPinButton"},{"filename":"connectionqualityindicator.md","title":"ConnectionQualityIndicator"},{"filename":"connectionstate.md","title":"ConnectionState"},{"filename":"connectionstatetoast.md","title":"ConnectionStateToast"},{"filename":"controlbar.md","title":"ControlBar"},{"filename":"disconnectbutton.md","title":"DisconnectButton"},{"filename":"focuslayout.md","title":"FocusLayout"},{"filename":"focuslayoutcontainer.md","title":"FocusLayoutContainer"},{"filename":"focustoggle.md","title":"FocusToggle"},{"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":"mediadeviceselect.md","title":"MediaDeviceSelect"},{"filename":"participantaudiotile.md","title":"ParticipantAudioTile"},{"filename":"participantcontext.md","title":"ParticipantContext"},{"filename":"participantcontextifneeded.md","title":"ParticipantContextIfNeeded"},{"filename":"participantloop.md","title":"ParticipantLoop"},{"filename":"participantname.md","title":"ParticipantName"},{"filename":"participanttile.md","title":"ParticipantTile"},{"filename":"prejoin.md","title":"PreJoin"},{"filename":"roomaudiorenderer.md","title":"RoomAudioRenderer"},{"filename":"roomcontext.md","title":"RoomContext"},{"filename":"roomname.md","title":"RoomName"},{"filename":"startaudio.md","title":"StartAudio"},{"filename":"toast.md","title":"Toast"},{"filename":"trackloop.md","title":"TrackLoop"},{"filename":"trackmutedindicator.md","title":"TrackMutedIndicator"},{"filename":"trackrefcontext.md","title":"TrackRefContext"},{"filename":"tracktoggle.md","title":"TrackToggle"},{"filename":"videoconference.md","title":"VideoConference"},{"filename":"videotrack.md","title":"VideoTrack"}],"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":"useremoteparticipant_1.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
|
+
{"components":[{"filename":"audioconference.md","title":"AudioConference"},{"filename":"audiotrack.md","title":"AudioTrack"},{"filename":"audiovisualizer.md","title":"AudioVisualizer"},{"filename":"carousellayout.md","title":"CarouselLayout"},{"filename":"chat.md","title":"Chat"},{"filename":"chatentry.md","title":"ChatEntry"},{"filename":"chattoggle.md","title":"ChatToggle"},{"filename":"clearpinbutton.md","title":"ClearPinButton"},{"filename":"connectionqualityindicator.md","title":"ConnectionQualityIndicator"},{"filename":"connectionstate.md","title":"ConnectionState"},{"filename":"connectionstatetoast.md","title":"ConnectionStateToast"},{"filename":"controlbar.md","title":"ControlBar"},{"filename":"disconnectbutton.md","title":"DisconnectButton"},{"filename":"focuslayout.md","title":"FocusLayout"},{"filename":"focuslayoutcontainer.md","title":"FocusLayoutContainer"},{"filename":"focustoggle.md","title":"FocusToggle"},{"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":"mediadeviceselect.md","title":"MediaDeviceSelect"},{"filename":"participantaudiotile.md","title":"ParticipantAudioTile"},{"filename":"participantcontext.md","title":"ParticipantContext"},{"filename":"participantcontextifneeded.md","title":"ParticipantContextIfNeeded"},{"filename":"participantloop.md","title":"ParticipantLoop"},{"filename":"participantname.md","title":"ParticipantName"},{"filename":"participanttile.md","title":"ParticipantTile"},{"filename":"prejoin.md","title":"PreJoin"},{"filename":"roomaudiorenderer.md","title":"RoomAudioRenderer"},{"filename":"roomcontext.md","title":"RoomContext"},{"filename":"roomname.md","title":"RoomName"},{"filename":"startaudio.md","title":"StartAudio"},{"filename":"toast.md","title":"Toast"},{"filename":"trackloop.md","title":"TrackLoop"},{"filename":"trackmutedindicator.md","title":"TrackMutedIndicator"},{"filename":"trackrefcontext.md","title":"TrackRefContext"},{"filename":"tracktoggle.md","title":"TrackToggle"},{"filename":"videoconference.md","title":"VideoConference"},{"filename":"videotrack.md","title":"VideoTrack"}],"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":"useparticipantattribute.md","title":"useParticipantAttribute"},{"filename":"useparticipantattributes.md","title":"useParticipantAttributes"},{"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":"useremoteparticipant_1.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"}]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
---
|
|
2
|
+
{
|
|
3
|
+
"title": "UseParticipantAttributesOptions interface",
|
|
4
|
+
"linkToSource": "https://github.com/livekit/components-js/blob/main/packages/react/src/hooks/useParticipantAttributes.ts"
|
|
5
|
+
}
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
9
|
+
|
|
10
|
+
# UseParticipantAttributesOptions interface
|
|
11
|
+
|
|
12
|
+
The `useParticipantAttributes` hook returns the attributes of a given participant and allows to set them. It requires a `Participant` object passed as property or via the `ParticipantContext`<!-- -->.
|
|
13
|
+
|
|
14
|
+
**Signature:**
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
export interface UseParticipantAttributesOptions
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
const { attributes } = useParticipantAttributes({ participant });
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
{% partial file="p_usage.md" variables={exampleCount: 1} /%}
|
|
27
|
+
|
|
28
|
+
## Properties
|
|
29
|
+
|
|
30
|
+
| Property | Type | Description |
|
|
31
|
+
| ---------------------------------------------------------------------- | ----------- | ------------ |
|
|
32
|
+
| [participant?](./react/useparticipantattributesoptions.participant.md) | Participant | _(Optional)_ |
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
---
|
|
2
|
+
{ "title": "UseParticipantAttributesOptions.participant property" }
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
6
|
+
|
|
7
|
+
# UseParticipantAttributesOptions.participant property
|
|
8
|
+
|
|
9
|
+
**Signature:**
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
participant?: Participant;
|
|
13
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@livekit/components-js-docs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.30",
|
|
4
4
|
"description": "Automatically generated documentation pages for LiveKit Components JS. Intended to be consumed by the documentation page.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"directory": "/docs/beta-docs"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@livekit/components-react": "2.
|
|
11
|
+
"@livekit/components-react": "2.4.1"
|
|
12
12
|
},
|
|
13
13
|
"author": "",
|
|
14
14
|
"license": "Apache-2.0",
|