@stream-io/video-react-sdk 1.12.2 → 1.12.4

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.12.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.12.3...@stream-io/video-react-sdk-1.12.4) (2025-02-28)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.18.1`
+* `@stream-io/video-react-bindings` updated to version `1.5.3`
+## [1.12.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.12.2...@stream-io/video-react-sdk-1.12.3) (2025-02-27)
+
+
+### Bug Fixes
+
+* add explicit default device option to device selectors ([#1701](https://github.com/GetStream/stream-video-js/issues/1701)) ([1b8e11b](https://github.com/GetStream/stream-video-js/commit/1b8e11b65b5323d440fcb9b03a464a580bca767e))
+
 ## [1.12.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.12.1...@stream-io/video-react-sdk-1.12.2) (2025-02-26)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -303,6 +303,41 @@ const useRequestPermission = (permission) => {
     };
 };
 
+/**
+ * Utility hook that helps render a list of devices or implement a device selector.
+ * Compared to someting like `useCameraState().devices`, it has some handy features:
+ * 1. Adds the "Default" device to the list if applicable (either the user did not
+ * select a device, or a previously selected device is no longer available).
+ * 2. Maps the device list to a format more suitable for rendering.
+ */
+function useDeviceList(devices, selectedDeviceId) {
+    const { t } = videoReactBindings.useI18n();
+    return react.useMemo(() => {
+        let selectedDeviceInfo = null;
+        let selectedIndex = null;
+        const deviceList = devices.map((d, i) => {
+            const isSelected = d.deviceId === selectedDeviceId;
+            const device = { deviceId: d.deviceId, label: d.label, isSelected };
+            if (isSelected) {
+                selectedDeviceInfo = device;
+                selectedIndex = i;
+            }
+            return device;
+        });
+        if (selectedDeviceInfo === null || selectedIndex === null) {
+            const defaultDevice = {
+                deviceId: 'default',
+                label: t('Default'),
+                isSelected: true,
+            };
+            selectedDeviceInfo = defaultDevice;
+            selectedIndex = 0;
+            deviceList.unshift(defaultDevice);
+        }
+        return { deviceList, selectedDeviceInfo, selectedIndex };
+    }, [devices, selectedDeviceId, t]);
+}
+
 exports.MenuVisualType = void 0;
 (function (MenuVisualType) {
     MenuVisualType["PORTAL"] = "portal";
@@ -1225,22 +1260,27 @@ const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, d
 const DeviceSelectorList = (props) => {
     const { devices = [], selectedDeviceId, title, type, onChange } = props;
     const { close } = useMenuContext();
-    const { t } = videoReactBindings.useI18n();
-    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 })), devices.length === 0 ? (jsxRuntime.jsx(DeviceSelectorOption, { id: `${type}--default`, label: t('Default'), name: type, defaultChecked: true, value: "default" })) : (devices.map((device) => {
+    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) => {
                 return (jsxRuntime.jsx(DeviceSelectorOption, { id: `${type}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
-                        onChange?.(e.target.value);
+                        const deviceId = e.target.value;
+                        if (deviceId !== 'default') {
+                            onChange?.(deviceId);
+                        }
                         close?.();
-                    }, name: type, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
-            }))] }));
+                    }, name: type, selected: device.isSelected }, device.deviceId));
+            })] }));
 };
 const DeviceSelectorDropdown = (props) => {
     const { devices = [], selectedDeviceId, title, onChange, icon } = props;
-    const { t } = videoReactBindings.useI18n();
-    const selectedIndex = devices.findIndex((d) => d.deviceId === selectedDeviceId);
+    const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(devices, selectedDeviceId);
     const handleSelect = react.useCallback((index) => {
-        onChange?.(devices[index].deviceId);
-    }, [devices, onChange]);
-    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: devices[selectedIndex]?.label ?? t('Default'), handleSelect: handleSelect, children: devices.length === 0 ? (jsxRuntime.jsx(DropDownSelectOption, { icon: icon, label: t('Default'), selected: true })) : (devices.map((device) => (jsxRuntime.jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId)))) })] }));
+        const deviceId = deviceList[index].deviceId;
+        if (deviceId !== 'default') {
+            onChange?.(deviceId);
+        }
+    }, [deviceList, onChange]);
+    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) => {
     const { visualType = 'list', icon, placeholder, ...rest } = props;
@@ -2639,7 +2679,7 @@ const LivestreamPlayer = (props) => {
     return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.12.2").split('.');
+const [major, minor, patch] = ("1.12.4").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,