ref(small-video): remove some global jquery dom querying

Create a reference to the jquery element instead of querying for
it globally. This is to better encapsulate the small video
component.

modules/UI/shared_video/SharedVideo.js

@@ -647,6 +647,7 @@ function SharedVideoThumb (url)
     this.setVideoType(SHARED_VIDEO_CONTAINER_TYPE);
     this.videoSpanId = "sharedVideoContainer";
     this.container = this.createContainer(this.videoSpanId);
+    this.$container = $(this.container);
     this.container.onclick = this.videoClick.bind(this);
     this.bindHoverHandler();
     SmallVideo.call(this, VideoLayout);

modules/UI/videolayout/LocalVideo.js

@@ -19,6 +19,7 @@ function LocalVideo(VideoLayout, emitter) {
     this.videoSpanId = "localVideoContainer";
 
     this.container = this.createContainer();
+    this.$container = $(this.container);
     $("#filmstripLocalVideo").append(this.container);
 
     this.localVideoId = null;
@@ -122,9 +123,8 @@ LocalVideo.prototype.changeVideo = function (stream) {
         }
     };
 
-    let localVideoContainerSelector = $('#localVideoContainer');
+    this.$container.off('click');
-    localVideoContainerSelector.off('click');
+    this.$container.on('click', localVideoClick);
-    localVideoContainerSelector.on('click', localVideoClick);
 
     this.localVideoId = 'localVideo_' + stream.getId();
 
@@ -173,16 +173,16 @@ LocalVideo.prototype.setVisible = function(visible) {
 
     // We toggle the hidden class as an indication to other interested parties
     // that this container has been hidden on purpose.
-    $("#localVideoContainer").toggleClass("hidden");
+    this.$container.toggleClass("hidden");
 
     // We still show/hide it as we need to overwrite the style property if we
     // want our action to take effect. Toggling the display property through
     // the above css class didn't succeed in overwriting the style.
     if (visible) {
-        $("#localVideoContainer").show();
+        this.$container.show();
     }
     else {
-        $("#localVideoContainer").hide();
+        this.$container.hide();
     }
 };
 
