@stream-io/video-react-sdk 1.30.0 → 1.31.0

package/dist/index.es.js

@@ -722,8 +722,8 @@ const useMenuContext = () => {
     return useContext(MenuContext);
 };
 const MenuPortal = ({ children, refs, }) => {
-    const portalId = useMemo(() => `str-video-portal-${Math.random().toString(36).substring(2, 9)}`, []);
-    return (jsxs(Fragment, { children: [jsx("div", { id: portalId, className: "str-video__portal" }), jsx(FloatingOverlay, { children: jsx(FloatingPortal, { id: portalId, children: jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
+    const [portalRoot, setPortalRoot] = useState(null);
+    return (jsxs(Fragment, { children: [jsx("div", { ref: setPortalRoot, className: "str-video__portal" }), jsx(FloatingOverlay, { children: jsx(FloatingPortal, { root: portalRoot, children: jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
 };
 const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', offset, visualType = MenuVisualType.MENU, children, onToggle, }) => {
     const [menuShown, setMenuShown] = useState(false);
@@ -1564,7 +1564,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = useRef(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const { t } = useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.30.0"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.31.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -3145,12 +3145,60 @@ const Pip = (props) => {
                 (screenSharingParticipant.isLocalParticipant ? (jsxs("div", { className: "str-video__pip-screen-share-local", children: [jsx(Icon, { icon: "screen-share-off" }), jsx("span", { className: "str-video__pip-screen-share-local__title", children: t('You are presenting your screen') })] })) : (jsx(ParticipantView, { participant: screenSharingParticipant, trackType: "screenShareTrack", muteAudio: true, mirror: false, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }))), participants.map((participant) => (jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId)))] }));
 };
 Pip.displayName = 'PipLayout.Pip';
+
 const Host = () => {
     const remoteParticipants = useRawRemoteParticipants();
     return jsx(ParticipantsAudio, { participants: remoteParticipants });
 };
 Host.displayName = 'PipLayout.Host';
-const PipLayout = { Pip, Host };
+
+const getGridDensity = (count) => {
+    if (count === 1)
+        return 'single';
+    if (count <= 5)
+        return 'small';
+    if (count <= 9)
+        return 'medium';
+    if (count <= 16)
+        return 'large';
+    return 'overflow';
+};
+/**
+ * A grid-based PIP layout with pagination support.
+ * Use this when you need a more structured grid view in PIP mode.
+ */
+const Grid = (props) => {
+    const { t } = useI18n();
+    const { excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, groupSize = 9, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
+    const [page, setPage] = useState(0);
+    const [wrapperElement, setWrapperElement] = useState(null);
+    const call = useCall();
+    const participants = useFilteredParticipants({
+        excludeLocalParticipant,
+        filterParticipants,
+    });
+    const screenSharingParticipant = participants.find((p) => hasScreenShare(p));
+    usePaginatedLayoutSortPreset(call);
+    useEffect(() => {
+        if (!wrapperElement || !call)
+            return;
+        return call.setViewport(wrapperElement);
+    }, [wrapperElement, call]);
+    const participantGroups = useMemo(() => chunk(participants, groupSize), [participants, groupSize]);
+    const pageCount = participantGroups.length;
+    if (page > pageCount - 1) {
+        setPage(Math.max(0, pageCount - 1));
+    }
+    const selectedGroup = participantGroups[page];
+    const mirror = mirrorLocalParticipantVideo ? undefined : false;
+    if (!call)
+        return null;
+    return (jsxs("div", { className: "str-video__pip-layout str-video__pip-layout--grid", ref: setWrapperElement, children: [screenSharingParticipant &&
+                (screenSharingParticipant.isLocalParticipant ? (jsxs("div", { className: "str-video__pip-screen-share-local", children: [jsx(Icon, { icon: "screen-share-off" }), jsx("span", { className: "str-video__pip-screen-share-local__title", children: t('You are presenting your screen') })] })) : (jsx(ParticipantView, { participant: screenSharingParticipant, trackType: "screenShareTrack", muteAudio: true, mirror: false, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }))), jsxs("div", { className: "str-video__pip-layout__grid-container", children: [pageArrowsVisible && page > 0 && (jsx(IconButton, { icon: "caret-left", onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)), className: "str-video__pip-layout__pagination-button str-video__pip-layout__pagination-button--left" })), selectedGroup && (jsx("div", { className: clsx('str-video__pip-layout__grid', `str-video__pip-layout__grid--${getGridDensity(selectedGroup.length)}`), children: selectedGroup.map((participant) => (jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) })), pageArrowsVisible && page < pageCount - 1 && (jsx(IconButton, { icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)), className: "str-video__pip-layout__pagination-button str-video__pip-layout__pagination-button--right" }))] })] }));
+};
+Grid.displayName = 'PipLayout.Grid';
+
+const PipLayout = { Pip, Host, Grid };
 
 const LivestreamPlayer = (props) => {
     const { callType, callId, children, ...restProps } = props;
@@ -3233,7 +3281,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.30.0").split('.');
+const [major, minor, patch] = ("1.31.0").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,