From f45af351d8f4a158804d8cbb326d2490862323fc Mon Sep 17 00:00:00 2001 From: Hristo Terezov Date: Wed, 28 Oct 2020 15:06:59 -0500 Subject: [PATCH] ref(thumbnail): use connectionStatus from redux. --- conference.js | 14 ------ modules/UI/videolayout/LargeVideoManager.js | 10 ++-- modules/UI/videolayout/RemoteVideo.js | 41 ++++------------ modules/UI/videolayout/SmallVideo.js | 25 ++-------- react/features/base/conference/functions.js | 1 + .../components/web/ConnectionIndicator.js | 47 +++++++++++-------- 6 files changed, 45 insertions(+), 93 deletions(-) diff --git a/conference.js b/conference.js index 5786b31b0..0726c32c3 100644 --- a/conference.js +++ b/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 JitsiParticipant identified by * the given id. diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index 7b1e8c892..4d78e7a03 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/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) diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 749a7f227..1c42be74c 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/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 RemoteVideo - * has connectivity issues. - * - * @return {boolean} true if the user's connection is fine or - * false 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(); } /** diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 76cc6a0bf..107f23ff4 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/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 ? = [ */ 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 { * @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 { _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 { * @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 { * @returns {ReactElement} */ _renderIcon() { - if (this.props.connectionStatus + if (this.props._connectionStatus === JitsiParticipantConnectionStatus.INACTIVE) { return ( @@ -319,7 +320,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator { 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) { * @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));