Merge pull request #1116 from jitsi/edit-displayname-overlap

Adds a property to hide display name and disable update view.

modules/UI/videolayout/LocalVideo.js

@@ -110,11 +110,17 @@ LocalVideo.prototype.setDisplayName = function(displayName) {
         $('#localVideoContainer .displayname')
             .bind("click", function (e) {
                 let $editDisplayName = $('#editDisplayName');
-                let $localDisplayName = $('#localDisplayName');
 
                 e.preventDefault();
                 e.stopPropagation();
-                UIUtil.setVisibility($localDisplayName, false);
+                // we set display to be hidden
+                self.hideDisplayName = true;
+                // update the small video vide to hide the display name
+                self.updateView();
+                // disables further updates in the thumbnail to stay in the
+                // edit mode
+                self.disableUpdateView = true;
+
                 $editDisplayName.show();
                 $editDisplayName.focus();
                 $editDisplayName.select();
@@ -122,7 +128,11 @@ LocalVideo.prototype.setDisplayName = function(displayName) {
                 $editDisplayName.one("focusout", function () {
                     self.emitter.emit(UIEvents.NICKNAME_CHANGED, this.value);
                     $editDisplayName.hide();
-                    UIUtil.setVisibility($localDisplayName, true);
+                    // stop editing, display displayName and resume updating
+                    // the thumbnail
+                    self.hideDisplayName = false;
+                    self.disableUpdateView = false;
+                    self.updateView();
                 });
 
                 $editDisplayName.on('keydown', function (e) {

modules/UI/videolayout/SmallVideo.js

@@ -51,6 +51,9 @@ function SmallVideo(VideoLayout) {
     this.audioStream = null;
     this.VideoLayout = VideoLayout;
     this.videoIsHovered = false;
+    this.hideDisplayName = false;
+    // we can stop updating the thumbnail
+    this.disableUpdateView = false;
 }
 
 /**
@@ -484,6 +487,9 @@ SmallVideo.prototype._isHovered = function () {
  * video because there is no dominant speaker and no focused speaker
  */
 SmallVideo.prototype.updateView = function () {
+    if (this.disableUpdateView)
+        return;
+
     if (!this.hasAvatar) {
         if (this.id) {
             // Init avatar
@@ -506,7 +512,8 @@ SmallVideo.prototype.updateView = function () {
                                 || displayMode === DISPLAY_AVATAR_WITH_NAME));
     // Show/hide the display name.
     UIUtil.setVisibility(   this.$displayName(),
-                            (displayMode === DISPLAY_BLACKNESS_WITH_NAME
+                            !this.hideDisplayName
+                            && (displayMode === DISPLAY_BLACKNESS_WITH_NAME
                                 || displayMode === DISPLAY_VIDEO_WITH_NAME
                                 || displayMode === DISPLAY_AVATAR_WITH_NAME));
     // show hide overlay when there is a video or avatar under