Remove bottom toolbar and change side panel position and behavior

modules/UI/UI.js

@@ -5,10 +5,9 @@ var UI = {};
 import Chat from "./side_pannels/chat/Chat";
 import Toolbar from "./toolbars/Toolbar";
 import ToolbarToggler from "./toolbars/ToolbarToggler";
-import BottomToolbar from "./toolbars/BottomToolbar";
 import ContactList from "./side_pannels/contactlist/ContactList";
 import Avatar from "./avatar/Avatar";
-import PanelToggler from "./side_pannels/SidePanelToggler";
+import ExtendedToolbarToggler from "./side_pannels/ExtendedToolbarToggler";
 import UIUtil from "./util/UIUtil";
 import UIEvents from "../../service/UI/UIEvents";
 import CQEvents from '../../service/connectionquality/CQEvents';
@@ -134,7 +133,6 @@ function setupChat() {
  */
 function setupToolbars() {
     Toolbar.init(eventEmitter);
-    BottomToolbar.setupListeners(eventEmitter);
 }
 
 /**
@@ -299,7 +297,7 @@ UI.initConference = function () {
     //if local role changes buttons state will be again updated
     UI.updateLocalRole(false);
 
-    ToolbarToggler.showToolbar();
+    UI.showToolbar();
 
     let displayName = config.displayJids ? id : Settings.getDisplayName();
 
@@ -337,7 +335,7 @@ UI.mucJoined = function () {
  */
 UI.handleToggleFilmStrip = () => {
     UI.toggleFilmStrip();
-    VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, false);
+    VideoLayout.resizeVideoArea(true, false);
 };
 
 /**
@@ -362,7 +360,7 @@ function registerListeners() {
     UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
 
     UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
-        PanelToggler.toggleSettingsMenu();
+        ExtendedToolbarToggler.toggle("settingsmenu");
     });
 
     UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
@@ -380,8 +378,7 @@ function registerListeners() {
  */
 function bindEvents() {
     function onResize() {
-        PanelToggler.resizeChat();
+        ExtendedToolbarToggler.resize();
-        VideoLayout.resizeVideoArea(PanelToggler.isVisible());
     }
 
     // Resize and reposition videos in full screen mode.
@@ -430,22 +427,22 @@ UI.start = function () {
     registerListeners();
 
     ToolbarToggler.init();
-    BottomToolbar.init();
+    ExtendedToolbarToggler.init();
     FilmStrip.init(eventEmitter);
 
     VideoLayout.init(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
-        VideoLayout.initLargeVideo(PanelToggler.isVisible());
+        VideoLayout.initLargeVideo();
     }
-    VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, true);
+    VideoLayout.resizeVideoArea(true, true);
 
     ContactList.init(eventEmitter);
 
     bindEvents();
     sharedVideoManager = new SharedVideoManager(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
-        $("#videospace").mousemove(function () {
+        $("#videoconference_page").mousemove(function () {
-            return ToolbarToggler.showToolbar();
+            return UI.showToolbar();
         });
         setupToolbars();
         setupChat();
@@ -468,9 +465,8 @@ UI.start = function () {
             elem.href = 'data:application/json;charset=utf-8,\n' + data;
         });
     } else {
-        $("#header").css("display", "none");
+        $("#mainToolbarContainer").css("display", "none");
         $("#downloadlog").css("display", "none");
-        BottomToolbar.hide();
         FilmStrip.setupFilmStripOnly();
         messageHandler.enableNotifications(false);
         $('body').popover("disable");
@@ -499,13 +495,6 @@ UI.start = function () {
             "hideEasing": "linear",
             "showMethod": "fadeIn",
             "hideMethod": "fadeOut",
-            "reposition": function () {
-                if (PanelToggler.isVisible()) {
-                    $("#toast-container").addClass("notification-bottom-right-center");
-                } else {
-                    $("#toast-container").removeClass("notification-bottom-right-center");
-                }
-            },
             "newestOnTop": false
         };
 
@@ -727,14 +716,14 @@ UI.isFilmStripVisible = function () {
  * Toggles chat panel.
  */
 UI.toggleChat = function () {
-    PanelToggler.toggleChat();
+    ExtendedToolbarToggler.toggle("chatspace");
 };
 
 /**
  * Toggles contact list panel.
  */
 UI.toggleContactList = function () {
-    PanelToggler.toggleContactList();
+    ExtendedToolbarToggler.toggle("contactlist");
 };
 
 /**

modules/UI/recording/Recording.js

@@ -19,7 +19,6 @@ import UIUtil from '../util/UIUtil';
 import VideoLayout from '../videolayout/VideoLayout';
 import Feedback from '../Feedback.js';
 import Toolbar from '../toolbars/Toolbar';
-import BottomToolbar from '../toolbars/BottomToolbar';
 
 /**
  * The dialog for user input.
@@ -260,7 +259,6 @@ var Recording = {
             VideoLayout.setLocalVideoVisible(false);
             Feedback.enableFeedback(false);
             Toolbar.enable(false);
-            BottomToolbar.enable(false);
             APP.UI.messageHandler.enableNotifications(false);
             APP.UI.messageHandler.enablePopups(false);
         }

modules/UI/side_pannels/ExtendedToolbarToggler.js

@@ -0,0 +1,70 @@
+/* global $ */
+
+const ExtendedToolbarToggler = {
+    init() {
+        document.getElementById("extendedToolbarPanel")
+            .addEventListener("animationend", function(e) {
+                console.log("ANIM NAME", e.animationName);
+                if(e.animationName === "slideOutExt")
+                    $("#extendedToolbarPanel").children().each(function() {
+                        if ($(this).hasClass("show"))
+                            $(this).removeClass("show").addClass("hide");
+                    });
+            }, false);
+    },
+
+    toggle(elementId) {
+        let elementSelector = $(`#${elementId}`);
+        let isSelectorVisible = elementSelector.hasClass("show");
+
+        if (isSelectorVisible) {
+            this.hide();
+        }
+        else {
+            if (this.isVisible())
+                $("#extendedToolbarPanel").children().each(function() {
+                    if ($(this).id !== elementId && $(this).hasClass("show"))
+                        $(this).removeClass("show").addClass("hide");
+                });
+
+            if (!this.isVisible())
+                this.show();
+
+            elementSelector.removeClass("hide").addClass("show");
+        }
+    },
+
+    /**
+     * Returns true if this toolbar is currently visible, or false otherwise.
+     * @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
+     */
+    isVisible() {
+        return $("#extendedToolbarPanel").hasClass("slideInExt");
+    },
+
+    /**
+     * Hides the toolbar with animation or not depending on the animate
+     * parameter.
+     */
+    hide(elementId) {
+        $("#extendedToolbarPanel")
+            .removeClass("slideInExt").addClass("slideOutExt");
+    },
+
+    /**
+     * Shows the toolbar with animation or not depending on the animate
+     * parameter.
+     */
+    show(elementId) {
+        if (!this.isVisible())
+            $("#extendedToolbarPanel")
+                .removeClass("slideOutExt").addClass("slideInExt");
+    },
+
+    resize () {
+        //let [width, height] = UIUtil.getSidePanelSize();
+        //Chat.resizeChat(width, height);
+    }
+};
+
+export default ExtendedToolbarToggler;

modules/UI/side_pannels/SidePanelToggler.js

@@ -1,186 +0,0 @@
-/* global require, $ */
-import Chat from "./chat/Chat";
-import ContactList from "./contactlist/ContactList";
-import Settings from "./../../settings/Settings";
-import SettingsMenu from "./settings/SettingsMenu";
-import VideoLayout from "../videolayout/VideoLayout";
-import ToolbarToggler from "../toolbars/ToolbarToggler";
-import UIUtil from "../util/UIUtil";
-
-const buttons = {
-    '#chatspace': '#chatBottomButton',
-    '#contactlist': '#contactListButton',
-    '#settingsmenu': '#toolbar_button_settings'
-};
-
-var currentlyOpen = null;
-
-/**
- * Toggles the windows in the side panel
- * @param object the window that should be shown
- * @param selector the selector for the element containing the panel
- * @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, onVideoResizeComplete) {
-    let isSideBarVisible = object.isVisible();
-
-    UIUtil.buttonClick(buttons[selector], "active");
-
-    if (isSideBarVisible) {
-        $("#toast-container").animate({
-            right: 5
-        }, {
-            queue: false,
-            duration: 500
-        });
-
-        $(selector).hide("slide", {
-            direction: "right",
-            queue: false,
-            duration: 500,
-            // Set the size to 0 at the end of the animation to ensure that
-            // the is(":visible") function on this selector will return {false}
-            // when the element is hidden.
-            complete: function() {$(selector).css("width", "0");}
-        });
-
-        resizeVideoArea(false, onVideoResizeComplete);
-
-        if(typeof onClose === "function") {
-            onClose();
-        }
-
-        currentlyOpen = null;
-    } else {
-        resizeVideoArea(true, onVideoResizeComplete);
-
-        // Undock the toolbar when the chat is shown and if we're in a
-        // video mode.
-        if (VideoLayout.isLargeVideoVisible()) {
-            ToolbarToggler.dockToolbar(false);
-        }
-
-        if (currentlyOpen) {
-            var current = $(currentlyOpen);
-            UIUtil.buttonClick(buttons[currentlyOpen], "active");
-            current.css('z-index', 4);
-            setTimeout(function () {
-                current.css('display', 'none');
-                current.css('z-index', 5);
-            }, 500);
-        }
-
-        $("#toast-container").animate({
-            right: (UIUtil.getSidePanelSize()[0] + 5)
-        }, {
-            queue: false,
-            duration: 500
-        });
-        // Set the size dynamically (not in the css), so that we're sure that
-        // when is(":visible") is called on this selector the result is {false}
-        // before it's actually visible.
-        // (Chrome seems to return {true} for an element which is in the DOM and
-        // has non-null size set).
-        $(selector).css("width", "20%");
-        $(selector).show("slide", {
-            direction: "right",
-            queue: false,
-            duration: 500,
-            complete: onOpenComplete
-        });
-        if(typeof onOpen === "function") {
-            onOpen();
-        }
-
-        currentlyOpen = selector;
-    }
-}
-
-function resizeVideoArea(isSidePanelVisible, completeFunction) {
-    VideoLayout.resizeVideoArea(isSidePanelVisible,
-        false,//don't force thumbnail count update
-        true, //animate
-        completeFunction);
-}
-
-/**
- * Toggler for the chat, contact list, settings menu, etc..
- */
-var PanelToggler = {
-
-    /**
-     * Opens / closes the chat area.
-     */
-    toggleChat () {
-        var chatCompleteFunction = Chat.isVisible()
-            ? function () {}
-            : function () {
-                Chat.scrollChatToBottom();
-                $('#chatspace').trigger('shown');
-            };
-
-        toggle(Chat, //Object
-            '#chatspace', // Selector
-            function () { //onOpenComplete
-                // Request the focus in the nickname field or the chat input
-                // field.
-                if ($('#nickname').css('visibility') === 'visible') {
-                    $('#nickinput').focus();
-                } else {
-                    $('#usermsg').focus();
-                }
-            },
-            () => this.resizeChat(), //OnOpen
-            null,
-            chatCompleteFunction); //OnClose
-    },
-
-    resizeChat () {
-        let [width, height] = UIUtil.getSidePanelSize();
-        Chat.resizeChat(width, height);
-    },
-
-    /**
-     * Opens / closes the contact list area.
-     */
-    toggleContactList () {
-        var completeFunction = ContactList.isVisible()
-            ? function () {}
-            : function () {
-                $('#contactlist').trigger('shown');
-            };
-
-        toggle(ContactList,
-            '#contactlist',
-            null,
-            function() {
-                ContactList.setVisualNotification(false);
-            },
-            null,
-            completeFunction);
-    },
-
-    /**
-     * Opens / closes the settings menu
-     */
-    toggleSettingsMenu () {
-        toggle(SettingsMenu,
-            '#settingsmenu',
-            null,
-            function() {},
-            null);
-    },
-
-    isVisible () {
-        return (Chat.isVisible() ||
-                ContactList.isVisible() ||
-                SettingsMenu.isVisible());
-    }
-};
-
-export default PanelToggler;

modules/UI/side_pannels/chat/Chat.js

@@ -18,15 +18,11 @@ var unreadMessages = 0;
  */
 function setVisualNotification(show) {
     var unreadMsgElement = document.getElementById('unreadMessages');
-    var unreadMsgBottomElement
-        = document.getElementById('bottomUnreadMessages');
 
     var glower = $('#toolbar_button_chat');
-    var bottomGlower = $('#chatBottomButton');
 
     if (unreadMessages) {
         unreadMsgElement.innerHTML = unreadMessages.toString();
-        unreadMsgBottomElement.innerHTML = unreadMessages.toString();
 
         ToolbarToggler.dockToolbar(true);
 
@@ -42,19 +38,6 @@ function setVisualNotification(show) {
                 'top:' + topIndent +
                 '; left:' + leftIndent + ';');
 
-        var chatBottomButtonElement
-            = document.getElementById('chatBottomButton').parentNode;
-        var bottomLeftIndent = (UIUtil.getTextWidth(chatBottomButtonElement) -
-            UIUtil.getTextWidth(unreadMsgBottomElement)) / 2;
-        var bottomTopIndent = (UIUtil.getTextHeight(chatBottomButtonElement) -
-            UIUtil.getTextHeight(unreadMsgBottomElement)) / 2 - 2;
-
-        unreadMsgBottomElement.setAttribute(
-            'style',
-                'top:' + bottomTopIndent +
-                '; left:' + bottomLeftIndent + ';');
-
-
         if (!glower.hasClass('icon-chat-simple')) {
             glower.removeClass('icon-chat');
             glower.addClass('icon-chat-simple');
@@ -62,7 +45,6 @@ function setVisualNotification(show) {
     }
     else {
         unreadMsgElement.innerHTML = '';
-        unreadMsgBottomElement.innerHTML = '';
         glower.removeClass('icon-chat-simple');
         glower.addClass('icon-chat');
     }
@@ -70,15 +52,12 @@ function setVisualNotification(show) {
     if (show && !notificationInterval) {
         notificationInterval = window.setInterval(function () {
             glower.toggleClass('active');
-            bottomGlower.toggleClass('active glowing');
         }, 800);
     }
     else if (!show && notificationInterval) {
         window.clearInterval(notificationInterval);
         notificationInterval = false;
         glower.removeClass('active');
-        bottomGlower.removeClass('glowing');
-        bottomGlower.addClass('active');
     }
 }
 

modules/UI/side_pannels/contactlist/ContactList.js

@@ -14,16 +14,23 @@ let notificationInterval;
  */
 function updateNumberOfParticipants(delta) {
     numberOfContacts += delta;
-    if (numberOfContacts === 1) {
+
-        // when the user is alone we don't show the number of participants
+    if (numberOfContacts <= 0) {
-        $("#numberOfParticipants").text('');
-        ContactList.setVisualNotification(false);
-    } else if (numberOfContacts > 1) {
-        ContactList.setVisualNotification(!ContactList.isVisible());
-        $("#numberOfParticipants").text(numberOfContacts);
-    } else {
         console.error("Invalid number of participants: " + numberOfContacts);
+        return;
     }
+
+    let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts;
+    $("#numberOfParticipants").text(buttonIndicatorText);
+
+    let showVisualNotification
+        = (numberOfContacts === 1) ? false : !ContactList.isVisible();
+    ContactList.setVisualNotification(showVisualNotification);
+
+    $("#contactlist>div.title").text(
+        APP.translation.translateString(
+            "contactlist", {participants: numberOfContacts}
+        ));
 }
 
 /**

modules/UI/toolbars/BottomToolbar.js

@@ -1,130 +0,0 @@
-/* global $, APP, interfaceConfig, JitsiMeetJS */
-import UIUtil from '../util/UIUtil';
-import UIEvents from '../../../service/UI/UIEvents';
-
-const defaultBottomToolbarButtons = {
-    'chat': {
-        id: '#bottom_toolbar_chat'
-    },
-    'contacts': {
-        id: '#bottom_toolbar_contact_list'
-    },
-    'filmstrip': {
-        id: '#bottom_toolbar_film_strip',
-        shortcut: "F",
-        shortcutAttr: "filmstripPopover",
-        shortcutFunc: function() {
-            JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
-            APP.UI.handleToggleFilmStrip();
-        },
-        shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
-    }
-};
-
-const BottomToolbar = {
-    init () {
-        this.toolbar = $('#bottomToolbar');
-
-        // The bottom toolbar is enabled by default.
-        this.enabled = true;
-    },
-    /**
-     * Enables / disables the bottom toolbar.
-     * @param {e} set to {true} to enable the bottom toolbar or {false}
-     * to disable it
-     */
-    enable (e) {
-        this.enabled = e;
-        if (!e && this.isVisible())
-            this.hide(false);
-    },
-    /**
-     * Indicates if the bottom toolbar is currently enabled.
-     * @return {this.enabled}
-     */
-    isEnabled() {
-        return this.enabled;
-    },
-
-    setupListeners (emitter) {
-        UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
-
-        const buttonHandlers = {
-            "bottom_toolbar_contact_list": function () {
-                JitsiMeetJS.analytics.sendEvent(
-                    'bottomtoolbar.contacts.toggled');
-                emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
-            },
-            "bottom_toolbar_film_strip": function () {
-                JitsiMeetJS.analytics.sendEvent(
-                    'bottomtoolbar.filmstrip.toggled');
-                emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
-            },
-            "bottom_toolbar_chat": function () {
-                JitsiMeetJS.analytics.sendEvent('bottomtoolbar.chat.toggled');
-                emitter.emit(UIEvents.TOGGLE_CHAT);
-            }
-        };
-
-        Object.keys(defaultBottomToolbarButtons).forEach(
-                id => {
-                if (UIUtil.isButtonEnabled(id)) {
-                    var button = defaultBottomToolbarButtons[id];
-
-                    if (button.shortcut)
-                        APP.keyboardshortcut.registerShortcut(
-                            button.shortcut,
-                            button.shortcutAttr,
-                            button.shortcutFunc,
-                            button.shortcutDescription
-                        );
-                }
-            }
-        );
-
-        Object.keys(buttonHandlers).forEach(
-            buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId])
-        );
-    },
-
-    resizeToolbar (thumbWidth, thumbHeight) {
-        let bottom = (thumbHeight - this.toolbar.outerHeight())/2 + 18;
-        this.toolbar.css({bottom});
-    },
-
-    /**
-     * 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");
-    },
-
-    /**
-     * 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");
-    }
-};
-
-export default BottomToolbar;

modules/UI/toolbars/Toolbar.js

@@ -2,6 +2,7 @@
 /* jshint -W101 */
 import UIUtil from '../util/UIUtil';
 import UIEvents from '../../../service/UI/UIEvents';
+import ExtendedToolbarToggler from "../side_pannels/ExtendedToolbarToggler.js";
 
 let roomUrl = null;
 let emitter = null;
@@ -92,6 +93,11 @@ const buttonHandlers = {
         JitsiMeetJS.analytics.sendEvent('toolbar.chat.toggled');
         emitter.emit(UIEvents.TOGGLE_CHAT);
     },
+    "toolbar_contact_list": function () {
+        JitsiMeetJS.analytics.sendEvent(
+            'toolbar.contacts.toggled');
+        emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
+    },
     "toolbar_button_etherpad": function () {
         JitsiMeetJS.analytics.sendEvent('toolbar.etherpad.clicked');
         emitter.emit(UIEvents.ETHERPAD_CLICKED);
@@ -150,6 +156,11 @@ const buttonHandlers = {
                 }
             }
         );
+    },
+    "toolbar_film_strip": function () {
+        JitsiMeetJS.analytics.sendEvent(
+            'bottomtoolbar.filmstrip.toggled');
+        emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
     }
 };
 const defaultToolbarButtons = {
@@ -199,6 +210,9 @@ const defaultToolbarButtons = {
         },
         shortcutDescription: "keyboardShortcuts.toggleChat"
     },
+    'contacts': {
+        id: '#toolbar_contact_list'
+    },
     'etherpad': {
         id: '#toolbar_button_etherpad'
     },
@@ -210,6 +224,16 @@ const defaultToolbarButtons = {
     },
     'hangup': {
         id: '#toolbar_button_hangup'
+    },
+    'filmstrip': {
+        id: '#toolbar_film_strip',
+        shortcut: "F",
+        shortcutAttr: "filmstripPopover",
+        shortcutFunc: function() {
+            JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
+            APP.UI.toggleFilmStrip();
+        },
+        shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
     }
 };
 
@@ -242,7 +266,8 @@ const Toolbar = {
         emitter = eventEmitter;
         // The toolbar is enabled by default.
         this.enabled = true;
-        this.toolbarSelector = $("#header");
+        this.toolbarSelector = $("#mainToolbarContainer");
+        this.extendedToolbarSelector = $("#extendedToolbar");
 
         UIUtil.hideDisabledButtons(defaultToolbarButtons);
 
@@ -507,7 +532,9 @@ const Toolbar = {
         });
         if (hovered)
             return true;
-        if ($("#bottomToolbar:hover").length > 0) {
+        if ($("#bottomToolbar:hover").length > 0
+            || $("#extendedToolbar:hover").length > 0
+            || ExtendedToolbarToggler.isVisible()) {
             return true;
         }
         return false;
@@ -518,7 +545,7 @@ const Toolbar = {
      * @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
      */
     isVisible() {
-        return this.toolbarSelector.is(":visible");
+        return this.toolbarSelector.hasClass("slideInY");
     },
 
     /**
@@ -526,8 +553,9 @@ const Toolbar = {
      * parameter.
      */
     hide() {
-        this.toolbarSelector.hide(
+        this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY");
-            "slide", { direction: "up", duration: 300});
+        this.extendedToolbarSelector.toggleClass("slideInX")
+            .toggleClass("slideOutX");
     },
 
     /**
@@ -535,8 +563,14 @@ const Toolbar = {
      * parameter.
      */
     show() {
-        this.toolbarSelector.show(
+        if (this.toolbarSelector.hasClass("slideOutY"))
-            "slide", { direction: "up", duration: 300});
+            this.toolbarSelector.toggleClass("slideOutY");
+
+        if (this.extendedToolbarSelector.hasClass("slideOutX"))
+            this.extendedToolbarSelector.toggleClass("slideOutX");
+
+        this.toolbarSelector.toggleClass("slideInY");
+        this.extendedToolbarSelector.toggleClass("slideInX");
     }
 };
 

modules/UI/toolbars/ToolbarToggler.js

@@ -1,7 +1,6 @@
 /* global APP, config, $, interfaceConfig */
 
 import UIUtil from '../util/UIUtil';
-import BottomToolbar from './BottomToolbar';
 import Toolbar from './Toolbar';
 import FilmStrip from '../videolayout/FilmStrip.js';
 
@@ -37,9 +36,6 @@ function hideToolbar() {
     } else {
         Toolbar.hide();
         $('#subject').animate({top: "-=40"}, 300);
-        if (!FilmStrip.isFilmStripVisible()) {
-            BottomToolbar.hide(true);
-        }
     }
 }
 
@@ -78,11 +74,6 @@ const ToolbarToggler = {
             updateTimeout = true;
         }
 
-        if (BottomToolbar.isEnabled() && !BottomToolbar.isVisible()) {
-            BottomToolbar.show(true);
-            updateTimeout = true;
-        }
-
         if (updateTimeout) {
             if (toolbarTimeoutObject) {
                 clearTimeout(toolbarTimeoutObject);

modules/UI/util/UIUtil.js

@@ -5,31 +5,12 @@
  */
  var UIUtil = {
 
-    /**
-     * Returns the size of the side panel.
-     */
-     getSidePanelSize () {
-        var availableHeight = window.innerHeight;
-        var availableWidth = window.innerWidth;
-
-        var panelWidth = 200;
-        if (availableWidth * 0.2 < 200) {
-            panelWidth = availableWidth * 0.2;
-        }
-
-        return [panelWidth, availableHeight];
-     },
-
     /**
      * Returns the available video width.
      */
-    getAvailableVideoWidth: function (isSidePanelVisible) {
+    getAvailableVideoWidth: function () {
         let rightPanelWidth = 0;
 
-        if (isSidePanelVisible) {
-            rightPanelWidth = UIUtil.getSidePanelSize()[0];
-        }
-
         return window.innerWidth - rightPanelWidth;
     },
 

modules/UI/videolayout/FilmStrip.js

@@ -68,10 +68,8 @@ const FilmStrip = {
 
     /**
      * 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 (isSideBarVisible) {
+     calculateThumbnailSize () {
         let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
 
         let numvids = this.getThumbs(true).length;
@@ -84,7 +82,7 @@ const FilmStrip = {
          * film strip size hasn't been updated yet, but it will be.
          */
         let videoAreaAvailableWidth
-            = UIUtil.getAvailableVideoWidth(isSideBarVisible)
+            = UIUtil.getAvailableVideoWidth()
                 - UIUtil.parseCssInt(this.filmStrip.css('right'), 10)
                 - UIUtil.parseCssInt(this.filmStrip.css('paddingLeft'), 10)
                 - UIUtil.parseCssInt(this.filmStrip.css('paddingRight'), 10)

modules/UI/videolayout/LargeVideo.js

@@ -536,11 +536,10 @@ export default class LargeVideoManager {
     }
 
     /**
-     * Update container size optionally taking side bar size into account.
+     * Update container size.
-     * @param {boolean} isSideBarVisible if side bar is visible.
      */
-    updateContainerSize (isSideBarVisible) {
+    updateContainerSize () {
-        this.width = UIUtil.getAvailableVideoWidth(isSideBarVisible);
+        this.width = UIUtil.getAvailableVideoWidth();
         this.height = window.innerHeight;
     }
 

modules/UI/videolayout/VideoLayout.js

@@ -3,7 +3,6 @@
 
 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";
@@ -12,7 +11,6 @@ import RemoteVideo from "./RemoteVideo";
 import LargeVideoManager, {VIDEO_CONTAINER_TYPE} from "./LargeVideo";
 import {SHARED_VIDEO_CONTAINER_TYPE} from '../shared_video/SharedVideo';
 import LocalVideo from "./LocalVideo";
-import PanelToggler from "../side_pannels/SidePanelToggler";
 
 const RTCUIUtil = JitsiMeetJS.util.RTCUIHelper;
 
@@ -115,12 +113,12 @@ var VideoLayout = {
         this.lastNCount = config.channelLastN;
     },
 
-    initLargeVideo (isSideBarVisible) {
+    initLargeVideo () {
         largeVideo = new LargeVideoManager();
         if(localFlipX) {
             largeVideo.onLocalFlipXChange(localFlipX);
         }
-        largeVideo.updateContainerSize(isSideBarVisible);
+        largeVideo.updateContainerSize();
         AudioLevels.init();
     },
 
@@ -487,21 +485,16 @@ var VideoLayout = {
      */
     resizeThumbnails (  animate = false,
                         forceUpdate = false,
-                        isSideBarVisible = null,
                         onComplete = null) {
-        isSideBarVisible
-            = (isSideBarVisible !== null)
-                ? isSideBarVisible : PanelToggler.isVisible();
 
         let {thumbWidth, thumbHeight}
-            = FilmStrip.calculateThumbnailSize(isSideBarVisible);
+            = FilmStrip.calculateThumbnailSize();
 
         $('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
 
         FilmStrip.resizeThumbnails(thumbWidth, thumbHeight,
             animate, forceUpdate)
             .then(function () {
-                BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
                 AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
                 if (onComplete && typeof onComplete === "function")
                     onComplete();
@@ -891,31 +884,29 @@ var VideoLayout = {
     /**
      * Resizes the video area.
      *
-     * @param isSideBarVisible indicates if the side bar is currently visible
      * @param forceUpdate indicates that hidden thumbnails will be shown
      * @param completeFunction a function to be called when the video area is
      * resized.
      */
-    resizeVideoArea (isSideBarVisible,
+    resizeVideoArea (forceUpdate = false,
-                    forceUpdate = false,
                     animate = false,
                     completeFunction = null) {
 
         if (largeVideo) {
-            largeVideo.updateContainerSize(isSideBarVisible);
+            largeVideo.updateContainerSize();
             largeVideo.resize(animate);
         }
 
         // Calculate available width and height.
         let availableHeight = window.innerHeight;
-        let availableWidth = UIUtil.getAvailableVideoWidth(isSideBarVisible);
+        let availableWidth = UIUtil.getAvailableVideoWidth();
 
         if (availableWidth < 0 || availableHeight < 0) {
             return;
         }
 
         // Resize the thumbnails first.
-        this.resizeThumbnails(false, forceUpdate, isSideBarVisible);
+        this.resizeThumbnails(false, forceUpdate);
 
         // Resize the video area element.
         $('#videospace').animate({