@stream-io/video-react-sdk 1.21.3 → 1.23.0

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

@@ -8,11 +8,26 @@ export type Filter<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 ScalarOperator<T> = EqOperator<T> | NeqOperator<T> | InOperator<T> | GtOperator<T> | GteOperator<T> | LtOperator<T> | LteOperator<T> | T;
 export type ArrayOperator<T> = ContainsOperator<T>;
+export type AutocompleteOperator<T> = {
+    $autocomplete: T;
+};
 export type EqOperator<T> = {
     $eq: T;
 };
+export type GtOperator<T> = {
+    $gt: T;
+};
+export type GteOperator<T> = {
+    $gte: T;
+};
+export type LtOperator<T> = {
+    $lt: T;
+};
+export type LteOperator<T> = {
+    $lte: T;
+};
 export type NeqOperator<T> = {
     $neq: T;
 };

package/index.ts

@@ -15,6 +15,7 @@ export {
   usePersistedDevicePreferences,
   useDeviceList,
 } from './src/hooks';
+export { applyFilter, type Filter } from './src/utilities/filter';
 
 const [major, minor, patch] = (
   process.env.PKG_VERSION || '0.0.0-development'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.21.3",
+  "version": "1.23.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.31.0",
+    "@stream-io/video-client": "1.33.0",
     "@stream-io/video-filters-web": "0.2.2",
-    "@stream-io/video-react-bindings": "1.8.3",
+    "@stream-io/video-react-bindings": "1.9.0",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -45,7 +45,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@stream-io/audio-filters-web": "^0.4.3",
+    "@stream-io/audio-filters-web": "^0.5.0",
     "@stream-io/video-styling": "^1.5.1",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",

package/src/components/CallParticipantsList/CallParticipantsList.tsx

@@ -9,6 +9,7 @@ import {
   Restricted,
   useCall,
   useCallStateHooks,
+  useI18n,
 } from '@stream-io/video-react-bindings';
 import {
   name,
@@ -100,6 +101,7 @@ const CallParticipantListContentHeader = ({
   setUserListType: Dispatch<SetStateAction<keyof typeof UserListTypes>>;
 }) => {
   const call = useCall();
+  const { t } = useI18n();
 
   const muteAll = useCallback(() => {
     call?.muteAllUsers('audio');
@@ -113,7 +115,7 @@ const CallParticipantListContentHeader = ({
             requiredGrants={[OwnCapability.MUTE_USERS]}
             hasPermissionsOnly
           >
-            <TextButton onClick={muteAll}>Mute all</TextButton>
+            <TextButton onClick={muteAll}>{t('Mute all')}</TextButton>
           </Restricted>
         )}
       </div>

package/src/utilities/filter.test.ts

@@ -17,6 +17,26 @@ test('checks single $neq condition', (t: TestContext) => {
   t.assert.ok(!applyFilter(obj, { num: { $neq: 42 } }));
 });
 
+test('checks single $gt condition', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { num: { $gt: 41 } }));
+  t.assert.ok(!applyFilter(obj, { num: { $gt: 42 } }));
+});
+
+test('checks single $gte condition', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { num: { $gte: 42 } }));
+  t.assert.ok(!applyFilter(obj, { num: { $gte: 43 } }));
+});
+
+test('checks single $lt condition', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { num: { $lt: 43 } }));
+  t.assert.ok(!applyFilter(obj, { num: { $lt: 42 } }));
+});
+
+test('checks single $lte condition', (t: TestContext) => {
+  t.assert.ok(applyFilter(obj, { num: { $lte: 42 } }));
+  t.assert.ok(!applyFilter(obj, { num: { $lte: 41 } }));
+});
+
 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] } }));

package/src/utilities/filter.ts

@@ -14,11 +14,20 @@ export type ScalarOperator<T> =
   | EqOperator<T>
   | NeqOperator<T>
   | InOperator<T>
+  | GtOperator<T>
+  | GteOperator<T>
+  | LtOperator<T>
+  | LteOperator<T>
   | T;
 
 export type ArrayOperator<T> = ContainsOperator<T>;
 
+export type AutocompleteOperator<T> = { $autocomplete: T };
 export type EqOperator<T> = { $eq: T };
+export type GtOperator<T> = { $gt: T };
+export type GteOperator<T> = { $gte: T };
+export type LtOperator<T> = { $lt: T };
+export type LteOperator<T> = { $lte: T };
 export type NeqOperator<T> = { $neq: T };
 export type InOperator<T> = { $in: Array<T> };
 export type ContainsOperator<T> = { $contains: T };
@@ -39,17 +48,33 @@ export function applyFilter<T>(obj: T, filter: Filter<T>): boolean {
   return checkConditions(obj, filter);
 }
 
+type DateString = string;
+const isDateString = (value: unknown): value is DateString =>
+  typeof value === 'string' &&
+  /^((?:(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2}(?:\.\d+)?))(Z|[+-]\d{2}:\d{2})?)$/.test(
+    value,
+  );
+
 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';
-    const value = obj[key];
+    let value: T[keyof T] | number = obj[key];
+
+    if (value instanceof Date) {
+      value = value.getTime();
+    } else if (isDateString(value)) {
+      value = new Date(value).getTime();
+    }
 
     if (maybeOperator && '$eq' in operator) {
       const eqOperator = operator as EqOperator<typeof value>;
-      match &&= eqOperator.$eq === value;
+      const eqOperatorValue = isDateString(eqOperator.$eq)
+        ? new Date(eqOperator.$eq).getTime()
+        : eqOperator.$eq;
+      match &&= eqOperatorValue === value;
     } else if (maybeOperator && '$neq' in operator) {
       const neqOperator = operator as NeqOperator<typeof value>;
       match &&= neqOperator.$neq !== value;
@@ -65,6 +90,33 @@ function checkConditions<T>(obj: T, conditions: Conditions<T>): boolean {
       } else {
         match = false;
       }
+    } else if (maybeOperator && '$gt' in operator) {
+      const gtOperator = operator as GtOperator<typeof value>;
+      const gtOperatorValue = isDateString(gtOperator.$gt)
+        ? new Date(gtOperator.$gt).getTime()
+        : gtOperator.$gt;
+      match &&= value > gtOperatorValue;
+    } else if (maybeOperator && '$gte' in operator) {
+      const gteOperator = operator as GteOperator<typeof value>;
+      const gteOperatorValue = isDateString(gteOperator.$gte)
+        ? new Date(gteOperator.$gte).getTime()
+        : gteOperator.$gte;
+      match &&= value >= gteOperatorValue;
+    } else if (maybeOperator && '$lt' in operator) {
+      const ltOperator = operator as LtOperator<typeof value>;
+      const ltOperatorValue = isDateString(ltOperator.$lt)
+        ? new Date(ltOperator.$lt).getTime()
+        : ltOperator.$lt;
+      match &&= value < ltOperatorValue;
+    } else if (maybeOperator && '$lte' in operator) {
+      const lteOperator = operator as LteOperator<typeof value>;
+      const lteOperatorValue = isDateString(lteOperator.$lte)
+        ? new Date(lteOperator.$lte).getTime()
+        : lteOperator.$lte;
+      match &&= value <= lteOperatorValue;
+      // } else if (maybeOperator && '$autocomplete' in operator) {
+      // TODO: regexp solution maybe?
+      // match &&= false;
     } else {
       const eqValue = operator as typeof value;
       match &&= eqValue === value;