@stream-io/video-react-sdk 1.19.8 → 1.20.0

package/dist/src/components/Search/hooks/useSearch.d.ts

@@ -8,7 +8,7 @@ export type UseSearchParams<T> = {
     /** Search function performing the search request */
     searchFn: (searchQuery: string) => Promise<T[]>;
     /** Debounce interval applied to the search function */
-    debounceInterval: number;
+    debounceInterval?: number;
     /** Search query string */
     searchQuery?: string;
 };

package/dist/src/translations/index.d.ts

@@ -65,6 +65,7 @@ export declare const translations: {
         "Pin for everyone": string;
         "Unpin for everyone": string;
         Block: string;
+        Kick: string;
         "Turn off video": string;
         "Turn off screen share": string;
         "Mute audio": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.19.8",
+  "version": "1.20.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.27.5",
+    "@stream-io/video-client": "1.28.0",
     "@stream-io/video-filters-web": "0.2.1",
-    "@stream-io/video-react-bindings": "1.7.14",
+    "@stream-io/video-react-bindings": "1.7.15",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -46,7 +46,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
     "@stream-io/audio-filters-web": "^0.4.3",
-    "@stream-io/video-styling": "^1.4.0",
+    "@stream-io/video-styling": "^1.5.0",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "react": "19.0.0",

package/src/components/CallParticipantsList/CallParticipantsList.tsx

@@ -47,8 +47,6 @@ const UserListTypes = {
   blocked: 'Blocked users',
 } as const;
 
-const DEFAULT_DEBOUNCE_SEARCH_INTERVAL = 200 as const;
-
 export const CallParticipantsList = ({
   onClose,
   activeUsersSearchFn,
@@ -103,9 +101,9 @@ const CallParticipantListContentHeader = ({
 }) => {
   const call = useCall();
 
-  const muteAll = () => {
+  const muteAll = useCallback(() => {
     call?.muteAllUsers('audio');
-  };
+  }, [call]);
 
   return (
     <div className="str-video__participant-list__content-header">
@@ -141,7 +139,7 @@ const CallParticipantListContentHeader = ({
 const ActiveUsersSearchResults = ({
   searchQuery,
   activeUsersSearchFn: activeUsersSearchFnFromProps,
-  debounceSearchInterval = DEFAULT_DEBOUNCE_SEARCH_INTERVAL,
+  debounceSearchInterval,
 }: Pick<
   CallParticipantListProps,
   'activeUsersSearchFn' | 'debounceSearchInterval'
@@ -150,23 +148,18 @@ const ActiveUsersSearchResults = ({
   const participants = useParticipants({ sortBy: name });
 
   const activeUsersSearchFn = useCallback(
-    (queryString: string) => {
+    async (queryString: string) => {
       const queryRegExp = new RegExp(queryString, 'i');
-      return Promise.resolve(
-        participants.filter((participant) => {
-          return participant.name.match(queryRegExp);
-        }),
-      );
+      return participants.filter((p) => p.name.match(queryRegExp));
     },
     [participants],
   );
 
-  const { searchQueryInProgress, searchResults } =
-    useSearch<StreamVideoParticipant>({
-      searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,
-      debounceInterval: debounceSearchInterval,
-      searchQuery,
-    });
+  const { searchQueryInProgress, searchResults } = useSearch({
+    searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,
+    debounceInterval: debounceSearchInterval,
+    searchQuery,
+  });
 
   return (
     <SearchResults<StreamVideoParticipant>
@@ -181,7 +174,7 @@ const ActiveUsersSearchResults = ({
 
 const BlockedUsersSearchResults = ({
   blockedUsersSearchFn: blockedUsersSearchFnFromProps,
-  debounceSearchInterval = DEFAULT_DEBOUNCE_SEARCH_INTERVAL,
+  debounceSearchInterval,
   searchQuery,
 }: Pick<
   CallParticipantListProps,
@@ -191,18 +184,14 @@ const BlockedUsersSearchResults = ({
   const blockedUsers = useCallBlockedUserIds();
 
   const blockedUsersSearchFn = useCallback(
-    (queryString: string) => {
+    async (queryString: string) => {
       const queryRegExp = new RegExp(queryString, 'i');
-      return Promise.resolve(
-        blockedUsers.filter((blockedUser) => {
-          return blockedUser.match(queryRegExp);
-        }),
-      );
+      return blockedUsers.filter((userId) => userId.match(queryRegExp));
     },
     [blockedUsers],
   );
 
-  const { searchQueryInProgress, searchResults } = useSearch<string>({
+  const { searchQueryInProgress, searchResults } = useSearch({
     searchFn: blockedUsersSearchFnFromProps ?? blockedUsersSearchFn,
     debounceInterval: debounceSearchInterval,
     searchQuery,

package/src/components/Search/hooks/useSearch.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export type SearchController<T> = {
   /** Flag signals that the search request is flight await the response */
@@ -11,19 +11,22 @@ export type UseSearchParams<T> = {
   /** Search function performing the search request */
   searchFn: (searchQuery: string) => Promise<T[]>;
   /** Debounce interval applied to the search function */
-  debounceInterval: number;
+  debounceInterval?: number;
   /** Search query string */
   searchQuery?: string;
 };
 
 export const useSearch = <T>({
-  debounceInterval,
+  debounceInterval = 200,
   searchFn,
   searchQuery = '',
 }: UseSearchParams<T>): SearchController<T> => {
   const [searchResults, setSearchResults] = useState<T[]>([]);
   const [searchQueryInProgress, setSearchQueryInProgress] = useState(false);
 
+  const searchFnRef = useRef(searchFn);
+  searchFnRef.current = searchFn;
+
   useEffect(() => {
     if (!searchQuery.length) {
       setSearchQueryInProgress(false);
@@ -35,7 +38,7 @@ export const useSearch = <T>({
 
     const timeout = setTimeout(async () => {
       try {
-        const results = await searchFn(searchQuery);
+        const results = await searchFnRef.current(searchQuery);
         setSearchResults(results);
       } catch (error) {
         console.error(error);
@@ -47,7 +50,7 @@ export const useSearch = <T>({
     return () => {
       clearTimeout(timeout);
     };
-  }, [debounceInterval, searchFn, searchQuery]);
+  }, [debounceInterval, searchQuery]);
 
   return {
     searchQueryInProgress,

package/src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx

@@ -34,6 +34,7 @@ export const ParticipantActionsContextMenu = () => {
   const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
 
   const blockUser = () => call?.blockUser(userId);
+  const kickUser = () => call?.kickUser({ user_id: userId });
   const muteAudio = () => call?.muteUser(userId, 'audio');
   const muteVideo = () => call?.muteUser(userId, 'video');
   const muteScreenShare = () => call?.muteUser(userId, 'screenshare');
@@ -64,10 +65,7 @@ export const ParticipantActionsContextMenu = () => {
 
   const pinForEveryone = () => {
     call
-      ?.pinForEveryone({
-        user_id: userId,
-        session_id: sessionId,
-      })
+      ?.pinForEveryone({ user_id: userId, session_id: sessionId })
       .catch((err) => {
         console.error(`Failed to pin participant ${userId}`, err);
       });
@@ -75,10 +73,7 @@ export const ParticipantActionsContextMenu = () => {
 
   const unpinForEveryone = () => {
     call
-      ?.unpinForEveryone({
-        user_id: userId,
-        session_id: sessionId,
-      })
+      ?.unpinForEveryone({ user_id: userId, session_id: sessionId })
       .catch((err) => {
         console.error(`Failed to unpin participant ${userId}`, err);
       });
@@ -145,6 +140,12 @@ export const ParticipantActionsContextMenu = () => {
           {t('Block')}
         </GenericMenuButtonItem>
       </Restricted>
+      <Restricted requiredGrants={[OwnCapability.KICK_USER]}>
+        <GenericMenuButtonItem onClick={kickUser}>
+          <Icon icon="kick-user" />
+          {t('Kick')}
+        </GenericMenuButtonItem>
+      </Restricted>
       <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
         {hasVideoTrack && (
           <GenericMenuButtonItem onClick={muteVideo}>

package/src/translations/en.json

@@ -69,6 +69,7 @@
   "Pin for everyone": "Pin for everyone",
   "Unpin for everyone": "Unpin for everyone",
   "Block": "Block",
+  "Kick": "Kick",
   "Turn off video": "Turn off video",
   "Turn off screen share": "Turn off screen share",
   "Mute audio": "Mute audio",