@stream-io/video-react-sdk 1.41.0 → 2.0.0-beta.0

package/dist/esm/src/core/components/CallLayout/LivestreamLayout.js

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useState, useEffect, useCallback } from 'react';
+import { useCallStateHooks, useI18n, useCall } from '@stream-io/video-react-bindings';
+import { humanize, hasScreenShare } from '@stream-io/video-client';
+import { useParticipantViewContext } from '../ParticipantView/ParticipantViewContext.js';
+import '../../../components/Menu/MenuToggle.js';
+import { ParticipantView } from '../ParticipantView/ParticipantView.js';
+import '../ParticipantView/DefaultParticipantViewUI.js';
+import '../Audio/Audio.js';
+import { ParticipantsAudio } from '../Audio/ParticipantsAudio.js';
+import { useRawRemoteParticipants, usePaginatedLayoutSortPreset } from './hooks.js';
+
+const LivestreamLayout = (props) => {
+    const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();
+    const call = useCall();
+    const participants = useParticipants();
+    const [currentSpeaker] = participants;
+    const remoteParticipants = useRawRemoteParticipants();
+    const hasOngoingScreenShare = useHasOngoingScreenShare();
+    const presenter = hasOngoingScreenShare
+        ? participants.find(hasScreenShare)
+        : undefined;
+    usePaginatedLayoutSortPreset(call);
+    const { floatingParticipantProps, muted, ParticipantViewUI } = props;
+    const overlay = ParticipantViewUI ?? (jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showMuteButton: props.showMuteButton, showSpeakerName: props.showSpeakerName, enableFullScreen: props.enableFullScreen }));
+    const floatingParticipantOverlay = hasOngoingScreenShare &&
+        (ParticipantViewUI ?? (jsx(ParticipantOverlay
+        // these elements aren't needed for the video feed
+        , { 
+            // these elements aren't needed for the video feed
+            showParticipantCount: floatingParticipantProps?.showParticipantCount ?? false, showDuration: floatingParticipantProps?.showDuration ?? false, showLiveBadge: floatingParticipantProps?.showLiveBadge ?? false, showSpeakerName: floatingParticipantProps?.showSpeakerName ?? true, enableFullScreen: floatingParticipantProps?.enableFullScreen ?? true })));
+    return (jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [!muted && jsx(ParticipantsAudio, { participants: remoteParticipants }), hasOngoingScreenShare && presenter && (jsx(ParticipantView, { className: "str-video__livestream-layout__screen-share", participant: presenter, ParticipantViewUI: overlay, trackType: "screenShareTrack", muteAudio // audio is rendered by ParticipantsAudio
+                : true })), currentSpeaker && (jsx(ParticipantView, { className: clsx(hasOngoingScreenShare &&
+                    clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: floatingParticipantOverlay || overlay, mirror: props.mirrorLocalParticipantVideo !== false ? undefined : false, muteAudio // audio is rendered by ParticipantsAudio
+                : true }))] }));
+};
+LivestreamLayout.displayName = 'LivestreamLayout';
+const BackstageLayout = (props) => {
+    const { showEarlyParticipantCount = true, humanizeParticipantCount = true } = props;
+    const { useParticipantCount, useCallStartsAt } = useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const startsAt = useCallStartsAt();
+    const { t } = useI18n();
+    const [startsAtPassed, setStartsAtPassed] = useState(() => !!startsAt && startsAt.getTime() < Date.now());
+    useEffect(() => {
+        if (!startsAt || startsAtPassed)
+            return;
+        const check = () => {
+            if (startsAt.getTime() < Date.now()) {
+                setStartsAtPassed(true);
+            }
+        };
+        const interval = setInterval(check, 1000);
+        return () => clearInterval(interval);
+    }, [startsAt, startsAtPassed]);
+    return (jsx("div", { className: "str-video__livestream-layout__wrapper", children: jsxs("div", { className: "str-video__livestream-layout__backstage", children: [startsAt && (jsx("span", { className: "str-video__livestream-layout__starts-at", children: startsAtPassed
+                        ? t('Livestream starts soon')
+                        : t('Livestream starts at {{ time }}', {
+                            time: startsAt.toLocaleTimeString([], {
+                                hour: '2-digit',
+                                minute: '2-digit',
+                            }),
+                        }) })), showEarlyParticipantCount && (jsx("span", { className: "str-video__livestream-layout__early-viewers-count", children: t('{{ count }} participants joined early', {
+                        count: humanizeParticipantCount
+                            ? humanize(participantCount)
+                            : participantCount,
+                    }) }))] }) }));
+};
+BackstageLayout.displayName = 'BackstageLayout';
+const ParticipantOverlay = (props) => {
+    const { enableFullScreen = true, showParticipantCount = true, humanizeParticipantCount = true, showDuration = true, showLiveBadge = true, showMuteButton = true, showSpeakerName = false, } = props;
+    const overlayBarVisible = enableFullScreen ||
+        showParticipantCount ||
+        showDuration ||
+        showLiveBadge ||
+        showMuteButton ||
+        showSpeakerName;
+    const { participant, participantViewElement } = useParticipantViewContext();
+    const { useParticipantCount, useSpeakerState } = useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const duration = useUpdateCallDuration();
+    const toggleFullScreen = useToggleFullScreen();
+    const { speaker, volume } = useSpeakerState();
+    const isSpeakerMuted = volume === 0;
+    const { t } = useI18n();
+    return (jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsx("span", { className: "str-video__livestream-layout__viewers-count", children: humanizeParticipantCount
+                                ? humanize(participantCount)
+                                : participantCount })), showSpeakerName && (jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' }))] }), jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (jsx("span", { className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
+                                'str-video__livestream-layout__mute-button--muted'), onClick: () => speaker.setVolume(isSpeakerMuted ? 1 : 0) })), enableFullScreen &&
+                            participantViewElement &&
+                            typeof participantViewElement.requestFullscreen !==
+                                'undefined' && (jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
+};
+const useUpdateCallDuration = () => {
+    const { useIsCallLive, useCallSession } = useCallStateHooks();
+    const isCallLive = useIsCallLive();
+    const session = useCallSession();
+    const [duration, setDuration] = useState(() => {
+        if (!session || !session.live_started_at)
+            return 0;
+        const liveStartTime = new Date(session.live_started_at);
+        const now = new Date();
+        return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);
+    });
+    useEffect(() => {
+        if (!isCallLive)
+            return;
+        const interval = setInterval(() => {
+            setDuration((d) => d + 1);
+        }, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [isCallLive]);
+    return duration;
+};
+const useToggleFullScreen = () => {
+    const { participantViewElement } = useParticipantViewContext();
+    const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);
+    useEffect(() => {
+        const handler = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener('fullscreenchange', handler);
+        return () => {
+            document.removeEventListener('fullscreenchange', handler);
+        };
+    }, []);
+    return useCallback(() => {
+        if (isFullscreen) {
+            document.exitFullscreen().catch((err) => {
+                console.error('Failed to exit fullscreen', err);
+            });
+        }
+        else {
+            participantViewElement?.requestFullscreen().catch((err) => {
+                console.error('Failed to enter fullscreen', err);
+            });
+        }
+    }, [isFullscreen, participantViewElement]);
+};
+const formatDuration = (durationInMs) => {
+    const days = Math.floor(durationInMs / 86400);
+    const hours = Math.floor(durationInMs / 3600);
+    const minutes = Math.floor((durationInMs % 3600) / 60);
+    const seconds = durationInMs % 60;
+    return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+};
+
+export { BackstageLayout, LivestreamLayout };
+//# sourceMappingURL=LivestreamLayout.js.map

