From 52ee8fd4736efbca01c6cac52b0d893593a45c9e Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Fri, 30 Jun 2017 16:07:37 -0700 Subject: [PATCH] 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 | 1 + modules/UI/videolayout/LocalVideo.js | 16 ++++++++-------- modules/UI/videolayout/RemoteVideo.js | 5 +++-- modules/UI/videolayout/SmallVideo.js | 26 +++++++++++++------------- 4 files changed, 25 insertions(+), 23 deletions(-) diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js index e9a34e1ed..dbc53363b 100644 --- a/modules/UI/shared_video/SharedVideo.js +++ b/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); diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index c15f0bdfe..1b4933460 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/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'); - localVideoContainerSelector.off('click'); - localVideoContainerSelector.on('click', localVideoClick); + this.$container.off('click'); + this.$container.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) - $('#' + this.videoSpanId).contextMenu(enable); + if(this.$container.contextMenu) + this.$container.contextMenu(enable); }; export default LocalVideo; diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 429679a7a..d83ebebb8 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/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)); diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index e646a57dd..7a63de369 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -146,7 +146,7 @@ SmallVideo.prototype.getId = function () { * false - 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 noVideo = $("#" + this.videoSpanId + " > .noVideo"); + var noMic = this.$container.find('.noMic'); + 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 - + ' .videocontainer__hoverOverlay'), + UIUtil.setVisibleBySelector(this.$container.find( + '.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"); } };