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

Fix #88

public/css/vroom.css

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

public/js/vroom.js

@@ -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() {
+  $('.btn-mute-mic').click(function() {
-    var action = ($(this).is(':checked')) ? 'mute':'unmute';
+    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);
+    $('.btn-suspend-cam').addClass('disabled');
-    $('#suspendCamLabel').addClass('disabled');
   }
 
   // Suspend the webcam
-  $('#suspendCamButton').change(function() {
+  $('.btn-suspend-cam').click(function() {
-    var action = ($(this).is(':checked')) ? 'pause':'resume';
+    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();
     }
   });

templates/default/join.html.ep

@@ -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-group visible-xs-block header-btn-group">
-          <div class="btn btn-default navbar-btn disabled">
+          <button class="btn btn-default navbar-btn btn-mute-mic">
-            <span class="glyphicon glyphicon glyphicon-hourglass">
+            <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">
+        <div class="btn-group navbar-form navbar-btn-group navbar-left hidden-xs" data-toggle="buttons">
-          <label class="btn btn-default help" id="muteMicLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_MIC' %>">
+          <button class="btn btn-default btn-mute-mic help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_MIC' %>">
-            <input type="checkbox" id="muteMicButton">
             <span class="glyphicon glyphicon-volume-off">
             </span>
-          </label>
+          </button>
-          <label class="btn btn-default help" id="suspendCamLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUSPEND_CAM' %>">
+          <button class="btn btn-default btn-suspend-cam help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUSPEND_CAM' %>">
-            <input type="checkbox" id="suspendCamButton">
             <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>