@stream-io/video-react-sdk 1.39.2 → 1.40.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import { hasAudio, hasScreenShareAudio, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, CallingState, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, humanize, setSdkInfo } from '@stream-io/video-client';
+import { hasAudio, hasScreenShareAudio, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, CallingState, paginatedLayoutSortPreset, CallTypes, defaultSortPreset, humanize, setSdkInfo } from '@stream-io/video-client';
 export * from '@stream-io/video-client';
-import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, useEffectEvent, useIsAudioConnecting, useIsVideoConnecting, StreamCallProvider, StreamVideoProvider, useStreamVideoClient } from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, useEffectEvent, useIsAudioConnecting, useIsVideoConnecting, StreamCallProvider, StreamVideoProvider, useSpeakerLayoutSortPreset, useStreamVideoClient } from '@stream-io/video-react-bindings';
 export * from '@stream-io/video-react-bindings';
 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';
@@ -1406,7 +1406,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.39.2"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.40.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -2392,15 +2392,30 @@ const DefaultScreenShareOverlay = () => {
     };
     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')] })] }));
 };
-const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, }) => {
+/**
+ * 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 })] }));
+    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();
@@ -2557,6 +2572,8 @@ var en = {
 	"You have no permission to share your audio": "You have no permission to share your audio",
 	"You are presenting your screen": "You are presenting your screen",
 	"Stop Screen Sharing": "Stop Screen Sharing",
+	"Audio is blocked by your system": "Audio is blocked by your system",
+	"Click or tap to play audio": "Click or tap to play audio",
 	Allow: Allow,
 	Revoke: Revoke,
 	Dismiss: Dismiss,
@@ -2791,22 +2808,6 @@ const usePaginatedLayoutSortPreset = (call) => {
         };
     }, [call]);
 };
-const useSpeakerLayoutSortPreset = (call, isOneOnOneCall) => {
-    useEffect(() => {
-        if (!call)
-            return;
-        // always show the remote participant in the spotlight
-        if (isOneOnOneCall) {
-            call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
-        }
-        else {
-            call.setSortParticipantsBy(speakerLayoutSortPreset);
-        }
-        return () => {
-            resetSortPreset(call);
-        };
-    }, [call, isOneOnOneCall]);
-};
 const useRawRemoteParticipants = () => {
     const { useRawParticipants } = useCallStateHooks();
     const rawParticipants = useRawParticipants();
@@ -2817,13 +2818,6 @@ const resetSortPreset = (call) => {
     const callConfig = CallTypes.get(call.type);
     call.setSortParticipantsBy(callConfig.options.sortParticipantsBy || defaultSortPreset);
 };
-const loggedIn = (a, b) => {
-    if (a.isLocalParticipant)
-        return 1;
-    if (b.isLocalParticipant)
-        return -1;
-    return 0;
-};
 
 const LivestreamLayout = (props) => {
     const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();
@@ -3284,7 +3278,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.39.2").split('.');
+const [major, minor, patch] = ("1.40.0").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,
@@ -3292,5 +3286,5 @@ setSdkInfo({
     patch,
 });
 
-export { AcceptCallButton, Audio, AudioVolumeIndicator, Avatar, AvatarFallback, BackgroundFiltersProvider, BackstageLayout, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LivestreamPlayer, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, MicCaptureErrorNotification, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, PipLayout, Reaction, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakerTest, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, applyFilter, defaultEmojiReactionMap, defaultReactions, translations, useBackgroundFilters, useDeviceList, useFilteredParticipants, useHorizontalScrollPosition, useMenuContext, useModeration, useNoiseCancellation, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
+export { AcceptCallButton, Audio, AudioVolumeIndicator, Avatar, AvatarFallback, BackgroundFiltersProvider, BackstageLayout, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultAudioBlockedNotification, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LivestreamPlayer, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, MicCaptureErrorNotification, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, PipLayout, Reaction, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakerTest, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, applyFilter, defaultEmojiReactionMap, defaultReactions, translations, useBackgroundFilters, useDeviceList, useFilteredParticipants, useHorizontalScrollPosition, useMenuContext, useModeration, useNoiseCancellation, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
 //# sourceMappingURL=index.es.js.map