♻️(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 {
-  useLocalParticipant,
-  useParticipantInfo,
-} from '@livekit/components-react'
+import { useLocalParticipant } from '@livekit/components-react'
+import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
 
 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 sendRaise = () => {
-    parsedMetadata.raised = !parsedMetadata.raised
-    localParticipant.setMetadata(JSON.stringify(parsedMetadata))
-  }
-
-  const label = parsedMetadata.raised
+  const label = isHandRaised
     ? t('controls.hand.lower')
     : t('controls.hand.raise')
 
@@ -36,8 +29,8 @@ export const HandToggle = () => {
         legacyStyle
         aria-label={label}
         tooltip={label}
-        isSelected={parsedMetadata.raised}
-        onPress={() => sendRaise()}
+        isSelected={isHandRaised}
+        onPress={() => toggleRaisedHand()}
       >
         <RiHand />
       </ToggleButton>