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

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.8.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.30...@stream-io/video-react-sdk-1.8.0) (2024-12-09)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.11.15`
+* `@stream-io/video-react-bindings` updated to version `1.2.9`
+
+### Features
+
+* add an option to filter participants in layouts ([#1612](https://github.com/GetStream/stream-video-js/issues/1612)) ([e1eac3f](https://github.com/GetStream/stream-video-js/commit/e1eac3fa4aa9239b9f0e75b6f33d51cd39c788e5))
+
+## [1.7.30](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.29...@stream-io/video-react-sdk-1.7.30) (2024-12-04)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.11.14`
+* `@stream-io/video-react-bindings` updated to version `1.2.8`
 ## [1.7.29](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.28...@stream-io/video-react-sdk-1.7.29) (2024-12-03)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -2250,6 +2250,24 @@ const StreamVideo = (props) => {
 };
 StreamVideo.displayName = 'StreamVideo';
 
+const useFilteredParticipants = ({ excludeLocalParticipant = false, filterParticipants, }) => {
+    const { useParticipants, useRemoteParticipants } = videoReactBindings.useCallStateHooks();
+    const allParticipants = useParticipants();
+    const remoteParticipants = useRemoteParticipants();
+    return react.useMemo(() => {
+        const unfilteredParticipants = excludeLocalParticipant
+            ? remoteParticipants
+            : allParticipants;
+        return filterParticipants
+            ? unfilteredParticipants.filter((participant) => filterParticipants(participant))
+            : unfilteredParticipants;
+    }, [
+        allParticipants,
+        remoteParticipants,
+        excludeLocalParticipant,
+        filterParticipants,
+    ]);
+};
 const usePaginatedLayoutSortPreset = (call) => {
     react.useEffect(() => {
         if (!call)
@@ -2381,13 +2399,16 @@ const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, PictureInPi
 const PaginatedGridLayout = (props) => {
     const { groupSize = (props.groupSize || 0) > 0
         ? props.groupSize || GROUP_SIZE
-        : GROUP_SIZE, excludeLocalParticipant = false, mirrorLocalParticipantVideo = true, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
+        : GROUP_SIZE, excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
     const [page, setPage] = react.useState(0);
     const [paginatedGridLayoutWrapperElement, setPaginatedGridLayoutWrapperElement,] = react.useState(null);
     const call = videoReactBindings.useCall();
-    const { useParticipants, useRemoteParticipants } = videoReactBindings.useCallStateHooks();
-    const participants = useParticipants();
+    const { useRemoteParticipants } = videoReactBindings.useCallStateHooks();
     const remoteParticipants = useRemoteParticipants();
+    const participants = useFilteredParticipants({
+        excludeLocalParticipant,
+        filterParticipants,
+    });
     usePaginatedLayoutSortPreset(call);
     react.useEffect(() => {
         if (!paginatedGridLayoutWrapperElement || !call)
@@ -2396,7 +2417,7 @@ const PaginatedGridLayout = (props) => {
         return () => cleanup();
     }, [paginatedGridLayoutWrapperElement, call]);
     // only used to render video elements
-    const participantGroups = react.useMemo(() => chunk(excludeLocalParticipant ? remoteParticipants : participants, groupSize), [excludeLocalParticipant, remoteParticipants, participants, groupSize]);
+    const participantGroups = react.useMemo(() => chunk(participants, groupSize), [participants, groupSize]);
     const pageCount = participantGroups.length;
     // update page when page count is reduced and selected page no longer exists
     react.useEffect(() => {
@@ -2468,14 +2489,12 @@ hostElement, limit) => {
 };
 
 const DefaultParticipantViewUIBar = () => (jsxRuntime.jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
-const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, pageArrowsVisible = true, }) => {
+const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, filterParticipants, pageArrowsVisible = true, }) => {
     const call = videoReactBindings.useCall();
     const { useParticipants, useRemoteParticipants } = videoReactBindings.useCallStateHooks();
     const allParticipants = useParticipants();
     const remoteParticipants = useRemoteParticipants();
-    const [participantInSpotlight, ...otherParticipants] = excludeLocalParticipant
-        ? remoteParticipants
-        : allParticipants;
+    const [participantInSpotlight, ...otherParticipants] = useFilteredParticipants({ excludeLocalParticipant, filterParticipants });
     const [participantsBarWrapperElement, setParticipantsBarWrapperElement] = react.useState(null);
     const [participantsBarElement, setParticipantsBarElement] = react.useState(null);
     const [buttonsWrapperElement, setButtonsWrapperElement] = react.useState(null);
@@ -2554,7 +2573,7 @@ const LivestreamPlayer = (props) => {
     return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.7.29").split('.');
+const [major, minor, patch] = ("1.8.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,