2021-08-23 23:02:41 +00:00
|
|
|
// @flow
|
|
|
|
|
2022-04-04 18:57:58 +00:00
|
|
|
import { getSourceNameSignalingFeatureFlag } from '../base/config';
|
2022-04-29 14:32:16 +00:00
|
|
|
import { getVirtualScreenshareParticipantOwnerId } from '../base/participants';
|
2022-04-04 18:57:58 +00:00
|
|
|
|
2021-08-23 23:02:41 +00:00
|
|
|
import { setRemoteParticipants } from './actions';
|
2022-05-06 10:18:57 +00:00
|
|
|
import { isFilmstripScrollVisible } from './functions';
|
2021-08-23 23:02:41 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Computes the reorderd list of the remote participants.
|
|
|
|
*
|
|
|
|
* @param {*} store - The redux store.
|
2021-08-19 21:56:45 +00:00
|
|
|
* @param {string} participantId - The endpoint id of the participant that joined the call.
|
2021-08-23 23:02:41 +00:00
|
|
|
* @returns {void}
|
|
|
|
* @private
|
|
|
|
*/
|
2021-08-23 22:39:09 +00:00
|
|
|
export function updateRemoteParticipants(store: Object, participantId: ?number) {
|
2021-08-23 23:02:41 +00:00
|
|
|
const state = store.getState();
|
2021-08-19 21:56:45 +00:00
|
|
|
let reorderedParticipants = [];
|
|
|
|
|
2022-04-29 14:32:16 +00:00
|
|
|
const { sortedRemoteVirtualScreenshareParticipants } = state['features/base/participants'];
|
2022-04-04 18:57:58 +00:00
|
|
|
|
2022-04-29 14:32:16 +00:00
|
|
|
if (!isReorderingEnabled(state) && !sortedRemoteVirtualScreenshareParticipants.size) {
|
2021-08-19 21:56:45 +00:00
|
|
|
if (participantId) {
|
|
|
|
const { remoteParticipants } = state['features/filmstrip'];
|
|
|
|
|
|
|
|
reorderedParticipants = [ ...remoteParticipants, participantId ];
|
|
|
|
store.dispatch(setRemoteParticipants(reorderedParticipants));
|
|
|
|
}
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-08-23 22:39:09 +00:00
|
|
|
const {
|
|
|
|
fakeParticipants,
|
|
|
|
sortedRemoteParticipants,
|
|
|
|
sortedRemoteScreenshares,
|
|
|
|
speakersList
|
|
|
|
} = state['features/base/participants'];
|
2021-08-23 23:02:41 +00:00
|
|
|
const remoteParticipants = new Map(sortedRemoteParticipants);
|
2021-08-23 22:39:09 +00:00
|
|
|
const screenShares = new Map(sortedRemoteScreenshares);
|
2022-04-29 14:32:16 +00:00
|
|
|
const screenShareParticipants = sortedRemoteVirtualScreenshareParticipants
|
|
|
|
? [ ...sortedRemoteVirtualScreenshareParticipants.keys() ] : [];
|
2021-08-23 23:02:41 +00:00
|
|
|
const sharedVideos = fakeParticipants ? Array.from(fakeParticipants.keys()) : [];
|
2021-08-23 22:39:09 +00:00
|
|
|
const speakers = new Map(speakersList);
|
2021-08-23 23:02:41 +00:00
|
|
|
|
2022-04-04 18:57:58 +00:00
|
|
|
if (getSourceNameSignalingFeatureFlag(state)) {
|
|
|
|
for (const screenshare of screenShareParticipants) {
|
2022-04-29 14:32:16 +00:00
|
|
|
const ownerId = getVirtualScreenshareParticipantOwnerId(screenshare);
|
2022-04-04 18:57:58 +00:00
|
|
|
|
|
|
|
remoteParticipants.delete(ownerId);
|
|
|
|
remoteParticipants.delete(screenshare);
|
|
|
|
|
|
|
|
speakers.delete(ownerId);
|
|
|
|
speakers.delete(screenshare);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
for (const screenshare of screenShares.keys()) {
|
|
|
|
remoteParticipants.delete(screenshare);
|
|
|
|
speakers.delete(screenshare);
|
|
|
|
}
|
2021-08-23 23:02:41 +00:00
|
|
|
}
|
2022-04-04 18:57:58 +00:00
|
|
|
|
2021-08-23 23:02:41 +00:00
|
|
|
for (const sharedVideo of sharedVideos) {
|
|
|
|
remoteParticipants.delete(sharedVideo);
|
2021-08-19 21:56:45 +00:00
|
|
|
speakers.delete(sharedVideo);
|
2021-08-23 23:02:41 +00:00
|
|
|
}
|
2021-08-19 21:56:45 +00:00
|
|
|
for (const speaker of speakers.keys()) {
|
2021-08-23 23:02:41 +00:00
|
|
|
remoteParticipants.delete(speaker);
|
|
|
|
}
|
2021-08-19 21:56:45 +00:00
|
|
|
|
2022-04-04 18:57:58 +00:00
|
|
|
if (getSourceNameSignalingFeatureFlag(state)) {
|
|
|
|
// Always update the order of the thumnails.
|
|
|
|
const participantsWithScreenShare = screenShareParticipants.reduce((acc, screenshare) => {
|
2022-04-29 14:32:16 +00:00
|
|
|
const ownerId = getVirtualScreenshareParticipantOwnerId(screenshare);
|
2022-04-04 18:57:58 +00:00
|
|
|
|
|
|
|
acc.push(ownerId);
|
|
|
|
acc.push(screenshare);
|
|
|
|
|
|
|
|
return acc;
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
reorderedParticipants = [
|
|
|
|
...participantsWithScreenShare,
|
|
|
|
...sharedVideos,
|
|
|
|
...Array.from(speakers.keys()),
|
|
|
|
...Array.from(remoteParticipants.keys())
|
|
|
|
];
|
|
|
|
} else {
|
|
|
|
// Always update the order of the thumnails.
|
|
|
|
reorderedParticipants = [
|
|
|
|
...Array.from(screenShares.keys()),
|
|
|
|
...sharedVideos,
|
|
|
|
...Array.from(speakers.keys()),
|
|
|
|
...Array.from(remoteParticipants.keys())
|
|
|
|
];
|
|
|
|
}
|
2021-08-23 23:02:41 +00:00
|
|
|
|
|
|
|
store.dispatch(setRemoteParticipants(reorderedParticipants));
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Private helper to calculate the reordered list of remote participants when a participant leaves.
|
|
|
|
*
|
|
|
|
* @param {*} store - The redux store.
|
|
|
|
* @param {string} participantId - The endpoint id of the participant leaving the call.
|
|
|
|
* @returns {void}
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
export function updateRemoteParticipantsOnLeave(store: Object, participantId: ?string = null) {
|
|
|
|
if (!participantId) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const state = store.getState();
|
|
|
|
const { remoteParticipants } = state['features/filmstrip'];
|
|
|
|
const reorderedParticipants = new Set(remoteParticipants);
|
|
|
|
|
|
|
|
reorderedParticipants.delete(participantId)
|
|
|
|
&& store.dispatch(setRemoteParticipants(Array.from(reorderedParticipants)));
|
|
|
|
}
|
2022-05-06 10:18:57 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns true if thumbnail reordering is enabled and false otherwise.
|
|
|
|
* Note: The function will return false if all participants are displayed on the screen.
|
|
|
|
*
|
|
|
|
* @param {Object} state - The redux state.
|
|
|
|
* @returns {boolean} - True if thumbnail reordering is enabled and false otherwise.
|
|
|
|
*/
|
|
|
|
export function isReorderingEnabled(state) {
|
|
|
|
const { testing = {} } = state['features/base/config'];
|
|
|
|
const enableThumbnailReordering = testing.enableThumbnailReordering ?? true;
|
|
|
|
|
|
|
|
return enableThumbnailReordering && isFilmstripScrollVisible(state);
|
|
|
|
}
|