package/dist/esm/src/core/components/CallLayout/LivestreamLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivestreamLayout.js","sources":["../../../../../../../../src/core/components/CallLayout/LivestreamLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  ComponentType,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  useCall,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { hasScreenShare, humanize } from '@stream-io/video-client';\nimport { ParticipantView, useParticipantViewContext } from '../ParticipantView';\nimport { ParticipantsAudio } from '../Audio';\nimport {\n  usePaginatedLayoutSortPreset,\n  useRawRemoteParticipants,\n} from './hooks';\n\n/**\n * The props for the {@link LivestreamLayout} component.\n */\nexport type LivestreamLayoutProps = {\n  /**\n   * Whether the livestream is muted. Defaults to `false`.\n   */\n  muted?: boolean;\n\n  /**\n   * Whether to show the participant count. Defaults to `true`.\n   */\n  showParticipantCount?: boolean;\n\n  /**\n   * Whether to humanize the participant count. Defaults to `true`.\n   * @example\n   * 1000 participants -> 1k\n   * 1500 participants -> 1.5k\n   * 10_000 participants -> 10k\n   * 100_000 participants -> 100k\n   */\n  humanizeParticipantCount?: boolean;\n\n  /**\n   * Whether to enable fullscreen mode. Defaults to `true`.\n   */\n  enableFullScreen?: boolean;\n\n  /**\n   * Whether to show the duration of the call. Defaults to `true`.\n   */\n  showDuration?: boolean;\n\n  /**\n   * Whether to show the live badge. Defaults to `true`.\n   */\n  showLiveBadge?: boolean;\n\n  /**\n   * Whether to show the speaker name. Defaults to `false`.\n   */\n  showSpeakerName?: boolean;\n\n  /**\n   * Whether to show the mute button. Defaults to `true`.\n   */\n  showMuteButton?: boolean;\n\n  /**\n   * When set to `false` disables mirroring of the local participant's video.\n   * @default true\n   */\n  mirrorLocalParticipantVideo?: boolean;\n\n  /**\n   * The props to pass to the floating participant element.\n   */\n  floatingParticipantProps?: LivestreamLayoutProps & {\n    /**\n     * The position of the floating participant element. Defaults to `top-right`.\n     */\n    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n  };\n\n  /**\n   * Override the default participant view overlay UI.\n   */\n  ParticipantViewUI?: ComponentType | ReactElement | null;\n};\n\nexport const LivestreamLayout = (props: LivestreamLayoutProps) => {\n  const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();\n  const call = useCall();\n  const participants = useParticipants();\n  const [currentSpeaker] = participants;\n  const remoteParticipants = useRawRemoteParticipants();\n  const hasOngoingScreenShare = useHasOngoingScreenShare();\n  const presenter = hasOngoingScreenShare\n    ? participants.find(hasScreenShare)\n    : undefined;\n\n  usePaginatedLayoutSortPreset(call);\n\n  const { floatingParticipantProps, muted, ParticipantViewUI } = props;\n  const overlay = ParticipantViewUI ?? (\n    <ParticipantOverlay\n      showParticipantCount={props.showParticipantCount}\n      showDuration={props.showDuration}\n      showLiveBadge={props.showLiveBadge}\n      showMuteButton={props.showMuteButton}\n      showSpeakerName={props.showSpeakerName}\n      enableFullScreen={props.enableFullScreen}\n    />\n  );\n\n  const floatingParticipantOverlay =\n    hasOngoingScreenShare &&\n    (ParticipantViewUI ?? (\n      <ParticipantOverlay\n        // these elements aren't needed for the video feed\n        showParticipantCount={\n          floatingParticipantProps?.showParticipantCount ?? false\n        }\n        showDuration={floatingParticipantProps?.showDuration ?? false}\n        showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}\n        showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}\n        enableFullScreen={floatingParticipantProps?.enableFullScreen ?? true}\n      />\n    ));\n\n  return (\n    <div className=\"str-video__livestream-layout__wrapper\">\n      {!muted && <ParticipantsAudio participants={remoteParticipants} />}\n      {hasOngoingScreenShare && presenter && (\n        <ParticipantView\n          className=\"str-video__livestream-layout__screen-share\"\n          participant={presenter}\n          ParticipantViewUI={overlay}\n          trackType=\"screenShareTrack\"\n          muteAudio // audio is rendered by ParticipantsAudio\n        />\n      )}\n      {currentSpeaker && (\n        <ParticipantView\n          className={clsx(\n            hasOngoingScreenShare &&\n              clsx(\n                'str-video__livestream-layout__floating-participant',\n                `str-video__livestream-layout__floating-participant--${\n                  floatingParticipantProps?.position ?? 'top-right'\n                }`,\n              ),\n          )}\n          participant={currentSpeaker}\n          ParticipantViewUI={floatingParticipantOverlay || overlay}\n          mirror={\n            props.mirrorLocalParticipantVideo !== false ? undefined : false\n          }\n          muteAudio // audio is rendered by ParticipantsAudio\n        />\n      )}\n    </div>\n  );\n};\n\nLivestreamLayout.displayName = 'LivestreamLayout';\n\n/**\n * The props for the {@link LivestreamLayout} component.\n */\nexport type BackstageLayoutProps = {\n  /**\n   * Whether to show the counter for participants that joined before\n   * the livestream went live. Defaults to `true`.\n   */\n  showEarlyParticipantCount?: boolean;\n\n  /**\n   * Show the participant count in a humanized format. Defaults to `true`.\n   * @example\n   * 1000 participants -> 1k\n   * 1500 participants -> 1.5k\n   * 10_000 participants -> 10k\n   * 10_0000 participants -> 100k\n   */\n  humanizeParticipantCount?: boolean;\n};\n\nexport const BackstageLayout = (props: BackstageLayoutProps) => {\n  const { showEarlyParticipantCount = true, humanizeParticipantCount = true } =\n    props;\n  const { useParticipantCount, useCallStartsAt } = useCallStateHooks();\n  const participantCount = useParticipantCount();\n  const startsAt = useCallStartsAt();\n  const { t } = useI18n();\n  const [startsAtPassed, setStartsAtPassed] = useState(\n    () => !!startsAt && startsAt.getTime() < Date.now(),\n  );\n\n  useEffect(() => {\n    if (!startsAt || startsAtPassed) return;\n\n    const check = () => {\n      if (startsAt.getTime() < Date.now()) {\n        setStartsAtPassed(true);\n      }\n    };\n\n    const interval = setInterval(check, 1000);\n    return () => clearInterval(interval);\n  }, [startsAt, startsAtPassed]);\n\n  return (\n    <div className=\"str-video__livestream-layout__wrapper\">\n      <div className=\"str-video__livestream-layout__backstage\">\n        {startsAt && (\n          <span className=\"str-video__livestream-layout__starts-at\">\n            {startsAtPassed\n              ? t('Livestream starts soon')\n              : t('Livestream starts at {{ time }}', {\n                  time: startsAt.toLocaleTimeString([], {\n                    hour: '2-digit',\n                    minute: '2-digit',\n                  }),\n                })}\n          </span>\n        )}\n        {showEarlyParticipantCount && (\n          <span className=\"str-video__livestream-layout__early-viewers-count\">\n            {t('{{ count }} participants joined early', {\n              count: humanizeParticipantCount\n                ? humanize(participantCount)\n                : participantCount,\n            })}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nBackstageLayout.displayName = 'BackstageLayout';\n\nconst ParticipantOverlay = (props: {\n  enableFullScreen?: boolean;\n  showParticipantCount?: boolean;\n  humanizeParticipantCount?: boolean;\n  showDuration?: boolean;\n  showLiveBadge?: boolean;\n  showSpeakerName?: boolean;\n  showMuteButton?: boolean;\n}) => {\n  const {\n    enableFullScreen = true,\n    showParticipantCount = true,\n    humanizeParticipantCount = true,\n    showDuration = true,\n    showLiveBadge = true,\n    showMuteButton = true,\n    showSpeakerName = false,\n  } = props;\n  const overlayBarVisible =\n    enableFullScreen ||\n    showParticipantCount ||\n    showDuration ||\n    showLiveBadge ||\n    showMuteButton ||\n    showSpeakerName;\n  const { participant, participantViewElement } = useParticipantViewContext();\n  const { useParticipantCount, useSpeakerState } = useCallStateHooks();\n  const participantCount = useParticipantCount();\n  const duration = useUpdateCallDuration();\n  const toggleFullScreen = useToggleFullScreen();\n  const { speaker, volume } = useSpeakerState();\n  const isSpeakerMuted = volume === 0;\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__livestream-layout__overlay\">\n      {overlayBarVisible && (\n        <div className=\"str-video__livestream-layout__overlay__bar\">\n          <div className=\"str-video__livestream-layout__overlay__bar-left\">\n            {showLiveBadge && (\n              <span className=\"str-video__livestream-layout__live-badge\">\n                {t('Live')}\n              </span>\n            )}\n            {showParticipantCount && (\n              <span className=\"str-video__livestream-layout__viewers-count\">\n                {humanizeParticipantCount\n                  ? humanize(participantCount)\n                  : participantCount}\n              </span>\n            )}\n            {showSpeakerName && (\n              <span\n                className=\"str-video__livestream-layout__speaker-name\"\n                title={participant.name || participant.userId || ''}\n              >\n                {participant.name || participant.userId || ''}\n              </span>\n            )}\n          </div>\n          <div className=\"str-video__livestream-layout__overlay__bar-center\">\n            {showDuration && (\n              <span className=\"str-video__livestream-layout__duration\">\n                {formatDuration(duration)}\n              </span>\n            )}\n          </div>\n          <div className=\"str-video__livestream-layout__overlay__bar-right\">\n            {showMuteButton && (\n              <span\n                className={clsx(\n                  'str-video__livestream-layout__mute-button',\n                  isSpeakerMuted &&\n                    'str-video__livestream-layout__mute-button--muted',\n                )}\n                onClick={() => speaker.setVolume(isSpeakerMuted ? 1 : 0)}\n              />\n            )}\n            {enableFullScreen &&\n              participantViewElement &&\n              typeof participantViewElement.requestFullscreen !==\n                'undefined' && (\n                <span\n                  className=\"str-video__livestream-layout__go-fullscreen\"\n                  onClick={toggleFullScreen}\n                />\n              )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst useUpdateCallDuration = () => {\n  const { useIsCallLive, useCallSession } = useCallStateHooks();\n  const isCallLive = useIsCallLive();\n  const session = useCallSession();\n  const [duration, setDuration] = useState(() => {\n    if (!session || !session.live_started_at) return 0;\n    const liveStartTime = new Date(session.live_started_at);\n    const now = new Date();\n    return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);\n  });\n\n  useEffect(() => {\n    if (!isCallLive) return;\n    const interval = setInterval(() => {\n      setDuration((d) => d + 1);\n    }, 1000);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [isCallLive]);\n\n  return duration;\n};\n\nconst useToggleFullScreen = () => {\n  const { participantViewElement } = useParticipantViewContext();\n  const [isFullscreen, setIsFullscreen] = useState(\n    !!document.fullscreenElement,\n  );\n  useEffect(() => {\n    const handler = () => setIsFullscreen(!!document.fullscreenElement);\n    document.addEventListener('fullscreenchange', handler);\n    return () => {\n      document.removeEventListener('fullscreenchange', handler);\n    };\n  }, []);\n  return useCallback(() => {\n    if (isFullscreen) {\n      document.exitFullscreen().catch((err) => {\n        console.error('Failed to exit fullscreen', err);\n      });\n    } else {\n      participantViewElement?.requestFullscreen().catch((err) => {\n        console.error('Failed to enter fullscreen', err);\n      });\n    }\n  }, [isFullscreen, participantViewElement]);\n};\n\nconst formatDuration = (durationInMs: number) => {\n  const days = Math.floor(durationInMs / 86400);\n  const hours = Math.floor(durationInMs / 3600);\n  const minutes = Math.floor((durationInMs % 3600) / 60);\n  const seconds = durationInMs % 60;\n\n  return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${\n    minutes < 10 ? '0' : ''\n  }${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/src/core/components/CallLayout/PaginatedGridLayout.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import '@stream-io/video-client';
+import '../ParticipantView/ParticipantViewContext.js';
+import '../../../components/Menu/MenuToggle.js';
+import { ParticipantView } from '../ParticipantView/ParticipantView.js';
+import { DefaultParticipantViewUI } from '../ParticipantView/DefaultParticipantViewUI.js';
+import '../Audio/Audio.js';
+import { ParticipantsAudio } from '../Audio/ParticipantsAudio.js';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import { IconButton } from '../../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../Video/Video.js';
+import '../Video/BaseVideo.js';
+import '../Video/DefaultVideoPlaceholder.js';
+import { chunk } from '../../../utilities/chunk.js';
+import { useRawRemoteParticipants, useFilteredParticipants, usePaginatedLayoutSortPreset } from './hooks.js';
+
+const GROUP_SIZE = 16;
+const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI, }) => {
+    return (jsx("div", { "data-group-size": group.length, className: clsx('str-video__paginated-grid-layout__group', {
+            'str-video__paginated-grid-layout--one': group.length === 1,
+            'str-video__paginated-grid-layout--two-four': group.length >= 2 && group.length <= 4,
+            'str-video__paginated-grid-layout--five-nine': group.length >= 5 && group.length <= 9,
+        }), children: group.map((participant) => (jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
+};
+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, PictureInPicturePlaceholder, muted, } = props;
+    const [page, setPage] = useState(0);
+    const [paginatedGridLayoutWrapperElement, setPaginatedGridLayoutWrapperElement,] = useState(null);
+    const call = useCall();
+    const remoteParticipants = useRawRemoteParticipants();
+    const participants = useFilteredParticipants({
+        excludeLocalParticipant,
+        filterParticipants,
+    });
+    usePaginatedLayoutSortPreset(call);
+    useEffect(() => {
+        if (!paginatedGridLayoutWrapperElement || !call)
+            return;
+        const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);
+        return () => cleanup?.();
+    }, [paginatedGridLayoutWrapperElement, call]);
+    // only used to render video elements
+    const participantGroups = useMemo(() => chunk(participants, groupSize), [participants, groupSize]);
+    const pageCount = participantGroups.length;
+    // update page when page count is reduced and selected page no longer exists
+    useEffect(() => {
+        if (page > pageCount - 1) {
+            setPage(Math.max(0, pageCount - 1));
+        }
+    }, [page, pageCount]);
+    const selectedGroup = participantGroups[page];
+    const mirror = mirrorLocalParticipantVideo ? undefined : false;
+    if (!call)
+        return null;
+    return (jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [!muted && jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), pageArrowsVisible && pageCount > 1 && (jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
+};
+PaginatedGridLayout.displayName = 'PaginatedGridLayout';
+
+export { PaginatedGridLayout };
+//# sourceMappingURL=PaginatedGridLayout.js.map

package/dist/esm/src/core/components/CallLayout/PaginatedGridLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatedGridLayout.js","sources":["../../../../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { useCall } from '@stream-io/video-react-bindings';\nimport { StreamVideoParticipant } from '@stream-io/video-client';\nimport clsx from 'clsx';\n\nimport {\n  DefaultParticipantViewUI,\n  ParticipantView,\n  ParticipantViewProps,\n} from '../ParticipantView';\nimport { ParticipantsAudio } from '../Audio';\nimport { IconButton } from '../../../components';\nimport { chunk } from '../../../utilities';\nimport {\n  ParticipantFilter,\n  ParticipantPredicate,\n  useFilteredParticipants,\n  usePaginatedLayoutSortPreset,\n  useRawRemoteParticipants,\n} from './hooks';\n\nconst GROUP_SIZE = 16;\n\ntype PaginatedGridLayoutGroupProps = {\n  /**\n   * The group of participants to render.\n   */\n  group: Array<StreamVideoParticipant>;\n} & Pick<\n  ParticipantViewProps,\n  'VideoPlaceholder' | 'PictureInPicturePlaceholder' | 'mirror'\n> &\n  Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;\n\nconst PaginatedGridLayoutGroup = ({\n  group,\n  mirror,\n  VideoPlaceholder,\n  PictureInPicturePlaceholder,\n  ParticipantViewUI,\n}: PaginatedGridLayoutGroupProps) => {\n  return (\n    <div\n      data-group-size={group.length}\n      className={clsx('str-video__paginated-grid-layout__group', {\n        'str-video__paginated-grid-layout--one': group.length === 1,\n        'str-video__paginated-grid-layout--two-four':\n          group.length >= 2 && group.length <= 4,\n        'str-video__paginated-grid-layout--five-nine':\n          group.length >= 5 && group.length <= 9,\n      })}\n    >\n      {group.map((participant) => (\n        <ParticipantView\n          key={participant.sessionId}\n          participant={participant}\n          muteAudio\n          mirror={mirror}\n          VideoPlaceholder={VideoPlaceholder}\n          PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n          ParticipantViewUI={ParticipantViewUI}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport type PaginatedGridLayoutProps = {\n  /**\n   * The number of participants to display per page.\n   */\n  groupSize?: number;\n\n  /**\n   * Whether to exclude the local participant from the grid.\n   * @default false\n   */\n  excludeLocalParticipant?: boolean;\n\n  /**\n   * Predicate to filter call participants or a filter object.\n   * @example\n   * // With a predicate:\n   * <PaginatedGridLayout\n   *   filterParticipants={p => p.roles.includes('student')}\n   * />\n   * @example\n   * // With a filter object:\n   * <PaginatedGridLayout\n   *   filterParticipants={{\n   *     $or: [\n   *       { roles: { $contains: 'student' } },\n   *       { isPinned: true },\n   *     ],\n   *   }}\n   * />\n   */\n  filterParticipants?: ParticipantPredicate | ParticipantFilter;\n\n  /**\n   * When set to `false` disables mirroring of the local partipant's video.\n   * @default true\n   */\n  mirrorLocalParticipantVideo?: boolean;\n\n  /**\n   * Turns on/off the pagination arrows.\n   * @default true\n   */\n  pageArrowsVisible?: boolean;\n\n  /**\n   * Whether the layout is muted. Defaults to `false`.\n   */\n  muted?: boolean;\n} & Pick<\n  ParticipantViewProps,\n  'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'\n>;\n\nexport const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {\n  const {\n    groupSize = (props.groupSize || 0) > 0\n      ? props.groupSize || GROUP_SIZE\n      : GROUP_SIZE,\n    excludeLocalParticipant = false,\n    filterParticipants,\n    mirrorLocalParticipantVideo = true,\n    pageArrowsVisible = true,\n    VideoPlaceholder,\n    ParticipantViewUI = DefaultParticipantViewUI,\n    PictureInPicturePlaceholder,\n    muted,\n  } = props;\n  const [page, setPage] = useState(0);\n  const [\n    paginatedGridLayoutWrapperElement,\n    setPaginatedGridLayoutWrapperElement,\n  ] = useState<HTMLDivElement | null>(null);\n\n  const call = useCall();\n  const remoteParticipants = useRawRemoteParticipants();\n  const participants = useFilteredParticipants({\n    excludeLocalParticipant,\n    filterParticipants,\n  });\n\n  usePaginatedLayoutSortPreset(call);\n\n  useEffect(() => {\n    if (!paginatedGridLayoutWrapperElement || !call) return;\n\n    const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);\n\n    return () => cleanup?.();\n  }, [paginatedGridLayoutWrapperElement, call]);\n\n  // only used to render video elements\n  const participantGroups = useMemo(\n    () => chunk(participants, groupSize),\n    [participants, groupSize],\n  );\n\n  const pageCount = participantGroups.length;\n\n  // update page when page count is reduced and selected page no longer exists\n  useEffect(() => {\n    if (page > pageCount - 1) {\n      setPage(Math.max(0, pageCount - 1));\n    }\n  }, [page, pageCount]);\n\n  const selectedGroup = participantGroups[page];\n  const mirror = mirrorLocalParticipantVideo ? undefined : false;\n\n  if (!call) return null;\n\n  return (\n    <div\n      className=\"str-video__paginated-grid-layout__wrapper\"\n      ref={setPaginatedGridLayoutWrapperElement}\n    >\n      {!muted && <ParticipantsAudio participants={remoteParticipants} />}\n      <div className=\"str-video__paginated-grid-layout\">\n        {pageArrowsVisible && pageCount > 1 && (\n          <IconButton\n            icon=\"caret-left\"\n            disabled={page === 0}\n            onClick={() =>\n              setPage((currentPage) => Math.max(0, currentPage - 1))\n            }\n          />\n        )}\n        {selectedGroup && (\n          <PaginatedGridLayoutGroup\n            group={selectedGroup}\n            mirror={mirror}\n            VideoPlaceholder={VideoPlaceholder}\n            ParticipantViewUI={ParticipantViewUI}\n            PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n          />\n        )}\n        {pageArrowsVisible && pageCount > 1 && (\n          <IconButton\n            disabled={page === pageCount - 1}\n            icon=\"caret-right\"\n            onClick={() =>\n              setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))\n            }\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nPaginatedGridLayout.displayName = 'PaginatedGridLayout';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/src/core/components/CallLayout/PipLayout/Grid.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useI18n, useCall } from '@stream-io/video-react-bindings';
+import { useState, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { hasScreenShare } from '@stream-io/video-client';
+import '../../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../../components/Button/CompositeButton.js';
+import { IconButton } from '../../../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import '../../../../components/CallControls/RecordCallButton.js';
+import '../../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import '../../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../../components/Menu/MenuToggle.js';
+import '../../../../components/CallControls/CancelCallButton.js';
+import '../../../../components/CallControls/CallStatsButton.js';
+import '../../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../../components/CallStats/CallStats.js';
+import '../../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../../components/RingingCall/RingingCall.js';
+import '../../../../components/Permissions/PermissionRequests.js';
+import '../../Video/Video.js';
+import '../../Video/BaseVideo.js';
+import '../../Video/DefaultVideoPlaceholder.js';
+import '../../ParticipantView/ParticipantViewContext.js';
+import { ParticipantView } from '../../ParticipantView/ParticipantView.js';
+import { DefaultParticipantViewUI } from '../../ParticipantView/DefaultParticipantViewUI.js';
+import { useFilteredParticipants, usePaginatedLayoutSortPreset } from '../hooks.js';
+import { chunk } from '../../../../utilities/chunk.js';
+
+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';
+
+export { Grid };
+//# sourceMappingURL=Grid.js.map

package/dist/esm/src/core/components/CallLayout/PipLayout/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../../../../../../../src/core/components/CallLayout/PipLayout/Grid.tsx"],"sourcesContent":["import { useCall, useI18n } from '@stream-io/video-react-bindings';\nimport { useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\nimport { hasScreenShare } from '@stream-io/video-client';\nimport { Icon, IconButton } from '../../../../components';\nimport {\n  DefaultParticipantViewUI,\n  ParticipantView,\n} from '../../ParticipantView';\nimport {\n  useFilteredParticipants,\n  usePaginatedLayoutSortPreset,\n} from '../hooks';\nimport { chunk } from '../../../../utilities';\nimport { PipLayoutProps } from './Pip';\n\ntype GridDensity = 'single' | 'small' | 'medium' | 'large' | 'overflow';\n\nexport type PipLayoutGridProps = PipLayoutProps & {\n  /**\n   * The number of participants to display per page.\n   * @default 9\n   */\n  groupSize?: number;\n\n  /**\n   * Whether to show pagination arrows when there are multiple pages.\n   * @default true\n   */\n  pageArrowsVisible?: boolean;\n};\n\nconst getGridDensity = (count: number): GridDensity => {\n  if (count === 1) return 'single';\n  if (count <= 5) return 'small';\n  if (count <= 9) return 'medium';\n  if (count <= 16) return 'large';\n  return 'overflow';\n};\n\n/**\n * A grid-based PIP layout with pagination support.\n * Use this when you need a more structured grid view in PIP mode.\n */\nexport const Grid = (props: PipLayoutGridProps) => {\n  const { t } = useI18n();\n  const {\n    excludeLocalParticipant = false,\n    filterParticipants,\n    mirrorLocalParticipantVideo = true,\n    groupSize = 9,\n    pageArrowsVisible = true,\n    VideoPlaceholder,\n    ParticipantViewUI = DefaultParticipantViewUI,\n  } = props;\n\n  const [page, setPage] = useState(0);\n  const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  const call = useCall();\n  const participants = useFilteredParticipants({\n    excludeLocalParticipant,\n    filterParticipants,\n  });\n  const screenSharingParticipant = participants.find((p) => hasScreenShare(p));\n\n  usePaginatedLayoutSortPreset(call);\n\n  useEffect(() => {\n    if (!wrapperElement || !call) return;\n    return call.setViewport(wrapperElement);\n  }, [wrapperElement, call]);\n\n  const participantGroups = useMemo(\n    () => chunk(participants, groupSize),\n    [participants, groupSize],\n  );\n\n  const pageCount = participantGroups.length;\n\n  if (page > pageCount - 1) {\n    setPage(Math.max(0, pageCount - 1));\n  }\n\n  const selectedGroup = participantGroups[page];\n  const mirror = mirrorLocalParticipantVideo ? undefined : false;\n\n  if (!call) return null;\n\n  return (\n    <div\n      className=\"str-video__pip-layout str-video__pip-layout--grid\"\n      ref={setWrapperElement}\n    >\n      {screenSharingParticipant &&\n        (screenSharingParticipant.isLocalParticipant ? (\n          <div className=\"str-video__pip-screen-share-local\">\n            <Icon icon=\"screen-share-off\" />\n            <span className=\"str-video__pip-screen-share-local__title\">\n              {t('You are presenting your screen')}\n            </span>\n          </div>\n        ) : (\n          <ParticipantView\n            participant={screenSharingParticipant}\n            trackType=\"screenShareTrack\"\n            muteAudio\n            mirror={false}\n            VideoPlaceholder={VideoPlaceholder}\n            ParticipantViewUI={ParticipantViewUI}\n          />\n        ))}\n      <div className=\"str-video__pip-layout__grid-container\">\n        {pageArrowsVisible && page > 0 && (\n          <IconButton\n            icon=\"caret-left\"\n            onClick={() =>\n              setPage((currentPage) => Math.max(0, currentPage - 1))\n            }\n            className=\"str-video__pip-layout__pagination-button str-video__pip-layout__pagination-button--left\"\n          />\n        )}\n        {selectedGroup && (\n          <div\n            className={clsx(\n              'str-video__pip-layout__grid',\n              `str-video__pip-layout__grid--${getGridDensity(selectedGroup.length)}`,\n            )}\n          >\n            {selectedGroup.map((participant) => (\n              <ParticipantView\n                key={participant.sessionId}\n                participant={participant}\n                muteAudio\n                mirror={mirror}\n                VideoPlaceholder={VideoPlaceholder}\n                ParticipantViewUI={ParticipantViewUI}\n              />\n            ))}\n          </div>\n        )}\n        {pageArrowsVisible && page < pageCount - 1 && (\n          <IconButton\n            icon=\"caret-right\"\n            onClick={() =>\n              setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))\n            }\n            className=\"str-video__pip-layout__pagination-button str-video__pip-layout__pagination-button--right\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nGrid.displayName = 'PipLayout.Grid';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/core/components/CallLayout/PipLayout/Host.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import '../../Audio/Audio.js';
+import { ParticipantsAudio } from '../../Audio/ParticipantsAudio.js';
+import { useRawRemoteParticipants } from '../hooks.js';
+
+const Host = () => {
+    const remoteParticipants = useRawRemoteParticipants();
+    return jsx(ParticipantsAudio, { participants: remoteParticipants });
+};
+Host.displayName = 'PipLayout.Host';
+
+export { Host };
+//# sourceMappingURL=Host.js.map

package/dist/esm/src/core/components/CallLayout/PipLayout/Host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Host.js","sources":["../../../../../../../../../src/core/components/CallLayout/PipLayout/Host.tsx"],"sourcesContent":["import { ParticipantsAudio } from '../../Audio';\nimport { useRawRemoteParticipants } from '../hooks';\n\nexport const Host = () => {\n  const remoteParticipants = useRawRemoteParticipants();\n  return <ParticipantsAudio participants={remoteParticipants} />;\n};\n\nHost.displayName = 'PipLayout.Host';\n"],"names":["_jsx"],"mappings":";;;;;AAGO,MAAM,IAAI,GAAG,MAAK;AACvB,IAAA,MAAM,kBAAkB,GAAG,wBAAwB,EAAE;AACrD,IAAA,OAAOA,IAAC,iBAAiB,EAAA,EAAC,YAAY,EAAE,kBAAkB,GAAI;AAChE;AAEA,IAAI,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/esm/src/core/components/CallLayout/PipLayout/Pip.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useI18n, useCall } from '@stream-io/video-react-bindings';
+import { useState, useEffect } from 'react';
+import { hasScreenShare } from '@stream-io/video-client';
+import 'clsx';
+import '../../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../../components/Button/CompositeButton.js';
+import '../../../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import '../../../../components/CallControls/RecordCallButton.js';
+import '../../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import '../../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../../components/Menu/MenuToggle.js';
+import '../../../../components/CallControls/CancelCallButton.js';
+import '../../../../components/CallControls/CallStatsButton.js';
+import '../../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../../components/CallStats/CallStats.js';
+import '../../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../../components/RingingCall/RingingCall.js';
+import '../../../../components/Permissions/PermissionRequests.js';
+import '../../Video/Video.js';
+import '../../Video/BaseVideo.js';
+import '../../Video/DefaultVideoPlaceholder.js';
+import '../../ParticipantView/ParticipantViewContext.js';
+import { ParticipantView } from '../../ParticipantView/ParticipantView.js';
+import { DefaultParticipantViewUI } from '../../ParticipantView/DefaultParticipantViewUI.js';
+import { useFilteredParticipants, usePaginatedLayoutSortPreset } from '../hooks.js';
+
+const Pip = (props) => {
+    const { t } = useI18n();
+    const { excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
+    const [layoutWrapperElement, setLayoutWrapperElement] = useState(null);
+    const call = useCall();
+    const participants = useFilteredParticipants({
+        excludeLocalParticipant,
+        filterParticipants,
+    });
+    const screenSharingParticipant = participants.find((p) => hasScreenShare(p));
+    usePaginatedLayoutSortPreset(call);
+    useEffect(() => {
+        if (!layoutWrapperElement || !call)
+            return;
+        return call.setViewport(layoutWrapperElement);
+    }, [layoutWrapperElement, call]);
+    const mirror = mirrorLocalParticipantVideo ? undefined : false;
+    if (!call)
+        return null;
+    return (jsxs("div", { className: "str-video__pip-layout", ref: setLayoutWrapperElement, 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 }))), participants.map((participant) => (jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId)))] }));
+};
+Pip.displayName = 'PipLayout.Pip';
+
+export { Pip };
+//# sourceMappingURL=Pip.js.map

package/dist/esm/src/core/components/CallLayout/PipLayout/Pip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pip.js","sources":["../../../../../../../../../src/core/components/CallLayout/PipLayout/Pip.tsx"],"sourcesContent":["import { useCall, useI18n } from '@stream-io/video-react-bindings';\nimport { useEffect, useState } from 'react';\n\nimport { hasScreenShare } from '@stream-io/video-client';\nimport { Icon } from '../../../../components';\nimport {\n  DefaultParticipantViewUI,\n  ParticipantView,\n  ParticipantViewProps,\n} from '../../ParticipantView';\nimport {\n  ParticipantFilter,\n  ParticipantPredicate,\n  useFilteredParticipants,\n  usePaginatedLayoutSortPreset,\n} from '../hooks';\n\nexport type PipLayoutProps = {\n  /**\n   * Whether to exclude the local participant from the grid.\n   * @default false\n   */\n  excludeLocalParticipant?: boolean;\n\n  /**\n   * Predicate to filter call participants or a filter object.\n   * @example\n   * // With a predicate:\n   * <PipLayout\n   *   filterParticipants={p => p.roles.includes('student')}\n   * />\n   * @example\n   * // With a filter object:\n   * <PipLayout\n   *   filterParticipants={{\n   *     $or: [\n   *       { roles: { $contains: 'student' } },\n   *       { isPinned: true },\n   *     ],\n   *   }}\n   * />\n   */\n  filterParticipants?: ParticipantPredicate | ParticipantFilter;\n\n  /**\n   * When set to `false` disables mirroring of the local partipant's video.\n   * @default true\n   */\n  mirrorLocalParticipantVideo?: boolean;\n} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;\n\nexport const Pip = (props: PipLayoutProps) => {\n  const { t } = useI18n();\n  const {\n    excludeLocalParticipant = false,\n    filterParticipants,\n    mirrorLocalParticipantVideo = true,\n    VideoPlaceholder,\n    ParticipantViewUI = DefaultParticipantViewUI,\n  } = props;\n  const [layoutWrapperElement, setLayoutWrapperElement] =\n    useState<HTMLDivElement | null>(null);\n\n  const call = useCall();\n  const participants = useFilteredParticipants({\n    excludeLocalParticipant,\n    filterParticipants,\n  });\n  const screenSharingParticipant = participants.find((p) => hasScreenShare(p));\n\n  usePaginatedLayoutSortPreset(call);\n\n  useEffect(() => {\n    if (!layoutWrapperElement || !call) return;\n    return call.setViewport(layoutWrapperElement);\n  }, [layoutWrapperElement, call]);\n\n  const mirror = mirrorLocalParticipantVideo ? undefined : false;\n\n  if (!call) return null;\n\n  return (\n    <div className=\"str-video__pip-layout\" ref={setLayoutWrapperElement}>\n      {screenSharingParticipant &&\n        (screenSharingParticipant.isLocalParticipant ? (\n          <div className=\"str-video__pip-screen-share-local\">\n            <Icon icon=\"screen-share-off\" />\n            <span className=\"str-video__pip-screen-share-local__title\">\n              {t('You are presenting your screen')}\n            </span>\n          </div>\n        ) : (\n          <ParticipantView\n            participant={screenSharingParticipant}\n            trackType=\"screenShareTrack\"\n            muteAudio\n            mirror={false}\n            VideoPlaceholder={VideoPlaceholder}\n            ParticipantViewUI={ParticipantViewUI}\n          />\n        ))}\n      {participants.map((participant) => (\n        <ParticipantView\n          key={participant.sessionId}\n          participant={participant}\n          muteAudio\n          mirror={mirror}\n          VideoPlaceholder={VideoPlaceholder}\n          ParticipantViewUI={ParticipantViewUI}\n        />\n      ))}\n    </div>\n  );\n};\n\nPip.displayName = 'PipLayout.Pip';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDO,MAAM,GAAG,GAAG,CAAC,KAAqB,KAAI;AAC3C,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EACJ,uBAAuB,GAAG,KAAK,EAC/B,kBAAkB,EAClB,2BAA2B,GAAG,IAAI,EAClC,gBAAgB,EAChB,iBAAiB,GAAG,wBAAwB,GAC7C,GAAG,KAAK;IACT,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GACnD,QAAQ,CAAwB,IAAI,CAAC;AAEvC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,MAAM,YAAY,GAAG,uBAAuB,CAAC;QAC3C,uBAAuB;QACvB,kBAAkB;AACnB,KAAA,CAAC;AACF,IAAA,MAAM,wBAAwB,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC;IAE5E,4BAA4B,CAAC,IAAI,CAAC;IAElC,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI;YAAE;AACpC,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC;AAC/C,IAAA,CAAC,EAAE,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAEhC,MAAM,MAAM,GAAG,2BAA2B,GAAG,SAAS,GAAG,KAAK;AAE9D,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;IAEtB,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,EAAC,GAAG,EAAE,uBAAuB,EAAA,QAAA,EAAA,CAChE,wBAAwB;iBACtB,wBAAwB,CAAC,kBAAkB,IAC1CA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDC,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,EAAA,CAAG,EAChCA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,0CAA0C,YACvD,CAAC,CAAC,gCAAgC,CAAC,EAAA,CAC/B,IACH,KAENA,GAAA,CAAC,eAAe,EAAA,EACd,WAAW,EAAE,wBAAwB,EACrC,SAAS,EAAC,kBAAkB,EAC5B,SAAS,EAAA,IAAA,EACT,MAAM,EAAE,KAAK,EACb,gBAAgB,EAAE,gBAAgB,EAClC,iBAAiB,EAAE,iBAAiB,EAAA,CACpC,CACH,CAAC,EACH,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,MAC5BA,GAAA,CAAC,eAAe,EAAA,EAEd,WAAW,EAAE,WAAW,EACxB,SAAS,EAAA,IAAA,EACT,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,iBAAiB,EAAE,iBAAiB,EAAA,EAL/B,WAAW,CAAC,SAAS,CAM1B,CACH,CAAC,CAAA,EAAA,CACE;AAEV;AAEA,GAAG,CAAC,WAAW,GAAG,eAAe;;;;"}

package/dist/esm/src/core/components/CallLayout/PipLayout/index.js

@@ -0,0 +1,8 @@
+import { Pip } from './Pip.js';
+import { Host } from './Host.js';
+import { Grid } from './Grid.js';
+
+const PipLayout = { Pip, Host, Grid };
+
+export { PipLayout };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/core/components/CallLayout/PipLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../../src/core/components/CallLayout/PipLayout/index.ts"],"sourcesContent":["import { Pip } from './Pip';\nimport { Host } from './Host';\nimport { Grid } from './Grid';\n\nexport const PipLayout = { Pip, Host, Grid };\n"],"names":[],"mappings":";;;;AAIO,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI;;;;"}