Move the display name to the center

css/_videolayout_default.scss

@@ -67,7 +67,6 @@
     box-sizing: border-box; // Includes the padding in the 100% width.
     height: $thumbnailToolbarHeight;
     max-height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
     padding: 0 5px 0 5px;
 }
 
@@ -176,8 +175,10 @@
 .videocontainer .editdisplayname {
     display: inline-block;
     position: absolute;
-    left: 30%;
-    width: 40%;
+    left: 10%;
+    width: 80%;
+    top: 50%;
+    margin-top: -12px;
     color: $participantNameColor;
     text-align: center;
     text-overflow: ellipsis;

modules/UI/util/UIUtil.js

@@ -237,6 +237,18 @@ const TOOLTIP_POSITIONS = {
         $("#"+id).addClass("hide");
     },
 
+    /**
+     * Shows / hides the element with the given jQuery selector.
+     *
+     * @param {jQuery} selector the jQuery selector of the element to show/hide
+     * @param {boolean} isVisible
+     */
+    setVisibility(selector, isVisible) {
+        if (selector && selector.length > 0) {
+            selector.css("visibility", isVisible ? "visible" : "hidden");
+        }
+    },
+
     hideDisabledButtons: function (mappings) {
         var selector = Object.keys(mappings)
           .map(function (buttonName) {

modules/UI/videolayout/LocalVideo.js

@@ -70,7 +70,6 @@ LocalVideo.prototype.setDisplayName = function(displayName) {
         nameSpan = document.createElement('span');
         nameSpan.className = 'displayname';
         document.getElementById(this.videoSpanId)
-            .querySelector('.videocontainer__toolbar')
             .appendChild(nameSpan);
 
 

modules/UI/videolayout/RemoteVideo.js

@@ -512,9 +512,10 @@ RemoteVideo.prototype.hideConnectionIndicator = function () {
 
 /**
  * Sets the display name for the given video span id.
+ *
+ * @param displayName the display name to set
  */
-RemoteVideo.prototype.setDisplayName = function(displayName, key) {
-
+RemoteVideo.prototype.setDisplayName = function(displayName) {
     if (!this.container) {
         console.warn( "Unable to set displayName - " + this.videoSpanId +
                 " does not exist");
@@ -530,10 +531,6 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
             if (displaynameSpan.text() !== displayName)
                 displaynameSpan.text(displayName);
         }
-        else if (key && key.length > 0) {
-            var nameHtml = APP.translation.generateTranslationHTML(key);
-            $('#' + this.videoSpanId + '_name').html(nameHtml);
-        }
         else
             $('#' + this.videoSpanId + '_name').text(
                 interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME);
@@ -541,7 +538,6 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
         nameSpan = document.createElement('span');
         nameSpan.className = 'displayname';
         $('#' + this.videoSpanId)[0]
-            .querySelector('.videocontainer__toolbar')
             .appendChild(nameSpan);
 
         if (displayName && displayName.length > 0) {

modules/UI/videolayout/SmallVideo.js

@@ -36,12 +36,6 @@ function SmallVideo(VideoLayout) {
     this.VideoLayout = VideoLayout;
 }
 
-function setVisibility(selector, show) {
-    if (selector && selector.length > 0) {
-        selector.css("visibility", show ? "visible" : "hidden");
-    }
-}
-
 /**
  * Returns the identifier of this small video.
  *
@@ -395,6 +389,16 @@ SmallVideo.prototype.$avatar = function () {
     return $('#' + this.videoSpanId + ' .userAvatar');
 };
 
+/**
+ * Returns the display name element, which appears on the video thumbnail.
+ *
+ * @return {jQuery} a jQuery selector pointing to the display name element of
+ * the video thumbnail
+ */
+SmallVideo.prototype.$displayName = function () {
+    return $('#' + this.videoSpanId + ' .displayname');
+};
+
 /**
  * Enables / disables the css responsible for focusing/pinning a video
  * thumbnail.
@@ -479,10 +483,15 @@ SmallVideo.prototype.updateView = function () {
 
     // Determine whether video, avatar or blackness should be displayed
     let displayMode = this.selectDisplayMode();
-    // Show/hide video
-    setVisibility(this.selectVideoElement(), displayMode === DISPLAY_VIDEO);
-    // Show/hide the avatar
-    setVisibility(this.$avatar(), displayMode === DISPLAY_AVATAR);
+    // Show/hide video.
+    UIUtil.setVisibility(   this.selectVideoElement(),
+                            displayMode === DISPLAY_VIDEO);
+    // Show/hide the avatar.
+    UIUtil.setVisibility(   this.$avatar(),
+                            displayMode === DISPLAY_AVATAR);
+    // Show/hide the display name.
+    UIUtil.setVisibility(   this.$displayName(),
+                            displayMode === DISPLAY_BLACKNESS);
 };
 
 SmallVideo.prototype.avatarChanged = function (avatarUrl) {