feat: Adds visitors count in conference info.

lang/main.json

@@ -1333,6 +1333,7 @@
         "webAssemblyWarning": "WebAssembly not supported",
         "webAssemblyWarningDescription": "WebAssembly disabled or not supported by this browser"
     },
+    "visitorsLabel": "Number of visitors: {{count}}",
     "volumeSlider": "Volume slider",
     "welcomepage": {
         "accessibilityLabel": {

react/features/conference/components/constants.ts

@@ -8,6 +8,7 @@ export const CONFERENCE_INFO = {
         'e2ee',
         'transcribing',
         'video-quality',
+        'visitors-count',
         'insecure-room',
         'top-panel-toggle'
     ]

react/features/conference/components/web/ConferenceInfo.js

@@ -12,6 +12,7 @@ import RecordingLabel from '../../../recording/components/web/RecordingLabel';
 import { isToolboxVisible } from '../../../toolbox/functions.web';
 import TranscribingLabel from '../../../transcribing/components/TranscribingLabel.web';
 import VideoQualityLabel from '../../../video-quality/components/VideoQualityLabel.web';
+import VisitorsCountLabel from '../../../visitors/components/web/VisitorsCountLabel';
 import ConferenceTimer from '../ConferenceTimer';
 import { getConferenceInfo } from '../functions';
 
@@ -80,6 +81,10 @@ const COMPONENTS = [
         Component: VideoQualityLabel,
         id: 'video-quality'
     },
+    {
+        Component: VisitorsCountLabel,
+        id: 'visitors-count'
+    },
     {
         Component: InsecureRoomNameLabel,
         id: 'insecure-room'

react/features/visitors/components/web/VisitorsCountLabel.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../../app/types';
+import { IconUsers } from '../../../base/icons/svg';
+import Label from '../../../base/label/components/web/Label';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
+import { Tooltip } from '../../../base/tooltip';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        label: {
+            backgroundColor: theme.palette.warning02,
+            color: theme.palette.uiBackground
+        }
+    };
+});
+
+const VisitorsCountLabel = () => {
+    const { classes: styles, theme } = useStyles();
+    const visitorsMode = useSelector((state: IReduxState) => state['features/visitors'].enabled);
+    const visitorsCount = useSelector((state: IReduxState) =>
+        state['features/visitors'].count || 0);
+    const { t } = useTranslation();
+
+    let visitorsCountLabel = String(visitorsCount);
+
+    // over 100 we show numbers lik 0.2 K or 9.5 K.
+    if (visitorsCount > 100) {
+        visitorsCountLabel = `${Math.round(visitorsCount / 100) / 10} K`;
+    }
+
+    return visitorsMode && (<Tooltip
+        content = { t('visitorsLabel', { count: visitorsCount }) }
+        position = { 'bottom' }>
+        <Label
+            className = { styles.label }
+            icon = { IconUsers }
+            iconColor = { theme.palette.icon04 }
+            id = 'visitorsCountLabel'
+            text = { `${visitorsCountLabel}` } />
+    </Tooltip>);
+};
+
+export default VisitorsCountLabel;