buttonsWithNotifyClick and need button toggled ui

Developers Jitsi Meet API
1

I am trying to prevent default behavior of chat button by using buttonsWithNotifyClick, and i was able to done that. But now i want to change the button UI as toggled when it pressed, can i achieve that without appearing the chat,

Only thin i need, when user press toolbar chat icon, it appears my custom chat and button need to show as toggled and tooltip need to change as per that

2

Ping @horymury

3

You can do the following:

  1. Hide the jitsi default chat button by passing the toolbarButtons on the configOverwrite, without passing the ‘chat’ key:
    jitsi-meet/config.js at f76122f0b005610b5b0a2118e52c1f7d7259b6a5 · jitsi/jitsi-meet · GitHub
  2. Inject your own custom button for chat also through the configOverwrite:
    Configuration | Jitsi Meet
    jitsi-meet/config.js at f76122f0b005610b5b0a2118e52c1f7d7259b6a5 · jitsi/jitsi-meet · GitHub
  • initially set a suggesstive ‘toggled off’ icon for the custom button
  • give it a suggestive id, eg ‘custom-chat-button’
  1. Add the toolbarButtonClicked event handler
    Events | Jitsi Meet
    and use the overwriteConfig command to update your custom button
    Commands | Jitsi Meet 
   api.on('toolbarButtonClicked', ({ key }) => {
      // if the toolbar button clicked is our custom button, do stuff
      if (key === 'custom-chat-button') {
        // we toggle our own chat
        <toggle my custom chat here>

        // we overwrite the icon and update the text for our custom chat button
        api.executeCommand('overwriteConfig',
            {
              customToolbarButtons:[
                  {
                      icon: myCustomChatOpened ? <myToggledOnIcon>: <myToggledOffIcon>,  // we set the correct icon based on toggled state
                      id: 'custom-chat-button',
                      text: myCustomChatOpened  ? 'Close chat' : 'Open chat'
                  }
              ]
            }
        );
      }
   })

Haven’t tested this myself, but it should work. If you have any issues, please ping me.

2 Likes
4

How can I take that custom button into my toolbar main buttons

5

What type icons that we can feed

6
  • By main buttons you mean the ones always visible and not on the popup buttons? We don’t support configuring that yet unfortunately.
  • the supported icon types are mentioned on the jitsi documentation:
    Configuration | Jitsi Meet
1 Like
7

Can’t we change the status of the default chat button to toggled without opening jitsi chat

8

The default chat button’s toggle is linked to the redux store’s chat open prop and at the moment there is no way to overwrite it.