Fixes shifted audio level glow on thumbnails. Fixes missing audio level indicator on large video avatar.

css/videolayout_default.css

@@ -420,7 +420,7 @@
     position: absolute;
     top: 0px;
     left: 0px;
-    z-index: 1;
+    z-index: 2;
     visibility: inherit;
 }
 
@@ -435,7 +435,7 @@
     margin: auto;
     position: relative;
     border-radius: 50px;
-    z-index: 2;
+    z-index: 3;
     visibility: inherit;
 }
 

modules/UI/audio_levels/AudioLevels.js

@@ -50,7 +50,8 @@ function drawAudioLevelCanvas(id, audioLevel) {
          * been observed to pile into the console, strain the CPU.
          */
         if (audioLevelCanvasOrig) {
-            audioLevelCanvasCache[id] = CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
+            audioLevelCanvasCache[id]
+                = CanvasUtil.cloneCanvas(audioLevelCanvasOrig);
         }
     }
 
@@ -68,13 +69,14 @@ function drawAudioLevelCanvas(id, audioLevel) {
 
     if (shadowLevel > 0) {
         // drawContext, x, y, w, h, r, shadowColor, shadowLevel
-        CanvasUtil.drawRoundRectGlow(drawContext,
-                                     interfaceConfig.CANVAS_EXTRA / 2, interfaceConfig.CANVAS_EXTRA / 2,
-                                     canvas.width - interfaceConfig.CANVAS_EXTRA,
-                                     canvas.height - interfaceConfig.CANVAS_EXTRA,
-                                     interfaceConfig.CANVAS_RADIUS,
-                                     interfaceConfig.SHADOW_COLOR,
-                                     shadowLevel);
+        CanvasUtil.drawRoundRectGlow(
+            drawContext,
+            interfaceConfig.CANVAS_EXTRA / 2, interfaceConfig.CANVAS_EXTRA / 2,
+            canvas.width - interfaceConfig.CANVAS_EXTRA,
+            canvas.height - interfaceConfig.CANVAS_EXTRA,
+            interfaceConfig.CANVAS_RADIUS,
+            interfaceConfig.SHADOW_COLOR,
+            shadowLevel);
     }
 }
 
@@ -88,11 +90,14 @@ function getShadowLevel (audioLevel) {
     let shadowLevel = 0;
 
     if (audioLevel <= 0.3) {
-        shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
+        shadowLevel
+            = Math.round(interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
     } else if (audioLevel <= 0.6) {
-        shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
+        shadowLevel
+            = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
     } else {
-        shadowLevel = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
+        shadowLevel
+            = Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
     }
 
     return shadowLevel;
@@ -203,7 +208,8 @@ const AudioLevels = {
     },
 
     updateDominantSpeakerAudioLevel (audioLevel) {
-        if($("#domiantSpeaker").css("visibility") == "hidden" || ASDrawContext === null) {
+        if($("#dominantSpeaker").css("visibility") == "hidden"
+            || ASDrawContext === null) {
             return;
         }
 
@@ -214,7 +220,6 @@ const AudioLevels = {
 
         ASDrawContext.shadowBlur = getShadowLevel(audioLevel);
 
-
         // Fill the shape.
         ASDrawContext.fill();
     },
@@ -223,7 +228,10 @@ const AudioLevels = {
         let canvasWidth = thumbWidth + interfaceConfig.CANVAS_EXTRA;
         let canvasHeight = thumbHeight + interfaceConfig.CANVAS_EXTRA;
 
-        BottomToolbar.getThumbs().children('canvas').width(canvasWidth).height(canvasHeight);
+        BottomToolbar.getThumbs().children('canvas').each(function () {
+            $(this).attr('width', canvasWidth);
+            $(this).attr('height', canvasHeight);
+        });
 
         Object.keys(audioLevelCanvasCache).forEach(function (id) {
             audioLevelCanvasCache[id].width = canvasWidth;

modules/UI/videolayout/LargeVideo.js

@@ -418,13 +418,14 @@ export default class LargeVideoManager {
             // change the avatar url on large
             this.updateAvatar(Avatar.getAvatarUrl(id));
 
-            let isVideoMuted = stream? stream.isMuted() : true;
+            let isVideoMuted = stream ? stream.isMuted() : true;
 
             // show the avatar on large if needed
             this.videoContainer.showAvatar(isVideoMuted);
 
             // do not show stream if video is muted
-            let promise = isVideoMuted ? Promise.resolve() : this.videoContainer.show();
+            let promise
+                = isVideoMuted ? Promise.resolve() : this.videoContainer.show();
 
             // resolve updateLargeVideo promise after everything is done
             promise.then(resolve);

modules/UI/videolayout/VideoLayout.js

@@ -150,7 +150,8 @@ var VideoLayout = {
         this.onVideoTypeChanged(localId, stream.videoType);
 
         let {thumbWidth, thumbHeight} = this.calculateThumbnailSize();
-        AudioLevels.updateAudioLevelCanvas(null, thumbWidth, thumbHeight);
+        AudioLevels.updateAudioLevelCanvas(
+            null, thumbWidth, thumbHeight);
 
         if (!stream.isMuted()) {
             localVideoThumbnail.changeVideo(stream);