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

  */
 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

         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

 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';
     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
          * @private
          * @type {number}
          */
-        _participantCount: participants.length,
+        _participantCount: getParticipantCount(state),
 
         /**
          * The indicator which determines whether the UI is reduced (to

react/features/filmstrip/functions.js

 // @flow
 
-import { getPinnedParticipant } from '../base/participants';
+import {
+    getParticipantCount,
+    getPinnedParticipant
+} from '../base/participants';
 
 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(
             || (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

     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

  * @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

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

  */
 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

  * @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
     };
 }