Mute preview instead of pausing the video

FF doesn't support pausing one video with another connected to the same stream still playing
So, be consistent between FF and webkit, and just mute the preview
Also lower the volume of the previews (70%) and bump the one of the main video
Fix #47 and also fix #50

public/js/vroom.js

@@ -353,22 +353,24 @@ function initVroom(room) {
     var wait = 1;
     // There's already a main video, let's hide it
     // and delay the new one so the fade out as time to complete
-    if ($('#mainVideo').html() != ''){
+    if ($('#mainVideo video').length > 0){
       $('#mainVideo').hide(200);
       wait = 200;
       // Play all preview
-      // the one in the mainVid was paused, with a reduced opacity
+      // the one in the mainVid was muted
-      // Both preview and main vid freezes on FF when doing so :-/
-      if ($.browser.webkit){
       $('#webRTCVideo video').each(function(){
-          if ($(this).get(0).paused){
+        if ($(this).get(0).volume == 0){
-            $(this).get(0).play();
+          $(this).get(0).volume= .7;
-            $(this).css('opacity', '1');
         }
       });
     }
-    }
     setTimeout(function(){
+      // To prevent a freeze, change the src before removing the video from the DOM
+      // See https://bugzilla-dev.allizom.org/show_bug.cgi?id=937110
+      if ($.browser.mozilla && $('#mainVideo video').length > 0){
+        $($('#mainVideo video').get(0)).attr('src', $($('#mohPlayer').get(0)).attr('src'));
+        $('#mainVideo video').get(0).pause();
+      }
       $('#mainVideo').html('');
       if (el.hasClass('selected')){
         el.removeClass('selected');
@@ -387,17 +389,17 @@ function initVroom(room) {
         $('.selected').removeClass('selected');
         el.addClass('selected');
         mainVid = el.attr('id');
-        // Pause the corresponding preview
+        // Cut the volume the corresponding preview
-        // and reduce opacity, but only on screen > 768
+        // but only on screen > 768
         // On smaller screens, the main video is hidden
-        if ($.browser.webkit && $(window).width() > 768){
+        if ($(window).width() > 768){
           $('#webRTCVideo video').each(function(){
             if ($(this).get(0).paused){
               $(this).get(0).play();
             }
           });
-          el.get(0).pause();
+          el.get(0).volume = 0;
-          el.css('opacity', '.3');
+          $('#mainVideo video').get(0).volume = 1;
         }
         $('#mainVideo').show(200);
       }
@@ -503,6 +505,7 @@ function initVroom(room) {
         // Get the role of this peer
         getPeerRole(peer.id);
       }, 3000);
+      video.volume = .7;
       // Stop moh, we're not alone anymore
       $('#mohPlayer')[0].pause();
       $('.aloneEl').hide(300);