Hide DOM elements using css class

modules/UI/UI.js

@@ -446,7 +446,7 @@ UI.start = function () {
             $('#notice').css({display: 'block'});
         }
     } else {
-        $("#mainToolbarContainer").css("display", "none");
+        document.querySelector('#mainToolbarContainer').classList.add('hide');
         FilmStrip.setupFilmStripOnly();
         messageHandler.enableNotifications(false);
         JitsiPopover.enabled = false;

modules/UI/feedback/Feedback.js

@@ -7,7 +7,7 @@ import FeedbackWindow from "./FeedbackWindow";
  * @private
  */
 function _toggleFeedbackIcon() {
-    $('#feedbackButtonDiv').toggleClass("hidden");
+    document.querySelector('#feedbackButton').classList.toggle('hidden');
 }
 
 /**
@@ -17,12 +17,7 @@ function _toggleFeedbackIcon() {
  * @private
  */
 function _showFeedbackButton (show) {
-    var feedbackButton = $("#feedbackButtonDiv");
-
-    if (show)
-        feedbackButton.css("display", "block");
-    else
-        feedbackButton.css("display", "none");
+    document.querySelector('#feedbackButton').classList.toggle('hide', !show);
 }
 
 /**

modules/UI/recording/Recording.js

@@ -387,11 +387,9 @@ var Recording = {
      * @param show {true} to show the recording button, {false} to hide it
      */
     showRecordingButton (show) {
-        if (_isRecordingButtonEnabled() && show) {
-            $('#toolbar_button_record').css({display: "inline-block"});
-        } else {
-            $('#toolbar_button_record').css({display: "none"});
-        }
+        var visibility = show && _isRecordingButtonEnabled();
+        document.querySelector('#toolbar_button_record')
+                .classList.toggle('hide', !visibility);
     },
 
     /**
@@ -474,10 +472,8 @@ var Recording = {
             labelSelector.css({display: "inline-block"});
 
         // Recording spinner
-        if (recordingState === Status.RETRYING)
-            $("#recordingSpinner").show();
-        else
-            $("#recordingSpinner").hide();
+        document.querySelector('#recordingSpinner').classList
+                .toggle('show-inline', recordingState === Status.RETRYING);
     },
     // checks whether recording is enabled and whether we have params
     // to start automatically recording

modules/UI/side_pannels/chat/Chat.js

@@ -297,11 +297,7 @@ var Chat = {
             subject = subject.trim();
         }
         $('#subject').html(linkify(UIUtil.escapeHtml(subject)));
-        if (subject) {
-            $("#subject").css({display: "block"});
-        } else {
-            $("#subject").css({display: "none"});
-        }
+        document.querySelector('#subject').classList.toggle('hide', !subject);
     },
 
     /**

modules/UI/toolbars/Toolbar.js

@@ -417,9 +417,8 @@ Toolbar = {
      * @param show <tt>true</tt> to show or <tt>false</tt> to hide
      */
     showAuthenticateButton (show) {
-        let display = show ? 'block' : 'none';
-
-        $('#authenticationContainer').css({display});
+        document.querySelector('#authenticationContainer')
+                .classList.toggle('hide', !show);
     },
 
     showEtherpadButton () {
@@ -430,14 +429,12 @@ Toolbar = {
 
     // Shows or hides the 'shared video' button.
     showSharedVideoButton () {
-        let $element = $('#toolbar_button_sharedvideo');
-        if (UIUtil.isButtonEnabled('sharedvideo')
-                && config.disableThirdPartyRequests !== true) {
-            $element.css({display: "inline-block"});
-            UIUtil.setTooltip($element.get(0), 'toolbar.sharedvideo', 'right');
-        } else {
-            $('#toolbar_button_sharedvideo').css({display: "none"});
+        if (!UIUtil.isButtonEnabled('sharedvideo')) {
+            return;
         }
+        var el = document.querySelector('#toolbar_button_sharedvideo');
+        UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
+        el.classList.toggle('hide', config.disableThirdPartyRequests === true);
     },
 
     // checks whether desktop sharing is enabled and whether
@@ -451,21 +448,20 @@ Toolbar = {
 
     // Shows or hides SIP calls button
     showSipCallButton (show) {
-        if (APP.conference.sipGatewayEnabled()
-            && UIUtil.isButtonEnabled('sip') && show) {
-            $('#toolbar_button_sip').css({display: "inline-block"});
-        } else {
-            $('#toolbar_button_sip').css({display: "none"});
+        if (!UIUtil.isButtonEnabled('sip')) {
+            return;
         }
+        document.querySelector('#toolbar_button_sip').classList
+                .toggle('hide', !(show && APP.conference.sipGatewayEnabled()));
     },
 
     // Shows or hides the dialpad button
     showDialPadButton (show) {
-        if (UIUtil.isButtonEnabled('dialpad') && show) {
-            $('#toolbar_button_dialpad').css({display: "inline-block"});
-        } else {
-            $('#toolbar_button_dialpad').css({display: "none"});
+        if (!UIUtil.isButtonEnabled('dialpad')) {
+            return;
         }
+        document.querySelector('#toolbar_button_dialpad')
+                .classList.toggle('hide', !show);
     },
 
     /**
@@ -474,14 +470,8 @@ Toolbar = {
      */
     setAuthenticatedIdentity (authIdentity) {
         let selector = $('#toolbar_auth_identity');
-
-        if (authIdentity) {
-            selector.css({display: "list-item"});
-            selector.text(authIdentity);
-        } else {
-            selector.css({display: "none"});
-            selector.text('');
-        }
+        selector.text(authIdentity ? authIdentity : '');
+        selector.get(0).classList.toggle('hide', !authIdentity);
     },
 
     /**
@@ -489,11 +479,8 @@ Toolbar = {
      * @param show <tt>true</tt> to show
      */
     showLoginButton (show) {
-        if (show) {
-            $('#toolbar_button_login').css({display: "list-item"});
-        } else {
-            $('#toolbar_button_login').css({display: "none"});
-        }
+        document.querySelector('#toolbar_button_login')
+                .classList.toggle('hide', !show);
     },
 
     /**
@@ -501,11 +488,8 @@ Toolbar = {
      * @param show <tt>true</tt> to show
      */
     showLogoutButton (show) {
-        if (show) {
-            $('#toolbar_button_logout').css({display: "list-item"});
-        } else {
-            $('#toolbar_button_logout').css({display: "none"});
-        }
+        document.querySelector('#toolbar_button_logout')
+                .classList.toggle('hide', !show);
     },
 
     /**

modules/UI/videolayout/LargeVideoManager.js

@@ -333,13 +333,13 @@ export default class LargeVideoManager {
         }
 
         if (show) {
-            $('#localConnectionMessage').css({display: "block"});
             // Avatar message conflicts with 'videoConnectionMessage',
             // so it must be hidden
             this.showRemoteConnectionMessage(false);
-        } else {
-            $('#localConnectionMessage').css({display: "none"});
         }
+
+        document.querySelector('#localConnectionMessage')
+                .classList.toggle('hide', !show);
     }
 
     /**

modules/UI/videolayout/SmallVideo.js

@@ -216,15 +216,7 @@ SmallVideo.prototype.hideIndicator = function () {
  * or hidden
  */
 SmallVideo.prototype.showAudioIndicator = function(isMuted) {
-
-    var audioMutedIndicator = this.getAudioMutedIndicator();
-
-    if (!isMuted) {
-        audioMutedIndicator.hide();
-    }
-    else {
-        audioMutedIndicator.show();
-    }
+    this.getAudioMutedIndicator().classList.toggle('hide', !isMuted);
     this.isAudioMuted = isMuted;
 };
 
@@ -235,9 +227,10 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) {
  * @returns {jQuery|HTMLElement} the audio muted indicator
  */
 SmallVideo.prototype.getAudioMutedIndicator = function () {
-    var audioMutedSpan = $('#' + this.videoSpanId + ' .audioMuted');
+    var selector = '#' + this.videoSpanId + ' .audioMuted';
+    var audioMutedSpan = document.querySelector(selector);
 
-    if (audioMutedSpan.length) {
+    if (audioMutedSpan) {
         return audioMutedSpan;
     }
 
@@ -257,7 +250,7 @@ SmallVideo.prototype.getAudioMutedIndicator = function () {
     mutedIndicator.className = 'icon-mic-disabled';
     audioMutedSpan.appendChild(mutedIndicator);
 
-    return $('#' + this.videoSpanId + ' .audioMuted');
+    return audioMutedSpan;
 };
 
 /**
@@ -270,10 +263,7 @@ SmallVideo.prototype.getAudioMutedIndicator = function () {
 SmallVideo.prototype.setVideoMutedView = function(isMuted) {
     this.isVideoMuted = isMuted;
     this.updateView();
-
-    var videoMutedSpan = this.getVideoMutedIndicator();
-
-    videoMutedSpan[isMuted ? 'show' : 'hide']();
+    this.getVideoMutedIndicator().classList.toggle('hide', !isMuted);
 };
 
 /**
@@ -283,9 +273,10 @@ SmallVideo.prototype.setVideoMutedView = function(isMuted) {
  * @returns {jQuery|HTMLElement} the video muted indicator
  */
 SmallVideo.prototype.getVideoMutedIndicator = function () {
-    var videoMutedSpan = $('#' + this.videoSpanId + ' .videoMuted');
+    var selector = '#' + this.videoSpanId + ' .videoMuted';
+    var videoMutedSpan = document.querySelector(selector);
 
-    if (videoMutedSpan.length) {
+    if (videoMutedSpan) {
         return videoMutedSpan;
     }
 
@@ -305,7 +296,7 @@ SmallVideo.prototype.getVideoMutedIndicator = function () {
 
     videoMutedSpan.appendChild(mutedIndicator);
 
-    return $('#' + this.videoSpanId + ' .videoMuted');
+    return videoMutedSpan;
 };
 
 /**
@@ -574,11 +565,7 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
         tooltip: 'speaker'
     });
 
-    if (show) {
-        indicatorSpan.classList.add('show');
-    } else {
-        indicatorSpan.classList.remove('show');
-    }
+    indicatorSpan.classList.toggle('show', show);
 };
 
 /**
@@ -602,11 +589,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
         tooltip: 'raisedHand'
     });
 
-    if (show) {
-        indicatorSpan.classList.add('show');
-    } else {
-        indicatorSpan.classList.remove('show');
-    }
+    indicatorSpan.classList.toggle('show', show);
 };
 
 /**

modules/UI/videolayout/VideoLayout.js

@@ -1136,12 +1136,8 @@ var VideoLayout = {
      * video stream is currently HD.
      */
     updateResolutionLabel(isResolutionHD) {
-        let videoResolutionLabel = $("#videoResolutionLabel");
-
-        if (isResolutionHD && !videoResolutionLabel.is(":visible"))
-            videoResolutionLabel.css({display: "block"});
-        else if (!isResolutionHD && videoResolutionLabel.is(":visible"))
-            videoResolutionLabel.css({display: "none"});
+        document.querySelector('#videoResolutionLabel')
+                .classList.toggle('show', isResolutionHD);
     },
 
     /**