fix(participant-pane) Do not show virtual SS as a separate participant.

react/features/e2ee/middleware.js

@@ -94,10 +94,14 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
     }
     case PARTICIPANT_JOINED: {
         const result = next(action);
-        const { e2eeEnabled, e2eeSupported, local } = action.participant;
+        const { e2eeEnabled, e2eeSupported, isVirtualScreenshareParticipant, local } = action.participant;
         const { everyoneEnabledE2EE } = getState()['features/e2ee'];
         const participantCount = getParticipantCount(getState);
 
+        if (isVirtualScreenshareParticipant) {
+            return result;
+        }
+
         // the initial values
         if (participantCount === 1) {
             batch(() => {
@@ -134,7 +138,11 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
         const participant = getParticipantById(previosState, action.participant?.id) || {};
         const result = next(action);
         const newState = getState();
-        const { e2eeEnabled = false, e2eeSupported = false } = participant;
+        const { e2eeEnabled = false, e2eeSupported = false, isVirtualScreenshareParticipant } = participant;
+
+        if (isVirtualScreenshareParticipant) {
+            return result;
+        }
 
         const { everyoneEnabledE2EE, everyoneSupportE2EE } = newState['features/e2ee'];
 

react/features/participants-pane/components/web/MeetingParticipants.js

@@ -11,6 +11,7 @@ import participantsPaneTheme from '../../../base/components/themes/participantsP
 import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
 import { MEDIA_TYPE } from '../../../base/media';
 import {
+    getParticipantById,
     getParticipantCountWithFake
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
@@ -150,7 +151,15 @@ function MeetingParticipants({
  * @returns {Props}
  */
 function _mapStateToProps(state): Object {
-    const sortedParticipantIds = getSortedParticipantIds(state);
+    let sortedParticipantIds = getSortedParticipantIds(state);
+
+    // Filter out the virtual screenshare participants since we do not want them to be displayed as separate
+    // participants in the participants pane.
+    sortedParticipantIds = sortedParticipantIds.filter(id => {
+        const participant = getParticipantById(state, id);
+
+        return !participant.isVirtualScreenshareParticipant;
+    });
 
     // This is very important as getRemoteParticipants is not changing its reference object
     // and we will not re-render on change, but if count changes we will do