From e6e6a3bde7a26f6a7a3693471d568b7232920a8f Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 3 Sep 2024 14:16:21 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A9(frontend)=20indicate=20when=20a=20?=
 =?UTF-8?q?participant=20raises=20her=20hand?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../livekit/components/ParticipantTile.tsx    | 22 ++++++++++++++++++-
 1 file changed, 21 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 182bee68..8e968148 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -25,6 +25,8 @@ import {
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
 import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
+import { RiHand } from '@remixicon/react'
+import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -84,6 +86,10 @@ export const ParticipantTile: (
     [trackReference, layoutContext]
   )
 
+  const { isHandRaised } = useRaisedHand({
+    participant: trackReference.participant,
+  })
+
   return (
     <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
@@ -113,9 +119,23 @@ export const ParticipantTile: (
                 />
               </div>
               <div className="lk-participant-metadata">
-                <div className="lk-participant-metadata-item">
+                <div
+                  className="lk-participant-metadata-item"
+                  style={{
+                    minHeight: '24px',
+                  }}
+                >
                   {trackReference.source === Track.Source.Camera ? (
                     <>
+                      {isHandRaised && (
+                        <RiHand
+                          color="white"
+                          size={16}
+                          style={{
+                            marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
+                          }}
+                        />
+                      )}
                       {isEncrypted && (
                         <LockLockedIcon style={{ marginRight: '0.25rem' }} />
                       )}