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

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

@@ -0,0 +1,103 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { hasScreenShare } from '@stream-io/video-client';
+import { useCall, useCallStateHooks, useSpeakerLayoutSortPreset } from '@stream-io/video-react-bindings';
+import '../ParticipantView/ParticipantViewContext.js';
+import '../../../components/Menu/MenuToggle.js';
+import { ParticipantView } from '../ParticipantView/ParticipantView.js';
+import { DefaultParticipantViewUI } from '../ParticipantView/DefaultParticipantViewUI.js';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import { IconButton } from '../../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import { useVerticalScrollPosition, useHorizontalScrollPosition } from '../../../hooks/useScrollPosition.js';
+import { useDragToScroll } from '../../../hooks/useDragToScroll.js';
+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 { useRawRemoteParticipants, useFilteredParticipants } from './hooks.js';
+import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit.js';
+import '../Audio/Audio.js';
+import { ParticipantsAudio } from '../Audio/ParticipantsAudio.js';
+
+const DefaultParticipantViewUIBar = () => (jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
+const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, filterParticipants, pageArrowsVisible = true, muted, enableDragToScroll = false, }) => {
+    const call = useCall();
+    const { useParticipants } = useCallStateHooks();
+    const allParticipants = useParticipants();
+    const remoteParticipants = useRawRemoteParticipants();
+    const [participantInSpotlight, ...otherParticipants] = useFilteredParticipants({ excludeLocalParticipant, filterParticipants });
+    const [participantsBarWrapperElement, setParticipantsBarWrapperElement] = useState(null);
+    const [participantsBarElement, setParticipantsBarElement] = useState(null);
+    const [buttonsWrapperElement, setButtonsWrapperElement] = useState(null);
+    const isSpeakerScreenSharing = participantInSpotlight && hasScreenShare(participantInSpotlight);
+    const hardLimit = useCalculateHardLimit(buttonsWrapperElement, participantsBarElement, participantsBarLimit);
+    const isVertical = participantsBarPosition === 'left' || participantsBarPosition === 'right';
+    const isHorizontal = participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
+    useEffect(() => {
+        if (!participantsBarWrapperElement || !call)
+            return;
+        const cleanup = call.setViewport(participantsBarWrapperElement);
+        return () => cleanup?.();
+    }, [participantsBarWrapperElement, call]);
+    const isOneOnOneCall = allParticipants.length === 2;
+    useSpeakerLayoutSortPreset(call, isOneOnOneCall);
+    useDragToScroll(participantsBarWrapperElement, {
+        enabled: enableDragToScroll,
+    });
+    let participantsWithAppliedLimit = otherParticipants;
+    const hardLimitToApply = isVertical
+        ? hardLimit.vertical
+        : hardLimit.horizontal;
+    if (typeof participantsBarLimit !== 'undefined' &&
+        hardLimitToApply !== null) {
+        participantsWithAppliedLimit = otherParticipants.slice(0, 
+        // subtract 1 if speaker is sharing screen as
+        // that one is rendered independently from otherParticipants array
+        hardLimitToApply - (isSpeakerScreenSharing ? 1 : 0));
+    }
+    const mirror = mirrorLocalParticipantVideo ? undefined : false;
+    if (!call)
+        return null;
+    const renderParticipantsBar = participantsBarPosition &&
+        (participantsWithAppliedLimit.length > 0 || isSpeakerScreenSharing);
+    return (jsxs("div", { className: "str-video__speaker-layout__wrapper", children: [!muted && jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxs("div", { className: clsx('str-video__speaker-layout', participantsBarPosition &&
+                    `str-video__speaker-layout--variant-${participantsBarPosition}`), children: [jsx("div", { className: "str-video__speaker-layout__spotlight", children: participantInSpotlight && (jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: true, mirror: mirror, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder })) }), renderParticipantsBar && (jsxs("div", { ref: setButtonsWrapperElement, className: "str-video__speaker-layout__participants-bar-buttons-wrapper", children: [jsx("div", { className: "str-video__speaker-layout__participants-bar-wrapper", ref: setParticipantsBarWrapperElement, children: jsxs("div", { ref: setParticipantsBarElement, className: "str-video__speaker-layout__participants-bar", children: [isSpeakerScreenSharing && (jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, mirror: mirror, muteAudio: true }) }, participantInSpotlight.sessionId)), participantsWithAppliedLimit.map((participant) => (jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, mirror: mirror, muteAudio: true }) }, participant.sessionId)))] }) }), pageArrowsVisible && isVertical && (jsx(VerticalScrollButtons, { scrollWrapper: participantsBarWrapperElement })), pageArrowsVisible && isHorizontal && (jsx(HorizontalScrollButtons, { scrollWrapper: participantsBarWrapperElement }))] }))] })] }));
+};
+SpeakerLayout.displayName = 'SpeakerLayout';
+const HorizontalScrollButtons = ({ scrollWrapper, }) => {
+    const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
+    const scrollStartClickHandler = () => {
+        scrollWrapper?.scrollBy({ left: -150, behavior: 'smooth' });
+    };
+    const scrollEndClickHandler = () => {
+        scrollWrapper?.scrollBy({ left: 150, behavior: 'smooth' });
+    };
+    return (jsxs(Fragment, { children: [scrollPosition && scrollPosition !== 'start' && (jsx(IconButton, { onClick: scrollStartClickHandler, icon: "caret-left", className: "str-video__speaker-layout__participants-bar--button-left" })), scrollPosition && scrollPosition !== 'end' && (jsx(IconButton, { onClick: scrollEndClickHandler, icon: "caret-right", className: "str-video__speaker-layout__participants-bar--button-right" }))] }));
+};
+const VerticalScrollButtons = ({ scrollWrapper, }) => {
+    const scrollPosition = useVerticalScrollPosition(scrollWrapper);
+    const scrollTopClickHandler = () => {
+        scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' });
+    };
+    const scrollBottomClickHandler = () => {
+        scrollWrapper?.scrollBy({ top: 150, behavior: 'smooth' });
+    };
+    return (jsxs(Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (jsx(IconButton, { onClick: scrollTopClickHandler, icon: "caret-up", className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (jsx(IconButton, { onClick: scrollBottomClickHandler, icon: "caret-down", className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
+};
+
+export { SpeakerLayout };
+//# sourceMappingURL=SpeakerLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpeakerLayout.js","sources":["../../../../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport clsx from 'clsx';\nimport { hasScreenShare } from '@stream-io/video-client';\nimport {\n  useCall,\n  useCallStateHooks,\n  useSpeakerLayoutSortPreset,\n} from '@stream-io/video-react-bindings';\n\nimport {\n  DefaultParticipantViewUI,\n  ParticipantView,\n  ParticipantViewProps,\n} from '../ParticipantView';\nimport { IconButton } from '../../../components';\nimport {\n  useDragToScroll,\n  useHorizontalScrollPosition,\n  useVerticalScrollPosition,\n} from '../../../hooks';\nimport {\n  ParticipantFilter,\n  ParticipantPredicate,\n  useFilteredParticipants,\n  useRawRemoteParticipants,\n} from './hooks';\nimport { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';\nimport { ParticipantsAudio } from '../Audio';\n\nexport type SpeakerLayoutProps = {\n  /**\n   * The UI to be used for the participant in the spotlight.\n   */\n  ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];\n\n  /**\n   * The UI to be used for the participants in the participants bar.\n   */\n  ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];\n\n  /**\n   * The position of the participants who are not in focus.\n   * Providing `null` will hide the bar.\n   */\n  participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right' | null;\n\n  /**\n   * Hard limits the number of the participants rendered in the participants bar.\n   * Providing string `dynamic` will calculate hard limit based on screen width/height.\n   */\n  participantsBarLimit?: 'dynamic' | number;\n\n  /**\n   * When set to `true` will exclude the local participant from layout.\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   * <SpeakerLayout\n   *   filterParticipants={p => p.roles.includes('student')}\n   * />\n   * @example\n   * // With a filter object:\n   * <SpeakerLayout\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 participant'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\n  /**\n   * Whether to enable drag-to-scroll functionality on the participants bar.\n   * @default false\n   */\n  enableDragToScroll?: boolean;\n} & Pick<\n  ParticipantViewProps,\n  'VideoPlaceholder' | 'PictureInPicturePlaceholder'\n>;\n\nconst DefaultParticipantViewUIBar = () => (\n  <DefaultParticipantViewUI menuPlacement=\"top-end\" />\n);\n\nexport const SpeakerLayout = ({\n  ParticipantViewUIBar = DefaultParticipantViewUIBar,\n  ParticipantViewUISpotlight = DefaultParticipantViewUI,\n  VideoPlaceholder,\n  PictureInPicturePlaceholder,\n  participantsBarPosition = 'bottom',\n  participantsBarLimit,\n  mirrorLocalParticipantVideo = true,\n  excludeLocalParticipant = false,\n  filterParticipants,\n  pageArrowsVisible = true,\n  muted,\n  enableDragToScroll = false,\n}: SpeakerLayoutProps) => {\n  const call = useCall();\n  const { useParticipants } = useCallStateHooks();\n  const allParticipants = useParticipants();\n  const remoteParticipants = useRawRemoteParticipants();\n  const [participantInSpotlight, ...otherParticipants] =\n    useFilteredParticipants({ excludeLocalParticipant, filterParticipants });\n  const [participantsBarWrapperElement, setParticipantsBarWrapperElement] =\n    useState<HTMLDivElement | null>(null);\n  const [participantsBarElement, setParticipantsBarElement] =\n    useState<HTMLDivElement | null>(null);\n  const [buttonsWrapperElement, setButtonsWrapperElement] =\n    useState<HTMLDivElement | null>(null);\n\n  const isSpeakerScreenSharing =\n    participantInSpotlight && hasScreenShare(participantInSpotlight);\n  const hardLimit = useCalculateHardLimit(\n    buttonsWrapperElement,\n    participantsBarElement,\n    participantsBarLimit,\n  );\n\n  const isVertical =\n    participantsBarPosition === 'left' || participantsBarPosition === 'right';\n  const isHorizontal =\n    participantsBarPosition === 'top' || participantsBarPosition === 'bottom';\n\n  useEffect(() => {\n    if (!participantsBarWrapperElement || !call) return;\n\n    const cleanup = call.setViewport(participantsBarWrapperElement);\n\n    return () => cleanup?.();\n  }, [participantsBarWrapperElement, call]);\n\n  const isOneOnOneCall = allParticipants.length === 2;\n  useSpeakerLayoutSortPreset(call, isOneOnOneCall);\n  useDragToScroll(participantsBarWrapperElement, {\n    enabled: enableDragToScroll,\n  });\n\n  let participantsWithAppliedLimit = otherParticipants;\n\n  const hardLimitToApply = isVertical\n    ? hardLimit.vertical\n    : hardLimit.horizontal;\n\n  if (\n    typeof participantsBarLimit !== 'undefined' &&\n    hardLimitToApply !== null\n  ) {\n    participantsWithAppliedLimit = otherParticipants.slice(\n      0,\n      // subtract 1 if speaker is sharing screen as\n      // that one is rendered independently from otherParticipants array\n      hardLimitToApply - (isSpeakerScreenSharing ? 1 : 0),\n    );\n  }\n\n  const mirror = mirrorLocalParticipantVideo ? undefined : false;\n\n  if (!call) return null;\n\n  const renderParticipantsBar =\n    participantsBarPosition &&\n    (participantsWithAppliedLimit.length > 0 || isSpeakerScreenSharing);\n  return (\n    <div className=\"str-video__speaker-layout__wrapper\">\n      {!muted && <ParticipantsAudio participants={remoteParticipants} />}\n      <div\n        className={clsx(\n          'str-video__speaker-layout',\n          participantsBarPosition &&\n            `str-video__speaker-layout--variant-${participantsBarPosition}`,\n        )}\n      >\n        <div className=\"str-video__speaker-layout__spotlight\">\n          {participantInSpotlight && (\n            <ParticipantView\n              participant={participantInSpotlight}\n              muteAudio={true}\n              mirror={mirror}\n              trackType={\n                isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack'\n              }\n              ParticipantViewUI={ParticipantViewUISpotlight}\n              VideoPlaceholder={VideoPlaceholder}\n              PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n            />\n          )}\n        </div>\n        {renderParticipantsBar && (\n          <div\n            ref={setButtonsWrapperElement}\n            className=\"str-video__speaker-layout__participants-bar-buttons-wrapper\"\n          >\n            <div\n              className=\"str-video__speaker-layout__participants-bar-wrapper\"\n              ref={setParticipantsBarWrapperElement}\n            >\n              <div\n                ref={setParticipantsBarElement}\n                className=\"str-video__speaker-layout__participants-bar\"\n              >\n                {isSpeakerScreenSharing && (\n                  <div\n                    className=\"str-video__speaker-layout__participant-tile\"\n                    key={participantInSpotlight.sessionId}\n                  >\n                    <ParticipantView\n                      participant={participantInSpotlight}\n                      ParticipantViewUI={ParticipantViewUIBar}\n                      VideoPlaceholder={VideoPlaceholder}\n                      PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n                      mirror={mirror}\n                      muteAudio={true}\n                    />\n                  </div>\n                )}\n                {participantsWithAppliedLimit.map((participant) => (\n                  <div\n                    className=\"str-video__speaker-layout__participant-tile\"\n                    key={participant.sessionId}\n                  >\n                    <ParticipantView\n                      participant={participant}\n                      ParticipantViewUI={ParticipantViewUIBar}\n                      VideoPlaceholder={VideoPlaceholder}\n                      PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n                      mirror={mirror}\n                      muteAudio={true}\n                    />\n                  </div>\n                ))}\n              </div>\n            </div>\n            {pageArrowsVisible && isVertical && (\n              <VerticalScrollButtons\n                scrollWrapper={participantsBarWrapperElement}\n              />\n            )}\n            {pageArrowsVisible && isHorizontal && (\n              <HorizontalScrollButtons\n                scrollWrapper={participantsBarWrapperElement}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nSpeakerLayout.displayName = 'SpeakerLayout';\n\ntype ScrollButtonsProps<T extends HTMLElement> = {\n  scrollWrapper: T | null;\n};\n\nconst HorizontalScrollButtons = <T extends HTMLElement>({\n  scrollWrapper,\n}: ScrollButtonsProps<T>) => {\n  const scrollPosition = useHorizontalScrollPosition(scrollWrapper);\n\n  const scrollStartClickHandler = () => {\n    scrollWrapper?.scrollBy({ left: -150, behavior: 'smooth' });\n  };\n\n  const scrollEndClickHandler = () => {\n    scrollWrapper?.scrollBy({ left: 150, behavior: 'smooth' });\n  };\n  return (\n    <>\n      {scrollPosition && scrollPosition !== 'start' && (\n        <IconButton\n          onClick={scrollStartClickHandler}\n          icon=\"caret-left\"\n          className=\"str-video__speaker-layout__participants-bar--button-left\"\n        />\n      )}\n      {scrollPosition && scrollPosition !== 'end' && (\n        <IconButton\n          onClick={scrollEndClickHandler}\n          icon=\"caret-right\"\n          className=\"str-video__speaker-layout__participants-bar--button-right\"\n        />\n      )}\n    </>\n  );\n};\n\nconst VerticalScrollButtons = <T extends HTMLElement>({\n  scrollWrapper,\n}: ScrollButtonsProps<T>) => {\n  const scrollPosition = useVerticalScrollPosition(scrollWrapper);\n\n  const scrollTopClickHandler = () => {\n    scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' });\n  };\n\n  const scrollBottomClickHandler = () => {\n    scrollWrapper?.scrollBy({ top: 150, behavior: 'smooth' });\n  };\n  return (\n    <>\n      {scrollPosition && scrollPosition !== 'top' && (\n        <IconButton\n          onClick={scrollTopClickHandler}\n          icon=\"caret-up\"\n          className=\"str-video__speaker-layout__participants-bar--button-top\"\n        />\n      )}\n      {scrollPosition && scrollPosition !== 'bottom' && (\n        <IconButton\n          onClick={scrollBottomClickHandler}\n          icon=\"caret-down\"\n          className=\"str-video__speaker-layout__participants-bar--button-bottom\"\n        />\n      )}\n    </>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -0,0 +1,62 @@
+import { useMemo, useEffect } from 'react';
+import { paginatedLayoutSortPreset, CallTypes, defaultSortPreset, hasScreenShare, hasAudio, hasVideo, isPinned } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { applyFilter } from '../../../utilities/filter.js';
+
+const useFilteredParticipants = ({ excludeLocalParticipant = false, filterParticipants, }) => {
+    const { useParticipants, useRemoteParticipants } = useCallStateHooks();
+    const allParticipants = useParticipants();
+    const remoteParticipants = useRemoteParticipants();
+    return useMemo(() => {
+        const unfilteredParticipants = excludeLocalParticipant
+            ? remoteParticipants
+            : allParticipants;
+        return filterParticipants
+            ? applyParticipantsFilter(unfilteredParticipants, filterParticipants)
+            : unfilteredParticipants;
+    }, [
+        allParticipants,
+        remoteParticipants,
+        excludeLocalParticipant,
+        filterParticipants,
+    ]);
+};
+const applyParticipantsFilter = (participants, filter) => {
+    const filterCallback = typeof filter === 'function'
+        ? filter
+        : (participant) => applyFilter({
+            userId: participant.userId,
+            isSpeaking: participant.isSpeaking,
+            isDominantSpeaker: participant.isDominantSpeaker,
+            name: participant.name,
+            roles: participant.roles,
+            isPinned: isPinned(participant),
+            hasVideo: hasVideo(participant),
+            hasAudio: hasAudio(participant),
+            hasScreenShare: hasScreenShare(participant),
+        }, filter);
+    return participants.filter(filterCallback);
+};
+const usePaginatedLayoutSortPreset = (call) => {
+    useEffect(() => {
+        if (!call)
+            return;
+        call.setSortParticipantsBy(paginatedLayoutSortPreset);
+        return () => {
+            resetSortPreset(call);
+        };
+    }, [call]);
+};
+const useRawRemoteParticipants = () => {
+    const { useRawParticipants } = useCallStateHooks();
+    const rawParticipants = useRawParticipants();
+    return useMemo(() => rawParticipants.filter((p) => !p.isLocalParticipant), [rawParticipants]);
+};
+const resetSortPreset = (call) => {
+    // reset the sorting to the default for the call type
+    const callConfig = CallTypes.get(call.type);
+    call.setSortParticipantsBy(callConfig.options.sortParticipantsBy || defaultSortPreset);
+};
+
+export { applyParticipantsFilter, useFilteredParticipants, usePaginatedLayoutSortPreset, useRawRemoteParticipants };
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../../../../../../../../src/core/components/CallLayout/hooks.ts"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport {\n  Call,\n  CallTypes,\n  defaultSortPreset,\n  hasAudio,\n  hasScreenShare,\n  hasVideo,\n  isPinned,\n  paginatedLayoutSortPreset,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { applyFilter, Filter } from '../../../utilities/filter';\n\nexport type FilterableParticipant = Pick<\n  StreamVideoParticipant,\n  'userId' | 'isSpeaking' | 'isDominantSpeaker' | 'name' | 'roles'\n> & {\n  isPinned: boolean;\n  hasVideo: boolean;\n  hasAudio: boolean;\n  hasScreenShare: boolean;\n};\n\nexport type ParticipantFilter = Filter<FilterableParticipant>;\nexport type ParticipantPredicate = (\n  participant: StreamVideoParticipant,\n) => boolean;\n\nexport const useFilteredParticipants = ({\n  excludeLocalParticipant = false,\n  filterParticipants,\n}: {\n  excludeLocalParticipant?: boolean;\n  filterParticipants?: ParticipantFilter | ParticipantPredicate;\n}) => {\n  const { useParticipants, useRemoteParticipants } = useCallStateHooks();\n  const allParticipants = useParticipants();\n  const remoteParticipants = useRemoteParticipants();\n  return useMemo(() => {\n    const unfilteredParticipants = excludeLocalParticipant\n      ? remoteParticipants\n      : allParticipants;\n\n    return filterParticipants\n      ? applyParticipantsFilter(unfilteredParticipants, filterParticipants)\n      : unfilteredParticipants;\n  }, [\n    allParticipants,\n    remoteParticipants,\n    excludeLocalParticipant,\n    filterParticipants,\n  ]);\n};\n\nexport const applyParticipantsFilter = (\n  participants: StreamVideoParticipant[],\n  filter: ParticipantPredicate | ParticipantFilter,\n) => {\n  const filterCallback =\n    typeof filter === 'function'\n      ? filter\n      : (participant: StreamVideoParticipant) =>\n          applyFilter(\n            {\n              userId: participant.userId,\n              isSpeaking: participant.isSpeaking,\n              isDominantSpeaker: participant.isDominantSpeaker,\n              name: participant.name,\n              roles: participant.roles,\n              isPinned: isPinned(participant),\n              hasVideo: hasVideo(participant),\n              hasAudio: hasAudio(participant),\n              hasScreenShare: hasScreenShare(participant),\n            },\n            filter,\n          );\n\n  return participants.filter(filterCallback);\n};\n\nexport const usePaginatedLayoutSortPreset = (call: Call | undefined) => {\n  useEffect(() => {\n    if (!call) return;\n    call.setSortParticipantsBy(paginatedLayoutSortPreset);\n    return () => {\n      resetSortPreset(call);\n    };\n  }, [call]);\n};\n\nexport const useRawRemoteParticipants = () => {\n  const { useRawParticipants } = useCallStateHooks();\n  const rawParticipants = useRawParticipants();\n  return useMemo(\n    () => rawParticipants.filter((p) => !p.isLocalParticipant),\n    [rawParticipants],\n  );\n};\n\nconst resetSortPreset = (call: Call) => {\n  // reset the sorting to the default for the call type\n  const callConfig = CallTypes.get(call.type);\n  call.setSortParticipantsBy(\n    callConfig.options.sortParticipantsBy || defaultSortPreset,\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,uBAAuB,GAAG,CAAC,EACtC,uBAAuB,GAAG,KAAK,EAC/B,kBAAkB,GAInB,KAAI;IACH,MAAM,EAAE,eAAe,EAAE,qBAAqB,EAAE,GAAG,iBAAiB,EAAE;AACtE,IAAA,MAAM,eAAe,GAAG,eAAe,EAAE;AACzC,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,EAAE;IAClD,OAAO,OAAO,CAAC,MAAK;QAClB,MAAM,sBAAsB,GAAG;AAC7B,cAAE;cACA,eAAe;AAEnB,QAAA,OAAO;AACL,cAAE,uBAAuB,CAAC,sBAAsB,EAAE,kBAAkB;cAClE,sBAAsB;AAC5B,IAAA,CAAC,EAAE;QACD,eAAe;QACf,kBAAkB;QAClB,uBAAuB;QACvB,kBAAkB;AACnB,KAAA,CAAC;AACJ;MAEa,uBAAuB,GAAG,CACrC,YAAsC,EACtC,MAAgD,KAC9C;AACF,IAAA,MAAM,cAAc,GAClB,OAAO,MAAM,KAAK;AAChB,UAAE;AACF,UAAE,CAAC,WAAmC,KAClC,WAAW,CACT;YACE,MAAM,EAAE,WAAW,CAAC,MAAM;YAC1B,UAAU,EAAE,WAAW,CAAC,UAAU;YAClC,iBAAiB,EAAE,WAAW,CAAC,iBAAiB;YAChD,IAAI,EAAE,WAAW,CAAC,IAAI;YACtB,KAAK,EAAE,WAAW,CAAC,KAAK;AACxB,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC;AAC/B,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC;AAC/B,YAAA,QAAQ,EAAE,QAAQ,CAAC,WAAW,CAAC;AAC/B,YAAA,cAAc,EAAE,cAAc,CAAC,WAAW,CAAC;SAC5C,EACD,MAAM,CACP;AAET,IAAA,OAAO,YAAY,CAAC,MAAM,CAAC,cAAc,CAAC;AAC5C;AAEO,MAAM,4BAA4B,GAAG,CAAC,IAAsB,KAAI;IACrE,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,IAAI,CAAC,qBAAqB,CAAC,yBAAyB,CAAC;AACrD,QAAA,OAAO,MAAK;YACV,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACZ;AAEO,MAAM,wBAAwB,GAAG,MAAK;AAC3C,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;AAClD,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE;IAC5C,OAAO,OAAO,CACZ,MAAM,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAC1D,CAAC,eAAe,CAAC,CAClB;AACH;AAEA,MAAM,eAAe,GAAG,CAAC,IAAU,KAAI;;IAErC,MAAM,UAAU,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3C,IAAI,CAAC,qBAAqB,CACxB,UAAU,CAAC,OAAO,CAAC,kBAAkB,IAAI,iBAAiB,CAC3D;AACH,CAAC;;;;"}

package/dist/esm/src/core/components/ParticipantView/DefaultParticipantViewUI.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { hasScreenShare, SfuModels, hasAudio, hasVideo, hasPausedTrack } from '@stream-io/video-client';
+import { useCallStateHooks, useCall, useI18n, useIsAudioConnecting, useIsVideoConnecting } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import { IconButton } from '../../../components/Button/IconButton.js';
+import { Notification } from '../../../components/Notification/Notification.js';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import '@floating-ui/react';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import { MenuToggle } from '../../../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 { LoadingIndicator } from '../../../components/LoadingIndicator/LoadingIndicator.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import { Reaction } from '../../../components/Reaction/Reaction.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../Video/Video.js';
+import '../Video/BaseVideo.js';
+import '../Video/DefaultVideoPlaceholder.js';
+import { ParticipantActionsContextMenu } from './ParticipantActionsContextMenu.js';
+import { useParticipantViewContext } from './ParticipantViewContext.js';
+
+const ToggleButton = forwardRef(function ToggleButtonRender(props, ref) {
+    return jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+});
+const DefaultScreenShareOverlay = () => {
+    const call = useCall();
+    const { t } = useI18n();
+    const stopScreenShare = () => {
+        call?.screenShare.disable().catch((err) => {
+            console.error('Failed to stop screen sharing:', err);
+        });
+    };
+    return (jsxs("div", { className: "str-video__screen-share-overlay", children: [jsx(Icon, { icon: "screen-share-off" }), jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxs("button", { onClick: stopScreenShare, type: "button", className: "str-video__screen-share-overlay__button", children: [jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
+};
+/**
+ * Rendered over a remote participant's tile when the browser's autoplay policy
+ * has blocked their audio. Selecting it calls `call.resumeAudio()`, unblocking
+ * every blocked element at once.
+ */
+const DefaultAudioBlockedNotification = () => {
+    const call = useCall();
+    const { t } = useI18n();
+    return (jsx("button", { type: "button", className: "str-video__audio-blocked-notification", onClick: call?.resumeAudio, "aria-live": "polite", children: jsxs("span", { className: "str-video__audio-blocked-notification__message", children: [jsx(Icon, { icon: "speaker" }), jsxs("span", { className: "str-video__audio-blocked-notification__text", children: [jsx("span", { className: "str-video__audio-blocked-notification__title", children: t('Audio is blocked by your system') }), jsx("span", { className: "str-video__audio-blocked-notification__subtitle", children: t('Click or tap to play audio') })] })] }) }));
+};
+const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, AudioBlockedNotification = DefaultAudioBlockedNotification, }) => {
+    const { participant, trackType } = useParticipantViewContext();
+    const { useAutoplayBlockedSessionIds } = useCallStateHooks();
+    const blockedSessionIds = useAutoplayBlockedSessionIds();
+    const isScreenSharing = hasScreenShare(participant);
+    const shouldShowAudioBlockedNotification = !participant.isLocalParticipant &&
+        trackType !== 'screenShareTrack' &&
+        blockedSessionIds.includes(participant.sessionId);
+    if (participant.isLocalParticipant &&
+        isScreenSharing &&
+        trackType === 'screenShareTrack') {
+        return (jsxs(Fragment, { children: [jsx(DefaultScreenShareOverlay, {}), jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
+    }
+    return (jsxs(Fragment, { children: [showMenuButton && (jsx(MenuToggle, { strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton, children: jsx(ParticipantActionsContextMenu$1, {}) })), jsx(Reaction, { participant: participant }), jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible }), AudioBlockedNotification && shouldShowAudioBlockedNotification && (jsx(AudioBlockedNotification, {}))] }));
+};
+const ParticipantDetails = ({ indicatorsVisible = true, }) => {
+    const { participant, trackType } = useParticipantViewContext();
+    const { isLocalParticipant, connectionQuality, pin, sessionId, name, userId, } = participant;
+    const call = useCall();
+    const { t } = useI18n();
+    const connectionQualityAsString = !!connectionQuality &&
+        SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
+    const hasAudioTrack = hasAudio(participant);
+    const hasVideoTrack = hasVideo(participant);
+    const canUnpin = !!pin && pin.isLocalPin;
+    const isTrackPaused = trackType !== 'none' ? hasPausedTrack(participant, trackType) : false;
+    const isAudioConnecting = useIsAudioConnecting(participant);
+    const isVideoConnecting = useIsVideoConnecting(participant);
+    return (jsxs(Fragment, { children: [jsx("div", { className: "str-video__participant-details", children: jsxs("div", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isAudioConnecting && (jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && isVideoConnecting && (jsx(LoadingIndicator, { className: "str-video__participant-details__name--video-connecting", tooltip: t('Video is connecting...') })), indicatorsVisible && !hasVideoTrack && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsx("span", { title: t('Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && pin && (jsx("span", { title: canUnpin ? t('Unpin') : t('Pinned'), onClick: canUnpin ? () => call?.unpin(sessionId) : undefined, className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsx(Notification, { isVisible: isLocalParticipant &&
+                    connectionQuality === SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
+};
+const SpeechIndicator = () => {
+    const { participant } = useParticipantViewContext();
+    const { isSpeaking, isDominantSpeaker } = participant;
+    return (jsxs("span", { className: clsx('str-video__speech-indicator', isSpeaking && 'str-video__speech-indicator--speaking', isDominantSpeaker && 'str-video__speech-indicator--dominant'), children: [jsx("span", { className: "str-video__speech-indicator__bar" }), jsx("span", { className: "str-video__speech-indicator__bar" }), jsx("span", { className: "str-video__speech-indicator__bar" })] }));
+};
+
+export { DefaultAudioBlockedNotification, DefaultParticipantViewUI, DefaultScreenShareOverlay, ParticipantDetails, SpeechIndicator };
+//# sourceMappingURL=DefaultParticipantViewUI.js.map

package/dist/esm/src/core/components/ParticipantView/DefaultParticipantViewUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultParticipantViewUI.js","sources":["../../../../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"sourcesContent":["import { ComponentType, forwardRef } from 'react';\nimport { Placement } from '@floating-ui/react';\nimport {\n  hasAudio,\n  hasPausedTrack,\n  hasScreenShare,\n  hasVideo,\n  SfuModels,\n} from '@stream-io/video-client';\nimport {\n  useCall,\n  useCallStateHooks,\n  useI18n,\n  useIsAudioConnecting,\n  useIsVideoConnecting,\n} from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\n\nimport {\n  Icon,\n  IconButton,\n  LoadingIndicator,\n  MenuToggle,\n  Notification,\n  ToggleMenuButtonProps,\n} from '../../../components';\nimport { ParticipantActionsContextMenu as DefaultParticipantActionsContextMenu } from './ParticipantActionsContextMenu';\nimport { Reaction } from '../../../components/Reaction';\nimport { useParticipantViewContext } from './ParticipantViewContext';\n\nexport type DefaultParticipantViewUIProps = {\n  /**\n   * Turns on/off the status indicator icons (mute, connection quality, etc...).\n   */\n  indicatorsVisible?: boolean;\n  /**\n   * Placement of the context menu component when opened\n   */\n  menuPlacement?: Placement;\n  /**\n   * Option to show/hide menu button component\n   */\n  showMenuButton?: boolean;\n  /**\n   * Custom component to render the context menu\n   */\n  ParticipantActionsContextMenu?: ComponentType;\n  /**\n   * Rendered over the tile when this participant's audio is blocked by the\n   * browser's autoplay policy. Selecting it calls {@link Call.resumeAudio} to\n   * unblock audio. Defaults to\n   * {@link DefaultAudioBlockedNotification}; pass `null` to disable.\n   */\n  AudioBlockedNotification?: ComponentType | null;\n};\n\nconst ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleButtonRender(props, ref) {\n    return <IconButton enabled={props.menuShown} icon=\"ellipsis\" ref={ref} />;\n  },\n);\n\nexport const DefaultScreenShareOverlay = () => {\n  const call = useCall();\n  const { t } = useI18n();\n\n  const stopScreenShare = () => {\n    call?.screenShare.disable().catch((err) => {\n      console.error('Failed to stop screen sharing:', err);\n    });\n  };\n\n  return (\n    <div className=\"str-video__screen-share-overlay\">\n      <Icon icon=\"screen-share-off\" />\n      <span className=\"str-video__screen-share-overlay__title\">\n        {t('You are presenting your screen')}\n      </span>\n      <button\n        onClick={stopScreenShare}\n        type=\"button\"\n        className=\"str-video__screen-share-overlay__button\"\n      >\n        <Icon icon=\"close\" /> {t('Stop Screen Sharing')}\n      </button>\n    </div>\n  );\n};\n\n/**\n * Rendered over a remote participant's tile when the browser's autoplay policy\n * has blocked their audio. Selecting it calls `call.resumeAudio()`, unblocking\n * every blocked element at once.\n */\nexport const DefaultAudioBlockedNotification = () => {\n  const call = useCall();\n  const { t } = useI18n();\n\n  return (\n    <button\n      type=\"button\"\n      className=\"str-video__audio-blocked-notification\"\n      onClick={call?.resumeAudio}\n      aria-live=\"polite\"\n    >\n      <span className=\"str-video__audio-blocked-notification__message\">\n        <Icon icon=\"speaker\" />\n        <span className=\"str-video__audio-blocked-notification__text\">\n          <span className=\"str-video__audio-blocked-notification__title\">\n            {t('Audio is blocked by your system')}\n          </span>\n          <span className=\"str-video__audio-blocked-notification__subtitle\">\n            {t('Click or tap to play audio')}\n          </span>\n        </span>\n      </span>\n    </button>\n  );\n};\n\nexport const DefaultParticipantViewUI = ({\n  indicatorsVisible = true,\n  menuPlacement = 'bottom-start',\n  showMenuButton = true,\n  ParticipantActionsContextMenu = DefaultParticipantActionsContextMenu,\n  AudioBlockedNotification = DefaultAudioBlockedNotification,\n}: DefaultParticipantViewUIProps) => {\n  const { participant, trackType } = useParticipantViewContext();\n  const { useAutoplayBlockedSessionIds } = useCallStateHooks();\n  const blockedSessionIds = useAutoplayBlockedSessionIds();\n  const isScreenSharing = hasScreenShare(participant);\n  const shouldShowAudioBlockedNotification =\n    !participant.isLocalParticipant &&\n    trackType !== 'screenShareTrack' &&\n    blockedSessionIds.includes(participant.sessionId);\n\n  if (\n    participant.isLocalParticipant &&\n    isScreenSharing &&\n    trackType === 'screenShareTrack'\n  ) {\n    return (\n      <>\n        <DefaultScreenShareOverlay />\n        <ParticipantDetails indicatorsVisible={indicatorsVisible} />\n      </>\n    );\n  }\n\n  return (\n    <>\n      {showMenuButton && (\n        <MenuToggle\n          strategy=\"fixed\"\n          placement={menuPlacement}\n          ToggleButton={ToggleButton}\n        >\n          <ParticipantActionsContextMenu />\n        </MenuToggle>\n      )}\n      <Reaction participant={participant} />\n      <ParticipantDetails indicatorsVisible={indicatorsVisible} />\n      {AudioBlockedNotification && shouldShowAudioBlockedNotification && (\n        <AudioBlockedNotification />\n      )}\n    </>\n  );\n};\n\nexport const ParticipantDetails = ({\n  indicatorsVisible = true,\n}: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => {\n  const { participant, trackType } = useParticipantViewContext();\n  const {\n    isLocalParticipant,\n    connectionQuality,\n    pin,\n    sessionId,\n    name,\n    userId,\n  } = participant;\n  const call = useCall();\n\n  const { t } = useI18n();\n  const connectionQualityAsString =\n    !!connectionQuality &&\n    SfuModels.ConnectionQuality[connectionQuality].toLowerCase();\n\n  const hasAudioTrack = hasAudio(participant);\n  const hasVideoTrack = hasVideo(participant);\n  const canUnpin = !!pin && pin.isLocalPin;\n  const isTrackPaused =\n    trackType !== 'none' ? hasPausedTrack(participant, trackType) : false;\n\n  const isAudioConnecting = useIsAudioConnecting(participant);\n  const isVideoConnecting = useIsVideoConnecting(participant);\n\n  return (\n    <>\n      <div className=\"str-video__participant-details\">\n        <div className=\"str-video__participant-details__name\">\n          {name || userId}\n          {indicatorsVisible && isAudioConnecting && (\n            <LoadingIndicator\n              className=\"str-video__participant-details__name--audio-connecting\"\n              tooltip={t('Audio is connecting...')}\n            />\n          )}\n          {indicatorsVisible && !hasAudioTrack && (\n            <span className=\"str-video__participant-details__name--audio-muted\" />\n          )}\n          {indicatorsVisible && isVideoConnecting && (\n            <LoadingIndicator\n              className=\"str-video__participant-details__name--video-connecting\"\n              tooltip={t('Video is connecting...')}\n            />\n          )}\n          {indicatorsVisible && !hasVideoTrack && (\n            <span className=\"str-video__participant-details__name--video-muted\" />\n          )}\n          {indicatorsVisible && isTrackPaused && (\n            <span\n              title={t('Video paused due to insufficient bandwidth')}\n              className=\"str-video__participant-details__name--track-paused\"\n            />\n          )}\n          {indicatorsVisible && pin && (\n            <span\n              title={canUnpin ? t('Unpin') : t('Pinned')}\n              onClick={canUnpin ? () => call?.unpin(sessionId) : undefined}\n              className=\"str-video__participant-details__name--pinned\"\n            />\n          )}\n          {indicatorsVisible && <SpeechIndicator />}\n        </div>\n      </div>\n      {indicatorsVisible && (\n        <Notification\n          isVisible={\n            isLocalParticipant &&\n            connectionQuality === SfuModels.ConnectionQuality.POOR\n          }\n          message={t('Poor connection quality')}\n        >\n          {connectionQualityAsString && (\n            <span\n              className={clsx(\n                'str-video__participant-details__connection-quality',\n                `str-video__participant-details__connection-quality--${connectionQualityAsString}`,\n              )}\n              title={connectionQualityAsString}\n            />\n          )}\n        </Notification>\n      )}\n    </>\n  );\n};\n\nexport const SpeechIndicator = () => {\n  const { participant } = useParticipantViewContext();\n  const { isSpeaking, isDominantSpeaker } = participant;\n  return (\n    <span\n      className={clsx(\n        'str-video__speech-indicator',\n        isSpeaking && 'str-video__speech-indicator--speaking',\n        isDominantSpeaker && 'str-video__speech-indicator--dominant',\n      )}\n    >\n      <span className=\"str-video__speech-indicator__bar\" />\n      <span className=\"str-video__speech-indicator__bar\" />\n      <span className=\"str-video__speech-indicator__bar\" />\n    </span>\n  );\n};\n"],"names":["_jsx","_jsxs","ParticipantActionsContextMenu","DefaultParticipantActionsContextMenu","_Fragment"],"mappings":"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"}

package/dist/esm/src/core/components/ParticipantView/ParticipantActionsContextMenu.js

@@ -0,0 +1,97 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useCall, useI18n, Restricted } from '@stream-io/video-react-bindings';
+import { hasAudio, hasVideo, hasScreenShare, hasScreenShareAudio, OwnCapability } from '@stream-io/video-client';
+import { useParticipantViewContext } from './ParticipantViewContext.js';
+import { useMenuContext } from '../../../components/Menu/MenuToggle.js';
+import { GenericMenu, GenericMenuButtonItem } from '../../../components/Menu/GenericMenu.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import { usePictureInPictureState } from '../../hooks/usePictureInPictureState.js';
+
+const ParticipantActionsContextMenu = () => {
+    const { participant, participantViewElement, videoElement } = useParticipantViewContext();
+    const [fullscreenModeOn, setFullscreenModeOn] = useState(!!document.fullscreenElement);
+    const call = useCall();
+    const isPiP = usePictureInPictureState(videoElement ?? undefined);
+    const { t } = useI18n();
+    const { pin, sessionId, userId } = participant;
+    const hasAudioTrack = hasAudio(participant);
+    const hasVideoTrack = hasVideo(participant);
+    const hasScreenShareTrack = hasScreenShare(participant);
+    const hasScreenShareAudioTrack = 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');
+    const muteScreenShareAudio = () => call?.muteUser(userId, 'screenshare_audio');
+    const grantPermission = (permission) => () => {
+        call?.updateUserPermissions({
+            user_id: userId,
+            grant_permissions: [permission],
+        });
+    };
+    const revokePermission = (permission) => () => {
+        call?.updateUserPermissions({
+            user_id: userId,
+            revoke_permissions: [permission],
+        });
+    };
+    const toggleParticipantPin = () => {
+        if (pin) {
+            call?.unpin(sessionId);
+        }
+        else {
+            call?.pin(sessionId);
+        }
+    };
+    const pinForEveryone = () => {
+        call
+            ?.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 })
+            .catch((err) => {
+            console.error(`Failed to unpin participant ${userId}`, err);
+        });
+    };
+    const toggleFullscreenMode = () => {
+        if (!fullscreenModeOn) {
+            return participantViewElement?.requestFullscreen().catch(console.error);
+        }
+        return document.exitFullscreen().catch(console.error);
+    };
+    useEffect(() => {
+        // handles the case when fullscreen mode is toggled externally,
+        // e.g., by pressing ESC key or some other keyboard shortcut
+        const handleFullscreenChange = () => {
+            setFullscreenModeOn(!!document.fullscreenElement);
+        };
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, []);
+    const togglePictureInPicture = () => {
+        if (videoElement && !isPiP) {
+            return videoElement
+                .requestPictureInPicture()
+                .catch(console.error);
+        }
+        return document.exitPictureInPicture().catch(console.error);
+    };
+    const { close } = useMenuContext() || {};
+    return (jsxs(GenericMenu, { onItemClick: close, children: [jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxs(Restricted, { requiredGrants: [OwnCapability.PIN_FOR_EVERYONE], children: [jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsx(Restricted, { requiredGrants: [OwnCapability.BLOCK_USERS], children: jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsx(Restricted, { requiredGrants: [OwnCapability.KICK_USER], children: jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsx(Icon, { icon: "kick-user" }), t('Kick')] }) }), jsxs(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement &&
+                typeof participantViewElement.requestFullscreen !== 'undefined' && (jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
+                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
+                }) })), videoElement && document.pictureInPictureEnabled && (jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
+                    direction: isPiP ? t('Leave') : t('Enter'),
+                }) })), jsxs(Restricted, { requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
+};
+
+export { ParticipantActionsContextMenu };
+//# sourceMappingURL=ParticipantActionsContextMenu.js.map

package/dist/esm/src/core/components/ParticipantView/ParticipantActionsContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantActionsContextMenu.js","sources":["../../../../../../../../src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  hasAudio,\n  hasScreenShare,\n  hasScreenShareAudio,\n  hasVideo,\n  OwnCapability,\n  UpdateUserPermissionsRequestGrantPermissionsEnum,\n  UpdateUserPermissionsRequestRevokePermissionsEnum,\n} from '@stream-io/video-client';\nimport { useParticipantViewContext } from './ParticipantViewContext';\nimport {\n  GenericMenu,\n  GenericMenuButtonItem,\n  useMenuContext,\n} from '../../../components/Menu';\nimport { Icon } from '../../../components/Icon';\nimport { usePictureInPictureState } from '../../hooks/usePictureInPictureState';\n\nexport const ParticipantActionsContextMenu = () => {\n  const { participant, participantViewElement, videoElement } =\n    useParticipantViewContext();\n  const [fullscreenModeOn, setFullscreenModeOn] = useState(\n    !!document.fullscreenElement,\n  );\n  const call = useCall();\n  const isPiP = usePictureInPictureState(videoElement ?? undefined);\n  const { t } = useI18n();\n\n  const { pin, sessionId, userId } = participant;\n\n  const hasAudioTrack = hasAudio(participant);\n  const hasVideoTrack = hasVideo(participant);\n  const hasScreenShareTrack = hasScreenShare(participant);\n  const hasScreenShareAudioTrack = hasScreenShareAudio(participant);\n\n  const blockUser = () => call?.blockUser(userId);\n  const kickUser = () => call?.kickUser({ user_id: userId });\n  const muteAudio = () => call?.muteUser(userId, 'audio');\n  const muteVideo = () => call?.muteUser(userId, 'video');\n  const muteScreenShare = () => call?.muteUser(userId, 'screenshare');\n  const muteScreenShareAudio = () =>\n    call?.muteUser(userId, 'screenshare_audio');\n\n  const grantPermission =\n    (permission: UpdateUserPermissionsRequestGrantPermissionsEnum) => () => {\n      call?.updateUserPermissions({\n        user_id: userId,\n        grant_permissions: [permission],\n      });\n    };\n\n  const revokePermission =\n    (permission: UpdateUserPermissionsRequestRevokePermissionsEnum) => () => {\n      call?.updateUserPermissions({\n        user_id: userId,\n        revoke_permissions: [permission],\n      });\n    };\n\n  const toggleParticipantPin = () => {\n    if (pin) {\n      call?.unpin(sessionId);\n    } else {\n      call?.pin(sessionId);\n    }\n  };\n\n  const pinForEveryone = () => {\n    call\n      ?.pinForEveryone({ user_id: userId, session_id: sessionId })\n      .catch((err) => {\n        console.error(`Failed to pin participant ${userId}`, err);\n      });\n  };\n\n  const unpinForEveryone = () => {\n    call\n      ?.unpinForEveryone({ user_id: userId, session_id: sessionId })\n      .catch((err) => {\n        console.error(`Failed to unpin participant ${userId}`, err);\n      });\n  };\n\n  const toggleFullscreenMode = () => {\n    if (!fullscreenModeOn) {\n      return participantViewElement?.requestFullscreen().catch(console.error);\n    }\n    return document.exitFullscreen().catch(console.error);\n  };\n\n  useEffect(() => {\n    // handles the case when fullscreen mode is toggled externally,\n    // e.g., by pressing ESC key or some other keyboard shortcut\n    const handleFullscreenChange = () => {\n      setFullscreenModeOn(!!document.fullscreenElement);\n    };\n    document.addEventListener('fullscreenchange', handleFullscreenChange);\n    return () => {\n      document.removeEventListener('fullscreenchange', handleFullscreenChange);\n    };\n  }, []);\n\n  const togglePictureInPicture = () => {\n    if (videoElement && !isPiP) {\n      return videoElement\n        .requestPictureInPicture()\n        .catch(console.error) as Promise<void>;\n    }\n\n    return document.exitPictureInPicture().catch(console.error);\n  };\n\n  const { close } = useMenuContext() || {};\n  return (\n    <GenericMenu onItemClick={close}>\n      <GenericMenuButtonItem\n        onClick={toggleParticipantPin}\n        disabled={pin && !pin.isLocalPin}\n      >\n        <Icon icon=\"pin\" />\n        {pin ? t('Unpin') : t('Pin')}\n      </GenericMenuButtonItem>\n      <Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>\n        <GenericMenuButtonItem\n          onClick={pinForEveryone}\n          disabled={pin && !pin.isLocalPin}\n        >\n          <Icon icon=\"pin\" />\n          {t('Pin for everyone')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={unpinForEveryone}\n          disabled={!pin || pin.isLocalPin}\n        >\n          <Icon icon=\"pin\" />\n          {t('Unpin for everyone')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>\n        <GenericMenuButtonItem onClick={blockUser}>\n          <Icon icon=\"not-allowed\" />\n          {t('Block')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.KICK_USER]}>\n        <GenericMenuButtonItem onClick={kickUser}>\n          <Icon icon=\"kick-user\" />\n          {t('Kick')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>\n        {hasVideoTrack && (\n          <GenericMenuButtonItem onClick={muteVideo}>\n            <Icon icon=\"camera-off-outline\" />\n            {t('Turn off video')}\n          </GenericMenuButtonItem>\n        )}\n        {hasScreenShareTrack && (\n          <GenericMenuButtonItem onClick={muteScreenShare}>\n            <Icon icon=\"screen-share-off\" />\n            {t('Turn off screen share')}\n          </GenericMenuButtonItem>\n        )}\n        {hasAudioTrack && (\n          <GenericMenuButtonItem onClick={muteAudio}>\n            <Icon icon=\"no-audio\" />\n            {t('Mute audio')}\n          </GenericMenuButtonItem>\n        )}\n        {hasScreenShareAudioTrack && (\n          <GenericMenuButtonItem onClick={muteScreenShareAudio}>\n            <Icon icon=\"no-audio\" />\n            {t('Mute screen share audio')}\n          </GenericMenuButtonItem>\n        )}\n      </Restricted>\n      {participantViewElement &&\n        typeof participantViewElement.requestFullscreen !== 'undefined' && (\n          <GenericMenuButtonItem onClick={toggleFullscreenMode}>\n            {t('{{ direction }} fullscreen', {\n              direction: fullscreenModeOn ? t('Leave') : t('Enter'),\n            })}\n          </GenericMenuButtonItem>\n        )}\n      {videoElement && document.pictureInPictureEnabled && (\n        <GenericMenuButtonItem onClick={togglePictureInPicture}>\n          {t('{{ direction }} picture-in-picture', {\n            direction: isPiP ? t('Leave') : t('Enter'),\n          })}\n        </GenericMenuButtonItem>\n      )}\n      <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SEND_AUDIO)}\n        >\n          {t('Allow audio')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SEND_VIDEO)}\n        >\n          {t('Allow video')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SCREENSHARE)}\n        >\n          {t('Allow screen sharing')}\n        </GenericMenuButtonItem>\n\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SEND_AUDIO)}\n        >\n          {t('Disable audio')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SEND_VIDEO)}\n        >\n          {t('Disable video')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SCREENSHARE)}\n        >\n          {t('Disable screen sharing')}\n        </GenericMenuButtonItem>\n      </Restricted>\n    </GenericMenu>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/core/components/ParticipantView/ParticipantView.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, forwardRef, useState, useMemo } from 'react';
+import clsx from 'clsx';
+import { hasAudio, hasVideo, hasScreenShareAudio } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { Audio } from '../Audio/Audio.js';
+import '../Audio/ParticipantsAudio.js';
+import '../Video/BaseVideo.js';
+import { Video } from '../Video/Video.js';
+import { useTrackElementVisibility } from '../../hooks/useTrackElementVisibility.js';
+import { DefaultParticipantViewUI } from './DefaultParticipantViewUI.js';
+import { isComponentType } from '../../../utilities/isComponentType.js';
+import { applyElementToRef } from '../../../utilities/applyElementToRef.js';
+import { ParticipantViewContext } from './ParticipantViewContext.js';
+
+const ParticipantView = memo(forwardRef(function ParticipantViewRender({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
+    const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
+    const hasAudioTrack = hasAudio(participant);
+    const hasVideoTrack = hasVideo(participant);
+    const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
+    const [trackedElement, setTrackedElement] = useState(null);
+    const [contextVideoElement, setContextVideoElement] = useState(null);
+    const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement,] = useState(null);
+    useTrackElementVisibility({
+        sessionId,
+        trackedElement,
+        trackType,
+    });
+    const { useIncomingVideoSettings } = useCallStateHooks();
+    const { isParticipantVideoEnabled } = useIncomingVideoSettings();
+    const participantViewContextValue = useMemo(() => ({
+        participant,
+        participantViewElement: trackedElement,
+        videoElement: contextVideoElement,
+        videoPlaceholderElement: contextVideoPlaceholderElement,
+        trackType,
+    }), [
+        contextVideoElement,
+        contextVideoPlaceholderElement,
+        participant,
+        trackedElement,
+        trackType,
+    ]);
+    const videoRefs = useMemo(() => ({
+        setVideoElement: (element) => {
+            setVideoElement?.(element);
+            setContextVideoElement(element);
+        },
+        setVideoPlaceholderElement: (element) => {
+            setVideoPlaceholderElement?.(element);
+            setContextVideoPlaceholderElement(element);
+        },
+    }), [setVideoElement, setVideoPlaceholderElement]);
+    return (jsx("div", { "data-testid": "participant-view", ref: (element) => {
+            applyElementToRef(ref, element);
+            setTrackedElement(element);
+        }, className: clsx('str-video__participant-view', isDominantSpeaker &&
+            'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxs(Fragment, { children: [hasAudioTrack && (jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsx(Video, { VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
+                        trackType !== 'videoTrack' ||
+                        isParticipantVideoEnabled(participant.sessionId), mirror: mirror, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
+}));
+ParticipantView.displayName = 'ParticipantView';
+
+export { ParticipantView };
+//# sourceMappingURL=ParticipantView.js.map

package/dist/esm/src/core/components/ParticipantView/ParticipantView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantView.js","sources":["../../../../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"sourcesContent":["import {\n  ComponentType,\n  forwardRef,\n  memo,\n  ReactElement,\n  useMemo,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\nimport {\n  hasAudio,\n  hasScreenShareAudio,\n  hasVideo,\n  StreamVideoParticipant,\n  VideoTrackType,\n} from '@stream-io/video-client';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { Audio } from '../Audio';\nimport { Video, VideoProps } from '../Video';\nimport { useTrackElementVisibility } from '../../hooks';\nimport { DefaultParticipantViewUI } from './DefaultParticipantViewUI';\nimport { applyElementToRef, isComponentType } from '../../../utilities';\nimport { ParticipantViewContext } from './ParticipantViewContext';\n\nexport type ParticipantViewProps = {\n  /**\n   * The participant whose video/audio stream we want to play.\n   */\n  participant: StreamVideoParticipant;\n\n  /**\n   * Override the default UI for rendering participant information/actions.\n   * pass `null` if you wish to not render anything\n   * @default DefaultParticipantViewUI\n   */\n  ParticipantViewUI?: ComponentType | ReactElement | null;\n\n  /**\n   * The kind of video stream to play for the given participant.\n   * The default value is `videoTrack`.\n   * You can use `none` if you're building an audio-only call.\n   */\n  trackType?: VideoTrackType | 'none';\n\n  /**\n   * Forces participant's video to be mirrored or unmirrored. By default, video track\n   * from the local participant is mirrored, and all other videos are not mirrored.\n   */\n  mirror?: boolean;\n\n  /**\n   * This prop is only useful for advanced use-cases (for example, building your own layout).\n   * When set to `true` it will mute the give participant's audio stream on the client side.\n   * The local participant is always muted.\n   */\n  muteAudio?: boolean;\n\n  /**\n   * An object with set functions meant for exposing the video\n   * and video placeholder elements to the integrators.\n   * It's useful when you want to attach custom event handlers to these elements.\n   * - `refs.setVideoElement`\n   * - `refs.setVideoPlaceholderElement`\n   */\n  refs?: VideoProps['refs'];\n\n  /**\n   * Custom class applied to the root DOM element.\n   */\n  className?: string;\n} & Pick<VideoProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;\n\nexport const ParticipantView = memo(\n  forwardRef<HTMLDivElement, ParticipantViewProps>(\n    function ParticipantViewRender(\n      {\n        participant,\n        trackType = 'videoTrack',\n        mirror,\n        muteAudio,\n        refs: { setVideoElement, setVideoPlaceholderElement } = {},\n        className,\n        VideoPlaceholder,\n        PictureInPicturePlaceholder,\n        ParticipantViewUI = DefaultParticipantViewUI as ComponentType,\n      },\n      ref,\n    ) {\n      const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } =\n        participant;\n\n      const hasAudioTrack = hasAudio(participant);\n      const hasVideoTrack = hasVideo(participant);\n      const hasScreenShareAudioTrack = hasScreenShareAudio(participant);\n\n      const [trackedElement, setTrackedElement] =\n        useState<HTMLDivElement | null>(null);\n\n      const [contextVideoElement, setContextVideoElement] =\n        useState<HTMLVideoElement | null>(null);\n\n      const [\n        contextVideoPlaceholderElement,\n        setContextVideoPlaceholderElement,\n      ] = useState<HTMLDivElement | null>(null);\n\n      useTrackElementVisibility({\n        sessionId,\n        trackedElement,\n        trackType,\n      });\n\n      const { useIncomingVideoSettings } = useCallStateHooks();\n      const { isParticipantVideoEnabled } = useIncomingVideoSettings();\n\n      const participantViewContextValue = useMemo(\n        () => ({\n          participant,\n          participantViewElement: trackedElement,\n          videoElement: contextVideoElement,\n          videoPlaceholderElement: contextVideoPlaceholderElement,\n          trackType,\n        }),\n        [\n          contextVideoElement,\n          contextVideoPlaceholderElement,\n          participant,\n          trackedElement,\n          trackType,\n        ],\n      );\n\n      const videoRefs: VideoProps['refs'] = useMemo(\n        () => ({\n          setVideoElement: (element) => {\n            setVideoElement?.(element);\n            setContextVideoElement(element);\n          },\n          setVideoPlaceholderElement: (element) => {\n            setVideoPlaceholderElement?.(element);\n            setContextVideoPlaceholderElement(element);\n          },\n        }),\n        [setVideoElement, setVideoPlaceholderElement],\n      );\n\n      return (\n        <div\n          data-testid=\"participant-view\"\n          ref={(element) => {\n            applyElementToRef(ref, element);\n            setTrackedElement(element);\n          }}\n          className={clsx(\n            'str-video__participant-view',\n            isDominantSpeaker &&\n              'str-video__participant-view--dominant-speaker',\n            isSpeaking && 'str-video__participant-view--speaking',\n            !hasVideoTrack && 'str-video__participant-view--no-video',\n            !hasAudioTrack && 'str-video__participant-view--no-audio',\n            className,\n          )}\n        >\n          <ParticipantViewContext.Provider value={participantViewContextValue}>\n            {/* mute the local participant, as we don't want to hear ourselves */}\n            {!isLocalParticipant && !muteAudio && (\n              <>\n                {hasAudioTrack && (\n                  <Audio participant={participant} trackType=\"audioTrack\" />\n                )}\n                {hasScreenShareAudioTrack && (\n                  <Audio\n                    participant={participant}\n                    trackType=\"screenShareAudioTrack\"\n                  />\n                )}\n              </>\n            )}\n            <Video\n              VideoPlaceholder={VideoPlaceholder}\n              PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n              participant={participant}\n              trackType={trackType}\n              refs={videoRefs}\n              enabled={\n                isLocalParticipant ||\n                trackType !== 'videoTrack' ||\n                isParticipantVideoEnabled(participant.sessionId)\n              }\n              mirror={mirror}\n              autoPlay\n            />\n            {isComponentType(ParticipantViewUI) ? (\n              <ParticipantViewUI />\n            ) : (\n              ParticipantViewUI\n            )}\n          </ParticipantViewContext.Provider>\n        </div>\n      );\n    },\n  ),\n);\n\nParticipantView.displayName = 'ParticipantView';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/src/core/components/ParticipantView/ParticipantViewContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+const ParticipantViewContext = createContext(undefined);
+const useParticipantViewContext = () => useContext(ParticipantViewContext);
+
+export { ParticipantViewContext, useParticipantViewContext };
+//# sourceMappingURL=ParticipantViewContext.js.map

package/dist/esm/src/core/components/ParticipantView/ParticipantViewContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantViewContext.js","sources":["../../../../../../../../src/core/components/ParticipantView/ParticipantViewContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { ParticipantViewProps } from './ParticipantView';\n\nexport type ParticipantViewContextValue = Required<\n  Pick<ParticipantViewProps, 'participant' | 'trackType'>\n> & {\n  participantViewElement?: HTMLDivElement | null;\n  videoElement?: HTMLVideoElement | null;\n  videoPlaceholderElement?: HTMLDivElement | null;\n};\n\nexport const ParticipantViewContext = createContext<\n  ParticipantViewContextValue | undefined\n>(undefined);\n\nexport const useParticipantViewContext = () =>\n  useContext(ParticipantViewContext) as ParticipantViewContextValue;\n"],"names":[],"mappings":";;MAWa,sBAAsB,GAAG,aAAa,CAEjD,SAAS;AAEJ,MAAM,yBAAyB,GAAG,MACvC,UAAU,CAAC,sBAAsB;;;;"}

package/dist/esm/src/core/components/StreamCall/StreamCall.js

@@ -0,0 +1,8 @@
+import { StreamCallProvider } from '@stream-io/video-react-bindings';
+
+// re-exporting the StreamCallProvider as StreamCall
+const StreamCall = StreamCallProvider;
+StreamCall.displayName = 'StreamCall';
+
+export { StreamCall };
+//# sourceMappingURL=StreamCall.js.map