dani/vroom
1
0
Fork 0
mirror of https://github.com/dani/vroom.git synced 2024-06-26 17:43:29 +02:00
Code Issues Projects Releases Wiki Activity

Push mute and suspend buttons in the header toolbar on XS screens

Browse Source 
Fix #88
This commit is contained in:
Daniel Berteaud 2015-02-18 18:13:08 +01:00
parent 4d8edee674
commit 116de87a46
3 changed files with 35 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/css/vroom.css
View File

@ -270,6 +270,9 @@
white-space:normal !important;
word-wrap:break-word;
}
.header-btn-group {
margin-left: 10px;
}
html,
body {
height: 100%;

39
public/js/vroom.js
View File

@ -1180,16 +1180,13 @@ function initVroom(room) {
var who = (peers[data.id].hasName) ? peers[data.id].displayName : locale.A_ROOM_ADMIN;
if (!peers.local.micMuted){
muteMic();
$('#muteMicLabel').addClass('btn-danger active');
$('#muteMicButton').prop('checked', true);
$.notify(sprintf(locale.s_IS_MUTING_YOU, who), 'info');
}
else {
unmuteMic();
$('#muteMicLabel').removeClass('btn-danger active');
$('#muteMicButton').prop('checked', false);
$.notify(sprintf(locale.s_IS_UNMUTING_YOU, who), 'info');
}
$('.btn-mute-mic').toggleClass('btn-danger').button('toggle');
}
// It's another peer of the room
else if (data.payload.peer != peers.local.id && peers[data.payload.peer]){
@ -1213,16 +1210,13 @@ function initVroom(room) {
var who = (peers[data.id].hasName) ? peers[data.id].displayName : locale.A_ROOM_ADMIN;
if (!peers.local.videoPaused){
suspendCam();
$('#suspendCamLabel').addClass('btn-danger active');
$('#suspendCamButton').prop('checked', true);
$.notify(sprintf(locale.s_IS_SUSPENDING_YOU, who), 'info');
}
else{
resumeCam();
$('#suspendCamLabel').removeClass('btn-danger active');
$('#suspendCamButton').prop('checked', false);
$.notify(sprintf(locale.s_IS_RESUMING_YOU, who), 'info');
}
$('.btn-suspend-cam').toggleClass('btn-danger').button('toggle');
}
else if (data.payload.peer != peers.local.id && peers[data.payload.peer]){
var who = (peers[data.id].hasName) ? peers[data.id].displayName : locale.A_ROOM_ADMIN;
@ -1756,39 +1750,38 @@ function initVroom(room) {
});
// Handle microphone mute/unmute
$('#muteMicButton').change(function() {
var action = ($(this).is(':checked')) ? 'mute':'unmute';
$('.btn-mute-mic').click(function() {
var action = ($(this).hasClass('btn-danger')) ? 'unmute':'mute';
if (action === 'mute'){
muteMic();
$('#muteMicLabel').addClass('btn-danger');
$.notify(locale.MIC_MUTED, 'info');
}
else{
unmuteMic();
$('#muteMicLabel').removeClass('btn-danger');
$.notify(locale.MIC_UNMUTED, 'info');
}
$('.btn-mute-mic').toggleClass('btn-danger');
$('.btn-mute-mic').button('toggle');
});
// Disable suspend webcam button if no webcam
if (!videoConstraints){
$('#suspendCamButton').attr('disabled', true);
$('#suspendCamLabel').addClass('disabled');
$('.btn-suspend-cam').addClass('disabled');
}
// Suspend the webcam
$('#suspendCamButton').change(function() {
var action = ($(this).is(':checked')) ? 'pause':'resume';
$('.btn-suspend-cam').click(function() {
var action = ($(this).hasClass('btn-danger')) ? 'resume':'pause';
if (action === 'pause'){
suspendCam();
$('#suspendCamLabel').addClass('btn-danger');
$.notify(locale.CAM_SUSPENDED, 'info');
}
else{
resumeCam();
$('#suspendCamLabel').removeClass('btn-danger');
$.notify(locale.CAM_RESUMED, 'info');
}
$('.btn-suspend-cam').toggleClass('btn-danger');
$('.btn-suspend-cam').button('toggle');
});
// Handle auth to become room owner
@ -1863,10 +1856,10 @@ function initVroom(room) {
// Handle hangup/close window
$('.btn-logout').click(function(){
$('#quitModal').modal('show');
if (!$('#muteMicButton').is(':checked')){
if (!peers.local.micMuted){
muteMic();
}
if (!$('#suspendCamButton').is(':checked')){
if (!peers.local.videoPaused){
suspendCam();
}
});
@ -1874,10 +1867,12 @@ function initVroom(room) {
// the modal is closed
$('#quitModal').on('hide.bs.modal',function(){
$('.btn-logout').removeClass('active');
if (!$('#muteMicButton').is(':checked')){
// Unmute the mic only if it wasn't manually muted
if (!$('.btn-mute-mic:first').hasClass('btn-danger')){
unmuteMic();
}
if (!$('#suspendCamButton').is(':checked')){
// Same for the camera
if (!$('.btn-suspend-cam:first').hasClass('btn-danger')){
resumeCam();
}
});

30
templates/default/join.html.ep
View File

@ -3,11 +3,17 @@
<div class="container-fluid">
<nav id="toolbar" class="navbar navbar-default" role="toolbar">
<div class="navbar-header">
<div class="btn-group visible-xs-block col-xs-offset-1">
<div class="btn btn-default navbar-btn disabled">
<span class="glyphicon glyphicon glyphicon-hourglass">
<div class="btn-group visible-xs-block header-btn-group">
<button class="btn btn-default navbar-btn btn-mute-mic">
<span class="glyphicon glyphicon-volume-off">
</span>
</div>
</button>
<button class="btn btn-default navbar-btn btn-suspend-cam">
<span class="glyphicon glyphicon-facetime-video">
</span>
</button>
</div>
<div class="btn-group visible-xs-block header-btn-group col-xs-push-2">
<div id="timeCounter" class="btn btn-default navbar-btn disabled">
00:00
</div>
@ -63,17 +69,15 @@
</div>
</div>
<% } %>
<div class="btn-group navbar-form navbar-btn-group navbar-left" data-toggle="buttons">
<label class="btn btn-default help" id="muteMicLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_MIC' %>">
<input type="checkbox" id="muteMicButton">
<div class="btn-group navbar-form navbar-btn-group navbar-left hidden-xs" data-toggle="buttons">
<button class="btn btn-default btn-mute-mic help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_MIC' %>">
<span class="glyphicon glyphicon-volume-off">
</span>
</label>
<label class="btn btn-default help" id="suspendCamLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUSPEND_CAM' %>">
<input type="checkbox" id="suspendCamButton">
</button>
<button class="btn btn-default btn-suspend-cam help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUSPEND_CAM' %>">
<span class="glyphicon glyphicon-facetime-video">
</span>
</label>
</button>
<label class="btn btn-default help" id="shareScreenLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SHARE_YOUR_SCREEN' %>">
<input type="checkbox" id="shareScreenButton">
<span class="glyphicon glyphicon-expand">
@ -109,10 +113,6 @@
</div>
<div class="navbar-form navbar-btn-group navbar-right hidden-xs" data-toggle="buttons" >
<div class="btn-group">
<div class="btn btn-default disabled">
<span class="glyphicon glyphicon glyphicon-hourglass">
</span>
</div>
<div id="timeCounter" class="btn btn-default disabled">
00:00
</div>