[RN] Use participant connection status events instead of last N

They better represent if a participant has video available or not. There are
cases when even a participant in the last N set would not have video because it
disconnected momentarily, for example.

react/features/base/conference/actions.js

@@ -1,6 +1,6 @@
 import { JitsiConferenceEvents } from '../lib-jitsi-meet';
 import {
-    changeParticipantLastNStatus,
+    changeParticipantConnectionStatus,
     dominantSpeakerChanged,
     getLocalParticipant,
     participantJoined,
@@ -54,8 +54,8 @@ function _addConferenceListeners(conference, dispatch) {
             (...args) => dispatch(dominantSpeakerChanged(...args)));
 
     conference.on(
-        JitsiConferenceEvents.LAST_N_ENDPOINTS_CHANGED,
-        (...args) => _lastNEndpointsChanged(dispatch, ...args));
+        JitsiConferenceEvents.PARTICIPANT_CONN_STATUS_CHANGED,
+        (...args) => dispatch(changeParticipantConnectionStatus(...args)));
 
     conference.on(
             JitsiConferenceEvents.LOCK_STATE_CHANGED,
@@ -268,30 +268,6 @@ 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/lib-jitsi-meet/index.js

@@ -10,6 +10,8 @@ export const JitsiConferenceErrors = JitsiMeetJS.errors.conference;
 export const JitsiConferenceEvents = JitsiMeetJS.events.conference;
 export const JitsiConnectionErrors = JitsiMeetJS.errors.connection;
 export const JitsiConnectionEvents = JitsiMeetJS.events.connection;
+export const JitsiParticipantConnectionStatus
+    = JitsiMeetJS.constants.participantConnectionStatus;
 export const JitsiTrackErrors = JitsiMeetJS.errors.track;
 export const JitsiTrackEvents = JitsiMeetJS.events.track;
 

react/features/base/participants/actions.js

@@ -9,25 +9,25 @@ import {
 import { getLocalParticipant } from './functions';
 
 /**
- * Action to update a participant's lastN status.
+ * Action to update a participant's connection status.
  *
  * @param {string} id - Participant's ID.
- * @param {boolean} isInLastN - True if the participant is in the lastN
- * endpoints set, false otherwise.
+ * @param {string} connectionStatus - The new connection status for the
+ * participant.
  * @returns {{
  *     type: PARTICIPANT_UPDATED,
  *     participant: {
  *         id: string,
- *         isInLastN: boolean
+ *         connectionStatus: string
  *     }
  * }}
  */
-export function changeParticipantLastNStatus(id, isInLastN) {
+export function changeParticipantConnectionStatus(id, connectionStatus) {
     return {
         type: PARTICIPANT_UPDATED,
         participant: {
             id,
-            isInLastN
+            connectionStatus
         }
     };
 }

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

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+import { JitsiParticipantConnectionStatus } from '../../lib-jitsi-meet';
 import {
     MEDIA_TYPE,
     shouldRenderVideoTrack,
@@ -35,11 +36,12 @@ 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.
+         * The connection status for the participant. Its video will only be
+         * rendered if the connection status is 'active', otherwise the avatar
+         * will be rendered. If undefined, we have no indication, so the same
+         * course of action as 'active' is taken.
          */
-        _isInLastN: React.PropTypes.bool,
+        _connectionStatus: React.PropTypes.string,
 
         /**
          * The video Track of the participant with {@link #participantId}.
@@ -94,7 +96,7 @@ class ParticipantView extends Component {
     render() {
         const {
             _avatar: avatar,
-            _isInLastN: isInLastN,
+            _connectionStatus: connectionStatus,
             _videoTrack: videoTrack
         } = this.props;
 
@@ -105,7 +107,9 @@ class ParticipantView extends Component {
         const waitForVideoStarted = false;
         const renderVideo
             = shouldRenderVideoTrack(videoTrack, waitForVideoStarted)
-                && (typeof isInLastN === 'undefined' || isInLastN);
+                && (typeof connectionStatus === 'undefined'
+                    || connectionStatus
+                        === JitsiParticipantConnectionStatus.ACTIVE);
 
         // Is the avatar to be rendered?
         const renderAvatar = Boolean(!renderVideo && avatar);
@@ -168,7 +172,7 @@ function _toBoolean(value, undefinedValue) {
  * @private
  * @returns {{
  *     _avatar: string,
- *     _isInLastN: boolean,
+ *     _connectionStatus: string,
  *     _videoTrack: Track
  * }}
  */
@@ -181,7 +185,7 @@ function _mapStateToProps(state, ownProps) {
 
     return {
         _avatar: participant && getAvatarURL(participant),
-        _isInLastN: participant && participant.isInLastN,
+        _connectionStatus: participant && participant.connectionStatus,
         _videoTrack:
             getTrackByMediaTypeAndParticipant(
                 state['features/base/tracks'],

react/features/base/participants/reducer.js

@@ -75,7 +75,7 @@ function _participant(state, action) {
             avatarURL,
             dominantSpeaker,
             email,
-            isInLastN,
+            connectionStatus,
             local,
             pinned,
             role
@@ -110,7 +110,7 @@ function _participant(state, action) {
             dominantSpeaker: dominantSpeaker || false,
             email,
             id,
-            isInLastN,
+            connectionStatus,
             local: local || false,
             name,
             pinned: pinned || false,