@stream-io/video-react-sdk 1.7.3 → 1.7.5

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.7.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.4...@stream-io/video-react-sdk-1.7.5) (2024-10-30)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.10.1`
+* `@stream-io/video-react-bindings` updated to version `1.1.10`
+
+### Bug Fixes
+
+* various device selector issues ([#1541](https://github.com/GetStream/stream-video-js/issues/1541)) ([f23618b](https://github.com/GetStream/stream-video-js/commit/f23618bda447eeb2d66f908bdb38b24db051f87c))
+
+## [1.7.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.3...@stream-io/video-react-sdk-1.7.4) (2024-10-30)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.10.0`
+* `@stream-io/video-react-bindings` updated to version `1.1.9`
 ## [1.7.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.2...@stream-io/video-react-sdk-1.7.3) (2024-10-28)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -1234,17 +1234,10 @@ 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: selectedDeviceFromProps, title, type, onChange, } = props;
+    const { devices = [], selectedDeviceId, title, type, onChange } = props;
     const { close } = useMenuContext();
-    // sometimes the browser (Chrome) will report the system-default device
-    // with an id of 'default'. In case when it doesn't, we'll select the first
-    // available device.
-    let selectedDeviceId = selectedDeviceFromProps;
-    if (devices.length > 0 &&
-        !devices.find((d) => d.deviceId === selectedDeviceId)) {
-        selectedDeviceId = devices[0].deviceId;
-    }
-    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 ? (jsxRuntime.jsx(DeviceSelectorOption, { id: `${type}--default`, label: "Default", name: type, defaultChecked: true, value: "default" })) : (devices.map((device) => {
+    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) => {
                 return (jsxRuntime.jsx(DeviceSelectorOption, { id: `${type}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
                         onChange?.(e.target.value);
                         close?.();
@@ -1252,29 +1245,20 @@ const DeviceSelectorList = (props) => {
             }))] }));
 };
 const DeviceSelectorDropdown = (props) => {
-    const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, onChange, icon, } = props;
-    // sometimes the browser (Chrome) will report the system-default device
-    // with an id of 'default'. In case when it doesn't, we'll select the first
-    // available device.
-    let selectedDeviceId = selectedDeviceFromProps;
-    if (devices.length > 0 &&
-        !devices.find((d) => d.deviceId === selectedDeviceId)) {
-        selectedDeviceId = devices[0].deviceId;
-    }
+    const { devices = [], selectedDeviceId, title, onChange, icon } = props;
+    const { t } = videoReactBindings.useI18n();
     const selectedIndex = devices.findIndex((d) => d.deviceId === 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, handleSelect: handleSelect, children: devices.map((device) => {
-                    return (jsxRuntime.jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
-                }) })] }));
+    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 DeviceSelector = (props) => {
     const { visualType = 'list', icon, placeholder, ...rest } = props;
     if (visualType === 'list') {
         return jsxRuntime.jsx(DeviceSelectorList, { ...rest });
     }
-    return (jsxRuntime.jsx(DeviceSelectorDropdown, { ...rest, icon: icon, placeholder: placeholder }));
+    return jsxRuntime.jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
 };
 
 const DeviceSelectorAudioInput = ({ title, visualType, }) => {
@@ -2163,6 +2147,7 @@ var Join = "Join";
 var You = "You";
 var Me = "Me";
 var Unknown = "Unknown";
+var Default = "Default";
 var Refresh = "Refresh";
 var Allow = "Allow";
 var Revoke = "Revoke";
@@ -2213,6 +2198,7 @@ var en = {
 	Me: Me,
 	Unknown: Unknown,
 	"Toggle device menu": "Toggle device menu",
+	Default: Default,
 	"Call Recordings": "Call Recordings",
 	Refresh: Refresh,
 	"Check your browser video permissions": "Check your browser video permissions",
@@ -2576,7 +2562,7 @@ const LivestreamPlayer = (props) => {
     return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.7.3").split('.');
+const [major, minor, patch] = ("1.7.5").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,