From 98ae9af84acbb3a124819c4fa03fc17cc16f9e98 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 22 Aug 2024 22:39:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20customize=20avatar's=20co?=
 =?UTF-8?q?lor=20to=20each=20participant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Default 'transparent' value avoid showing the avatar when
participant's info are not yet available. Might be a bad design
if we follow the single responsability pattern. Please feel free
to refactor it.
---
 src/frontend/src/components/Avatar.tsx                |  5 +++--
 .../livekit/components/ParticipantPlaceholder.tsx     |  5 +++--
 .../controls/Participants/ParticipantsList.tsx        |  4 +++-
 .../src/features/rooms/utils/getParticipantColor.ts   | 11 +++++++++++
 4 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/utils/getParticipantColor.ts

diff --git a/src/frontend/src/components/Avatar.tsx b/src/frontend/src/components/Avatar.tsx
index 326d1e62..6f0af42f 100644
--- a/src/frontend/src/components/Avatar.tsx
+++ b/src/frontend/src/components/Avatar.tsx
@@ -11,14 +11,14 @@ export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
 export const Avatar = ({
   name,
   size = 32,
-  bgColor = '#3498db',
+  bgColor,
   textColor = 'white',
 }: AvatarProps) => {
   const initial = name?.trim()?.charAt(0).toUpperCase() || ''
   return (
     <div
       className={css({
-        backgroundColor: bgColor,
+        backgroundColor: 'transparent',
         color: textColor,
         display: 'flex',
         borderRadius: '50%',
@@ -33,6 +33,7 @@ export const Avatar = ({
         width: `${size}px`,
         height: `${size}px`,
         fontSize: `${size * 0.4}px`,
+        backgroundColor: bgColor,
       }}
     >
       {initial}
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
index 8b64eed1..07f51301 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
@@ -2,6 +2,7 @@ import { Participant } from 'livekit-client'
 import { styled } from '@/styled-system/jsx'
 import { Avatar } from '@/components/Avatar'
 import { useIsSpeaking } from '@livekit/components-react'
+import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 
 const StyledParticipantPlaceHolder = styled('div', {
   base: {
@@ -22,7 +23,7 @@ export const ParticipantPlaceholder = ({
   participant,
 }: ParticipantPlaceholderProps) => {
   const isSpeaking = useIsSpeaking(participant)
-
+  const participantColor = getParticipantColor(participant)
   return (
     <StyledParticipantPlaceHolder>
       <div
@@ -31,7 +32,7 @@ export const ParticipantPlaceholder = ({
           animation: isSpeaking ? 'pulse 1s infinite' : undefined,
         }}
       >
-        <Avatar name={participant.name} />
+        <Avatar name={participant.name} bgColor={participantColor} />
       </div>
     </StyledParticipantPlaceHolder>
   )
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
index 541a02d5..0fe88848 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx
@@ -11,6 +11,7 @@ import { participantsStore } from '@/stores/participants'
 import { useTranslation } from 'react-i18next'
 import { allParticipantRoomEvents } from '@/features/rooms/livekit/constants/events'
 import { Avatar } from '@/components/Avatar'
+import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 
 // TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
 export const ParticipantsList = () => {
@@ -26,6 +27,7 @@ export const ParticipantsList = () => {
   const formattedParticipants = participants.map((participant) => ({
     name: participant.name || participant.identity,
     id: participant.identity,
+    color: getParticipantColor(participant),
   }))
 
   const sortedRemoteParticipants = formattedParticipants
@@ -94,7 +96,7 @@ export const ParticipantsList = () => {
                 padding: '0.25rem 0',
               })}
             >
-              <Avatar name={participant.name} />
+              <Avatar name={participant.name} bgColor={participant.color} />
               <Text
                 variant={'sm'}
                 className={css({
diff --git a/src/frontend/src/features/rooms/utils/getParticipantColor.ts b/src/frontend/src/features/rooms/utils/getParticipantColor.ts
new file mode 100644
index 00000000..f6c677d7
--- /dev/null
+++ b/src/frontend/src/features/rooms/utils/getParticipantColor.ts
@@ -0,0 +1,11 @@
+import { Participant } from 'livekit-client'
+
+export const getParticipantColor = (
+  participant: Participant
+): undefined | string => {
+  const { metadata } = participant
+  if (!metadata) {
+    return
+  }
+  return JSON.parse(metadata)['color']
+}