@stream-io/video-react-sdk 1.14.0 → 1.14.2

package/dist/index.cjs.js

@@ -359,6 +359,7 @@ const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolut
         offset,
     });
     react.useEffect(() => {
+        const parentDocument = domReference?.ownerDocument;
         const handleClick = (event) => {
             if (!floating && domReference?.contains(event.target)) {
                 setMenuShown(true);
@@ -378,11 +379,13 @@ const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolut
                 toggleHandler.current?.(false);
             }
         };
-        document?.addEventListener('click', handleClick, { capture: true });
-        document?.addEventListener('keydown', handleKeyDown);
+        parentDocument?.addEventListener('click', handleClick, { capture: true });
+        parentDocument?.addEventListener('keydown', handleKeyDown);
         return () => {
-            document?.removeEventListener('click', handleClick, { capture: true });
-            document?.removeEventListener('keydown', handleKeyDown);
+            parentDocument?.removeEventListener('click', handleClick, {
+                capture: true,
+            });
+            parentDocument?.removeEventListener('keydown', handleKeyDown);
         };
     }, [floating, domReference]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuShown && (jsxRuntime.jsx(MenuContext.Provider, { value: { close: () => setMenuShown(false) }, children: visualType === exports.MenuVisualType.PORTAL ? (jsxRuntime.jsx(MenuPortal, { refs: refs, children: children })) : visualType === exports.MenuVisualType.MENU ? (jsxRuntime.jsx("div", { className: "str-video__menu-container", ref: refs.setFloating, style: {
@@ -2364,6 +2367,8 @@ const applyParticipantsFilter = (participants, filter) => {
             name: participant.name,
             roles: participant.roles,
             isPinned: videoClient.isPinned(participant),
+            hasVideo: videoClient.hasVideo(participant),
+            hasAudio: videoClient.hasAudio(participant),
         }, filter);
     return participants.filter(filterCallback);
 };
@@ -2498,7 +2503,7 @@ const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, PictureInPi
 const PaginatedGridLayout = (props) => {
     const { groupSize = (props.groupSize || 0) > 0
         ? props.groupSize || GROUP_SIZE
-        : GROUP_SIZE, excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
+        : GROUP_SIZE, excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, PictureInPicturePlaceholder, muted, } = props;
     const [page, setPage] = react.useState(0);
     const [paginatedGridLayoutWrapperElement, setPaginatedGridLayoutWrapperElement,] = react.useState(null);
     const call = videoReactBindings.useCall();
@@ -2528,7 +2533,7 @@ const PaginatedGridLayout = (props) => {
     const mirror = mirrorLocalParticipantVideo ? undefined : false;
     if (!call)
         return null;
-    return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
 };
 PaginatedGridLayout.displayName = 'PaginatedGridLayout';
 
@@ -2588,7 +2593,7 @@ 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, filterParticipants, pageArrowsVisible = true, }) => {
+const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, filterParticipants, pageArrowsVisible = true, muted, }) => {
     const call = videoReactBindings.useCall();
     const { useParticipants, useRemoteParticipants } = videoReactBindings.useCallStateHooks();
     const allParticipants = useParticipants();
@@ -2625,7 +2630,7 @@ const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, Par
         return null;
     const renderParticipantsBar = participantsBarPosition &&
         (participantsWithAppliedLimit.length > 0 || isSpeakerScreenSharing);
-    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-layout__wrapper", children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: clsx('str-video__speaker-layout', participantsBarPosition &&
+    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-layout__wrapper", children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: clsx('str-video__speaker-layout', participantsBarPosition &&
                     `str-video__speaker-layout--variant-${participantsBarPosition}`), children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__spotlight", children: participantInSpotlight && (jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: true, mirror: mirror, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder })) }), renderParticipantsBar && (jsxRuntime.jsxs("div", { ref: setButtonsWrapperElement, className: "str-video__speaker-layout__participants-bar-buttons-wrapper", children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participants-bar-wrapper", ref: setParticipantsBarWrapperElement, children: jsxRuntime.jsxs("div", { ref: setParticipantsBarElement, className: "str-video__speaker-layout__participants-bar", children: [isSpeakerScreenSharing && (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, mirror: mirror, muteAudio: true }) }, participantInSpotlight.sessionId)), participantsWithAppliedLimit.map((participant) => (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, mirror: mirror, muteAudio: true }) }, participant.sessionId)))] }) }), pageArrowsVisible && isVertical && (jsxRuntime.jsx(VerticalScrollButtons, { scrollWrapper: participantsBarWrapperElement })), pageArrowsVisible && isHorizontal && (jsxRuntime.jsx(HorizontalScrollButtons, { scrollWrapper: participantsBarWrapperElement }))] }))] })] }));
 };
 SpeakerLayout.displayName = 'SpeakerLayout';
@@ -2650,6 +2655,34 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (jsxRuntime.jsx(IconButton, { onClick: scrollTopClickHandler, icon: "caret-up", className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (jsxRuntime.jsx(IconButton, { onClick: scrollBottomClickHandler, icon: "caret-down", className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
 };
 
+const Pip = (props) => {
+    const { excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, PictureInPicturePlaceholder, } = props;
+    const [layoutWrapperElement, setLayoutWrapperElement] = react.useState(null);
+    const call = videoReactBindings.useCall();
+    const participants = useFilteredParticipants({
+        excludeLocalParticipant,
+        filterParticipants,
+    });
+    usePaginatedLayoutSortPreset(call);
+    react.useEffect(() => {
+        if (!layoutWrapperElement || !call)
+            return;
+        return call.setViewport(layoutWrapperElement);
+    }, [layoutWrapperElement, call]);
+    const mirror = mirrorLocalParticipantVideo ? undefined : false;
+    if (!call)
+        return null;
+    return (jsxRuntime.jsx("div", { className: "str-video__pip-layout", ref: setLayoutWrapperElement, children: participants.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
+};
+Pip.displayName = 'PipLayout.Pip';
+const Host = () => {
+    const { useRemoteParticipants } = videoReactBindings.useCallStateHooks();
+    const remoteParticipants = useRemoteParticipants();
+    return jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants });
+};
+Host.displayName = 'PipLayout.Host';
+const PipLayout = { Pip, Host };
+
 const LivestreamPlayer = (props) => {
     const { callType, callId, layoutProps } = props;
     const client = videoReactBindings.useStreamVideoClient();
@@ -2674,7 +2707,7 @@ const LivestreamPlayer = (props) => {
     return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.14.0").split('.');
+const [major, minor, patch] = ("1.14.2").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -2733,6 +2766,7 @@ exports.ParticipantsAudio = ParticipantsAudio;
 exports.PermissionNotification = PermissionNotification;
 exports.PermissionRequestList = PermissionRequestList;
 exports.PermissionRequests = PermissionRequests;
+exports.PipLayout = PipLayout;
 exports.ReactionsButton = ReactionsButton;
 exports.RecordCallButton = RecordCallButton;
 exports.RecordCallConfirmationButton = RecordCallConfirmationButton;
@@ -2763,6 +2797,7 @@ exports.defaultReactions = defaultReactions;
 exports.translations = translations;
 exports.useBackgroundFilters = useBackgroundFilters;
 exports.useDeviceList = useDeviceList;
+exports.useFilteredParticipants = useFilteredParticipants;
 exports.useHorizontalScrollPosition = useHorizontalScrollPosition;
 exports.useMenuContext = useMenuContext;
 exports.useNoiseCancellation = useNoiseCancellation;