refactor BottomToolbar

modules/UI/UI.js

@@ -188,10 +188,6 @@ function registerListeners() {
         AudioLevels.init();
     });
 
-    UI.addListener(UIEvents.FILM_STRIP_TOGGLED, function (isToggled) {
-        VideoLayout.onFilmStripToggled(isToggled);
-    });
-
     UI.addListener(UIEvents.EMAIL_CHANGED, function (email) {
         UI.setUserAvatar(APP.conference.localId, email);
     });
@@ -215,6 +211,10 @@ function registerListeners() {
     UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
         PanelToggler.toggleSettingsMenu();
     });
+
+    UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
+
+    UI.addListener(UIEvents.TOGGLE_FILM_STRIP, UI.toggleFilmStrip);
 }
 
 function bindEvents() {
@@ -446,14 +446,15 @@ UI.getSettings = function () {
 
 UI.toggleFilmStrip = function () {
     BottomToolbar.toggleFilmStrip();
+    VideoLayout.updateLargeVideoSize();
 };
 
 UI.toggleChat = function () {
-    BottomToolbar.toggleChat();
+    PanelToggler.toggleChat();
 };
 
 UI.toggleContactList = function () {
-    BottomToolbar.toggleContactList();
+    PanelToggler.toggleContactList();
 };
 
 UI.inputDisplayNameHandler = function (value) {

modules/UI/toolbars/BottomToolbar.js

@@ -1,66 +1,48 @@
 /* global $ */
-var PanelToggler = require("../side_pannels/SidePanelToggler");
+import UIUtil from '../util/UIUtil';
-var UIUtil = require("../util/UIUtil");
+import UIEvents from '../../../service/UI/UIEvents';
-var AnalyticsAdapter = require("../../statistics/AnalyticsAdapter");
+import AnalyticsAdapter from '../../statistics/AnalyticsAdapter';
-var UIEvents = require("../../../service/UI/UIEvents");
 
-var eventEmitter = null;
+const defaultBottomToolbarButtons = {
-
-var buttonHandlers = {
-    "bottom_toolbar_contact_list": function () {
-        AnalyticsAdapter.sendEvent('bottomtoolbar.contacts.toggled');
-        BottomToolbar.toggleContactList();
-    },
-    "bottom_toolbar_film_strip": function () {
-        AnalyticsAdapter.sendEvent('bottomtoolbar.filmstrip.toggled');
-        BottomToolbar.toggleFilmStrip();
-    },
-    "bottom_toolbar_chat": function () {
-        AnalyticsAdapter.sendEvent('bottomtoolbar.chat.toggled');
-        BottomToolbar.toggleChat();
-    }
-};
-
-
-var defaultBottomToolbarButtons = {
     'chat':      '#bottom_toolbar_chat',
     'contacts':  '#bottom_toolbar_contact_list',
     'filmstrip': '#bottom_toolbar_film_strip'
 };
 
-
-var BottomToolbar = (function (my) {
-    my.init = function (emitter) {
-        eventEmitter = emitter;
-        UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
-
-        for(var k in buttonHandlers)
-            $("#" + k).click(buttonHandlers[k]);
-    };
-
-    my.toggleChat = function() {
-        PanelToggler.toggleChat();
-    };
-
-    my.toggleContactList = function() {
-        PanelToggler.toggleContactList();
-    };
-
-    my.toggleFilmStrip = function() {
-        var filmstrip = $("#remoteVideos");
-        filmstrip.toggleClass("hidden");
-
-        eventEmitter.emit(  UIEvents.FILM_STRIP_TOGGLED,
-                            filmstrip.hasClass("hidden"));
-    };
-
 $(document).bind("remotevideo.resized", function (event, width, height) {
-        var bottom = (height - $('#bottomToolbar').outerHeight())/2 + 18;
+    let toolbar = $('#bottomToolbar');
+    let bottom = (height - toolbar.outerHeight())/2 + 18;
 
-        $('#bottomToolbar').css({bottom: bottom + 'px'});
+    toolbar.css({bottom});
 });
 
-    return my;
+const BottomToolbar = {
-}(BottomToolbar || {}));
+    init (emitter) {
+        UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
 
-module.exports = BottomToolbar;
+        const buttonHandlers = {
+            "bottom_toolbar_contact_list": function () {
+                AnalyticsAdapter.sendEvent('bottomtoolbar.contacts.toggled');
+                emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
+            },
+            "bottom_toolbar_film_strip": function () {
+                AnalyticsAdapter.sendEvent('bottomtoolbar.filmstrip.toggled');
+                emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
+            },
+            "bottom_toolbar_chat": function () {
+                AnalyticsAdapter.sendEvent('bottomtoolbar.chat.toggled');
+                emitter.emit(UIEvents.TOGGLE_CHAT);
+            }
+        };
+
+        Object.keys(buttonHandlers).forEach(
+            buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId])
+        );
+    },
+
+    toggleFilmStrip () {
+        $("#remoteVideos").toggleClass("hidden");
+    }
+};
+
+export default BottomToolbar;

modules/UI/toolbars/Toolbar.js

@@ -1,20 +1,20 @@
 /* global APP, $, config, interfaceConfig */
 /* jshint -W101 */
-var messageHandler = require("../util/MessageHandler");
+import messageHandler from '../util/MessageHandler';
-var UIUtil = require("../util/UIUtil");
+import UIUtil from '../util/UIUtil';
-var AnalyticsAdapter = require("../../statistics/AnalyticsAdapter");
+import AnalyticsAdapter from '../../statistics/AnalyticsAdapter';
-var UIEvents = require("../../../service/UI/UIEvents");
+import UIEvents from '../../../service/UI/UIEvents';
 
-var roomUrl = null;
+let roomUrl = null;
-var recordingToaster = null;
+let recordingToaster = null;
-var emitter = null;
+let emitter = null;
 
 
 /**
  * Opens the invite link dialog.
  */
 function openLinkDialog () {
-    var inviteAttributes;
+    let inviteAttributes;
 
     if (roomUrl === null) {
         inviteAttributes = 'data-i18n="[value]roomUrlDefaultMsg" value="' +
@@ -181,7 +181,7 @@ const buttonHandlers = {
         );
     }
 };
-var defaultToolbarButtons = {
+const defaultToolbarButtons = {
   'microphone': '#toolbar_button_mute',
   'camera':     '#toolbar_button_camera',
   'desktop':    '#toolbar_button_desktopsharing',
@@ -222,10 +222,12 @@ function showSipNumberInput () {
 const Toolbar = {
     init (eventEmitter) {
         emitter = eventEmitter;
+
         UIUtil.hideDisabledButtons(defaultToolbarButtons);
 
-        for(var k in buttonHandlers)
+        Object.keys(buttonHandlers).forEach(
-            $("#" + k).click(buttonHandlers[k]);
+            buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId])
+        );
     },
 
     /**
@@ -235,7 +237,7 @@ const Toolbar = {
         roomUrl = newRoomUrl;
 
         // If the invite dialog has been already opened we update the information.
-        var inviteLink = document.getElementById('inviteLinkRef');
+        let inviteLink = document.getElementById('inviteLinkRef');
         if (inviteLink) {
             inviteLink.value = roomUrl;
             inviteLink.select();
@@ -333,7 +335,7 @@ const Toolbar = {
      */
     setAuthenticatedIdentity (authIdentity) {
         if (authIdentity) {
-            var selector = $('#toolbar_auth_identity');
+            let selector = $('#toolbar_auth_identity');
             selector.css({display: "list-item"});
             selector.text(authIdentity);
         } else {
@@ -371,7 +373,7 @@ const Toolbar = {
      * @param active the state of the desktop streaming.
      */
     changeDesktopSharingButtonState (active) {
-        var button = $("#toolbar_button_desktopsharing");
+        let button = $("#toolbar_button_desktopsharing");
         if (active) {
             button.addClass("glow");
         } else {

modules/UI/videolayout/VideoLayout.js

@@ -900,12 +900,9 @@ var VideoLayout = (function (my) {
     };
 
     /**
-     * Updates the video size and position when the film strip is toggled.
+     * Updates the video size and position.
-     *
-     * @param isToggled indicates if the film strip is toggled or not. True
-     * would mean that the film strip is hidden, false would mean it's shown
      */
-    my.onFilmStripToggled = function(isToggled) {
+    my.updateLargeVideoSize = function () {
         LargeVideo.updateVideoSizeAndPosition();
         LargeVideo.position(null, null, null, null, true);
     };

service/UI/UIEvents.js

@@ -29,12 +29,9 @@ export default {
     AUTH_CLICKED: "UI.auth_clicked",
     TOGGLE_CHAT: "UI.toggle_chat",
     TOGGLE_SETTINGS: "UI.toggle_settings",
+    TOGGLE_CONTACT_LIST: "UI.toggle_contact_list",
+    TOGGLE_FILM_STRIP: "UI.toggle_film_strip",
     HANGUP: "UI.hangup",
     LOGOUT: "UI.logout",
-    RECORDING_TOGGLE: "UI.recording_toggle",
+    RECORDING_TOGGLE: "UI.recording_toggle"
-    /**
-     * Notifies interested parties when the film strip (remote video's panel)
-     * is hidden (toggled) or shown (un-toggled).
-     */
-    FILM_STRIP_TOGGLED: "UI.filmstrip_toggled"
 };