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

package/dist/index.cjs.js

@@ -580,6 +580,7 @@ const ParticipantActionsContextMenu = () => {
     const hasScreenShareTrack = videoClient.hasScreenShare(participant);
     const hasScreenShareAudioTrack = videoClient.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');
@@ -606,20 +607,14 @@ 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);
         });
     };
     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);
         });
@@ -650,7 +645,7 @@ const ParticipantActionsContextMenu = () => {
         return document.exitPictureInPicture().catch(console.error);
     };
     const { close } = useMenuContext() || {};
-    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement &&
+    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.KICK_USER], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsxRuntime.jsx(Icon, { icon: "kick-user" }), t('Kick')] }) }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement &&
                 typeof participantViewElement.requestFullscreen !== 'undefined' && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
                     direction: fullscreenModeOn ? t('Leave') : t('Enter'),
                 }) })), videoElement && document.pictureInPictureEnabled && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
@@ -1848,9 +1843,11 @@ function SearchResults({ EmptySearchResultComponent, LoadingIndicator: LoadingIn
     return jsxRuntime.jsx(SearchResultList, { data: searchResults });
 }
 
-const useSearch = ({ debounceInterval, searchFn, searchQuery = '', }) => {
+const useSearch = ({ debounceInterval = 200, searchFn, searchQuery = '', }) => {
     const [searchResults, setSearchResults] = react.useState([]);
     const [searchQueryInProgress, setSearchQueryInProgress] = react.useState(false);
+    const searchFnRef = react.useRef(searchFn);
+    searchFnRef.current = searchFn;
     react.useEffect(() => {
         if (!searchQuery.length) {
             setSearchQueryInProgress(false);
@@ -1860,7 +1857,7 @@ const useSearch = ({ debounceInterval, searchFn, searchQuery = '', }) => {
         setSearchQueryInProgress(true);
         const timeout = setTimeout(async () => {
             try {
-                const results = await searchFn(searchQuery);
+                const results = await searchFnRef.current(searchQuery);
                 setSearchResults(results);
             }
             catch (error) {
@@ -1873,7 +1870,7 @@ const useSearch = ({ debounceInterval, searchFn, searchQuery = '', }) => {
         return () => {
             clearTimeout(timeout);
         };
-    }, [debounceInterval, searchFn, searchQuery]);
+    }, [debounceInterval, searchQuery]);
     return {
         searchQueryInProgress,
         searchResults,
@@ -1884,7 +1881,6 @@ const UserListTypes = {
     active: 'Active users',
     blocked: 'Blocked users',
 };
-const DEFAULT_DEBOUNCE_SEARCH_INTERVAL = 200;
 const CallParticipantsList = ({ onClose, activeUsersSearchFn, blockedUsersSearchFn, debounceSearchInterval, }) => {
     const [searchQuery, setSearchQuery] = react.useState('');
     const [userListType, setUserListType] = react.useState('active');
@@ -1893,19 +1889,17 @@ const CallParticipantsList = ({ onClose, activeUsersSearchFn, blockedUsersSearch
 };
 const CallParticipantListContentHeader = ({ userListType, setUserListType, }) => {
     const call = videoReactBindings.useCall();
-    const muteAll = () => {
+    const muteAll = react.useCallback(() => {
         call?.muteAllUsers('audio');
-    };
+    }, [call]);
     return (jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxRuntime.jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsxRuntime.jsx(TextButton, { onClick: muteAll, children: "Mute all" }) })) }), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsxRuntime.jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsxRuntime.jsx(GenericMenuButtonItem, { "aria-selected": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
 };
-const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval = DEFAULT_DEBOUNCE_SEARCH_INTERVAL, }) => {
+const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval, }) => {
     const { useParticipants } = videoReactBindings.useCallStateHooks();
     const participants = useParticipants({ sortBy: videoClient.name });
-    const activeUsersSearchFn = react.useCallback((queryString) => {
+    const activeUsersSearchFn = react.useCallback(async (queryString) => {
         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({
         searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,
@@ -1914,14 +1908,12 @@ const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUser
     });
     return (jsxRuntime.jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : participants, SearchResultList: CallParticipantListing }));
 };
-const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnFromProps, debounceSearchInterval = DEFAULT_DEBOUNCE_SEARCH_INTERVAL, searchQuery, }) => {
+const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnFromProps, debounceSearchInterval, searchQuery, }) => {
     const { useCallBlockedUserIds } = videoReactBindings.useCallStateHooks();
     const blockedUsers = useCallBlockedUserIds();
-    const blockedUsersSearchFn = react.useCallback((queryString) => {
+    const blockedUsersSearchFn = react.useCallback(async (queryString) => {
         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({
         searchFn: blockedUsersSearchFnFromProps ?? blockedUsersSearchFn,
@@ -2348,6 +2340,7 @@ var Pinned = "Pinned";
 var Unpin = "Unpin";
 var Pin = "Pin";
 var Block = "Block";
+var Kick = "Kick";
 var Enter = "Enter";
 var Leave = "Leave";
 var Participants = "Participants";
@@ -2418,6 +2411,7 @@ var en = {
 	"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",
@@ -2960,7 +2954,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.19.7").split('.');
+const [major, minor, patch] = ("1.20.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,