2020-07-23 13:12:25 +00:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
import { getCurrentConference } from '../base/conference';
|
|
|
|
import { PIN_PARTICIPANT, pinParticipant, getPinnedParticipant } from '../base/participants';
|
|
|
|
import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
|
|
|
|
import { SET_DOCUMENT_EDITING_STATUS } from '../etherpad';
|
2018-11-28 19:36:23 +00:00
|
|
|
|
|
|
|
import { SET_TILE_VIEW } from './actionTypes';
|
|
|
|
import { setTileView } from './actions';
|
|
|
|
|
2020-06-04 14:09:13 +00:00
|
|
|
import './subscriber';
|
|
|
|
|
2020-07-23 13:12:25 +00:00
|
|
|
let previousTileViewEnabled;
|
|
|
|
|
2018-11-28 19:36:23 +00:00
|
|
|
/**
|
|
|
|
* Middleware which intercepts actions and updates tile view related state.
|
|
|
|
*
|
|
|
|
* @param {Store} store - The redux store.
|
|
|
|
* @returns {Function}
|
|
|
|
*/
|
|
|
|
MiddlewareRegistry.register(store => next => action => {
|
2020-07-23 13:12:25 +00:00
|
|
|
const result = next(action);
|
|
|
|
|
2018-11-28 19:36:23 +00:00
|
|
|
switch (action.type) {
|
2020-07-23 13:12:25 +00:00
|
|
|
|
|
|
|
// Actions that temporarily clear the user preferred state of tile view,
|
|
|
|
// then re-set it when needed.
|
2018-11-28 19:36:23 +00:00
|
|
|
case PIN_PARTICIPANT: {
|
2020-07-23 13:12:25 +00:00
|
|
|
const pinnedParticipant = getPinnedParticipant(store.getState());
|
2018-11-28 19:36:23 +00:00
|
|
|
|
2020-07-23 13:12:25 +00:00
|
|
|
if (pinnedParticipant) {
|
|
|
|
_storeTileViewStateAndClear(store);
|
|
|
|
} else {
|
|
|
|
_restoreTileViewState(store);
|
2018-11-28 19:36:23 +00:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
2018-11-28 19:48:15 +00:00
|
|
|
case SET_DOCUMENT_EDITING_STATUS:
|
|
|
|
if (action.editing) {
|
2020-07-23 13:12:25 +00:00
|
|
|
_storeTileViewStateAndClear(store);
|
|
|
|
} else {
|
|
|
|
_restoreTileViewState(store);
|
2018-11-28 19:48:15 +00:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
2020-07-23 13:12:25 +00:00
|
|
|
// Things to update when tile view state changes
|
|
|
|
case SET_TILE_VIEW:
|
|
|
|
if (action.enabled && getPinnedParticipant(store)) {
|
|
|
|
store.dispatch(pinParticipant(null));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-11-28 19:48:15 +00:00
|
|
|
|
2020-07-23 13:12:25 +00:00
|
|
|
return result;
|
|
|
|
});
|
2018-11-28 19:48:15 +00:00
|
|
|
|
2020-07-23 13:12:25 +00:00
|
|
|
/**
|
|
|
|
* Set up state change listener to perform maintenance tasks when the conference
|
|
|
|
* is left or failed.
|
|
|
|
*/
|
|
|
|
StateListenerRegistry.register(
|
|
|
|
state => getCurrentConference(state),
|
|
|
|
(conference, { dispatch }, previousConference) => {
|
|
|
|
if (conference !== previousConference) {
|
|
|
|
// conference changed, left or failed...
|
|
|
|
// Clear tile view state.
|
|
|
|
dispatch(setTileView());
|
2018-11-28 19:36:23 +00:00
|
|
|
}
|
2020-07-23 13:12:25 +00:00
|
|
|
});
|
2018-11-28 19:36:23 +00:00
|
|
|
|
2020-07-23 13:12:25 +00:00
|
|
|
/**
|
|
|
|
* Respores tile view state, if it wasn't updated since then.
|
|
|
|
*
|
|
|
|
* @param {Object} store - The Redux Store.
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
function _restoreTileViewState({ dispatch, getState }) {
|
|
|
|
const { tileViewEnabled } = getState()['features/video-layout'];
|
|
|
|
|
|
|
|
if (tileViewEnabled === undefined && previousTileViewEnabled !== undefined) {
|
|
|
|
dispatch(setTileView(previousTileViewEnabled));
|
2018-11-28 19:48:15 +00:00
|
|
|
}
|
2018-11-28 19:36:23 +00:00
|
|
|
|
2020-07-23 13:12:25 +00:00
|
|
|
previousTileViewEnabled = undefined;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Stores the current tile view state and clears it.
|
|
|
|
*
|
|
|
|
* @param {Object} store - The Redux Store.
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
function _storeTileViewStateAndClear({ dispatch, getState }) {
|
|
|
|
const { tileViewEnabled } = getState()['features/video-layout'];
|
|
|
|
|
|
|
|
if (tileViewEnabled !== undefined) {
|
|
|
|
previousTileViewEnabled = tileViewEnabled;
|
|
|
|
dispatch(setTileView(undefined));
|
|
|
|
}
|
|
|
|
}
|