An initial version of a "keyboard shortcuts" help panel.

Makefile

@@ -3,7 +3,7 @@ BROWSERIFY = ./node_modules/.bin/browserify
 UGLIFYJS = ./node_modules/.bin/uglifyjs
 EXORCIST = ./node_modules/.bin/exorcist
 CLEANCSS = ./node_modules/.bin/cleancss
-CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css
+CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css keyboard-shortcuts.css
 DEPLOY_DIR = libs
 BROWSERIFY_FLAGS = -d
 OUTPUT_DIR = .

css/keyboard-shortcuts.css

@@ -0,0 +1,54 @@
+#keyboard-shortcuts {
+    display: none;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    overflow: hidden;
+    z-index: 1;
+    opacity: .85;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+    border-bottom-left-radius: 15px;
+    background-color: rgb(0, 0, 0);
+    background-image: none;
+    background-repeat: repeat;
+    background-attachment: scroll;
+    background-position: 0px center;
+    background-clip: border-box;
+    background-origin: padding-box;
+    background-size: auto auto;
+}
+
+#keyboard-shortcuts.header {
+    font-size: 15pt; 
+}
+
+#keyboard-shortcuts.content {
+    font-size: 10pt; 
+    color: #ffffff;
+}
+
+#keyboard-shortcuts.item {
+    color: #ffffff;
+    font-size: 10pt; 
+}
+#keyboard-shortcuts.item-details {
+    color: #ffffff;
+    font-size: 10pt; 
+}
+
+#keyboard-shortcuts.item-action {
+    color: #ffffff;
+    font-size: 10pt; 
+}
+
+#keyboard-shortcuts.item-description {
+    color: #ffffff;
+    font-size: 10pt; 
+}
+
+#keyboard-shortcuts.regular-key {
+    color: #ffffff;
+    font-size: 10pt; 
+}

index.html

@@ -279,5 +279,72 @@
             <a id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]feedback"><i class="fa fa-heart"></i></a>
         </div>
     </div>
+    <div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
+        <div class="header"><h3 data-i18n="keyboardShortcuts.keyboardShortcuts"></h3></div>
+        <div class="content">
+            <ul class="item">
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">M</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.mute"></strong>
+                </li>
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">V</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.videoMute"></strong>
+                </li>
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">C</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleChat"></strong>
+                </li>
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">R</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.raiseHand"></strong>
+                </li>
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">T</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.pushToTalk"></strong>
+                </li>
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">D</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleScreensharing"></strong>
+                </li>
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">F</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleFilmstrip"></strong>
+                </li>
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">?</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.toggleShortcuts"></strong>
+                </li>
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">0</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.focusLocal"></strong>
+                </li>
+                <li class="item-details">
+                    <span class="item-action">
+                        <kbd class="regular-key">1-9</kbd>
+                    </span>
+                    <strong class="item-description" data-i18n="keyboardShortcuts.focusRemote"></strong>
+                </li>
+            </ul>
+        </div>
+    </div>
   </body>
 </html>

lang/main.json

@@ -11,6 +11,19 @@
     "defaultNickname": "ex. Jane Pink",
     "defaultLink": "e.g. __url__",
     "calling": "Calling __name__ ...",
+    "keyboardShortcuts": {
+        "keyboardShortcuts": "Keyboard shortcuts:",
+        "raiseHand": "Raise your hand.",
+        "pushToTalk": "Push to talk.",
+        "toggleScreensharing": "Switch between camera and screensharing.",
+        "toggleFilmstrip": "Show or hide the filmstrip.",
+        "toggleShortcuts": "Show or hide this help menu.",
+        "focusLocal": "Focus on the local video.",
+        "focusRemote": "Focus on one of the remote videos.",
+        "toggleChat": "Open or close the chat panel.",
+        "mute": "Mute or unmute the microphone.",
+        "videoMute": "Stop or start the local video."
+    },
     "welcomepage":{
         "go": "GO",
         "roomname": "Enter room name",

modules/UI/UI.js

@@ -1379,10 +1379,17 @@ UI.showRingOverLay = function () {
 };
 
 UI.hideRingOverLay = function () {
-    if(!RingOverlay.hide())
+    if (!RingOverlay.hide())
         return;
     ToolbarToggler.resetAlwaysVisibleToolbar();
     FilmStrip.toggleFilmStrip(true);
 };
 
+/**
+ * Shows or hides the keyboard shortcuts panel.'
+ */
+UI.toggleKeyboardShortcutsPanel = function() {
+    $('#keyboard-shortcuts').toggle();
+};
+
 module.exports = UI;

modules/keyboardshortcut/keyboardshortcut.js

@@ -3,6 +3,15 @@
 var shortcuts = {};
 function initShortcutHandlers() {
     shortcuts = {
+        191: {
+            character: "/",
+            function: function(e) {
+                // Only trigger on "?", not on "/".
+                if (e.shiftKey) {
+                    APP.UI.toggleKeyboardShortcutsPanel();
+                }
+            }
+        },
         67: {
             character: "C",
             id: "toggleChatPopover",
@@ -56,7 +65,7 @@ var KeyboardShortcut = {
                 $(":focus").is("input[type=password]") ||
                 $(":focus").is("textarea"))) {
                 if (typeof shortcuts[keycode] === "object") {
-                    shortcuts[keycode].function();
+                    shortcuts[keycode].function(e);
                 }
                 else if (keycode >= "0".charCodeAt(0) &&
                     keycode <= "9".charCodeAt(0)) {