@livekit/components-js-docs 0.1.21 → 0.1.22

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.
@@ -100,7 +100,7 @@
100
100
  | [setupFocusToggle()](./core/setupfocustoggle.md) | |
101
101
  | [setupLiveKitRoom()](./core/setuplivekitroom.md) | |
102
102
  | [setupManualToggle()](./core/setupmanualtoggle.md) | |
103
- | [setupMediaToggle(source, room, options)](./core/setupmediatoggle.md) | |
103
+ | [setupMediaToggle(source, room, options, publishOptions, onError)](./core/setupmediatoggle.md) | |
104
104
  | [setupMediaTrack(trackIdentifier)](./core/setupmediatrack.md) | |
105
105
  | [setupParticipantName(participant)](./core/setupparticipantname.md) | |
106
106
  | [setupParticipantTile()](./core/setupparticipanttile.md) | |
@@ -15,6 +15,8 @@
15
15
  export declare function setupMediaToggle<T extends ToggleSource>(
16
16
  source: T,
17
17
  room: Room,
18
- options?: CaptureOptionsBySource<T>
18
+ options?: CaptureOptionsBySource<T>,
19
+ publishOptions?: TrackPublishOptions,
20
+ onError?: (error: Error) => void
19
21
  ): MediaToggleType<T>;
20
22
  ```
@@ -32,8 +32,8 @@ It is possible to pass configurations for custom message encoding and decoding a
32
32
 
33
33
  ```typescript
34
34
  {
35
- send: ((message: string) => Promise<import("@livekit/components-core").ChatMessage>) | undefined;
36
- update: ((message: string, messageId: string) => Promise<import("@livekit/components-core").ChatMessage>) | undefined;
35
+ send: (message: string) => Promise<import("@livekit/components-core").ChatMessage>;
36
+ update: (message: string, messageId: string) => Promise<import("@livekit/components-core").ChatMessage>;
37
37
  chatMessages: ReceivedChatMessage[];
38
38
  isSending: boolean;
39
39
  }
@@ -35,68 +35,68 @@
35
35
 
36
36
  ## Hooks
37
37
 
