diff --git a/src/frontend/src/features/participants/components/ParticipantRow.tsx b/src/frontend/src/features/participants/components/ParticipantRow.tsx index a5ddd2a5..f3aee30a 100644 --- a/src/frontend/src/features/participants/components/ParticipantRow.tsx +++ b/src/frontend/src/features/participants/components/ParticipantRow.tsx @@ -5,7 +5,11 @@ import { Text } from '@/primitives/Text' import { useTranslation } from 'react-i18next' import { Avatar } from '@/components/Avatar' import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor' -import { getParticipantIsRoomOwner } from '@/features/rooms/utils/getParticipantIsRoomAdminOrOwner' +import { + getParticipantIsRoomAdmin, + getParticipantIsRoomOwner, + getParticipantIsRoomMember, +} from '@/features/rooms/utils/getParticipantIsRoomAdminOrOwner' import { type LocalParticipant, type Participant, Track } from 'livekit-client' import { isLocal } from '@/utils/livekit' import { @@ -149,6 +153,12 @@ export const ParticipantRow = ({ participant }: ParticipantListItemProps) => { {getParticipantIsRoomOwner(participant) && ( {t('participants.host')} )} + {getParticipantIsRoomAdmin(participant) && ( + {t('participants.cohost')} + )} + {getParticipantIsRoomMember(participant) && ( + {t('participants.member')} + )} diff --git a/src/frontend/src/features/participants/components/menu/ParticipantMenu.tsx b/src/frontend/src/features/participants/components/menu/ParticipantMenu.tsx index 2cc6397e..bdba8cbd 100644 --- a/src/frontend/src/features/participants/components/menu/ParticipantMenu.tsx +++ b/src/frontend/src/features/participants/components/menu/ParticipantMenu.tsx @@ -1,24 +1,46 @@ import { Menu as RACMenu } from 'react-aria-components' import type { Participant } from 'livekit-client' -import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner' import { PinMenuItem } from './items/PinMenuItem' import { RemoveMenuItem } from './items/RemoveMenuItem' +import { PromoteMenuItem } from './items/PromoteMenuItem' +import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner' +import { useParticipantAttributes } from '@livekit/components-react' export const ParticipantMenu = ({ participant, }: { participant: Participant }) => { - const isAdminOrOwner = useIsAdminOrOwner() - const canModerateParticipant = !participant.isLocal && isAdminOrOwner + const isLocalUserAdminOrOwner = useIsAdminOrOwner() + + const { attributes } = useParticipantAttributes({ participant }) + + const isAdmin = attributes?.room_role === 'administrator' + const isOwner = attributes?.room_role === 'owner' + const isAuthenticated = attributes?.is_authenticated == 'true' + + const canManage = !participant.isLocal && isLocalUserAdminOrOwner && !isOwner + return ( - {canModerateParticipant && } + {canManage && ( + + )} + {canManage && isAuthenticated && ( + + )} ) } diff --git a/src/frontend/src/features/participants/components/menu/ParticipantMenuButton.tsx b/src/frontend/src/features/participants/components/menu/ParticipantMenuButton.tsx index 900fd2a8..197b1244 100644 --- a/src/frontend/src/features/participants/components/menu/ParticipantMenuButton.tsx +++ b/src/frontend/src/features/participants/components/menu/ParticipantMenuButton.tsx @@ -1,7 +1,6 @@ import { Button, Menu } from '@/primitives' import { RiMore2Fill } from '@remixicon/react' import { ParticipantMenu } from './ParticipantMenu' -import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner' import type { Participant } from 'livekit-client' import { useTranslation } from 'react-i18next' @@ -11,8 +10,6 @@ export const ParticipantMenuButton = ({ participant: Participant }) => { const { t } = useTranslation('rooms', { keyPrefix: 'participants' }) - const isAdminOrOwner = useIsAdminOrOwner() - if (!isAdminOrOwner) return null return (