@@ -233,8 +233,8 @@ LocalVideo.prototype._buildContextMenu = function () {
  * @param enable {boolean} true for enable, false for disable
  */
 LocalVideo.prototype._enableDisableContextMenu = function (enable) {
-    if($('#' + this.videoSpanId).contextMenu)
+    if(this.$container.contextMenu)
-        $('#' + this.videoSpanId).contextMenu(enable);
+        this.$container.contextMenu(enable);
 };
 
 export default LocalVideo;

modules/UI/videolayout/RemoteVideo.js

@@ -85,6 +85,7 @@ RemoteVideo.prototype.constructor = RemoteVideo;
 
 RemoteVideo.prototype.addRemoteVideoContainer = function() {
     this.container = RemoteVideo.createContainer(this.videoSpanId);
+    this.$container = $(this.container);
 
     this.initBrowserSpecificProperties();
 
@@ -409,7 +410,7 @@ RemoteVideo.prototype.isVideoPlayable = function () {
  * @inheritDoc
  */
 RemoteVideo.prototype.updateView = function () {
-    $(this.container).toggleClass('audio-only', APP.conference.isAudioOnly());
+    this.$container.toggleClass('audio-only', APP.conference.isAudioOnly());
 
     this.updateConnectionStatusIndicator();
 
@@ -610,7 +611,7 @@ RemoteVideo.prototype.setDisplayName = function(displayName) {
  * @param videoElementId the id of local or remote video element.
  */
 RemoteVideo.prototype.removeRemoteVideoMenu = function() {
-    var menuSpan = $('#' + this.videoSpanId + '> .remotevideomenu');
+    var menuSpan = this.$container.find('.remotevideomenu');
 
     if (menuSpan.length) {
         ReactDOM.unmountComponentAtNode(menuSpan.get(0));

modules/UI/videolayout/SmallVideo.js

@@ -146,7 +146,7 @@ SmallVideo.prototype.getId = function () {
  * <tt>false</tt> - otherwise.
  */
 SmallVideo.prototype.isVisible = function () {
-    return $('#' + this.videoSpanId).is(':visible');
+    return this.$container.is(':visible');
 };
 
 /**
@@ -171,8 +171,8 @@ SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
     if(!this.container)
         return;
 
-    var noMic = $("#" + this.videoSpanId + " > .noMic");
+    var noMic = this.$container.find('.noMic');
-    var noVideo =  $("#" + this.videoSpanId + " > .noVideo");
+    var noVideo =  this.$container.find('.noVideo');
 
     noMic.remove();
     noVideo.remove();
@@ -249,7 +249,7 @@ SmallVideo.getStreamElementID = function (stream) {
  */
 SmallVideo.prototype.bindHoverHandler = function () {
     // Add hover handler
-    $(this.container).hover(
+    this.$container.hover(
         () => {
             this.videoIsHovered = true;
             this.updateView();
@@ -429,7 +429,7 @@ SmallVideo.prototype.removeModeratorIndicator = function () {
  * array (after checking its length of course!).
  */
 SmallVideo.prototype.selectVideoElement = function () {
-    return $(RTCUIHelper.findVideoElement($('#' + this.videoSpanId)[0]));
+    return $(RTCUIHelper.findVideoElement(this.container));
 };
 
 /**
@@ -439,7 +439,7 @@ SmallVideo.prototype.selectVideoElement = function () {
  * element which displays the user's avatar.
  */
 SmallVideo.prototype.$avatar = function () {
-    return $('#' + this.videoSpanId + ' .avatar-container');
+    return this.$container.find('.avatar-container');
 };
 
 /**
@@ -449,7 +449,7 @@ SmallVideo.prototype.$avatar = function () {
  * the video thumbnail
  */
 SmallVideo.prototype.$displayName = function () {
-    return $('#' + this.videoSpanId + ' .displayNameContainer');
+    return this.$container.find('.displayNameContainer');
 };
 
 /**
@@ -498,13 +498,13 @@ SmallVideo.prototype.removeDisplayName = function () {
  */
 SmallVideo.prototype.focus = function(isFocused) {
     var focusedCssClass = "videoContainerFocused";
-    var isFocusClassEnabled = $(this.container).hasClass(focusedCssClass);
+    var isFocusClassEnabled = this.$container.hasClass(focusedCssClass);
 
     if (!isFocused && isFocusClassEnabled) {
-        $(this.container).removeClass(focusedCssClass);
+        this.$container.removeClass(focusedCssClass);
     }
     else if (isFocused && !isFocusClassEnabled) {
-        $(this.container).addClass(focusedCssClass);
+        this.$container.addClass(focusedCssClass);
     }
 };
 
@@ -608,8 +608,8 @@ SmallVideo.prototype.updateView = function () {
                                 || displayMode === DISPLAY_AVATAR_WITH_NAME));
     // show hide overlay when there is a video or avatar under
     // the display name
-    UIUtil.setVisibleBySelector($('#' + this.videoSpanId
+    UIUtil.setVisibleBySelector(this.$container.find(
-                                + ' .videocontainer__hoverOverlay'),
+                                '.videocontainer__hoverOverlay'),
                                 (displayMode === DISPLAY_AVATAR_WITH_NAME
                                 || displayMode === DISPLAY_VIDEO_WITH_NAME));
 };
@@ -738,7 +738,7 @@ SmallVideo.prototype.initBrowserSpecificProperties = function() {
     if (userAgent.indexOf("QtWebEngine") > -1
         && (userAgent.indexOf("Windows") > -1
             || userAgent.indexOf("Linux") > -1)) {
-        $('#' + this.videoSpanId).css("overflow", "hidden");
+        this.$container.css("overflow", "hidden");
     }
 };