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 ( - +
+ +
) }