diff --git a/react/features/conference/components/native/AlwaysOnLabels.js b/react/features/conference/components/native/AlwaysOnLabels.js
index a040c8bf6..ca9cb3014 100644
--- a/react/features/conference/components/native/AlwaysOnLabels.js
+++ b/react/features/conference/components/native/AlwaysOnLabels.js
@@ -8,12 +8,14 @@ import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
import { RecordingLabel } from '../../../recording';
import { openHighlightDialog } from '../../../recording/actions.native';
import HighlightButton from '../../../recording/components/Recording/native/HighlightButton';
+import VisitorsCountLabel from '../../../visitors/components/native/VisitorsCountLabel';
import RaisedHandsCountLabel from './RaisedHandsCountLabel';
import {
LABEL_ID_RAISED_HANDS_COUNT,
LABEL_ID_RECORDING,
LABEL_ID_STREAMING,
+ LABEL_ID_VISITORS_COUNT,
LabelHitSlop
} from './constants';
@@ -51,6 +53,11 @@ const AlwaysOnLabels = ({ createOnPress }: Props) => {
onPress = { createOnPress(LABEL_ID_RAISED_HANDS_COUNT) } >
+
+
+
>);
};
diff --git a/react/features/conference/components/native/constants.js b/react/features/conference/components/native/constants.js
index 341b50038..aebf53276 100644
--- a/react/features/conference/components/native/constants.js
+++ b/react/features/conference/components/native/constants.js
@@ -26,6 +26,7 @@ export const LABEL_ID_STREAMING = 'streaming';
export const LABEL_ID_TRANSCRIBING = 'transcribing';
export const LABEL_ID_INSECURE_ROOM_NAME = 'insecure-room-name';
export const LABEL_ID_RAISED_HANDS_COUNT = 'raised-hands-count';
+export const LABEL_ID_VISITORS_COUNT = 'visitors-count';
/**
* The {@code ExpandedLabel} components to be rendered for the individual
diff --git a/react/features/participants-pane/components/native/MeetingParticipantList.tsx b/react/features/participants-pane/components/native/MeetingParticipantList.tsx
index ca3dcd0c9..1f97b09bf 100644
--- a/react/features/participants-pane/components/native/MeetingParticipantList.tsx
+++ b/react/features/participants-pane/components/native/MeetingParticipantList.tsx
@@ -2,7 +2,7 @@
import React, { PureComponent } from 'react';
import { WithTranslation } from 'react-i18next';
-import { FlatList } from 'react-native';
+import { FlatList, Text } from 'react-native';
import { IReduxState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
@@ -68,6 +68,11 @@ type Props = WithTranslation & {
*/
_sortedRemoteParticipants: Map;
+ /**
+ * The current visitors count if any.
+ */
+ _visitorsCount: number;
+
/**
* List of breakout rooms that were created.
*/
@@ -189,6 +194,7 @@ class MeetingParticipantList extends PureComponent {
_participantsCount,
_showInviteButton,
_sortedRemoteParticipants,
+ _visitorsCount,
breakoutRooms,
isLocalModerator,
lobbyParticipants,
@@ -217,48 +223,54 @@ class MeetingParticipantList extends PureComponent {
const finalContainerStyle
= _participantsCount > 6 && containerStyle;
const { color, shareDialogVisible } = _inviteOthersControl;
+ const _visitorsLabelText = _visitorsCount > 0
+ ? t('participantsPane.headings.visitors', { count: _visitorsCount })
+ : undefined;
return (
-
- {
- _showInviteButton
- &&
- );
+
+ {
+ _showInviteButton
+ &&
+ >);
}
}
@@ -287,7 +299,8 @@ function _mapStateToProps(state: IReduxState): Object {
_showInviteButton,
_sortedRemoteParticipants: remoteParticipants,
_localParticipant: getLocalParticipant(state),
- _shareDialogVisible: shareDialogVisible
+ _shareDialogVisible: shareDialogVisible,
+ _visitorsCount: state['features/visitors'].count || 0
};
}
diff --git a/react/features/participants-pane/components/native/styles.js b/react/features/participants-pane/components/native/styles.js
index 5c28e4e3c..54f3bf6e9 100644
--- a/react/features/participants-pane/components/native/styles.js
+++ b/react/features/participants-pane/components/native/styles.js
@@ -288,5 +288,11 @@ export default {
centerInput: {
paddingRight: BaseTheme.spacing[3],
textAlign: 'center'
+ },
+
+ visitorsLabel: {
+ ...BaseTheme.typography.heading6,
+ color: BaseTheme.palette.warning02,
+ marginLeft: BaseTheme.spacing[3]
}
};
diff --git a/react/features/toolbox/components/native/Toolbox.js b/react/features/toolbox/components/native/Toolbox.js
index f35221bbd..f01b96031 100644
--- a/react/features/toolbox/components/native/Toolbox.js
+++ b/react/features/toolbox/components/native/Toolbox.js
@@ -48,6 +48,11 @@ type Props = {
*/
_visible: boolean,
+ /**
+ * Whether we are in visitors mode.
+ */
+ _visitorsModeEnabled: boolean,
+
/**
* The width of the screen.
*/
@@ -61,7 +66,7 @@ type Props = {
* @returns {React$Element}.
*/
function Toolbox(props: Props) {
- const { _endConferenceSupported, _reactionsEnabled, _styles, _visible, _width } = props;
+ const { _endConferenceSupported, _reactionsEnabled, _styles, _visible, _visitorsModeEnabled, _width } = props;
if (!_visible) {
return null;
@@ -87,20 +92,22 @@ function Toolbox(props: Props) {
edges = { [ bottomEdge && 'bottom' ].filter(Boolean) }
pointerEvents = 'box-none'
style = { styles.toolbox }>
-
-
- {
- additionalButtons.has('chat')
+ }
+ {!_visitorsModeEnabled && additionalButtons.has('chat')
&&
}
- {additionalButtons.has('screensharing') && }
- { additionalButtons.has('raisehand') && (_reactionsEnabled
+ {!_visitorsModeEnabled && additionalButtons.has('screensharing')
+ && }
+ { !_visitorsModeEnabled && additionalButtons.has('raisehand') && (_reactionsEnabled
?
@@ -108,9 +115,10 @@ function Toolbox(props: Props) {
styles = { buttonStylesBorderless }
toggledStyles = { backgroundToggledStyle } />)}
{additionalButtons.has('tileview') && }
-
+ }
{ _endConferenceSupported
? {
+ const visitorsMode = useSelector((state: IReduxState) => state['features/visitors'].enabled);
+ const visitorsCount = useSelector((state: IReduxState) =>
+ state['features/visitors'].count || 0);
+
+ return visitorsMode && (
+
+ );
+};
+
+export default VisitorsCountLabel;
diff --git a/react/features/visitors/components/web/VisitorsCountLabel.tsx b/react/features/visitors/components/web/VisitorsCountLabel.tsx
index 8d6d8f833..58b59b481 100644
--- a/react/features/visitors/components/web/VisitorsCountLabel.tsx
+++ b/react/features/visitors/components/web/VisitorsCountLabel.tsx
@@ -9,6 +9,7 @@ import Label from '../../../base/label/components/web/Label';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { Tooltip } from '../../../base/tooltip';
+import { getVisitorsShortText } from '../../functions';
const useStyles = makeStyles()(theme => {
return {
@@ -26,13 +27,6 @@ const VisitorsCountLabel = () => {
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 && (
@@ -41,7 +35,7 @@ const VisitorsCountLabel = () => {
icon = { IconUsers }
iconColor = { theme.palette.icon04 }
id = 'visitorsCountLabel'
- text = { `${visitorsCountLabel}` } />
+ text = { `${getVisitorsShortText(visitorsCount)}` } />
);
};
diff --git a/react/features/visitors/functions.ts b/react/features/visitors/functions.ts
new file mode 100644
index 000000000..d5ca91cca
--- /dev/null
+++ b/react/features/visitors/functions.ts
@@ -0,0 +1,11 @@
+/**
+ * A short string to represent the number of visitors.
+ * Over 100 we show numbers like 0.2 K or 9.5 K.
+ *
+ * @param {number} visitorsCount - The number of visitors to shorten.
+ *
+ * @returns {string} Short string representing the number of visitors.
+ */
+export function getVisitorsShortText(visitorsCount: number) {
+ return visitorsCount > 100 ? `${Math.round(visitorsCount / 100) / 10} K` : String(visitorsCount);
+}