feat(tile-view): exit tile view on pin (#3430)

* feat(tile-view): exit tile view on pin

* Try out this other ux impl

modules/UI/shared_video/SharedVideoThumb.js

@@ -1,5 +1,4 @@
-/* global $, APP */
-import { shouldDisplayTileView } from '../../../react/features/video-layout';
+/* global $ */
 
 import SmallVideo from '../videolayout/SmallVideo';
 
@@ -66,9 +65,7 @@ SharedVideoThumb.prototype.createContainer = function(spanId) {
  * The thumb click handler.
  */
 SharedVideoThumb.prototype.videoClick = function() {
-    if (!shouldDisplayTileView(APP.store.getState())) {
-        this._togglePin();
-    }
+    this._togglePin();
 };
 
 /**

modules/UI/videolayout/LocalVideo.js

@@ -275,9 +275,7 @@ LocalVideo.prototype._onContainerClick = function(event) {
         = $source.parents('.displayNameContainer').length > 0;
     const clickedOnPopover = $source.parents('.popover').length > 0
             || classList.contains('popover');
-    const ignoreClick = clickedOnDisplayName
-        || clickedOnPopover
-        || shouldDisplayTileView(APP.store.getState());
+    const ignoreClick = clickedOnDisplayName || clickedOnPopover;
 
     if (event.stopPropagation && !ignoreClick) {
         event.stopPropagation();

modules/UI/videolayout/RemoteVideo.js

@@ -627,8 +627,7 @@ RemoteVideo.prototype._onContainerClick = function(event) {
     const { classList } = event.target;
 
     const ignoreClick = $source.parents('.popover').length > 0
-            || classList.contains('popover')
-            || shouldDisplayTileView(APP.store.getState());
+            || classList.contains('popover');
 
     if (!ignoreClick) {
         this._togglePin();

modules/UI/videolayout/SmallVideo.js

@@ -30,6 +30,7 @@ import {
 import {
     LAYOUTS,
     getCurrentLayout,
+    setTileView,
     shouldDisplayTileView
 } from '../../../react/features/video-layout';
 /* eslint-enable no-unused-vars */

react/features/video-layout/functions.js

@@ -1,6 +1,7 @@
 // @flow
 
 import { LAYOUTS } from './constants';
+import { getPinnedParticipant } from '../base/participants';
 
 declare var interfaceConfig: Object;
 
@@ -80,5 +81,6 @@ export function shouldDisplayTileView(state: Object = {}) {
             // should never be enabled for filmstrip only mode.
             && (typeof interfaceConfig === 'undefined'
                 || !interfaceConfig.filmStripOnly)
+            && !getPinnedParticipant(state)
     );
 }