Merge pull request #125 from fouksf/keyboard-shortcuts

Adds keyboard shorcuts support for mute/unmute, start/stop camera, toggl...

app.js

@@ -836,6 +836,7 @@ function getConferenceHandler() {
 }
 
 function toggleVideo() {
+    buttonClick("#video", "icon-camera icon-camera-disabled");
     if (!(connection && connection.jingle.localVideo))
         return;
 
@@ -1099,7 +1100,12 @@ $(document).ready(function () {
     Chat.init();
 
     $('body').popover({ selector: '[data-toggle=popover]',
-                        trigger: 'click hover'});
+        trigger: 'click hover',
+        content: function() {
+            return this.getAttribute("content") +
+                   KeyboardShortcut.getShortcut(this.getAttribute("shortcut"));
+        }
+    });
 
     // Set the defaults for prompt dialogs.
     jQuery.prompt.setDefaults({persistent: false});

index.html

@@ -51,6 +51,7 @@
     <script src="media_stream.js?v=1"></script><!-- media stream -->
     <script src="bottom_toolbar.js?v=2"></script><!-- media stream -->
     <script src="roomname_generator.js?v=1"></script><!-- generator for random room names -->
+    <script src="keyboard_shortcut.js"></script>
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font.css?v=4"/>
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=23"/>
@@ -157,62 +158,62 @@
         <div style="position: relative;" id="header_container">
             <div id="header">
                 <span id="toolbar">
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Mute / Unmute" onclick='toggleAudio();'>
+                    <a class="button" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" content="Mute / Unmute" onclick='toggleAudio();'>
                         <i id="mute" class="icon-microphone"></i>
                     </a>
                     <div class="header_button_separator"></div>
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Start / stop camera" onclick='buttonClick("#video", "icon-camera icon-camera-disabled");toggleVideo();'>
+                    <a class="button" data-toggle="popover" data-placement="bottom" shortcut="toggleVideoPopover" content="Start / stop camera" onclick='toggleVideo();'>
                         <i id="video" class="icon-camera"></i>
                     </a>
                     <span id="recording" style="display: none">
                         <div class="header_button_separator"></div>
-                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Record" onclick='toggleRecording();'>
+                        <a class="button" data-toggle="popover" data-placement="bottom" content="Record" onclick='toggleRecording();'>
                             <i id="recordButton" class="icon-recEnable"></i>
                         </a>
                     </span>
                     <div class="header_button_separator"></div>
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
+                    <a class="button" data-toggle="popover" data-placement="bottom" content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
                         <i id="lockIcon" class="icon-security"></i>
                     </a>
                     <div class="header_button_separator"></div>
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Invite others" onclick="Toolbar.openLinkDialog();">
+                    <a class="button" data-toggle="popover" data-placement="bottom" content="Invite others" onclick="Toolbar.openLinkDialog();">
                         <i class="icon-link"></i>
                     </a>
                     <div class="header_button_separator"></div>
                     <span class="toolbar_span">
-                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Open / close chat" onclick='BottomToolbar.toggleChat();'>
+                        <a class="button" data-toggle="popover" shortcut="toggleChatPopover" data-placement="bottom" content="Open / close chat" onclick='BottomToolbar.toggleChat();'>
                             <i id="chatButton" class="icon-chat"></i>
                         </a>
                         <span id="unreadMessages"></span>
                     </span>
                     <div class="header_button_separator"></div>
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share Prezi" onclick='Prezi.openPreziDialog();'>
+                    <a class="button" data-toggle="popover" data-placement="bottom" content="Share Prezi" onclick='Prezi.openPreziDialog();'>
                         <i class="icon-prezi"></i>
                     </a>
                     <span id="etherpadButton">
                         <div class="header_button_separator"></div>
-                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Shared document" onclick='Etherpad.toggleEtherpad(0);'>
+                        <a class="button" data-toggle="popover" data-placement="bottom" content="Shared document" onclick='Etherpad.toggleEtherpad(0);'>
                             <i class="icon-share-doc"></i>
                         </a>
                     </span>
                     <div class="header_button_separator"></div>
                     <span id="desktopsharing" style="display: none">
-                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Share screen" onclick="toggleScreenSharing();">
+                        <a class="button" data-toggle="popover" data-placement="bottom" content="Share screen" onclick="toggleScreenSharing();">
                             <i class="icon-share-desktop"></i>
                         </a>
                     </span>
                     <div class="header_button_separator"></div>
-                    <a class="button" data-toggle="popover" data-placement="bottom" data-content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
+                    <a class="button" data-toggle="popover" data-placement="bottom" content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
                         <i id="fullScreen" class="icon-full-screen"></i>
                     </a>
                     <span id="sipCallButton">
                         <div class="header_button_separator"></div>
-                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Call SIP number" onclick='callSipButtonClicked();'>
+                        <a class="button" data-toggle="popover" data-placement="bottom" content="Call SIP number" onclick='callSipButtonClicked();'>
                             <i class="icon-telephone"></i></a>
                     </span>
                     <div class="header_button_separator"></div>
                     <span id="hangup">
-                        <a class="button" data-toggle="popover" data-placement="bottom" data-content="Hang Up" onclick='hangup();'>
+                        <a class="button" data-toggle="popover" data-placement="bottom" content="Hang Up" onclick='hangup();'>
                             <i class="icon-hangup" style="color:#ff0000;font-size: 1.4em;"></i>
                         </a>
                     </span>
@@ -252,17 +253,17 @@
             </div>
             <span id="bottomToolbar">
                 <span class="bottomToolbar_span">
-                    <a class="bottomToolbarButton" data-toggle="popover" data-placement="top" data-content="Open / close chat" onclick='BottomToolbar.toggleChat();'>
+                    <a class="bottomToolbarButton" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="top" content="Open / close chat" onclick='BottomToolbar.toggleChat();'>
                         <i id="chatBottomButton" class="icon-chat-simple"></i>
                     </a>
                 </span>
                 <span class="bottomToolbar_span">
-                    <a class="bottomToolbarButton" data-toggle="popover" data-placement="top" data-content="Open / close contact list" onclick='BottomToolbar.toggleContactList();'>
+                    <a class="bottomToolbarButton" data-container="body" data-toggle="popover" data-placement="top" data-container="body" id="contactlistpopover" content="Open / close contact list" onclick='BottomToolbar.toggleContactList();'>
                         <i id="contactListButton" class="icon-contactList"></i>
                     </a>
                 </span>
                 <span class="bottomToolbar_span">
-                    <a class="bottomToolbarButton" data-toggle="popover" data-placement="top" data-content="Show / hide film strip" onclick='BottomToolbar.toggleFilmStrip()'>
+                    <a class="bottomToolbarButton" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="top" content="Show / hide film strip" onclick='BottomToolbar.toggleFilmStrip()'>
                         <i id="filmStripButton" class="icon-filmstrip"></i>
                     </a>
                 </span>

keyboard_shortcut.js

@@ -0,0 +1,73 @@
+var KeyboardShortcut = (function(my) {
+    var shortcuts = {
+        67: {
+            character: "C",
+            id: "toggleChatPopover",
+            function: BottomToolbar.toggleChat
+        },
+        70: {
+            character: "F",
+            id: "filmstripPopover",
+            function: BottomToolbar.toggleFilmStrip
+        },
+        77: {
+            character: "M",
+            id: "mutePopover",
+            function: toggleAudio
+        },
+        84: {
+            character: "T",
+            function: function() {
+                if(!isAudioMuted()) {
+                    toggleAudio();
+                }
+            }
+        },
+        86: {
+            character: "V",
+            id: "toggleVideoPopover",
+            function: toggleVideo
+        }
+    };
+
+    window.onkeyup = function(e) {
+        if($("#chatspace").css("display") === "none") {
+            var keycode = e.which;
+            if (typeof shortcuts[keycode] === "object") {
+                shortcuts[keycode].function();
+            } else if (keycode >= 49 && keycode <= 57) {
+                var remoteVideos = $(".videocontainer:not(#mixedstream)"),
+                    videoWanted = keycode - 48;
+                if (remoteVideos.length > videoWanted) {
+                    remoteVideos[videoWanted].click();
+                }
+            }
+        }
+    };
+
+    window.onkeydown = function(e) {
+        if($("#chatspace").css("display") === "none") {
+            if(e.which === 84) {
+                if(isAudioMuted()) {
+                    toggleAudio();
+                }
+            }
+        }
+    };
+    /**
+     *  
+     * @param id indicates the popover associated with the shortcut
+     * @returns {string} the keyboard shortcut used for the id given
+     */
+    my.getShortcut = function(id) {
+        for(var keycode in shortcuts) {
+            if(shortcuts.hasOwnProperty(keycode)) {
+                if (shortcuts[keycode].id === id) {
+                    return " (" + shortcuts[keycode].character + ")";
+                }
+            }
+        }
+        return "";
+    };
+    return my;
+}(KeyboardShortcut || {}));