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

Adds a property to hide display name and disable update view in SmallVideo. Localvideo hides displayName and disabled update view while users is editing its name and resumes normal behaviour when editing finishes.

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