diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts
index 82cb69d7f2..25bb452ad2 100644
--- a/react/features/base/participants/functions.ts
+++ b/react/features/base/participants/functions.ts
@@ -257,10 +257,8 @@ export function getParticipantCount(stateful: IStateful) {
fakeParticipants,
sortedRemoteVirtualScreenshareParticipants
} = state['features/base/participants'];
- const _iAmVisitor = iAmVisitor(stateful);
- return remote.size - fakeParticipants.size - sortedRemoteVirtualScreenshareParticipants.size
- + (local && !_iAmVisitor ? 1 : 0);
+ return remote.size - fakeParticipants.size - sortedRemoteVirtualScreenshareParticipants.size + (local ? 1 : 0);
}
/**
@@ -412,9 +410,24 @@ export function getMutedStateByParticipantAndMediaType(
export function getParticipantCountWithFake(stateful: IStateful) {
const state = toState(stateful);
const { local, localScreenShare, remote } = state['features/base/participants'];
+
+ return remote.size + (local ? 1 : 0) + (localScreenShare ? 1 : 0);
+}
+
+/**
+ * Returns a count of the known participants in the passed in redux state,
+ * including fake participants. Subtract 1 when the local participant is a visitor as we do not show a local thumbnail.
+ * The number used to display the participant count in the UI.
+ *
+ * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
+ * {@code getState} function to be used to retrieve the state
+ * features/base/participants.
+ * @returns {number}
+ */
+export function getParticipantCountForDisplay(stateful: IStateful) {
const _iAmVisitor = iAmVisitor(stateful);
- return remote.size + (local && !_iAmVisitor ? 1 : 0) + (localScreenShare ? 1 : 0);
+ return getParticipantCount(stateful) - (_iAmVisitor ? 1 : 0);
}
/**
diff --git a/react/features/conference/components/web/SpeakerStatsLabel.tsx b/react/features/conference/components/web/SpeakerStatsLabel.tsx
index be02fe126c..4d3f1ffd1c 100644
--- a/react/features/conference/components/web/SpeakerStatsLabel.tsx
+++ b/react/features/conference/components/web/SpeakerStatsLabel.tsx
@@ -7,11 +7,10 @@ import { openDialog } from '../../../base/dialog/actions';
import { IconUsers } from '../../../base/icons/svg';
import Label from '../../../base/label/components/web/Label';
import { COLORS } from '../../../base/label/constants';
-import { getParticipantCount } from '../../../base/participants/functions';
+import { getParticipantCountForDisplay } from '../../../base/participants/functions';
import Tooltip from '../../../base/tooltip/components/Tooltip';
import SpeakerStats from '../../../speaker-stats/components/web/SpeakerStats';
import { isSpeakerStatsDisabled } from '../../../speaker-stats/functions';
-import { iAmVisitor } from '../../../visitors/functions';
/**
* ParticipantsCount react component.
@@ -21,17 +20,11 @@ import { iAmVisitor } from '../../../visitors/functions';
*/
function SpeakerStatsLabel() {
const conference = useSelector((state: IReduxState) => state['features/base/conference'].conference);
- let count = useSelector(getParticipantCount);
- const iAmVisitorState = useSelector(iAmVisitor);
+ const count = useSelector(getParticipantCountForDisplay);
const _isSpeakerStatsDisabled = useSelector(isSpeakerStatsDisabled);
const dispatch = useDispatch();
const { t } = useTranslation();
- // visitor has hidden its own video and should not count itself
- if (iAmVisitorState) {
- count--;
- }
-
const onClick = () => {
dispatch(openDialog(SpeakerStats, { conference }));
};
diff --git a/react/features/participants-pane/components/native/ParticipantsConter.tsx b/react/features/participants-pane/components/native/ParticipantsConter.tsx
index 0fa1b13fdb..42ebf0e9b2 100644
--- a/react/features/participants-pane/components/native/ParticipantsConter.tsx
+++ b/react/features/participants-pane/components/native/ParticipantsConter.tsx
@@ -2,12 +2,12 @@ import React from 'react';
import { Text } from 'react-native';
import { useSelector } from 'react-redux';
-import { getParticipantCount } from '../../../base/participants/functions';
+import { getParticipantCountForDisplay } from '../../../base/participants/functions';
import styles from './styles';
const ParticipantsCounter = () => {
- const participantsCount = useSelector(getParticipantCount);
+ const participantsCount = useSelector(getParticipantCountForDisplay);
return {participantsCount};
};
diff --git a/react/features/participants-pane/components/native/ParticipantsPaneButton.tsx b/react/features/participants-pane/components/native/ParticipantsPaneButton.tsx
index e0b60486ff..210e71a7d2 100644
--- a/react/features/participants-pane/components/native/ParticipantsPaneButton.tsx
+++ b/react/features/participants-pane/components/native/ParticipantsPaneButton.tsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import { IReduxState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import { IconUsers } from '../../../base/icons/svg';
-import { getParticipantCount } from '../../../base/participants/functions';
+import { getParticipantCountForDisplay } from '../../../base/participants/functions';
import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
import { navigate }
from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
@@ -83,7 +83,7 @@ class ParticipantsPaneButton extends AbstractButton {
*/
function mapStateToProps(state: IReduxState) {
return {
- _participantsCount: getParticipantCount(state)
+ _participantsCount: getParticipantCountForDisplay(state)
};
}
diff --git a/react/features/participants-pane/components/web/ParticipantsCounter.tsx b/react/features/participants-pane/components/web/ParticipantsCounter.tsx
index f48ebe43e8..3c9e59173c 100644
--- a/react/features/participants-pane/components/web/ParticipantsCounter.tsx
+++ b/react/features/participants-pane/components/web/ParticipantsCounter.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
-import { getParticipantCount } from '../../../base/participants/functions';
+import { getParticipantCountForDisplay } from '../../../base/participants/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
const useStyles = makeStyles()(theme => {
@@ -26,7 +26,7 @@ const useStyles = makeStyles()(theme => {
const ParticipantsCounter = () => {
const { classes } = useStyles();
- const participantsCount = useSelector(getParticipantCount);
+ const participantsCount = useSelector(getParticipantCountForDisplay);
return {participantsCount};
};
diff --git a/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx b/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx
index 905f0cb40c..3e090c45da 100644
--- a/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx
+++ b/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import { IReduxState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import { IconUsers } from '../../../base/icons/svg';
-import { getParticipantCount } from '../../../base/participants/functions';
+import { getParticipantCountForDisplay } from '../../../base/participants/functions';
import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
import {
close as closeParticipantsPane,
@@ -131,7 +131,7 @@ function mapStateToProps(state: IReduxState) {
return {
_isOpen: isOpen,
_isParticipantsPaneEnabled: isParticipantsPaneEnabled(state),
- _participantsCount: getParticipantCount(state)
+ _participantsCount: getParticipantCountForDisplay(state)
};
}