diff --git a/conference.js b/conference.js index 1076a520fe..8c7b4ac114 100644 --- a/conference.js +++ b/conference.js @@ -1305,8 +1305,9 @@ export default { }); room.on( - ConferenceEvents.LAST_N_ENDPOINTS_CHANGED, (ids, enteringIds) => { - APP.UI.handleLastNEndpoints(ids, enteringIds); + ConferenceEvents.LAST_N_ENDPOINTS_CHANGED, + (leavingIds, enteringIds) => { + APP.UI.handleLastNEndpoints(leavingIds, enteringIds); }); room.on( diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 1ba3b06d07..75a05522d4 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -837,8 +837,8 @@ UI.markDominantSpeaker = function (id) { VideoLayout.onDominantSpeakerChanged(id); }; -UI.handleLastNEndpoints = function (ids, enteringIds) { - VideoLayout.onLastNEndpointsChanged(ids, enteringIds); +UI.handleLastNEndpoints = function (leavingIds, enteringIds) { + VideoLayout.onLastNEndpointsChanged(leavingIds, enteringIds); }; /** diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 30a3aca850..734a4ed701 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -687,27 +687,34 @@ var VideoLayout = { /** * On last N change event. * - * @param lastNEndpoints the list of last N endpoints + * @param endpointsLeavingLastN the list currently leaving last N + * endpoints * @param endpointsEnteringLastN the list currently entering last N * endpoints */ - onLastNEndpointsChanged (lastNEndpoints, endpointsEnteringLastN) { - - Object.keys(remoteVideos).forEach( - id => { - if (lastNEndpoints.length > 0 - && lastNEndpoints.indexOf(id) < 0 - || endpointsEnteringLastN.length > 0 - && endpointsEnteringLastN.indexOf(id) > 0) { - - let remoteVideo = (id) ? remoteVideos[id] : null; - if (remoteVideo) { - remoteVideo.updateView(); - if (remoteVideo.isCurrentlyOnLargeVideo()) - this.updateLargeVideo(id); - } - } - }); + onLastNEndpointsChanged (endpointsLeavingLastN, endpointsEnteringLastN) { + if (endpointsLeavingLastN) { + endpointsLeavingLastN.forEach(this._updateRemoteVideo, this); + } + + if (endpointsEnteringLastN) { + endpointsEnteringLastN.forEach(this._updateRemoteVideo, this); + } + }, + + /** + * Updates remote video by id if it exists. + * @param {string} id of the remote video + * @private + */ + _updateRemoteVideo(id) { + const remoteVideo = remoteVideos[id]; + if (remoteVideo) { + remoteVideo.updateView(); + if (remoteVideo.isCurrentlyOnLargeVideo()) { + this.updateLargeVideo(id); + } + } }, /**