diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 925be0de5..383b537ba 100644
--- a/modules/UI/UI.js
+++ b/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;
diff --git a/modules/UI/feedback/Feedback.js b/modules/UI/feedback/Feedback.js
index d9ce96ed4..37c36c796 100644
--- a/modules/UI/feedback/Feedback.js
+++ b/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);
}
/**
diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
index af44698c8..c31ad939f 100644
--- a/modules/UI/recording/Recording.js
+++ b/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
diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js
index 60743a87d..7ddbec2b3 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/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);
},
/**
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index f7d4c4c5f..97a92d545 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -417,9 +417,8 @@ Toolbar = {
* @param show true to show or false 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 true 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 true 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);
},
/**
diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js
index e41d87b40..e8e934a4f 100644
--- a/modules/UI/videolayout/LargeVideoManager.js
+++ b/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);
}
/**
diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js
index c58f83f25..a9764c467 100644
--- a/modules/UI/videolayout/SmallVideo.js
+++ b/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);
};
/**
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index 289277051..5e3abb19b 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/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);
},
/**