Improved onlyaudio styles.

src/styles/components/_audiovideo.scss

@@ -117,16 +117,29 @@
   .onlyaudio {
     color: $video-onlyaudio;
     display: none;
-    font-size: 80px;
+    font-size: 1em;
     left: 0;
-    margin-top: -40px;
     pointer-events: auto;
     position: absolute;
     right: 0;
     text-align: center;
-    top: 45%;
+    top: 0;
+    bottom: 0;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      vertical-align: middle;
+      height: 100%;
+    }
+
+    > * {
+      font-size: 6em;
+      vertical-align: middle;
+    }
   }
 
+
   .remoteContainer {
     bottom: 0;
     left: 0;
@@ -158,7 +171,8 @@
   }
 
   &.cameraMute .miniContainer,
-  &.cameraMute .localContainer {
+  &.cameraMute .localVideos {
+    background: $video-onlyaudio-background;
     .onlyaudio {
       display: block;
     }
@@ -180,10 +194,20 @@
     background: $video-background;
     display: block;
     max-height: 100%;
+    width: 100%;
     opacity: 0;
     transition-duration: 2s;
     transition-property: opacity;
-    width: 100%;
+  }
+
+  .localVideos {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition-duration: 2s;
+    transition-property: opacity;
   }
 
   .remoteVideos {
@@ -241,7 +265,7 @@
       //visibility: visible;
     }
 
-    &.onlyaudio {
+    &.onlyaudioVideo {
       background: $video-onlyaudio-background;
       //visibility: visible;
 
@@ -250,7 +274,7 @@
       }
     }
 
-    &.onlyaudio video,
+    &.onlyaudioVideo video,
     &.dummy video {
       visibility: hidden;
     }
@@ -371,10 +395,12 @@
 }
 
 .renderer-onepeople {
+  .miniContainer .onlyaudio {
+    font-size: 0.4em;
+  }
 }
 
 .renderer-democrazy {
-
   .remoteVideos .miniContainer {
     bottom: auto;
     display: inline-block;
@@ -388,7 +414,6 @@
   .active .miniContainer {
     opacity: 1;
   }
-
 }
 
 .renderer-conferencekiosk {
@@ -520,7 +545,7 @@
     height: 180px;
     width: 320px;
 
-    video {
+    .remoteVideo, .video {
       height: 100%;
       width: 100%;
     }

static/js/directives/audiovideo.js

@@ -46,6 +46,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
 			$scope.layoutparent = $element.parent();
 
 			$scope.remoteVideos = $element.find(".remoteVideos")[0];
+			$scope.localVideos = $element.find(".localVideos")[0];
 			$scope.localVideo = $element.find(".localVideo")[0];
 			$scope.miniVideo = $element.find(".miniVideo")[0];
 			$scope.mini = $element.find(".miniContainer")[0];
@@ -217,6 +218,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
 					$element.addClass("active");
 					//console.log("active 3");
 					_.delay(function() {
+						$scope.localVideos.style.opacity = 0;
 						$scope.localVideo.style.opacity = 0;
 						$scope.localVideo.src = "";
 					}, 500);
@@ -263,6 +265,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
 							return;
 						}
 						if ($scope.localVideo.videoWidth > 0) {
+							console.log("Local video size: ", $scope.localVideo.videoWidth, $scope.localVideo.videoHeight);
 							$scope.localVideo.style.opacity = 1;
 							$scope.redraw();
 						} else {
@@ -298,6 +301,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
 						$($scope.remoteVideos).children(".remoteVideo").remove();
 					}, 1500);
 					$($scope.mini).removeClass("visible");
+					$scope.localVideos.style.opacity = 1;
 					$scope.localVideo.style.opacity = 0;
 					$scope.remoteVideos.style.opacity = 0;
 					$element.removeClass('active');

static/js/services/videolayout.js

@@ -86,7 +86,6 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 				if (scope.localVideo.style.opacity === '1') {
 					videoWidth = scope.localVideo.videoWidth;
 					videoHeight = scope.localVideo.videoHeight;
-					console.log("Local video size: ", videoWidth, videoHeight);
 					videos = [null];
 				}
 			}

static/partials/audiovideo.html

@@ -1,9 +1,11 @@
 <div class="audiovideo" ng-class="{'cameraMute': cameraMute, 'microphoneMute': microphoneMute}">
   <div class="audiovideoBase">
     <div class="localContainer">
+      <div class="localVideos">
         <video class="localVideo" autoplay="autoplay" muted="true"></video>
         <div class="onlyaudio"><i class="fa fa-eye-slash"></i></div>
         <div class="overlayLogo"></div>
+      </div>
     </div>
     <div class="remoteContainer">
       <div class="remoteVideos nicescroll"></div>

static/partials/audiovideopeer.html

@@ -1,4 +1,4 @@
-<div class="remoteVideo" ng-class="{'dummy': dummy, 'withvideo': withvideo, 'onlyaudio': onlyaudio, 'talking': peersTalking[peerid]}">
+<div class="remoteVideo" ng-class="{'dummy': dummy, 'withvideo': withvideo, 'onlyaudioVideo': onlyaudio, 'talking': peersTalking[peerid]}">
 	<video autoplay="autoplay"></video>
 	<div class="peerLabel">{{peerid|displayName}}</div>
 	<div class="peerActions">