From 5f88b117ae7556c2bc5044ba501c4d1a97c3b1c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B0=D0=BC=D1=8F=D0=BD=20=D0=9C=D0=B8=D0=BD=D0=BA?= =?UTF-8?q?=D0=BE=D0=B2?= Date: Wed, 11 Jun 2025 12:51:33 -0500 Subject: [PATCH] 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 | 21 +++++++++++++++---- .../components/web/SpeakerStatsLabel.tsx | 11 ++-------- .../components/native/ParticipantsConter.tsx | 4 ++-- .../native/ParticipantsPaneButton.tsx | 4 ++-- .../components/web/ParticipantsCounter.tsx | 4 ++-- .../components/web/ParticipantsPaneButton.tsx | 4 ++-- 6 files changed, 27 insertions(+), 21 deletions(-) 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) }; }