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
This commit is contained in:
Robert Pintilii 2022-03-31 12:13:33 +03:00 committed by GitHub
parent 1618093f30
commit 343a1b87e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 21 deletions

View File

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

View File

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