✨(frontend) customize avatar's color to each participant

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

@@ -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}

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>
   )

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({

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']
+}