diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 1e1b9581f..9b4b20121 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -443,10 +443,10 @@ UI.start = function () {
// Display notice message at the top of the toolbar
if (config.noticeMessage) {
$('#noticeText').text(config.noticeMessage);
- UIUtil.showElement('notice');
+ UIUtil.setVisible('notice', true);
}
} else {
- UIUtil.hideElement('mainToolbarContainer');
+ UIUtil.setVisible('mainToolbarContainer', false);
FilmStrip.setupFilmStripOnly();
messageHandler.enableNotifications(false);
JitsiPopover.enabled = false;
diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
index c9e17b037..77b86f7ce 100644
--- a/modules/UI/recording/Recording.js
+++ b/modules/UI/recording/Recording.js
@@ -392,7 +392,7 @@ var Recording = {
let shouldShow = show && _isRecordingButtonEnabled();
let id = 'toolbar_button_record';
- UIUtil.showOrHideElement(id, shouldShow);
+ UIUtil.setVisible(id, shouldShow);
},
/**
@@ -476,7 +476,7 @@ var Recording = {
// Recording spinner
let spinnerId = 'recordingSpinner';
- UIUtil.showOrHideElement(
+ UIUtil.setVisible(
spinnerId, recordingState === Status.RETRYING);
},
// checks whether recording is enabled and whether we have params
diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js
index f83aa5b7a..5c1f0746f 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/modules/UI/side_pannels/chat/Chat.js
@@ -306,18 +306,14 @@ var Chat = {
* @param subject the subject
*/
setSubject (subject) {
- let toggleFunction;
if (subject) {
subject = subject.trim();
}
- toggleFunction = subject ? UIUtil.showElement : UIUtil.hideElement;
- toggleFunction = toggleFunction.bind(UIUtil);
-
let subjectId = 'subject';
let html = linkify(UIUtil.escapeHtml(subject));
$(`#${subjectId}`).html(html);
- toggleFunction(subjectId);
+ UIUtil.setVisible(subjectId, subject && subject.length > 0);
},
/**
diff --git a/modules/UI/side_pannels/profile/Profile.js b/modules/UI/side_pannels/profile/Profile.js
index 67a7f4df9..45c1a8caa 100644
--- a/modules/UI/side_pannels/profile/Profile.js
+++ b/modules/UI/side_pannels/profile/Profile.js
@@ -128,7 +128,7 @@ export default {
*/
showAuthenticationButtons (show) {
let id = 'profile_auth_container';
- UIUtil.showOrHideElement(id, show);
+ UIUtil.setVisible(id, show);
},
/**
@@ -138,7 +138,7 @@ export default {
showLoginButton (show) {
let id = 'profile_button_login';
- UIUtil.showOrHideElement(id, show);
+ UIUtil.setVisible(id, show);
},
/**
@@ -148,7 +148,7 @@ export default {
showLogoutButton (show) {
let id = 'profile_button_logout';
- UIUtil.showOrHideElement(id, show);
+ UIUtil.setVisible(id, show);
},
/**
@@ -158,7 +158,7 @@ export default {
setAuthenticatedIdentity (authIdentity) {
let id = 'profile_auth_identity';
- UIUtil.showOrHideElement(id, !!authIdentity);
+ UIUtil.setVisible(id, !!authIdentity);
$(`#${id}`).text(authIdentity ? authIdentity : '');
}
diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js
index a523b8f62..d5176661e 100644
--- a/modules/UI/side_pannels/settings/SettingsMenu.js
+++ b/modules/UI/side_pannels/settings/SettingsMenu.js
@@ -166,7 +166,7 @@ export default {
APP.translation.addLanguageChangedListener(
lng => selectInput[0].dataset.i18n = `languages:${lng}`);
- UIUtil.showElement(wrapperId);
+ UIUtil.setVisible(wrapperId, true);
}
// DEVICES LIST
if (UIUtil.isSettingEnabled('devices')) {
@@ -181,9 +181,9 @@ export default {
});
// Only show the subtitle if this isn't the only setting section.
if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
- UIUtil.showElement("deviceOptionsTitle");
+ UIUtil.setVisible("deviceOptionsTitle", true);
- UIUtil.showElement(wrapperId);
+ UIUtil.setVisible(wrapperId, true);
}
// MODERATOR
if (UIUtil.isSettingEnabled('moderator')) {
@@ -208,7 +208,7 @@ export default {
emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled);
});
- UIUtil.showElement(wrapperId);
+ UIUtil.setVisible(wrapperId, true);
}
},
@@ -245,15 +245,15 @@ export default {
// Only show the subtitle if this isn't the only setting section.
if (!$("#moderatorOptionsTitle").is(":visible")
&& interfaceConfig.SETTINGS_SECTIONS.length > 1)
- UIUtil.showElement("moderatorOptionsTitle");
+ UIUtil.setVisible("moderatorOptionsTitle", true);
- UIUtil.showElement("startMutedOptions");
+ UIUtil.setVisible("startMutedOptions", true);
} else {
// Only show the subtitle if this isn't the only setting section.
if ($("#moderatorOptionsTitle").is(":visible"))
- UIUtil.hideElement("moderatorOptionsTitle");
+ UIUtil.setVisible("moderatorOptionsTitle", false);
- UIUtil.hideElement("startMutedOptions");
+ UIUtil.setVisible("startMutedOptions", false);
}
},
@@ -268,7 +268,7 @@ export default {
* @param {boolean} show {true} to show those options, {false} to hide them
*/
showFollowMeOptions (show) {
- UIUtil.showOrHideElement(
+ UIUtil.setVisible(
"followMeOptions",
show && UIUtil.isSettingEnabled('moderator'));
},
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index 0b5e37d5c..778c7ebcb 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -398,7 +398,7 @@ Toolbar = {
let el = document.getElementById(id);
UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
}
- UIUtil.showOrHideElement(id, shouldShow);
+ UIUtil.setVisible(id, shouldShow);
},
// checks whether desktop sharing is enabled and whether
@@ -416,7 +416,7 @@ Toolbar = {
&& UIUtil.isButtonEnabled('sip') && show;
let id = 'toolbar_button_sip';
- UIUtil.showOrHideElement(id, shouldShow);
+ UIUtil.setVisible(id, shouldShow);
},
// Shows or hides the dialpad button
@@ -424,7 +424,7 @@ Toolbar = {
let shouldShow = UIUtil.isButtonEnabled('dialpad') && show;
let id = 'toolbar_button_dialpad';
- UIUtil.showOrHideElement(id, shouldShow);
+ UIUtil.setVisible(id, shouldShow);
},
/**
diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js
index ce3617764..e5af37423 100644
--- a/modules/UI/util/UIUtil.js
+++ b/modules/UI/util/UIUtil.js
@@ -240,52 +240,13 @@ const IndicatorFontSizes = {
},
/**
- * Shows the element given by id.
- *
- * @param {String} the identifier of the element to show
- */
- showElement(id) {
- let element;
- if (id instanceof HTMLElement) {
- element = id;
- } else {
- element = document.getElementById(id);
- }
-
- if (!element) {
- return;
- }
-
- if(element.classList.contains('hide')) {
- element.classList.remove('hide');
- }
-
- let type = this._getElementDefaultDisplay(element.tagName);
- let className = SHOW_CLASSES[type];
- element.classList.add(className);
- },
-
- /**
- * Shows or hides the element given (optionally by id).
+ * Shows / hides the element given by id.
*
* @param {string|HTMLElement} idOrElement the identifier or the element
* to show/hide
* @param {boolean} show true to show or false to hide
*/
- showOrHideElement(idOrElement, show) {
- if (show) {
- this.showElement(idOrElement);
- } else {
- this.hideElement(idOrElement);
- }
- },
-
- /**
- * Hides the element given by id.
- *
- * @param {String} the identifier of the element to hide
- */
- hideElement(id) {
+ setVisible(id, visible) {
let element;
if (id instanceof HTMLElement) {
element = id;
@@ -297,14 +258,20 @@ const IndicatorFontSizes = {
return;
}
+ if (!visible)
+ element.classList.add('hide');
+ else if (element.classList.contains('hide')) {
+ element.classList.remove('hide');
+ }
+
let type = this._getElementDefaultDisplay(element.tagName);
let className = SHOW_CLASSES[type];
- if(element.classList.contains(className)) {
- element.classList.remove(className);
+ if (visible) {
+ element.classList.add(className);
}
-
- element.classList.add('hide');
+ else if (element.classList.contains(className))
+ element.classList.remove(className);
},
/**
@@ -326,12 +293,13 @@ const IndicatorFontSizes = {
/**
* Shows / hides the element with the given jQuery selector.
*
- * @param {jQuery} selector the jQuery selector of the element to show/hide
+ * @param {jQuery} jquerySelector the jQuery selector of the element to
+ * show / shide
* @param {boolean} isVisible
*/
- setVisibility(selector, isVisible) {
- if (selector && selector.length > 0) {
- selector.css("visibility", isVisible ? "visible" : "hidden");
+ setVisibleBySelector(jquerySelector, isVisible) {
+ if (jquerySelector && jquerySelector.length > 0) {
+ jquerySelector.css("visibility", isVisible ? "visible" : "hidden");
}
},
diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js
index 9e9f09bc3..50035dc4d 100644
--- a/modules/UI/videolayout/LargeVideoManager.js
+++ b/modules/UI/videolayout/LargeVideoManager.js
@@ -334,7 +334,7 @@ export default class LargeVideoManager {
let id = 'localConnectionMessage';
- UIUtil.showOrHideElement(id, show);
+ UIUtil.setVisible(id, show);
if (show) {
// Avatar message conflicts with 'videoConnectionMessage',
diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js
index 3a816f890..4e38f8a39 100644
--- a/modules/UI/videolayout/SmallVideo.js
+++ b/modules/UI/videolayout/SmallVideo.js
@@ -218,7 +218,7 @@ SmallVideo.prototype.hideIndicator = function () {
SmallVideo.prototype.showAudioIndicator = function (isMuted) {
let mutedIndicator = this.getAudioMutedIndicator();
- UIUtil.showOrHideElement(mutedIndicator, isMuted);
+ UIUtil.setVisible(mutedIndicator, isMuted);
this.isAudioMuted = isMuted;
};
@@ -268,7 +268,7 @@ SmallVideo.prototype.setVideoMutedView = function(isMuted) {
let element = this.getVideoMutedIndicator();
- UIUtil.showOrHideElement(element, isMuted);
+ UIUtil.setVisible(element, isMuted);
};
/**
@@ -505,24 +505,24 @@ SmallVideo.prototype.updateView = function () {
// Determine whether video, avatar or blackness should be displayed
let displayMode = this.selectDisplayMode();
// Show/hide video.
- UIUtil.setVisibility( this.selectVideoElement(),
- (displayMode === DISPLAY_VIDEO
+ UIUtil.setVisibleBySelector(this.selectVideoElement(),
+ (displayMode === DISPLAY_VIDEO
|| displayMode === DISPLAY_VIDEO_WITH_NAME));
// Show/hide the avatar.
- UIUtil.setVisibility( this.$avatar(),
- (displayMode === DISPLAY_AVATAR
+ UIUtil.setVisibleBySelector(this.$avatar(),
+ (displayMode === DISPLAY_AVATAR
|| displayMode === DISPLAY_AVATAR_WITH_NAME));
// Show/hide the display name.
- UIUtil.setVisibility( this.$displayName(),
- !this.hideDisplayName
- && (displayMode === DISPLAY_BLACKNESS_WITH_NAME
+ UIUtil.setVisibleBySelector(this.$displayName(),
+ !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
// the display name
- UIUtil.setVisibility( $('#' + this.videoSpanId
+ UIUtil.setVisibleBySelector($('#' + this.videoSpanId
+ ' .videocontainer__hoverOverlay'),
- (displayMode === DISPLAY_AVATAR_WITH_NAME
+ (displayMode === DISPLAY_AVATAR_WITH_NAME
|| displayMode === DISPLAY_VIDEO_WITH_NAME));
};
@@ -570,7 +570,7 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
tooltip: 'speaker'
});
- UIUtil.showOrHideElement(indicatorSpan, show);
+ UIUtil.setVisible(indicatorSpan, show);
};
/**
@@ -594,7 +594,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
tooltip: 'raisedHand'
});
- UIUtil.showOrHideElement(indicatorSpan, show);
+ UIUtil.setVisible(indicatorSpan, show);
};
/**
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index 67c5faa00..eb4f8ff83 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/modules/UI/videolayout/VideoLayout.js
@@ -1144,7 +1144,7 @@ var VideoLayout = {
updateResolutionLabel(isResolutionHD) {
let id = 'videoResolutionLabel';
- UIUtil.showOrHideElement(id, isResolutionHD);
+ UIUtil.setVisible(id, isResolutionHD);
},
/**