Fixes active speaker avatar and active speaker audio level missmatch.

avatar.js

@@ -77,8 +77,7 @@ var Avatar = (function(my) {
             //currently shown
             if (activeSpeakerJid === jid && VideoLayout.isLargeVideoOnTop()) {
                 setVisibility($("#largeVideo"), !show);
-                setVisibility($('#activeSpeakerAvatar'), show);
-                setVisibility($('#activeSpeakerAudioLevel'), show);
+                setVisibility($('#activeSpeaker'), show);
                 setVisibility(avatar, false);
                 setVisibility(video, false);
             } else {

css/videolayout_default.css

@@ -377,11 +377,21 @@
     pointer-events: none;
 }
 
-#activeSpeakerAudioLevel {
+#activeSpeaker {
     visibility: hidden;
+    width: 150px;
+    height: 150px;
+    margin: auto;
+    overflow: hidden;
+    position: relative;
+}
+
+#activeSpeakerAudioLevel {
     position: absolute;
-    top: 113px;
+    top: 0px;
+    left: 0px;
     z-index: 1;
+    visibility: inherit;
 }
 
 #mixedstream {
@@ -389,13 +399,14 @@
 }
 
 #activeSpeakerAvatar {
-    visibility: hidden;
     width: 100px;
     height: 100px;
+    top: 25px;
     margin: auto;
     position: relative;
     border-radius: 50px;
     z-index: 2;
+    visibility: inherit;
 }
 
 .userAvatar {

etherpad.js

@@ -42,6 +42,7 @@ var Etherpad = (function (my) {
             largeVideo = $('#largeVideo');
 
         if ($('#etherpad>iframe').css('visibility') === 'hidden') {
+            $('#activeSpeaker').css('visibility', 'hidden');
             largeVideo.fadeOut(300, function () {
                 if (Prezi.isPresentationVisible()) {
                     largeVideo.css({opacity: '0'});

index.html

@@ -41,15 +41,15 @@
     <script src="contact_list.js?v=7"></script><!-- contact list logic -->
     <script src="side_panel_toggler.js?v=1"></script>
     <script src="util.js?v=7"></script><!-- utility functions -->
-    <script src="etherpad.js?v=9"></script><!-- etherpad plugin -->
-    <script src="prezi.js?v=6"></script><!-- prezi plugin -->
+    <script src="etherpad.js?v=10"></script><!-- etherpad plugin -->
+    <script src="prezi.js?v=7"></script><!-- prezi plugin -->
     <script src="smileys.js?v=3"></script><!-- smiley images -->
     <script src="replacement.js?v=7"></script><!-- link and smiley replacement -->
     <script src="moderatemuc.js?v=4"></script><!-- moderator plugin -->
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <script src="rtp_sts.js?v=5"></script><!-- RTP stats processing -->
     <script src="local_sts.js?v=2"></script><!-- Local stats processing -->
-    <script src="videolayout.js?v=30"></script><!-- video ui -->
+    <script src="videolayout.js?v=31"></script><!-- video ui -->
     <script src="connectionquality.js?v=1"></script>
     <script src="toolbar.js?v=6"></script><!-- toolbar ui -->
     <script src="toolbar_toggler.js?v=2"></script>
@@ -66,11 +66,11 @@
     <script src="message_handler.js?v=2"></script>
     <script src="api_connector.js?v=2"></script>
     <script src="settings_menu.js?v=1"></script>
-    <script src="avatar.js?v=2"></script><!-- avatars -->
+    <script src="avatar.js?v=3"></script><!-- avatars -->
     <link rel="stylesheet" href="css/font.css?v=6"/>
     <link rel="stylesheet" href="css/toastr.css?v=1">
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=30"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=15" id="videolayout_default"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=16" id="videolayout_default"/>
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
@@ -264,8 +264,10 @@
                 <a target="_new"><div class="watermark leftwatermark"></div></a>
                 <a target="_new"><div class="watermark rightwatermark"></div></a>
                 <a class="poweredby" href="http://jitsi.org" target="_new" >powered by jitsi.org</a>
+                <div id="activeSpeaker">
                     <img id="activeSpeakerAvatar" src=""/>
                     <canvas id="activeSpeakerAudioLevel"></canvas>
+                </div>
                 <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
             </div>
             <div id="remoteVideos">

prezi.js

@@ -25,7 +25,7 @@ var Prezi = (function (my) {
                 ToolbarToggler.dockToolbar(true);
                 VideoLayout.setLargeVideoVisible(false);
             });
-            $('#activeSpeakerAvatar').css('visibility', 'hidden');
+            $('#activeSpeaker').css('visibility', 'hidden');
         }
         else {
             if (prezi.css('opacity') == '1') {

videolayout.js

@@ -173,8 +173,7 @@ var VideoLayout = (function (my) {
 
         if (RTC.getVideoSrc($('#largeVideo')[0]) !== newSrc) {
 
-            $('#activeSpeakerAvatar').css('visibility', 'hidden');
-            $('#activeSpeakerAudioLevel').css('visibility', 'hidden');
+            $('#activeSpeaker').css('visibility', 'hidden');
             // Due to the simulcast the localVideoSrc may have changed when the
             // fadeOut event triggers. In that case the getJidFromVideoSrc and
             // isVideoSrcDesktop methods will not function correctly.
@@ -434,6 +433,7 @@ var VideoLayout = (function (my) {
         }
         else {
             $('#largeVideo').css({visibility: 'hidden'});
+            $('#activeSpeaker').css('visibility', 'hidden');
             $('.watermark').css({visibility: 'hidden'});
             VideoLayout.enableDominantSpeaker(resourceJid, false);
             if(focusedVideoInfo) {
@@ -1040,10 +1040,8 @@ var VideoLayout = (function (my) {
         $('#largeVideoContainer').height(availableHeight);
 
         var avatarSize = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE;
-        var top = (availableHeight - avatarSize) / 2;
-        $('#activeSpeakerAvatar').css('top', top);
-        $('#activeSpeakerAudioLevel').css('top', top - avatarSize / 4);
-        $('#activeSpeakerAudioLevel').css('left', availableWidth / 2 - avatarSize * 3 / 4);
+        var top = availableHeight / 2 - avatarSize / 4 * 3;
+        $('#activeSpeaker').css('top', top);
 
         VideoLayout.resizeThumbnails();
     };