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

package/dist/index.es.js

@@ -1232,6 +1232,41 @@ const AudioVolumeIndicator = () => {
     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 LEVEL_BARS = 5;
+const DeviceLevelIndicator = ({ deviceId }) => {
+    const [audioLevel, setAudioLevel] = useState(0);
+    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 = 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 (jsx("div", { className: "str-video__device-level-indicator", "aria-label": "Audio level", children: Array.from({ length: LEVEL_BARS }, (_, i) => (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 (jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), device.label, jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
+};
+
 const SelectContext = createContext({});
 const Select = (props) => {
     const { children, icon, defaultSelectedLabel, defaultSelectedIndex, handleSelect: handleSelectProp, } = props;
@@ -1323,6 +1358,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 = useCallback((deviceId) => {
+        if (deviceId === 'default')
+            return;
+        onChange?.(deviceId);
+        close?.();
+    }, [onChange, close]);
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), deviceList.map((device) => (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);
@@ -1335,6 +1382,10 @@ const DeviceSelectorDropdown = (props) => {
     return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), jsx(DropDownSelect, { icon: icon, defaultSelectedIndex: selectedIndex, defaultSelectedLabel: selectedDeviceInfo.label, handleSelect: handleSelect, children: deviceList.map((device) => (jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.isSelected }, device.deviceId))) })] }));
 };
 const DeviceSelector = (props) => {
+    if (props.visualType === 'preview') {
+        const { PreviewItem, ...rest } = props;
+        return jsx(DeviceSelectorPreview, { ...rest, PreviewItem: PreviewItem });
+    }
     const { visualType = 'list', icon, ...rest } = props;
     if (visualType === 'list') {
         return jsx(DeviceSelectorList, { ...rest });
@@ -1352,7 +1403,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.34.1"}/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
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -1395,7 +1446,7 @@ const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible =
     const { microphone, selectedDevice, devices } = useMicrophoneState();
     return (jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, type: "audioinput", onChange: async (deviceId) => {
             await microphone.select(deviceId);
-        }, title: title, visualType: visualType, icon: "mic", children: volumeIndicatorVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(AudioVolumeIndicator, {})] })) }));
+        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(AudioVolumeIndicator, {})] })) }));
 };
 const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
     const { useSpeakerState } = useCallStateHooks();
@@ -1407,12 +1458,48 @@ const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = tru
         }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl })] })) }));
 };
 
+const DeviceVideoPreview = ({ deviceId }) => {
+    const videoRef = useRef(null);
+    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 (jsx("div", { className: "str-video__device-video-preview", children: 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 (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: [jsx(DeviceVideoPreview, { deviceId: device.deviceId }), jsx("span", { className: "str-video__device-preview__label", children: device.label })] }));
+};
+
 const DeviceSelectorVideo = ({ title, visualType, }) => {
     const { useCameraState } = useCallStateHooks();
     const { camera, devices, selectedDevice } = useCameraState();
     return (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 }));
 };
 
 const DeviceSettings = ({ visualType = MenuVisualType.MENU, }) => {
@@ -2295,9 +2382,7 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const isTrackPaused = trackType !== 'none' ? hasPausedTrack(participant, trackType) : false;
     const isAudioTrackUnmuted = useIsTrackUnmuted(participant);
     const isAudioConnecting = hasAudioTrack && !isAudioTrackUnmuted;
-    return (jsxs(Fragment, { children: [jsx("div", { className: "str-video__participant-details", children: jsxs("div", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isAudioConnecting && (jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsx("span", { title: t('Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && canUnpin && (
-                        // TODO: remove this monstrosity once we have a proper design
-                        jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsx(Notification, { isVisible: isLocalParticipant &&
+    return (jsxs(Fragment, { children: [jsx("div", { className: "str-video__participant-details", children: jsxs("div", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isAudioConnecting && (jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsx("span", { title: t('Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && pin && (jsx("span", { title: canUnpin ? t('Unpin') : t('Pinned'), onClick: canUnpin ? () => call?.unpin(sessionId) : undefined, className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsx(Notification, { isVisible: isLocalParticipant &&
                     connectionQuality === SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
 };
 const SpeechIndicator = () => {
@@ -3175,7 +3260,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.34.1").split('.');
+const [major, minor, patch] = ("1.35.0").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,