-
Notifications
You must be signed in to change notification settings - Fork 7.7k
fix(filmstrip) Ensures dominant speaker is always visible in filmstrip #16901
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
0f3ecff
2085a6e
7e5a14e
28164e3
64fa6a4
7760c4f
c2122ac
5844d3f
e8384d8
8897651
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,5 @@ | ||
| import { IReduxState, IStore } from '../app/types'; | ||
| import { | ||
| getActiveSpeakersToBeDisplayed, | ||
| getVirtualScreenshareParticipantOwnerId | ||
| } from '../base/participants/functions'; | ||
| import { getParticipantById, getVirtualScreenshareParticipantOwnerId } from '../base/participants/functions'; | ||
|
|
||
| import { setRemoteParticipants } from './actions'; | ||
| import { isFilmstripScrollVisible } from './functions'; | ||
|
|
@@ -33,44 +30,65 @@ export function updateRemoteParticipants(store: IStore, force?: boolean, partici | |
| } | ||
|
|
||
| const { | ||
| activeSpeakers, | ||
| dominantSpeaker, | ||
| fakeParticipants, | ||
| sortedRemoteParticipants | ||
| } = state['features/base/participants']; | ||
| const config = state['features/base/config']; | ||
| const defaultRemoteDisplayName = config?.defaultRemoteDisplayName ?? 'Fellow Jitster'; | ||
| const dominant = dominantSpeaker ? getParticipantById(state, dominantSpeaker) : undefined; | ||
| let dominantSpeakerSlot = 0; | ||
| const remoteParticipants = new Map(sortedRemoteParticipants); | ||
| const screenShareParticipants = sortedRemoteVirtualScreenshareParticipants | ||
| ? [ ...sortedRemoteVirtualScreenshareParticipants.keys() ] : []; | ||
| const sharedVideos = fakeParticipants ? Array.from(fakeParticipants.keys()) : []; | ||
| const speakers = getActiveSpeakersToBeDisplayed(state); | ||
| const speakers = new Array<string>(); | ||
| const { visibleRemoteParticipants } = state['features/filmstrip']; | ||
|
|
||
| for (const screenshare of screenShareParticipants) { | ||
| const participantsWithScreenShare = screenShareParticipants.reduce<string[]>((acc, screenshare) => { | ||
| const ownerId = getVirtualScreenshareParticipantOwnerId(screenshare); | ||
|
|
||
| acc.push(ownerId); | ||
| acc.push(screenshare); | ||
| remoteParticipants.delete(ownerId); | ||
| remoteParticipants.delete(screenshare); | ||
| speakers.delete(ownerId); | ||
| } | ||
| activeSpeakers.delete(ownerId); | ||
|
|
||
| return acc; | ||
| }, []); | ||
|
|
||
| for (const sharedVideo of sharedVideos) { | ||
| remoteParticipants.delete(sharedVideo); | ||
| } | ||
| for (const speaker of speakers.keys()) { | ||
| remoteParticipants.delete(speaker); | ||
| } | ||
|
|
||
| // Always update the order of the thubmnails. | ||
| const participantsWithScreenShare = screenShareParticipants.reduce<string[]>((acc, screenshare) => { | ||
| const ownerId = getVirtualScreenshareParticipantOwnerId(screenshare); | ||
|
|
||
| acc.push(ownerId); | ||
| acc.push(screenshare); | ||
| if (dominant && !dominant.local && participantsWithScreenShare.indexOf(dominant.id) === -1) { | ||
| dominantSpeakerSlot = 1; | ||
| remoteParticipants.delete(dominant.id); | ||
| speakers.push(dominant.id); | ||
| } | ||
|
|
||
| return acc; | ||
| }, []); | ||
| // Find the number of slots available for speakers. | ||
| const slotsForSpeakers | ||
| = visibleRemoteParticipants.size - (screenShareParticipants.length * 2) - sharedVideos.length - dominantSpeakerSlot; | ||
|
|
||
| // Construct the list of speakers to be shown. | ||
| if (slotsForSpeakers > 0) { | ||
| Array.from(activeSpeakers).slice(0, slotsForSpeakers).forEach((speakerId: string) => { | ||
| speakers.push(speakerId); | ||
| remoteParticipants.delete(speakerId); | ||
| }); | ||
|
Comment on lines
66
to
81
|
||
| speakers.sort((a: string, b: string) => { | ||
| return (getParticipantById(state, a)?.name ?? defaultRemoteDisplayName) | ||
| .localeCompare(getParticipantById(state, b)?.name ?? defaultRemoteDisplayName); | ||
| }); | ||
| } | ||
|
|
||
| // Always update the order of the thubmnails. | ||
jallamsetty1 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| reorderedParticipants = [ | ||
| ...participantsWithScreenShare, | ||
| ...sharedVideos, | ||
| ...Array.from(speakers.keys()), | ||
| ...speakers, | ||
| ...Array.from(remoteParticipants.keys()) | ||
| ]; | ||
|
|
||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.