@stream-io/video-react-sdk 1.40.1 → 1.41.0

package/dist/embedded.es.js

@@ -1,11 +1,11 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { memo, useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useMemo, useRef, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
 import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, useEffectEvent, useIsAudioConnecting, useIsVideoConnecting, StreamCallProvider, StreamVideoProvider, useSpeakerLayoutSortPreset } from '@stream-io/video-react-bindings';
-import { hasAudio, hasScreenShareAudio, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, CallingState, paginatedLayoutSortPreset, CallTypes, defaultSortPreset, humanize, StreamVideoClient } from '@stream-io/video-client';
+import { hasAudio, hasScreenShareAudio, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, RequestPermissionRequestPermissionsEnum, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, CallingState, paginatedLayoutSortPreset, CallTypes, defaultSortPreset, humanize, StreamVideoClient } from '@stream-io/video-client';
 import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, arrow, FloatingArrow, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList } from '@floating-ui/react';
 import clsx from 'clsx';
 
-const Audio = memo(function Audio({ participant, trackType = 'audioTrack', ...rest }) {
+const Audio = memo(function AudioRender({ participant, trackType = 'audioTrack', ...rest }) {
     const call = useCall();
     const [audioElement, setAudioElement] = useState(null);
     const { userId, sessionId } = participant;
@@ -533,7 +533,7 @@ const normalizeString = (value) => value
  * @description Extends video element with `stream` property
  * (`srcObject`) to reactively handle stream changes
  */
-const BaseVideo = forwardRef(function BaseVideo({ stream, ...rest }, ref) {
+const BaseVideo = forwardRef(function BaseVideoRender({ stream, ...rest }, ref) {
     const [videoElement, setVideoElement] = useState(null);
     useEffect(() => {
         if (!videoElement || !stream)
@@ -579,12 +579,12 @@ const InitialsFallback = (props) => {
     return (jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
 };
 
-const DefaultVideoPlaceholder = forwardRef(function DefaultVideoPlaceholder(props, ref) {
+const DefaultVideoPlaceholder = forwardRef(function DefaultVideoPlaceholderRender(props, ref) {
     const { t } = useI18n();
     return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is disabled') }));
 });
 
-const DefaultPictureInPicturePlaceholder = forwardRef(function DefaultPictureInPicturePlaceholder(props, ref) {
+const DefaultPictureInPicturePlaceholder = forwardRef(function DefaultPictureInPicturePlaceholderRender(props, ref) {
     const { t } = useI18n();
     return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is playing in a popup') }));
 });
@@ -711,7 +711,7 @@ const BackgroundFiltersProvider = (props) => {
     return (jsx(Suspense, { fallback: SuspenseFallback, children: jsx(BackgroundFiltersProviderImpl, { ...filterProps, ContextProvider: BackgroundFiltersContext }) }));
 };
 
-const IconButton = forwardRef(function IconButton(props, ref) {
+const IconButton = forwardRef(function IconButtonRender(props, ref) {
     const { icon, enabled, variant, onClick, className, ...rest } = props;
     return (jsx("button", { className: clsx('str-video__call-controls__button', className, {
             [`str-video__call-controls__button--variant-${variant}`]: variant,
@@ -722,7 +722,7 @@ const IconButton = forwardRef(function IconButton(props, ref) {
         }, ref: ref, ...rest, children: jsx(Icon, { icon: icon }) }));
 });
 
-const CompositeButton = forwardRef(function CompositeButton({ disabled, caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
+const CompositeButton = forwardRef(function CompositeButtonRender({ disabled, caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
     return (jsxs("div", { className: clsx('str-video__composite-button', className, {
             'str-video__composite-button--caption': caption,
             'str-video__composite-button--menu': Menu,
@@ -736,7 +736,7 @@ const CompositeButton = forwardRef(function CompositeButton({ disabled, caption,
                             onClick?.(e);
                         }, disabled: disabled, ...restButtonProps, children: children }), Menu && (jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsx(Menu, {}) : Menu }))] }), caption && (jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
 });
-const DefaultToggleMenuButton = forwardRef(function DefaultToggleMenuButton({ menuShown }, ref) {
+const DefaultToggleMenuButton = forwardRef(function DefaultToggleMenuButtonRender({ menuShown }, ref) {
     return (jsx(IconButton, { className: clsx('str-video__menu-toggle-button', {
             'str-video__menu-toggle-button--active': menuShown,
         }), icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
@@ -895,7 +895,7 @@ const RecordEndConfirmation = (props) => {
     const handleClick = createCallControlHandler(props, toggleCallRecording);
     return (jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxs("div", { className: "str-video__end-recording__header", children: [jsx(Icon, { icon: "recording-on" }), jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxs("div", { className: "str-video__end-recording__actions", children: [jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsx(CompositeButton, { variant: "primary", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
 };
-const ToggleEndRecordingMenuButton = forwardRef(function ToggleEndRecordingMenuButton(props, ref) {
+const ToggleEndRecordingMenuButton = forwardRef(function ToggleEndRecordingMenuButtonRender(props, ref) {
     return (jsx(CompositeButton, { ref: ref, active: true, variant: "secondary", "data-testid": "recording-stop-button", children: jsx(Icon, { icon: "recording-off" }) }));
 });
 const RecordCallConfirmationButton = (props) => {
@@ -974,7 +974,7 @@ const defaultReactions = [
 const ReactionsButton = ({ reactions = defaultReactions, }) => {
     return (jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx(MenuToggle, { placement: "top", ToggleButton: ToggleReactionsMenuButton, visualType: MenuVisualType.MENU, children: jsx(DefaultReactionsMenu, { reactions: reactions }) }) }));
 };
-const ToggleReactionsMenuButton = forwardRef(function ToggleReactionsMenuButton({ menuShown }, ref) {
+const ToggleReactionsMenuButton = forwardRef(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {
     const { t } = useI18n();
     return (jsx(WithTooltip, { title: t('Reactions'), tooltipDisabled: menuShown, children: jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", children: jsx(Icon, { icon: "reactions" }) }) }));
 });
@@ -995,7 +995,7 @@ const ScreenShareButton = (props) => {
     const { caption, optimisticUpdates } = props;
     const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } = useCallStateHooks();
     const isSomeoneScreenSharing = useHasOngoingScreenShare();
-    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(OwnCapability.SCREENSHARE);
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(RequestPermissionRequestPermissionsEnum.SCREENSHARE);
     const callSettings = useCallSettings();
     const isScreenSharingAllowed = callSettings?.screensharing.enabled;
     const { screenShare, optionsAwareIsMute, isTogglePending } = useScreenShareState({
@@ -1208,7 +1208,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = useRef(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const { t } = useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.40.1"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.41.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -1307,7 +1307,7 @@ const DeviceSelectorVideo = ({ title, visualType, }) => {
         }, title: title, visualType: visualType, icon: "camera", PreviewItem: DeviceVideoPreviewItem }));
 };
 
-forwardRef(function ToggleDeviceSettingsMenuButton({ menuShown }, ref) {
+forwardRef(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {
     const { t } = useI18n();
     return (jsx(IconButton, { className: clsx('str-video__device-settings__button', {
             'str-video__device-settings__button--active': menuShown,
@@ -1337,7 +1337,7 @@ const ToggleAudioPreviewButton = (props) => {
 const ToggleAudioPublishingButton = (props) => {
     const { t } = useI18n();
     const { caption, Menu = jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
-    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(OwnCapability.SEND_AUDIO);
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_AUDIO);
     const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
     const { microphone, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useMicrophoneState({ optimisticUpdates });
     const localParticipant = useLocalParticipant();
@@ -1389,7 +1389,7 @@ const ToggleVideoPreviewButton = (props) => {
 const ToggleVideoPublishingButton = (props) => {
     const { t } = useI18n();
     const { caption, Menu = jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
-    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(OwnCapability.SEND_VIDEO);
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_VIDEO);
     const { useCameraState, useCallSettings, useLocalParticipant } = useCallStateHooks();
     const { camera, optionsAwareIsMute, hasBrowserPermission, isPromptingPermission, isTogglePending, } = useCameraState({ optimisticUpdates });
     const localParticipant = useLocalParticipant();
@@ -1432,7 +1432,7 @@ const EndCallMenu = (props) => {
     const { t } = useI18n();
     return (jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxs("button", { className: "str-video__button str-video__end-call__leave", type: "button", "data-testid": "leave-call-button", onClick: onLeave, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__leave-icon", icon: "logout" }), t('Leave call')] }), jsx(Restricted, { requiredGrants: [OwnCapability.END_CALL], children: jsxs("button", { className: "str-video__button str-video__end-call__end", type: "button", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__end-icon", icon: "call-end" }), t('End call for all')] }) })] }));
 };
-const CancelCallToggleMenuButton = forwardRef(function CancelCallToggleMenuButton({ menuShown }, ref) {
+const CancelCallToggleMenuButton = forwardRef(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {
     const { t } = useI18n();
     return (jsx(WithTooltip, { title: t('Leave call'), tooltipDisabled: menuShown, children: jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: menuShown ? 'active' : 'danger', "data-testid": "leave-call-button", ref: ref }) }));
 });
@@ -1479,7 +1479,7 @@ var Status;
     Status["BAD"] = "Bad";
 })(Status || (Status = {}));
 
-forwardRef(function ToggleMenuButton(props, ref) {
+forwardRef(function ToggleMenuButtonRender(props, ref) {
     const { t } = useI18n();
     const { caption, menuShown } = props;
     return (jsx(CompositeButton, { ref: ref, active: menuShown, caption: caption, title: caption || t('Statistics'), "data-testid": "stats-button", children: jsx(Icon, { icon: "stats" }) }));
@@ -1507,7 +1507,7 @@ const CallParticipantListHeader = ({ onClose, }) => {
     return (jsxs("div", { className: "str-video__participant-list-header", children: [jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
 };
 
-const CallParticipantListingItem = memo(function CallParticipantListingItem({ participant, DisplayName = DefaultDisplayName, }) {
+const CallParticipantListingItem = memo(function CallParticipantListingItemRender({ participant, DisplayName = DefaultDisplayName, }) {
     const isAudioOn = hasAudio(participant);
     const isVideoOn = hasVideo(participant);
     const isPinnedOn = isPinned(participant);
@@ -1533,7 +1533,7 @@ const DefaultDisplayName = ({ participant }) => {
     }
     return (jsx(WithTooltip, { className: "str-video__participant-listing-item__display-name", title: displayName, children: displayName }));
 };
-const ToggleButton$2 = forwardRef(function ToggleButton(props, ref) {
+const ToggleButton$2 = forwardRef(function ToggleButtonRender(props, ref) {
     return jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
 });
 
@@ -1664,7 +1664,7 @@ const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnF
     });
     return (jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : blockedUsers, SearchResultList: BlockedUserListing }));
 };
-const ToggleButton$1 = forwardRef(function ToggleButton(props, ref) {
+const ToggleButton$1 = forwardRef(function ToggleButtonRender(props, ref) {
     return jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
 });
 
@@ -1817,7 +1817,7 @@ const PermissionRequests = () => {
                     overflowY: 'auto',
                 }, permissionRequests: permissionRequests, handleUpdatePermission: handleUpdatePermission }))] }));
 };
-const PermissionRequestList = forwardRef(function PermissionRequestList(props, ref) {
+const PermissionRequestList = forwardRef(function PermissionRequestListRender(props, ref) {
     const { permissionRequests, handleUpdatePermission, ...rest } = props;
     const { t } = useI18n();
     return (jsx("div", { className: "str-video__permission-requests-list", ref: ref, ...rest, children: permissionRequests.map((request, reqIndex) => {
@@ -1881,7 +1881,7 @@ const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = Default
     return (jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
 };
 
-const ToggleButton = forwardRef(function ToggleButton(props, ref) {
+const ToggleButton = forwardRef(function ToggleButtonRender(props, ref) {
     return jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
 });
 const DefaultScreenShareOverlay = () => {
@@ -1941,14 +1941,14 @@ const SpeechIndicator = () => {
     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" })] }));
 };
 
-const ParticipantView = memo(forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
+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);
+    const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement,] = useState(null);
     useTrackElementVisibility({
         sessionId,
         trackedElement,
@@ -1982,7 +1982,8 @@ const ParticipantView = memo(forwardRef(function ParticipantView({ participant,
     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$1, { VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
+        }, 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$1, { 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)] }) }));
 }));
@@ -2865,7 +2866,7 @@ const JoinError = ({ onJoin }) => {
     return (jsxs("div", { className: "str-video__embedded-join-error", children: [jsx("h2", { className: "str-video__embedded-join-error__title", children: t('Failed to join the call') }), jsx("p", { className: "str-video__embedded-join-error__message", children: t("We couldn't connect to the server. Please check your connection and try again.") }), jsxs("button", { type: "button", className: "str-video__button", onClick: onJoin, children: [jsx(Icon, { icon: "login" }), t('Try again')] })] }));
 };
 
-const ToggleMenuButton$1 = forwardRef(function ToggleMenuButton(props, ref) {
+const ToggleMenuButton$1 = forwardRef(function ToggleMenuButtonRender(props, ref) {
     const { useMicrophoneState } = useCallStateHooks();
     const { selectedDevice: selectedMic, devices: microphones } = useMicrophoneState();
     return (jsxs("button", { ref: ref, className: "str-video__embedded-lobby__device-button", children: [jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: "mic" }), jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: microphones?.find((m) => m.deviceId === selectedMic)
@@ -2876,7 +2877,7 @@ const ToggleMicButton = () => {
     return (jsxs(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton$1, visualType: MenuVisualType.MENU, children: [jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }));
 };
 
-const ToggleMenuButton = forwardRef(function ToggleMenuButton(props, ref) {
+const ToggleMenuButton = forwardRef(function ToggleMenuButtonRender(props, ref) {
     const { useCameraState } = useCallStateHooks();
     const { selectedDevice: selectedCamera, devices: cameras } = useCameraState();
     return (jsxs("button", { ref: ref, className: "str-video__embedded-lobby__device-button", children: [jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: "camera" }), jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: cameras?.find((c) => c.deviceId === selectedCamera)