️(frontend) gate LowerAllHandsButton with AdminOrOwnerOnly

Align LowerAllHandsButton with the MuteEveryoneButton pattern by
wrapping it with the AdminOrOwnerOnly component.

This prevents mounting its hooks and rendering its logic for users
who are not admin or owner, instead of relying on an internal check
that still ran on every re-render.
This commit is contained in:
lebaudantoine
2026-07-17 18:27:14 +02:00
parent a3afe02b04
commit 8d4de7d289
@@ -2,22 +2,21 @@ import { Button } from '@/primitives'
import { useTranslation } from 'react-i18next'
import type { Participant } from 'livekit-client'
import { useLowerHandParticipants } from '../api/lowerHandParticipants'
import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
import { css } from '@/styled-system/css'
import { RiHand } from '@remixicon/react'
import { AdminOrOwnerOnly } from '@/features/rooms/components/AdminOrOwnerOnly'
type LowerAllHandsButtonProps = {
participants: Array<Participant>
}
export const LowerAllHandsButton = ({
const LowerAllHandsButtonInner = ({
participants,
}: LowerAllHandsButtonProps) => {
const { lowerHandParticipants } = useLowerHandParticipants()
const { t } = useTranslation('rooms')
const isAdminOrOwner = useIsAdminOrOwner()
if (!isAdminOrOwner) return null
if (!participants.length) return null
return (
<Button
@@ -36,3 +35,13 @@ export const LowerAllHandsButton = ({
</Button>
)
}
export const LowerAllHandsButton = ({
participants,
}: LowerAllHandsButtonProps) => {
return (
<AdminOrOwnerOnly>
<LowerAllHandsButtonInner participants={participants} />
</AdminOrOwnerOnly>
)
}