fix(multi-stream) support screenshare tile in stage filmstrip

react/features/base/participants/functions.js

@@ -92,6 +92,19 @@ export function getLocalParticipant(stateful: Object | Function) {
     return state.local;
 }
 
+/**
+ * Returns local screen share participant from Redux state.
+ *
+ * @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 {(Participant|undefined)}
+ */
+export function getLocalScreenShareParticipant(stateful: Object | Function) {
+    const state = toState(stateful)['features/base/participants'];
+
+    return state.localScreenShare;
+}
+
 /**
  * Normalizes a display name so then no invalid values (padding, length...etc)
  * can be set.

react/features/filmstrip/components/web/ThumbnailWrapper.js

@@ -116,6 +116,7 @@ class ThumbnailWrapper extends Component<Props> {
                     horizontalOffset = { _horizontalOffset }
                     key = 'localScreenShare'
                     participantID = { _participantID }
+                    stageFilmstrip = { _stageFilmstrip }
                     style = { style } />);
         }
 
@@ -169,13 +170,16 @@ function _mapStateToProps(state, ownProps) {
         const index = (rowIndex * columns) + columnIndex;
         let horizontalOffset;
         const { iAmRecorder } = state['features/base/config'];
-        let participantsLength = stageFilmstrip ? remoteParticipantsLength
-            : remoteParticipantsLength + (iAmRecorder ? 0 : 1) - (disableSelfView ? 1 : 0);
-
         const { localScreenShare } = state['features/base/participants'];
         const localParticipantsLength = localScreenShare ? 2 : 1;
 
-        if (sourceNameSignalingEnabled) {
+        let participantsLength;
+
+        if (stageFilmstrip) {
+            // We use the length of activeParticipants in stage filmstrip which includes local participants.
+            participantsLength = remoteParticipantsLength;
+        } else if (sourceNameSignalingEnabled) {
+            // We need to include the local screenshare participant in tile view.
             participantsLength = remoteParticipantsLength
 
             // Add local camera and screen share to total participant count when self view is not disabled.
@@ -183,6 +187,8 @@ function _mapStateToProps(state, ownProps) {
 
             // Removes iAmRecorder from the total participants count.
             - (iAmRecorder ? 1 : 0);
+        } else {
+            participantsLength = remoteParticipantsLength + (iAmRecorder ? 0 : 1) - (disableSelfView ? 1 : 0);
         }
 
         if (rowIndex === rows - 1) { // center the last row

react/features/filmstrip/middleware.web.js

@@ -5,6 +5,7 @@ import {
     DOMINANT_SPEAKER_CHANGED,
     getDominantSpeakerParticipant,
     getLocalParticipant,
+    getLocalScreenShareParticipant,
     PARTICIPANT_JOINED,
     PARTICIPANT_LEFT
 } from '../base/participants';
@@ -98,11 +99,16 @@ MiddlewareRegistry.register(store => next => action => {
         if (action.settings?.disableSelfView) {
             const state = store.getState();
             const local = getLocalParticipant(state);
+            const localScreenShare = getLocalScreenShareParticipant(state);
             const activeParticipantsIds = getActiveParticipantsIds(state);
 
             if (activeParticipantsIds.find(id => id === local.id)) {
                 store.dispatch(removeStageParticipant(local.id));
             }
+
+            if (activeParticipantsIds.find(id => id === localScreenShare.id)) {
+                store.dispatch(removeStageParticipant(localScreenShare.id));
+            }
         }
         break;
     }