diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js index d1f795f98..3165dd32a 100644 --- a/modules/UI/shared_video/SharedVideo.js +++ b/modules/UI/shared_video/SharedVideo.js @@ -392,7 +392,7 @@ SharedVideoThumb.prototype.remove = function () { // Make sure that the large video is updated if are removing its // corresponding small video. - this.VideoLayout.updateRemovedVideo(this.id); + this.VideoLayout.updateAfterThumbRemoved(this.id); // Remove whole container if (this.container.parentNode) { diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index 59ad9123c..09eeaa7f2 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -191,7 +191,10 @@ LocalVideo.prototype.changeVideo = function (stream) { let endedHandler = () => { localVideoContainer.removeChild(localVideo); - this.VideoLayout.updateRemovedVideo(this.id); + // when removing only the video element and we are on stage + // update the stage + if(this.VideoLayout.isCurrentlyOnLarge(this.id)) + this.VideoLayout.updateLargeVideo(this.id); stream.off(TrackEvents.LOCAL_TRACK_STOPPED, endedHandler); }; stream.on(TrackEvents.LOCAL_TRACK_STOPPED, endedHandler); diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 37e752946..7747ea822 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -156,8 +156,10 @@ RemoteVideo.prototype.removeRemoteStreamElement = function (stream) { console.info((isVideo ? "Video" : "Audio") + " removed " + this.id, select); - if (isVideo) - this.VideoLayout.updateRemovedVideo(this.id); + // when removing only the video element and we are on stage + // update the stage + if (isVideo && this.VideoLayout.isCurrentlyOnLarge(this.id)) + this.VideoLayout.updateLargeVideo(this.id); }; /** @@ -168,7 +170,7 @@ RemoteVideo.prototype.remove = function () { this.removeConnectionIndicator(); // Make sure that the large video is updated if are removing its // corresponding small video. - this.VideoLayout.updateRemovedVideo(this.id); + this.VideoLayout.updateAfterThumbRemoved(this.id); // Remove whole container if (this.container.parentNode) { this.container.parentNode.removeChild(this.container); diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index f73ae3e1b..bfa844954 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -199,23 +199,22 @@ var VideoLayout = { /** * Checks if removed video is currently displayed and tries to display * another one instead. + * Uses focusedID if any or dominantSpeakerID if any, + * otherwise elects new video, in this order. */ - updateRemovedVideo (id) { + updateAfterThumbRemoved (id) { if (!this.isCurrentlyOnLarge(id)) { return; } let newId; - // We'll show user's avatar if he is the dominant speaker or if - // his video thumbnail is pinned - if (remoteVideos[id] && (id === pinnedId - || id === currentDominantSpeaker)) { - newId = id; - } else { - // Otherwise select last visible video + if (pinnedId) + newId = pinnedId; + else if (currentDominantSpeaker) + newId = currentDominantSpeaker; + else // Otherwise select last visible video newId = this.electLastVisibleVideo(); - } this.updateLargeVideo(newId); }, @@ -304,8 +303,7 @@ var VideoLayout = { */ handleVideoThumbClicked (id) { if(pinnedId) { - var oldSmallVideo - = VideoLayout.getSmallVideo(pinnedId); + var oldSmallVideo = VideoLayout.getSmallVideo(pinnedId); if (oldSmallVideo && !interfaceConfig.filmStripOnly) oldSmallVideo.focus(false); } @@ -978,8 +976,18 @@ var VideoLayout = { var oldSmallVideo = this.getSmallVideo(currentId); } - // if !show then use default type - large video - return largeVideo.showContainer(show ? type : VIDEO_CONTAINER_TYPE) + let containerTypeToShow = type; + // if we are hiding a container and there is focusedVideo + // (pinned remote video) use its video type, + // if not then use default type - large video + if (!show) { + if(pinnedId) + containerTypeToShow = this.getRemoteVideoType(pinnedId); + else + containerTypeToShow = VIDEO_CONTAINER_TYPE; + } + + return largeVideo.showContainer(containerTypeToShow) .then(() => { if(oldSmallVideo) oldSmallVideo && oldSmallVideo.updateView();