diff --git a/lang/main.json b/lang/main.json index 0b8ec562c2..f93c1602cb 100644 --- a/lang/main.json +++ b/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": { diff --git a/react/features/conference/components/constants.ts b/react/features/conference/components/constants.ts index 66f4f5b637..770df5ad39 100644 --- a/react/features/conference/components/constants.ts +++ b/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' ] diff --git a/react/features/conference/components/web/ConferenceInfo.js b/react/features/conference/components/web/ConferenceInfo.js index a693470854..5996b43272 100644 --- a/react/features/conference/components/web/ConferenceInfo.js +++ b/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' diff --git a/react/features/visitors/components/web/VisitorsCountLabel.tsx b/react/features/visitors/components/web/VisitorsCountLabel.tsx new file mode 100644 index 0000000000..8d6d8f8336 --- /dev/null +++ b/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 && ( + ); +}; + +export default VisitorsCountLabel;