From 50c4748d403415f58385f09f74d7ce5ec1128db2 Mon Sep 17 00:00:00 2001
From: damencho <damencho@jitsi.org>
Date: Wed, 8 Feb 2023 11:48:51 -0600
Subject: [PATCH] feat: Adds visitors count in participants pane.

---
 lang/main.json                                         |  1 +
 .../components/web/MeetingParticipants.tsx             | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/lang/main.json b/lang/main.json
index 8a8d8abef..0b8ec562c 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -759,6 +759,7 @@
         "headings": {
             "lobby": "Lobby ({{count}})",
             "participantsList": "Meeting participants ({{count}})",
+            "visitors": "Visitors ({{count}})",
             "waitingLobby": "Waiting in lobby ({{count}})"
         },
         "search": "Search participants",
diff --git a/react/features/participants-pane/components/web/MeetingParticipants.tsx b/react/features/participants-pane/components/web/MeetingParticipants.tsx
index 79adb581c..e5e357465 100644
--- a/react/features/participants-pane/components/web/MeetingParticipants.tsx
+++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx
@@ -30,6 +30,9 @@ import MeetingParticipantItems from './MeetingParticipantItems';
 
 const useStyles = makeStyles()(theme => {
     return {
+        headingW: {
+            color: theme.palette.warning02
+        },
         heading: {
             color: theme.palette.text02,
 
@@ -103,11 +106,16 @@ function MeetingParticipants({
     const askUnmuteText = t('participantsPane.actions.askUnmute');
     const muteParticipantButtonText = t('dialog.muteParticipantButton');
     const isBreakoutRoom = useSelector(isInBreakoutRoom);
+    const visitorsCount = useSelector((state: IReduxState) => state['features/visitors'].count);
 
-    const { classes: styles } = useStyles();
+    const { classes: styles, cx } = useStyles();
 
     return (
         <>
+            <div className = { cx(styles.heading, styles.headingW) }>
+                {visitorsCount && visitorsCount > 0
+                    && t('participantsPane.headings.visitors', { count: visitorsCount })}
+            </div>
             <div className = { styles.heading }>
                 {currentRoom?.name
                     ? `${currentRoom.name} (${participantsCount})`