Fixed audio indicator to actually work correctly.

src/styles/components/_audiovideo.scss

@@ -54,6 +54,26 @@ right:520px;
 		}
 	}
 }
+
+.remoteVide .peerlabel {
+	-webkit-transition: color 500ms ease-out;
+	-moz-transition: color 500ms ease-out;
+	-o-transition: color 500ms ease-out;
+	transition: color 500ms ease-out;
+}
+
+.remoteVideo.talking .peerlabel {
+	color: #9dd53a;
+}
+
+.localVideo video {
+	border:1px solid transparent;
+}
+
+.localVideo.talking video {
+	border:1px solid #9dd53a;
+}
+
 @media only screen and (max-width: 630px) {
 	.mainScreenshare #audiovideo {
 		display:none;

src/styles/components/_webrtc.scss

@@ -108,29 +108,6 @@ height:100%;
 #miniVideo {
 height: 100%;
 }
-.indicator {
-position: absolute;
-z-index: 5;
-right: 5px;
-bottom: 2px;
-color: #9dd53a;
-opacity: 0;
--webkit-transition: opacity .2s ease-in-out;
--moz-transition: opacity .2s ease-in-out;
--ms-transition: opacity .2s ease-in-out;
--o-transition: opacity .2s ease-in-out;
-transition: opacity .2s ease-in-out;
-text-shadow: 0px 0px 6px black;
-}
-.talking .indicator {
-opacity: 0.8;
-}
-#remoteVideos .indicator {
-left: 10px;
-bottom: 5%;
-right: auto;
-font-size:2em;
-}
 .remoteVideo {
 display: inline-block;
 width:100%;
@@ -185,14 +162,15 @@ opacity:.5;
 .remoteVideo .peerlabel {
 position: absolute;
 z-index:8;
-left:5%;
+left:4%;
-bottom:5%;
+bottom:4%;
 font-size:2.5vw;
 color:white;
 opacity:.7;
-text-shadow: 0px 0px 10px rgb(0, 0, 0);
+text-shadow: 0px 0px 4px black;
 max-width:30%;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
+padding:4px;
 }

static/js/directives/audiolevel.js

@@ -26,10 +26,12 @@ define(['jquery', 'underscore', 'rAF'], function($, _) {
 		var webrtc = mediaStream.webrtc;
 
 		// Consider anyting lower than this % as no audio.
-		var threshhold = 7;
+		var threshhold = 5;
 		// Starting from this value we are considered talking.
-		var activityThreshold = 85;
+		var activityThreshold = 20;
-		var activityThresholdInactivity = 40;
+		var activityThresholdInactivity = 12;
+		var activityMuliplier = 1.4;
+		var activityHistorySize = 4;
 
 		// Talking status history map.
 		var talkingStatus = {};
@@ -58,20 +60,26 @@ define(['jquery', 'underscore', 'rAF'], function($, _) {
 			this.update();
 
 			// Talking state.
-			this.audioActivityHistory = [0,0,0,0,0,0,0,0,0,0];
+			this.audioActivityHistory = [];
 			this.audioActivityMeter = 0;
-			this.audioActivityCount = 0;
+
 			this.meter = _.bind(function() {
+
  				var talking;
 				if (this.active) {
 					var level = Math.round(100 * webrtc.usermedia.audioLevel);
 					if (level < threshhold) {
 						level = 0;
+					} else {
+						level = level*activityMuliplier;
+					}
+					this.audioActivityHistory.push(level);
+					if (this.audioActivityHistory.length > activityHistorySize) {
+						this.audioActivityHistory.shift();
 					}
-					this.audioActivityMeter = this.audioActivityMeter - this.audioActivityHistory[this.audioActivityCount] + level;
+					this.audioActivityMeter = this.audioActivityHistory.reduce(function(a, b) {
-					this.audioActivityHistory[this.audioActivityCount] = level;
+						return a + b;
-					this.audioActivityCount += 1;
+					}) / this.audioActivityHistory.length;
-	 				this.audioActivityCount = this.audioActivityCount % 10;
 	 				//console.log("audioActivityMeter", this.audioActivityMeter, $scope.talking);
 	 				if (!$scope.talking) {
 	 					talking = this.audioActivityMeter > activityThreshold ? true : false;
@@ -81,13 +89,13 @@ define(['jquery', 'underscore', 'rAF'], function($, _) {
  				} else {
  					// Clean up.
  					//console.log("cleaning up");
- 					this.audioActivityHistory = [0,0,0,0,0,0,0,0,0,0];
+ 					this.audioActivityHistory = [];
  					this.audioActivityMeter = 0;
-					this.audioActivityCount = 0;
 					talking = false;
  				}
  				if (talking !== $scope.talking) {
  					// Apply to scope.
+ 					//console.log("talking changed", talking);
  					safeApply($scope, function() {
 						$scope.talking = talking;
  					});

static/js/directives/audiovideo.js

@@ -51,14 +51,10 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
                 buddyData.push(peerid);
                 subscope.withvideo = false;
                 subscope.onlyaudio = false;
+                subscope.talking = false;
                 subscope.applyTalking = function(talking) {
-                    var element = subscope.element;
+                    subscope.talking = !!talking;
-                    var has = element.hasClass("talking");
+                    safeApply(subscope);
-                    if (talking && !has) {
-                        element.addClass("talking");
-                    } else if (!talking && has) {
-                        element.removeClass("talking");
-                    }
                 };
                 subscope.$on("active", function() {
                     console.log("Stream scope is now active", peerid);

static/partials/audiovideo.html

@@ -4,9 +4,8 @@
     </div>
     <div id="remote">
       <div id="remoteVideos"></div>
-      <div id="mini" ng-class="{talking: talking}">
+      <div id="mini" class="localVideo" ng-class="{talking: talking}">
         <video id="miniVideo" autoplay="autoplay" muted="true"></video>
-        <div class="indicator"><i class="fa fa-volume-up"></i></div>
       </div>
     </div>
 </div>

static/partials/audiovideopeer.html

@@ -1,7 +1,6 @@
-<div class="remoteVideo" ng-class="{'withvideo': withvideo, 'onlyaudio': onlyaudio}">
+<div class="remoteVideo" ng-class="{'withvideo': withvideo, 'onlyaudio': onlyaudio, 'talking': talking}">
 	<video autoplay="autoplay"></video>
 	<div class="peerlabel">{{peerid|displayName}}</div>
-	<div class="indicator"><i class="fa fa-volume-up"></i></div>
 	<div class="peeractions">
 		<a title="{{_('Start chat')}}" ng-click="doChat()" class="btn btn-default"><i class="fa fa-comments-o"></i></a>
 	</div>