88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import {
|
|
GridLayout,
|
|
useTracks,
|
|
Chat,
|
|
CarouselLayout,
|
|
usePinnedTracks,
|
|
useLayoutContext,
|
|
} from '@livekit/components-react';
|
|
import { Track } from 'livekit-client';
|
|
import { CustomControlBar } from '@/app/custom/CustomControlBar';
|
|
import ParticipantList from '@/app/custom/ParticipantList';
|
|
import { ParticipantTile } from '@/lib/ParticipantTile';
|
|
import { SettingsMenu } from '@/lib/SettingsMenu';
|
|
import { useCustomLayoutContext } from '@/app/contexts/layout-context';
|
|
import '@/styles/Chat.css';
|
|
import { FocusLayout, FocusLayoutContainer } from './FocusLayout';
|
|
|
|
export const CustomVideoLayout: React.FC = () => {
|
|
const { isChatOpen, isParticipantsListOpen } = useCustomLayoutContext();
|
|
const layoutContext = useLayoutContext();
|
|
|
|
const tracks = useTracks(
|
|
[
|
|
{ source: Track.Source.Camera, withPlaceholder: true },
|
|
{ source: Track.Source.ScreenShare, withPlaceholder: false },
|
|
],
|
|
{ onlySubscribed: false },
|
|
);
|
|
|
|
const focusTrack = usePinnedTracks()[0];
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
height: '100vh',
|
|
width: '100vw',
|
|
position: 'relative',
|
|
backgroundColor: '#070707',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
flex: 1,
|
|
minHeight: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
<div style={{ flex: 1, minHeight: 0 }}>
|
|
{!focusTrack ? (
|
|
<GridLayout
|
|
tracks={tracks}
|
|
style={{
|
|
width: '100%',
|
|
padding: '1rem 1rem 0.5rem 1rem',
|
|
}}
|
|
>
|
|
<ParticipantTile />
|
|
</GridLayout>
|
|
) : (
|
|
<FocusLayoutContainer
|
|
style={{
|
|
width: '100%',
|
|
height: '93%',
|
|
padding: '1rem 1rem 0.5rem 1rem',
|
|
}}
|
|
>
|
|
<CarouselLayout tracks={tracks}>
|
|
<ParticipantTile />
|
|
</CarouselLayout>
|
|
{focusTrack && <FocusLayout style={{ width: '100%' }} trackRef={focusTrack} />}{' '}
|
|
</FocusLayoutContainer>
|
|
)}
|
|
<CustomControlBar />
|
|
</div>
|
|
</div>
|
|
{isParticipantsListOpen.state && <ParticipantList />}
|
|
{isChatOpen.state && <Chat />}
|
|
<SettingsMenu showSettings={layoutContext.widget.state?.showSettings || false} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CustomVideoLayout;
|