Improves the pin and hover borders

css/_base.scss

@@ -85,11 +85,6 @@ form {
     background-color: #00ccff;
 }
 
-.glow
-{
-    text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df;
-}
-
 .watermark {
     display: block;
     position: absolute;

css/_toolbars.scss

@@ -110,6 +110,11 @@
     cursor: default;
 }
 
+.button.glow
+{
+    text-shadow: 0px 0px 5px $toolbarToggleBackground;
+}
+
 a.button.unclickable:hover,
 a.button.unclickable:active,
 a.button.unclickable.selected{

css/_variables.scss

@@ -30,6 +30,7 @@ $toolbarSelectBackground: rgba(0, 0, 0, .6);
 
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
+$toolbarToggleBackground: #165ECC;
 
 // Main controls
 $inputBackground: rgba(132, 132, 132, .5);
@@ -39,7 +40,7 @@ $inputBorderColor: #EBEBEB;
 $buttonBackground: #44A5FF;
 
 // Video layout.
-$videoThumbnailHovered: #44A5FF;
+$videoThumbnailHovered: #BFEBFF;
 $videoThumbnailSelected: #165ECC;
 $participantNameColor: #fff;
 $thumbnailPictogramColor: #fff;

css/_videolayout_default.scss

@@ -25,7 +25,7 @@
     left: 0;
     right: 0;
     width:auto;
-    border:1px solid transparent;
+    border: 2px solid transparent;
     z-index: 5;
     transition: bottom 2s;
     overflow: visible !important;
@@ -48,7 +48,6 @@
     background-size: contain;
     border-radius:1px;
     margin: 0 $thumbnailVideoMargin;
-    border: 1px solid $defaultDarkColor;
 }
 
 /**
@@ -67,22 +66,35 @@
     padding: 0 5px 0 5px;
 }
 
+#remoteVideos .videocontainer.videoContainerFocused,
+#remoteVideos .videocontainer:hover {
+    cursor: hand;
+    margin-right: $thumbnailVideoMargin - 2;
+    margin-left: $thumbnailVideoMargin - 2;
+    margin-top: -2px;
+}
 /**
  * Focused video thumbnail.
  */
 #remoteVideos .videocontainer.videoContainerFocused {
-    cursor: hand;
     transition-duration: 0.5s;
     -webkit-transition-duration: 0.5s;
     -webkit-animation-name: greyPulse;
     -webkit-animation-duration: 2s;
     -webkit-animation-iteration-count: 1;
-    border: 1px solid $videoThumbnailSelected;
+    border: 2px solid $videoThumbnailSelected !important;
+    box-shadow: inset 0 0 3px $videoThumbnailSelected,
+                0 0 3px $videoThumbnailSelected !important;
 }
 
-#remoteVideos .videocontainer:hover,
+/**
-#remoteVideos .videocontainer.videoContainerFocused:hover {
+ * Hovered video thumbnail.
-    border: 1px solid $videoThumbnailHovered;
+ */
+#remoteVideos .videocontainer:hover {
+    cursor: hand;
+    border: 2px solid $videoThumbnailHovered;
+    box-shadow: inset 0 0 3px $videoThumbnailHovered,
+              0 0 3px $videoThumbnailHovered;
 }
 
 #localVideoWrapper {

modules/UI/audio_levels/AudioLevels.js

@@ -147,17 +147,13 @@ const AudioLevels = {
      * Updates the audio level canvas for the given id. If the canvas
      * didn't exist we create it.
      */
-    createAudioLevelCanvas (id, thumbWidth, thumbHeight) {
+    createAudioLevelCanvas (videoSpanId, thumbWidth, thumbHeight) {
-
-        let videoSpanId = (id === "local")
-                        ? "localVideoContainer"
-                        : `participant_${id}`;
 
         let videoSpan = document.getElementById(videoSpanId);
 
         if (!videoSpan) {
-            if (id) {
+            if (videoSpanId) {
-                console.error("No video element for id", id);
+                console.error("No video element for id", videoSpanId);
             } else {
                 console.error("No video element for local video.");
             }
@@ -245,27 +241,18 @@ const AudioLevels = {
     },
 
     updateCanvasSize (localVideo, remoteVideo) {
-        let localCanvasWidth
-            = localVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA;
-        let localCanvasHeight
-            = localVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA;
-        let remoteCanvasWidth
-            = remoteVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA;
-        let remoteCanvasHeight
-            = remoteVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA;
-
         let { remoteThumbs, localThumb } = FilmStrip.getThumbs();
 
-        remoteThumbs.children('canvas').each(function () {
+        remoteThumbs.each(( index, element ) => {
-            $(this).attr('width', remoteCanvasWidth);
+            this.createAudioLevelCanvas(element.id,
-            $(this).attr('height', remoteCanvasHeight);
+                                        remoteVideo.thumbWidth,
+                                        remoteVideo.thumbHeight);
         });
 
-        if(localThumb) {
+        if (localThumb) {
-            localThumb.children('canvas').each(function () {
+            this.createAudioLevelCanvas(localThumb.get(0).id,
-                $(this).attr('width', localCanvasWidth);
+                                        localVideo.thumbWidth,
-                $(this).attr('height', localCanvasHeight);
+                                        localVideo.thumbHeight);
-            });
         }
     }
 };

modules/UI/videolayout/RemoteVideo.js

@@ -33,9 +33,10 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
         this.addRemoteVideoMenu();
     }
 
-    let { remoteVideo } = this.VideoLayout.resizeThumbnails();
+    let { remoteVideo } = this.VideoLayout.resizeThumbnails(false, true);
     let { thumbHeight, thumbWidth } = remoteVideo;
-    AudioLevels.createAudioLevelCanvas(this.id, thumbWidth, thumbHeight);
+    AudioLevels.createAudioLevelCanvas(
+        this.videoSpanId, thumbWidth, thumbHeight);
 
     return this.container;
 };

modules/UI/videolayout/VideoLayout.js

@@ -109,7 +109,9 @@ var VideoLayout = {
         // the local video thumb maybe one pixel
         let { localVideo } = this.resizeThumbnails(false, true);
         AudioLevels.createAudioLevelCanvas(
-            "local", localVideo.thumbWidth, localVideo.thumbHeight);
+            "localVideoContainer",
+            localVideo.thumbWidth,
+            localVideo.thumbHeight);
 
         emitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked);
         this.lastNCount = config.channelLastN;