diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index c0185a3bc..e3d19b629 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -168,6 +168,9 @@ RemoteVideo.prototype.removeRemoteStreamElement = RemoteVideo.prototype.remove = function () { console.log("Remove thumbnail", this.peerJid); this.removeConnectionIndicator(); + // Make sure that the large video is updated if are removing its + // corresponding small video. + this.VideoLayout.updateRemovedVideo(this.getResourceJid()); // Remove whole container if (this.container.parentNode) this.container.parentNode.removeChild(this.container); @@ -233,19 +236,6 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) { }; - /** - * FF is missing onended event for remote streams. The problem we are fixing - * here is when the last participant leaves the room the video element is - * not updated. So the avatar or last video frame will stay, the fix updates - * the video elem and switches to local video the same as behavior in other - * browsers. - */ - if (RTCBrowserType.isFirefox()) { - APP.xmpp.addListener(XMPPEvents.MUC_MEMBER_LEFT, function (jid) { - self.removeRemoteStreamElement(stream, isVideo, newElementId); - }); - } - // Add click handler. var onClickHandler = function (event) { diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 0bc817e3d..1154bbd75 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -126,12 +126,11 @@ var VideoLayout = (function (my) { /** * Checks if removed video is currently displayed and tries to display * another one instead. - * @param removedVideoSrc src stream identifier of the video. */ my.updateRemovedVideo = function(resourceJid) { + var newResourceJid; if (resourceJid === LargeVideo.getResourceJid()) { - var newResourceJid; // We'll show user's avatar if he is the dominant speaker or if // his video thumbnail is pinned if (remoteVideos[resourceJid] && @@ -153,18 +152,32 @@ var VideoLayout = (function (my) { var pick = $('#remoteVideos>span[id!="mixedstream"]:visible:last'); if (pick.length) { jid = VideoLayout.getPeerContainerResourceJid(pick[0]); - } else { + if (!remoteVideos[jid]) { + // The RemoteVideo was removed (but the DOM elements may still + // exist). + jid = null; + } + } + + if (!jid) { console.info("Last visible video no longer exists"); pick = $('#remoteVideos>span[id!="mixedstream"]'); if (pick.length) { jid = VideoLayout.getPeerContainerResourceJid(pick[0]); - } - if (!jid) { - // Go with local video - console.info("Fallback to local video..."); - jid = APP.xmpp.myResource(); + if (!remoteVideos[jid]) { + // The RemoteVideo was removed (but the DOM elements may + // still exist). + jid = null; + } } } + + if (!jid) { + // Go with local video + console.info("Fallback to local video..."); + jid = APP.xmpp.myResource(); + } + console.info("electLastVisibleVideo: " + jid); return jid; }; @@ -830,8 +843,7 @@ var VideoLayout = (function (my) { focusedVideoResourceJid = null; } - if (currentDominantSpeaker === resourceJid) - { + if (currentDominantSpeaker === resourceJid) { console.info("Dominant speaker has left the conference"); currentDominantSpeaker = null; } @@ -840,8 +852,8 @@ var VideoLayout = (function (my) { if (remoteVideo) { // Remove remote video console.info("Removing remote video: " + resourceJid); - remoteVideo.remove(); delete remoteVideos[resourceJid]; + remoteVideo.remove(); } else { console.warn("No remote video for " + resourceJid); }