From 790d37569cdded924e0c0f8c0c6045733c989a30 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 28 Aug 2024 18:51:44 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20draft=20a=20Mic=20indicat?=
 =?UTF-8?q?or=20in=20participants=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First raw iteration.

Tried replicating Gmeet UX and layout. However, in their ux, even if
action button are disabled, some tooltips explain to the user why they
cannot perform the action. With the default Trigger, it's not easily
feasible. As soon as the button is disabled, there is no way to trigger
the tooltip in an uncontrolled manner.

In upcoming commits I'll arrange layout, and call the remote LiveKit
ServerApi, to perform the mute action.
---
 .../Participants/ParticipantListItem.tsx      | 59 ++++++++++++++++++-
 src/frontend/src/locales/de/rooms.json        |  3 +-
 src/frontend/src/locales/en/rooms.json        |  3 +-
 src/frontend/src/locales/fr/rooms.json        |  3 +-
 4 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
index ed90260b..c1eae397 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
@@ -5,8 +5,64 @@ import { Text } from '@/primitives/Text'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/components/Avatar'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
-import { Participant } from 'livekit-client'
+import { Participant, Track } from 'livekit-client'
 import { isLocal } from '@/utils/livekit'
+import { Button } from 'react-aria-components'
+import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
+import {
+  useIsSpeaking,
+  useTrackMutedIndicator,
+} from '@livekit/components-react'
+import Source = Track.Source
+import { RiMicOffLine } from '@remixicon/react'
+import { TooltipWrapper } from '@/primitives/TooltipWrapper.tsx'
+
+type MicIndicatorProps = {
+  participant: Participant
+}
+
+const MicIndicator = ({ participant }: MicIndicatorProps) => {
+  const { t } = useTranslation('rooms')
+  const { isMuted } = useTrackMutedIndicator({
+    participant: participant,
+    source: Source.Microphone,
+  })
+  const isSpeaking = useIsSpeaking(participant)
+  const isDisabled = isLocal(participant) || (!isLocal(participant) && isMuted)
+  return (
+    <TooltipWrapper
+      tooltip={t('participants.muteParticipant', {
+        name: participant.name || participant.identity,
+      })}
+      tooltipType="instant"
+    >
+      <Button
+        isDisabled={isDisabled}
+        className={css({
+          padding: '10px',
+          minWidth: '24px',
+          minHeight: '24px',
+          borderRadius: '50%',
+          backgroundColor: 'transparent',
+          transition: 'background 200ms',
+          '&[data-hovered]': {
+            backgroundColor: '#f5f5f5',
+          },
+          '&[data-focused]': {
+            backgroundColor: '#f5f5f5',
+          },
+        })}
+        onPress={() => !isMuted && console.log(`mute ${participant.identity}`)}
+      >
+        {isMuted ? (
+          <RiMicOffLine color="gray" />
+        ) : (
+          <ActiveSpeaker isSpeaking={isSpeaking} />
+        )}
+      </Button>
+    </TooltipWrapper>
+  )
+}
 
 type ParticipantListItemProps = {
   participant: Participant
@@ -58,6 +114,7 @@ export const ParticipantListItem = ({
           </span>
         )}
       </Text>
+      <MicIndicator participant={participant} />
     </HStack>
   )
 }
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index c811b9bc..9f0e8510 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -50,6 +50,7 @@
   "participants": {
     "heading": "",
     "closeButton": "",
-    "you": ""
+    "you": "",
+    "muteParticipant": ""
   }
 }
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index dd4964eb..68358a71 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -50,6 +50,7 @@
   "participants": {
     "heading": "Participants",
     "closeButton": "Hide participants",
-    "you": "You"
+    "you": "You",
+    "muteParticipant": "Close the mic of {{name}}"
   }
 }
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 7e8f63f4..aec0c7c5 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -50,6 +50,7 @@
   "participants": {
     "heading": "Participants",
     "closeButton": "Masquer les participants",
-    "you": "Vous"
+    "you": "Vous",
+    "muteParticipant": "Couper le micro de {{name}}"
   }
 }