Raise hand V1 #146
Merged
Raise hand V1 #146
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
lebaudantoine
force-pushed
the
raise-hand
branch
from
79cf040 to
12656a8
Compare
Inspired by Magnify. Rely on participant metadata to determine, if the local user has raised its hand. There is a todo item in LiveKit code, useLocalParticipant is not subscribed to metadata updates events. The contrast of the toggled button in legacy Style is poor, it needs to be urgently improved. User can barely distinguish if their hands are raised.
Why? This layout is extensible. This menu will have two sections, to separate in-room participants from the waiting room ones. It's copied from Gmeet User Experience. In-room participants will be divided in sub-lists based on their states (ex: hand raised, …). This User Experience is extensible if in the future with support subroom in a room or whatever.
Will need it for lower hand action. Actually, this piece of code should be enhanced. It'll act as a corner stone of all actions dispatched in the interface. I'll continue refactoring it later on.
Show the raised hand waiting list, allow any participant to lower other participants' hands. Inspired from Gmeet. I found it quite clear to have a dedicated waiting list for raised hands.
Inspired from Gmeet. Add a button to lower all hands at once. It should be quite useful for room moderator/admin. The UX might feel strange, having this action button at the top of the list, but I could not figure out a better layout. In terms of UX I feel this is the best we can provide. However, the UI should definitely be improved.
Responsiveness issue. Fixed it, to allow user scrolling the participants list.
Encapsulate code responsible for toggling hand, and determining the hand state based on participant metadata. This gonna be reused across the codebase.
Height was varying when muting/unmuting the mic, so I added a minimum height to avoid layout shift. Proof of concept for the future UX: a raised hand would be placed on the left side of the participant's name. Having the mic indicator and raised hand side by side is temporary and totally undesired (it feels super weird). I'll refactor the whole UX of the participant tile in a dedicated PR.
Copied legacy style from the screen share control. Still imperfect, but at least it's visually more "comfy".
Minor enhancement, add some CSS animation to wave a newly raised hand. Inspired by GMeet.
lebaudantoine
force-pushed
the
raise-hand
branch
from
f4df1af to
a4df83c
Compare
|
I've suggested enhancements for the V2 #147 |
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
Allow users to raise their hands.
Proposal
It closes #122
A new toggle has been added to the control bar:
Enregistrement.de.l.ecran.2024-09-03.a.15.11.33.mov
When a participant raised her hand, a new indicator appears on the left-side of its name:
Enregistrement.de.l.ecran.2024-09-03.a.15.06.54.mov
Also, inspired by Gmeet, a waiting room has been added to the participant menu:
Enregistrement.de.l.ecran.2024-09-03.a.15.09.51.mov