@stream-io/video-react-sdk 1.26.0 → 1.26.1

package/dist/index.es.js

@@ -1331,6 +1331,21 @@ const ScreenShareButton = (props) => {
                         : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: handleClick, children: jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }) }));
 };
 
+const AudioVolumeIndicator = () => {
+    const { useMicrophoneState } = useCallStateHooks();
+    const { isEnabled, mediaStream } = useMicrophoneState();
+    const [audioLevel, setAudioLevel] = useState(0);
+    useEffect(() => {
+        if (!isEnabled || !mediaStream)
+            return;
+        const disposeSoundDetector = createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
+        return () => {
+            disposeSoundDetector().catch(console.error);
+        };
+    }, [isEnabled, mediaStream]);
+    return (jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsx("div", { className: "str-video__audio-volume-indicator__bar-value", style: { transform: `scaleX(${audioLevel / 100})` } }) })] }));
+};
+
 const SelectContext = createContext({});
 const Select = (props) => {
     const { children, icon, defaultSelectedLabel, defaultSelectedIndex, handleSelect: handleSelectProp, } = props;
@@ -1441,21 +1456,6 @@ const DeviceSelector = (props) => {
     return jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
 };
 
-const AudioVolumeIndicator = () => {
-    const { useMicrophoneState } = useCallStateHooks();
-    const { isEnabled, mediaStream } = useMicrophoneState();
-    const [audioLevel, setAudioLevel] = useState(0);
-    useEffect(() => {
-        if (!isEnabled || !mediaStream)
-            return;
-        const disposeSoundDetector = createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
-        return () => {
-            disposeSoundDetector().catch(console.error);
-        };
-    }, [isEnabled, mediaStream]);
-    return (jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsx("div", { className: "str-video__audio-volume-indicator__bar-value", style: { transform: `scaleX(${audioLevel / 100})` } }) })] }));
-};
-
 const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible = true, }) => {
     const { useMicrophoneState } = useCallStateHooks();
     const { microphone, selectedDevice, devices } = useMicrophoneState();
@@ -2657,13 +2657,14 @@ const LivestreamLayout = (props) => {
         ? participants.find(hasScreenShare)
         : undefined;
     usePaginatedLayoutSortPreset(call);
-    const overlay = (jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName }));
-    const { floatingParticipantProps, muted } = props;
-    const floatingParticipantOverlay = hasOngoingScreenShare && (jsx(ParticipantOverlay
-    // these elements aren't needed for the video feed
-    , { 
+    const { floatingParticipantProps, muted, ParticipantViewUI } = props;
+    const overlay = ParticipantViewUI ?? (jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName, enableFullScreen: props.enableFullScreen }));
+    const floatingParticipantOverlay = hasOngoingScreenShare &&
+        (ParticipantViewUI ?? (jsx(ParticipantOverlay
         // these elements aren't needed for the video feed
-        showParticipantCount: floatingParticipantProps?.showParticipantCount ?? false, showDuration: floatingParticipantProps?.showDuration ?? false, showLiveBadge: floatingParticipantProps?.showLiveBadge ?? false, showSpeakerName: floatingParticipantProps?.showSpeakerName ?? true }));
+        , { 
+            // these elements aren't needed for the video feed
+            showParticipantCount: floatingParticipantProps?.showParticipantCount ?? false, showDuration: floatingParticipantProps?.showDuration ?? false, showLiveBadge: floatingParticipantProps?.showLiveBadge ?? false, showSpeakerName: floatingParticipantProps?.showSpeakerName ?? true, enableFullScreen: floatingParticipantProps?.enableFullScreen ?? true })));
     return (jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [!muted && jsx(ParticipantsAudio, { participants: remoteParticipants }), hasOngoingScreenShare && presenter && (jsx(ParticipantView, { className: "str-video__livestream-layout__screen-share", participant: presenter, ParticipantViewUI: overlay, trackType: "screenShareTrack", muteAudio // audio is rendered by ParticipantsAudio
                 : true })), currentSpeaker && (jsx(ParticipantView, { className: clsx(hasOngoingScreenShare &&
                     clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: floatingParticipantOverlay || overlay, mirror: props.mirrorLocalParticipantVideo !== false ? undefined : false, muteAudio // audio is rendered by ParticipantsAudio
@@ -2685,13 +2686,18 @@ const BackstageLayout = (props) => {
 BackstageLayout.displayName = 'BackstageLayout';
 const ParticipantOverlay = (props) => {
     const { enableFullScreen = true, showParticipantCount = true, showDuration = true, showLiveBadge = true, showSpeakerName = false, } = props;
+    const overlayBarVisible = enableFullScreen ||
+        showParticipantCount ||
+        showDuration ||
+        showLiveBadge ||
+        showSpeakerName;
     const { participant } = useParticipantViewContext();
     const { useParticipantCount } = useCallStateHooks();
     const participantCount = useParticipantCount();
     const duration = useUpdateCallDuration();
     const toggleFullScreen = useToggleFullScreen();
     const { t } = useI18n();
-    return (jsx("div", { className: "str-video__livestream-layout__overlay", children: jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsx("span", { className: "str-video__livestream-layout__viewers-count", children: participantCount })), showSpeakerName && (jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] }) }));
+    return (jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsx("span", { className: "str-video__livestream-layout__viewers-count", children: participantCount })), showSpeakerName && (jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })) }));
 };
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = useCallStateHooks();
@@ -3020,7 +3026,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.26.0").split('.');
+const [major, minor, patch] = ("1.26.1").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,
@@ -3028,5 +3034,5 @@ setSdkInfo({
     patch,
 });
 
-export { AcceptCallButton, Audio, 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, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, PipLayout, Reaction, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, 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, 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, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LivestreamPlayer, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, PipLayout, Reaction, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, 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, useNoiseCancellation, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
 //# sourceMappingURL=index.es.js.map