From a55a4d5b5d31b0e6bbf2b3e5f098a29ed0c7561c Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 9 Sep 2024 22:21:05 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20disable=20partic?=
 =?UTF-8?q?ipant's=20tile=20metadata?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inspired by the props disableSpeakingIndicator, used the same
logic for all metadata displayed on hover on a participant's tile.

Why? I'll need to render the joining participant tile without any
metadata, so the participant see who is joining the room.
---
 .../livekit/components/ParticipantTile.tsx    | 101 ++++++++++--------
 1 file changed, 56 insertions(+), 45 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index 1c9f9b77..076ea42f 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -44,19 +44,24 @@ export function TrackRefContextIfNeeded(
   )
 }
 
+interface ParticipantTileExtendedProps extends ParticipantTileProps {
+  disableMetadata?: boolean
+}
+
 export const ParticipantTile: (
-  props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>
+  props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
 ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
   HTMLDivElement,
-  ParticipantTileProps
+  ParticipantTileExtendedProps
 >(function ParticipantTile(
   {
     trackRef,
     children,
     onParticipantClick,
     disableSpeakingIndicator,
+    disableMetadata,
     ...htmlProps
-  }: ParticipantTileProps,
+  }: ParticipantTileExtendedProps,
   ref
 ) {
   const trackReference = useEnsureTrackRef(trackRef)
@@ -119,50 +124,56 @@ export const ParticipantTile: (
                   participant={trackReference.participant}
                 />
               </div>
-              <div className="lk-participant-metadata">
-                <HStack gap={0.25}>
-                  <MutedMicIndicator participant={trackReference.participant} />
-                  <div
-                    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 && (
-                          <RiHand
-                            color="black"
-                            size={16}
-                            style={{
-                              marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
-                              animationDuration: '300ms',
-                              animationName: 'wave_hand',
-                              animationIterationCount: '2',
-                            }}
-                          />
-                        )}
-                        {isEncrypted && (
-                          <LockLockedIcon style={{ marginRight: '0.25rem' }} />
-                        )}
-                        <ParticipantName />
-                      </>
-                    ) : (
-                      <>
-                        <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
-                        <ParticipantName>&apos;s screen</ParticipantName>
-                      </>
-                    )}
-                  </div>
-                </HStack>
-                <ConnectionQualityIndicator className="lk-participant-metadata-item" />
-              </div>
+              {!disableMetadata && (
+                <div className="lk-participant-metadata">
+                  <HStack gap={0.25}>
+                    <MutedMicIndicator
+                      participant={trackReference.participant}
+                    />
+                    <div
+                      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 && (
+                            <RiHand
+                              color="black"
+                              size={16}
+                              style={{
+                                marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
+                                animationDuration: '300ms',
+                                animationName: 'wave_hand',
+                                animationIterationCount: '2',
+                              }}
+                            />
+                          )}
+                          {isEncrypted && (
+                            <LockLockedIcon
+                              style={{ marginRight: '0.25rem' }}
+                            />
+                          )}
+                          <ParticipantName />
+                        </>
+                      ) : (
+                        <>
+                          <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
+                          <ParticipantName>&apos;s screen</ParticipantName>
+                        </>
+                      )}
+                    </div>
+                  </HStack>
+                  <ConnectionQualityIndicator className="lk-participant-metadata-item" />
+                </div>
+              )}
             </>
           )}
-          <FocusToggle trackRef={trackReference} />
+          {!disableMetadata && <FocusToggle trackRef={trackReference} />}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
     </div>