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