🚸(frontend) enhance muted mic indicator

Users' feedbacks. Design is inspired from Whereby, a webinars
product. I am not a huge fan of having the indicator on the
left of the participant's name. It causes a shift of the name
when the participant unmute herself.

This should be discussed with the UX designer.

src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx

@@ -0,0 +1,26 @@
+import { useTrackMutedIndicator } from '@livekit/components-react'
+import { Participant, Track } from 'livekit-client'
+import Source = Track.Source
+import { Div } from '@/primitives'
+import { RiMicOffFill } from '@remixicon/react'
+
+export const MutedMicIndicator = ({
+  participant,
+}: {
+  participant: Participant
+}) => {
+  const { isMuted } = useTrackMutedIndicator({
+    participant: participant,
+    source: Source.Microphone,
+  })
+
+  if (!isMuted) {
+    return null
+  }
+
+  return (
+    <Div padding={0.25} backgroundColor="red" borderRadius="4px">
+      <RiMicOffFill size={16} color="white" />
+    </Div>
+  )
+}

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -6,7 +6,6 @@ import {
   ParticipantName,
   ParticipantTileProps,
   ScreenShareIcon,
-  TrackMutedIndicator,
   useEnsureTrackRef,
   useFeatureContext,
   useIsEncrypted,
@@ -27,6 +26,8 @@ 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'
+import { HStack } from '@/styled-system/jsx'
+import { MutedMicIndicator } from '@/features/rooms/livekit/components/MutedMicIndicator'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -119,48 +120,44 @@ export const ParticipantTile: (
                 />
               </div>
               <div className="lk-participant-metadata">
-                <div
+                <HStack gap={0.25}>
-                  className="lk-participant-metadata-item"
+                  <MutedMicIndicator participant={trackReference.participant} />
-                  style={{
+                  <div
-                    minHeight: '24px',
+                    className="lk-participant-metadata-item"
-                    backgroundColor: isHandRaised ? 'white' : undefined,
+                    style={{
-                    color: isHandRaised ? 'black' : undefined,
+                      minHeight: '24px',
-                    transition: 'background 200ms ease, color 400ms ease',
+                      backgroundColor: isHandRaised ? 'white' : undefined,
-                  }}
+                      color: isHandRaised ? 'black' : undefined,
-                >
+                      transition: 'background 200ms ease, color 400ms ease',
-                  {trackReference.source === Track.Source.Camera ? (
+                    }}
-                    <>
+                  >
-                      {isHandRaised && (
+                    {trackReference.source === Track.Source.Camera ? (
-                        <RiHand
+                      <>
-                          color="black"
+                        {isHandRaised && (
-                          size={16}
+                          <RiHand
-                          style={{
+                            color="black"
-                            marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
+                            size={16}
-                            animationDuration: '300ms',
+                            style={{
-                            animationName: 'wave_hand',
+                              marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
-                            animationIterationCount: '2',
+                              animationDuration: '300ms',
-                          }}
+                              animationName: 'wave_hand',
-                        />
+                              animationIterationCount: '2',
-                      )}
+                            }}
-                      {isEncrypted && (
+                          />
-                        <LockLockedIcon style={{ marginRight: '0.25rem' }} />
+                        )}
-                      )}
+                        {isEncrypted && (
-                      <TrackMutedIndicator
+                          <LockLockedIcon style={{ marginRight: '0.25rem' }} />
-                        trackRef={{
+                        )}
-                          participant: trackReference.participant,
+                        <ParticipantName />
-                          source: Track.Source.Microphone,
+                      </>
-                        }}
+                    ) : (
-                        show={'muted'}
+                      <>
-                      ></TrackMutedIndicator>
+                        <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
-                      <ParticipantName />
+                        <ParticipantName>&apos;s screen</ParticipantName>
-                    </>
+                      </>
-                  ) : (
+                    )}
-                    <>
+                  </div>
-                      <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
+                </HStack>
-                      <ParticipantName>&apos;s screen</ParticipantName>
-                    </>
-                  )}
-                </div>
                 <ConnectionQualityIndicator className="lk-participant-metadata-item" />
               </div>
             </>