From e6a15e36b441f13c98a6ea8a90cc766894e2da06 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 12 Aug 2024 09:31:39 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20create=20a=20control=20bu?=
 =?UTF-8?q?tton=20for=20participants=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduced a button to manage the visibility of the participants list.

Encountered refresh issues with the room context where the participant count
in the room metadata does not update in real-time, causing discrepancies
between the actual number of participants and the displayed count. To address
this, I utilized the participants hook, which updates more frequently and
ensures consistency.
---
 .../Participants/ParticipantsToggle.tsx       | 66 +++++++++++++++++++
 src/frontend/src/locales/de/rooms.json        |  6 +-
 src/frontend/src/locales/en/rooms.json        |  6 +-
 src/frontend/src/locales/fr/rooms.json        |  6 +-
 4 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
new file mode 100644
index 00000000..bb3610d0
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
@@ -0,0 +1,66 @@
+import { useTranslation } from 'react-i18next'
+import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useParticipants } from '@livekit/components-react'
+import { useState } from 'react'
+
+export const ParticipantsToggle = () => {
+  const { t } = useTranslation('rooms')
+
+  /**
+   * Context could not be used due to inconsistent refresh behavior.
+   * The 'numParticipant' property on the room only updates when the room's metadata changes,
+   * resulting in a delay compared to the participant list's actual refresh rate.
+   */
+  const participants = useParticipants()
+  const numParticipants = participants?.length
+
+  const [isOpen, setIsOpen] = useState(false)
+  const tooltipLabel = isOpen ? 'open' : 'closed'
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <Button
+        toggle
+        square
+        legacyStyle
+        aria-label={t(`controls.participants.${tooltipLabel}`)}
+        tooltip={t(`controls.participants.${tooltipLabel}`)}
+        onPress={() => setIsOpen(!isOpen)}
+      >
+        <RiGroupLine />
+      </Button>
+      <div
+        className={css({
+          position: 'absolute',
+          top: '-.25rem',
+          right: '-.25rem',
+          width: '1.25rem',
+          height: '1.25rem',
+          backgroundColor: 'gray',
+          borderRadius: '50%',
+          color: 'white',
+          fontSize: '0.75rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 1,
+          userSelect: 'none',
+        })}
+      >
+        {numParticipants < 100 ? (
+          numParticipants || 1
+        ) : (
+          <RiInfinityLine size={10} />
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 72747f21..208733a1 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -29,7 +29,11 @@
     "shareScreen": "",
     "stopScreenShare": "",
     "chat": "",
-    "leave": ""
+    "leave": "",
+    "participants": {
+      "open": "",
+      "closed": ""
+    }
   },
   "options": {
     "buttonLabel": "",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 3391b7dd..016d8644 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -29,7 +29,11 @@
     "shareScreen": "Share screen",
     "stopScreenShare": "Stop screen share",
     "chat": "Chat",
-    "leave": "Leave"
+    "leave": "Leave",
+    "participants": {
+      "open": "Hide everyone",
+      "closed": "See everyone"
+    }
   },
   "options": {
     "buttonLabel": "More Options",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index bf30d9dc..06fee641 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -29,7 +29,11 @@
     "shareScreen": "Partager l'écran",
     "stopScreenShare": "Arrêter le partage",
     "chat": "Chat",
-    "leave": "Quitter"
+    "leave": "Quitter",
+    "participants": {
+      "open": "Masquer les participants",
+      "closed": "Afficher les participants"
+    }
   },
   "options": {
     "buttonLabel": "Plus d'options",