fix(thumbnails) Fix recalculate tile dimensions on client resize (#11267)

Recalculate after new dimensions are in the store
Fixes issue where on participant pane toggle the tiles would not recalculate correctly

react/features/filmstrip/middleware.web.js

@@ -22,10 +22,7 @@ import {
     addStageParticipant,
     removeStageParticipant,
     setFilmstripWidth,
-    setHorizontalViewDimensions,
-    setStageParticipants,
-    setTileViewDimensions,
-    setVerticalViewDimensions
+    setStageParticipants
 } from './actions';
 import {
     ACTIVE_PARTICIPANT_TIMEOUT,
@@ -66,21 +63,6 @@ MiddlewareRegistry.register(store => next => action => {
     switch (action.type) {
     case CLIENT_RESIZED: {
         const state = store.getState();
-        const layout = getCurrentLayout(state);
-
-        switch (layout) {
-        case LAYOUTS.TILE_VIEW: {
-            store.dispatch(setTileViewDimensions());
-            break;
-        }
-        case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW:
-            store.dispatch(setHorizontalViewDimensions());
-            break;
-
-        case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
-            store.dispatch(setVerticalViewDimensions());
-            break;
-        }
 
         if (isFilmstripResizable(state)) {
             const { width: filmstripWidth } = state['features/filmstrip'];

react/features/filmstrip/subscriber.web.js

@@ -59,8 +59,11 @@ StateListenerRegistry.register(
  * Listens for changes in the selected layout to calculate the dimensions of the tile view grid and horizontal view.
  */
 StateListenerRegistry.register(
-    /* selector */ state => getCurrentLayout(state),
-    /* listener */ (layout, store) => {
+    /* selector */ state => {
+        return { layout: getCurrentLayout(state),
+            width: state['features/base/responsive-ui'].clientWidth };
+    },
+    /* listener */ ({ layout }, store) => {
         switch (layout) {
         case LAYOUTS.TILE_VIEW:
             store.dispatch(setTileViewDimensions());
@@ -72,6 +75,8 @@ StateListenerRegistry.register(
             store.dispatch(setVerticalViewDimensions());
             break;
         }
+    }, {
+        deepEquals: true
     });
 
 /**