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.
This commit is contained in:
damencho 2016-11-04 17:02:30 -05:00
parent 4d335e086b
commit 510c650b7b
2 changed files with 21 additions and 4 deletions

View File

@ -110,11 +110,17 @@ LocalVideo.prototype.setDisplayName = function(displayName) {
$('#localVideoContainer .displayname') $('#localVideoContainer .displayname')
.bind("click", function (e) { .bind("click", function (e) {
let $editDisplayName = $('#editDisplayName'); let $editDisplayName = $('#editDisplayName');
let $localDisplayName = $('#localDisplayName');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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.show();
$editDisplayName.focus(); $editDisplayName.focus();
$editDisplayName.select(); $editDisplayName.select();
@ -122,7 +128,11 @@ LocalVideo.prototype.setDisplayName = function(displayName) {
$editDisplayName.one("focusout", function () { $editDisplayName.one("focusout", function () {
self.emitter.emit(UIEvents.NICKNAME_CHANGED, this.value); self.emitter.emit(UIEvents.NICKNAME_CHANGED, this.value);
$editDisplayName.hide(); $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) { $editDisplayName.on('keydown', function (e) {

View File

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