Merge pull request #545 from damencho/fix-video-switching-on-hide-container

Fix video switching on hide container

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) {

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);

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);

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();