fix: Fixes showing left participants in the pane under certain condit…

…ions.

Fixes #14491.
When a screensharing participant leaves and is unmuted or sharing the tab audio, there is a dominant speaker changed event which stores wrong values in filmstrip state. And because we skip reordering when there is no filmstrip scroll and no screensharers to avoid reordering on every dominant speaker event for small meetings, we fail to evaluate that the screensharere is actually gone and we still show it.
This will not happen if the one sharing is not dominant speaker (muted) or if there are more participants in the meeting (there is a scroll).

react/features/filmstrip/functions.any.ts

@@ -11,16 +11,17 @@ import { isFilmstripScrollVisible } from './functions';
  * Computes the reorderd list of the remote participants.
  *
  * @param {*} store - The redux store.
+ * @param {boolean} force - Does not short circuit, the execution, make execute all checks.
  * @param {string} participantId - The endpoint id of the participant that joined the call.
  * @returns {void}
  * @private
  */
-export function updateRemoteParticipants(store: IStore, participantId?: string) {
+export function updateRemoteParticipants(store: IStore, force?: boolean, participantId?: string) {
     const state = store.getState();
     let reorderedParticipants = [];
     const { sortedRemoteVirtualScreenshareParticipants } = state['features/base/participants'];
 
-    if (!isFilmstripScrollVisible(state) && !sortedRemoteVirtualScreenshareParticipants.size) {
+    if (!isFilmstripScrollVisible(state) && !sortedRemoteVirtualScreenshareParticipants.size && !force) {
         if (participantId) {
             const { remoteParticipants } = state['features/filmstrip'];
 

react/features/filmstrip/middleware.native.ts

@@ -28,7 +28,7 @@ MiddlewareRegistry.register(store => next => action => {
         store.dispatch(setTileViewDimensions());
         break;
     case PARTICIPANT_JOINED: {
-        updateRemoteParticipants(store, action.participant?.id);
+        updateRemoteParticipants(store, false, action.participant?.id);
         break;
     }
     }

react/features/filmstrip/middleware.web.ts

@@ -114,7 +114,7 @@ MiddlewareRegistry.register(store => next => action => {
             break;
         }
 
-        updateRemoteParticipants(store, action.participant?.id);
+        updateRemoteParticipants(store, false, action.participant?.id);
         break;
     }
     case SETTINGS_UPDATED: {

react/features/filmstrip/subscriber.any.ts

@@ -12,10 +12,13 @@ StateListenerRegistry.register(
 
 /**
  * Listens for changes to the remote screenshare participants to recompute the reordered list of the remote endpoints.
+ * We force updateRemoteParticipants to make sure it executes and for the case where
+ * sortedRemoteVirtualScreenshareParticipants becomes 0. We do not want to short circuit it in case of no screen-sharers
+ * and no scroll and triggered for dominant speaker changed.
  */
 StateListenerRegistry.register(
     /* selector */ state => state['features/base/participants'].sortedRemoteVirtualScreenshareParticipants,
-    /* listener */ (sortedRemoteVirtualScreenshareParticipants, store) => updateRemoteParticipants(store));
+    /* listener */ (sortedRemoteVirtualScreenshareParticipants, store) => updateRemoteParticipants(store, true));
 
 /**
  * Listens for changes to the dominant speaker to recompute the reordered list of the remote endpoints.