From 1c218191b03d878037752f03ca6ff5ce8a8cbc48 Mon Sep 17 00:00:00 2001 From: Maxim Voloshin Date: Mon, 17 Oct 2016 20:00:25 +0300 Subject: [PATCH 1/4] Apply tooltip for indicator once --- modules/UI/videolayout/SmallVideo.js | 70 +++++++++++++++------------- 1 file changed, 37 insertions(+), 33 deletions(-) diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 90af5c4d7..3975fa444 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -1,4 +1,4 @@ -/* global $, APP, JitsiMeetJS, interfaceConfig */ +/* global $, JitsiMeetJS, interfaceConfig */ import Avatar from "../avatar/Avatar"; import UIUtil from "../util/UIUtil"; import UIEvents from "../../../service/UI/UIEvents"; @@ -519,16 +519,13 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) { return; } - var indicatorSpanId = "dominantspeakerindicator"; - var indicatorSpan = this.getIndicatorSpan(indicatorSpanId); + var indicatorSpan = this.getIndicatorSpan({ + id: 'dominantspeakerindicator', + content: '', + tooltip: 'speaker' + }); - indicatorSpan.innerHTML - = ""; - // adds a tooltip - UIUtil.setTooltip(indicatorSpan, "speaker", "top"); - APP.translation.translateElement($(indicatorSpan)); - - $(indicatorSpan).css("visibility", show ? "visible" : "hidden"); + $(indicatorSpan)[show ? "show" : "hide"](); }; /** @@ -542,35 +539,42 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) { return; } - var indicatorSpanId = "raisehandindicator"; - var indicatorSpan = this.getIndicatorSpan(indicatorSpanId); + var indicatorSpan = this.getIndicatorSpan({ + id: 'raisehandindicator', + content: '', + tooltip: 'raisedHand' + }); - indicatorSpan.innerHTML - = ""; - - // adds a tooltip - UIUtil.setTooltip(indicatorSpan, "raisedHand", "top"); - APP.translation.translateElement($(indicatorSpan)); - - $(indicatorSpan).css("visibility", show ? "visible" : "hidden"); + $(indicatorSpan)[show ? "show" : "hide"](); }; /** - * Gets (creating if necessary) the "indicator" span for this SmallVideo - identified by an ID. + * Gets (creating if necessary) the "indicator" span for this SmallVideo. + * + * @param options.id {String} element ID + * @param options.content {String} HTML content of the indicator + * @param options.tooltip {String} The key that should be passed to tooltip + * + * @returns {HTMLElement} the raised hand indicator */ -SmallVideo.prototype.getIndicatorSpan = function(id) { - var indicatorSpan; - var spans = $(`#${this.videoSpanId}>[id=${id}`); - if (spans.length <= 0) { - indicatorSpan = document.createElement('span'); - indicatorSpan.id = id; - indicatorSpan.className = "indicator"; - $('#' + this.videoSpanId)[0].appendChild(indicatorSpan); - } else { - indicatorSpan = spans[0]; +SmallVideo.prototype.getIndicatorSpan = function(options) { + var indicator = this.container.querySelector('#' + options.id); + + if (indicator) { + return indicator; } - return indicatorSpan; + + indicator = document.createElement('span'); + indicator.className = 'indicator'; + indicator.id = options.id; + + indicator.innerHTML = options.content; + + UIUtil.setTooltip(indicator, options.tooltip, "top"); + + this.container.appendChild(indicator); + + return indicator; }; /** From 6820ec8d23b4c42ddb1f4a730e59d1b8a7a64e07 Mon Sep 17 00:00:00 2001 From: Maxim Voloshin Date: Tue, 25 Oct 2016 20:40:00 +0300 Subject: [PATCH 2/4] Show and hide indicators using pure js --- modules/UI/videolayout/SmallVideo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 3975fa444..4f47eb70b 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -525,7 +525,7 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) { tooltip: 'speaker' }); - $(indicatorSpan)[show ? "show" : "hide"](); + indicatorSpan.style.display = show ? "" : "none"; }; /** @@ -545,7 +545,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) { tooltip: 'raisedHand' }); - $(indicatorSpan)[show ? "show" : "hide"](); + indicatorSpan.style.display = show ? "" : "none"; }; /** From 86f1d287d7d6ea569ab8257ff359eb86d9bb98bc Mon Sep 17 00:00:00 2001 From: Maxim Voloshin Date: Tue, 25 Oct 2016 20:40:43 +0300 Subject: [PATCH 3/4] Fix comments --- modules/UI/videolayout/SmallVideo.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 4f47eb70b..313783afe 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -555,7 +555,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) { * @param options.content {String} HTML content of the indicator * @param options.tooltip {String} The key that should be passed to tooltip * - * @returns {HTMLElement} the raised hand indicator + * @returns {HTMLElement} DOM represention of the indicator */ SmallVideo.prototype.getIndicatorSpan = function(options) { var indicator = this.container.querySelector('#' + options.id); @@ -570,6 +570,10 @@ SmallVideo.prototype.getIndicatorSpan = function(options) { indicator.innerHTML = options.content; + // This element will be translated by UIUtil.setTooltip and + // that's why it is not translated here. + // Do not translate the same element multiple times in a row + // because it prevents tooltip from disappearing. UIUtil.setTooltip(indicator, options.tooltip, "top"); this.container.appendChild(indicator); From 8762aae1117880f5fcaf31000a89a83bcc376362 Mon Sep 17 00:00:00 2001 From: hristoterezov Date: Tue, 25 Oct 2016 16:52:11 -0500 Subject: [PATCH 4/4] fix(SmallVideo): Add translateElement call removed by previous commit --- modules/UI/videolayout/SmallVideo.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 313783afe..eb19178b2 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -1,4 +1,4 @@ -/* global $, JitsiMeetJS, interfaceConfig */ +/* global $, APP, JitsiMeetJS, interfaceConfig */ import Avatar from "../avatar/Avatar"; import UIUtil from "../util/UIUtil"; import UIEvents from "../../../service/UI/UIEvents"; @@ -550,7 +550,7 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) { /** * Gets (creating if necessary) the "indicator" span for this SmallVideo. - * + * * @param options.id {String} element ID * @param options.content {String} HTML content of the indicator * @param options.tooltip {String} The key that should be passed to tooltip @@ -570,11 +570,8 @@ SmallVideo.prototype.getIndicatorSpan = function(options) { indicator.innerHTML = options.content; - // This element will be translated by UIUtil.setTooltip and - // that's why it is not translated here. - // Do not translate the same element multiple times in a row - // because it prevents tooltip from disappearing. UIUtil.setTooltip(indicator, options.tooltip, "top"); + APP.translation.translateElement($(indicator)); this.container.appendChild(indicator);