haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(filmstrip): allow pinning of participants without streams 

Click handling was added to the local thumbnail only after
receiving video. Click handling was added to remote thumbnails
only after receiving a stream. To allow for pinning through
the filmstrip in any case, always attach the click handler
on thumbnail init.
This commit is contained in:
Leonard Kim 2017-11-08 16:17:38 -08:00 committed by yanas
parent 3d5fbefe7e
commit b37bbcc622
2 changed files with 71 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
modules/UI/videolayout/LocalVideo.js
View File

@ -48,6 +48,8 @@ function LocalVideo(VideoLayout, emitter) {
this.addAudioLevelIndicator(); this.addAudioLevelIndicator();
this.updateIndicators(); this.updateIndicators();
this.container.onclick = this._onContainerClick.bind(this);
} }
LocalVideo.prototype = Object.create(SmallVideo.prototype); LocalVideo.prototype = Object.create(SmallVideo.prototype);
@ -95,42 +97,6 @@ LocalVideo.prototype.setDisplayName = function(displayName) {
LocalVideo.prototype.changeVideo = function(stream) { LocalVideo.prototype.changeVideo = function(stream) {
this.videoStream = 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()}`; this.localVideoId = `localVideo_${stream.getId()}`;
const localVideoContainer = document.getElementById('localVideoWrapper'); 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; export default LocalVideo;

68
modules/UI/videolayout/RemoteVideo.js
View File

@ -80,6 +80,8 @@ function RemoteVideo(user, VideoLayout, emitter) {
= this._requestRemoteControlPermissions.bind(this); = this._requestRemoteControlPermissions.bind(this);
this._setAudioVolume = this._setAudioVolume.bind(this); this._setAudioVolume = this._setAudioVolume.bind(this);
this._stopRemoteControl = this._stopRemoteControl.bind(this); this._stopRemoteControl = this._stopRemoteControl.bind(this);
this.container.onclick = this._onContainerClick.bind(this);
} }
RemoteVideo.prototype = Object.create(SmallVideo.prototype); RemoteVideo.prototype = Object.create(SmallVideo.prototype);
@ -539,40 +541,6 @@ RemoteVideo.prototype.addRemoteStreamElement = function(stream) {
this.setVideoType(stream.videoType); 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 <object>
// 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()) { if (!stream.getOriginalStream()) {
return; return;
} }
@ -596,8 +564,6 @@ RemoteVideo.prototype.addRemoteStreamElement = function(stream) {
streamElement = stream.attach(streamElement); streamElement = stream.attach(streamElement);
} }
$(streamElement).click(onClickHandler);
if (!isVideo) { if (!isVideo) {
this._audioStreamElement = streamElement; 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 <object> 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) { RemoteVideo.createContainer = function(spanId) {
const container = document.createElement('span'); const container = document.createElement('span');