diff --git a/conference.js b/conference.js index 192a65a6b..0fd7e8d31 100644 --- a/conference.js +++ b/conference.js @@ -670,7 +670,10 @@ export default { }); room.on(ConferenceEvents.TRACK_REMOVED, (track) => { - // FIXME handle + if(!track || track.isLocal()) + return; + + APP.UI.removeRemoteStream(track); }); room.on(ConferenceEvents.TRACK_MUTE_CHANGED, (track) => { diff --git a/modules/UI/UI.js b/modules/UI/UI.js index e1b77e2f2..c75c7b926 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -444,6 +444,14 @@ UI.addRemoteStream = function (track) { VideoLayout.onRemoteStreamAdded(track); }; +/** + * Removed remote stream from UI. + * @param {JitsiTrack} track stream to remove + */ +UI.removeRemoteStream = function (track) { + VideoLayout.onRemoteStreamRemoved(track); +}; + function chatAddError(errorMessage, originalText) { return Chat.chatAddError(errorMessage, originalText); } diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 7683c671f..f0bb32155 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -143,14 +143,16 @@ if (!interfaceConfig.filmStripOnly) { * @param stream the MediaStream * @param isVideo true if given stream is a video one. */ -RemoteVideo.prototype.removeRemoteStreamElement = - function (stream, isVideo, id) { +RemoteVideo.prototype.removeRemoteStreamElement = function (stream) { if (!this.container) return false; + var isVideo = stream.isVideoTrack(); + + var elementID = SmallVideo.getStreamElementID(stream); var select = null; if (isVideo) { - select = $('#' + id); + select = $('#' + elementID); } else select = $('#' + this.videoSpanId + '>audio'); diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 2ea5d87ea..e55eafec6 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -129,7 +129,7 @@ SmallVideo.createStreamElement = function (stream) { RTCUIHelper.setAutoPlay(element, true); - element.id = (isVideo ? 'remoteVideo_' : 'remoteAudio_') + stream.getId(); + element.id = SmallVideo.getStreamElementID(stream); element.onplay = function () { console.log("(TIME) Render " + (isVideo ? 'video' : 'audio') + ":\t", @@ -141,6 +141,15 @@ SmallVideo.createStreamElement = function (stream) { return element; }; +/** + * Returns the element id for a particular MediaStream. + */ +SmallVideo.getStreamElementID = function (stream) { + let isVideo = stream.isVideoTrack(); + + return (isVideo ? 'remoteVideo_' : 'remoteAudio_') + stream.getId(); +}; + /** * Configures hoverIn/hoverOut handlers. */ diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 15502b3ee..b7f20e1e2 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -269,6 +269,11 @@ var VideoLayout = { } }, + onRemoteStreamRemoved (stream) { + let id = stream.getParticipantId(); + remoteVideos[id].removeRemoteStreamElement(stream); + }, + /** * Return the type of the remote video. * @param id the id for the remote video