mirror of
https://github.com/dani/vroom.git
synced 2024-06-29 15:03:41 +02:00
Push mute and suspend buttons in the header toolbar on XS screens
Fix #88
This commit is contained in:
parent
4d8edee674
commit
116de87a46
|
@ -270,6 +270,9 @@
|
|||
white-space:normal !important;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
.header-btn-group {
|
||||
margin-left: 10px;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user