Fixes resizing problems introduced with previous resizing commit. Fixes side panel open/close code and resizing.

modules/UI/side_pannels/SidePanelToggler.js

@@ -22,11 +22,16 @@ var currentlyOpen = null;
  * @param onOpenComplete function to be called when the panel is opened
  * @param onOpen function to be called if the window is going to be opened
  * @param onClose function to be called if the window is going to be closed
+ * @param onVideoResizeComplete function to be called after the video area
+ * is resized
  */
-function toggle (object, selector, onOpenComplete, onOpen, onClose) {
+function toggle (object, selector, onOpenComplete,
+                 onOpen, onClose, onVideoResizeComplete) {
+    let isSideBarVisible = object.isVisible();
+
     UIUtil.buttonClick(buttons[selector], "active");
 
-    if (object.isVisible()) {
+    if (isSideBarVisible) {
         $("#toast-container").animate({
             right: 5
         }, {
@@ -38,12 +43,17 @@ function toggle (object, selector, onOpenComplete, onOpen, onClose) {
             queue: false,
             duration: 500
         });
+
+        resizeVideoArea(isSideBarVisible, onVideoResizeComplete);
+
         if(typeof onClose === "function") {
             onClose();
         }
 
         currentlyOpen = null;
     } else {
+        resizeVideoArea(isSideBarVisible, onVideoResizeComplete);
+
         // Undock the toolbar when the chat is shown and if we're in a
         // video mode.
         if (VideoLayout.isLargeVideoVisible()) {
@@ -80,6 +90,13 @@ function toggle (object, selector, onOpenComplete, onOpen, onClose) {
     }
 }
 
+function resizeVideoArea(isSidePanelVisible, completeFunction) {
+    VideoLayout.resizeVideoArea(!isSidePanelVisible,
+        false,
+        true,
+        completeFunction);
+}
+
 /**
  * Toggler for the chat, contact list, settings menu, etc..
  */
@@ -96,11 +113,6 @@ var PanelToggler = {
                 $('#chatspace').trigger('shown');
             };
 
-        VideoLayout.resizeVideoArea(!Chat.isVisible(),
-                                    false,
-                                    true,
-                                    chatCompleteFunction);
-
         toggle(Chat, //Object
             '#chatspace', // Selector
             function () { //onOpenComplete
@@ -113,7 +125,8 @@ var PanelToggler = {
                 }
             },
             () => this.resizeChat(), //OnOpen
-            null); //OnClose
+            null,
+            chatCompleteFunction); //OnClose
     },
 
     resizeChat () {
@@ -130,11 +143,6 @@ var PanelToggler = {
             : function () {
                 $('#contactlist').trigger('shown');
             };
-        VideoLayout.resizeVideoArea(
-            !ContactList.isVisible(),
-            false,
-            true,
-            completeFunction);
 
         toggle(ContactList,
             '#contactlist',
@@ -142,15 +150,14 @@ var PanelToggler = {
             function() {
                 ContactList.setVisualNotification(false);
             },
-            null);
+            null,
+            completeFunction);
     },
 
     /**
      * Opens / closes the settings menu
      */
     toggleSettingsMenu () {
-        VideoLayout.resizeVideoArea(
-            !SettingsMenu.isVisible(), false, true, function (){});
         toggle(SettingsMenu,
             '#settingsmenu',
             null,

modules/UI/videolayout/FilmStrip.js

@@ -43,7 +43,7 @@ const FilmStrip = {
      * @param videoAreaAvailableWidth the currently available video area width
      * that we want to take into account when calculating the film strip width.
      */
-     calculateThumbnailSize (videoAreaAvailableWidth) {
+     calculateThumbnailSize (isSideBarVisible) {
         // 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
@@ -59,25 +59,23 @@ const FilmStrip = {
          * 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
+        let videoAreaAvailableWidth
-            ? videoAreaAvailableWidth
+            = UIUtil.getAvailableVideoWidth(isSideBarVisible)
                 - 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)
+                - parseInt(this.filmStrip.css('borderRightWidth'), 10);
-            : this.getFilmStripWidth();
-
 
         let availableWidth = Math.floor(
-                (filmStripWidth - numvids * (
+                (videoAreaAvailableWidth - 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;
+                / numvids) - 20;
 
         let maxHeight
             // If the MAX_HEIGHT property hasn't been specified

modules/UI/videolayout/RemoteVideo.js

@@ -42,7 +42,6 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
  * @param id the id indicating the video for which we're adding a menu.
  * @param parentElement the parent element where this menu will be added
  */
-
 if (!interfaceConfig.filmStripOnly) {
     RemoteVideo.prototype.addRemoteVideoMenu = function () {
         var spanElement = document.createElement('span');

modules/UI/videolayout/VideoLayout.js

@@ -12,6 +12,7 @@ import RemoteVideo from "./RemoteVideo";
 import LargeVideoManager, {VideoContainerType} from "./LargeVideo";
 import {PreziContainerType} from '../prezi/Prezi';
 import LocalVideo from "./LocalVideo";
+import PanelToggler from "../side_pannels/SidePanelToggler";
 
 const RTCUIUtil = JitsiMeetJS.util.RTCUIHelper;
 
@@ -356,8 +357,8 @@ var VideoLayout = {
 
         console.info(resourceJid + " video is now active", videoelem);
 
-        $(videoelem).show();
+        VideoLayout.resizeThumbnails(
-        VideoLayout.resizeThumbnails();
+            false, false, false, function() {$(videoelem).show();});
 
         // Update the large video to the last added video only if there's no
         // current dominant, focused speaker or prezi playing or update it to
@@ -416,9 +417,14 @@ var VideoLayout = {
      */
     resizeThumbnails (  animate = false,
                         forceUpdate = false,
-                        videoAreaAvailableWidth = null) {
+                        isSideBarVisible = null,
+                        onComplete = null) {
+        isSideBarVisible
+            = (isSideBarVisible !== null)
+                ? isSideBarVisible : PanelToggler.isVisible();
+
         let {thumbWidth, thumbHeight}
-            = FilmStrip.calculateThumbnailSize(videoAreaAvailableWidth);
+            = FilmStrip.calculateThumbnailSize(isSideBarVisible);
 
         $('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
 
@@ -427,6 +433,8 @@ var VideoLayout = {
             .then(function () {
                 BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
                 AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
+                if (onComplete && typeof onComplete === "function")
+                    onComplete();
         });
         return {thumbWidth, thumbHeight};
     },
@@ -815,7 +823,7 @@ var VideoLayout = {
         }
 
         // Resize the thumbnails first.
-        this.resizeThumbnails(false, forceUpdate, availableWidth);
+        this.resizeThumbnails(false, forceUpdate, isSideBarVisible);
 
         // Resize the video area element.
         $('#videospace').animate({