@livekit/components-js-docs 0.1.53 → 0.1.55
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.
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
| [BaseDataMessage](./core/basedatamessage.md) | |
|
|
22
22
|
| [CaptureOptionsBySource](./core/captureoptionsbysource.md) | |
|
|
23
23
|
| [ChatOptions](./core/chatoptions.md) | |
|
|
24
|
-
| [computeMenuPosition(button, menu)](./core/computemenuposition.md)
|
|
24
|
+
| [computeMenuPosition(button, menu, onUpdate)](./core/computemenuposition.md) | |
|
|
25
25
|
| [connectedParticipantObserver(room, identity, options)](./core/connectedparticipantobserver.md) | |
|
|
26
26
|
| [ConnectedParticipantObserverOptions](./core/connectedparticipantobserveroptions.md) | |
|
|
27
27
|
| [connectedParticipantsObserver(room, options)](./core/connectedparticipantsobserver.md) | |
|
|
@@ -29,9 +29,39 @@ For VoiceAssistant state transitions this component requires a voice assistant a
|
|
|
29
29
|
|
|
30
30
|
## Usage
|
|
31
31
|
|
|
32
|
+
### Example 1
|
|
33
|
+
|
|
32
34
|
```tsx
|
|
33
35
|
function SimpleVoiceAssistant() {
|
|
34
36
|
const { state, audioTrack } = useVoiceAssistant();
|
|
35
37
|
return <BarVisualizer state={state} trackRef={audioTrack} />;
|
|
36
38
|
}
|
|
37
39
|
```
|
|
40
|
+
|
|
41
|
+
### Styling the BarVisualizer using CSS classes
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
.lk-audio-bar {
|
|
45
|
+
// Styles for "idle" bars
|
|
46
|
+
}
|
|
47
|
+
.lk-audio-bar.lk-highlighted {
|
|
48
|
+
// Styles for "active" bars
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Styling the BarVisualizer using CSS custom properties
|
|
53
|
+
|
|
54
|
+
```css
|
|
55
|
+
--lk-fg // for the "active" colour, note that this defines the main foreground colour for the whole "theme"
|
|
56
|
+
--lk-va-bg // for "idle" colour
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Using a custom bar template for the BarVisualizer
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<BarVisualizer>
|
|
63
|
+
<div className="all the classes" />
|
|
64
|
+
</BarVisualizer>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
the highlighted children will get a data prop of data-lk-highlighted for them to switch between active and idle bars in their own template bar
|
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.55",
|
|
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.9.
|
|
11
|
+
"@livekit/components-react": "2.9.2"
|
|
12
12
|
},
|
|
13
13
|
"author": "",
|
|
14
14
|
"license": "Apache-2.0",
|