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.

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;

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 <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()) {
         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 <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) {
     const container = document.createElement('span');