diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index b7127218e..9f84fbe84 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -435,6 +435,19 @@ var VideoLayout = { remoteVideo = new RemoteVideo(user, VideoLayout, eventEmitter); this._setRemoteControlProperties(user, remoteVideo); this.addRemoteVideoContainer(id, remoteVideo); + + const remoteVideosCount = Object.keys(remoteVideos).length; + + if (remoteVideosCount === 1) { + window.setTimeout(() => { + const updatedRemoteVideosCount + = Object.keys(remoteVideos).length; + + if (updatedRemoteVideosCount === 1 && remoteVideos[id]) { + this._maybePlaceParticipantOnLargeVideo(id); + } + }, 3000); + } }, /** @@ -465,11 +478,24 @@ var VideoLayout = { logger.info(resourceJid + " video is now active", videoElement); VideoLayout.resizeThumbnails( - false, false, function() {$(videoElement).show();}); + false, false, () => { + if (videoElement) { + $(videoElement).show(); + } + }); - // Update the large video to the last added video only if there's no - // current dominant, focused speaker or update it to - // the current dominant speaker. + this._maybePlaceParticipantOnLargeVideo(resourceJid); + }, + + /** + * Update the large video to the last added video only if there's no current + * dominant, focused speaker or update it to the current dominant speaker. + * + * @params {string} resourceJid - The id of the user to maybe display on + * large video. + * @returns {void} + */ + _maybePlaceParticipantOnLargeVideo(resourceJid) { if ((!pinnedId && !currentDominantSpeaker && this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE)) ||