fix(visitors): Fixes visitors count. (#16134)

* fix(visitors): Fixes visitors count.

* squash: Simplify logic with new function counting participants to display.

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);
 }
 
 /**

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 }));
     };

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 <Text style = { styles.participantsBadge }>{participantsCount}</Text>;
 };

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<IProps> {
  */
 function mapStateToProps(state: IReduxState) {
     return {
-        _participantsCount: getParticipantCount(state)
+        _participantsCount: getParticipantCountForDisplay(state)
     };
 }
 

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 <span className = { classes.badge }>{participantsCount}</span>;
 };

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)
     };
 }