Add custom sidebar

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

To create a sidebar of your own, you need 2 things.

1. A custom sidebar UI
2. An action button to trigger the UI

LIVE EDITOR

import { DyteStage, DyteGrid, DyteNotifications, DyteSidebar, DyteControlbar, DyteParticipantsAudio, DyteDialogManager, DyteControlbarButton, DyteSidebarUi, defaultIconPack, defaultConfig, generateConfig } from '@dytesdk/react-ui-kit';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
import { useEffect, useState } from 'react';

function SidebarWithCustomUI({
meeting, states, config, setStates,
}: { meeting: DyteClient, config: UIConfig, states: CustomStates, setStates: SetStates }
){
const [tabs, setTabs] = useState([
{ id: 'chat', name: 'chat' },
{ id: 'polls', name: 'polls' },
{ id: 'participants', name: 'participants' },
{ id: 'plugins', name: 'plugins' },
{ id: 'guidelines', name: 'Guidelines' }
]);
const [view, setView] = useState<DyteSidebarView>('sidebar');

  if(!states.activeSidebar || (!states.sidebar && !states.customSidebar)){
      return null;
  }

  const currentTab = states.sidebar || states.customSidebar;

  return (
  <DyteSidebarUi
      tabs={tabs}
      currentTab={currentTab}
      view={view}
      onTabChange={(e) => {
          setStates((oldState) => {
              return {
                  ...oldState,
                  activeSidebar: true,
                  customSidebar: e.detail,
                  sidebar: e.detail,
              }
          });
      }}
      className="w-80 "
      onSidebarClose={() => {
          setStates((oldState) => {
              return {
                  ...oldState,
                  activeSidebar: false,
                  sidebar: null,
                  customSidebar: null,
              }
          });
      }}>
      {currentTab === 'chat' && <DyteChat meeting={meeting} config={config} slot="chat" /> }
      {currentTab === 'polls' && <DytePolls meeting={meeting} config={config} slot="polls" /> }
      {currentTab === 'participants' && <DyteParticipants meeting={meeting} config={config} states={states} slot="participants" /> }
      {currentTab === 'plugins' && <DytePlugins meeting={meeting} config={config} slot="plugins" /> }
      {currentTab === 'guidelines' && <div slot="guidelines" className="flex justify-center items-center p-2">
          <div>
            <p>1. Ensure active participation and professionalism by muting your microphone when not speaking.</p>
            <br></br>
            <p>2. Utilize the chat feature for questions or comments during the meeting.</p>
          </div>
      </div> }
  </DyteSidebarUi>);

}

function MeetingStage({ meeting, config, states, setStates }: { meeting: DyteClient, config: UIConfig, states: CustomStates, setStates: SetStates}) {

return (

<div className="flex h-full w-full flex-col">
<DyteStage className="flex h-full w-full flex-1 p-2">
  <DyteGrid meeting={meeting} config={config} states={states} />
  <DyteNotifications meeting={meeting} config={config} states={states} />
  {states.activeSidebar && (
    <SidebarWithCustomUI
      meeting={meeting}
      config={config}
      states={states}
      setStates={setStates}
    />
  )}
</DyteStage>
<DyteParticipantsAudio meeting={meeting} />
<DyteDialogManager meeting={meeting} config={config} states={states} />
<div>
  <DyteControlbarButton
    onClick={() => {
        if(states.activeSidebar && !states.sidebar && states.customSidebar === 'guidelines'){
            setStates( (oldState) => { return { ...oldState, activeSidebar: false, sidebar: null, customSidebar: null }});    
        } else {
            setStates( (oldState) => { return { ...oldState, activeSidebar: true, sidebar: null, customSidebar: 'guidelines' }});
        }
    }}
    icon={defaultIconPack.add}
    label={'Open Custom SideBar'}
  />
</div>

</div>
); }

export default function Meeting() {
const { meeting } = useDyteMeeting();
const [config, setConfig] = useState(defaultConfig);
const [states, setStates] = useState<CustomStates>({
meeting: 'setup',
sidebar: 'chat'
});

useEffect(() => {
async function setupMeetingConfigs(){
const theme = meeting!.self.config;
const { config } = generateConfig(theme, meeting!);

    /**
     * Full screen by default requests dyte-meeting/DyteMeeting element to be in full screen.
     * Since DyteMeeting element is not here,
     *  we need to pass dyte-fullscreen-toggle, an targetElementId through config.
     */
    // setFullScreenToggleTargetElement({config, targetElementId: 'root'});

    setConfig({...config});

  /**
   * Add listeners on meeting & self to monitor leave meeting, join meeting and so on.
   * This work was earlier done by DyteMeeting component internally.
   */
    const stateListenersUtils = new DyteStateListenersUtils(() => meeting, () => states, () => setStates);
    stateListenersUtils.addDyteEventListeners();

    try{
      await meeting.join();
    } catch(e){
      // do nothing
    }
  }

  if(meeting){
  /**
   * During development phase, make sure to expose meeting object to window,
   * for debugging purposes.
   */
    Object.assign(window, {
      meeting,
    })
    setupMeetingConfigs();
  }

}, [meeting]);

return (

<div className="flex w-full h-full" ref={(el) => {
          el?.addEventListener('dyteStateUpdate', (e) => {
            const { detail: newStateUpdate } = e as unknown as { detail: CustomStates };
            console.log('dyteStateUpdateSetup:: ', newStateUpdate);
            setStates((oldState: CustomStates) => { return {
              ...oldState,
              ...newStateUpdate,
            }});
          });
        }}>
    <MeetingStage meeting={meeting} config={config} states={states} setStates={setStates} />
</div>
)

}

