Basic structure

What are we building?

We are deconstructing the default setup screen.

At the end of this group of docs, we should have the following screen built using low level components.

Let's put a basic skeleton and the initial boilerplate code.

File: Meeting.tsx

import { RtkSetupScreen } from '@cloudflare/realtimekit-react-ui';
import type RtkClient from '@cloudflare/realtimekit';
import { useEffect, useState } from 'react';
import { CustomStates, SetState } from './types';
import CustomMeetingPreview from './CustomMeetingPreview';

function MyMeeting() {
  const { meeting } = useRealtimeKitMeeting();
  const roomState = useRealtimeKitSelector((m) => m.self.roomState);

  return (
    <RtkUIProvider meeting={meeting}>
      <div style={{ height: '480px' }}>
        {/* Our custom pre-call UI */}
        {roomState === 'init' && <CustomMeetingPreview />}

        {/* Essential components to play audio, show notifications etc */}>
        <RtkParticipantsAudio />
        <RtkNotifications />
        <RtkDialogManager />

        {/*

        For the sake of simplicty, the next couple of pages
          will only talk about CustomMeetingPreview

        {roomState === 'joined' && <CustomInMeetingUI />}
        {roomState === 'ended' && <CustomPostMeetingUI />)}

        */}
      </div>
    </RtkUIProvider>
  );
}

File: CustomMeetingPreview.tsx

LIVE EDITOR

import { useRealtimeKitMeeting } from "@cloudflare/realtimekit-react";
import { RtkButton } from "@cloudflare/realtimekit-react-ui";

export default function CustomMeetingPreview() {
const { meeting } = useRealtimeKitMeeting();
return (
    <div
      className="flex flex-col items-center justify-center w-full h-full bg-orange-400"
    >
      <div className="flex flex-col items-center">
        <p style={{ color: 'white' }}>Joining as {meeting.self.name}</p>
      </div>
      <RtkButton
        size="lg"
        onClick={async () => {
          // Call join() to enter the meeting
          await meeting.join();
        }}
      >
        Join
      </RtkButton>
    </div>
);
}