fix: sorting in paginated grid (#1129)

Sort dominant speakers only when their visibility state is unknown or invisible (UNKNOWN in this case).
GetStream · Oct 9, 2023 · d5b280a · d5b280a
1 parent 9dcbe23
commit d5b280a
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 27 deletions.
diff --git a/packages/client/src/sorting/__tests__/presets.test.ts b/packages/client/src/sorting/__tests__/presets.test.ts
@@ -14,41 +14,50 @@ describe('presets', () => {
       },
     }));
 
-    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name)).toEqual([
-      'F',
-      'B',
-      'E',
-      'D',
-      'A',
-      'C',
-    ]);
+    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name))
+      .toMatchInlineSnapshot(`
+      [
+        "F",
+        "D",
+        "A",
+        "B",
+        "C",
+        "E",
+      ]
+    `);
 
     // server-pin C
     ps.at(-1)!.pin = {
       isLocalPin: false,
       pinnedAt: Date.now(),
     };
 
-    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name)).toEqual([
-      'C',
-      'F',
-      'B',
-      'E',
-      'D',
-      'A',
-    ]);
+    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name))
+      .toMatchInlineSnapshot(`
+      [
+        "E",
+        "F",
+        "D",
+        "A",
+        "B",
+        "C",
+      ]
+    `);
 
     ps.at(-3)!.publishedTracks = [TrackType.AUDIO]; // E
     ps.at(-2)!.isDominantSpeaker = false; // D
     ps.at(-1)!.isDominantSpeaker = true; // A
 
-    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name)).toEqual([
-      'C',
-      'F',
-      'B',
-      'A',
-      'E',
-      'D',
-    ]);
+    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name))
+      .toMatchInlineSnapshot(`
+      [
+        "E",
+        "F",
+        "D",
+        "C",
+        "B",
+        "A",
+      ]
+    `);
   });
 });
diff --git a/packages/client/src/sorting/presets.ts b/packages/client/src/sorting/presets.ts
@@ -67,8 +67,7 @@ export const speakerLayoutSortPreset = combineComparators(
  */
 export const paginatedLayoutSortPreset = combineComparators(
   pinned,
-  screenSharing,
-  dominantSpeaker,
+  ifInvisibleOrUnknownBy(dominantSpeaker),
   ifInvisibleOrUnknownBy(speaking),
   ifInvisibleOrUnknownBy(reactionType('raised-hand')),
   ifInvisibleOrUnknownBy(publishingVideo),

diff --git a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
@@ -79,6 +79,10 @@ export const PaginatedGridLayout = ({
   ParticipantViewUI = DefaultParticipantViewUI,
 }: PaginatedGridLayoutProps) => {
   const [page, setPage] = useState(0);
+  const [
+    paginatedGridLayoutWrapperElement,
+    setPaginatedGridLayoutWrapperElement,
+  ] = useState<HTMLDivElement | null>(null);
 
   const call = useCall();
   const { useParticipants, useRemoteParticipants } = useCallStateHooks();
@@ -88,6 +92,14 @@ export const PaginatedGridLayout = ({
 
   usePaginatedLayoutSortPreset(call);
 
+  useEffect(() => {
+    if (!paginatedGridLayoutWrapperElement || !call) return;
+
+    const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);
+
+    return () => cleanup();
+  }, [paginatedGridLayoutWrapperElement, call]);
+
   // only used to render video elements
   const participantGroups = useMemo(
     () =>
@@ -112,7 +124,10 @@ export const PaginatedGridLayout = ({
   if (!call) return null;
 
   return (
-    <div className="str-video__paginated-grid-layout__wrapper">
+    <div
+      className="str-video__paginated-grid-layout__wrapper"
+      ref={setPaginatedGridLayoutWrapperElement}
+    >
       <ParticipantsAudio participants={remoteParticipants} />
       <div className="str-video__paginated-grid-layout">
         {pageArrowsVisible && pageCount > 1 && (

diff --git a/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx
@@ -72,6 +72,7 @@ export const SpeakerLayout = ({
     if (!participantsBarWrapperElement || !call) return;
 
     const cleanup = call.setViewport(participantsBarWrapperElement);
+
     return () => cleanup();
   }, [participantsBarWrapperElement, call]);