From c16c27fa502dfa2ad0cfb20a78f702719123644b Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 22 Aug 2024 22:10:27 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20a=20pulsing=20effec?=
 =?UTF-8?q?t=20when=20a=20participant=20is=20speaking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inspired by Gmeet animation (mine is far from perfect).

Some details should be improved, especially to have a smooth
animation stop when the user stops speaking.
---
 src/frontend/panda.config.ts                         |  5 +++++
 .../livekit/components/ParticipantPlaceholder.tsx    | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index 0e285059..99a4d1e8 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -58,6 +58,11 @@ const config: Config = {
         },
       },
       fade: { from: { opacity: 0 }, to: { opacity: 1 } },
+      pulse: {
+        '0%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0.7)' },
+        '75%': { boxShadow: '0 0 0 30px rgba(255, 255, 255, 0)' },
+        '100%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0)' },
+      },
     },
     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/ParticipantPlaceholder.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
index 3b3aaa1a..8b64eed1 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx
@@ -1,6 +1,7 @@
 import { Participant } from 'livekit-client'
 import { styled } from '@/styled-system/jsx'
 import { Avatar } from '@/components/Avatar'
+import { useIsSpeaking } from '@livekit/components-react'
 
 const StyledParticipantPlaceHolder = styled('div', {
   base: {
@@ -20,9 +21,18 @@ type ParticipantPlaceholderProps = {
 export const ParticipantPlaceholder = ({
   participant,
 }: ParticipantPlaceholderProps) => {
+  const isSpeaking = useIsSpeaking(participant)
+
   return (
     <StyledParticipantPlaceHolder>
-      <Avatar name={participant.name} />
+      <div
+        style={{
+          borderRadius: '50%',
+          animation: isSpeaking ? 'pulse 1s infinite' : undefined,
+        }}
+      >
+        <Avatar name={participant.name} />
+      </div>
     </StyledParticipantPlaceHolder>
   )
 }