haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(participants-pane) Place Dominant Speaker first in participants list 

Move function participants list ordering function in participant-pane, since that's the only feature that uses it.
This commit is contained in:
robertpin 2021-10-06 16:11:40 +03:00 committed by GitHub
parent 597c99f884
commit 483bc45d59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
react/features/base/participants/functions.js
View File

@ -455,47 +455,6 @@ async function _getFirstLoadableAvatarUrl(participant, store) {
return undefined;
}
/**
* Selector for retrieving ids of participants in the order that they are displayed in the filmstrip (with the
* exception of participants with raised hand). The participants are reordered as follows.
* 1. Local participant.
* 2. Participants with raised hand.
* 3. Participants with screenshare sorted alphabetically by their display name.
* 4. Shared video participants.
* 5. Recent speakers sorted alphabetically by their display name.
* 6. Rest of the participants sorted alphabetically by their display name.
*
* @param {(Function|Object)} stateful - The (whole) redux state, or redux's
* {@code getState} function to be used to retrieve the state features/base/participants.
* @returns {Array<string>}
*/
export function getSortedParticipantIds(stateful: Object | Function): Array<string> {
const { id } = getLocalParticipant(stateful);
const remoteParticipants = getRemoteParticipantsSorted(stateful);
const reorderedParticipants = new Set(remoteParticipants);
const raisedHandParticipants = getRaiseHandsQueue(stateful);
const remoteRaisedHandParticipants = new Set(raisedHandParticipants || []);
for (const participant of remoteRaisedHandParticipants.keys()) {
// Avoid duplicates.
if (reorderedParticipants.has(participant)) {
reorderedParticipants.delete(participant);
} else {
remoteRaisedHandParticipants.delete(participant);
}
}
// Remove self.
remoteRaisedHandParticipants.has(id) && remoteRaisedHandParticipants.delete(id);
// Move self and participants with raised hand to the top of the list.
return [
id,
...Array.from(remoteRaisedHandParticipants.keys()),
...Array.from(reorderedParticipants.keys())
];
}
/**
* Get the participants queue with raised hands.
*

5
react/features/participants-pane/components/web/MeetingParticipants.js
View File

@ -8,13 +8,12 @@ import { rejectParticipantAudio } from '../../../av-moderation/actions';
import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
import { MEDIA_TYPE } from '../../../base/media';
import {
getParticipantCountWithFake,
getSortedParticipantIds
getParticipantCountWithFake
} from '../../../base/participants';
import { connect } from '../../../base/redux';
import { showOverflowDrawer } from '../../../toolbox/functions';
import { muteRemote } from '../../../video-menu/actions.any';
import { findStyledAncestor, shouldRenderInviteButton } from '../../functions';
import { findStyledAncestor, getSortedParticipantIds, shouldRenderInviteButton } from '../../functions';
import { useParticipantDrawer } from '../../hooks';
import { InviteButton } from './InviteButton';

59
react/features/participants-pane/functions.js
View File

@ -11,7 +11,10 @@ import { MEDIA_TYPE, type MediaType } from '../base/media/constants';
import {
getDominantSpeakerParticipant,
isLocalParticipantModerator,
isParticipantModerator
isParticipantModerator,
getLocalParticipant,
getRemoteParticipantsSorted,
getRaiseHandsQueue
} from '../base/participants/functions';
import { toState } from '../base/redux';
@ -188,3 +191,57 @@ export const shouldRenderInviteButton = (state: Object) => {
return flagEnabled && !disableInviteFunctions;
};
/**
* Selector for retrieving ids of participants in the order that they are displayed in the filmstrip (with the
* exception of participants with raised hand). The participants are reordered as follows.
* 1. Dominant speaker.
* 2. Local participant.
* 3. Participants with raised hand.
* 4. Participants with screenshare sorted alphabetically by their display name.
* 5. Shared video participants.
* 6. Recent speakers sorted alphabetically by their display name.
* 7. Rest of the participants sorted alphabetically by their display name.
*
* @param {(Function|Object)} stateful - The (whole) redux state, or redux's
* {@code getState} function to be used to retrieve the state features/base/participants.
* @returns {Array<string>}
*/
export function getSortedParticipantIds(stateful: Object | Function): Array<string> {
const { id } = getLocalParticipant(stateful);
const remoteParticipants = getRemoteParticipantsSorted(stateful);
const reorderedParticipants = new Set(remoteParticipants);
const raisedHandParticipants = getRaiseHandsQueue(stateful);
const remoteRaisedHandParticipants = new Set(raisedHandParticipants || []);
const dominantSpeaker = getDominantSpeakerParticipant(stateful);
for (const participant of remoteRaisedHandParticipants.keys()) {
// Avoid duplicates.
if (reorderedParticipants.has(participant)) {
reorderedParticipants.delete(participant);
} else {
remoteRaisedHandParticipants.delete(participant);
}
}
// Remove self.
remoteRaisedHandParticipants.delete(id);
const dominant = [];
// Remove dominant speaker.
if (dominantSpeaker && dominantSpeaker.id !== id) {
remoteRaisedHandParticipants.delete(dominantSpeaker.id);
reorderedParticipants.delete(dominantSpeaker.id);
dominant.push(dominantSpeaker.id);
}
// Move self and participants with raised hand to the top of the list.
return [
...dominant,
id,
...Array.from(remoteRaisedHandParticipants.keys()),
...Array.from(reorderedParticipants.keys())
];
}