ref(thumbnail): use connectionStatus from redux.

conference.js

@@ -1134,20 +1134,6 @@ export default {
         return room ? room.getParticipantById(id) : null;
     },
 
-    /**
-     * Get participant connection status for the participant.
-     *
-     * @param {string} id participant's identifier(MUC nickname)
-     *
-     * @returns {ParticipantConnectionStatus|null} the status of the participant
-     * or null if no such participant is found or participant is the local user.
-     */
-    getParticipantConnectionStatus(id) {
-        const participant = this.getParticipantById(id);
-
-        return participant ? participant.getConnectionStatus() : null;
-    },
-
     /**
      * Gets the display name foe the <tt>JitsiParticipant</tt> identified by
      * the given <tt>id</tt>.

modules/UI/videolayout/LargeVideoManager.js

@@ -12,6 +12,7 @@ import {
     JitsiParticipantConnectionStatus
 } from '../../../react/features/base/lib-jitsi-meet';
 import { VIDEO_TYPE } from '../../../react/features/base/media';
+import { getParticipantById } from '../../../react/features/base/participants';
 import { CHAT_SIZE } from '../../../react/features/chat';
 import {
     updateKnownLargeVideoResolution
@@ -224,9 +225,8 @@ export default class LargeVideoManager {
             const wasUsersImageCached
                 = !isUserSwitch && container.wasVideoRendered;
             const isVideoMuted = !stream || stream.isMuted();
-
-            const connectionStatus
-                = APP.conference.getParticipantConnectionStatus(id);
+            const participant = getParticipantById(APP.store.getState(), id);
+            const connectionStatus = participant?.connectionStatus;
             const isVideoRenderable
                 = !isVideoMuted
                     && (APP.conference.isLocalId(id)
@@ -479,8 +479,8 @@ export default class LargeVideoManager {
      */
     showRemoteConnectionMessage(show) {
         if (typeof show !== 'boolean') {
-            const connStatus
-                = APP.conference.getParticipantConnectionStatus(this.id);
+            const participant = getParticipantById(APP.store.getState(), this.id);
+            const connStatus = participant?.connectionStatus;
 
             // eslint-disable-next-line no-param-reassign
             show = !APP.conference.isLocalId(this.id)

modules/UI/videolayout/RemoteVideo.js

@@ -323,9 +323,11 @@ export default class RemoteVideo extends SmallVideo {
      * @private
      */
     _figureOutMutedWhileDisconnected() {
-        const isActive = this.isConnectionActive();
-        const isVideoMuted
-            = isRemoteTrackMuted(APP.store.getState()['features/base/tracks'], MEDIA_TYPE.VIDEO, this.id);
+        const state = APP.store.getState();
+        const participant = getParticipantById(state, this.id);
+        const connectionState = participant?.connectionStatus;
+        const isActive = connectionState === JitsiParticipantConnectionStatus.ACTIVE;
+        const isVideoMuted = isRemoteTrackMuted(state['features/base/tracks'], MEDIA_TYPE.VIDEO, this.id);
 
         if (!isActive && isVideoMuted) {
             this.mutedWhileDisconnected = true;
@@ -364,17 +366,6 @@ export default class RemoteVideo extends SmallVideo {
         this.updateView();
     }
 
-    /**
-     * Checks whether the remote user associated with this <tt>RemoteVideo</tt>
-     * has connectivity issues.
-     *
-     * @return {boolean} <tt>true</tt> if the user's connection is fine or
-     * <tt>false</tt> otherwise.
-     */
-    isConnectionActive() {
-        return this.user.getConnectionStatus() === JitsiParticipantConnectionStatus.ACTIVE;
-    }
-
     /**
      * The remote video is considered "playable" once the can play event has been received. It will be allowed to
      * display video also in {@link JitsiParticipantConnectionStatus.INTERRUPTED} if the video has received the canplay
@@ -386,7 +377,8 @@ export default class RemoteVideo extends SmallVideo {
      * @override
      */
     isVideoPlayable() {
-        const connectionState = APP.conference.getParticipantConnectionStatus(this.id);
+        const participant = getParticipantById(APP.store.getState(), this.id);
+        const connectionState = participant?.connectionStatus;
 
         return super.isVideoPlayable()
             && this._canPlayEventReceived
@@ -399,25 +391,8 @@ export default class RemoteVideo extends SmallVideo {
      */
     updateView() {
         this.$container.toggleClass('audio-only', APP.conference.isAudioOnly());
-        this.updateConnectionStatusIndicator();
-
-        // This must be called after 'updateConnectionStatusIndicator' because it
-        // affects the display mode by modifying 'mutedWhileDisconnected' flag
-        super.updateView();
-    }
-
-    /**
-     * Updates the UI to reflect user's connectivity status.
-     */
-    updateConnectionStatusIndicator() {
-        const connectionStatus = this.user.getConnectionStatus();
-
-        logger.debug(`${this.id} thumbnail connection status: ${connectionStatus}`);
-
-        // FIXME rename 'mutedWhileDisconnected' to 'mutedWhileNotRendering'
-        // Update 'mutedWhileDisconnected' flag
         this._figureOutMutedWhileDisconnected();
-        this.updateConnectionStatus(connectionStatus);
+        super.updateView();
     }
 
     /**

modules/UI/videolayout/SmallVideo.js

@@ -95,16 +95,6 @@ export default class SmallVideo {
         this.videoIsHovered = false;
         this.videoType = undefined;
 
-        /**
-         * The current state of the user's bridge connection. The value should be
-         * a string as enumerated in the library's participantConnectionStatus
-         * constants.
-         *
-         * @private
-         * @type {string|null}
-         */
-        this._connectionStatus = null;
-
         /**
          * Whether or not the connection indicator should be displayed.
          *
@@ -210,16 +200,6 @@ export default class SmallVideo {
         this.updateIndicators();
     }
 
-    /**
-     * Updates the connectionStatus stat which displays in the ConnectionIndicator.
-
-    * @returns {void}
-    */
-    updateConnectionStatus(connectionStatus) {
-        this._connectionStatus = connectionStatus;
-        this.updateIndicators();
-    }
-
     /**
      * Create or updates the ReactElement for displaying status indicators about
      * audio mute, video mute, and moderator status.
@@ -453,6 +433,7 @@ export default class SmallVideo {
      */
     computeDisplayModeInput() {
         let isScreenSharing = false;
+        let connectionStatus;
         const state = APP.store.getState();
         const participant = getParticipantById(state, this.id);
 
@@ -461,6 +442,7 @@ export default class SmallVideo {
             const track = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, this.id);
 
             isScreenSharing = typeof track !== 'undefined' && track.videoType === 'desktop';
+            connectionStatus = participant.connectionStatus;
         }
 
         return {
@@ -470,7 +452,7 @@ export default class SmallVideo {
             tileViewActive: shouldDisplayTileView(state),
             isVideoPlayable: this.isVideoPlayable(),
             hasVideo: Boolean(this.selectVideoElement().length),
-            connectionStatus: APP.conference.getParticipantConnectionStatus(this.id),
+            connectionStatus,
             mutedWhileDisconnected: this.mutedWhileDisconnected,
             canPlayEventReceived: this._canPlayEventReceived,
             videoStream: Boolean(this.videoStream),
@@ -714,7 +696,6 @@ export default class SmallVideo {
                             { this._showConnectionIndicator
                                 ? <ConnectionIndicator
                                     alwaysVisible = { showConnectionIndicator }
-                                    connectionStatus = { this._connectionStatus }
                                     iconSize = { iconSize }
                                     isLocalVideo = { this.isLocal }
                                     enableStatsDisplay = { !interfaceConfig.filmStripOnly }

react/features/base/conference/functions.js

@@ -73,6 +73,7 @@ export function commonUserJoinedHandling(
     } else {
         dispatch(participantJoined({
             botType: user.getBotType(),
+            connectionStatus: user.getConnectionStatus(),
             conference,
             id,
             name: displayName,

react/features/connection-indicator/components/web/ConnectionIndicator.js

@@ -7,6 +7,7 @@ import { translate } from '../../../base/i18n';
 import { Icon, IconConnectionActive, IconConnectionInactive } from '../../../base/icons';
 import { JitsiParticipantConnectionStatus } from '../../../base/lib-jitsi-meet';
 import { MEDIA_TYPE } from '../../../base/media';
+import { getLocalParticipant, getParticipantById } from '../../../base/participants';
 import { Popover } from '../../../base/popover';
 import { connect } from '../../../base/redux';
 import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
@@ -61,6 +62,12 @@ const QUALITY_TO_WIDTH: Array<Object> = [
  */
 type Props = AbstractProps & {
 
+    /**
+     * The current condition of the user's connection, matching one of the
+     * enumerated values in the library.
+     */
+    _connectionStatus: string,
+
     /**
      * Whether or not the component should ignore setting a visibility class for
      * hiding the component when the connection quality is not strong.
@@ -72,12 +79,6 @@ type Props = AbstractProps & {
      */
     audioSsrc: number,
 
-    /**
-     * The current condition of the user's connection, matching one of the
-     * enumerated values in the library.
-     */
-    connectionStatus: string,
-
     /**
      * The Redux dispatch function.
      */
@@ -200,13 +201,13 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
      * @returns {string}
      */
     _getConnectionColorClass() {
-        const { connectionStatus } = this.props;
+        const { _connectionStatus } = this.props;
         const { percent } = this.state.stats;
         const { INACTIVE, INTERRUPTED } = JitsiParticipantConnectionStatus;
 
-        if (connectionStatus === INACTIVE) {
+        if (_connectionStatus === INACTIVE) {
             return 'status-other';
-        } else if (connectionStatus === INTERRUPTED) {
+        } else if (_connectionStatus === INTERRUPTED) {
             return 'status-lost';
         } else if (typeof percent === 'undefined') {
             return 'status-high';
@@ -224,7 +225,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
     _getConnectionStatusTip() {
         let tipKey;
 
-        switch (this.props.connectionStatus) {
+        switch (this.props._connectionStatus) {
         case JitsiParticipantConnectionStatus.INTERRUPTED:
             tipKey = 'connectionindicator.quality.lost';
             break;
@@ -275,12 +276,12 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
      * @returns {string}
      */
     _getVisibilityClass() {
-        const { connectionStatus } = this.props;
+        const { _connectionStatus } = this.props;
 
         return this.state.showIndicator
             || this.props.alwaysVisible
-            || connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED
-            || connectionStatus === JitsiParticipantConnectionStatus.INACTIVE
+            || _connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED
+            || _connectionStatus === JitsiParticipantConnectionStatus.INACTIVE
             ? 'show-connection-indicator' : 'hide-connection-indicator';
     }
 
@@ -304,7 +305,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
      * @returns {ReactElement}
      */
     _renderIcon() {
-        if (this.props.connectionStatus
+        if (this.props._connectionStatus
             === JitsiParticipantConnectionStatus.INACTIVE) {
             return (
                 <span className = 'connection_ninja'>
@@ -319,7 +320,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
         let iconWidth;
         let emptyIconWrapperClassName = 'connection_empty';
 
-        if (this.props.connectionStatus
+        if (this.props._connectionStatus
             === JitsiParticipantConnectionStatus.INTERRUPTED) {
 
             // emptyIconWrapperClassName is used by the torture tests to
@@ -434,21 +435,29 @@ export function _mapDispatchToProps(dispatch: Dispatch<any>) {
  * @returns {Props}
  */
 export function _mapStateToProps(state: Object, ownProps: Props) {
-
+    const { participantId } = ownProps;
     const conference = state['features/base/conference'].conference;
+    const participant
+        = typeof participantId === 'undefined' ? getLocalParticipant(state) : getParticipantById(state, participantId);
+    const props = {
+        _connectionStatus: participant?.connectionStatus
+    };
 
     if (conference) {
         const firstVideoTrack = getTrackByMediaTypeAndParticipant(
-            state['features/base/tracks'], MEDIA_TYPE.VIDEO, ownProps.participantId);
+            state['features/base/tracks'], MEDIA_TYPE.VIDEO, participantId);
         const firstAudioTrack = getTrackByMediaTypeAndParticipant(
-            state['features/base/tracks'], MEDIA_TYPE.AUDIO, ownProps.participantId);
+            state['features/base/tracks'], MEDIA_TYPE.AUDIO, participantId);
 
         return {
+            ...props,
             audioSsrc: firstAudioTrack ? conference.getSsrcByTrack(firstAudioTrack.jitsiTrack) : undefined,
             videoSsrc: firstVideoTrack ? conference.getSsrcByTrack(firstVideoTrack.jitsiTrack) : undefined
         };
     }
 
-    return {};
+    return {
+        ...props
+    };
 }
 export default translate(connect(_mapStateToProps, _mapDispatchToProps)(ConnectionIndicator));