fix(video-layout):Screenshares not updated on time

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

@@ -1021,7 +1021,7 @@ function _mapStateToProps(state, ownProps): Object {
         _localFlipX: Boolean(localFlipX),
         _participant: participant,
         _raisedHand: hasRaisedHand(participant),
-        _videoObjectPosition: getVideoObjectPosition(state, participant.id),
+        _videoObjectPosition: getVideoObjectPosition(state, participant?.id),
         _videoTrack,
         ...size
     };

react/features/video-layout/middleware.any.js

@@ -1,6 +1,7 @@
 // @flow
 
 import { getCurrentConference } from '../base/conference';
+import { VIDEO_TYPE } from '../base/media';
 import {
     PARTICIPANT_LEFT,
     PIN_PARTICIPANT,
@@ -9,11 +10,12 @@ import {
     getPinnedParticipant
 } from '../base/participants';
 import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
+import { TRACK_REMOVED } from '../base/tracks';
 import { SET_DOCUMENT_EDITING_STATUS } from '../etherpad';
 import { isFollowMeActive } from '../follow-me';
 
 import { SET_TILE_VIEW } from './actionTypes';
-import { setTileView } from './actions';
+import { setRemoteParticipantsWithScreenShare, setTileView } from './actions';
 import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions';
 
 import './subscriber';
@@ -70,6 +72,32 @@ MiddlewareRegistry.register(store => next => action => {
         if (action.enabled && getPinnedParticipant(store)) {
             store.dispatch(pinParticipant(null));
         }
+        break;
+
+    // Update the remoteScreenShares.
+    // Because of the debounce in the subscriber which updates the remoteScreenShares we need to handle
+    // removal of screen shares separatelly here. Otherwise it is possible to have screen sharing
+    // participant that has already left in the remoteScreenShares array. This can lead to rendering
+    // a thumbnails for already left participants since the remoteScreenShares array is used for
+    // building the ordered list of remote participants.
+    case TRACK_REMOVED: {
+        const { jitsiTrack } = action.track;
+
+        if (jitsiTrack && jitsiTrack.isVideoTrack() && jitsiTrack.getVideoType() === VIDEO_TYPE.DESKTOP) {
+            const participantId = jitsiTrack.getParticipantId();
+            const oldScreenShares = store.getState()['features/video-layout'].remoteScreenShares || [];
+            const newScreenShares = oldScreenShares.filter(id => id !== participantId);
+
+            if (oldScreenShares.length !== newScreenShares.length) { // the participant was removed
+                store.dispatch(setRemoteParticipantsWithScreenShare(newScreenShares));
+
+                updateAutoPinnedParticipant(oldScreenShares, store);
+            }
+
+        }
+
+        break;
+    }
     }
 
     if (shouldUpdateAutoPin) {

react/features/video-layout/subscriber.js

@@ -16,6 +16,10 @@ import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions';
 StateListenerRegistry.register(
     /* selector */ state => state['features/base/tracks'],
     /* listener */ debounce((tracks, store) => {
+        // Because of the debounce we need to handle removal of screen shares in the middleware. Otherwise it is
+        // possible to have screen sharing participant that has already left in the remoteScreenShares array.
+        // This can lead to rendering a thumbnails for already left participants since the remoteScreenShares
+        // array is used for building the ordered list of remote participants.
         if (!getAutoPinSetting() || isFollowMeActive(store)) {
             return;
         }