From 634f1924bea05e2c714835a58af7bd28cf47c630 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 6 Sep 2024 14:53:21 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20enhance=20muted=20mic?=
 =?UTF-8?q?=20indicator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../livekit/components/MutedMicIndicator.tsx  | 26 ++++++
 .../livekit/components/ParticipantTile.tsx    | 83 +++++++++----------
 2 files changed, 66 insertions(+), 43 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx b/src/frontend/src/features/rooms/livekit/components/MutedMicIndicator.tsx
new file mode 100644
index 00000000..07e94e9a
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index aefa2e61..1c9f9b77 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/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
-                  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' }} />
-                      )}
-                      <TrackMutedIndicator
-                        trackRef={{
-                          participant: trackReference.participant,
-                          source: Track.Source.Microphone,
-                        }}
-                        show={'muted'}
-                      ></TrackMutedIndicator>
-                      <ParticipantName />
-                    </>
-                  ) : (
-                    <>
-                      <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
-                      <ParticipantName>&apos;s screen</ParticipantName>
-                    </>
-                  )}
-                </div>
+                <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>
             </>