Customize Header

Source Code: https://github.com/dyte-io/react-samples/tree/main/samples/create-your-own-ui

RealtimeKit's default header component RtkHeader can be used as the following.

<RtkHeader meeting={meeting} />

Following code shows how you can customise the RtkHeader or build it from scratch as per your use case.

function HeaderWithCustomUI() {
  return (
    <div className="flex justify-between bg-black text-white">
      <div id="header-left" className="flex items-center h-[48px]">
        <RtkLogo />
        <RtkRecordingIndicator />
        <RtkLivestreamIndicator />
      </div>
      <div id="header-center" className="flex items-center h-[48px]">
        <RtkMeetingTitle />
      </div>
      <div id="header-right" className="flex items-center h-[48px]">
        <RtkGridPagination />
        <RtkParticipantCount />
        <RtkViewerCount />
        <RtkClock />
      </div>
    </div>
  );
}

Please note that the RtkRecordingIndicator will be shown only when recording is in-progress. Similarly RtkLivestreamIndicator only shows "Live" indicator if the preset is a livestream preset.

if user's preset has a logo, that logo will be shown using RtkLogo component.

Now that we know how we can build a custom header, let's move on to discuss how we can build a custom footer otherwise knows as control bar.