diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index 3c1d77c20..d64e3caf2 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -48,6 +48,8 @@ function LocalVideo(VideoLayout, emitter) { this.addAudioLevelIndicator(); this.updateIndicators(); + + this.container.onclick = this._onContainerClick.bind(this); } LocalVideo.prototype = Object.create(SmallVideo.prototype); @@ -95,42 +97,6 @@ LocalVideo.prototype.setDisplayName = function(displayName) { LocalVideo.prototype.changeVideo = function(stream) { this.videoStream = stream; - const localVideoClick = event => { - // TODO Checking the classes is a workround to allow events to bubble - // into the DisplayName component if it was clicked. React's synthetic - // events will fire after jQuery handlers execute, so stop propogation - // at this point will prevent DisplayName from getting click events. - // This workaround should be removeable once LocalVideo is a React - // Component because then the components share the same eventing system. - const $source = $(event.target || event.srcElement); - const { classList } = event.target; - - const clickedOnDisplayName - = $source.parents('.displayNameContainer').length > 0; - const clickedOnPopover - = $source.parents('.connection-info').length > 0; - const clickedOnPopoverTrigger - = $source.parents('.popover-trigger').length > 0 - || classList.contains('popover-trigger'); - - const ignoreClick = clickedOnDisplayName - || clickedOnPopoverTrigger - || clickedOnPopover; - - // FIXME: with Temasys plugin event arg is not an event, but - // the clicked object itself, so we have to skip this call - if (event.stopPropagation && !ignoreClick) { - event.stopPropagation(); - } - - if (!ignoreClick) { - this.VideoLayout.handleVideoThumbClicked(this.id); - } - }; - - this.$container.off('click'); - this.$container.on('click', localVideoClick); - this.localVideoId = `localVideo_${stream.getId()}`; const localVideoContainer = document.getElementById('localVideoWrapper'); @@ -246,4 +212,41 @@ LocalVideo.prototype._enableDisableContextMenu = function(enable) { } }; +/** + * Callback invoked when the thumbnail is clicked. Will directly call + * VideoLayout to handle thumbnail click if certain elements have not been + * clicked. + * + * @param {MouseEvent} event - The click event to intercept. + * @private + * @returns {void} + */ +LocalVideo.prototype._onContainerClick = function(event) { + // TODO Checking the classes is a workround to allow events to bubble into + // the DisplayName component if it was clicked. React's synthetic events + // will fire after jQuery handlers execute, so stop propogation at this + // point will prevent DisplayName from getting click events. This workaround + // should be removeable once LocalVideo is a React Component because then + // the components share the same eventing system. + const $source = $(event.target || event.srcElement); + const { classList } = event.target; + + const clickedOnDisplayName + = $source.parents('.displayNameContainer').length > 0; + const clickedOnPopover = $source.parents('.popover').length > 0 + || classList.contains('popover'); + + const ignoreClick = clickedOnDisplayName || clickedOnPopover; + + // FIXME: with Temasys plugin event arg is not an event, but the clicked + // object itself, so we have to skip this call + if (event.stopPropagation && !ignoreClick) { + event.stopPropagation(); + } + + if (!ignoreClick) { + this.VideoLayout.handleVideoThumbClicked(this.id); + } +}; + export default LocalVideo; diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 36f0db7fb..3210ae431 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -80,6 +80,8 @@ function RemoteVideo(user, VideoLayout, emitter) { = this._requestRemoteControlPermissions.bind(this); this._setAudioVolume = this._setAudioVolume.bind(this); this._stopRemoteControl = this._stopRemoteControl.bind(this); + + this.container.onclick = this._onContainerClick.bind(this); } RemoteVideo.prototype = Object.create(SmallVideo.prototype); @@ -539,40 +541,6 @@ RemoteVideo.prototype.addRemoteStreamElement = function(stream) { this.setVideoType(stream.videoType); } - // Add click handler. - const onClickHandler = event => { - const $source = $(event.target || event.srcElement); - const { classList } = event.target; - - const clickedOnPopover - = $source.parents('.connection-info').length > 0; - const clickedOnPopoverTrigger - = $source.parents('.popover-trigger').length > 0 - || classList.contains('popover-trigger'); - const clickedOnRemoteMenu - = $source.parents('.remotevideomenu').length > 0; - - const ignoreClick = clickedOnPopoverTrigger - || clickedOnPopover - || clickedOnRemoteMenu; - - if (!ignoreClick) { - this.VideoLayout.handleVideoThumbClicked(this.id); - } - - // On IE we need to populate this handler on video - // and it does not give event instance as an argument, - // so we check here for methods. - if (event.stopPropagation && event.preventDefault && !ignoreClick) { - event.stopPropagation(); - event.preventDefault(); - } - - return false; - }; - - this.container.onclick = onClickHandler; - if (!stream.getOriginalStream()) { return; } @@ -596,8 +564,6 @@ RemoteVideo.prototype.addRemoteStreamElement = function(stream) { streamElement = stream.attach(streamElement); } - $(streamElement).click(onClickHandler); - if (!isVideo) { this._audioStreamElement = streamElement; @@ -676,6 +642,36 @@ RemoteVideo.prototype.removePresenceLabel = function() { } }; +/** + * Callback invoked when the thumbnail is clicked. Will directly call + * VideoLayout to handle thumbnail click if certain elements have not been + * clicked. + * + * @param {MouseEvent} event - The click event to intercept. + * @private + * @returns {void} + */ +RemoteVideo.prototype._onContainerClick = function(event) { + const $source = $(event.target || event.srcElement); + const { classList } = event.target; + + const ignoreClick = $source.parents('.popover').length > 0 + || classList.contains('popover'); + + if (!ignoreClick) { + this.VideoLayout.handleVideoThumbClicked(this.id); + } + + // On IE we need to populate this handler on video and it does not + // give event instance as an argument, so we check here for methods. + if (event.stopPropagation && event.preventDefault && !ignoreClick) { + event.stopPropagation(); + event.preventDefault(); + } + + return false; +}; + RemoteVideo.createContainer = function(spanId) { const container = document.createElement('span');