Re-implements last N related code to use the library. Fixes issues with resizeThumbnails. Fixes last N related event handling.

conference.js

@@ -518,8 +518,9 @@ export default {
                 // APP.UI.markVideoMuted(true/false);
             }
         });
-        room.on(ConferenceEvents.LAST_N_ENDPOINTS_CHANGED, (ids) => {
+        room.on(
-            APP.UI.handleLastNEndpoints(ids);
+            ConferenceEvents.LAST_N_ENDPOINTS_CHANGED, (ids, enteringIds) => {
+            APP.UI.handleLastNEndpoints(ids, enteringIds);
         });
         room.on(ConferenceEvents.DOMINANT_SPEAKER_CHANGED, (id) => {
             APP.UI.markDominantSpeaker(id);

modules/UI/UI.js

@@ -194,7 +194,7 @@ UI.notifyConferenceDestroyed = function (reason) {
 /**
  * Show chat error.
  * @param err the Error
- * @param msg 
+ * @param msg
  */
 UI.showChatError = function (err, msg) {
     if (interfaceConfig.filmStripOnly) {
@@ -766,8 +766,8 @@ UI.markDominantSpeaker = function (id) {
     VideoLayout.onDominantSpeakerChanged(id);
 };
 
-UI.handleLastNEndpoints = function (ids) {
+UI.handleLastNEndpoints = function (ids, enteringIds) {
-    VideoLayout.onLastNEndpointsChanged(ids, []);
+    VideoLayout.onLastNEndpointsChanged(ids, enteringIds);
 };
 
 /**

modules/UI/toolbars/BottomToolbar.js

@@ -65,7 +65,7 @@ const BottomToolbar = {
         return this.filmStrip.width();
     },
 
-    resizeThumbnails (thumbWidth, thumbHeight, animate = false) {
+    resizeThumbnails (thumbWidth, thumbHeight, animate = false, show = false) {
         return new Promise(resolve => {
             this.filmStrip.animate({
                 // adds 2 px because of small video 1px border
@@ -75,7 +75,7 @@ const BottomToolbar = {
                 duration: animate ? 500 : 0
             });
 
-            this.getThumbs().animate({
+            this.getThumbs(!show).animate({
                 height: thumbHeight,
                 width: thumbWidth
             }, {
@@ -95,9 +95,9 @@ const BottomToolbar = {
         this.toolbar.css({bottom});
     },
 
-    getThumbs (visible = false) {
+    getThumbs (only_visible = false) {
         let selector = 'span';
-        if (visible) {
+        if (only_visible) {
             selector += ':visible';
         }
 

modules/UI/videolayout/SmallVideo.js

@@ -18,6 +18,16 @@ function setVisibility(selector, show) {
     }
 }
 
+/**
+ * Indicates if this small video is currently visible.
+ *
+ * @return <tt>true</tt> if this small video isn't currently visible and
+ * <tt>false</tt> - otherwise.
+ */
+SmallVideo.prototype.isVisible = function () {
+    return $('#' + this.videoSpanId).is(':visible');
+};
+
 SmallVideo.prototype.showDisplayName = function(isShow) {
     var nameSpan = $('#' + this.videoSpanId + '>span.displayname').get(0);
     if (isShow) {

modules/UI/videolayout/VideoLayout.js

@@ -214,7 +214,8 @@ var VideoLayout = {
 
         // We'll show user's avatar if he is the dominant speaker or if
         // his video thumbnail is pinned
-        if (remoteVideos[id] && (id === focusedVideoResourceJid || id === currentDominantSpeaker)) {
+        if (remoteVideos[id] && (id === focusedVideoResourceJid
+                                || id === currentDominantSpeaker)) {
             newId = id;
         } else {
             // Otherwise select last visible video
@@ -357,7 +358,7 @@ var VideoLayout = {
             BottomToolbar.getThumbs().length >= localLastNCount + 2) {
             remoteVideo.showPeerContainer('hide');
         } else {
-            VideoLayout.resizeThumbnails();
+            VideoLayout.resizeThumbnails(false, true);
         }
     },
 
@@ -441,14 +442,15 @@ var VideoLayout = {
     /**
      * Resizes thumbnails.
      */
-    resizeThumbnails (animate = false) {
+    resizeThumbnails (animate = false, show = false) {
         let {thumbWidth, thumbHeight} = this.calculateThumbnailSize();
 
         $('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
 
-        BottomToolbar.resizeThumbnails(thumbWidth, thumbHeight, animate).then(function () {
+        BottomToolbar.resizeThumbnails(thumbWidth, thumbHeight, animate, show)
-            BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
+            .then(function () {
-            AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
+                BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
+                AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
         });
     },
 
@@ -616,7 +618,6 @@ var VideoLayout = {
 
         // Update the local LastN set preserving the order in which the
         // endpoints appeared in the LastN/local LastN set.
-
         var nextLocalLastNSet = lastNEndpoints.slice(0);
         for (var i = 0; i < localLastNSet.length; i++) {
             if (nextLocalLastNSet.length >= localLastNCount) {
@@ -635,6 +636,7 @@ var VideoLayout = {
         // Handle LastN/local LastN changes.
         BottomToolbar.getThumbs().each(( index, element ) => {
             var resourceJid = getPeerContainerResourceId(element);
+            var smallVideo = remoteVideos[resourceJid];
 
             // We do not want to process any logic for our own(local) video
             // because the local participant is never in the lastN set.
@@ -651,17 +653,17 @@ var VideoLayout = {
                 lastNEndpoints.indexOf(resourceJid) < 0 &&
                 localLastNSet.indexOf(resourceJid) < 0) {
                 console.log("Remove from last N", resourceJid);
-                if (remoteVideos[resourceJid])
+                if (smallVideo)
-                    remoteVideos[resourceJid].showPeerContainer('hide');
+                    smallVideo.showPeerContainer('hide');
                 else if (!APP.conference.isLocalId(resourceJid))
                     console.error("No remote video for: " + resourceJid);
                 isReceived = false;
             } else if (resourceJid &&
-                $('#participant_' + resourceJid).is(':visible') &&
+                smallVideo.isVisible() &&
                 lastNEndpoints.indexOf(resourceJid) < 0 &&
                 localLastNSet.indexOf(resourceJid) >= 0) {
-                if (remoteVideos[resourceJid])
+                if (smallVideo)
-                    remoteVideos[resourceJid].showPeerContainer('avatar');
+                    smallVideo.showPeerContainer('avatar');
                 else if (!APP.conference.isLocalId(resourceJid))
                     console.error("No remote video for: " + resourceJid);
                 isReceived = false;
@@ -685,19 +687,15 @@ var VideoLayout = {
         if (endpointsEnteringLastN && endpointsEnteringLastN.length > 0) {
             endpointsEnteringLastN.forEach(function (resourceJid) {
 
-                var isVisible = $('#participant_' + resourceJid).is(':visible');
                 var remoteVideo = remoteVideos[resourceJid];
                 remoteVideo.showPeerContainer('show');
-                if (!isVisible) {
+
+                if (!remoteVideo.isVisible()) {
                     console.log("Add to last N", resourceJid);
 
-                    var jid = APP.xmpp.findJidFromResource(resourceJid);
+                    remoteVideo.addRemoteStreamElement(remoteVideo.stream);
-                    var mediaStream =
-                        APP.RTC.remoteStreams[jid]['video'];
-                    var sel = remoteVideo.selectVideoElement();
 
-                    APP.RTC.attachMediaStream(sel, mediaStream.stream);
+                    if (lastNPickupId == resourceJid) {
-                    if (lastNPickupId == mediaStream.peerjid) {
                         // Clean up the lastN pickup id.
                         lastNPickupId = null;
 
@@ -705,12 +703,12 @@ var VideoLayout = {
                         // been fired in the contact list click handler.
                         VideoLayout.handleVideoThumbClicked(
                             false,
-                            Strophe.getResourceFromJid(mediaStream.peerjid));
+                            resourceJid);
 
                         updateLargeVideo = false;
                     }
-                    remoteVideos[resourceJid].
+                    remoteVideo.waitForPlayback(
-                        waitForPlayback(sel, mediaStream);
+                        remoteVideo.selectVideoElement(), remoteVideo.stream);
                 }
             });
         }