From 8d4de7d289677261ff6a8027803a96599918b15c Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 17 Jul 2026 18:27:14 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20gate=20LowerAllH?=
 =?UTF-8?q?andsButton=20with=20AdminOrOwnerOnly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../components/LowerAllHandsButton.tsx          | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/participants/components/LowerAllHandsButton.tsx b/src/frontend/src/features/participants/components/LowerAllHandsButton.tsx
index af9da045..434ecd1e 100644
--- a/src/frontend/src/features/participants/components/LowerAllHandsButton.tsx
+++ b/src/frontend/src/features/participants/components/LowerAllHandsButton.tsx
@@ -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>
+  )
+}