Adds an overlay to dim videos when showing displayname.

css/_videolayout_default.scss

@@ -62,7 +62,7 @@
 .videocontainer__toptoolbar {
     position: absolute;
     left: 0;
-    z-index: 1;
+    z-index: 3;
     width: 100%;
     box-sizing: border-box; // Includes the padding in the 100% width.
 }
@@ -81,6 +81,15 @@
     height: $thumbnailIndicatorSize + $toolbarPadding;
 }
 
+.videocontainer__overlay {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: none;
+    background: rgba(0,0,0,.6);
+    z-index: 2;
+}
+
 #remoteVideos .videocontainer.videoContainerFocused,
 #remoteVideos .videocontainer:hover {
     cursor: hand;

index.html

@@ -255,6 +255,7 @@
                     <audio id="localAudio" autoplay muted></audio>
                     <div class="videocontainer__toolbar"></div>
                     <div class="videocontainer__toptoolbar"></div>
+                    <div class="videocontainer__overlay"></div>
                 </span>
                 <audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
                 <audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>

modules/UI/videolayout/RemoteVideo.js

@@ -576,6 +576,10 @@ RemoteVideo.createContainer = function (spanId) {
     toolbar.className = "videocontainer__toolbar";
     container.appendChild(toolbar);
 
+    let overlay = document.createElement('div');
+    overlay.className = "videocontainer__overlay";
+    container.appendChild(overlay);
+
     var remotes = document.getElementById('remoteVideos');
     return remotes.appendChild(container);
 };

modules/UI/videolayout/SmallVideo.js

@@ -163,9 +163,17 @@ SmallVideo.prototype.bindHoverHandler = function () {
     var self = this;
     $(this.container).hover(
         function () {
+            if (!self.VideoLayout.isCurrentlyOnLarge(self.id)) {
+                $('#' + self.videoSpanId + ' .videocontainer__overlay')
+                    .removeClass("hide")
+                    .addClass("show-inline");
+            }
             self.showDisplayName(true);
         },
         function () {
+            $('#' + self.videoSpanId + ' .videocontainer__overlay')
+                .removeClass("show-inline")
+                .addClass("hide");
             // If the video has been "pinned" by the user we want to
             // keep the display name on place.
             if (!self.VideoLayout.isLargeVideoVisible() ||