Adds keyboard shorcuts support for mute/unmute, start/stop camera, toggle chat, toggle film strip and push to talk functionality.
This commit is contained in:
fo
parent
801f6fa039
commit
e633fed536
8
app.js
8
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});
|
||||
|
|
|
|||
31
index.html
31
index.html
|
|
@ -50,6 +50,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"/>
|
||||
|
|
@ -156,62 +157,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>
|
||||
|
|
@ -251,17 +252,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>
|
||||
|
|
|
|||
|
|
@ -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 || {}));
|
||||
Loading…
Reference in New Issue