@stream-io/video-react-sdk 1.10.6 → 1.11.1

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

@@ -1,5 +1,5 @@
-import { StreamVideoParticipant } from '@stream-io/video-client';
 import { ParticipantViewProps } from '../ParticipantView';
+import { ParticipantFilter, ParticipantPredicate } from './hooks';
 export type PaginatedGridLayoutProps = {
     /**
      * The number of participants to display per page.
@@ -11,9 +11,24 @@ export type PaginatedGridLayoutProps = {
      */
     excludeLocalParticipant?: boolean;
     /**
-     * Predicate to filter call participants.
+     * Predicate to filter call participants or a filter object.
+     * @example
+     * // With a predicate:
+     * <PaginatedGridLayout
+     *   filterParticipants={p => p.roles.includes('student')}
+     * />
+     * @example
+     * // With a filter object:
+     * <PaginatedGridLayout
+     *   filterParticipants={{
+     *     $or: [
+     *       { roles: { $contains: 'student' } },
+     *       { isPinned: true },
+     *     ],
+     *   }}
+     * />
      */
-    filterParticipants?: (participant: StreamVideoParticipant) => boolean;
+    filterParticipants?: ParticipantPredicate | ParticipantFilter;
     /**
      * When set to `false` disables mirroring of the local partipant's video.
      * @default true

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

@@ -1,5 +1,5 @@
-import { StreamVideoParticipant } from '@stream-io/video-client';
 import { ParticipantViewProps } from '../ParticipantView';
+import { ParticipantFilter, ParticipantPredicate } from './hooks';
 export type SpeakerLayoutProps = {
     /**
      * The UI to be used for the participant in the spotlight.
@@ -25,9 +25,24 @@ export type SpeakerLayoutProps = {
      */
     excludeLocalParticipant?: boolean;
     /**
-     * Predicate to filter call participants.
-     */
-    filterParticipants?: (participant: StreamVideoParticipant) => boolean;
+     * Predicate to filter call participants or a filter object.
+     * @example
+     * // With a predicate:
+     * <SpeakerLayout
+     *   filterParticipants={p => p.roles.includes('student')}
+     * />
+     * @example
+     * // With a filter object:
+     * <SpeakerLayout
+     *   filterParticipants={{
+     *     $or: [
+     *       { roles: { $contains: 'student' } },
+     *       { isPinned: true },
+     *     ],
+     *   }}
+     * />
+     */
+    filterParticipants?: ParticipantPredicate | ParticipantFilter;
     /**
      * When set to `false` disables mirroring of the local participant's video.
      * @default true

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

@@ -1,7 +1,14 @@
 import { Call, StreamVideoParticipant } from '@stream-io/video-client';
+import { Filter } from '../../../utilities/filter';
+export type FilterableParticipant = Pick<StreamVideoParticipant, 'userId' | 'isSpeaking' | 'isDominantSpeaker' | 'name' | 'roles'> & {
+    isPinned: boolean;
+};
+export type ParticipantFilter = Filter<FilterableParticipant>;
+export type ParticipantPredicate = (paritcipant: StreamVideoParticipant) => boolean;
 export declare const useFilteredParticipants: ({ excludeLocalParticipant, filterParticipants, }: {
     excludeLocalParticipant?: boolean;
-    filterParticipants?: (paritcipant: StreamVideoParticipant) => boolean;
+    filterParticipants?: ParticipantFilter | ParticipantPredicate;
 }) => StreamVideoParticipant[];
+export declare const applyParticipantsFilter: (participants: StreamVideoParticipant[], filter: ParticipantPredicate | ParticipantFilter) => StreamVideoParticipant[];
 export declare const usePaginatedLayoutSortPreset: (call: Call | undefined) => void;
 export declare const useSpeakerLayoutSortPreset: (call: Call | undefined, isOneOnOneCall: boolean) => void;

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

@@ -1,3 +1,4 @@
 export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';
+export type { FilterableParticipant, ParticipantFilter, ParticipantPredicate, } from './hooks';

package/dist/src/core/components/CallLayout/partcipantFilter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utilities/filter.d.ts

@@ -0,0 +1,26 @@
+export type Filter<T> = {
+    $and: Array<Filter<T>>;
+} | {
+    $or: Array<Filter<T>>;
+} | {
+    $not: Filter<T>;
+} | Conditions<T>;
+type Conditions<T> = {
+    [K in keyof T]?: T[K] extends Array<infer E> ? ArrayOperator<E> : ScalarOperator<T[K]>;
+};
+export type ScalarOperator<T> = EqOperator<T> | NeqOperator<T> | InOperator<T> | T;
+export type ArrayOperator<T> = ContainsOperator<T>;
+export type EqOperator<T> = {
+    $eq: T;
+};
+export type NeqOperator<T> = {
+    $neq: T;
+};
+export type InOperator<T> = {
+    $in: Array<T>;
+};
+export type ContainsOperator<T> = {
+    $contains: T;
+};
+export declare function applyFilter<T>(obj: T, filter: Filter<T>): boolean;
+export {};

package/dist/src/utilities/filter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.10.6",
+  "version": "1.11.1",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -31,9 +31,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@stream-io/video-client": "1.15.5",
+    "@stream-io/video-client": "1.15.7",
     "@stream-io/video-filters-web": "0.1.6",
-    "@stream-io/video-react-bindings": "1.4.5",
+    "@stream-io/video-react-bindings": "1.4.7",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"

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

@@ -11,7 +11,12 @@ import {
 import { ParticipantsAudio } from '../Audio';
 import { IconButton } from '../../../components';
 import { chunk } from '../../../utilities';
-import { useFilteredParticipants, usePaginatedLayoutSortPreset } from './hooks';
+import {
+  ParticipantFilter,
+  ParticipantPredicate,
+  useFilteredParticipants,
+  usePaginatedLayoutSortPreset,
+} from './hooks';
 
 const GROUP_SIZE = 16;
 
@@ -71,9 +76,24 @@ export type PaginatedGridLayoutProps = {
   excludeLocalParticipant?: boolean;
 
   /**
-   * Predicate to filter call participants.
+   * Predicate to filter call participants or a filter object.
+   * @example
+   * // With a predicate:
+   * <PaginatedGridLayout
+   *   filterParticipants={p => p.roles.includes('student')}
+   * />
+   * @example
+   * // With a filter object:
+   * <PaginatedGridLayout
+   *   filterParticipants={{
+   *     $or: [
+   *       { roles: { $contains: 'student' } },
+   *       { isPinned: true },
+   *     ],
+   *   }}
+   * />
    */
-  filterParticipants?: (participant: StreamVideoParticipant) => boolean;
+  filterParticipants?: ParticipantPredicate | ParticipantFilter;
 
   /**
    * When set to `false` disables mirroring of the local partipant's video.

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

@@ -1,9 +1,6 @@
 import { useEffect, useState } from 'react';
 import clsx from 'clsx';
-import {
-  hasScreenShare,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
+import { hasScreenShare } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 
 import {
@@ -16,7 +13,12 @@ import {
   useHorizontalScrollPosition,
   useVerticalScrollPosition,
 } from '../../../hooks';
-import { useFilteredParticipants, useSpeakerLayoutSortPreset } from './hooks';
+import {
+  ParticipantFilter,
+  ParticipantPredicate,
+  useFilteredParticipants,
+  useSpeakerLayoutSortPreset,
+} from './hooks';
 import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
 import { ParticipantsAudio } from '../Audio';
 
@@ -45,9 +47,24 @@ export type SpeakerLayoutProps = {
    */
   excludeLocalParticipant?: boolean;
   /**
-   * Predicate to filter call participants.
+   * Predicate to filter call participants or a filter object.
+   * @example
+   * // With a predicate:
+   * <SpeakerLayout
+   *   filterParticipants={p => p.roles.includes('student')}
+   * />
+   * @example
+   * // With a filter object:
+   * <SpeakerLayout
+   *   filterParticipants={{
+   *     $or: [
+   *       { roles: { $contains: 'student' } },
+   *       { isPinned: true },
+   *     ],
+   *   }}
+   * />
    */
-  filterParticipants?: (participant: StreamVideoParticipant) => boolean;
+  filterParticipants?: ParticipantPredicate | ParticipantFilter;
   /**
    * When set to `false` disables mirroring of the local participant's video.
    * @default true

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

@@ -5,19 +5,31 @@ import {
   combineComparators,
   Comparator,
   defaultSortPreset,
+  isPinned,
   paginatedLayoutSortPreset,
   screenSharing,
   speakerLayoutSortPreset,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { applyFilter, Filter } from '../../../utilities/filter';
+
+export type FilterableParticipant = Pick<
+  StreamVideoParticipant,
+  'userId' | 'isSpeaking' | 'isDominantSpeaker' | 'name' | 'roles'
+> & { isPinned: boolean };
+
+export type ParticipantFilter = Filter<FilterableParticipant>;
+export type ParticipantPredicate = (
+  paritcipant: StreamVideoParticipant,
+) => boolean;
 
 export const useFilteredParticipants = ({
   excludeLocalParticipant = false,
   filterParticipants,
 }: {
   excludeLocalParticipant?: boolean;
-  filterParticipants?: (paritcipant: StreamVideoParticipant) => boolean;
+  filterParticipants?: ParticipantFilter | ParticipantPredicate;
 }) => {
   const { useParticipants, useRemoteParticipants } = useCallStateHooks();
   const allParticipants = useParticipants();
@@ -26,10 +38,9 @@ export const useFilteredParticipants = ({
     const unfilteredParticipants = excludeLocalParticipant
       ? remoteParticipants
       : allParticipants;
+
     return filterParticipants
-      ? unfilteredParticipants.filter((participant) =>
-          filterParticipants(participant),
-        )
+      ? applyParticipantsFilter(unfilteredParticipants, filterParticipants)
       : unfilteredParticipants;
   }, [
     allParticipants,
@@ -39,6 +50,29 @@ export const useFilteredParticipants = ({
   ]);
 };
 
+export const applyParticipantsFilter = (
+  participants: StreamVideoParticipant[],
+  filter: ParticipantPredicate | ParticipantFilter,
+) => {
+  const filterCallback =
+    typeof filter === 'function'
+      ? filter
+      : (participant: StreamVideoParticipant) =>
+          applyFilter(
+            {
+              userId: participant.userId,
+              isSpeaking: participant.isSpeaking,
+              isDominantSpeaker: participant.isDominantSpeaker,
+              name: participant.name,
+              roles: participant.roles,
+              isPinned: isPinned(participant),
+            },
+            filter,
+          );
+
+  return participants.filter(filterCallback);
+};
+
 export const usePaginatedLayoutSortPreset = (call: Call | undefined) => {
   useEffect(() => {
     if (!call) return;

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

@@ -1,3 +1,8 @@
 export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';
+export type {
+  FilterableParticipant,
+  ParticipantFilter,
+  ParticipantPredicate,
+} from './hooks';

package/src/core/components/CallLayout/partcipantFilter.test.ts

@@ -0,0 +1,65 @@
+import { StreamVideoParticipant } from '@stream-io/video-client';
+import { test, type TestContext } from 'node:test';
+import { applyParticipantsFilter } from './hooks';
+
+const participants = [
+  {
+    userId: 'host-id',
+    isSpeaking: true,
+    isDominantSpeaker: true,
+    name: 'Host',
+    roles: ['host', 'admin'],
+  },
+  {
+    userId: 'listener-id-1',
+    isSpeaking: false,
+    isDominantSpeaker: false,
+    name: 'Listener 1',
+    roles: ['listener', 'user'],
+    pin: { pinnedAt: new Date() },
+  },
+  {
+    userId: 'listener-id-2',
+    isSpeaking: false,
+    isDominantSpeaker: false,
+    name: 'Listener 2',
+    roles: ['listener', 'user'],
+  },
+] as StreamVideoParticipant[];
+
+test('applies predicate filter', (t: TestContext) => {
+  const filtered = applyParticipantsFilter(participants, (p) =>
+    p.roles.includes('listener'),
+  );
+
+  t.assert.strictEqual(filtered.length, 2);
+  t.assert.deepStrictEqual(
+    filtered.map((p) => p.userId),
+    ['listener-id-1', 'listener-id-2'],
+  );
+});
+
+test('applies filter object', (t: TestContext) => {
+  const filtered = applyParticipantsFilter(participants, {
+    $and: [
+      { roles: { $contains: 'listener' } },
+      { $not: { roles: { $contains: 'host' } } },
+    ],
+  });
+
+  t.assert.strictEqual(filtered.length, 2);
+  t.assert.deepStrictEqual(
+    filtered.map((p) => p.userId),
+    ['listener-id-1', 'listener-id-2'],
+  );
+});
+
+test('filter object supports boolean pin property', (t: TestContext) => {
+  const filtered = applyParticipantsFilter(participants, {
+    roles: { $contains: 'listener' },
+    isPinned: true,
+  });
+
+  t.assert.strictEqual(filtered.length, 1);
+  t.assert.strictEqual(filtered[0].userId, 'listener-id-1');
+});

package/src/utilities/filter.test.ts

@@ -0,0 +1,119 @@
+import { test, type TestContext } from 'node:test';
+import { applyFilter } from './filter';
+
+const obj = {
+  num: 42,
+  str: 'hello, world',
+  array: ['apples', 'bananas'],
+};
+
+test('checks single $eq condition', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { num: { $eq: 42 } }));
+  t.assert.ok(!applyFilter(obj, { num: { $eq: 43 } }));
+});
+
+test('checks single $neq condition', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { num: { $neq: 43 } }));
+  t.assert.ok(!applyFilter(obj, { num: { $neq: 42 } }));
+});
+
+test('checks single $in condition', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { num: { $in: [41, 42, 43] } }));
+  t.assert.ok(!applyFilter(obj, { num: { $in: [1, 2, 3] } }));
+});
+
+test('checks single $contains condition', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { array: { $contains: 'apples' } }));
+  t.assert.ok(!applyFilter(obj, { array: { $contains: 'cherries' } }));
+});
+
+test('fails $contains condition if value is not array', (t: TestContext) => {
+  // This case is not permitted by types, but can still happen in runtime
+  t.assert.ok(!applyFilter(obj as any, { str: { $contains: 'apples' } }));
+});
+
+test('conditions without operator are treated as $eq', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { num: 42 }));
+  t.assert.ok(!applyFilter(obj, { num: 43 }));
+});
+
+test('checks multiple conditions', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { num: 42, array: { $contains: 'bananas' } }));
+  t.assert.ok(!applyFilter(obj, { num: 42, array: { $contains: 'cherries' } }));
+});
+
+test('applies $and filter', (t: TestContext) => {
+  t.assert.ok(
+    applyFilter(obj, {
+      $and: [
+        { num: 42, array: { $contains: 'bananas' } },
+        { str: 'hello, world', array: { $contains: 'apples' } },
+      ],
+    }),
+  );
+
+  t.assert.ok(
+    !applyFilter(obj, {
+      $and: [
+        { num: 42, array: { $contains: 'bananas' } },
+        { str: 'hello, world', array: { $contains: 'cherries' } },
+      ],
+    }),
+  );
+});
+
+test('applies $or filter', (t: TestContext) => {
+  t.assert.ok(
+    applyFilter(obj, {
+      $or: [
+        { str: 'hello, world', array: { $contains: 'cherries' } },
+        { num: 42, array: { $contains: 'bananas' } },
+      ],
+    }),
+  );
+
+  t.assert.ok(
+    !applyFilter(obj, {
+      $or: [
+        { str: 'hello, world', array: { $contains: 'cherries' } },
+        { num: 43, array: { $contains: 'bananas' } },
+      ],
+    }),
+  );
+});
+
+test('applies $not filter', (t: TestContext) => {
+  t.assert.ok(
+    applyFilter(obj, {
+      $not: { str: 'hello, world', array: { $contains: 'cherries' } },
+    }),
+  );
+});
+
+test('applies nested filters', (t: TestContext) => {
+  t.assert.ok(
+    applyFilter(obj, {
+      $or: [
+        { str: 'hello, world', array: { $contains: 'cherries' } },
+        { $and: [{ num: 42 }, { array: { $contains: 'bananas' } }] },
+      ],
+    }),
+  );
+
+  t.assert.ok(
+    applyFilter(obj, {
+      $not: {
+        $or: [
+          { str: 'hello, world', array: { $contains: 'cherries' } },
+          {
+            $and: [
+              { num: 42 },
+              { array: { $contains: 'bananas' } },
+              { str: 'bye, world' },
+            ],
+          },
+        ],
+      },
+    }),
+  );
+});

package/src/utilities/filter.ts

@@ -0,0 +1,79 @@
+export type Filter<T> =
+  | { $and: Array<Filter<T>> }
+  | { $or: Array<Filter<T>> }
+  | { $not: Filter<T> }
+  | Conditions<T>;
+
+type Conditions<T> = {
+  [K in keyof T]?: T[K] extends Array<infer E>
+    ? ArrayOperator<E>
+    : ScalarOperator<T[K]>;
+};
+
+export type ScalarOperator<T> =
+  | EqOperator<T>
+  | NeqOperator<T>
+  | InOperator<T>
+  | T;
+
+export type ArrayOperator<T> = ContainsOperator<T>;
+
+export type EqOperator<T> = { $eq: T };
+export type NeqOperator<T> = { $neq: T };
+export type InOperator<T> = { $in: Array<T> };
+export type ContainsOperator<T> = { $contains: T };
+
+export function applyFilter<T>(obj: T, filter: Filter<T>): boolean {
+  if ('$and' in filter) {
+    return filter.$and.every((f) => applyFilter(obj, f));
+  }
+
+  if ('$or' in filter) {
+    return filter.$or.some((f) => applyFilter(obj, f));
+  }
+
+  if ('$not' in filter) {
+    return !applyFilter(obj, filter.$not);
+  }
+
+  return checkConditions(obj, filter);
+}
+
+function checkConditions<T>(obj: T, conditions: Conditions<T>): boolean {
+  let match = true;
+
+  for (const key of Object.keys(conditions) as Array<keyof T>) {
+    const operator = conditions[key];
+    const maybeOperator = operator && typeof operator === 'object';
+    let value = obj[key];
+
+    if (maybeOperator && '$eq' in operator) {
+      const eqOperator = operator as EqOperator<typeof value>;
+      match &&= eqOperator.$eq === value;
+    } else if (maybeOperator && '$neq' in operator) {
+      const neqOperator = operator as NeqOperator<typeof value>;
+      match &&= neqOperator.$neq !== value;
+    } else if (maybeOperator && '$in' in operator) {
+      const inOperator = operator as InOperator<typeof value>;
+      match &&= inOperator.$in.includes(value);
+    } else if (maybeOperator && '$contains' in operator) {
+      if (Array.isArray(value)) {
+        const containsOperator = operator as ContainsOperator<
+          (typeof value)[number]
+        >;
+        match &&= value.includes(containsOperator.$contains);
+      } else {
+        match = false;
+      }
+    } else {
+      const eqValue = operator as typeof value;
+      match &&= eqValue === value;
+    }
+
+    if (!match) {
+      return false;
+    }
+  }
+
+  return true;
+}