From e7e8dc3457045ad57529337a64e0f935973704f4 Mon Sep 17 00:00:00 2001
From: yanas <yana@jitsi.org>
Date: Fri, 5 Feb 2016 11:32:09 -0600
Subject: [PATCH] Fixes shifted audio level glow on thumbnails. Fixes missing
 audio level indicator on large video avatar.

---
 css/videolayout_default.css            |  4 +--
 modules/UI/audio_levels/AudioLevels.js | 36 ++++++++++++++++----------
 modules/UI/videolayout/LargeVideo.js   |  5 ++--
 modules/UI/videolayout/VideoLayout.js  |  3 ++-
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/css/videolayout_default.css b/css/videolayout_default.css
index 96213fdacede..e2fc9b04be14 100644
--- a/css/videolayout_default.css
+++ b/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;
 }
 
diff --git a/modules/UI/audio_levels/AudioLevels.js b/modules/UI/audio_levels/AudioLevels.js
index 0e2284a7a54a..4372165018e8 100644
--- a/modules/UI/audio_levels/AudioLevels.js
+++ b/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;
diff --git a/modules/UI/videolayout/LargeVideo.js b/modules/UI/videolayout/LargeVideo.js
index 3c0c6afc8a6f..479687ed00ff 100644
--- a/modules/UI/videolayout/LargeVideo.js
+++ b/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);
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index 737fbc103b59..59d010696f1d 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/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);