From c5ce32ef792da1d59589378e1f03bda1ad02d192 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 5 Sep 2024 19:17:15 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20enhance=20mic=20indica?=
 =?UTF-8?q?tor=20in=20participant=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Gmeet-inspired indicator was misleading for users,
at least those not used to GSuite products.

They didn't understand how to mute a participant.

Plus, having the button disabled for the local participant,
was creating confusion. To simplify the UX, have all
the buttons enabled is simpler to understand.

Empirical observations with a few number of users, should be
enhance and challenge in the long run.
---
 src/frontend/panda.config.ts                  |  5 +++
 .../Participants/ParticipantListItem.tsx      | 37 +++++++++++++------
 src/frontend/src/locales/de/rooms.json        |  1 +
 src/frontend/src/locales/en/rooms.json        |  1 +
 src/frontend/src/locales/fr/rooms.json        |  1 +
 5 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index 73328cfc..1b8f9b27 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -81,6 +81,11 @@ const config: Config = {
         '80%': { transform: 'rotate(20deg)' },
         '100%': { transform: 'rotate(0)' },
       },
+      pulse_mic: {
+        '0%': { color: 'primary', opacity: '1' },
+        '50%': { color: 'primary', opacity: '0.8' },
+        '100%': { color: 'primary', opacity: '1' },
+      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.
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 9e2ceace..0d9471fa 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
@@ -13,7 +13,12 @@ import {
   useTrackMutedIndicator,
 } from '@livekit/components-react'
 import Source = Track.Source
-import { RiMicOffLine } from '@remixicon/react'
+import {
+  RiMicFill,
+  RiMicLine,
+  RiMicOffFill,
+  RiMicOffLine,
+} from '@remixicon/react'
 import { Button, Dialog, P } from '@/primitives'
 import { useState } from 'react'
 import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant'
@@ -57,10 +62,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
     source: Source.Microphone,
   })
   const isSpeaking = useIsSpeaking(participant)
-  const isDisabled = isLocal(participant) || (!isLocal(participant) && isMuted)
-
   const [isAlertOpen, setIsAlertOpen] = useState(false)
-
   const name = participant.name || participant.identity
 
   return (
@@ -69,16 +71,28 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
         square
         invisible
         size="sm"
-        tooltip={t('participants.muteParticipant', {
-          name,
-        })}
-        isDisabled={isDisabled}
-        onPress={() => !isMuted && setIsAlertOpen(true)}
+        tooltip={
+          isLocal(participant)
+            ? t('participants.muteYourself')
+            : t('participants.muteParticipant', {
+                name,
+              })
+        }
+        isDisabled={isMuted}
+        onPress={() =>
+          !isMuted && isLocal(participant)
+            ? muteParticipant(participant)
+            : setIsAlertOpen(true)
+        }
       >
         {isMuted ? (
-          <RiMicOffLine color="gray" />
+          <RiMicOffFill color={'gray'} />
         ) : (
-          <ActiveSpeaker isSpeaking={isSpeaking} />
+          <RiMicFill
+            style={{
+              animation: isSpeaking ? 'pulse_mic 800ms infinite' : undefined,
+            }}
+          />
         )}
       </Button>
       <MuteAlertDialog
@@ -102,7 +116,6 @@ export const ParticipantListItem = ({
 }: ParticipantListItemProps) => {
   const { t } = useTranslation('rooms')
   const name = participant.name || participant.identity
-
   return (
     <HStack
       role="listitem"
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index f9d85d01..7adab588 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -61,6 +61,7 @@
       "close": ""
     },
     "you": "",
+    "muteYourself": "",
     "muteParticipant": "",
     "muteParticipantAlert": {
       "description": "",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 633a3baf..c0ed83ee 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -61,6 +61,7 @@
       "open": "Open {{name}} list",
       "close": "Close {{name}} list"
     },
+    "muteYourself": "Close your mic",
     "muteParticipant": "Close the mic of {{name}}",
     "muteParticipantAlert": {
       "description": "Mute {{name}} for all participants? {{name}} is the only person who can unmute themselves.",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 29008235..36123aeb 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -61,6 +61,7 @@
       "open": "Ouvrir la liste {{name}}",
       "close": "Fermer la liste {{name}}"
     },
+    "muteYourself": "Couper votre micro",
     "muteParticipant": "Couper le micro de {{name}}",
     "muteParticipantAlert": {
       "description": "Couper le micro de {{name}} pour tous les participants ? {{name}} est la seule personne habilitée à réactiver son micro",