ref(UIUtil): add showOrHideElement

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

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'));
     },
 
     /**

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);
     },
 
     /**

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 <tt>true</tt> to show or <tt>false</tt> to hide
+     */
+    showOrHideElement(idOrElement, show) {
+        if (show) {
+            this.showElement(idOrElement);
+        } else {
+            this.hideElement(idOrElement);
+        }
+    },
+
     /**
      * Hides the element given by id.
      *

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);
         }
     }
 

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);
 };
 
 /**

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);
     },
 
     /**