From 9013b01df6b2a3dc726df60ce72a36b6b5eb7cf2 Mon Sep 17 00:00:00 2001 From: Jaya Allamsetty Date: Mon, 23 Aug 2021 18:39:09 -0400 Subject: [PATCH] fix(filmstrip): Always sort the participants alphabetically. Reorder the sub-groups (shares, speakers and rest of the participants) always on dominant speaker changes and when participants join or leave. --- react/features/base/participants/reducer.js | 40 ++++++++++++++------- react/features/filmstrip/functions.any.js | 18 ++++++---- react/features/filmstrip/reducer.js | 2 +- 3 files changed, 39 insertions(+), 21 deletions(-) diff --git a/react/features/base/participants/reducer.js b/react/features/base/participants/reducer.js index c7742a3a4..cfbef3a06 100644 --- a/react/features/base/participants/reducer.js +++ b/react/features/base/participants/reducer.js @@ -1,5 +1,6 @@ // @flow +import { SCREEN_SHARE_REMOTE_PARTICIPANTS_UPDATED } from '../../video-layout/actionTypes'; import { ReducerRegistry, set } from '../redux'; import { @@ -61,6 +62,7 @@ const DEFAULT_STATE = { pinnedParticipant: undefined, remote: new Map(), sortedRemoteParticipants: new Map(), + sortedRemoteScreenshares: new Map(), speakersList: new Map() }; @@ -96,26 +98,18 @@ ReducerRegistry.register('features/base/participants', (state = DEFAULT_STATE, a case DOMINANT_SPEAKER_CHANGED: { const { participant } = action; const { id, previousSpeakers = [] } = participant; - const { dominantSpeaker, local, speakersList } = state; + const { dominantSpeaker, local } = state; const newSpeakers = [ id, ...previousSpeakers ]; - const sortedSpeakersList = Array.from(speakersList); + const sortedSpeakersList = []; - // Update the speakers list. for (const speaker of newSpeakers) { - if (!state.speakersList.has(speaker) && speaker !== local?.id) { + if (speaker !== local?.id) { const remoteParticipant = state.remote.get(speaker); remoteParticipant && sortedSpeakersList.push([ speaker, _getDisplayName(remoteParticipant.name) ]); } } - // Also check if any of the existing speakers have been kicked off the list. - for (const existingSpeaker of sortedSpeakersList.keys()) { - if (!newSpeakers.find(s => s === existingSpeaker)) { - sortedSpeakersList.filter(sortedSpeaker => sortedSpeaker[0] !== existingSpeaker); - } - } - // Keep the remote speaker list sorted alphabetically. sortedSpeakersList.sort((a, b) => a[1].localeCompare(b[1])); @@ -324,6 +318,26 @@ ReducerRegistry.register('features/base/participants', (state = DEFAULT_STATE, a return { ...state }; } + case SCREEN_SHARE_REMOTE_PARTICIPANTS_UPDATED: { + const { participantIds } = action; + const sortedSharesList = []; + + for (const participant of participantIds) { + const remoteParticipant = state.remote.get(participant); + + if (remoteParticipant) { + const displayName = _getDisplayName(remoteParticipant.name); + + sortedSharesList.push([ participant, displayName ]); + } + } + + // Keep the remote screen share list sorted alphabetically. + sortedSharesList.length && sortedSharesList.sort((a, b) => a[1].localeCompare(b[1])); + state.sortedRemoteScreenshares = new Map(sortedSharesList); + + return { ...state }; + } } return state; @@ -335,7 +349,7 @@ ReducerRegistry.register('features/base/participants', (state = DEFAULT_STATE, a * @param {string} name - The display name of the participant. * @returns {string} */ - function _getDisplayName(name) { +function _getDisplayName(name) { return name ?? (typeof interfaceConfig === 'object' ? interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME : 'Fellow Jitser'); } @@ -468,7 +482,7 @@ function _participantJoined({ participant }) { * @param {*} value - The new value. * @returns {boolean} - True if a participant was updated and false otherwise. */ - function _updateParticipantProperty(state, id, property, value) { +function _updateParticipantProperty(state, id, property, value) { const { remote, local } = state; if (remote.has(id)) { diff --git a/react/features/filmstrip/functions.any.js b/react/features/filmstrip/functions.any.js index d64abe154..8d707c4db 100644 --- a/react/features/filmstrip/functions.any.js +++ b/react/features/filmstrip/functions.any.js @@ -10,7 +10,7 @@ import { setRemoteParticipants } from './actions'; * @returns {void} * @private */ - export function updateRemoteParticipants(store: Object, participantId: ?number) { +export function updateRemoteParticipants(store: Object, participantId: ?number) { const state = store.getState(); const { enableThumbnailReordering = true } = state['features/base/config']; let reorderedParticipants = []; @@ -26,14 +26,18 @@ import { setRemoteParticipants } from './actions'; return; } - const { fakeParticipants, sortedRemoteParticipants, speakersList } = state['features/base/participants']; - const { remoteScreenShares } = state['features/video-layout']; - const screenShares = (remoteScreenShares || []).slice(); - const speakers = new Map(speakersList); + const { + fakeParticipants, + sortedRemoteParticipants, + sortedRemoteScreenshares, + speakersList + } = state['features/base/participants']; const remoteParticipants = new Map(sortedRemoteParticipants); + const screenShares = new Map(sortedRemoteScreenshares); const sharedVideos = fakeParticipants ? Array.from(fakeParticipants.keys()) : []; + const speakers = new Map(speakersList); - for (const screenshare of screenShares) { + for (const screenshare of screenShares.keys()) { remoteParticipants.delete(screenshare); speakers.delete(screenshare); } @@ -47,7 +51,7 @@ import { setRemoteParticipants } from './actions'; // Always update the order of the thumnails. reorderedParticipants = [ - ...screenShares.reverse(), + ...Array.from(screenShares.keys()), ...sharedVideos, ...Array.from(speakers.keys()), ...Array.from(remoteParticipants.keys()) diff --git a/react/features/filmstrip/reducer.js b/react/features/filmstrip/reducer.js index 44d911ab9..9c8a5daae 100644 --- a/react/features/filmstrip/reducer.js +++ b/react/features/filmstrip/reducer.js @@ -123,7 +123,7 @@ ReducerRegistry.register( if (navigator.product !== 'ReactNative') { const { visibleParticipantsStartIndex: startIndex, visibleParticipantsEndIndex: endIndex } = state; - state.visibleRemoteParticipants = new Set(state.remoteParticipants.slice(startIndex, endIndex)); + state.visibleRemoteParticipants = new Set(state.remoteParticipants.slice(startIndex, endIndex + 1)); } return { ...state };