States Based UI Split

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

Now that the basic states and configs handling is taken care of, we can focus on customisation.

states.meeting represents the meeting state such as setup/ended/waiting/joined that can be utilised to show different screens.

We are storing the states we received from previous step in a store and consuming it with the help of useStatesStore hook.

function CustomDyteMeeting() {
  const states = useStatesStore((s) => s.states);

  switch (states.meeting) {
    case 'idle':
      return <DyteIdleScreen />;
    case 'setup':
      return <SetupScreen />;
    case 'waiting':
      return <DyteWaitingScreen />;
    case 'ended':
      return <DyteEndedScreen />;
    case 'joined':
    default:
      return <InMeeting />;
  }
}

export default CustomDyteMeeting;