Reduce direct read access to the features/base/participants redux state

As part of the work on fixing the problem with the multiplying
thumbnails, we've associated remote participant w/ JitsiConference.
However, there are periods of time when multiple JitsiConferences are in
the redux state (and that period is going to be shorted by
StateListenerRegistry). In order to give more control to the feature
base/participants, reduce the occurrences of direct access to the
features/base/participants redux state and utilize the feature's
existing read access functions. Which will allow us in the future to
enhance these functions to access participants which are relevant to the
current conference of interest to the user only.

react/features/base/participants/components/ParticipantView.native.js

@@ -313,10 +313,7 @@ function _toBoolean(value, undefinedValue) {
  */
 function _mapStateToProps(state, ownProps) {
     const { participantId } = ownProps;
-    const participant
-        = getParticipantById(
-            state['features/base/participants'],
-            participantId);
+    const participant = getParticipantById(state, participantId);
     let avatar;
     let connectionStatus;
     let participantName;

react/features/base/participants/functions.js

@@ -240,11 +240,8 @@ export function isLocalParticipantModerator(stateful: Object | Function) {
         return false;
     }
 
-    const isModerator = localParticipant.role === PARTICIPANT_ROLE.MODERATOR;
-
-    if (state['features/base/config'].enableUserRolesBasedOnToken) {
-        return isModerator && !state['features/base/jwt'].isGuest;
-    }
-
-    return isModerator;
+    return (
+        localParticipant.role === PARTICIPANT_ROLE.MODERATOR
+            && (!state['features/base/config'].enableUserRolesBasedOnToken
+                || !state['features/base/jwt'].isGuest));
 }

react/features/conference/components/Conference.native.js

@@ -10,6 +10,7 @@ import { appNavigate } from '../../app';
 import { connect, disconnect } from '../../base/connection';
 import { DialogContainer } from '../../base/dialog';
 import { CalleeInfoContainer } from '../../base/jwt';
+import { getParticipantCount } from '../../base/participants';
 import { Container, LoadingIndicator, TintedView } from '../../base/react';
 import { TestConnectionInfo } from '../../base/testing';
 import { createDesiredLocalTracks } from '../../base/tracks';
@@ -383,7 +384,6 @@ function _mapStateToProps(state) {
     const { connecting, connection } = state['features/base/connection'];
     const { conference, joining, leaving } = state['features/base/conference'];
     const { reducedUI } = state['features/base/responsive-ui'];
-    const participants = state['features/base/participants'];
 
     // XXX There is a window of time between the successful establishment of the
     // XMPP connection and the subsequent commencement of joining the MUC during
@@ -415,7 +415,7 @@ function _mapStateToProps(state) {
          * @private
          * @type {number}
          */
-        _participantCount: participants.length,
+        _participantCount: getParticipantCount(state),
 
         /**
          * The indicator which determines whether the UI is reduced (to

react/features/filmstrip/functions.js

@@ -1,6 +1,9 @@
 // @flow
 
-import { getPinnedParticipant } from '../base/participants';
+import {
+    getParticipantCount,
+    getPinnedParticipant
+} from '../base/participants';
 
 declare var interfaceConfig: Object;
 
@@ -13,8 +16,7 @@ declare var interfaceConfig: Object;
  * in the filmstrip, then {@code true}; otherwise, {@code false}.
  */
 export function shouldRemoteVideosBeVisible(state: Object) {
-    const participants = state['features/base/participants'];
-    const participantCount = participants.length;
+    const participantCount = getParticipantCount(state);
     let pinnedParticipant;
 
     return Boolean(
@@ -26,7 +28,7 @@ export function shouldRemoteVideosBeVisible(state: Object) {
             || (participantCount > 1
                 && (state['features/filmstrip'].hovered
                     || state['features/toolbox'].visible
-                    || ((pinnedParticipant = getPinnedParticipant(participants))
+                    || ((pinnedParticipant = getPinnedParticipant(state))
                         && pinnedParticipant.local)))
 
             || (typeof interfaceConfig === 'object'

react/features/invite/components/InfoDialogButton.web.js

@@ -236,10 +236,10 @@ function _mapStateToProps(state) {
     return {
         _dialIn: state['features/invite'],
         _disableAutoShow: state['features/base/config'].iAmRecorder,
-        _liveStreamViewURL: currentLiveStreamingSession
-            && currentLiveStreamingSession.liveStreamViewURL,
-        _participantCount:
-            getParticipantCount(state['features/base/participants']),
+        _liveStreamViewURL:
+            currentLiveStreamingSession
+                && currentLiveStreamingSession.liveStreamViewURL,
+        _participantCount: getParticipantCount(state),
         _toolboxVisible: state['features/toolbox'].visible
     };
 }

react/features/invite/middleware.any.js

@@ -118,15 +118,13 @@ MiddlewareRegistry.register(store => next => action => {
  * @returns {string} - The presence status.
  */
 function _getParticipantPresence(state, id) {
-    if (!id) {
-        return undefined;
-    }
-    const participants = state['features/base/participants'];
-    const participantById = getParticipantById(participants, id);
+    if (id) {
+        const participantById = getParticipantById(state, id);
 
-    if (!participantById) {
-        return undefined;
+        if (participantById) {
+            return participantById.presence;
+        }
     }
 
-    return participantById.presence;
+    return undefined;
 }

react/features/presence-status/components/PresenceLabel.js

@@ -99,9 +99,7 @@ class PresenceLabel extends Component {
  * }}
  */
 function _mapStateToProps(state, ownProps) {
-    const participant
-        = getParticipantById(
-            state['features/base/participants'], ownProps.participantID);
+    const participant = getParticipantById(state, ownProps.participantID);
 
     return {
         _presence: participant && participant.presence

react/features/remote-control/components/RemoteControlAuthorizationDialog.js

@@ -159,10 +159,7 @@ class RemoteControlAuthorizationDialog extends Component<*> {
  */
 function _mapStateToProps(state, ownProps) {
     const { _displayName, participantId } = ownProps;
-    const participant
-        = getParticipantById(
-            state['features/base/participants'],
-            participantId);
+    const participant = getParticipantById(state, participantId);
 
     return {
         _displayName: participant ? participant.name : _displayName

react/features/welcome/components/WelcomePageSideBar.native.js

@@ -156,11 +156,11 @@ class WelcomePageSideBar extends Component<Props> {
  * @returns {Object}
  */
 function _mapStateToProps(state: Object) {
-    const _localParticipant = getLocalParticipant(state);
+    const localParticipant = getLocalParticipant(state);
 
     return {
-        _avatar: getAvatarURL(_localParticipant),
-        _displayName: getParticipantDisplayName(state, _localParticipant.id),
+        _avatar: getAvatarURL(localParticipant),
+        _displayName: getParticipantDisplayName(state, localParticipant.id),
         _visible: state['features/welcome'].sideBarVisible
     };
 }