Audio level indication. Improvements in rollover and active speaker UI. Part 2.

app.js

@@ -448,8 +448,9 @@ function statsUpdated(statsCollector)
         var peerStats = statsCollector.jid2stats[jid];
         Object.keys(peerStats.ssrc2AudioLevel).forEach(function (ssrc)
         {
-//            console.info(jid +  " audio level: " +
+            if (jid !== connection.emuc.myRoomJid)
-//                peerStats.ssrc2AudioLevel[ssrc] + " of ssrc: " + ssrc);
+                AudioLevels.updateAudioLevel(   Strophe.getResourceFromJid(jid),
+                                                peerStats.ssrc2AudioLevel[ssrc]);
         });
     });
 }
@@ -461,7 +462,10 @@ function statsUpdated(statsCollector)
  */
 function localStatsUpdated(statsCollector)
 {
-//    console.info("Local audio level: " +  statsCollector.audioLevel);
+    if (connection.emuc.myRoomJid)
+        AudioLevels.updateAudioLevel(
+                Strophe.getResourceFromJid(connection.emuc.myRoomJid),
+                statsCollector.audioLevel);
 }
 
 /**

chat.js

@@ -175,7 +175,13 @@ var Chat = (function (my) {
             $('#remoteVideos>span').animate({height: thumbnailsHeight,
                                             width: thumbnailsWidth},
                                             {queue: false,
-                                            duration: 500});
+                                            duration: 500,
+                                            complete: function() {
+                                                $(document).trigger(
+                                                        "remotevideo.resized",
+                                                        [thumbnailsWidth,
+                                                         thumbnailsHeight]);
+                                            }});
 
             $('#largeVideoContainer').animate({ width: videospaceWidth,
                                                 height: videospaceHeight},
@@ -219,7 +225,12 @@ var Chat = (function (my) {
             $('#remoteVideos>span').animate({height: thumbnailsHeight,
                         width: thumbnailsWidth},
                         {queue: false,
-                        duration: 500});
+                        duration: 500,
+                        complete: function() {
+                            $(document).trigger(
+                                    "remotevideo.resized",
+                                    [thumbnailsWidth, thumbnailsHeight]);
+                        }});
 
             $('#largeVideoContainer').animate({ width: videospaceWidth,
                                                 height: videospaceHeight},

config.js

@@ -12,7 +12,7 @@ var config = {
     desktopSharing: 'ext', // Desktop sharing method. Can be set to 'ext', 'webrtc' or false to disable.
     chromeExtensionId: 'diibjkoicjeejcmhdnailmkgecihlobk', // Id of desktop streamer Chrome extension
     minChromeExtVersion: '0.1', // Required version of Chrome extension
-    enableRtpStats: false, // Enables RTP stats processing
+    enableRtpStats: true, // Enables RTP stats processing
     openSctp: true, // Toggle to enable/disable SCTP channels
 //    channelLastN: -1, // The default value of the channel attribute last-n.
     enableRecording: false

css/videolayout_default.css

@@ -49,8 +49,16 @@
     -webkit-animation-name: greyPulse;
     -webkit-animation-duration: 2s;
     -webkit-animation-iteration-count: 1;
-    -webkit-box-shadow: 0 0 18px #388396;
+}
-    border: 2px solid #388396;
+
+#remoteVideos .videocontainer:hover {
+    -webkit-box-shadow: inset 0 0 10px #FFFFFF, 0 0 10px #FFFFFF;
+    border: 2px solid #FFFFFF;
+}
+
+#remoteVideos .videocontainer.videoContainerFocused {
+    -webkit-box-shadow: inset 0 0 28px #006d91;
+    border: 2px solid #006d91;
 }
 
 #localVideoWrapper {
@@ -291,3 +299,10 @@
     background-image:url(../images/rightwatermark.png);
     background-position: center right;
 }
+
+.audiolevel {
+    display: inline-block;
+    position: absolute;
+    z-index: 0;
+    border-radius:10px;
+}

index.html

@@ -22,14 +22,14 @@
     <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
     <script src="libs/tooltip.js?v=1"></script><!-- bootstrap tooltip lib -->
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
-    <script src="config.js?v=2"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
+    <script src="config.js?v=3"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
     <script src="muc.js?v=12"></script><!-- simple MUC library -->
     <script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
     <script src="desktopsharing.js?v=2"></script><!-- desktop sharing -->
     <script src="data_channels.js?v=2"></script><!-- data channels -->
-    <script src="app.js?v=3"></script><!-- application logic -->
+    <script src="app.js?v=4"></script><!-- application logic -->
     <script src="commands.js?v=1"></script><!-- application logic -->
-    <script src="chat.js?v=7"></script><!-- chat logic -->
+    <script src="chat.js?v=8"></script><!-- chat logic -->
     <script src="util.js?v=5"></script><!-- utility functions -->
     <script src="etherpad.js?v=8"></script><!-- etherpad plugin -->
     <script src="prezi.js?v=4"></script><!-- prezi plugin -->
@@ -39,12 +39,14 @@
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
     <script src="rtp_stats.js?v=1"></script><!-- RTP stats processing -->
     <script src="local_stats.js?v=1"></script><!-- Local stats processing -->
-    <script src="videolayout.js?v=6"></script><!-- video ui -->
+    <script src="videolayout.js?v=7"></script><!-- video ui -->
     <script src="toolbar.js?v=3"></script><!-- toolbar ui -->
+    <script src="canvas_util.js?v=1"></script><!-- canvas drawing utils -->
+    <script src="audio_levels.js?v=1"></script><!-- audio levels plugin -->
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font.css"/>
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=22"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=7" id="videolayout_default"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=8" id="videolayout_default"/>
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
     <link rel="stylesheet" href="css/popup_menu.css?v=2">

local_stats.js

@@ -32,7 +32,6 @@ var LocalStatsCollector = (function() {
         this.audioLevel = 0;
     }
 
-
     /**
      * Starts the collecting the statistics.
      */
