@stream-io/video-react-sdk 1.7.30 → 1.8.0

package/dist/src/core/components/CallLayout/PaginatedGridLayout.d.ts

@@ -1,3 +1,4 @@
+import { StreamVideoParticipant } from '@stream-io/video-client';
 import { ParticipantViewProps } from '../ParticipantView';
 export type PaginatedGridLayoutProps = {
     /**
@@ -9,6 +10,10 @@ export type PaginatedGridLayoutProps = {
      * @default false
      */
     excludeLocalParticipant?: boolean;
+    /**
+     * Predicate to filter call participants.
+     */
+    filterParticipants?: (participant: StreamVideoParticipant) => boolean;
     /**
      * When set to `false` disables mirroring of the local partipant's video.
      * @default true

package/dist/src/core/components/CallLayout/SpeakerLayout.d.ts

@@ -1,3 +1,4 @@
+import { StreamVideoParticipant } from '@stream-io/video-client';
 import { ParticipantViewProps } from '../ParticipantView';
 export type SpeakerLayoutProps = {
     /**
@@ -23,6 +24,10 @@ export type SpeakerLayoutProps = {
      * @default false
      */
     excludeLocalParticipant?: boolean;
+    /**
+     * Predicate to filter call participants.
+     */
+    filterParticipants?: (participant: StreamVideoParticipant) => boolean;
     /**
      * When set to `false` disables mirroring of the local participant's video.
      * @default true
@@ -35,6 +40,6 @@ export type SpeakerLayoutProps = {
     pageArrowsVisible?: boolean;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
 export declare const SpeakerLayout: {
-    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, filterParticipants, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/dist/src/core/components/CallLayout/hooks.d.ts

@@ -1,3 +1,7 @@
-import { Call } from '@stream-io/video-client';
+import { Call, StreamVideoParticipant } from '@stream-io/video-client';
+export declare const useFilteredParticipants: ({ excludeLocalParticipant, filterParticipants, }: {
+    excludeLocalParticipant?: boolean;
+    filterParticipants?: (paritcipant: StreamVideoParticipant) => boolean;
+}) => StreamVideoParticipant[];
 export declare const usePaginatedLayoutSortPreset: (call: Call | undefined) => void;
 export declare const useSpeakerLayoutSortPreset: (call: Call | undefined, isOneOnOneCall: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.7.30",
+  "version": "1.8.0",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -32,9 +32,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@stream-io/video-client": "1.11.14",
+    "@stream-io/video-client": "1.11.15",
     "@stream-io/video-filters-web": "0.1.6",
-    "@stream-io/video-react-bindings": "1.2.8",
+    "@stream-io/video-react-bindings": "1.2.9",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -11,7 +11,7 @@ import {
 import { ParticipantsAudio } from '../Audio';
 import { IconButton } from '../../../components';
 import { chunk } from '../../../utilities';
-import { usePaginatedLayoutSortPreset } from './hooks';
+import { useFilteredParticipants, usePaginatedLayoutSortPreset } from './hooks';
 
 const GROUP_SIZE = 16;
 
@@ -70,6 +70,11 @@ export type PaginatedGridLayoutProps = {
    */
   excludeLocalParticipant?: boolean;
 
+  /**
+   * Predicate to filter call participants.
+   */
+  filterParticipants?: (participant: StreamVideoParticipant) => boolean;
+
   /**
    * When set to `false` disables mirroring of the local partipant's video.
    * @default true
@@ -89,6 +94,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
       ? props.groupSize || GROUP_SIZE
       : GROUP_SIZE,
     excludeLocalParticipant = false,
+    filterParticipants,
     mirrorLocalParticipantVideo = true,
     pageArrowsVisible = true,
     VideoPlaceholder,
@@ -101,9 +107,12 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
   ] = useState<HTMLDivElement | null>(null);
 
   const call = useCall();
-  const { useParticipants, useRemoteParticipants } = useCallStateHooks();
-  const participants = useParticipants();
+  const { useRemoteParticipants } = useCallStateHooks();
   const remoteParticipants = useRemoteParticipants();
+  const participants = useFilteredParticipants({
+    excludeLocalParticipant,
+    filterParticipants,
+  });
 
   usePaginatedLayoutSortPreset(call);
 
@@ -117,12 +126,8 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
 
   // only used to render video elements
   const participantGroups = useMemo(
-    () =>
-      chunk(
-        excludeLocalParticipant ? remoteParticipants : participants,
-        groupSize,
-      ),
-    [excludeLocalParticipant, remoteParticipants, participants, groupSize],
+    () => chunk(participants, groupSize),
+    [participants, groupSize],
   );
 
   const pageCount = participantGroups.length;

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useState } from 'react';
 import clsx from 'clsx';
-import { hasScreenShare } from '@stream-io/video-client';
+import {
+  hasScreenShare,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 
 import {
@@ -13,7 +16,7 @@ import {
   useHorizontalScrollPosition,
   useVerticalScrollPosition,
 } from '../../../hooks';
-import { useSpeakerLayoutSortPreset } from './hooks';
+import { useFilteredParticipants, useSpeakerLayoutSortPreset } from './hooks';
 import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
 import { ParticipantsAudio } from '../Audio';
 
@@ -41,6 +44,10 @@ export type SpeakerLayoutProps = {
    * @default false
    */
   excludeLocalParticipant?: boolean;
+  /**
+   * Predicate to filter call participants.
+   */
+  filterParticipants?: (participant: StreamVideoParticipant) => boolean;
   /**
    * When set to `false` disables mirroring of the local participant's video.
    * @default true
@@ -69,15 +76,15 @@ export const SpeakerLayout = ({
   participantsBarLimit,
   mirrorLocalParticipantVideo = true,
   excludeLocalParticipant = false,
+  filterParticipants,
   pageArrowsVisible = true,
 }: SpeakerLayoutProps) => {
   const call = useCall();
   const { useParticipants, useRemoteParticipants } = useCallStateHooks();
   const allParticipants = useParticipants();
   const remoteParticipants = useRemoteParticipants();
-  const [participantInSpotlight, ...otherParticipants] = excludeLocalParticipant
-    ? remoteParticipants
-    : allParticipants;
+  const [participantInSpotlight, ...otherParticipants] =
+    useFilteredParticipants({ excludeLocalParticipant, filterParticipants });
   const [participantsBarWrapperElement, setParticipantsBarWrapperElement] =
     useState<HTMLDivElement | null>(null);
   const [participantsBarElement, setParticipantsBarElement] =

package/src/core/components/CallLayout/hooks.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import {
   Call,
   CallTypes,
@@ -10,6 +10,34 @@ import {
   speakerLayoutSortPreset,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+
+export const useFilteredParticipants = ({
+  excludeLocalParticipant = false,
+  filterParticipants,
+}: {
+  excludeLocalParticipant?: boolean;
+  filterParticipants?: (paritcipant: StreamVideoParticipant) => boolean;
+}) => {
+  const { useParticipants, useRemoteParticipants } = useCallStateHooks();
+  const allParticipants = useParticipants();
+  const remoteParticipants = useRemoteParticipants();
+  return useMemo(() => {
+    const unfilteredParticipants = excludeLocalParticipant
+      ? remoteParticipants
+      : allParticipants;
+    return filterParticipants
+      ? unfilteredParticipants.filter((participant) =>
+          filterParticipants(participant),
+        )
+      : unfilteredParticipants;
+  }, [
+    allParticipants,
+    remoteParticipants,
+    excludeLocalParticipant,
+    filterParticipants,
+  ]);
+};
 
 export const usePaginatedLayoutSortPreset = (call: Call | undefined) => {
   useEffect(() => {