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:
parent
1618093f30
commit
343a1b87e2
|
@ -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'];
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue