From 850a8a94d28408e5fa180bb019aee79d508bd3de Mon Sep 17 00:00:00 2001 From: Simon Eisenmann Date: Tue, 25 Mar 2014 15:19:51 +0100 Subject: [PATCH] Fixed audio indicator to actually work correctly. --- src/styles/components/_audiovideo.scss | 20 +++++++++++++++++ src/styles/components/_webrtc.scss | 30 ++++---------------------- static/js/directives/audiolevel.js | 30 ++++++++++++++++---------- static/js/directives/audiovideo.js | 10 +++------ static/partials/audiovideo.html | 3 +-- static/partials/audiovideopeer.html | 3 +-- 6 files changed, 48 insertions(+), 48 deletions(-) diff --git a/src/styles/components/_audiovideo.scss b/src/styles/components/_audiovideo.scss index 48553656..012f0ae1 100644 --- a/src/styles/components/_audiovideo.scss +++ b/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; diff --git a/src/styles/components/_webrtc.scss b/src/styles/components/_webrtc.scss index 96e9121f..4d74a3b4 100644 --- a/src/styles/components/_webrtc.scss +++ b/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%; -bottom:5%; +left:4%; +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; } \ No newline at end of file diff --git a/static/js/directives/audiolevel.js b/static/js/directives/audiolevel.js index d4e16fa2..5d67dced 100644 --- a/static/js/directives/audiolevel.js +++ b/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 activityThresholdInactivity = 40; + var activityThreshold = 20; + 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.audioActivityHistory[this.audioActivityCount] = level; - this.audioActivityCount += 1; - this.audioActivityCount = this.audioActivityCount % 10; + this.audioActivityMeter = this.audioActivityHistory.reduce(function(a, b) { + return a + b; + }) / this.audioActivityHistory.length; //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; }); diff --git a/static/js/directives/audiovideo.js b/static/js/directives/audiovideo.js index 01478cea..72ec68df 100644 --- a/static/js/directives/audiovideo.js +++ b/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; - var has = element.hasClass("talking"); - if (talking && !has) { - element.addClass("talking"); - } else if (!talking && has) { - element.removeClass("talking"); - } + subscope.talking = !!talking; + safeApply(subscope); }; subscope.$on("active", function() { console.log("Stream scope is now active", peerid); diff --git a/static/partials/audiovideo.html b/static/partials/audiovideo.html index f665183f..f82bdcc8 100644 --- a/static/partials/audiovideo.html +++ b/static/partials/audiovideo.html @@ -4,9 +4,8 @@
-
+
-
diff --git a/static/partials/audiovideopeer.html b/static/partials/audiovideopeer.html index f68dce1a..39e1d51c 100644 --- a/static/partials/audiovideopeer.html +++ b/static/partials/audiovideopeer.html @@ -1,7 +1,6 @@ -
+
{{peerid|displayName}}
-