[RN] Show avatar if a participant is not in last N

react/features/base/conference/actions.js

@@ -1,5 +1,6 @@
 import { JitsiConferenceEvents } from '../lib-jitsi-meet';
 import {
+    changeParticipantLastNStatus,
     dominantSpeakerChanged,
     getLocalParticipant,
     participantJoined,
@@ -52,6 +53,10 @@ function _addConferenceListeners(conference, dispatch) {
             JitsiConferenceEvents.DOMINANT_SPEAKER_CHANGED,
             (...args) => dispatch(dominantSpeakerChanged(...args)));
 
+    conference.on(
+        JitsiConferenceEvents.LAST_N_ENDPOINTS_CHANGED,
+        (...args) => _lastNEndpointsChanged(dispatch, ...args));
+
     conference.on(
             JitsiConferenceEvents.LOCK_STATE_CHANGED,
             (...args) => dispatch(_lockStateChanged(conference, ...args)));
@@ -263,6 +268,30 @@ export function createConference() {
     };
 }
 
+/**
+ * Handles the lastN status changes for participants in the current conference.
+ * Signals that a participant's lastN status has changed, for each participant
+ * who entered or left the last N set.
+ *
+ * @param {Dispatch} dispatch - Redux dispatch function.
+ * @param {Array} leavingIds - Ids of participants who are leaving the last N
+ * set.
+ * @param {Array} enteringIds - Ids of participants who are entering the last N
+ * set.
+ * @returns {void}
+ *
+ * @private
+ */
+function _lastNEndpointsChanged(dispatch, leavingIds = [], enteringIds = []) {
+    for (const id of leavingIds) {
+        dispatch(changeParticipantLastNStatus(id, false));
+    }
+
+    for (const id of enteringIds) {
+        dispatch(changeParticipantLastNStatus(id, true));
+    }
+}
+
 /**
  * Signals that the lock state of a specific JitsiConference changed.
  *

react/features/base/participants/actions.js

@@ -8,6 +8,30 @@ import {
 } from './actionTypes';
 import { getLocalParticipant } from './functions';
 
+/**
+ * Action to update a participant's lastN status.
+ *
+ * @param {string} id - Participant's ID.
+ * @param {boolean} isInLastN - True if the participant is in the lastN
+ * endpoints set, false otherwise.
+ * @returns {{
+ *     type: PARTICIPANT_UPDATED,
+ *     participant: {
+ *         id: string,
+ *         isInLastN: boolean
+ *     }
+ * }}
+ */
+export function changeParticipantLastNStatus(id, isInLastN) {
+    return {
+        type: PARTICIPANT_UPDATED,
+        participant: {
+            id,
+            isInLastN
+        }
+    };
+}
+
 /**
  * Create an action for when dominant speaker changes.
  *

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

@@ -34,6 +34,13 @@ class ParticipantView extends Component {
          */
         _avatar: React.PropTypes.string,
 
+        /**
+         * True if the participant is in the last N endpoints set, false if he
+         * isn't. If undefined, we have no indication, so the same course of
+         * action as true is taken.
+         */
+        _isInLastN: React.PropTypes.bool,
+
         /**
          * The video Track of the participant with {@link #participantId}.
          */
@@ -85,20 +92,23 @@ class ParticipantView extends Component {
      * @returns {ReactElement}
      */
     render() {
-        // Is the video to be rendered?
+        const {
-        const videoTrack = this.props._videoTrack;
+            _avatar: avatar,
+            _isInLastN: isInLastN,
+            _videoTrack: videoTrack
+        } = this.props;
 
+        // Is the video to be rendered?
         // FIXME It's currently impossible to have true as the value of
         // waitForVideoStarted because videoTrack's state videoStarted will be
         // updated only after videoTrack is rendered.
         const waitForVideoStarted = false;
         const renderVideo
-            = shouldRenderVideoTrack(videoTrack, waitForVideoStarted);
+            = shouldRenderVideoTrack(videoTrack, waitForVideoStarted)
+                && (typeof isInLastN === 'undefined' || isInLastN);
 
         // Is the avatar to be rendered?
-        const avatar = this.props._avatar;
+        const renderAvatar = Boolean(!renderVideo && avatar);
-        const renderAvatar
-            = !renderVideo && typeof avatar !== 'undefined' && avatar !== '';
 
         return (
             <Container
@@ -158,6 +168,7 @@ function _toBoolean(value, undefinedValue) {
  * @private
  * @returns {{
  *     _avatar: string,
+ *     _isInLastN: boolean,
  *     _videoTrack: Track
  * }}
  */
@@ -170,6 +181,7 @@ function _mapStateToProps(state, ownProps) {
 
     return {
         _avatar: participant && getAvatarURL(participant),
+        _isInLastN: participant && participant.isInLastN,
         _videoTrack:
             getTrackByMediaTypeAndParticipant(
                 state['features/base/tracks'],

react/features/base/participants/reducer.js

@@ -71,8 +71,15 @@ function _participant(state, action) {
 
     case PARTICIPANT_JOINED: {
         const participant = action.participant; // eslint-disable-line no-shadow
-        const { avatarURL, dominantSpeaker, email, local, pinned, role }
+        const {
-            = participant;
+            avatarURL,
+            dominantSpeaker,
+            email,
+            isInLastN,
+            local,
+            pinned,
+            role
+        } = participant;
         let { avatarID, id, name } = participant;
 
         // avatarID
@@ -103,6 +110,7 @@ function _participant(state, action) {
             dominantSpeaker: dominantSpeaker || false,
             email,
             id,
+            isInLastN,
             local: local || false,
             name,
             pinned: pinned || false,