38
- | Hook | Description |
39
- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
40
- | [useAudioPlayback(room)](./react/hook/useaudioplayback.md) | In many browsers to start audio playback, the user must perform a user-initiated event such as clicking a button. The <code>useAudioPlayback</code> hook returns an object with a boolean <code>canPlayAudio</code> flag that indicates whether audio playback is allowed in the current context, as well as a <code>startAudio</code> function that can be called in a button <code>onClick</code> callback to start audio playback in the current context. |
41
- | [useChat(options)](./react/hook/usechat.md) | The <code>useChat</code> hook provides chat functionality for a LiveKit room. It returns a simple <code>send</code> function to send chat messages and an array of <code>chatMessages</code> to hold received messages. It also returns a <code>update</code> function that allows you to implement message-edit functionality. |
42
- | [useChatToggle({ props })](./react/hook/usechattoggle.md) | The <code>useChatToggle</code> hook provides state and functions for toggling the chat window. |
43
- | [useClearPinButton(props)](./react/hook/useclearpinbutton.md) | The <code>useClearPinButton</code> hook provides props for the [ClearPinButton](./react/clearpinbutton.md) or your custom implementation of it component. It adds the <code>onClick</code> handler to signal the <code>LayoutContext</code> that the tile in focus should be cleared. |
44
- | [useConnectionQualityIndicator(options)](./react/hook/useconnectionqualityindicator.md) | The <code>useConnectionQualityIndicator</code> hook provides props for the <code>ConnectionQualityIndicator</code> or your custom implementation of it component. |
45
- | [useConnectionState(room)](./react/hook/useconnectionstate.md) | The <code>useConnectionState</code> hook allows you to simply implement your own <code>ConnectionState</code> component. |
46
- | [useCreateLayoutContext()](./react/hook/usecreatelayoutcontext.md) | |
47
- | [useDataChannel(topic, onMessage)](./react/hook/usedatachannel.md) | The <code>useDataChannel</code> hook returns the ability to send and receive messages. By optionally passing a <code>topic</code>, you can narrow down which messages are returned in the messages array. |
48
- | [useDataChannel(onMessage)](./react/hook/usedatachannel_1.md) | The <code>useDataChannel</code> hook returns the ability to send and receive messages. |
49
- | [useDisconnectButton(props)](./react/hook/usedisconnectbutton.md) | The <code>useDisconnectButton</code> hook is used to implement the <code>DisconnectButton</code> or your custom implementation of it. It adds onClick handler to the button to disconnect from the room. |
50
- | [useEnsureCreateLayoutContext(layoutContext)](./react/hook/useensurecreatelayoutcontext.md) | |
51
- | [useEnsureLayoutContext(layoutContext)](./react/hook/useensurelayoutcontext.md) | Ensures that a layout context is provided, either via context or explicitly as a parameter. If not inside a <code>LayoutContext</code> and no layout context is provided, an error is thrown. |
52
- | [useEnsureParticipant(participant)](./react/hook/useensureparticipant.md) | Ensures that a participant is provided, either via context or explicitly as a parameter. If not inside a <code>ParticipantContext</code> and no participant is provided, an error is thrown. |
53
- | [useEnsureRoom(room)](./react/hook/useensureroom.md) | Ensures that a room is provided, either via context or explicitly as a parameter. If no room is provided, an error is thrown. |
54
- | [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. |
55
- | [useFacingMode(trackReference)](./react/hook/usefacingmode.md) | Try to determine the <code>facingMode</code> of a local participant video track. |
56
- | [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
- | [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) | |
59
- | [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
- | [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
- | [useLayoutContext()](./react/hook/uselayoutcontext.md) | Ensures that a layout context is provided via context. If no layout context is provided, an error is thrown. |
62
- | [useLiveKitRoom(props)](./react/hook/uselivekitroom.md) | The <code>useLiveKitRoom</code> hook is used to implement the <code>LiveKitRoom</code> or your custom implementation of it. It returns a <code>Room</code> instance and HTML props that should be applied to the root element of the component. |
63
- | [useLocalParticipant(options)](./react/hook/uselocalparticipant.md) | The <code>useLocalParticipant</code> hook returns the local participant and the associated state around the participant. |
64
- | [useLocalParticipantPermissions()](./react/hook/uselocalparticipantpermissions.md) | The <code>useLocalParticipantPermissions</code> hook returns the local participant's permissions. |
65
- | [useMaybeLayoutContext()](./react/hook/usemaybelayoutcontext.md) | Returns a layout context from the <code>LayoutContext</code> if it exists, otherwise <code>undefined</code>. |
66
- | [useMaybeParticipantContext()](./react/hook/usemaybeparticipantcontext.md) | Returns a participant from the <code>ParticipantContext</code> if it exists, otherwise <code>undefined</code>. |
67
- | [useMaybeRoomContext()](./react/hook/usemayberoomcontext.md) | Returns the room context if it exists, otherwise undefined. |
68
- | [useMaybeTrackRefContext()](./react/hook/usemaybetrackrefcontext.md) | Returns a track reference from the <code>TrackRefContext</code> if it exists, otherwise <code>undefined</code>. |
69
- | [useMediaDevices({ kind, onError, })](./react/hook/usemediadevices.md) | The <code>useMediaDevices</code> hook returns the list of media devices of a given kind. |
70
- | [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. |
71
- | [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. |
72
- | [usePagination(itemPerPage, trackReferences)](./react/hook/usepagination.md) | The <code>usePagination</code> hook implements simple pagination logic for use with arrays. |
73
- | [useParticipantContext()](./react/hook/useparticipantcontext.md) | Ensures that a participant is provided via context. If not inside a <code>ParticipantContext</code>, an error is thrown. |
74
- | [useParticipantInfo(props)](./react/hook/useparticipantinfo.md) | |
75
- | [useParticipantPermissions(options)](./react/hook/useparticipantpermissions.md) | |
76
- | [useParticipants(options)](./react/hook/useparticipants.md) | The <code>useParticipants</code> hook returns all participants (local and remote) of the current room. |
77
- | [useParticipantTile({ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, })](./react/hook/useparticipanttile.md) | The <code>useParticipantTile</code> hook is used to implement the <code>ParticipantTile</code> and returns the props needed to render the tile. |
78
- | [useParticipantTracks(sources, participantIdentity)](./react/hook/useparticipanttracks.md) | <code>useParticipantTracks</code> is a custom React that allows you to get tracks of a specific participant only, by specifiying the participant's identity. If the participant identity is not passed the hook will try to get the participant from a participant context. |
79
- | [usePersistentUserChoices(options)](./react/hook/usepersistentuserchoices.md) | 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. |
80
- | [usePinnedTracks(layoutContext)](./react/hook/usepinnedtracks.md) | The <code>usePinnedTracks</code> hook returns a array of the pinned tracks of the current room. |
81
- | [usePreviewDevice(enabled, deviceId, kind)](./react/hook/usepreviewdevice.md) | |
82
- | [usePreviewTracks(options, onError)](./react/hook/usepreviewtracks.md) | |
83
- | [useRemoteParticipant(identity, options)](./react/hook/useremoteparticipant.md) | The <code>useRemoteParticipant</code> hook returns the RemoteParticipant with the given <code>identity</code>. |
84
- | [useRemoteParticipants(options)](./react/hook/useremoteparticipants.md) | The <code>useRemoteParticipants</code> hook returns all remote participants (without the local) of the current room. |
85
- | [useRoomContext()](./react/hook/useroomcontext.md) | Ensures that a room is provided via context. If no room is provided, an error is thrown. |
86
- | [useRoomInfo(options)](./react/hook/useroominfo.md) | |
87
- | [useSortedParticipants(participants)](./react/hook/usesortedparticipants.md) | The <code>useSortedParticipants</code> hook returns the participants sorted by importance. |
88
- | [useSpeakingParticipants()](./react/hook/usespeakingparticipants.md) | The <code>useSpeakingParticipants</code> hook returns the only the active speakers of all participants. |
89
- | [useStartAudio({ room, props })](./react/hook/usestartaudio.md) | In many browsers to start audio playback, the user must perform a user-initiated event such as clicking a button. The <code>useStatAudio</code> hook returns an object with a boolean <code>canPlayAudio</code> flag that indicates whether audio playback is allowed in the current context, as well as a <code>startAudio</code> function that can be called in a button <code>onClick</code> callback to start audio playback in the current context. |
90
- | [useStartVideo({ room, props })](./react/hook/usestartvideo.md) | In some browsers to start video playback in low power mode, the user must perform a user-initiated event such as clicking a button. The <code>useStartVideo</code> hook returns an object with a boolean <code>canPlayVideo</code> flag that indicates whether video playback is allowed in the current context, as well as a <code>startVideo</code> function that can be called in a button <code>onClick</code> callback to start video playback in the current context. |
91
- | [useSwipe(element, options)](./react/hook/useswipe.md) | Simple implementation to detect horizontal swipe actions. Accepts callbacks for on right and left swipes. |
92
- | [useToken(tokenEndpoint, roomName, options)](./react/hook/usetoken.md) | The <code>useToken</code> hook fetches a token from the given token endpoint with the given user info. |
93
- | [useTrackByName(name, participant)](./react/hook/usetrackbyname.md) | This function <code>useTrackByName</code> allows you to access a track by referencing its track name. Inside the function, it ensures that the a valid <code>participant</code> reference is available by checking for both a passed participant argument and, if not available, a valid participant context. |
94
- | [useTrackMutedIndicator(trackRef)](./react/hook/usetrackmutedindicator.md) | The <code>useTrackMutedIndicator</code> hook is used to implement the <code>TrackMutedIndicator</code> component and returns the muted state of the given track. |
95
- | [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
- | [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
- | [useTrackToggle({ source, onChange, initialState, captureOptions, ...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. |
98
- | [useTrackVolume(trackOrTrackReference, options)](./react/hook/usetrackvolume.md) | Hook for tracking the volume of an audio track using the Web Audio API. |
99
- | [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. |
38
+ | Hook | Description |
39
+ | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
40
+ | [useAudioPlayback(room)](./react/hook/useaudioplayback.md) | In many browsers to start audio playback, the user must perform a user-initiated event such as clicking a button. The <code>useAudioPlayback</code> hook returns an object with a boolean <code>canPlayAudio</code> flag that indicates whether audio playback is allowed in the current context, as well as a <code>startAudio</code> function that can be called in a button <code>onClick</code> callback to start audio playback in the current context. |
41
+ | [useChat(options)](./react/hook/usechat.md) | The <code>useChat</code> hook provides chat functionality for a LiveKit room. It returns a simple <code>send</code> function to send chat messages and an array of <code>chatMessages</code> to hold received messages. It also returns a <code>update</code> function that allows you to implement message-edit functionality. |
42
+ | [useChatToggle({ props })](./react/hook/usechattoggle.md) | The <code>useChatToggle</code> hook provides state and functions for toggling the chat window. |
43
+ | [useClearPinButton(props)](./react/hook/useclearpinbutton.md) | The <code>useClearPinButton</code> hook provides props for the [ClearPinButton](./react/clearpinbutton.md) or your custom implementation of it component. It adds the <code>onClick</code> handler to signal the <code>LayoutContext</code> that the tile in focus should be cleared. |
44
+ | [useConnectionQualityIndicator(options)](./react/hook/useconnectionqualityindicator.md) | The <code>useConnectionQualityIndicator</code> hook provides props for the <code>ConnectionQualityIndicator</code> or your custom implementation of it component. |
45
+ | [useConnectionState(room)](./react/hook/useconnectionstate.md) | The <code>useConnectionState</code> hook allows you to simply implement your own <code>ConnectionState</code> component. |
46
+ | [useCreateLayoutContext()](./react/hook/usecreatelayoutcontext.md) | |
47
+ | [useDataChannel(topic, onMessage)](./react/hook/usedatachannel.md) | The <code>useDataChannel</code> hook returns the ability to send and receive messages. By optionally passing a <code>topic</code>, you can narrow down which messages are returned in the messages array. |
48
+ | [useDataChannel(onMessage)](./react/hook/usedatachannel_1.md) | The <code>useDataChannel</code> hook returns the ability to send and receive messages. |
49
+ | [useDisconnectButton(props)](./react/hook/usedisconnectbutton.md) | The <code>useDisconnectButton</code> hook is used to implement the <code>DisconnectButton</code> or your custom implementation of it. It adds onClick handler to the button to disconnect from the room. |
50
+ | [useEnsureCreateLayoutContext(layoutContext)](./react/hook/useensurecreatelayoutcontext.md) | |
51
+ | [useEnsureLayoutContext(layoutContext)](./react/hook/useensurelayoutcontext.md) | Ensures that a layout context is provided, either via context or explicitly as a parameter. If not inside a <code>LayoutContext</code> and no layout context is provided, an error is thrown. |
52
+ | [useEnsureParticipant(participant)](./react/hook/useensureparticipant.md) | Ensures that a participant is provided, either via context or explicitly as a parameter. If not inside a <code>ParticipantContext</code> and no participant is provided, an error is thrown. |
53
+ | [useEnsureRoom(room)](./react/hook/useensureroom.md) | Ensures that a room is provided, either via context or explicitly as a parameter. If no room is provided, an error is thrown. |
54
+ | [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. |
55
+ | [useFacingMode(trackReference)](./react/hook/usefacingmode.md) | Try to determine the <code>facingMode</code> of a local participant video track. |
56
+ | [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
+ | [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) | |
59
+ | [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
+ | [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
+ | [useLayoutContext()](./react/hook/uselayoutcontext.md) | Ensures that a layout context is provided via context. If no layout context is provided, an error is thrown. |
62
+ | [useLiveKitRoom(props)](./react/hook/uselivekitroom.md) | The <code>useLiveKitRoom</code> hook is used to implement the <code>LiveKitRoom</code> or your custom implementation of it. It returns a <code>Room</code> instance and HTML props that should be applied to the root element of the component. |
63
+ | [useLocalParticipant(options)](./react/hook/uselocalparticipant.md) | The <code>useLocalParticipant</code> hook returns the local participant and the associated state around the participant. |
64
+ | [useLocalParticipantPermissions()](./react/hook/uselocalparticipantpermissions.md) | The <code>useLocalParticipantPermissions</code> hook returns the local participant's permissions. |
65
+ | [useMaybeLayoutContext()](./react/hook/usemaybelayoutcontext.md) | Returns a layout context from the <code>LayoutContext</code> if it exists, otherwise <code>undefined</code>. |
66
+ | [useMaybeParticipantContext()](./react/hook/usemaybeparticipantcontext.md) | Returns a participant from the <code>ParticipantContext</code> if it exists, otherwise <code>undefined</code>. |
67
+ | [useMaybeRoomContext()](./react/hook/usemayberoomcontext.md) | Returns the room context if it exists, otherwise undefined. |
68
+ | [useMaybeTrackRefContext()](./react/hook/usemaybetrackrefcontext.md) | Returns a track reference from the <code>TrackRefContext</code> if it exists, otherwise <code>undefined</code>. |
69
+ | [useMediaDevices({ kind, onError, })](./react/hook/usemediadevices.md) | The <code>useMediaDevices</code> hook returns the list of media devices of a given kind. |
70
+ | [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. |
71
+ | [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. |
72
+ | [usePagination(itemPerPage, trackReferences)](./react/hook/usepagination.md) | The <code>usePagination</code> hook implements simple pagination logic for use with arrays. |
73
+ | [useParticipantContext()](./react/hook/useparticipantcontext.md) | Ensures that a participant is provided via context. If not inside a <code>ParticipantContext</code>, an error is thrown. |
74
+ | [useParticipantInfo(props)](./react/hook/useparticipantinfo.md) | |
75
+ | [useParticipantPermissions(options)](./react/hook/useparticipantpermissions.md) | |
76
+ | [useParticipants(options)](./react/hook/useparticipants.md) | The <code>useParticipants</code> hook returns all participants (local and remote) of the current room. |
77
+ | [useParticipantTile({ trackRef, onParticipantClick, disableSpeakingIndicator, htmlProps, })](./react/hook/useparticipanttile.md) | The <code>useParticipantTile</code> hook is used to implement the <code>ParticipantTile</code> and returns the props needed to render the tile. |
78
+ | [useParticipantTracks(sources, participantIdentity)](./react/hook/useparticipanttracks.md) | <code>useParticipantTracks</code> is a custom React that allows you to get tracks of a specific participant only, by specifiying the participant's identity. If the participant identity is not passed the hook will try to get the participant from a participant context. |
79
+ | [usePersistentUserChoices(options)](./react/hook/usepersistentuserchoices.md) | 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. |
80
+ | [usePinnedTracks(layoutContext)](./react/hook/usepinnedtracks.md) | The <code>usePinnedTracks</code> hook returns a array of the pinned tracks of the current room. |
81
+ | [usePreviewDevice(enabled, deviceId, kind)](./react/hook/usepreviewdevice.md) | |
82
+ | [usePreviewTracks(options, onError)](./react/hook/usepreviewtracks.md) | |
83
+ | [useRemoteParticipant(identity, options)](./react/hook/useremoteparticipant.md) | The <code>useRemoteParticipant</code> hook returns the RemoteParticipant with the given <code>identity</code>. |
84
+ | [useRemoteParticipants(options)](./react/hook/useremoteparticipants.md) | The <code>useRemoteParticipants</code> hook returns all remote participants (without the local) of the current room. |
85
+ | [useRoomContext()](./react/hook/useroomcontext.md) | Ensures that a room is provided via context. If no room is provided, an error is thrown. |
86
+ | [useRoomInfo(options)](./react/hook/useroominfo.md) | |
87
+ | [useSortedParticipants(participants)](./react/hook/usesortedparticipants.md) | The <code>useSortedParticipants</code> hook returns the participants sorted by importance. |
88
+ | [useSpeakingParticipants()](./react/hook/usespeakingparticipants.md) | The <code>useSpeakingParticipants</code> hook returns the only the active speakers of all participants. |
89
+ | [useStartAudio({ room, props })](./react/hook/usestartaudio.md) | In many browsers to start audio playback, the user must perform a user-initiated event such as clicking a button. The <code>useStatAudio</code> hook returns an object with a boolean <code>canPlayAudio</code> flag that indicates whether audio playback is allowed in the current context, as well as a <code>startAudio</code> function that can be called in a button <code>onClick</code> callback to start audio playback in the current context. |
90
+ | [useStartVideo({ room, props })](./react/hook/usestartvideo.md) | In some browsers to start video playback in low power mode, the user must perform a user-initiated event such as clicking a button. The <code>useStartVideo</code> hook returns an object with a boolean <code>canPlayVideo</code> flag that indicates whether video playback is allowed in the current context, as well as a <code>startVideo</code> function that can be called in a button <code>onClick</code> callback to start video playback in the current context. |
91
+ | [useSwipe(element, options)](./react/hook/useswipe.md) | Simple implementation to detect horizontal swipe actions. Accepts callbacks for on right and left swipes. |
92
+ | [useToken(tokenEndpoint, roomName, options)](./react/hook/usetoken.md) | The <code>useToken</code> hook fetches a token from the given token endpoint with the given user info. |
93
+ | [useTrackByName(name, participant)](./react/hook/usetrackbyname.md) | This function <code>useTrackByName</code> allows you to access a track by referencing its track name. Inside the function, it ensures that the a valid <code>participant</code> reference is available by checking for both a passed participant argument and, if not available, a valid participant context. |
94
+ | [useTrackMutedIndicator(trackRef)](./react/hook/usetrackmutedindicator.md) | The <code>useTrackMutedIndicator</code> hook is used to implement the <code>TrackMutedIndicator</code> component and returns the muted state of the given track. |
95
+ | [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
+ | [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
+ | [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. |
98
+ | [useTrackVolume(trackOrTrackReference, options)](./react/hook/usetrackvolume.md) | Hook for tracking the volume of an audio track using the Web Audio API. |
99
+ | [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
100
 
101
101
  ## Others
102
102
 
@@ -26,5 +26,7 @@ export interface TrackToggleProps<T extends ToggleSource> extends Omit<React.But
26
26
  | [captureOptions?](./react/tracktoggleprops.captureoptions.md) | CaptureOptionsBySource&lt;T&gt; | _(Optional)_ |
27
27
  | [initialState?](./react/tracktoggleprops.initialstate.md) | boolean | _(Optional)_ |
28
28
  | [onChange?](./react/tracktoggleprops.onchange.md) | (enabled: boolean, isUserInitiated: boolean) =&gt; void | _(Optional)_ Function that is called when the enabled state of the toggle changes. The second function argument <code>isUserInitiated</code> is <code>true</code> if the change was initiated by a user interaction, such as a click. |
29
+ | [onDeviceError?](./react/tracktoggleprops.ondeviceerror.md) | (error: Error) =&gt; void | _(Optional)_ |
30
+ | [publishOptions?](./react/tracktoggleprops.publishoptions.md) | TrackPublishOptions | _(Optional)_ |
29
31
  | [showIcon?](./react/tracktoggleprops.showicon.md) | boolean | _(Optional)_ |
30
32
  | [source](./react/tracktoggleprops.source.md) | T | |
@@ -0,0 +1,13 @@
1
+ ---
2
+ { "title": "TrackToggleProps.onDeviceError property" }
3
+ ---
4
+
5
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
6
+
7
+ # TrackToggleProps.onDeviceError property
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ onDeviceError?: (error: Error) => void;
13
+ ```
@@ -0,0 +1,13 @@
1
+ ---
2
+ { "title": "TrackToggleProps.publishOptions property" }
3
+ ---
4
+
5
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
6
+
7
+ # TrackToggleProps.publishOptions property
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ publishOptions?: TrackPublishOptions;
13
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@livekit/components-js-docs",
3
- "version": "0.1.21",
3
+ "version": "0.1.22",
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.2.1"
11
+ "@livekit/components-react": "2.3.0"
12
12
  },
13
13
  "author": "",
14
14
  "license": "Apache-2.0",