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; }; /**