♻️(frontend) extract raised hand logic in a reusable hook

Encapsulate code responsible for toggling hand,
and determining the hand state based on participant metadata.

This gonna be reused across the codebase.

src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx

@@ -2,25 +2,18 @@ import { useTranslation } from 'react-i18next'
 import { RiHand } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
-import {
+import { useLocalParticipant } from '@livekit/components-react'
-  useLocalParticipant,
+import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
-  useParticipantInfo,
-} from '@livekit/components-react'
 
 export const HandToggle = () => {
   const { t } = useTranslation('rooms')
 
   const localParticipant = useLocalParticipant().localParticipant
-  const { metadata } = useParticipantInfo({ participant: localParticipant })
+  const { isHandRaised, toggleRaisedHand } = useRaisedHand({
+    participant: localParticipant,
+  })
 
-  const parsedMetadata = JSON.parse(metadata || '{}')
+  const label = isHandRaised
-
-  const sendRaise = () => {
-    parsedMetadata.raised = !parsedMetadata.raised
-    localParticipant.setMetadata(JSON.stringify(parsedMetadata))
-  }
-
-  const label = parsedMetadata.raised
     ? t('controls.hand.lower')
     : t('controls.hand.raise')
 
@@ -36,8 +29,8 @@ export const HandToggle = () => {
         legacyStyle
         aria-label={label}
         tooltip={label}
-        isSelected={parsedMetadata.raised}
+        isSelected={isHandRaised}
-        onPress={() => sendRaise()}
+        onPress={() => toggleRaisedHand()}
       >
         <RiHand />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.tsx

@@ -0,0 +1,22 @@
+import { LocalParticipant, Participant } from 'livekit-client'
+import { useParticipantInfo } from '@livekit/components-react'
+import { isLocal } from '@/utils/livekit'
+
+type useRaisedHandProps = {
+  participant: Participant
+}
+
+export function useRaisedHand({ participant }: useRaisedHandProps) {
+  const { metadata } = useParticipantInfo({ participant })
+  const parsedMetadata = JSON.parse(metadata || '{}')
+
+  const toggleRaisedHand = () => {
+    if (isLocal(participant)) {
+      parsedMetadata.raised = !parsedMetadata.raised
+      const localParticipant = participant as LocalParticipant
+      localParticipant.setMetadata(JSON.stringify(parsedMetadata))
+    }
+  }
+
+  return { isHandRaised: parsedMetadata.raised, toggleRaisedHand }
+}