jiti-meet/react/features/filmstrip/subscriber.web.js

173 lines
6.1 KiB
JavaScript
Raw Normal View History

// @flow
import { isMobileBrowser } from '../base/environment/utils';
feat: Participants optimisations (#9515) * fix(participants): Change from array to Map * fix(unload): optimise * feat: Introduces new states for e2ee feature. Stores everyoneSupportsE2EE and everyoneEnabledE2EE to minimize looping through participants list. squash: Uses participants map and go over the elements only once. * feat: Optimizes isEveryoneModerator to do less frequent checks in all participants. * fix: Drops deep equal from participants pane and uses the map. * fix(SharedVideo): isVideoPlaying * fix(participants): Optimise isEveryoneModerator * fix(e2e): Optimise everyoneEnabledE2EE * fix: JS errors. * ref(participants): remove getParticipants * fix(participants): Prepare for PR. * fix: Changes participants pane to be component. The functional component was always rendered: `prev props: {} !== {} :next props`. * feat: Optimization to skip participants list on pane closed. * fix: The participants list shows and the local participant. * fix: Fix wrong action name for av-moderation. * fix: Minimizes the number of render calls of av moderation notification. * fix: Fix iterating over remote participants. * fix: Fixes lint error. * fix: Reflects participant updates for av-moderation. * fix(ParticipantPane): to work with IDs. * fix(av-moderation): on PARTCIPANT_UPDATE * fix(ParticipantPane): close delay. * fix: address code review comments * fix(API): mute-everyone * fix: bugs * fix(Thumbnail): on mobile. * fix(ParticipantPane): Close context menu on click. * fix: Handles few error when local participant is undefined. * feat: Hides AV moderation if not supported. * fix: Show mute all video. * fix: Fixes updating participant for av moderation. Co-authored-by: damencho <damencho@jitsi.org>
2021-07-09 12:36:19 +00:00
import { getParticipantCountWithFake } from '../base/participants';
2020-05-20 10:57:03 +00:00
import { StateListenerRegistry, equals } from '../base/redux';
import { clientResized } from '../base/responsive-ui';
import { shouldHideSelfView } from '../base/settings';
import { setFilmstripVisible } from '../filmstrip/actions';
import { getParticipantsPaneOpen } from '../participants-pane/functions';
import { setOverflowDrawer } from '../toolbox/actions.web';
import { getCurrentLayout, getTileViewGridDimensions, shouldDisplayTileView, LAYOUTS } from '../video-layout';
import {
setHorizontalViewDimensions,
setTileViewDimensions,
setVerticalViewDimensions
} from './actions';
import {
ASPECT_RATIO_BREAKPOINT,
DISPLAY_DRAWER_THRESHOLD,
SINGLE_COLUMN_BREAKPOINT,
TWO_COLUMN_BREAKPOINT
} from './constants';
import './subscriber.any';
/**
* Listens for changes in the number of participants to calculate the dimensions of the tile view grid and the tiles.
*/
StateListenerRegistry.register(
/* selector */ state => {
return {
numberOfParticipants: getParticipantCountWithFake(state),
disableSelfView: shouldHideSelfView(state)
};
},
/* listener */ (currentState, store) => {
const state = store.getState();
if (shouldDisplayTileView(state)) {
const gridDimensions = getTileViewGridDimensions(state);
const oldGridDimensions = state['features/filmstrip'].tileViewDimensions.gridDimensions;
if (!equals(gridDimensions, oldGridDimensions)) {
2021-03-26 20:23:05 +00:00
store.dispatch(setTileViewDimensions(gridDimensions));
}
}
}, {
deepEquals: true
});
/**
* 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) => {
const state = store.getState();
switch (layout) {
2021-03-26 20:23:05 +00:00
case LAYOUTS.TILE_VIEW:
store.dispatch(setTileViewDimensions(getTileViewGridDimensions(state)));
break;
case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW:
2021-03-26 20:23:05 +00:00
store.dispatch(setHorizontalViewDimensions());
break;
case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
store.dispatch(setVerticalViewDimensions());
break;
}
});
/**
* Listens for changes in the chat state to recompute available width.
*/
StateListenerRegistry.register(
/* selector */ state => state['features/chat'].isOpen,
/* listener */ (isChatOpen, store) => {
const { innerWidth, innerHeight } = window;
if (isChatOpen) {
// $FlowFixMe
document.body.classList.add('shift-right');
} else {
// $FlowFixMe
document.body.classList.remove('shift-right');
}
store.dispatch(clientResized(innerWidth, innerHeight));
});
/**
* Listens for changes in the participant pane state to calculate the
* dimensions of the tile view grid and the tiles.
*/
StateListenerRegistry.register(
/* selector */ getParticipantsPaneOpen,
/* listener */ (isOpen, store) => {
const { innerWidth, innerHeight } = window;
store.dispatch(clientResized(innerWidth, innerHeight));
});
/**
* Listens for changes in the client width to determine whether the overflow menu(s) should be displayed as drawers.
*/
StateListenerRegistry.register(
/* selector */ state => state['features/base/responsive-ui'].clientWidth < DISPLAY_DRAWER_THRESHOLD,
/* listener */ (widthBelowThreshold, store) => {
if (isMobileBrowser()) {
store.dispatch(setOverflowDrawer(widthBelowThreshold));
}
});
/**
* Gracefully hide/show the filmstrip when going past threshold.
*/
StateListenerRegistry.register(
/* selector */ state => state['features/base/responsive-ui'].clientWidth < ASPECT_RATIO_BREAKPOINT,
/* listener */ (widthBelowThreshold, store) => {
const state = store.getState();
const { disableFilmstripAutohiding } = state['features/base/config'];
if (!disableFilmstripAutohiding) {
store.dispatch(setFilmstripVisible(!widthBelowThreshold));
}
});
/**
* Symbol mapping used for the tile view responsiveness computation.
*/
const responsiveColumnMapping = {
multipleColumns: Symbol('multipleColumns'),
singleColumn: Symbol('singleColumn'),
twoColumns: Symbol('twoColumns'),
twoParticipantsSingleColumn: Symbol('twoParticipantsSingleColumn')
};
/**
* Listens for changes in the screen size to recompute
* the dimensions of the tile view grid and the tiles for responsiveness.
*/
StateListenerRegistry.register(
/* selector */ state => {
const { clientWidth } = state['features/base/responsive-ui'];
if (clientWidth < TWO_COLUMN_BREAKPOINT && clientWidth >= ASPECT_RATIO_BREAKPOINT) {
// Forcing the recomputation of tiles when screen switches in or out of
// the (TWO_COLUMN_BREAKPOINT, ASPECT_RATIO_BREAKPOINT] interval.
return responsiveColumnMapping.twoColumns;
} else if (clientWidth < ASPECT_RATIO_BREAKPOINT && clientWidth >= SINGLE_COLUMN_BREAKPOINT) {
// Forcing the recomputation of tiles when screen switches in or out of
// the (ASPECT_RATIO_BREAKPOINT, SINGLE_COLUMN_BREAKPOINT] interval.
return responsiveColumnMapping.twoParticipantsSingleColumn;
} else if (clientWidth < SINGLE_COLUMN_BREAKPOINT) {
// Forcing the recomputation of tiles when screen switches below SINGLE_COLUMN_BREAKPOINT.
return responsiveColumnMapping.singleColumn;
}
// Forcing the recomputation of tiles when screen switches above TWO_COLUMN_BREAKPOINT.
return responsiveColumnMapping.multipleColumns;
},
/* listener */ (_, store) => {
const state = store.getState();
if (shouldDisplayTileView(state)) {
const gridDimensions = getTileViewGridDimensions(state);
2021-03-26 20:23:05 +00:00
store.dispatch(setTileViewDimensions(gridDimensions));
}
});