Add a "Leo" button to the toolbar

[mrose17]

Add a "Leo" button to the toolbar

[rmcfadden3]

@minkyeongshin — can you drop a screenshot of your design mock once it's ready? That way I'll know how much real estate I have to work with, in terms of character count.

[mrose17]

@rmcfadden3 - sorry for the confusion: at the present time, the design "ask" is only for an icon to go in the toolbar:

initially, we're planning to use the Jitsi showNotification API call. so you can have a "reasonable" amount of text (say up to 300 characters).

in the future we may implement our own notification routine, but for now, we're focusing on the functionality... thanks!

[bcaller]

Is this actually possible with the JAAS API? https://developer.8x8.com/jaas/docs/customize-ui-buttons links to list of button names

[bcaller]

Well we can brand the default icons as described at https://developer.8x8.com/jaas/docs/jaas-prefs-advanced-branding#branding-data-payload - but are we able to create a new icon or do we have to be sneaky and misuse an existing icon?

[saghul]

https://github.com/jitsi/jitsi-meet/blob/a76f9d548b2cfceaf335250867b88a41667107e0/config.js#L949

You can use a data URL or any URL to an icon.

[mrose17]

Thanks. Please remind me: what handler triggers when a button is pressed (presumably indexed by id)... sorry for not knowing this stuff better by now...

[saghul]

Here you go! https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe-events#toolbarbuttonclicked

[mrose17]

Thank you!

[bcaller]

I see, I was looking at the wrong documentation (developer.8x8.com rather than jitsi.github.io) and there is in fact a customToolbarButtons config option.

[bcaller]

OK I managed to add Leo to customToolbarButtons and buttonsWithNotifyClick and added an event handler.

But the button only appears in the toolbar menu rather than the main toolbar. I'm not yet sure how to customise which buttons appear at the bottom of the screen.

[bcaller]

OK, I think some config can be done via executeCommand('overwriteConfig',{toolbarButtons: [. But where do we specify the initial order of microphone, camera, desktop, chat, raisehand... is that just the default?

https://github.com/jitsi/jitsi-meet/blob/a76f9d548b2cfceaf335250867b88a41667107e0/config.js#L787-L789

// Notes:
// - it's impossible to choose which buttons go in the "More actions" menu
// - it's impossible to control the placement of buttons

[bcaller]

Ah OK the order is defined here: https://github.com/jitsi/jitsi-meet/blob/b54cec8d77fee77218378532bfac665e75289f90/react/features/toolbox/functions.web.ts#L410-L442

So the Leo icon will always be at the end of the "More Actions" menu and we can't move it without either:

• removing a lot of buttons like in the screenshot above
• or replacing a load of inbuilt buttons with custom versions. This wouldn't work for the raisehand or reactions, but we could place the Leo button at the end of the main toolbar.

Overall, probably worth just starting with it at the end of the More Actions menu.

[mrose17]

Just to clarify, the button should appear for context.user.moderator === true && context.features.transcription === true

[bcaller]

Current state:

I don't believe there is currently a way to move the button onto the main bar.

I was able to get the following:

Only by deleting all the toolbar buttons which appear in More Actions. Since we need those buttons, we have a problem.

[saghul]

Sorry I mislead you. I can confirm this is not currenrly possible. We'll work on making it possible.

[mrose17]

@saghul - Understood. Thanks for working on it.