dani
/
vroom
mirror of https://github.com/dani/vroom.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Browse Source 
Fix #88
master
Daniel Berteaud 10 years ago
parent 4d8edee674
commit 116de87a46
3 changed files with 35 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      public/css/vroom.css
  2. 39
      public/js/vroom.js
  3. 28
      templates/default/join.html.ep

3
public/css/vroom.css
Unescape 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
Unescape 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();
}
});

28
templates/default/join.html.ep
Unescape 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>
</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>

Write Preview
Loading…
Cancel
Save