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

101 lines
2.8 KiB
JavaScript
Raw Normal View History

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';
import { SET_TILE_VIEW } from './actionTypes';
import { setTileView } from './actions';
import './subscriber';
2020-07-23 13:12:25 +00:00
let previousTileViewEnabled;
/**
* 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);
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.
case PIN_PARTICIPANT: {
2020-07-23 13:12:25 +00:00
const pinnedParticipant = getPinnedParticipant(store.getState());
2020-07-23 13:12:25 +00:00
if (pinnedParticipant) {
_storeTileViewStateAndClear(store);
} else {
_restoreTileViewState(store);
}
break;
}
case SET_DOCUMENT_EDITING_STATUS:
if (action.editing) {
2020-07-23 13:12:25 +00:00
_storeTileViewStateAndClear(store);
} else {
_restoreTileViewState(store);
}
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));
}
}
2020-07-23 13:12:25 +00:00
return result;
});
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());
}
2020-07-23 13:12:25 +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));
}
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));
}
}