Refactor VideoGallery organizing logic (again) (#5121)

* Refactor video gallery's participant organizing logic

* Refactor video gallery's participant organizing logic part 2

* Refactor video gallery's participant organizing logic part 3

* rename variables

packages/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts

@@ -47,19 +47,27 @@ const getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedPa
     dominantSpeakers = [],
     maxGridParticipants = DEFAULT_MAX_VIDEO_SREAMS,
     maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS,
-    isScreenShareActive = false,
     layout,
     previousGridParticipants = [],
     previousOverflowParticipants = []
   } = props;
 
-  const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
+  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+  const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' || 'Ringing'));
+  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
+
+  let connectedParticipants = remoteParticipants;
+  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+  connectedParticipants = connectedParticipants.filter((p) => !callingParticipantsSet.has(p.userId));
+
+  const remoteParticipantsOrdered = putVideoParticipantsFirst(connectedParticipants);
   const videoParticipants = remoteParticipants.filter((p) => p.videoStream?.isAvailable);
-  const participants =
+  const participantsForGrid =
     layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;
 
   let newGridParticipants = smartDominantSpeakerParticipants({
-    participants: participants,
+    participants: participantsForGrid,
     dominantSpeakers,
     currentParticipants: previousGridParticipants,
     maxDominantSpeakers: maxGridParticipants
@@ -78,39 +86,21 @@ const getOrganizedParticipants = (props: OrganizedParticipantsArgs): OrganizedPa
 
   const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));
 
-  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-  const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' || 'Ringing'));
-  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-  const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
-
   const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({
-    participants: remoteParticipantsOrdered.filter(
-      (p) =>
-        !gridParticipantSet.has(p.userId) &&
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(
-          p.userId
-        )
-    ),
+    participants: remoteParticipantsOrdered.filter((p) => !gridParticipantSet.has(p.userId)),
     dominantSpeakers: dominantSpeakers,
     currentParticipants: previousOverflowParticipants,
     maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
   });
 
-  const gridParticipants = getGridParticipants({
-    isScreenShareActive,
-    gridParticipants: newGridParticipants,
-    overflowGalleryParticipants: newOverflowGalleryParticipants,
-    maxGridParticipants: maxGridParticipants,
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
-  });
-
-  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({
-    isScreenShareActive,
-    gridParticipants: newGridParticipants,
-    overflowGalleryParticipants: newOverflowGalleryParticipants,
-    maxGridParticipants: maxGridParticipants,
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
-  });
+  let gridParticipants = newGridParticipants;
+  let overflowGalleryParticipants = newOverflowGalleryParticipants;
+  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+  if (gridParticipants.length + callingParticipants.length <= maxGridParticipants) {
+    gridParticipants = gridParticipants.concat(callingParticipants);
+  } else {
+    overflowGalleryParticipants = overflowGalleryParticipants.concat(callingParticipants);
+  }
 
   return { gridParticipants, overflowGalleryParticipants };
 };
@@ -147,7 +137,7 @@ export const useOrganizedParticipants = (props: OrganizedParticipantsArgs): Orga
 
   const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
 
-  const useOrganizedParticipantsProps: OrganizedParticipantsArgs = {
+  const organizedParticipantsArgs: OrganizedParticipantsArgs = {
     ...props,
     // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0
     maxGridParticipants: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxGridParticipants,
@@ -156,72 +146,19 @@ export const useOrganizedParticipants = (props: OrganizedParticipantsArgs): Orga
     previousOverflowParticipants: currentOverflowGalleryParticipants.current
   };
 
-  const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);
+  const organizedParticipants = getOrganizedParticipants(organizedParticipantsArgs);
 
-  currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;
-  currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;
+  currentGridParticipants.current = organizedParticipants.gridParticipants;
+  currentOverflowGalleryParticipants.current = organizedParticipants.overflowGalleryParticipants;
 
   return focusedParticipants.length > 0
     ? {
         gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
         overflowGalleryParticipants: props.isScreenShareActive
-          ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
-          : useOrganizedParticipantsResult.overflowGalleryParticipants
+          ? focusedParticipants.concat(organizedParticipants.overflowGalleryParticipants)
+          : organizedParticipants.overflowGalleryParticipants
       }
-    : useOrganizedParticipantsResult;
-};
-
-const getGridParticipants = (args: {
-  isScreenShareActive: boolean;
-  gridParticipants: VideoGalleryParticipant[];
-  overflowGalleryParticipants: VideoGalleryParticipant[];
-  maxGridParticipants: number;
-  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];
-}): VideoGalleryRemoteParticipant[] => {
-  if (args.isScreenShareActive) {
-    return [];
-  }
-  // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
-  // we will use the max streams provided to the function to find the max participants that can go in the grid
-  // if there are less participants than max streams then we will use all participants including joining in the grid
-  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-  return args.gridParticipants.length > 0
-    ? args.gridParticipants
-    : args.overflowGalleryParticipants.length > args.maxGridParticipants
-      ? args.overflowGalleryParticipants.slice(0, args.maxGridParticipants)
-      : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants).concat(args.callingParticipants);
-  return args.gridParticipants.length > 0
-    ? args.gridParticipants
-    : args.overflowGalleryParticipants.slice(0, args.maxGridParticipants);
-};
-
-const getOverflowGalleryRemoteParticipants = (args: {
-  isScreenShareActive: boolean;
-  gridParticipants: VideoGalleryParticipant[];
-  overflowGalleryParticipants: VideoGalleryParticipant[];
-  maxGridParticipants: number;
-  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants: VideoGalleryParticipant[];
-}): VideoGalleryRemoteParticipant[] => {
-  if (args.isScreenShareActive) {
-    // If screen sharing is active, assign video and audio participants as overflow gallery participants
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    return args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));
-    return args.gridParticipants.concat(args.overflowGalleryParticipants);
-  } else {
-    // If screen sharing is not active, then assign all video tiles as grid tiles.
-    // If there are no video tiles, then assign audio tiles as grid tiles.
-    // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
-    // overflow should be empty if total participants including calling participants is less than max streams
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    return args.gridParticipants.length > 0
-      ? args.overflowGalleryParticipants.concat(args.callingParticipants)
-      : args.overflowGalleryParticipants.length > args.maxGridParticipants
-        ? args.overflowGalleryParticipants.slice(args.maxGridParticipants).concat(args.callingParticipants)
-        : [];
-    return args.gridParticipants.length > 0
-      ? args.overflowGalleryParticipants
-      : args.overflowGalleryParticipants.slice(args.maxGridParticipants);
-  }
+    : organizedParticipants;
 };
 
 const putVideoParticipantsFirst = (