brave / brave-talk

Unlimited private video calls with your friends and colleagues
Mozilla Public License 2.0
121 stars 35 forks source link

Add a "Leo" button to the toolbar #1392

Closed mrose17 closed 1 week ago

mrose17 commented 6 months ago

Add a "Leo" button to the toolbar. It should appear only for premium moderators. The button has two states: "on" and "off", which reflects whether transcription is on/off. The button toggles the transcription status. Note that this should not observe/interfere with A/V recording.

When a user (other than the moderator) gets their first transcript chunk, if they are using the Brave browser, use the Jitsi notification UI to tell the user that they can use Leo to analyze the meeting.

@minkyeongshin to provide the icon for the Leo button (based on what the Jitsi API expects). @rmcfadden3 to provide exact wording on notification.

@bcaller - note that to detect the current state of recording, the site should listen for the recordingStatusChanged event.

rmcfadden3 commented 6 months ago

@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 commented 6 months ago

@rmcfadden3 - sorry for the confusion: at the present time, the design "ask" is only for an icon to go in the toolbar: Screenshot 2024-04-05 at 08 15 51 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 commented 6 months ago

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

bcaller commented 6 months ago

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 commented 6 months ago

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

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

mrose17 commented 6 months ago

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 commented 6 months ago

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

mrose17 commented 6 months ago

Thank you!

bcaller commented 6 months ago

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 commented 6 months ago

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

image

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 commented 6 months ago

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?

image

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 commented 6 months ago

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:

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

mrose17 commented 6 months ago

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

bcaller commented 6 months ago

Current state:

image

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

I was able to get the following:

image

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

saghul commented 6 months ago

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

mrose17 commented 6 months ago

@saghul - Understood. Thanks for working on it.

mrose17 commented 2 months ago

Fixed in https://github.com/brave/brave-talk/pull/1472

mattmcalister commented 2 weeks ago

Let's close this issue (I would do it, but I don't have permissions in this repo)