From 20464a2845ad4204eb0bc8da67782adecafe2dbb Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 2 Sep 2024 15:12:18 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20introduce=20raise=20hand?=
 =?UTF-8?q?=20control?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inspired by Magnify. Rely on participant metadata to determine,
if the local user has raised its hand.

There is a todo item in LiveKit code, useLocalParticipant is not
subscribed to metadata updates events.

The contrast of the toggled button in legacy Style is poor,
it needs to be urgently improved. User can barely distinguish if
their hands are raised.
---
 .../components/controls/HandToggle.tsx        | 46 +++++++++++++++++++
 .../rooms/livekit/prefabs/ControlBar.tsx      |  2 +
 src/frontend/src/locales/de/rooms.json        |  4 ++
 src/frontend/src/locales/en/rooms.json        |  4 ++
 src/frontend/src/locales/fr/rooms.json        |  4 ++
 5 files changed, 60 insertions(+)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx
new file mode 100644
index 00000000..92bd3cb5
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx
@@ -0,0 +1,46 @@
+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'
+
+export const HandToggle = () => {
+  const { t } = useTranslation('rooms')
+
+  const localParticipant = useLocalParticipant().localParticipant
+  const { metadata } = useParticipantInfo({ participant: localParticipant })
+
+  const parsedMetadata = JSON.parse(metadata || '{}')
+
+  const sendRaise = () => {
+    parsedMetadata.raised = !parsedMetadata.raised
+    localParticipant.setMetadata(JSON.stringify(parsedMetadata))
+  }
+
+  const label = parsedMetadata.raised
+    ? t('controls.hand.lower')
+    : t('controls.hand.raise')
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <ToggleButton
+        square
+        legacyStyle
+        aria-label={label}
+        tooltip={label}
+        isSelected={parsedMetadata.raised}
+        onPress={() => sendRaise()}
+      >
+        <RiHand />
+      </ToggleButton>
+    </div>
+  )
+}
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
index 6361eef8..6fe0b89d 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx
@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next'
 import { OptionsButton } from '../components/controls/Options/OptionsButton'
 import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
 import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
+import { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
 
 /** @public */
 export type ControlBarControls = {
@@ -183,6 +184,7 @@ export function ControlBar({
             )}
         </TrackToggle>
       )}
+      <HandToggle />
       <ChatToggle />
       <ParticipantsToggle />
       <OptionsButton />
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 7e6a3b1b..40a49cfc 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -32,6 +32,10 @@
       "open": "",
       "closed": ""
     },
+    "hand": {
+      "raise": "",
+      "lower": ""
+    },
     "leave": "",
     "participants": {
       "open": "",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 42f44adb..ab668143 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -32,6 +32,10 @@
       "open": "Close the chat",
       "closed": "Open the chat"
     },
+    "hand": {
+      "raise": "Raise hand",
+      "lower": "Lower hand"
+    },
     "leave": "Leave",
     "participants": {
       "open": "Hide everyone",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 14a44e67..0e719b68 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -32,6 +32,10 @@
       "open": "Masquer le chat",
       "closed": "Afficher le chat"
     },
+    "hand": {
+      "raise": "Lever la main",
+      "lower": "Baisser la main"
+    },
     "leave": "Quitter",
     "participants": {
       "open": "Masquer les participants",