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

     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

     this.videoSpanId = "localVideoContainer";
 
     this.container = this.createContainer();
+    this.$container = $(this.container);
     $("#filmstripLocalVideo").append(this.container);
 
     this.localVideoId = null;
         }
     };
 
-    let localVideoContainerSelector = $('#localVideoContainer');
-    localVideoContainerSelector.off('click');
-    localVideoContainerSelector.on('click', localVideoClick);
+    this.$container.off('click');
+    this.$container.on('click', localVideoClick);
 
     this.localVideoId = 'localVideo_' + stream.getId();
 
 
     // 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();
     }
 };
 
  * @param enable {boolean} true for enable, false for disable
  */
 LocalVideo.prototype._enableDisableContextMenu = function (enable) {
-    if($('#' + this.videoSpanId).contextMenu)
-        $('#' + this.videoSpanId).contextMenu(enable);
+    if(this.$container.contextMenu)
+        this.$container.contextMenu(enable);
 };
 
 export default LocalVideo;

modules/UI/videolayout/RemoteVideo.js

 
 RemoteVideo.prototype.addRemoteVideoContainer = function() {
     this.container = RemoteVideo.createContainer(this.videoSpanId);
+    this.$container = $(this.container);
 
     this.initBrowserSpecificProperties();
 
  * @inheritDoc
  */
 RemoteVideo.prototype.updateView = function () {
-    $(this.container).toggleClass('audio-only', APP.conference.isAudioOnly());
+    this.$container.toggleClass('audio-only', APP.conference.isAudioOnly());
 
     this.updateConnectionStatusIndicator();
 
  * @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

  * <tt>false</tt> - otherwise.
  */
 SmallVideo.prototype.isVisible = function () {
-    return $('#' + this.videoSpanId).is(':visible');
+    return this.$container.is(':visible');
 };
 
 /**
     if(!this.container)
         return;
 
-    var noMic = $("#" + this.videoSpanId + " > .noMic");
-    var noVideo =  $("#" + this.videoSpanId + " > .noVideo");
+    var noMic = this.$container.find('.noMic');
+    var noVideo =  this.$container.find('.noVideo');
 
     noMic.remove();
     noVideo.remove();
  */
 SmallVideo.prototype.bindHoverHandler = function () {
     // Add hover handler
-    $(this.container).hover(
+    this.$container.hover(
         () => {
             this.videoIsHovered = true;
             this.updateView();
  * array (after checking its length of course!).
  */
 SmallVideo.prototype.selectVideoElement = function () {
-    return $(RTCUIHelper.findVideoElement($('#' + this.videoSpanId)[0]));
+    return $(RTCUIHelper.findVideoElement(this.container));
 };
 
 /**
  * element which displays the user's avatar.
  */
 SmallVideo.prototype.$avatar = function () {
-    return $('#' + this.videoSpanId + ' .avatar-container');
+    return this.$container.find('.avatar-container');
 };
 
 /**
  * the video thumbnail
  */
 SmallVideo.prototype.$displayName = function () {
-    return $('#' + this.videoSpanId + ' .displayNameContainer');
+    return this.$container.find('.displayNameContainer');
 };
 
 /**
  */
 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);
     }
 };
 
                                 || displayMode === DISPLAY_AVATAR_WITH_NAME));
     // show hide overlay when there is a video or avatar under
     // the display name
-    UIUtil.setVisibleBySelector($('#' + this.videoSpanId
-                                + ' .videocontainer__hoverOverlay'),
+    UIUtil.setVisibleBySelector(this.$container.find(
+                                '.videocontainer__hoverOverlay'),
                                 (displayMode === DISPLAY_AVATAR_WITH_NAME
                                 || displayMode === DISPLAY_VIDEO_WITH_NAME));
 };
     if (userAgent.indexOf("QtWebEngine") > -1
         && (userAgent.indexOf("Windows") > -1
             || userAgent.indexOf("Linux") > -1)) {
-        $('#' + this.videoSpanId).css("overflow", "hidden");
+        this.$container.css("overflow", "hidden");
     }
 };