Merge pull request #515 from damencho/handle-track-removed

Handles track removed and removes video elements. Tested by starting/stopping desktop sharing several times and we only have one video and one audio element after the PR is applied.

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

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

modules/UI/videolayout/RemoteVideo.js

@@ -143,14 +143,16 @@ if (!interfaceConfig.filmStripOnly) {
  * @param stream the MediaStream
  * @param isVideo <tt>true</tt> if given <tt>stream</tt> is a video one.
  */
-RemoteVideo.prototype.removeRemoteStreamElement =
+RemoteVideo.prototype.removeRemoteStreamElement = function (stream) {
-    function (stream, isVideo, id) {
     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');

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.
  */

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