2f11d69
import * as React from 'react';
import { ControlBar } from './ControlBar';
import { ParticipantAudioTile } from '../components/participant/ParticipantAudioTile';
import { LayoutContextProvider } from '../components/layout/LayoutContextProvider';
import type { WidgetState } from '@livekit/components-core';
import { Chat } from './Chat';
import { TrackLoop } from '../components';
import { useTracks } from '../hooks';
import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
import { Track } from 'livekit-client';
/** @public */
export interface AudioConferenceProps extends React.HTMLAttributes<HTMLDivElement> {}
/**
* 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.
*
* @remarks
* The component is implemented with other LiveKit components like `FocusContextProvider`,
* `GridLayout`, `ControlBar`, `FocusLayoutContainer` and `FocusLayout`.
*
* @example
* ```tsx
* <LiveKitRoom>
* <AudioConference />
* <LiveKitRoom>
* ```
* @public
*/
export function AudioConference({ ...props }: AudioConferenceProps) {
const [widgetState, setWidgetState] = React.useState<WidgetState>({
showChat: false,
unreadMessages: 0,
});
const audioTracks = useTracks([Track.Source.Microphone]);
useWarnAboutMissingStyles();
return (
<LayoutContextProvider onWidgetChange={setWidgetState}>
<div className="lk-audio-conference" {...props}>
<div className="lk-audio-conference-stage">
<TrackLoop tracks={audioTracks}>
<ParticipantAudioTile />
</TrackLoop>
</div>
<ControlBar
controls={{ microphone: true, screenShare: false, camera: false, chat: true }}
/>
{widgetState.showChat && <Chat />}
</div>
</LayoutContextProvider>
);
}