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

package/dist/index.cjs.js

@@ -1331,6 +1331,21 @@ const ScreenShareButton = (props) => {
                         : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: handleClick, children: jsxRuntime.jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }) }));
 };
 
+const AudioVolumeIndicator = () => {
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { isEnabled, mediaStream } = useMicrophoneState();
+    const [audioLevel, setAudioLevel] = react.useState(0);
+    react.useEffect(() => {
+        if (!isEnabled || !mediaStream)
+            return;
+        const disposeSoundDetector = videoClient.createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
+        return () => {
+            disposeSoundDetector().catch(console.error);
+        };
+    }, [isEnabled, mediaStream]);
+    return (jsxRuntime.jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsxRuntime.jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar-value", style: { transform: `scaleX(${audioLevel / 100})` } }) })] }));
+};
+
 const SelectContext = react.createContext({});
 const Select = (props) => {
     const { children, icon, defaultSelectedLabel, defaultSelectedIndex, handleSelect: handleSelectProp, } = props;
@@ -1409,7 +1424,7 @@ const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, d
         }), htmlFor: id, children: [jsxRuntime.jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
 };
 const DeviceSelectorList = (props) => {
-    const { devices = [], selectedDeviceId, title, type, onChange } = props;
+    const { devices = [], selectedDeviceId, title, type, onChange, children, } = props;
     const { close } = useMenuContext();
     const { deviceList } = useDeviceList(devices, selectedDeviceId);
     return (jsxRuntime.jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsxRuntime.jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), deviceList.map((device) => {
@@ -1420,7 +1435,7 @@ const DeviceSelectorList = (props) => {
                         }
                         close?.();
                     }, name: type, selected: device.isSelected }, device.deviceId));
-            })] }));
+            }), children] }));
 };
 const DeviceSelectorDropdown = (props) => {
     const { devices = [], selectedDeviceId, title, onChange, icon } = props;
@@ -1441,12 +1456,12 @@ const DeviceSelector = (props) => {
     return jsxRuntime.jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
 };
 
-const DeviceSelectorAudioInput = ({ title, visualType, }) => {
+const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible = true, }) => {
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
     const { microphone, selectedDevice, devices } = useMicrophoneState();
     return (jsxRuntime.jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, type: "audioinput", onChange: async (deviceId) => {
             await microphone.select(deviceId);
-        }, title: title, visualType: visualType, icon: "mic" }));
+        }, title: title, visualType: visualType, icon: "mic", children: volumeIndicatorVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(AudioVolumeIndicator, {})] })) }));
 };
 const DeviceSelectorAudioOutput = ({ title, visualType, }) => {
     const { useSpeakerState } = videoReactBindings.useCallStateHooks();
@@ -2642,13 +2657,14 @@ const LivestreamLayout = (props) => {
         ? participants.find(videoClient.hasScreenShare)
         : undefined;
     usePaginatedLayoutSortPreset(call);
-    const overlay = (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName }));
-    const { floatingParticipantProps, muted } = props;
-    const floatingParticipantOverlay = hasOngoingScreenShare && (jsxRuntime.jsx(ParticipantOverlay
-    // these elements aren't needed for the video feed
-    , { 
+    const { floatingParticipantProps, muted, ParticipantViewUI } = props;
+    const overlay = ParticipantViewUI ?? (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName, enableFullScreen: props.enableFullScreen }));
+    const floatingParticipantOverlay = hasOngoingScreenShare &&
+        (ParticipantViewUI ?? (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), hasOngoingScreenShare && presenter && (jsxRuntime.jsx(ParticipantView, { className: "str-video__livestream-layout__screen-share", participant: presenter, ParticipantViewUI: overlay, trackType: "screenShareTrack", muteAudio // audio is rendered by ParticipantsAudio
                 : true })), currentSpeaker && (jsxRuntime.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
@@ -2670,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 } = videoReactBindings.useCallStateHooks();
     const participantCount = useParticipantCount();
     const duration = useUpdateCallDuration();
     const toggleFullScreen = useToggleFullScreen();
     const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] }) }));
+    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })) }));
 };
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = videoReactBindings.useCallStateHooks();
@@ -3005,7 +3026,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.25.1").split('.');
+const [major, minor, patch] = ("1.26.1").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -3015,6 +3036,7 @@ videoClient.setSdkInfo({
 
 exports.AcceptCallButton = AcceptCallButton;
 exports.Audio = Audio;
+exports.AudioVolumeIndicator = AudioVolumeIndicator;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.BackgroundFiltersProvider = BackgroundFiltersProvider;