@stream-io/video-react-sdk 1.34.2 → 1.35.0

package/dist/embedded.cjs.js

@@ -1036,6 +1036,41 @@ const AudioVolumeIndicator = () => {
     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 LEVEL_BARS = 5;
+const DeviceLevelIndicator = ({ deviceId }) => {
+    const [audioLevel, setAudioLevel] = react.useState(0);
+    react.useEffect(() => {
+        let cancelled = false;
+        let dispose;
+        navigator.mediaDevices
+            .getUserMedia({
+            audio: { deviceId: { exact: deviceId } },
+            video: false,
+        })
+            .then((mediaStream) => {
+            if (cancelled) {
+                mediaStream.getTracks().forEach((t) => t.stop());
+                return;
+            }
+            dispose = videoClient.createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80 });
+        })
+            .catch(console.error);
+        return () => {
+            cancelled = true;
+            dispose?.().catch(console.error);
+        };
+    }, [deviceId]);
+    const activeBars = Math.round((audioLevel / 100) * LEVEL_BARS);
+    return (jsxRuntime.jsx("div", { className: "str-video__device-level-indicator", "aria-label": "Audio level", children: Array.from({ length: LEVEL_BARS }, (_, i) => (jsxRuntime.jsx("div", { className: clsx('str-video__device-level-indicator__bar', {
+                'str-video__device-level-indicator__bar--active': i < activeBars,
+            }) }, i))) }));
+};
+const DeviceAudioPreviewItem = ({ device, onSelect, }) => {
+    if (device.deviceId === 'default')
+        return null;
+    return (jsxRuntime.jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsxRuntime.jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), device.label, jsxRuntime.jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
+};
+
 const SelectContext = react.createContext({});
 const Select = (props) => {
     const { children, icon, defaultSelectedLabel, defaultSelectedIndex, handleSelect: handleSelectProp, } = props;
@@ -1127,6 +1162,18 @@ const DeviceSelectorList = (props) => {
                     }, name: type, selected: device.isSelected }, device.deviceId));
             }), children] }));
 };
+const DeviceSelectorPreview = (props) => {
+    const { devices = [], selectedDeviceId, title, onChange, children, PreviewItem, } = props;
+    const { close } = useMenuContext();
+    const { deviceList } = useDeviceList(devices, selectedDeviceId);
+    const onSelect = react.useCallback((deviceId) => {
+        if (deviceId === 'default')
+            return;
+        onChange?.(deviceId);
+        close?.();
+    }, [onChange, close]);
+    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) => (jsxRuntime.jsx(PreviewItem, { device: device, onSelect: onSelect }, device.deviceId))), children] }));
+};
 const DeviceSelectorDropdown = (props) => {
     const { devices = [], selectedDeviceId, title, onChange, icon } = props;
     const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(devices, selectedDeviceId);
@@ -1139,6 +1186,10 @@ const DeviceSelectorDropdown = (props) => {
     return (jsxRuntime.jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsxRuntime.jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), jsxRuntime.jsx(DropDownSelect, { icon: icon, defaultSelectedIndex: selectedIndex, defaultSelectedLabel: selectedDeviceInfo.label, handleSelect: handleSelect, children: deviceList.map((device) => (jsxRuntime.jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.isSelected }, device.deviceId))) })] }));
 };
 const DeviceSelector = (props) => {
+    if (props.visualType === 'preview') {
+        const { PreviewItem, ...rest } = props;
+        return jsxRuntime.jsx(DeviceSelectorPreview, { ...rest, PreviewItem: PreviewItem });
+    }
     const { visualType = 'list', icon, ...rest } = props;
     if (visualType === 'list') {
         return jsxRuntime.jsx(DeviceSelectorList, { ...rest });
@@ -1156,7 +1207,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
     const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.34.2"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.35.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1199,7 +1250,7 @@ const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible =
     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", children: volumeIndicatorVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(AudioVolumeIndicator, {})] })) }));
+        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(AudioVolumeIndicator, {})] })) }));
 };
 const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
     const { useSpeakerState } = videoReactBindings.useCallStateHooks();
@@ -1211,12 +1262,48 @@ const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = tru
         }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl })] })) }));
 };
 
+const DeviceVideoPreview = ({ deviceId }) => {
+    const videoRef = react.useRef(null);
+    react.useEffect(() => {
+        let cancelled = false;
+        let stream;
+        navigator.mediaDevices
+            .getUserMedia({
+            video: { deviceId: { exact: deviceId } },
+            audio: false,
+        })
+            .then((mediaStream) => {
+            if (cancelled) {
+                mediaStream.getTracks().forEach((t) => t.stop());
+                return;
+            }
+            stream = mediaStream;
+            if (videoRef.current) {
+                videoRef.current.srcObject = mediaStream;
+            }
+        })
+            .catch(console.error);
+        return () => {
+            cancelled = true;
+            stream?.getTracks().forEach((t) => t.stop());
+        };
+    }, [deviceId]);
+    return (jsxRuntime.jsx("div", { className: "str-video__device-video-preview", children: jsxRuntime.jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "str-video__device-video-preview__video" }) }));
+};
+const DeviceVideoPreviewItem = ({ device, onSelect, }) => {
+    if (device.deviceId === 'default')
+        return null;
+    return (jsxRuntime.jsxs("button", { type: "button", className: clsx('str-video__device-preview', {
+            'str-video__device-preview--selected': device.isSelected,
+        }), onClick: () => onSelect(device.deviceId), "aria-pressed": device.isSelected, children: [jsxRuntime.jsx(DeviceVideoPreview, { deviceId: device.deviceId }), jsxRuntime.jsx("span", { className: "str-video__device-preview__label", children: device.label })] }));
+};
+
 const DeviceSelectorVideo = ({ title, visualType, }) => {
     const { useCameraState } = videoReactBindings.useCallStateHooks();
     const { camera, devices, selectedDevice } = useCameraState();
     return (jsxRuntime.jsx(DeviceSelector, { devices: devices || [], type: "videoinput", selectedDeviceId: selectedDevice, onChange: async (deviceId) => {
             await camera.select(deviceId);
-        }, title: title, visualType: visualType, icon: "camera" }));
+        }, title: title, visualType: visualType, icon: "camera", PreviewItem: DeviceVideoPreviewItem }));
 };
 
 react.forwardRef(function ToggleDeviceSettingsMenuButton({ menuShown }, ref) {