fix(video-layout) Possibly fixes auto-pinning of SS in a large call.

When a user joins a very large call with SS, sometime SS is not auto-pinned to stage. This may happen when lot of participant joins are processed at the same time and therefore the state for remoteScreenShares may not get updated in time. Added extra logging to help debug if this issue reproduces.

Author: jallamsetty1

react/features/base/participants/reducer.ts

@@ -27,6 +27,7 @@ import {
     isRemoteScreenshareParticipant,
     isScreenShareParticipant
 } from './functions';
+import logger from './logger';
 import { FakeParticipant, ILocalParticipant, IParticipant, ISourceInfo } from './types';
 
 /**
@@ -352,6 +353,8 @@ ReducerRegistry.register<IParticipantsState>('features/base/participants',
             sortedRemoteVirtualScreenshareParticipants.sort((a, b) => a[1].localeCompare(b[1]));
 
             state.sortedRemoteVirtualScreenshareParticipants = new Map(sortedRemoteVirtualScreenshareParticipants);
+
+            logger.debug('Remote screenshare participant joined', id);
         }
 
         // Exclude the screenshare participant from the fake participant count to avoid duplicates.
@@ -436,6 +439,8 @@ ReducerRegistry.register<IParticipantsState>('features/base/participants',
         if (sortedRemoteVirtualScreenshareParticipants.has(id)) {
             sortedRemoteVirtualScreenshareParticipants.delete(id);
             state.sortedRemoteVirtualScreenshareParticipants = new Map(sortedRemoteVirtualScreenshareParticipants);
+
+            logger.debug('Remote screenshare participant left', id);
         }
 
         if (oldParticipant && !oldParticipant.fakeParticipant && !isLocalScreenShare) {

react/features/base/participants/subscriber.ts

@@ -21,6 +21,7 @@ import {
     getRemoteScreensharesBasedOnPresence,
     getVirtualScreenshareParticipantOwnerId
 } from './functions';
+import logger from './logger';
 import { FakeParticipant } from './types';
 
 StateListenerRegistry.register(
@@ -69,14 +70,19 @@ function _createOrRemoveVirtualParticipants(
     const addedScreenshareSourceNames = difference(newScreenshareSourceNames, oldScreenshareSourceNames);
 
     if (removedScreenshareSourceNames.length) {
-        removedScreenshareSourceNames.forEach(id => dispatch(participantLeft(id, conference, {
-            fakeParticipant: FakeParticipant.RemoteScreenShare
-        })));
+        removedScreenshareSourceNames.forEach(id => {
+            logger.debug('Dispatching participantLeft for virtual screenshare', id);
+            dispatch(participantLeft(id, conference, {
+                fakeParticipant: FakeParticipant.RemoteScreenShare
+            }));
+        });
     }
 
     if (addedScreenshareSourceNames.length) {
-        addedScreenshareSourceNames.forEach(id => dispatch(
-            createVirtualScreenshareParticipant(id, false, conference)));
+        addedScreenshareSourceNames.forEach(id => {
+            logger.debug('Creating virtual screenshare participant', id);
+            dispatch(createVirtualScreenshareParticipant(id, false, conference));
+        });
     }
 }
 

react/features/video-layout/functions.any.ts

@@ -11,6 +11,7 @@ import { getReceiverVideoQualityLevel } from '../video-quality/functions';
 import { getMinHeightForQualityLvlMap } from '../video-quality/selector';
 
 import { LAYOUTS } from './constants';
+import logger from './logger';
 
 /**
  * A selector for retrieving the current automatic pinning setting.
@@ -113,39 +114,49 @@ export function shouldDisplayTileView(state: IReduxState) {
  * Private helper to automatically pin the latest screen share stream or unpin
  * if there are no more screen share streams.
  *
- * @param {Array<string>} screenShares - Array containing the list of all the screen sharing endpoints
+ * @param {Array<string>} previousScreenShares - Array containing the list of all the screen sharing endpoints
  * before the update was triggered (including the ones that have been removed from redux because of the update).
+ * @param {Array<string>} currentScreenShares - Array containing the current list of screen sharing endpoints.
  * @param {Store} store - The redux store.
  * @returns {void}
  */
 export function updateAutoPinnedParticipant(
-        screenShares: Array<string>, { dispatch, getState }: IStore) {
-    const state = getState();
-    const remoteScreenShares = state['features/video-layout'].remoteScreenShares;
+        previousScreenShares: Array<string>,
+        currentScreenShares: Array<string>,
+        { dispatch, getState }: IStore) {
     const pinned = getPinnedParticipant(getState);
 
     // if the pinned participant is shared video or some other fake participant we want to skip auto-pinning
     if (pinned?.fakeParticipant && pinned.fakeParticipant !== FakeParticipant.RemoteScreenShare) {
+        logger.debug('Skipping auto-pin: pinned participant is non-screenshare virtual participant', pinned.id);
+
         return;
     }
 
     // Unpin the screen share when the screen sharing participant leaves. Switch to tile view if no other
     // participant was pinned before screen share was auto-pinned, pin the previously pinned participant otherwise.
-    if (!remoteScreenShares?.length) {
+    if (!currentScreenShares?.length) {
         let participantId = null;
 
-        if (pinned && !screenShares.find(share => share === pinned.id)) {
+        if (pinned && !previousScreenShares.find((share: string) => share === pinned.id)) {
             participantId = pinned.id;
         }
+
+        logger.debug('No more screenshares, unpinning or restoring previous pin', participantId);
         dispatch(pinParticipant(participantId));
 
         return;
     }
 
-    const latestScreenShareParticipantId = remoteScreenShares[remoteScreenShares.length - 1];
+    const latestScreenShareParticipantId = currentScreenShares[currentScreenShares.length - 1];
 
     if (latestScreenShareParticipantId) {
-        dispatch(pinParticipant(latestScreenShareParticipantId));
+        const alreadyPinned = pinned?.id === latestScreenShareParticipantId;
+
+        if (!alreadyPinned) {
+            logger.debug(`Auto pinning latest screen share participant: ${latestScreenShareParticipantId}`);
+            dispatch(pinParticipant(latestScreenShareParticipantId));
+        }
     }
 }
 

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

@@ -12,7 +12,7 @@ import { isFollowMeActive } from '../follow-me/functions';
 import { SET_TILE_VIEW } from './actionTypes';
 import { setTileView } from './actions';
 import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions';
-
+import logger from './logger';
 import './subscriber';
 
 let previousTileViewEnabled: boolean | undefined;
@@ -27,13 +27,21 @@ MiddlewareRegistry.register(store => next => action => {
 
     // we want to extract the leaving participant and check its type before actually the participant being removed.
     let shouldUpdateAutoPin = false;
+    let oldScreenShares: Array<string> = [];
 
     switch (action.type) {
     case PARTICIPANT_LEFT: {
         if (!getAutoPinSetting() || isFollowMeActive(store)) {
+            logger.debug('Auto pinning is disabled or Follow Me is active, skipping auto pinning.');
+
             break;
         }
         shouldUpdateAutoPin = Boolean(getParticipantById(store.getState(), action.participant.id)?.fakeParticipant);
+
+        if (shouldUpdateAutoPin) {
+            // Capture the old screenshare list before the reducer runs
+            oldScreenShares = store.getState()['features/video-layout'].remoteScreenShares || [];
+        }
         break;
     }
     }
@@ -75,9 +83,9 @@ MiddlewareRegistry.register(store => next => action => {
     }
 
     if (shouldUpdateAutoPin) {
-        const screenShares = store.getState()['features/video-layout'].remoteScreenShares || [];
+        const newScreenShares = store.getState()['features/video-layout'].remoteScreenShares || [];
 
-        updateAutoPinnedParticipant(screenShares, store);
+        updateAutoPinnedParticipant(oldScreenShares, newScreenShares, store);
     }
 
     return result;

react/features/video-layout/subscriber.ts

@@ -4,6 +4,7 @@ import { isFollowMeActive } from '../follow-me/functions';
 
 import { virtualScreenshareParticipantsUpdated } from './actions';
 import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions';
+import logger from './logger';
 
 StateListenerRegistry.register(
     /* selector */ state => state['features/base/participants'].sortedRemoteVirtualScreenshareParticipants,
@@ -22,14 +23,18 @@ StateListenerRegistry.register(
         knownSharingParticipantIds.forEach(participantId => {
             if (!newScreenSharesOrder.includes(participantId)) {
                 newScreenSharesOrder.push(participantId);
+                logger.debug('Adding new screenshare to list', participantId);
             }
         });
 
         if (!equals(oldScreenSharesOrder, newScreenSharesOrder)) {
+            logger.debug('Screenshare order changed, dispatching update');
             store.dispatch(virtualScreenshareParticipantsUpdated(newScreenSharesOrder));
 
             if (getAutoPinSetting() && !isFollowMeActive(store)) {
-                updateAutoPinnedParticipant(oldScreenSharesOrder, store);
+                updateAutoPinnedParticipant(oldScreenSharesOrder, newScreenSharesOrder, store);
+            } else {
+                logger.debug('Auto pinning is disabled or Follow Me is active, skipping auto pinning of screenshare.');
             }
         }
     });