Stateful BarVisualizer and VoiceAssistantControlBar (#954)

Author: lukasIO

.changeset/healthy-donkeys-reply.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": minor
+---
+
+Stateful BarVisualizer and VoiceAssistantControlBar

docs/storybook/.storybook/lk-decorators/ParticipantContext.tsx

@@ -1,6 +1,12 @@
 import React, { HTMLAttributes } from 'react';
-import { ParticipantContext, useLocalParticipant } from '@livekit/components-react';
+import {
+  ParticipantContext,
+  TrackRefContext,
+  useLocalParticipant,
+  useTracks,
+} from '@livekit/components-react';
 import { Decorator } from '@storybook/react';
+import { Track } from 'livekit-client';
 
 /**
  * Wraps a Storybook Story into a LiveKit participant context.
@@ -12,6 +18,16 @@ export const LkParticipantContext: Decorator = (Story, _) => {
   return <LocalParticipantContext>{Story()}</LocalParticipantContext>;
 };
 
+export const LkLocalMicTrackContext: Decorator = (Story, _) => {
+  return <LocalMicTrackContext>{Story()}</LocalMicTrackContext>;
+};
+
+const LocalMicTrackContext = (props: HTMLAttributes<HTMLDivElement>) => {
+  const p = useTracks([Track.Source.Microphone])[0];
+
+  return p && <TrackRefContext.Provider value={p}>{props.children}</TrackRefContext.Provider>;
+};
+
 const LocalParticipantContext = (props: HTMLAttributes<HTMLDivElement>) => {
   const p = useLocalParticipant();
 

docs/storybook/stories/components/ChatEntry.stories.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { ChatEntry, ChatEntryProps, formatChatMessageLinks } from '@livekit/components-react';
 import { LkRoomContext } from '../../.storybook/lk-decorators';
 import { Participant } from 'livekit-client';
 
 const participant = new Participant('dummy-sid', 'dummy-identity', 'dummy-name', 'dummy-metadata');
 
-export default {
+const Story: Meta<typeof ChatEntry> = {
   component: ChatEntry,
   decorators: [LkRoomContext],
   render: (args: ChatEntryProps) => <ChatEntry {...args}></ChatEntry>,
@@ -19,15 +19,18 @@ export default {
   },
 };
 
+export default Story;
+
 export const Default: StoryObj<ChatEntryProps> = {
-  args: { entry: { timestamp: 1, message: 'Hello world!', from: participant } },
+  args: { entry: { timestamp: 1, id: '234', message: 'Hello world!', from: participant } },
   parameters: { roomContext: { audio: false, video: false, connect: true } },
 };
 
 export const LongMessage: StoryObj<ChatEntryProps> = {
   ...Default,
   args: {
     entry: {
+      id: '234',
       timestamp: 1,
       message:
         'Niklas tog tag i datorn och lyfte den mot himmeln. Så nu tar vi en paus och inväntar resultatet av dagens skrivande. Sociala nätverk kan aldrig fånga en fisk. Kan vi få fram något resultat på hur många som kom idag? En annan sak är att man ibland går ensam till de olika festerna.',
@@ -41,6 +44,7 @@ export const MessageWithLinks: StoryObj<ChatEntryProps> = {
   ...Default,
   args: {
     entry: {
+      id: '234',
       timestamp: 1,
       message: 'a google.com message with links [email protected].',
       from: participant,

docs/storybook/stories/components/ConnectionState.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { ConnectionState, ConnectionStatusProps } from '@livekit/components-react';
 import { LkRoomContext } from '../../.storybook/lk-decorators';
 
-export default {
+const Story: Meta<typeof ConnectionState> = {
   component: ConnectionState,
   decorators: [LkRoomContext],
   render: (args: ConnectionStatusProps) => <ConnectionState {...args}></ConnectionState>,
@@ -16,6 +16,8 @@ export default {
   },
 };
 
+export default Story;
+
 export const Default: StoryObj<ConnectionStatusProps> = {
   args: {},
   parameters: { roomContext: { audio: false, video: false, connect: true } },

docs/storybook/stories/components/ConnectionStateToast.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import {
   //   ConnectionState,
@@ -9,7 +9,7 @@ import {
 // import { LkRoomContext } from '../../.storybook/lk-decorators';
 import { Room, ConnectionState as State } from 'livekit-client';
 
-export default {
+const Story: Meta<typeof ConnectionStateToast> = {
   component: ConnectionStateToast,
   //   decorators: [LkRoomContext],
   render: (args: ConnectionStatusProps) => <ConnectionStateToast {...args}></ConnectionStateToast>,
@@ -21,6 +21,8 @@ export default {
   },
 };
 
+export default Story;
+
 function getRoomWithState(state: State) {
   const room = new Room();
   room.state = state;

docs/storybook/stories/components/RoomName.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { RoomName, RoomNameProps } from '@livekit/components-react';
 import { LkRoomContext } from '../../.storybook/lk-decorators';
 
-export default {
+const Story: Meta<typeof RoomName> = {
   component: RoomName,
   decorators: [LkRoomContext],
   render: (args: RoomNameProps) => <RoomName {...args}></RoomName>,
@@ -21,6 +21,8 @@ export default {
   },
 };
 
+export default Story;
+
 export const Default: StoryObj<RoomNameProps> = {
   args: { childrenPosition: 'before' },
   parameters: { roomContext: { audio: false, video: false, connect: true } },

docs/storybook/stories/components/controls/ClearPinButton.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { ClearPinButton, ClearPinButtonProps } from '@livekit/components-react';
 import { LkLayoutContext, LkRoomContext } from '../../../.storybook/lk-decorators';
 
-export default {
+const Story: Meta<typeof ClearPinButton> = {
   component: ClearPinButton,
   decorators: [LkLayoutContext, LkRoomContext],
   render: (args: ClearPinButtonProps) => <ClearPinButton {...args}>Back to Grid</ClearPinButton>,
@@ -21,6 +21,8 @@ export default {
   },
 };
 
+export default Story;
+
 export const Default: StoryObj<ClearPinButtonProps> = {
   args: {},
   parameters: {

docs/storybook/stories/components/controls/DisconnectButton.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { DisconnectButton, DisconnectButtonProps } from '@livekit/components-react';
 import { LkRoomContext } from '../../../.storybook/lk-decorators';
 
-export default {
+const Story: Meta<typeof DisconnectButton> = {
   component: DisconnectButton,
   decorators: [LkRoomContext],
   render: (args: DisconnectButtonProps) => <DisconnectButton {...args}>Leave</DisconnectButton>,
@@ -15,6 +15,8 @@ export default {
   },
 };
 
+export default Story;
+
 export const Connected: StoryObj<DisconnectButtonProps> = {
   args: {
     stopTracks: true,

docs/storybook/stories/components/controls/MediaDeviceSelect.stories.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { MediaDeviceSelect, MediaDeviceSelectProps } from '@livekit/components-react';
 import { LkRoomContext } from '../../../.storybook/lk-decorators';
 
 const kinds: MediaDeviceKind[] = ['audioinput', 'audiooutput', 'videoinput'];
 
-export default {
-  name: 'MediaDeviceSelect',
+const Story: Meta<typeof MediaDeviceSelect> = {
   component: MediaDeviceSelect,
   decorators: [LkRoomContext],
   render: (args: MediaDeviceSelectProps) => (
@@ -27,6 +26,8 @@ export default {
   },
 };
 
+export default Story;
+
 export const AudioInputDevices: StoryObj<MediaDeviceSelectProps> = {
   args: { kind: 'audioinput' },
   parameters: { roomContext: { audio: true, video: false, connect: true } },

docs/storybook/stories/components/controls/TrackToggle.stories.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { TrackToggle, TrackToggleProps } from '@livekit/components-react';
 import { LkRoomContext } from '../../../.storybook/lk-decorators';
 import { Track } from 'livekit-client';
 import { ToggleSource } from '@livekit/components-core';
 
-export default {
+const Story: Meta<typeof TrackToggle> = {
   component: TrackToggle,
   decorators: [LkRoomContext],
   render: (args: TrackToggleProps<ToggleSource>) => (
@@ -29,6 +29,8 @@ export default {
   },
 };
 
+export default Story;
+
 export const Camera: StoryObj<TrackToggleProps<Track.Source.Camera>> = {
   args: { source: Track.Source.Camera, initialState: true },
   parameters: { roomContext: { audio: false, video: true, connect: true } },

docs/storybook/stories/components/layout/CarouselLayout.stories.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 
 import { CarouselLayout, CarouselLayoutProps } from '@livekit/components-react';
 import { LkRoomContext } from '../../../.storybook/lk-decorators';
+import { Meta } from '@storybook/react';
 
-export default {
+const Story: Meta<typeof CarouselLayout> = {
   component: CarouselLayout,
   decorators: [LkRoomContext],
   render: (args: CarouselLayoutProps) => (
@@ -19,6 +20,8 @@ export default {
   },
 };
 
+export default Story;
+
 export const Default = {
   args: {},
   parameters: { roomContext: { audio: true, video: true, connect: true } },

docs/storybook/stories/components/layout/FocusLayoutContainer.stories.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 
 import { FocusLayoutContainerProps, FocusLayoutContainer } from '@livekit/components-react';
 import { LkLayoutContext, LkRoomContext } from '../../../.storybook/lk-decorators';
+import { Meta } from '@storybook/react';
 
-export default {
+const Story: Meta<typeof FocusLayoutContainer> = {
   component: FocusLayoutContainer,
   decorators: [LkLayoutContext, LkRoomContext],
   render: (args: FocusLayoutContainerProps) => <FocusLayoutContainer {...args} />,
@@ -15,6 +16,8 @@ export default {
   },
 };
 
+export default Story;
+
 export const Default = {
   args: {},
   parameters: { roomContext: { audio: true, video: true, connect: true } },

docs/storybook/stories/components/layout/GridLayout.stories.tsx

@@ -3,8 +3,9 @@ import * as React from 'react';
 import { GridLayout, GridLayoutProps, useTracks } from '@livekit/components-react';
 import { LkRoomContext } from '../../../.storybook/lk-decorators';
 import { Track } from 'livekit-client';
+import { Meta } from '@storybook/react';
 
-export default {
+const Story: Meta<typeof GridLayout> = {
   component: GridLayout,
   decorators: [LkRoomContext],
   render: (args: Omit<GridLayoutProps, 'tracks'>) => {
@@ -14,6 +15,8 @@ export default {
   argTypes: {},
 };
 
+export default Story;
+
 export const Default = {
   args: {},
   parameters: { roomContext: { audio: true, video: true, connect: true } },

docs/storybook/stories/components/participant/AudioVisualizer.stories.tsx

@@ -1,17 +1,23 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { AudioVisualizer, AudioVisualizerProps } from '@livekit/components-react';
-import { LkParticipantContext, LkRoomContext } from '../../../.storybook/lk-decorators';
+import { LkLocalMicTrackContext, LkRoomContext } from '../../../.storybook/lk-decorators';
 
-export default {
+const Story: Meta<typeof AudioVisualizer> = {
   /*
    * This is some docs for connection quality
    */
   component: AudioVisualizer,
-  decorators: [LkParticipantContext, LkRoomContext],
+  decorators: [LkLocalMicTrackContext, LkRoomContext],
   render: (args: AudioVisualizerProps) => <AudioVisualizer {...args} />,
-  argTypes: {},
+  argTypes: {
+    barCount: {
+      name: 'Bar count',
+      control: { type: 'range', min: 1, max: 1024, step: 1 },
+      default: 32,
+    },
+  },
   parameters: {
     actions: {
       handles: [],
@@ -22,4 +28,9 @@ export default {
   },
 };
 
-export const Default: StoryObj<AudioVisualizerProps> = {};
+export default Story;
+
+export const Default: StoryObj<AudioVisualizerProps> = { args: { barCount: 1024 } };
+export const Abstract: StoryObj<AudioVisualizerProps> = {
+  args: { barCount: 6, gap: '0.5rem', barWidth: '0.5rem', borderRadius: '1rem' },
+};

docs/storybook/stories/components/participant/ConnectionQualityIndicator.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import {
   ConnectionQualityIndicator,
@@ -8,14 +8,15 @@ import {
 import { MockParticipantContext } from '../../../.storybook/lk-decorators';
 import { ConnectionQuality } from 'livekit-client';
 
-export default {
+const Story: Meta<typeof ConnectionQualityIndicator> = {
   /*
    * This is some docs for connection quality
    */
   component: ConnectionQualityIndicator,
   decorators: [MockParticipantContext],
   render: (args: ConnectionQualityIndicatorProps) => <ConnectionQualityIndicator {...args} />,
   argTypes: {
+    // @ts-ignore the arg will be used from within the MockParticipantContext
     connectionQuality: {
       control: { type: 'select' },
       options: [
@@ -37,4 +38,6 @@ export default {
   },
 };
 
+export default Story;
+
 export const Default: StoryObj<ConnectionQualityIndicatorProps> = {};

docs/storybook/stories/components/participant/ParticipantName.stories.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { StoryObj } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { ParticipantName, ParticipantNameProps } from '@livekit/components-react';
 import { LkParticipantContext, LkRoomContext } from '../../../.storybook/lk-decorators';
 
-export default {
+const Story: Meta<typeof ParticipantName> = {
   component: ParticipantName,
   decorators: [LkParticipantContext, LkRoomContext],
   render: (args: ParticipantNameProps) => <ParticipantName {...args}></ParticipantName>,
@@ -16,6 +16,8 @@ export default {
   },
 };
 
+export default Story;
+
 export const Default: StoryObj<ParticipantNameProps> = {
   args: {},
   parameters: { roomContext: { audio: false, video: false, connect: true } },