@@ -61,8 +60,7 @@ var LocalStatsCollector = (function() {
             },
             this.intervalMilis
         );
-
+    };
-    }
 
     /**
      * Stops collecting the statistics.
@@ -72,8 +70,7 @@ var LocalStatsCollector = (function() {
             clearInterval(this.intervalId);
             this.intervalId = null;
         }
-    }
+    };
-
 
     /**
      * Converts frequency data array to audio level.
@@ -91,7 +88,7 @@ var LocalStatsCollector = (function() {
         }
 
         return maxVolume / 255;
-    }
+    };
 
     return LocalStatsCollectorProto;
 })();

videolayout.js

@@ -26,6 +26,8 @@ var VideoLayout = (function (my) {
         var localVideoContainer = document.getElementById('localVideoWrapper');
         localVideoContainer.appendChild(localVideo);
 
+        AudioLevels.updateAudioLevelCanvas();
+
         var localVideoSelector = $('#' + localVideo.id);
         // Add click handler to both video and video wrapper elements in case
         // there's no video.
@@ -313,6 +315,8 @@ var VideoLayout = (function (my) {
             addRemoteVideoMenu(peerJid, container);
 
         remotes.appendChild(container);
+        AudioLevels.updateAudioLevelCanvas(peerJid);
+
         return container;
     };
 
@@ -579,6 +583,8 @@ var VideoLayout = (function (my) {
         $('#remoteVideos').height(height);
         $('#remoteVideos>span').width(width);
         $('#remoteVideos>span').height(height);
+
+        $(document).trigger("remotevideo.resized", [width, height]);
     };
 
     /**
@@ -958,3 +964,5 @@ var VideoLayout = (function (my) {
 
     return my;
 }(VideoLayout || {}));
+
+