From a85a62eb1a58a33665dc48cc5a56f46b1a67a1a9 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 27 Aug 2025 15:45:02 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F(frontend)=20hide=20admin?=
 =?UTF-8?q?=20actions=20from=20unprivileged=20users=20in=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update interface to hide admin-only actions like participant muting from
users without room admin privileges, reflecting backend permission
restrictions implemented in previous commits.
---
 .../components/ParticipantTileFocus.tsx       |  5 +++-
 .../Participants/HandRaisedListItem.tsx       | 24 +++++++++++--------
 .../Participants/LowerAllHandsButton.tsx      |  5 ++++
 .../Participants/ParticipantListItem.tsx      |  7 ++++--
 .../rooms/livekit/hooks/useCanMute.ts         |  7 ++++++
 5 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/hooks/useCanMute.ts

diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx
index 8a0cc16d..b7dc092f 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx
@@ -21,6 +21,7 @@ import { useFullScreen } from '../hooks/useFullScreen'
 import { Participant, Track } from 'livekit-client'
 import { MuteAlertDialog } from './MuteAlertDialog'
 import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
+import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 
 const ZoomButton = ({
   trackRef,
@@ -165,6 +166,8 @@ export const ParticipantTileFocus = ({
   const isScreenShare = trackRef.source == Track.Source.ScreenShare
   const isLocal = trackRef.participant.isLocal
 
+  const canMute = useCanMute(participant)
+
   return (
     <div
       className={css({
@@ -210,7 +213,7 @@ export const ParticipantTileFocus = ({
                 {participant.isLocal ? (
                   <EffectsButton />
                 ) : (
-                  <MuteButton participant={participant} />
+                  canMute && <MuteButton participant={participant} />
                 )}
               </>
             ) : (
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx
index e29503b2..4eafa150 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/HandRaisedListItem.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/components/Avatar'
 import { useLowerHandParticipant } from '@/features/rooms/api/lowerHandParticipant'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 import { Participant } from 'livekit-client'
 import { isLocal } from '@/utils/livekit'
 import { RiHand } from '@remixicon/react'
@@ -22,6 +23,7 @@ export const HandRaisedListItem = ({
   const name = participant.name || participant.identity
 
   const { lowerHandParticipant } = useLowerHandParticipant()
+  const isAdminOrOwner = useIsAdminOrOwner()
 
   return (
     <HStack
@@ -67,16 +69,18 @@ export const HandRaisedListItem = ({
           )}
         </Text>
       </HStack>
-      <Button
-        square
-        variant="greyscale"
-        size="sm"
-        onPress={() => lowerHandParticipant(participant)}
-        tooltip={t('participants.lowerParticipantHand', { name })}
-        data-attr="participants-lower-hand"
-      >
-        <RiHand />
-      </Button>
+      {isAdminOrOwner && (
+        <Button
+          square
+          variant="greyscale"
+          size="sm"
+          onPress={() => lowerHandParticipant(participant)}
+          tooltip={t('participants.lowerParticipantHand', { name })}
+          data-attr="participants-lower-hand"
+        >
+          <RiHand />
+        </Button>
+      )}
     </HStack>
   )
 }
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx
index 4f38ffb7..1ab05e4d 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx
@@ -2,6 +2,7 @@ import { Button } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { Participant } from 'livekit-client'
 import { useLowerHandParticipants } from '@/features/rooms/api/lowerHandParticipants'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
 
 type LowerAllHandsButtonProps = {
   participants: Array<Participant>
@@ -12,6 +13,10 @@ export const LowerAllHandsButton = ({
 }: LowerAllHandsButtonProps) => {
   const { lowerHandParticipants } = useLowerHandParticipants()
   const { t } = useTranslation('rooms')
+
+  const isAdminOrOwner = useIsAdminOrOwner()
+  if (!isAdminOrOwner) return null
+
   return (
     <Button
       aria-label={t('participants.lowerParticipantsHand')}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
index ba8344b7..9df116ce 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
@@ -18,6 +18,7 @@ import { Button } from '@/primitives'
 import { useState } from 'react'
 import { MuteAlertDialog } from '../../MuteAlertDialog'
 import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
+import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 
 type MicIndicatorProps = {
   participant: Participant
@@ -30,6 +31,8 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
     participant: participant,
     source: Source.Microphone,
   })
+
+  const canMute = useCanMute(participant)
   const isSpeaking = useIsSpeaking(participant)
   const [isAlertOpen, setIsAlertOpen] = useState(false)
   const name = participant.name || participant.identity
@@ -48,7 +51,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
         size="sm"
         tooltip={label}
         aria-label={label}
-        isDisabled={isMuted}
+        isDisabled={isMuted || !canMute}
         onPress={() =>
           !isMuted && isLocal(participant)
             ? muteParticipant(participant)
@@ -105,7 +108,7 @@ export const ParticipantListItem = ({
         <Avatar name={name} bgColor={getParticipantColor(participant)} />
         <VStack gap={0} alignItems="start">
           <Text
-            sm
+            variant="sm"
             className={css({
               userSelect: 'none',
               cursor: 'default',
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useCanMute.ts b/src/frontend/src/features/rooms/livekit/hooks/useCanMute.ts
new file mode 100644
index 00000000..38d8d3bc
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/hooks/useCanMute.ts
@@ -0,0 +1,7 @@
+import { useIsAdminOrOwner } from './useIsAdminOrOwner'
+import { Participant } from 'livekit-client'
+
+export const useCanMute = (participant: Participant) => {
+  const isAdminOrOwner = useIsAdminOrOwner()
+  return participant.isLocal || isAdminOrOwner
+}