Customize Header

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

Dyte's default header component DyteHeader can be used as the following.

<DyteHeader meeting={meeting} />

Following code shows how you can customise the DyteHeader 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]">
        <DyteLogo />
        <DyteRecordingIndicator />
        <DyteLivestreamIndicator />
      </div>
      <div id="header-center" className="flex items-center h-[48px]">
        <DyteMeetingTitle />
      </div>
      <div id="header-right" className="flex items-center h-[48px]">
        <DyteGridPagination />
        <DyteParticipantCount />
        <DyteViewerCount />
        <DyteClock />
      </div>
    </div>
  );
}

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

if user's preset has a logo, that logo will be shown using DyteLogo 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.