diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index 575f94f9e636..2c91a97dfff5 100644 --- a/modules/UI/util/UIUtil.js +++ b/modules/UI/util/UIUtil.js @@ -228,7 +228,12 @@ const SHOW_CLASSES = { * @param {String} the identifier of the element to show */ showElement(id) { - let element = document.getElementById(id); + let element; + if (id instanceof HTMLElement) { + element = id; + } else { + element = document.getElementById(id); + } if (!element) { return; @@ -249,7 +254,12 @@ const SHOW_CLASSES = { * @param {String} the identifier of the element to hide */ hideElement(id) { - let element = document.getElementById(id); + let element; + if (id instanceof HTMLElement) { + element = id; + } else { + element = document.getElementById(id); + } if (!element) { return; diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 08ed243f2113..726e3ccf32c5 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -207,19 +207,23 @@ SmallVideo.prototype.hideIndicator = function () { * or hidden */ SmallVideo.prototype.showAudioIndicator = function(isMuted) { - this.getAudioMutedIndicator().classList.toggle('hide', !isMuted); - this.isAudioMuted = isMuted; + let mutedIndicator = this.getAudioMutedIndicator(); + if (isMuted) { + UIUtil.showElement(mutedIndicator); + } else { + UIUtil.hideElement(mutedIndicator); + } }; /** * Returns the audio muted indicator jquery object. If it doesn't exists - * creates it. * - * @returns {jQuery|HTMLElement} the audio muted indicator + * @returns {HTMLElement} the audio muted indicator */ SmallVideo.prototype.getAudioMutedIndicator = function () { - var selector = '#' + this.videoSpanId + ' .audioMuted'; - var audioMutedSpan = document.querySelector(selector); + let selector = '#' + this.videoSpanId + ' .audioMuted'; + let audioMutedSpan = document.querySelector(selector); if (audioMutedSpan) { return audioMutedSpan; @@ -232,15 +236,14 @@ SmallVideo.prototype.getAudioMutedIndicator = function () { "videothumbnail.mute", "top"); + let mutedIndicator = document.createElement('i'); + mutedIndicator.className = 'icon-mic-disabled'; + audioMutedSpan.appendChild(mutedIndicator); + this.container .querySelector('.videocontainer__toolbar') .appendChild(audioMutedSpan); - - var mutedIndicator = document.createElement('i'); - mutedIndicator.className = 'icon-mic-disabled'; - audioMutedSpan.appendChild(mutedIndicator); - return audioMutedSpan; }; @@ -254,7 +257,13 @@ SmallVideo.prototype.getAudioMutedIndicator = function () { SmallVideo.prototype.setVideoMutedView = function(isMuted) { this.isVideoMuted = isMuted; this.updateView(); - this.getVideoMutedIndicator().classList.toggle('hide', !isMuted); + + let element = this.getVideoMutedIndicator(); + if (isMuted) { + UIUtil.showElement(element); + } else { + UIUtil.hideElement(element); + } }; /** @@ -552,7 +561,11 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) { tooltip: 'speaker' }); - indicatorSpan.classList.toggle('show', show); + if (show) { + UIUtil.showElement(indicatorSpan); + } else { + UIUtil.hideElement(indicatorSpan); + } }; /** @@ -576,7 +589,11 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) { tooltip: 'raisedHand' }); - indicatorSpan.classList.toggle('show', show); + if (show) { + UIUtil.showElement(indicatorSpan); + } else { + UIUtil.hideElement(indicatorSpan); + } }; /**