fix(tile-view): disable tile view on pin, unpin all on view enter

react/features/video-layout/middleware.any.js

@@ -0,0 +1,39 @@
+import {
+    PIN_PARTICIPANT,
+    getPinnedParticipant,
+    pinParticipant
+} from '../base/participants';
+import { MiddlewareRegistry } from '../base/redux';
+
+import { SET_TILE_VIEW } from './actionTypes';
+import { setTileView } from './actions';
+
+/**
+ * Middleware which intercepts actions and updates tile view related state.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case PIN_PARTICIPANT: {
+        const isPinning = Boolean(action.participant.id);
+        const { tileViewEnabled } = store.getState()['features/video-layout'];
+
+        if (isPinning && tileViewEnabled) {
+            store.dispatch(setTileView(false));
+        }
+
+        break;
+    }
+
+    case SET_TILE_VIEW:
+        if (getPinnedParticipant(store.getState()) && action.enabled) {
+            store.dispatch(pinParticipant(null));
+        }
+
+        break;
+    }
+
+    return next(action);
+});

react/features/video-layout/middleware.native.js

@@ -0,0 +1 @@
+import './middleware.any';

react/features/video-layout/middleware.web.js

@@ -17,6 +17,7 @@ import { TRACK_ADDED } from '../base/tracks';
 import { SET_FILMSTRIP_VISIBLE } from '../filmstrip';
 
 import { SET_TILE_VIEW } from './actionTypes';
+import './middleware.any';
 
 declare var APP: Object;