export class DyteStateListenersUtils{
  
  getStates: () => CustomStates;

  getStateSetter: () => (newState: CustomStates) => void;

  getMeeting: () => DyteClient;

  get states(){
      return this.getStates();
  }

  get setGlobalStates(){
      return this.getStateSetter();
  };

  get meeting(){
      return this.getMeeting();
  }

  constructor(getMeeting: () => DyteClient, getGlobalStates: () => CustomStates, getGlobalStateSetter: () => (newState: CustomStates) => void){
      this.getMeeting = getMeeting;
      this.getStates = getGlobalStates;
      this.getStateSetter = getGlobalStateSetter;
  }
  private updateStates(newState: CustomStates){
      this.setGlobalStates((oldState: CustomStates) => { return {
          ...oldState,
          ...newState,
      }});
      console.log(newState);
  }
  private roomJoinedListener = () => {
      this.updateStates({ meeting: 'joined' });
    };

    private socketServiceRoomJoinedListener = () => {
      if (this.meeting.stage.status === 'ON_STAGE' || this.meeting.stage.status === undefined) return;
      this.updateStates({ meeting: 'joined' });
    };

    private waitlistedListener = () => {
      this.updateStates({ meeting: 'waiting' });
    };

    private roomLeftListener = ({ state }: { state: RoomLeftState }) => {
      const states = this.states;
      if (states?.roomLeftState === 'disconnected') {
        this.updateStates({ meeting: 'ended', roomLeftState: state });
        return;
      }
      this.updateStates({ meeting: 'ended', roomLeftState: state });
    };

    private mediaPermissionUpdateListener = ({ kind, message }: {
      kind: PermissionSettings['kind'],
      message: string,
    }) => {
      if (['audio', 'video'].includes(kind!)) {
        if (message === 'ACCEPTED' || message === 'NOT_REQUESTED' || this.states.activeDebugger)
          return;
        const permissionModalSettings: PermissionSettings = {
          enabled: true,
          kind,
        };
        this.updateStates({ activePermissionsMessage: permissionModalSettings });
      }
    };

    private joinStateAcceptedListener = () => {
      this.updateStates({ activeJoinStage: true });
    };

    private handleChangingMeeting(destinationMeetingId: string) {
      this.updateStates({
          activeBreakoutRoomsManager: {
              ...this.states.activeBreakoutRoomsManager,
              active: this.states.activeBreakoutRoomsManager!.active,
              destinationMeetingId,
          }
      });
  }

  addDyteEventListeners(){
      if (this.meeting.meta.viewType === 'LIVESTREAM') {
          this.meeting.self.addListener('socketServiceRoomJoined', this.socketServiceRoomJoinedListener);
        }
        this.meeting.self.addListener('roomJoined', this.roomJoinedListener);

        this.meeting.self.addListener('waitlisted', this.waitlistedListener);
        this.meeting.self.addListener('roomLeft', this.roomLeftListener);
        this.meeting.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
        this.meeting.self.addListener('joinStageRequestAccepted', this.joinStateAcceptedListener);

        if (this.meeting.connectedMeetings.supportsConnectedMeetings) {
          this.meeting.connectedMeetings.once('changingMeeting', this.handleChangingMeeting);
        }

  }
  cleanupDyteEventListeners(){

  }

}

Let's say, we want to show some meeting guidelines to all the participants in a side bar. To do so, in the below code snippet, we have added guidelines sidebar section.

We have added a custom button to trigger the UI as well using DyteControlbarButton component.

<DyteControlbarButton
  onClick={() => {
    if (
      states.activeSidebar &&
      !states.sidebar &&
      states.customSidebar === 'guidelines'
    ) {
      setStates((oldState) => {
        return {
          ...oldState,
          activeSidebar: false,
          sidebar: null,
          customSidebar: null,
        };
      });
    } else {
      setStates((oldState) => {
        return {
          ...oldState,
          activeSidebar: true,
          sidebar: null,
          customSidebar: 'guidelines',
        };
      });
    }
  }}
  icon={defaultIconPack.add}
  label={'Open Custom SideBar'}
/>

For such a sidebar extension, we will have to update the types as well if in case you are using react with Typescript.

import type { States } from '@dytesdk/ui-kit';
import { DyteSidebarSection } from '@dytesdk/ui-kit/dist/types/components/dyte-sidebar/dyte-sidebar';

export type CustomSideBarTabs = DyteSidebarSection | 'guidelines';

export type CustomStates = States & {
  activeMediaPreviewModal?: boolean;
  customSidebar?: CustomSideBarTabs;
};

export type SetStates = React.Dispatch<React.SetStateAction<CustomStates>>;

Now that we know how we can add a custom sidebar, we can move on to customise the DyteStage component further.