Fixes thumbnail resize and thumbnails going on a second row. Refactors code around the film strip and resize in general.

interface_config.js

      */
     filmStripOnly: false,
     RANDOM_AVATAR_URL_PREFIX: false,
-    RANDOM_AVATAR_URL_SUFFIX: false
+    RANDOM_AVATAR_URL_SUFFIX: false,
+    FILM_STRIP_MAX_HEIGHT: 160
 };

modules/UI/UI.js

 import EtherpadManager from './etherpad/Etherpad';
 
 import VideoLayout from "./videolayout/VideoLayout";
+import FilmStrip from "./videolayout/FilmStrip";
 import SettingsMenu from "./side_pannels/settings/SettingsMenu";
 import Settings from "./../settings/Settings";
 import { reload } from '../util/helpers';
 function bindEvents() {
     function onResize() {
         PanelToggler.resizeChat();
-        VideoLayout.resizeLargeVideoContainer(PanelToggler.isVisible());
+        VideoLayout.resizeVideoArea(PanelToggler.isVisible());
     }
 
     // Resize and reposition videos in full screen mode.
     registerListeners();
 
     BottomToolbar.init();
+    FilmStrip.init();
 
     VideoLayout.init(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
         VideoLayout.initLargeVideo(PanelToggler.isVisible());
     }
-    VideoLayout.resizeLargeVideoContainer(PanelToggler.isVisible(), true);
+    VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, true);
 
     ContactList.init(eventEmitter);
 
         });
     } else {
         $("#header").css("display", "none");
-        $("#bottomToolbar").css("display", "none");
         $("#downloadlog").css("display", "none");
-        BottomToolbar.setupFilmStripOnly();
+        BottomToolbar.hide();
+        FilmStrip.setupFilmStripOnly();
         messageHandler.disableNotifications();
         $('body').popover("disable");
         JitsiPopover.enabled = false;
  * Toggles film strip.
  */
 UI.toggleFilmStrip = function () {
-    BottomToolbar.toggleFilmStrip();
+    FilmStrip.toggleFilmStrip();
 };
 
 /**

modules/UI/audio_levels/AudioLevels.js

 /* jshint -W101 */
 
 import CanvasUtil from './CanvasUtils';
-import BottomToolbar from '../toolbars/BottomToolbar';
+import FilmStrip from '../videolayout/FilmStrip';
 
 const LOCAL_LEVEL = 'local';
 
         let canvasWidth = thumbWidth + interfaceConfig.CANVAS_EXTRA;
         let canvasHeight = thumbHeight + interfaceConfig.CANVAS_EXTRA;
 
-        BottomToolbar.getThumbs().children('canvas').each(function () {
+        FilmStrip.getThumbs().children('canvas').each(function () {
             $(this).attr('width', canvasWidth);
             $(this).attr('height', canvasHeight);
         });

modules/UI/etherpad/Etherpad.js

 import LargeContainer from '../videolayout/LargeContainer';
 import UIUtil from "../util/UIUtil";
 import SidePanelToggler from "../side_pannels/SidePanelToggler";
-import BottomToolbar from '../toolbars/BottomToolbar';
+import FilmStrip from '../videolayout/FilmStrip';
 
 /**
  * Etherpad options.
     }
 
     resize (containerWidth, containerHeight, animate) {
-        let height = containerHeight - BottomToolbar.getFilmStripHeight();
+        let height = containerHeight - FilmStrip.getFilmStripHeight();
         let width = containerWidth;
 
         $(this.iframe).width(width).height(height);

modules/UI/prezi/Prezi.js

 import messageHandler from '../util/MessageHandler';
 import ToolbarToggler from "../toolbars/ToolbarToggler";
 import SidePanelToggler from "../side_pannels/SidePanelToggler";
-import BottomToolbar from '../toolbars/BottomToolbar';
+import FilmStrip from '../videolayout/FilmStrip';
 
 /**
  * Example of Prezi link.
     }
 
     resize (containerWidth, containerHeight) {
-        let height = containerHeight - BottomToolbar.getFilmStripHeight();
+        let height = containerHeight - FilmStrip.getFilmStripHeight();
 
         let width = containerWidth;
 

modules/UI/side_pannels/SidePanelToggler.js

                 $('#chatspace').trigger('shown');
             };
 
-        VideoLayout.resizeVideoArea(!Chat.isVisible(), chatCompleteFunction);
-
-        toggle(Chat,
-            '#chatspace',
-            function () {
+        VideoLayout.resizeVideoArea(!Chat.isVisible(),
+                                    false,
+                                    true,
+                                    chatCompleteFunction);
+
+        toggle(Chat, //Object
+            '#chatspace', // Selector
+            function () { //onOpenComplete
                 // Request the focus in the nickname field or the chat input
                 // field.
                 if ($('#nickname').css('visibility') === 'visible') {
                     $('#usermsg').focus();
                 }
             },
-            null,
-            () => this.resizeChat(),
-            null);
+            () => this.resizeChat(), //OnOpen
+            null); //OnClose
     },
 
     resizeChat () {
             : function () {
                 $('#contactlist').trigger('shown');
             };
-        VideoLayout.resizeVideoArea(!ContactList.isVisible(), completeFunction);
+        VideoLayout.resizeVideoArea(
+            !ContactList.isVisible(),
+            false,
+            true,
+            completeFunction);
 
         toggle(ContactList,
             '#contactlist',
      * Opens / closes the settings menu
      */
     toggleSettingsMenu () {
-        VideoLayout.resizeVideoArea(!SettingsMenu.isVisible(), function (){});
+        VideoLayout.resizeVideoArea(
+            !SettingsMenu.isVisible(), false, true, function (){});
         toggle(SettingsMenu,
             '#settingsmenu',
             null,

modules/UI/toolbars/BottomToolbar.js

-/* global $ */
+/* global $, APP, interfaceConfig*/
 import UIUtil from '../util/UIUtil';
 import UIEvents from '../../../service/UI/UIEvents';
 import AnalyticsAdapter from '../../statistics/AnalyticsAdapter';
 
 const BottomToolbar = {
     init () {
-        this.filmStrip = $('#remoteVideos');
         this.toolbar = $('#bottomToolbar');
     },
 
         );
     },
 
-    toggleFilmStrip () {
-        this.filmStrip.toggleClass("hidden");
-    },
-
-    isFilmStripVisible () {
-        return !this.filmStrip.hasClass('hidden');
-    },
-
-    setupFilmStripOnly () {
-        this.filmStrip.css({
-            padding: "0px 0px 18px 0px",
-            right: 0
-        });
-    },
-
-    getFilmStripHeight () {
-        if (this.isFilmStripVisible()) {
-            return this.filmStrip.outerHeight();
-        } else {
-            return 0;
-        }
-    },
-
-    getFilmStripWidth () {
-        return this.filmStrip.width();
-    },
-
-    resizeThumbnails (thumbWidth, thumbHeight,
-                      animate = false, forceUpdate = false) {
-        return new Promise(resolve => {
-            this.filmStrip.animate({
-                // adds 2 px because of small video 1px border
-                height: thumbHeight + 2
-            }, {
-                queue: false,
-                duration: animate ? 500 : 0
-            });
-
-            this.getThumbs(!forceUpdate).animate({
-                height: thumbHeight,
-                width: thumbWidth
-            }, {
-                queue: false,
-                duration: animate ? 500 : 0,
-                complete:  resolve
-            });
-
-            if (!animate) {
-                resolve();
-            }
-        });
-    },
-
     resizeToolbar (thumbWidth, thumbHeight) {
         let bottom = (thumbHeight - this.toolbar.outerHeight())/2 + 18;
         this.toolbar.css({bottom});
     },
 
-    getThumbs (only_visible = false) {
-        let selector = 'span';
-        if (only_visible) {
-            selector += ':visible';
-        }
+    /**
+     * Returns true if this toolbar is currently visible, or false otherwise.
+     * @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
+     */
+    isVisible() {
+        return this.toolbar.is(":visible");
+    },
+
+    /**
+     * Hides the bottom toolbar with animation or not depending on the animate
+     * parameter.
+     * @param animate <tt>true</tt> to hide the bottom toolbar with animation,
+     * <tt>false</tt> or nothing to hide it without animation.
+     */
+    hide(animate) {
+        if (animate)
+            this.toolbar.hide("slide", {direction: "right", duration: 300});
+        else
+            this.toolbar.css("display", "none");
+    },
 
-        return this.filmStrip.children(selector);
+    /**
+     * Shows the bottom toolbar with animation or not depending on the animate
+     * parameter.
+     * @param animate <tt>true</tt> to show the bottom toolbar with animation,
+     * <tt>false</tt> or nothing to show it without animation.
+     */
+    show(animate) {
+        if (animate)
+            this.toolbar.show("slide", {direction: "right", duration: 300});
+        else
+            this.toolbar.css("display", "block");
     }
 };
 

modules/UI/toolbars/ToolbarToggler.js

 
 import UIUtil from '../util/UIUtil';
 import BottomToolbar from './BottomToolbar';
+import FilmStrip from '../videolayout/FilmStrip.js';
 
 let toolbarTimeoutObject;
 let toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
     }
 
     let header = $("#header");
-    let bottomToolbar = $("#bottomToolbar");
     let isToolbarHover = false;
     header.find('*').each(function () {
         let id = $(this).attr('id');
     } else {
         header.hide("slide", { direction: "up", duration: 300});
         $('#subject').animate({top: "-=40"}, 300);
-        if (!BottomToolbar.isFilmStripVisible()) {
-            bottomToolbar.hide(
-                "slide", {direction: "right", duration: 300}
-            );
+        if (!FilmStrip.isFilmStripVisible()) {
+            BottomToolbar.hide(true);
         }
     }
 }
             return;
         }
         let header = $("#header");
-        let bottomToolbar = $("#bottomToolbar");
-        if (!header.is(':visible') || !bottomToolbar.is(":visible")) {
+        if (!header.is(':visible') || !BottomToolbar.isVisible()) {
             header.show("slide", { direction: "up", duration: 300});
             $('#subject').animate({top: "+=40"}, 300);
-            if (!bottomToolbar.is(":visible")) {
-                bottomToolbar.show(
-                    "slide", {direction: "right", duration: 300}
-                );
+            if (!BottomToolbar.isVisible()) {
+                BottomToolbar.show(true);
             }
 
             if (toolbarTimeoutObject) {

modules/UI/util/UIUtil.js

 
         return window.innerWidth - rightPanelWidth;
     },
+
     /**
      * Changes the style class of the element given by id.
      */

modules/UI/videolayout/FilmStrip.js

+/* global $, APP, interfaceConfig, config*/
+
+import UIUtil from "../util/UIUtil";
+
+const thumbAspectRatio = 16.0 / 9.0;
+
+const FilmStrip = {
+    init () {
+        this.filmStrip = $('#remoteVideos');
+    },
+
+    toggleFilmStrip () {
+        this.filmStrip.toggleClass("hidden");
+    },
+
+    isFilmStripVisible () {
+        return !this.filmStrip.hasClass('hidden');
+    },
+
+    setupFilmStripOnly () {
+        this.filmStrip.css({
+            padding: "0px 0px 18px 0px",
+            right: 0
+        });
+    },
+
+    getFilmStripHeight () {
+        if (this.isFilmStripVisible()) {
+            return this.filmStrip.outerHeight();
+        } else {
+            return 0;
+        }
+    },
+
+    getFilmStripWidth () {
+        return this.filmStrip.innerWidth()
+            - parseInt(this.filmStrip.css('paddingLeft'), 10)
+            - parseInt(this.filmStrip.css('paddingRight'), 10);
+    },
+
+    /**
+     * Calculates the thumbnail size.
+     * @param videoAreaAvailableWidth the currently available video area width
+     * that we want to take into account when calculating the film strip width.
+     */
+     calculateThumbnailSize (videoAreaAvailableWidth) {
+        // Calculate the available height, which is the inner window height
+        // minus 39px for the header minus 2px for the delimiter lines on the
+        // top and bottom of the large video, minus the 36px space inside the
+        // remoteVideos container used for highlighting shadow.
+        let availableHeight = 100;
+
+        let numvids = this.getThumbs(true).length;
+
+        let localVideoContainer = $("#localVideoContainer");
+
+        /**
+         * If the videoAreaAvailableWidth is set we use this one to calculate
+         * the filmStrip width, because we're probably in a state where the
+         * film strip size hasn't been updated yet, but it will be.
+         */
+        let filmStripWidth = videoAreaAvailableWidth
+            ? videoAreaAvailableWidth
+                - parseInt(this.filmStrip.css('right'), 10)
+                - parseInt(this.filmStrip.css('paddingLeft'), 10)
+                - parseInt(this.filmStrip.css('paddingRight'), 10)
+                - parseInt(this.filmStrip.css('borderLeftWidth'), 10)
+                - parseInt(this.filmStrip.css('borderRightWidth'), 10)
+            : this.getFilmStripWidth();
+
+
+        let availableWidth = Math.floor(
+                (filmStripWidth - numvids * (
+                parseInt(localVideoContainer.css('borderLeftWidth'), 10)
+                + parseInt(localVideoContainer.css('borderRightWidth'), 10)
+                + parseInt(localVideoContainer.css('paddingLeft'), 10)
+                + parseInt(localVideoContainer.css('paddingRight'), 10)
+                + parseInt(localVideoContainer.css('marginLeft'), 10)
+                + parseInt(localVideoContainer.css('marginRight'), 10)))
+                / numvids) - numvids*10;
+
+        let maxHeight
+            // If the MAX_HEIGHT property hasn't been specified
+            // we have the static value.
+            = Math.min( interfaceConfig.FILM_STRIP_MAX_HEIGHT || 160,
+            availableHeight);
+
+        availableHeight
+            = Math.min( maxHeight,
+            availableWidth / thumbAspectRatio,
+            window.innerHeight - 18);
+
+        if (availableHeight < availableWidth / thumbAspectRatio) {
+            availableWidth = Math.floor(availableHeight * thumbAspectRatio);
+        }
+
+        return {
+            thumbWidth: availableWidth,
+            thumbHeight: availableHeight
+        };
+    },
+
+    resizeThumbnails (thumbWidth, thumbHeight,
+                      animate = false, forceUpdate = false) {
+
+        return new Promise(resolve => {
+            this.getThumbs(!forceUpdate).animate({
+                height: thumbHeight,
+                width: thumbWidth
+            }, {
+                queue: false,
+                duration: animate ? 500 : 0,
+                complete:  resolve
+            });
+
+            this.filmStrip.animate({
+                // adds 2 px because of small video 1px border
+                height: thumbHeight + 2
+            }, {
+                queue: false,
+                duration: animate ? 500 : 0
+            });
+
+            if (!animate) {
+                resolve();
+            }
+        });
+    },
+
+    getThumbs (only_visible = false) {
+        let selector = 'span';
+        if (only_visible) {
+            selector += ':visible';
+        }
+
+        return this.filmStrip.children(selector);
+    }
+};
+
+export default FilmStrip;

modules/UI/videolayout/LargeVideo.js

 import UIUtil from "../util/UIUtil";
 import UIEvents from "../../../service/UI/UIEvents";
 import LargeContainer from './LargeContainer';
-import BottomToolbar from '../toolbars/BottomToolbar';
+import FilmStrip from './FilmStrip';
 import Avatar from "../avatar/Avatar";
 import {createDeferred} from '../../util/helpers';
 
     let availableWidth = Math.max(videoWidth, videoSpaceWidth);
     let availableHeight = Math.max(videoHeight, videoSpaceHeight);
 
-    videoSpaceHeight -= BottomToolbar.getFilmStripHeight();
+    videoSpaceHeight -= FilmStrip.getFilmStripHeight();
 
     if (availableWidth / aspectRatio >= videoSpaceHeight) {
         availableHeight = videoSpaceHeight;

modules/UI/videolayout/RemoteVideo.js

     if (APP.conference.isModerator) {
         this.addRemoteVideoMenu();
     }
-    let {thumbWidth, thumbHeight} = this.VideoLayout.calculateThumbnailSize();
+    let {thumbWidth, thumbHeight} = this.VideoLayout.resizeThumbnails();
     AudioLevels.updateAudioLevelCanvas(this.id, thumbWidth, thumbHeight);
 
     return this.container;

modules/UI/videolayout/VideoLayout.js

 import AudioLevels from "../audio_levels/AudioLevels";
 import Avatar from "../avatar/Avatar";
 import BottomToolbar from "../toolbars/BottomToolbar";
-
+import FilmStrip from "./FilmStrip";
 import UIEvents from "../../../service/UI/UIEvents";
 import UIUtil from "../util/UIUtil";
 
  */
 var focusedVideoResourceJid = null;
 
-const thumbAspectRatio = 16.0 / 9.0;
-
 /**
  * On contact list item clicked.
  */
         let localId = APP.conference.localId;
         this.onVideoTypeChanged(localId, stream.videoType);
 
-        let {thumbWidth, thumbHeight} = this.calculateThumbnailSize();
-        AudioLevels.updateAudioLevelCanvas(
-            null, thumbWidth, thumbHeight);
+        let {thumbWidth, thumbHeight} = this.resizeThumbnails(false, true);
+        AudioLevels.updateAudioLevelCanvas(null, thumbWidth, thumbHeight);
 
         if (!stream.isMuted()) {
             localVideoThumbnail.changeVideo(stream);
     electLastVisibleVideo () {
         // pick the last visible video in the row
         // if nobody else is left, this picks the local video
-        let thumbs = BottomToolbar.getThumbs(true).filter('[id!="mixedstream"]');
+        let thumbs = FilmStrip.getThumbs(true).filter('[id!="mixedstream"]');
 
         let lastVisible = thumbs.filter(':visible:last');
         if (lastVisible.length) {
         }
 
         console.info("Last visible video no longer exists");
-        thumbs = BottomToolbar.getThumbs();
+        thumbs = FilmStrip.getThumbs();
         if (thumbs.length) {
             let id = getPeerContainerResourceId(thumbs[0]);
             if (remoteVideos[id]) {
 
         // In case this is not currently in the last n we don't show it.
         if (localLastNCount && localLastNCount > 0 &&
-            BottomToolbar.getThumbs().length >= localLastNCount + 2) {
+            FilmStrip.getThumbs().length >= localLastNCount + 2) {
             remoteVideo.showPeerContainer('hide');
         } else {
             VideoLayout.resizeThumbnails(false, true);
         localVideoThumbnail.showAudioIndicator(isMuted);
     },
 
-    /**
-     * Resizes the large video container.
-     */
-    resizeLargeVideoContainer (isSideBarVisible, forceUpdate) {
-        let animate = false;
-        if (largeVideo) {
-            largeVideo.updateContainerSize(isSideBarVisible);
-            largeVideo.resize(animate);
-        }
-        this.resizeVideoSpace(animate, isSideBarVisible);
-        this.resizeThumbnails(false, forceUpdate);
-    },
-
     /**
      * Resizes thumbnails.
      */
-    resizeThumbnails (animate = false, forceUpdate = false) {
-        let {thumbWidth, thumbHeight} = this.calculateThumbnailSize();
+    resizeThumbnails (  animate = false,
+                        forceUpdate = false,
+                        videoAreaAvailableWidth = null) {
+        let {thumbWidth, thumbHeight}
+            = FilmStrip.calculateThumbnailSize(videoAreaAvailableWidth);
 
         $('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
 
-        BottomToolbar.resizeThumbnails(thumbWidth, thumbHeight,
+        FilmStrip.resizeThumbnails(thumbWidth, thumbHeight,
             animate, forceUpdate)
             .then(function () {
                 BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
                 AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
         });
+        return {thumbWidth, thumbHeight};
     },
 
-    /**
-     * Calculates the thumbnail size.
-     *
-     */
-    calculateThumbnailSize () {
-        let videoSpaceWidth = BottomToolbar.getFilmStripWidth();
-        // Calculate the available height, which is the inner window height
-        // minus 39px for the header minus 2px for the delimiter lines on the
-        // top and bottom of the large video, minus the 36px space inside the
-        // remoteVideos container used for highlighting shadow.
-        let availableHeight = 100;
-
-        let numvids = BottomToolbar.getThumbs().length;
-        if (localLastNCount && localLastNCount > 0) {
-            numvids = Math.min(localLastNCount + 1, numvids);
-        }
-
-        // Remove the 3px borders arround videos and border around the remote
-        // videos area and the 4 pixels between the local video and the others
-        //TODO: Find out where the 4 pixels come from and remove them
-        let availableWinWidth = videoSpaceWidth - 2 * 3 * numvids - 70 - 4;
-
-        let availableWidth = availableWinWidth / numvids;
-        let maxHeight = Math.min(160, availableHeight);
-        availableHeight
-            = Math.min(  maxHeight,
-                         availableWidth / thumbAspectRatio,
-                         window.innerHeight - 18);
-
-        if (availableHeight < availableWidth / thumbAspectRatio) {
-            availableWidth = Math.floor(availableHeight * thumbAspectRatio);
-        }
-
-        return {
-            thumbWidth: availableWidth,
-            thumbHeight: availableHeight
-        };
-   },
-
     /**
      * On audio muted event.
      */
         var updateLargeVideo = false;
 
         // Handle LastN/local LastN changes.
-        BottomToolbar.getThumbs().each(( index, element ) => {
+        FilmStrip.getThumbs().each(( index, element ) => {
             var resourceJid = getPeerContainerResourceId(element);
             var smallVideo = remoteVideos[resourceJid];
 
             endpointsEnteringLastN.forEach(function (resourceJid) {
 
                 var remoteVideo = remoteVideos[resourceJid];
-                remoteVideo.showPeerContainer('show');
+                if (remoteVideo)
+                    remoteVideo.showPeerContainer('show');
 
                 if (!remoteVideo.isVisible()) {
                     console.log("Add to last N", resourceJid);
      * Resizes the video area.
      *
      * @param isSideBarVisible indicates if the side bar is currently visible
-     * @param callback a function to be called when the video space is
+     * @param forceUpdate indicates that hidden thumbnails will be shown
+     * @param completeFunction a function to be called when the video area is
      * resized.
-     */
-    resizeVideoArea (isSideBarVisible, callback) {
-        let animate = true;
+     */resizeVideoArea (isSideBarVisible,
+                        forceUpdate = false,
+                        animate = false,
+                        completeFunction = null) {
 
         if (largeVideo) {
             largeVideo.updateContainerSize(isSideBarVisible);
             largeVideo.resize(animate);
-            this.resizeVideoSpace(animate, isSideBarVisible, callback);
         }
 
-        VideoLayout.resizeThumbnails(animate);
-    },
-
-    /**
-     * Resizes the #videospace html element
-     * @param animate boolean property that indicates whether the resize should
-     * be animated or not.
-     * @param isChatVisible boolean property that indicates whether the chat
-     * area is displayed or not.
-     * If that parameter is null the method will check the chat panel
-     * visibility.
-     * @param completeFunction a function to be called when the video space
-     * is resized.
-     */
-    resizeVideoSpace (animate, isChatVisible, completeFunction) {
+        // Calculate available width and height.
         let availableHeight = window.innerHeight;
-        let availableWidth = UIUtil.getAvailableVideoWidth(isChatVisible);
+        let availableWidth = UIUtil.getAvailableVideoWidth(isSideBarVisible);
 
         if (availableWidth < 0 || availableHeight < 0) {
             return;
         }
 
+        // Resize the thumbnails first.
+        this.resizeThumbnails(false, forceUpdate, availableWidth);
+
+        // Resize the video area element.
         $('#videospace').animate({
             right: window.innerWidth - availableWidth,
             width: availableWidth,

modules/keyboardshortcut/keyboardshortcut.js

     };
 }
 
-
 var KeyboardShortcut = {
     init: function () {
         initShortcutHandlers();