From 9a06d2bf5267daeb2fca9edb2dbd1a206a5f2aea Mon Sep 17 00:00:00 2001 From: virtuacoplenny Date: Mon, 25 Jun 2018 10:44:12 -0700 Subject: [PATCH] ref(video-layout): consolidate connection status update handling (#3185) - Instead of having 4 listeners for local connection status updates and 1 for remote, remove two of the redundant listeners. - Instead of calling into 4 separate VideoLayout methods to update a participant's connection status, expose one handler. --- conference.js | 12 --- modules/UI/UI.js | 23 ------ modules/UI/videolayout/VideoLayout.js | 74 ++++++------------- react/features/video-layout/middleware.web.js | 3 +- 4 files changed, 26 insertions(+), 86 deletions(-) diff --git a/conference.js b/conference.js index 9a6afa8b9..e4ba03115 100644 --- a/conference.js +++ b/conference.js @@ -1785,13 +1785,6 @@ export default { id => APP.store.dispatch(dominantSpeakerChanged(id, room))); if (!interfaceConfig.filmStripOnly) { - room.on(JitsiConferenceEvents.CONNECTION_INTERRUPTED, () => { - APP.UI.markVideoInterrupted(true); - }); - room.on(JitsiConferenceEvents.CONNECTION_RESTORED, () => { - APP.UI.markVideoInterrupted(false); - }); - if (isButtonEnabled('chat')) { room.on( JitsiConferenceEvents.MESSAGE_RECEIVED, @@ -1841,15 +1834,11 @@ export default { room.on(JitsiConferenceEvents.CONNECTION_INTERRUPTED, () => { APP.store.dispatch(localParticipantConnectionStatusChanged( JitsiParticipantConnectionStatus.INTERRUPTED)); - - APP.UI.showLocalConnectionInterrupted(true); }); room.on(JitsiConferenceEvents.CONNECTION_RESTORED, () => { APP.store.dispatch(localParticipantConnectionStatusChanged( JitsiParticipantConnectionStatus.ACTIVE)); - - APP.UI.showLocalConnectionInterrupted(false); }); room.on( @@ -2317,7 +2306,6 @@ export default { APP.store.getState(), this._room.myUserId()) } ); - APP.UI.markVideoInterrupted(false); }, /** diff --git a/modules/UI/UI.js b/modules/UI/UI.js index c4351d6a4..dcb48c3f1 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -199,17 +199,6 @@ UI.changeDisplayName = function(id, displayName) { } }; -/** - * Shows/hides the indication about local connection being interrupted. - * - * @param {boolean} isInterrupted true if local connection is - * currently in the interrupted state or false if the connection - * is fine. - */ -UI.showLocalConnectionInterrupted = function(isInterrupted) { - VideoLayout.showLocalConnectionInterrupted(isInterrupted); -}; - /** * Sets the "raised hand" status for a participant. * @@ -774,18 +763,6 @@ UI.hideStats = function() { VideoLayout.hideStats(); }; -/** - * Mark video as interrupted or not. - * @param {boolean} interrupted if video is interrupted - */ -UI.markVideoInterrupted = function(interrupted) { - if (interrupted) { - VideoLayout.onVideoInterrupted(); - } else { - VideoLayout.onVideoRestored(); - } -}; - /** * Add chat message. * @param {string} from user id diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 1fda015bd..60c0b3800 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -583,25 +583,6 @@ const VideoLayout = { localVideoThumbnail.showAudioIndicator(isMuted); }, - /** - * Shows/hides the indication about local connection being interrupted. - * - * @param {boolean} isInterrupted true if local connection is - * currently in the interrupted state or false if the connection - * is fine. - */ - showLocalConnectionInterrupted(isInterrupted) { - // Currently local video thumbnail displays only "active" or - // "interrupted" despite the fact that ConnectionIndicator supports more - // states. - const status - = isInterrupted - ? JitsiParticipantConnectionStatus.INTERRUPTED - : JitsiParticipantConnectionStatus.ACTIVE; - - localVideoThumbnail.updateConnectionStatus(status); - }, - /** * Resizes thumbnails. */ @@ -715,22 +696,31 @@ const VideoLayout = { }, /** - * Shows/hides warning about remote user's connectivity issues. + * Shows/hides warning about a user's connectivity issues. * - * @param {string} id the ID of the remote participant(MUC nickname) + * @param {string} id - The ID of the remote participant(MUC nickname). + * @param {status} status - The new connection status. + * @returns {void} */ - // eslint-disable-next-line no-unused-vars - onParticipantConnectionStatusChanged(id) { - // Show/hide warning on the large video - if (this.isCurrentlyOnLarge(id)) { - if (largeVideo) { - // We have to trigger full large video update to transition from - // avatar to video on connectivity restored. - this.updateLargeVideo(id, true /* force update */); + onParticipantConnectionStatusChanged(id, status) { + if (APP.conference.isLocalId(id)) { + // Maintain old logic of passing in either interrupted or active + // to updateConnectionStatus. + localVideoThumbnail.updateConnectionStatus(status); + + if (status === JitsiParticipantConnectionStatus.INTERRUPTED) { + largeVideo && largeVideo.onVideoInterrupted(); + } else { + largeVideo && largeVideo.onVideoRestored(); } + + return; } - // Show/hide warning on the thumbnail + // We have to trigger full large video update to transition from + // avatar to video on connectivity restored. + this._updateLargeVideoIfDisplayed(id, true); + const remoteVideo = remoteVideos[id]; if (remoteVideo) { @@ -905,24 +895,6 @@ const VideoLayout = { } }, - /** - * Indicates that the video has been interrupted. - */ - onVideoInterrupted() { - if (largeVideo) { - largeVideo.onVideoInterrupted(); - } - }, - - /** - * Indicates that the video has been restored. - */ - onVideoRestored() { - if (largeVideo) { - largeVideo.onVideoRestored(); - } - }, - isLargeVideoVisible() { return this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE); }, @@ -1176,11 +1148,13 @@ const VideoLayout = { * * @param {string} participantId - The participant ID that should trigger an * update of large video if displayed. + * @param {boolean} force - Whether or not the large video update should + * happen no matter what. * @returns {void} */ - _updateLargeVideoIfDisplayed(participantId) { + _updateLargeVideoIfDisplayed(participantId, force = false) { if (this.isCurrentlyOnLarge(participantId)) { - this.updateLargeVideo(participantId); + this.updateLargeVideo(participantId, force); } } }; diff --git a/react/features/video-layout/middleware.web.js b/react/features/video-layout/middleware.web.js index 9ae4b453d..35eb1f305 100644 --- a/react/features/video-layout/middleware.web.js +++ b/react/features/video-layout/middleware.web.js @@ -53,7 +53,8 @@ MiddlewareRegistry.register(store => next => action => { // explicit in order to minimize changes to other code. if (typeof action.participant.connectionStatus !== 'undefined') { VideoLayout.onParticipantConnectionStatusChanged( - action.participant.id); + action.participant.id, + action.participant.connectionStatus); } break; }