Registers filmstrip shortcut from bottom toolbar

modules/UI/toolbars/BottomToolbar.js

@@ -10,7 +10,14 @@ const defaultBottomToolbarButtons = {
         id: '#bottom_toolbar_contact_list'
     },
     'filmstrip': {
-        id: '#bottom_toolbar_film_strip'
+        id: '#bottom_toolbar_film_strip',
+        shortcut: "F",
+        shortcutAttr: "filmstripPopover",
+        shortcutFunc: function() {
+            JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
+            APP.UI.toggleFilmStrip();
+        },
+        shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
     }
 };
 
@@ -38,6 +45,7 @@ const BottomToolbar = {
     isEnabled() {
         return this.enabled;
     },
+
     setupListeners (emitter) {
         UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
 
@@ -58,6 +66,22 @@ const BottomToolbar = {
             }
         };
 
+        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])
         );

modules/UI/toolbars/Toolbar.js

@@ -2,7 +2,6 @@
 /* jshint -W101 */
 import UIUtil from '../util/UIUtil';
 import UIEvents from '../../../service/UI/UIEvents';
-import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
 
 let roomUrl = null;
 let emitter = null;
@@ -253,7 +252,7 @@ const Toolbar = {
                     var button = defaultToolbarButtons[id];
 
                     if (button.shortcut)
-                        KeyboardShortcut.registerShortcut(
+                        APP.keyboardshortcut.registerShortcut(
                             button.shortcut,
                             button.shortcutAttr,
                             button.shortcutFunc,

modules/keyboardshortcut/keyboardshortcut.js

@@ -27,12 +27,10 @@ function initGlobalShortcuts() {
         APP.conference.muteAudio(true);
     }, "keyboardShortcuts.pushToTalk");
 
-    KeyboardShortcut.registerShortcut("F", 'filmstripPopover', function() {
-        JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
-        APP.UI.toggleFilmStrip();
-    }, "keyboardShortcuts.toggleFilmstrip");
-
-    // Focus keys are directly implemented below.
+    /**
+     * FIXME: Currently focus keys are directly implemented below in onkeyup.
+     * They should be moved to the SmallVideo instead.
+     */
     KeyboardShortcut._addShortcutToHelp("0", "keyboardShortcuts.focusLocal");
     KeyboardShortcut._addShortcutToHelp("1-9", "keyboardShortcuts.focusRemote");
 }
@@ -123,6 +121,8 @@ var KeyboardShortcut = {
      */
     unregisterShortcut: function(shortcutChar) {
         _shortcuts.remove(shortcutChar);
+
+        this._removeShortcutFromHelp(shortcutChar);
     },
 
     /**
@@ -177,6 +177,7 @@ var KeyboardShortcut = {
     _addShortcutToHelp: function (shortcutChar, shortcutDescriptionKey) {
 
         var listElement = document.createElement("li");
+        listElement.id = shortcutChar;
 
         var spanElement = document.createElement("span");
         spanElement.className = "item-action";
@@ -200,6 +201,21 @@ var KeyboardShortcut = {
 
         if (parentListElement)
             parentListElement.appendChild(listElement);
+    },
+
+    /**
+     * Removes the list element corresponding to the given shortcut from the
+     * help dialog
+     * @private
+     */
+    _removeShortcutFromHelp: function (shortcutChar) {
+        var parentListElement
+            = document.getElementById("keyboard-shortcuts-list");
+
+        var shortcutElement = document.getElementById(shortcutChar);
+
+        if (shortcutElement)
+            parentListElement.removeChild(shortcutElement);
     }
 };