diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index 4e5947e2..dabe9203 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -22,7 +22,7 @@ import {
} from '@livekit/components-core'
import { Track } from 'livekit-client'
import { RiHand } from '@remixicon/react'
-import { useRaisedHand } from '../hooks/useRaisedHand'
+import { useRaisedHand, useRaisedHandPosition } from '../hooks/useRaisedHand'
import { HStack } from '@/styled-system/jsx'
import { MutedMicIndicator } from './MutedMicIndicator'
import { ParticipantPlaceholder } from './ParticipantPlaceholder'
@@ -97,6 +97,10 @@ export const ParticipantTile: (
participant: trackReference.participant,
})
+ const { positionInQueue, firstInQueue } = useRaisedHandPosition({
+ participant: trackReference.participant,
+ })
+
const isScreenShare = trackReference.source != Track.Source.Camera
return (
@@ -141,24 +145,32 @@ export const ParticipantTile: (
style={{
padding: '0.1rem 0.25rem',
backgroundColor:
- isHandRaised && !isScreenShare ? 'white' : undefined,
+ isHandRaised && !isScreenShare
+ ? firstInQueue
+ ? '#fde047'
+ : 'white'
+ : undefined,
color:
isHandRaised && !isScreenShare ? 'black' : undefined,
transition: 'background 200ms ease, color 400ms ease',
}}
>
{isHandRaised && !isScreenShare && (
-
+ <>
+ {positionInQueue}
+
+ >
)}
{isScreenShare && (
{
+ if (!isHandRaised) return
+
+ return (
+ participants
+ .filter((p) => !!p.attributes.handRaisedAt)
+ .sort((a, b) => {
+ const dateA = new Date(a.attributes.handRaisedAt)
+ const dateB = new Date(b.attributes.handRaisedAt)
+ return dateA.getTime() - dateB.getTime()
+ })
+ .findIndex((p) => p.identity === participant.identity) + 1
+ )
+ }, [participants, participant, isHandRaised])
+
+ return {
+ positionInQueue,
+ firstInQueue: positionInQueue == 1,
+ }
+}
+
export function useRaisedHand({ participant }: useRaisedHandProps) {
const handRaisedAtAttribute = useParticipantAttribute('handRaisedAt', {
participant,