From 4e175a83617c40b276338c639194dea5eb7306d6 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Fri, 6 Sep 2024 14:36:13 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20highlight=20raised=20h?= =?UTF-8?q?ands=20in=20participant's=20tile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Users's feedbacks. Raised hands in participants' tiles were not highlighted enough. It was discussed adding a colorful border around the participant's tile (idea inspired by Jitsi). Nonetheless, it conflicts with the current blue border, indicating when a participant is speaking. Until this blue border is present, it's not a great idea having a second border indicating a new level of informations. @sampacoud requested a yellow-ish/colorful indicator of when a participant raised her hand, inspired by Jitsi. However, I think yellow color should be reserved for warning or dangerous action. I chose to use a white background around the participant's name, to reinforce the visual indication a participant has her hand raised, while still being discreet. It's inspired by Gmeet. --- .../features/rooms/livekit/components/ParticipantTile.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx index 2db3aace..aefa2e61 100644 --- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx +++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx @@ -123,13 +123,16 @@ export const ParticipantTile: ( className="lk-participant-metadata-item" style={{ minHeight: '24px', + backgroundColor: isHandRaised ? 'white' : undefined, + color: isHandRaised ? 'black' : undefined, + transition: 'background 200ms ease, color 400ms ease', }} > {trackReference.source === Track.Source.Camera ? ( <> {isHandRaised && (