Merge pull request #865 from jitsi/add-raise-hand-button

Adds a possibility to add raise hand as a button

index.html

@@ -123,6 +123,7 @@
             <a class="button icon-contactList" id="toolbar_contact_list" data-container="body" data-toggle="popover" data-placement="right" shortcut="contactlistpopover"  data-i18n="[content]bottomtoolbar.contactlist" content="Open / close contact list">
                 <span id="numberOfParticipants"></span>
             </a>
+            <!--a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.invite" content="Invite others"></a-->
             <a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="right" data-i18n="[content]toolbar.chat" content="Open / close chat">
                 <span id="unreadMessages"></span>
             </a>
@@ -137,6 +138,7 @@
             <a class="button icon-telephone" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="right" content="Call SIP number" data-i18n="[content]toolbar.sip" style="display: none"></a>
             <a class="button icon-dialpad" id="toolbar_button_dialpad" data-container="body" data-toggle="popover" data-placement="right" content="Open dialpad" data-i18n="[content]toolbar.dialpad" style="display: none"></a>
             <a class="button icon-settings" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="right" content="Settings" data-i18n="[content]toolbar.Settings"></a>
+            <a class="button icon-raised-hand" id="toolbar_button_raisehand" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.raiseHand" content="Raise Hand" shortcut="raiseHandPopover"></a>
             <a class="button icon-full-screen" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="right" shortcut="toggleFullscreenPopover" data-i18n="[content]toolbar.fullscreen" content="Enter / Exit Full Screen"></a>
             <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="right" data-i18n="[content]toolbar.filmstrip" content="Show / hide videos"></a>
             <a class="button icon-feedback" id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]feedback"></a>

interface_config.js

@@ -20,7 +20,7 @@ var interfaceConfig = {
     // the toolbar buttons line is intentionally left in one line, to be able
     // to easily override values or remove them using regex
     MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'hangup'], // jshint ignore:line
-    TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
+    TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'raisehand', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
     SETTINGS_SECTIONS: ['language', 'devices', 'moderator'],
     // Determines how the video would fit the screen. 'both' would fit the whole
     // screen, 'height' would fit the original video height to the height of the

lang/main.json

@@ -94,7 +94,8 @@
         "unableToUnmutePopup": "You cannot un-mute while the shared video is on.",
         "cameraDisabled": "Camera is not available",
         "micDisabled": "Microphone is not available",
-        "filmstrip": "Show / hide videos"
+        "filmstrip": "Show / hide videos",
+        "raiseHand": "Raise hand to speak"
     },
     "bottomtoolbar": {
         "chat": "Open / close chat",

modules/UI/toolbars/Toolbar.js

@@ -168,8 +168,13 @@ const buttonHandlers = {
     },
     "toolbar_film_strip": function () {
         JitsiMeetJS.analytics.sendEvent(
-            'bottomtoolbar.filmstrip.toggled');
+            'toolbar.filmstrip.toggled');
         emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
+    },
+    "toolbar_button_raisehand": function () {
+        JitsiMeetJS.analytics.sendEvent(
+            'toolbar.raiseHand.clicked');
+        APP.conference.maybeToggleRaisedHand();
     }
 };
 
@@ -288,6 +293,19 @@ const defaultToolbarButtons = {
             APP.UI.toggleFilmStrip();
         },
         shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
+    },
+    'raisehand': {
+        id: "toolbar_button_raisehand",
+        className: "button icon-raised-hand",
+        shortcut: "R",
+        shortcutAttr: "raiseHandPopover",
+        shortcutFunc: function() {
+            JitsiMeetJS.analytics.sendEvent("shortcut.raisehand.clicked");
+            APP.conference.maybeToggleRaisedHand();
+        },
+        shortcutDescription: "keyboardShortcuts.raiseHand",
+        content: "Raise Hand",
+        i18n: "[content]toolbar.raiseHand"
     }
 };
 
@@ -323,10 +341,14 @@ const Toolbar = {
         this.toolbarSelector = $("#mainToolbarContainer");
         this.extendedToolbarSelector = $("#extendedToolbar");
 
-        this._initMainToolbarButtons();
-
+        // First hide all disabled buttons in the extended toolbar.
+        // TODO: Make the extended toolbar dynamically created.
         UIUtil.hideDisabledButtons(defaultToolbarButtons);
 
+        // Initialise the main toolbar. The main toolbar will only take into
+        // account it's own configuration from interface_config.
+        this._initMainToolbarButtons();
+
         Object.keys(defaultToolbarButtons).forEach(
             id => {
                 if (UIUtil.isButtonEnabled(id)) {
@@ -679,16 +701,9 @@ const Toolbar = {
             }
         );
     },
+
     /**
-     * TODO: Fix mic popups
-     * <a class="button icon-microphone" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute">
-     *   <ul id="micMutedPopup" class="loginmenu">
-     *       <li data-i18n="[html]toolbar.micMutedPopup"></li>
-     *   </ul>
-     *   <ul id="unableToUnmutePopup" class="loginmenu">
-     *       <li data-i18n="[html]toolbar.unableToUnmutePopup"></li>
-     *   </ul>
-     * </a>
+     * Initialise main toolbar buttons.
      */
     _initMainToolbarButtons() {
         interfaceConfig.MAIN_TOOLBAR_BUTTONS.forEach((value, index) => {

modules/UI/util/UIUtil.js

@@ -112,7 +112,8 @@
      * is enabled, {false} - otherwise
      */
     isButtonEnabled: function (name) {
-        return interfaceConfig.TOOLBAR_BUTTONS.indexOf(name) !== -1;
+        return interfaceConfig.TOOLBAR_BUTTONS.indexOf(name) !== -1
+                || interfaceConfig.MAIN_TOOLBAR_BUTTONS.indexOf(name) !== -1;
     },
     /**
      * Indicates if the setting section is enabled.

modules/keyboardshortcut/keyboardshortcut.js

@@ -17,11 +17,6 @@ function initGlobalShortcuts() {
         APP.UI.toggleKeyboardShortcutsPanel();
     }, "keyboardShortcuts.toggleShortcuts");
 
-    KeyboardShortcut.registerShortcut("R", null, function() {
-        JitsiMeetJS.analytics.sendEvent("shortcut.raisedhand.toggled");
-        APP.conference.maybeToggleRaisedHand();
-    }, "keyboardShortcuts.raiseHand");
-
     KeyboardShortcut.registerShortcut("T", null, function() {
         JitsiMeetJS.analytics.sendEvent("shortcut.talk.clicked");
         APP.conference.muteAudio(true);