From 29672cda6bab014b2b9d71afcb79c32de2e99cd7 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>
+  )
+}