DyteMeeting

Dyte provides, DyteMeeting an all encompassing component that internally handles everything from showing a pre-call UI to in-call UI and post-call screen.

<DyteMeeting meeting={meeting} showSetupScreen={true} />

This component contains pre-call, in-call UI as well post-call UIs.

Following code shows a basic split of these UIs from the DyteMeeting component.

LIVE EDITOR

import { DyteSetupScreen, DyteEndedScreen, DyteHeader, DyteParticipantsAudio, DyteDialogManager, DyteStage, DyteGrid, DyteNotifications, DyteSidebar, DyteControlbar } from '@dytesdk/react-ui-kit';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
import { useEffect } from 'react';

export default function MyMeeting() {
  const { meeting } = useDyteMeeting();
  const roomState = useDyteSelector((m) => m.self.roomState);

return (

<div className="flex h-full w-full">
  {roomState === 'init' && <DyteSetupScreen meeting={meeting} />}
  {roomState === 'joined' && (
      <div className="flex flex-col w-full h-full">
        <header>
          <DyteHeader meeting={meeting}/>
        </header>

        <main className='flex w-full flex-1 justify-center items-center' style={{
          backgroundColor: '#272727',
          color: '#ffffff',
        }}>
          <span>Custom in-call UI</span>
          <DyteDialogManager meeting={meeting}/>
        </main>

        <footer className='flex w-full overflow-visible'>
          <DyteControlbar meeting={meeting}/>
        </footer>
      </div>

)}
{roomState === 'ended' && (<DyteEndedScreen meeting={meeting}/>)}

</div>
); }

Since DyteMeeting is a complex component and provides a lot more than just the UI, let's go to the next page and start splitting it to uncover what it does.