From 68ab87cc0df7e35d5085b9eefa3cc510df3ce67e Mon Sep 17 00:00:00 2001 From: Maxim Voloshin Date: Thu, 27 Oct 2016 17:13:24 +0300 Subject: [PATCH 1/6] Hide DOM elements using css class --- modules/UI/UI.js | 2 +- modules/UI/feedback/Feedback.js | 9 +--- modules/UI/recording/Recording.js | 14 ++--- modules/UI/side_pannels/chat/Chat.js | 6 +-- modules/UI/toolbars/Toolbar.js | 58 ++++++++------------- modules/UI/videolayout/LargeVideoManager.js | 6 +-- modules/UI/videolayout/SmallVideo.js | 41 +++++---------- modules/UI/videolayout/VideoLayout.js | 8 +-- 8 files changed, 47 insertions(+), 97 deletions(-) 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); }, /** From a8a6b38c2838e63f33a76043268dceab46945efd Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Fri, 4 Nov 2016 12:40:21 +0200 Subject: [PATCH 2/6] Updated method for showing/hiding elements --- modules/UI/UI.js | 4 ++-- modules/UI/util/UIUtil.js | 26 ++++++++++++++++++++------ 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 383b537ba..7111ed0c6 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); - $('#notice').css({display: 'block'}); + UIUtil.showElement('notice'); } } else { - document.querySelector('#mainToolbarContainer').classList.add('hide'); + UIUtil.hideElement('mainToolbarContainer'); FilmStrip.setupFilmStripOnly(); messageHandler.enableNotifications(false); JitsiPopover.enabled = false; diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index 8e7d74fc5..708e3fb65 100644 --- a/modules/UI/util/UIUtil.js +++ b/modules/UI/util/UIUtil.js @@ -219,10 +219,17 @@ const TOOLTIP_POSITIONS = { * @param {String} the identifier of the element to show */ showElement(id) { - if ($("#"+id).hasClass("hide")) - $("#"+id).removeClass("hide"); + let element = document.getElementById(id); - $("#"+id).addClass("show"); + if (!element) { + return; + } + + if(element.classList.contains('hide')) { + element.classList.remove('hide'); + } + + element.classList.add('show'); }, /** @@ -231,10 +238,17 @@ const TOOLTIP_POSITIONS = { * @param {String} the identifier of the element to hide */ hideElement(id) { - if ($("#"+id).hasClass("show")) - $("#"+id).removeClass("show"); + let element = document.getElementById(id); - $("#"+id).addClass("hide"); + if (!element) { + return; + } + + if(element.classList.contains('show')) { + element.classList.remove('show'); + } + + element.classList.add('hide'); }, /** From fb4e9b3c6d912d7efac7376c21eabb69da135a3f Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Fri, 4 Nov 2016 15:58:43 +0200 Subject: [PATCH 3/6] Work on fixing the tests --- css/_base.scss | 4 ++ modules/UI/feedback/Feedback.js | 34 ++----------- modules/UI/recording/Recording.js | 20 ++++++-- modules/UI/side_pannels/chat/Chat.js | 11 ++++- modules/UI/toolbars/Toolbar.js | 72 +++++++++++++++++++--------- modules/UI/util/UIUtil.js | 35 ++++++++++++-- 6 files changed, 115 insertions(+), 61 deletions(-) diff --git a/css/_base.scss b/css/_base.scss index 9fea2a28b..6491bcbb0 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -153,6 +153,10 @@ form { display: inline-block !important; } +.show-list-item { + display: list-item !important; +} + /** * Shows a flex element. */ diff --git a/modules/UI/feedback/Feedback.js b/modules/UI/feedback/Feedback.js index 37c36c796..f45b85ca4 100644 --- a/modules/UI/feedback/Feedback.js +++ b/modules/UI/feedback/Feedback.js @@ -1,31 +1,12 @@ /* global $, APP, JitsiMeetJS */ -import UIEvents from "../../../service/UI/UIEvents"; import FeedbackWindow from "./FeedbackWindow"; -/** - * Shows / hides the feedback button. - * @private - */ -function _toggleFeedbackIcon() { - document.querySelector('#feedbackButton').classList.toggle('hidden'); -} - -/** - * Shows / hides the feedback button. - * @param {show} set to {true} to show the feedback button or to {false} - * to hide it - * @private - */ -function _showFeedbackButton (show) { - document.querySelector('#feedbackButton').classList.toggle('hide', !show); -} - /** * Defines all methods in connection to the Feedback window. * * @type {{openFeedbackWindow: Function}} */ -var Feedback = { +const Feedback = { /** * Initialise the Feedback functionality. @@ -42,24 +23,15 @@ var Feedback = { if (typeof this.enabled == "undefined") this.enabled = true; - _showFeedbackButton(this.enabled); - this.window = new FeedbackWindow(); + this.emitter = emitter; $("#feedbackButton").click(Feedback.openFeedbackWindow); - - // Show / hide the feedback button whenever the film strip is - // shown / hidden. - emitter.addListener(UIEvents.TOGGLE_FILM_STRIP, function () { - _toggleFeedbackIcon(); - }); }, /** * Enables/ disabled the feedback feature. */ enableFeedback: function (enable) { - if (this.enabled !== enable) - _showFeedbackButton(enable); this.enabled = enable; }, @@ -120,4 +92,4 @@ var Feedback = { } }; -module.exports = Feedback; +export default Feedback; diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index c31ad939f..9f203a336 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -387,9 +387,16 @@ var Recording = { * @param show {true} to show the recording button, {false} to hide it */ showRecordingButton (show) { - var visibility = show && _isRecordingButtonEnabled(); - document.querySelector('#toolbar_button_record') - .classList.toggle('hide', !visibility); + let isVisible = show && _isRecordingButtonEnabled(); + let id = 'toolbar_button_record'; + + console.log('recording is visible', isVisible); + + if (isVisible) { + UIUtil.showElement(id); + } else { + UIUtil.hideElement(id); + } }, /** @@ -472,6 +479,13 @@ var Recording = { labelSelector.css({display: "inline-block"}); // Recording spinner + let spinnerId = 'recordingSpinner'; + if(recordingState === Status.RETRYING) { + UIUtil.showElement(spinnerId); + } else { + UIUtil.hideElement(spinnerId); + } + document.querySelector('#recordingSpinner').classList .toggle('show-inline', recordingState === Status.RETRYING); }, diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js index 7ddbec2b3..195b415a5 100644 --- a/modules/UI/side_pannels/chat/Chat.js +++ b/modules/UI/side_pannels/chat/Chat.js @@ -293,11 +293,18 @@ var Chat = { * @param subject the subject */ setSubject (subject) { + let toggleFunction; if (subject) { subject = subject.trim(); + toggleFunction = UIUtil.showElement.bind(UIUtil); + } else { + toggleFunction = UIUtil.hideElement.bind(UIUtil); } - $('#subject').html(linkify(UIUtil.escapeHtml(subject))); - document.querySelector('#subject').classList.toggle('hide', !subject); + + let subjectId = 'subject'; + let html = linkify(UIUtil.escapeHtml(subject)); + $(`#${subjectId}`).html(html); + toggleFunction(subjectId); }, /** diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 97a92d545..e87c736af 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -417,8 +417,12 @@ Toolbar = { * @param show true to show or false to hide */ showAuthenticateButton (show) { - document.querySelector('#authenticationContainer') - .classList.toggle('hide', !show); + let id = 'authenticationContainer'; + if (show) { + UIUtil.showElement(id); + } else { + UIUtil.hideElement(id); + } }, showEtherpadButton () { @@ -429,12 +433,17 @@ Toolbar = { // Shows or hides the 'shared video' button. showSharedVideoButton () { - if (!UIUtil.isButtonEnabled('sharedvideo')) { - return; + let id = 'toolbar_button_sharedvideo'; + let shouldShow = UIUtil.isButtonEnabled('sharedvideo') + && !config.disableThirdPartyRequests; + + if (shouldShow) { + let el = document.getElementById(id); + UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right'); + UIUtil.showElement(id); + } else { + UIUtil.hideElement(id); } - 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 @@ -448,20 +457,26 @@ Toolbar = { // Shows or hides SIP calls button showSipCallButton (show) { - if (!UIUtil.isButtonEnabled('sip')) { - return; + let shouldShow = APP.conference.sipGatewayEnabled() + && UIUtil.isButtonEnabled('sip') && show; + let id = 'toolbar_button_sip'; + + if (shouldShow) { + UIUtil.showElement(id); + } else { + UIUtil.hideElement(id); } - document.querySelector('#toolbar_button_sip').classList - .toggle('hide', !(show && APP.conference.sipGatewayEnabled())); }, // Shows or hides the dialpad button showDialPadButton (show) { - if (!UIUtil.isButtonEnabled('dialpad')) { - return; + let shouldShow = UIUtil.isButtonEnabled('dialpad') && show; + let id = 'toolbar_button_dialpad'; + if (shouldShow) { + UIUtil.showElement(id); + } else { + UIUtil.hideElement(id); } - document.querySelector('#toolbar_button_dialpad') - .classList.toggle('hide', !show); }, /** @@ -469,9 +484,14 @@ Toolbar = { * @param authIdentity identity name to be displayed. */ setAuthenticatedIdentity (authIdentity) { - let selector = $('#toolbar_auth_identity'); - selector.text(authIdentity ? authIdentity : ''); - selector.get(0).classList.toggle('hide', !authIdentity); + let id = 'toolbar_auth_identity'; + if(authIdentity) { + UIUtil.showElement(id); + $(`#${id}`).text(authIdentity); + } else { + UIUtil.hideElement(id); + $(`#${id}`).text(''); + } }, /** @@ -479,8 +499,12 @@ Toolbar = { * @param show true to show */ showLoginButton (show) { - document.querySelector('#toolbar_button_login') - .classList.toggle('hide', !show); + let id = 'toolbar_button_login'; + if (show) { + UIUtil.showElement(id); + } else { + UIUtil.hideElement(id); + } }, /** @@ -488,8 +512,12 @@ Toolbar = { * @param show true to show */ showLogoutButton (show) { - document.querySelector('#toolbar_button_logout') - .classList.toggle('hide', !show); + let id = 'toolbar_button_logout'; + if (show) { + UIUtil.showElement(id); + } else { + UIUtil.hideElement(id); + } }, /** diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index 708e3fb65..575f94f9e 100644 --- a/modules/UI/util/UIUtil.js +++ b/modules/UI/util/UIUtil.js @@ -18,6 +18,15 @@ const TOOLTIP_POSITIONS = { 'top-right': 'sw' }; +/** + * Associates the default display type with corresponding CSS class + */ +const SHOW_CLASSES = { + 'block': 'show', + 'inline': 'show-inline', + 'list-item': 'show-list-item' +}; + /** * Created by hristo on 12/22/14. */ @@ -229,7 +238,9 @@ const TOOLTIP_POSITIONS = { element.classList.remove('hide'); } - element.classList.add('show'); + let type = this.getElementDefaultDisplay(element.tagName); + let className = SHOW_CLASSES[type]; + element.classList.add(className); }, /** @@ -244,13 +255,31 @@ const TOOLTIP_POSITIONS = { return; } - if(element.classList.contains('show')) { - element.classList.remove('show'); + let type = this.getElementDefaultDisplay(element.tagName); + let className = SHOW_CLASSES[type]; + + if(element.classList.contains(className)) { + element.classList.remove(className); } element.classList.add('hide'); }, + /** + * Returns default display style for the tag + * @param tag + * @returns {*} + */ + getElementDefaultDisplay(tag) { + let tempElement = document.createElement(tag); + + document.body.appendChild(tempElement); + let style = window.getComputedStyle(tempElement).display; + document.body.removeChild(tempElement); + + return style; + }, + /** * Shows / hides the element with the given jQuery selector. * From 5aff96e3b76d0c0c0428d178e29a0d0c5c515f95 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Fri, 4 Nov 2016 16:11:32 +0200 Subject: [PATCH 4/6] Updated in videolayout --- modules/UI/videolayout/LargeVideoManager.js | 7 ++++--- modules/UI/videolayout/VideoLayout.js | 9 +++++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/modules/UI/videolayout/LargeVideoManager.js b/modules/UI/videolayout/LargeVideoManager.js index e8e934a4f..079585854 100644 --- a/modules/UI/videolayout/LargeVideoManager.js +++ b/modules/UI/videolayout/LargeVideoManager.js @@ -332,14 +332,15 @@ export default class LargeVideoManager { show = APP.conference.isConnectionInterrupted(); } + let id = 'localConnectionMessage'; if (show) { + UIUtil.showElement(id); // Avatar message conflicts with 'videoConnectionMessage', // so it must be hidden this.showRemoteConnectionMessage(false); + } else { + UIUtil.hideElement(id); } - - document.querySelector('#localConnectionMessage') - .classList.toggle('hide', !show); } /** diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 5e3abb19b..65f131387 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -1136,8 +1136,13 @@ var VideoLayout = { * video stream is currently HD. */ updateResolutionLabel(isResolutionHD) { - document.querySelector('#videoResolutionLabel') - .classList.toggle('show', isResolutionHD); + let id = 'videoResolutionLabel'; + + if (isResolutionHD) { + UIUtil.showElement(id); + } else { + UIUtil.hideElement(id); + } }, /** From 1b1b9475a4a11d8250c08af966e3633158001062 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Fri, 4 Nov 2016 16:48:52 +0200 Subject: [PATCH 5/6] Clean up js from styles --- modules/UI/util/UIUtil.js | 14 +++++++-- modules/UI/videolayout/SmallVideo.js | 43 +++++++++++++++++++--------- 2 files changed, 42 insertions(+), 15 deletions(-) diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js index 575f94f9e..2c91a97df 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 a9764c467..6b70fe5f7 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -216,19 +216,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; @@ -241,15 +245,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; }; @@ -263,7 +266,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); + } }; /** @@ -565,7 +574,11 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) { tooltip: 'speaker' }); - indicatorSpan.classList.toggle('show', show); + if (show) { + UIUtil.showElement(indicatorSpan); + } else { + UIUtil.hideElement(indicatorSpan); + } }; /** @@ -589,7 +602,11 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) { tooltip: 'raisedHand' }); - indicatorSpan.classList.toggle('show', show); + if (show) { + UIUtil.showElement(indicatorSpan); + } else { + UIUtil.hideElement(indicatorSpan); + } }; /** From 128b301a39191a9ee42fbb98f00b23a48c9c253a Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 10 Nov 2016 14:45:42 +0200 Subject: [PATCH 6/6] Fix the tests --- modules/UI/UI.js | 2 +- modules/UI/videolayout/SmallVideo.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 7111ed0c6..7f7c6539a 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -30,7 +30,7 @@ var EventEmitter = require("events"); UI.messageHandler = require("./util/MessageHandler"); var messageHandler = UI.messageHandler; var JitsiPopover = require("./util/JitsiPopover"); -var Feedback = require("./feedback/Feedback"); +import Feedback from "./feedback/Feedback"; import FollowMe from "../FollowMe"; var eventEmitter = new EventEmitter(); diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 6b70fe5f7..2a5eb0148 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -222,6 +222,8 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) { } else { UIUtil.hideElement(mutedIndicator); } + + this.isAudioMuted = isMuted; }; /**