From 52847bd28d34f93fdd15286a55648808df7b16f9 Mon Sep 17 00:00:00 2001 From: paweldomas Date: Thu, 20 Oct 2016 11:58:47 -0500 Subject: [PATCH 1/6] fix(conference): crash with anonymous domain config --- conference.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/conference.js b/conference.js index a3409ca4c..d41e030f0 100644 --- a/conference.js +++ b/conference.js @@ -294,9 +294,10 @@ function changeLocalDisplayName(nickname = '') { } class ConferenceConnector { - constructor(resolve, reject) { + constructor(resolve, reject, invite) { this._resolve = resolve; this._reject = reject; + this._invite = invite; this.reconnectTimeout = null; room.on(ConferenceEvents.CONFERENCE_JOINED, this._handleConferenceJoined.bind(this)); @@ -340,7 +341,8 @@ class ConferenceConnector { }, 5000); // notify user that auth is required - AuthHandler.requireAuth(room, this.invite.getRoomLocker().password); + AuthHandler.requireAuth( + room, this._invite.getRoomLocker().password); break; case ConferenceErrors.RESERVATION_ERROR: @@ -521,7 +523,8 @@ export default { // XXX The API will take care of disconnecting from the XMPP // server (and, thus, leaving the room) on unload. return new Promise((resolve, reject) => { - (new ConferenceConnector(resolve, reject)).connect(); + (new ConferenceConnector( + resolve, reject, this.invite)).connect(); }); }); }, From 51da40e90c556f288c6c78f7e892c60329721ccc Mon Sep 17 00:00:00 2001 From: paweldomas Date: Wed, 23 Nov 2016 15:04:05 -0600 Subject: [PATCH 2/6] ref(UIUtil): add showOrHideElement --- modules/UI/recording/Recording.js | 13 ++---- .../UI/side_pannels/settings/SettingsMenu.js | 8 ++-- modules/UI/toolbars/Toolbar.js | 41 +++++-------------- modules/UI/util/UIUtil.js | 15 +++++++ modules/UI/videolayout/LargeVideoManager.js | 6 +-- modules/UI/videolayout/SmallVideo.js | 28 ++++--------- modules/UI/videolayout/VideoLayout.js | 6 +-- 7 files changed, 43 insertions(+), 74 deletions(-) diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index 27729ec4f..c9e17b037 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -392,11 +392,7 @@ var Recording = { let shouldShow = show && _isRecordingButtonEnabled(); let id = 'toolbar_button_record'; - if (shouldShow) { - UIUtil.showElement(id); - } else { - UIUtil.hideElement(id); - } + UIUtil.showOrHideElement(id, shouldShow); }, /** @@ -480,11 +476,8 @@ var Recording = { // Recording spinner let spinnerId = 'recordingSpinner'; - if(recordingState === Status.RETRYING) { - UIUtil.showElement(spinnerId); - } else { - UIUtil.hideElement(spinnerId); - } + UIUtil.showOrHideElement( + spinnerId, recordingState === Status.RETRYING); }, // checks whether recording is enabled and whether we have params // to start automatically recording diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js index 3daded142..a523b8f62 100644 --- a/modules/UI/side_pannels/settings/SettingsMenu.js +++ b/modules/UI/side_pannels/settings/SettingsMenu.js @@ -268,11 +268,9 @@ export default { * @param {boolean} show {true} to show those options, {false} to hide them */ showFollowMeOptions (show) { - if (show && UIUtil.isSettingEnabled('moderator')) { - UIUtil.showElement("followMeOptions"); - } else { - UIUtil.hideElement("followMeOptions"); - } + UIUtil.showOrHideElement( + "followMeOptions", + show && UIUtil.isSettingEnabled('moderator')); }, /** diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 438e4b84d..1ea160a16 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -403,11 +403,7 @@ Toolbar = { */ showAuthenticateButton (show) { let id = 'authenticationContainer'; - if (show) { - UIUtil.showElement(id); - } else { - UIUtil.hideElement(id); - } + UIUtil.showOrHideElement(id, show); }, showEtherpadButton () { @@ -425,10 +421,8 @@ Toolbar = { if (shouldShow) { let el = document.getElementById(id); UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right'); - UIUtil.showElement(id); - } else { - UIUtil.hideElement(id); } + UIUtil.showOrHideElement(id, shouldShow); }, // checks whether desktop sharing is enabled and whether @@ -446,22 +440,15 @@ Toolbar = { && UIUtil.isButtonEnabled('sip') && show; let id = 'toolbar_button_sip'; - if (shouldShow) { - UIUtil.showElement(id); - } else { - UIUtil.hideElement(id); - } + UIUtil.showOrHideElement(id, shouldShow); }, // Shows or hides the dialpad button showDialPadButton (show) { let shouldShow = UIUtil.isButtonEnabled('dialpad') && show; let id = 'toolbar_button_dialpad'; - if (shouldShow) { - UIUtil.showElement(id); - } else { - UIUtil.hideElement(id); - } + + UIUtil.showOrHideElement(id, shouldShow); }, /** @@ -470,13 +457,13 @@ Toolbar = { */ setAuthenticatedIdentity (authIdentity) { let id = 'toolbar_auth_identity'; + if(authIdentity) { - UIUtil.showElement(id); $(`#${id}`).text(authIdentity); } else { - UIUtil.hideElement(id); $(`#${id}`).text(''); } + UIUtil.showOrHideElement(id, !!authIdentity); }, /** @@ -485,11 +472,8 @@ Toolbar = { */ showLoginButton (show) { let id = 'toolbar_button_login'; - if (show) { - UIUtil.showElement(id); - } else { - UIUtil.hideElement(id); - } + + UIUtil.showOrHideElement(id, show); }, /** @@ -498,11 +482,8 @@ Toolbar = { */ showLogoutButton (show) { let id = 'toolbar_button_logout'; - if (show) { - UIUtil.showElement(id); - } else { - UIUtil.hideElement(id); - } + + UIUtil.showOrHideElement(id, show); }, /** diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index c35a17b96..ce3617764 100644 --- a/modules/UI/util/UIUtil.js +++ b/modules/UI/util/UIUtil.js @@ -265,6 +265,21 @@ const IndicatorFontSizes = { element.classList.add(className); }, + /** + * Shows or hides the element given (optionally 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. * diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index 615c062c8..9e9f09bc3 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/modules/UI/videolayout/LargeVideoManager.js @@ -333,13 +333,13 @@ export default class LargeVideoManager { } let id = 'localConnectionMessage'; + + UIUtil.showOrHideElement(id, show); + if (show) { - UIUtil.showElement(id); // Avatar message conflicts with 'videoConnectionMessage', // so it must be hidden this.showRemoteConnectionMessage(false); - } else { - UIUtil.hideElement(id); } } diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 2a5eb0148..3a816f890 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -215,13 +215,10 @@ SmallVideo.prototype.hideIndicator = function () { * @param {boolean} isMuted indicates if the muted element should be shown * or hidden */ -SmallVideo.prototype.showAudioIndicator = function(isMuted) { +SmallVideo.prototype.showAudioIndicator = function (isMuted) { let mutedIndicator = this.getAudioMutedIndicator(); - if (isMuted) { - UIUtil.showElement(mutedIndicator); - } else { - UIUtil.hideElement(mutedIndicator); - } + + UIUtil.showOrHideElement(mutedIndicator, isMuted); this.isAudioMuted = isMuted; }; @@ -270,11 +267,8 @@ SmallVideo.prototype.setVideoMutedView = function(isMuted) { this.updateView(); let element = this.getVideoMutedIndicator(); - if (isMuted) { - UIUtil.showElement(element); - } else { - UIUtil.hideElement(element); - } + + UIUtil.showOrHideElement(element, isMuted); }; /** @@ -576,11 +570,7 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) { tooltip: 'speaker' }); - if (show) { - UIUtil.showElement(indicatorSpan); - } else { - UIUtil.hideElement(indicatorSpan); - } + UIUtil.showOrHideElement(indicatorSpan, show); }; /** @@ -604,11 +594,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) { tooltip: 'raisedHand' }); - if (show) { - UIUtil.showElement(indicatorSpan); - } else { - UIUtil.hideElement(indicatorSpan); - } + UIUtil.showOrHideElement(indicatorSpan, show); }; /** diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index d24a7447f..67c5faa00 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -1144,11 +1144,7 @@ var VideoLayout = { updateResolutionLabel(isResolutionHD) { let id = 'videoResolutionLabel'; - if (isResolutionHD) { - UIUtil.showElement(id); - } else { - UIUtil.hideElement(id); - } + UIUtil.showOrHideElement(id, isResolutionHD); }, /** From 09406bfbfc0addaf7f86322b225b90475c2ea0da Mon Sep 17 00:00:00 2001 From: paweldomas Date: Wed, 23 Nov 2016 15:24:55 -0600 Subject: [PATCH 3/6] fix(Toolbar): move login buttons to Profile Authentication buttons no longer belong to the Toolbar. --- modules/UI/UI.js | 8 +-- modules/UI/side_pannels/profile/Profile.js | 79 ++++++++++++++++++++-- modules/UI/toolbars/Toolbar.js | 63 ----------------- 3 files changed, 78 insertions(+), 72 deletions(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 42d165859..1e1b9581f 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -1105,13 +1105,13 @@ UI.updateAuthInfo = function (isAuthEnabled, login) { let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled(); let loggedIn = !!login; - Toolbar.showAuthenticateButton(showAuth); + Profile.showAuthenticationButtons(showAuth); if (showAuth) { - Toolbar.setAuthenticatedIdentity(login); + Profile.setAuthenticatedIdentity(login); - Toolbar.showLoginButton(!loggedIn); - Toolbar.showLogoutButton(loggedIn); + Profile.showLoginButton(!loggedIn); + Profile.showLogoutButton(loggedIn); } }; diff --git a/modules/UI/side_pannels/profile/Profile.js b/modules/UI/side_pannels/profile/Profile.js index 2f9e44bbd..67a7f4df9 100644 --- a/modules/UI/side_pannels/profile/Profile.js +++ b/modules/UI/side_pannels/profile/Profile.js @@ -1,4 +1,4 @@ -/* global $ */ +/* global $, APP, JitsiMeetJS */ import UIUtil from "../../util/UIUtil"; import UIEvents from "../../../../service/UI/UIEvents"; import Settings from '../../../settings/Settings'; @@ -18,15 +18,15 @@ const htmlStr = ` -

    -
  • -
  • +
  • +
    • -
  • +
@@ -68,6 +68,34 @@ export default { updateEmail(); } }).focusout(updateEmail); + + // LOGIN + function loginClicked () { + JitsiMeetJS.analytics.sendEvent('authenticate.login.clicked'); + emitter.emit(UIEvents.AUTH_CLICKED); + } + + $('#profile_button_login').click(loginClicked); + + // LOGOUT + function logoutClicked () { + let titleKey = "dialog.logoutTitle"; + let msgKey = "dialog.logoutQuestion"; + JitsiMeetJS.analytics.sendEvent('authenticate.logout.clicked'); + // Ask for confirmation + APP.UI.messageHandler.openTwoButtonDialog({ + titleKey: titleKey, + msgKey: msgKey, + leftButtonKey: "dialog.Yes", + submitFunction: function (evt, yes) { + if (yes) { + emitter.emit(UIEvents.LOGOUT); + } + } + }); + } + + $('#profile_button_logout').click(logoutClicked); }, /** @@ -92,5 +120,46 @@ export default { */ changeAvatar (avatarUrl) { $('#avatar').attr('src', avatarUrl); + }, + + /** + * Shows or hides authentication related buttons + * @param {boolean} show true to show or false to hide + */ + showAuthenticationButtons (show) { + let id = 'profile_auth_container'; + UIUtil.showOrHideElement(id, show); + }, + + /** + * Shows/hides login button. + * @param {boolean} show true to show or false to hide + */ + showLoginButton (show) { + let id = 'profile_button_login'; + + UIUtil.showOrHideElement(id, show); + }, + + /** + * Shows/hides logout button. + * @param {boolean} show true to show or false to hide + */ + showLogoutButton (show) { + let id = 'profile_button_logout'; + + UIUtil.showOrHideElement(id, show); + }, + + /** + * Displays user's authenticated identity name (login). + * @param {string} authIdentity identity name to be displayed. + */ + setAuthenticatedIdentity (authIdentity) { + let id = 'profile_auth_identity'; + + UIUtil.showOrHideElement(id, !!authIdentity); + + $(`#${id}`).text(authIdentity ? authIdentity : ''); } }; diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 1ea160a16..58970c9ef 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -97,26 +97,6 @@ const buttonHandlers = { JitsiMeetJS.analytics.sendEvent('toolbar.hangup'); emitter.emit(UIEvents.HANGUP); }, - "toolbar_button_login": function () { - JitsiMeetJS.analytics.sendEvent('toolbar.authenticate.login.clicked'); - emitter.emit(UIEvents.AUTH_CLICKED); - }, - "toolbar_button_logout": function () { - let titleKey = "dialog.logoutTitle"; - let msgKey = "dialog.logoutQuestion"; - JitsiMeetJS.analytics.sendEvent('toolbar.authenticate.logout.clicked'); - // Ask for confirmation - APP.UI.messageHandler.openTwoButtonDialog({ - titleKey, - msgKey, - leftButtonKey: "dialog.Yes", - submitFunction: function (evt, yes) { - if (yes) { - emitter.emit(UIEvents.LOGOUT); - } - } - }); - }, "toolbar_button_raisehand": function () { JitsiMeetJS.analytics.sendEvent('toolbar.raiseHand.clicked'); APP.conference.maybeToggleRaisedHand(); @@ -397,14 +377,6 @@ Toolbar = { isEnabled() { return this.enabled; }, - /** - * Shows or hides authentication button - * @param show true to show or false to hide - */ - showAuthenticateButton (show) { - let id = 'authenticationContainer'; - UIUtil.showOrHideElement(id, show); - }, showEtherpadButton () { if (!$('#toolbar_button_etherpad').is(":visible")) { @@ -451,41 +423,6 @@ Toolbar = { UIUtil.showOrHideElement(id, shouldShow); }, - /** - * Displays user authenticated identity name(login). - * @param authIdentity identity name to be displayed. - */ - setAuthenticatedIdentity (authIdentity) { - let id = 'toolbar_auth_identity'; - - if(authIdentity) { - $(`#${id}`).text(authIdentity); - } else { - $(`#${id}`).text(''); - } - UIUtil.showOrHideElement(id, !!authIdentity); - }, - - /** - * Shows/hides login button. - * @param show true to show - */ - showLoginButton (show) { - let id = 'toolbar_button_login'; - - UIUtil.showOrHideElement(id, show); - }, - - /** - * Shows/hides logout button. - * @param show true to show - */ - showLogoutButton (show) { - let id = 'toolbar_button_logout'; - - UIUtil.showOrHideElement(id, show); - }, - /** * Update the state of the button. The button has blue glow if desktop * streaming is active. From 6669a96fd89bc073b0e43a6614bb43807d8f5cac Mon Sep 17 00:00:00 2001 From: paweldomas Date: Mon, 28 Nov 2016 09:26:34 -0600 Subject: [PATCH 4/6] fix(Toolbar.js): hide recording and SIP buttons from the start --- modules/UI/toolbars/Toolbar.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 58970c9ef..0b5e37d5c 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -255,7 +255,9 @@ const defaultToolbarButtons = { 'recording': { id: 'toolbar_button_record', tooltipKey: 'liveStreaming.buttonTooltip', - className: 'button' + className: 'button', + hidden: true // will be displayed once + // the recording functionality is detected }, 'sharedvideo': { id: 'toolbar_button_sharedvideo', @@ -270,7 +272,9 @@ const defaultToolbarButtons = { 'sip': { id: 'toolbar_button_sip', tooltipKey: 'toolbar.sip', - className: 'button icon-telephone' + className: 'button icon-telephone', + hidden: true // will be displayed once + // the SIP calls functionality is detected }, 'dialpad': { id: 'toolbar_button_dialpad', From 0238a10a4b4a399ab922a2afeba51079a03b3869 Mon Sep 17 00:00:00 2001 From: paweldomas Date: Mon, 28 Nov 2016 10:57:27 -0600 Subject: [PATCH 5/6] fix(MessageHandler): hide the close button when 'persistent' --- modules/UI/util/MessageHandler.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/modules/UI/util/MessageHandler.js b/modules/UI/util/MessageHandler.js index 916e4d93f..d80a51397 100644 --- a/modules/UI/util/MessageHandler.js +++ b/modules/UI/util/MessageHandler.js @@ -290,7 +290,15 @@ var messageHandler = { buttons: buttons, defaultButton: 1, promptspeed: 0, - loaded: loadedFunction, + loaded: function() { + if (loadedFunction) { + loadedFunction.apply(this, arguments); + } + // Hide the close button + if (persistent) { + $(".jqiclose", this).hide(); + } + }, submit: dontShowAgainSubmitFunctionWrapper( dontShowAgain, submitFunction), close: closeFunction, From 0f2ba1cefe19acae508db43bd69c7d5292023380 Mon Sep 17 00:00:00 2001 From: yanas Date: Tue, 29 Nov 2016 15:07:18 -0600 Subject: [PATCH 6/6] refactor(UIUtils): merges show and hide functions and cleans visibility setting --- modules/UI/UI.js | 4 +- modules/UI/recording/Recording.js | 4 +- modules/UI/side_pannels/chat/Chat.js | 6 +- modules/UI/side_pannels/profile/Profile.js | 8 +-- .../UI/side_pannels/settings/SettingsMenu.js | 18 ++--- modules/UI/toolbars/Toolbar.js | 6 +- modules/UI/util/UIUtil.js | 66 +++++-------------- modules/UI/videolayout/LargeVideoManager.js | 2 +- modules/UI/videolayout/SmallVideo.js | 26 ++++---- modules/UI/videolayout/VideoLayout.js | 2 +- 10 files changed, 53 insertions(+), 89 deletions(-) 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); }, /**