From 9b9e6578ee86b9f07c53654b2edace874e42bcfb Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 9 Jul 2026 11:07:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20participant=20color?=
 =?UTF-8?q?=20gradient=20when=20camera=20is=20off?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

use participant color radial gradient for video-off placeholder
---
 CHANGELOG.md                                       |  1 +
 .../livekit/components/ParticipantPlaceholder.tsx  | 14 ++++++++++++--
 .../utils/getParticipantBackgroundGradient.ts      | 12 ++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac67ced1..8722bdad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to
 ### Added
 
 - ✨(backend) allow searching the recording admin table by owner email
+- ✨(frontend) add participant color gradient when camera is off #1490
 
 ### Changed
 
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
index 13947f58..8338aa9a 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 type { Participant } from 'livekit-client'
 import { styled } from '@/styled-system/jsx'
 import { Avatar } from '@/components/Avatar'
 import { useIsSpeaking } from '@livekit/components-react'
+import { getParticipantBackgroundGradient } from '@/features/rooms/utils/getParticipantBackgroundGradient'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { useMemo, useRef } from 'react'
@@ -10,7 +11,6 @@ const StyledParticipantPlaceHolder = styled('div', {
   base: {
     width: '100%',
     height: '100%',
-    backgroundColor: 'primaryDark.100',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -26,6 +26,10 @@ export const ParticipantPlaceholder = ({
 }: ParticipantPlaceholderProps) => {
   const isSpeaking = useIsSpeaking(participant)
   const participantColor = getParticipantColor(participant)
+  const backgroundGradient = useMemo(
+    () => getParticipantBackgroundGradient(participantColor),
+    [participantColor]
+  )
 
   const placeholderEl = useRef<HTMLDivElement>(null)
   const { width, height } = useSize(placeholderEl)
@@ -39,7 +43,13 @@ export const ParticipantPlaceholder = ({
   const initialSize = useMemo(() => Math.round(avatarSize * 0.3), [avatarSize])
 
   return (
-    <StyledParticipantPlaceHolder ref={placeholderEl}>
+    <StyledParticipantPlaceHolder
+      ref={placeholderEl}
+      style={{
+        backgroundColor: participantColor,
+        backgroundImage: backgroundGradient,
+      }}
+    >
       <div
         style={{
           borderRadius: '50%',
diff --git a/src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts b/src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts
new file mode 100644
index 00000000..b2cfe7ef
--- /dev/null
+++ b/src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts
@@ -0,0 +1,12 @@
+/**
+ * Builds a radial gradient from the participant's avatar color:
+ * brighter in the center (where the avatar sits), darker at the edges.
+ * Mixed in oklch so the color stays vivid as it darkens instead of greying out.
+ */
+export const getParticipantBackgroundGradient = (color: string): string =>
+  `radial-gradient(circle at 50% 45%,
+    color-mix(in oklch, ${color} 82%, white) 0%,
+    color-mix(in oklch, ${color} 90%, white) 8%,
+    ${color} 35%,
+    color-mix(in oklch, ${color} 85%, black) 65%,
+    color-mix(in oklch, ${color} 65%, black) 100%)`