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

package/dist/index.cjs.js

@@ -1409,7 +1409,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 +1420,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 +1441,27 @@ const DeviceSelector = (props) => {
     return jsxRuntime.jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
 };
 
-const DeviceSelectorAudioInput = ({ title, visualType, }) => {
+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 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();
@@ -3005,7 +3020,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.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,