Homemade join #106
Open
Homemade join #106
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
we don't have any language selector dropdown button anymore, we select language in the settings
ditch the "PopoverList" component that was basically a poor Menu. Now dropdown buttons can be made with react aria Menu+MenuItems components via the Menu+MenuList components. The difference now is dropdown menus behave better with keyboard (they use up/down arrows instead of tabs), like selects. Popovers are there if we need to show any content in a big tooltip, not for actionable list items.
new ToggleButton component that wraps react aria ToggleButton. This will be used to toggle cam/mic on/off.
react aria has default strings for a few UI elements (like "select an item" on an empty select), make sure it uses currently defined language.
this will be used for toggled on/off mic and camera buttons. We want toggled-on buttons that don't look pressed as it looks a bit weird (we'll change icons on pressed/unpressed state). And we want red buttons for when the buttons are not pressed, so adding the "danger" variant too. the whole colorpalette stuff needs a bit of work to be clean but it'll do for now
it seems panda-css didn't like my way of sharing css code. When sharing bare objects matching panda-css interface, panda-css didn't understand those were styles and didn't parse them. Now using actual recipes via the `cva` helper, panda understands correctly those styles need to be updated on change. ps: cleaned a few panda imports that didn't use our "@" alias
this will help making sure dialog components are not called before being actually opened. Wrap inside a <DialogContainer> some component that uses hooks + renders a <Dialog>: this component will be rendered only when the dialog is opened, and its hooks will be called only on that moment too
- do not touch current Join screen as we might need it still for now - add a new HomemadeJoin, that is meant to be renamed simply "Join" when ready. It contains basically the same stuff as the livekit join but with homemade react aria buttons and a different layout. This will allow us to precisely customize how we want this screen later - store user device selections and name in a valtio store, synced with localstorage. This should end up in the same UX as before with livekit, but now we can store more things (like audio output) in the same place
new button to select audio output and pass it to the conference. this is in its own commit because we might not want to add this directly in the code: we can choose output in the join screen but not in the conference screen for now. this might be a bit misleading and better to not have it entirely for now?
|
I've merged the first commits of your work in a dedicated PR #113 |
Open
|
Related to this PR (donno if we address it here), a user suggested, for the first connection, to populate the username field with the Agent Connect First and Last name (if available), to avoid typing your name. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Purpose
Have a custom join screen, that doesn't use the livekit prefab, so that we can precisely render what we want and improve UX overall.
Proposal
This adds a
HomemadeJoincomponent, that theRoomcomponent now uses instead of the (not deleted)Joincomponent.Notable things:
State of this pull request
@lebaudantoine :
demojoin.mp4