DyteDialogManager

A component which handles all dialog elements in a component such as:

• dyte-settings
• dyte-leave-meeting
• dyte-permissions-message
• dyte-image-viewer
• dyte-remote-access-manager
• dyte-breakout-rooms-manager

This components depends on the values from states object.

Live Editor

function Example() { const [states, setStates] = useState({}); const setState = (s) => setStates((states) => ({ ...states, ...s })); return ( <Row> <DyteButton onClick={() => setState({ activeSettings: true })}> Show Settings </DyteButton> <DyteButton onClick={() => setState({ activeLeaveConfirmation: true })}> Show Leave Confirmation </DyteButton> <DyteButton onClick={() => setState({ activePermissionsMessage: { enabled: true, kind: 'audio' }, }) } > Show Permissions Troubleshooting UI </DyteButton> <DyteButton onClick={() => setState({ activeRemoteAccessManager: true })}> Show Remote Access Manager </DyteButton> <DyteDialogManager meeting={meeting} states={states} onDyteStateUpdate={(e) => setState(e.detail)} /> </Row> ); }

function Example() {
  const [states, setStates] = useState({});

  const setState = (s) => setStates((states) => ({ ...states, ...s }));

  return (
    <Row>
      <DyteButton onClick={() => setState({ activeSettings: true })}>
        Show Settings
      </DyteButton>
      <DyteButton onClick={() => setState({ activeLeaveConfirmation: true })}>
        Show Leave Confirmation
      </DyteButton>
      <DyteButton
        onClick={() =>
          setState({
            activePermissionsMessage: { enabled: true, kind: 'audio' },
          })
        }
      >
        Show Permissions Troubleshooting UI
      </DyteButton>
      <DyteButton onClick={() => setState({ activeRemoteAccessManager: true })}>
        Show Remote Access Manager
      </DyteButton>
      <DyteDialogManager
        meeting={meeting}
        states={states}
        onDyteStateUpdate={(e) => setState(e.detail)}
      />
    </Row>
  );
}

Preview

Show SettingsShow Leave ConfirmationShow Permissions Troubleshooting UIShow Remote Access Manager

Props

config

UI Config

Default

defaultConfig

Type

UIConfig

iconPack

Icon pack

Default

defaultIconPack

Type

IconPack

meeting

Meeting object

Type

DyteClient

size

Size

Type

"lg" | "md" | "sm" | "xl"

states

States object

Type

States

t

Language

Default

useLanguage()

Type

DyteI18n