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

package/dist/src/hooks/index.d.ts

@@ -2,3 +2,4 @@ export * from './useFloatingUIPreset';
 export * from './usePersistedDevicePreferences';
 export * from './useScrollPosition';
 export * from './useRequestPermission';
+export * from './useDeviceList';

package/dist/src/hooks/useDeviceList.d.ts

@@ -0,0 +1,17 @@
+export interface DeviceListItem {
+    deviceId: string;
+    label: string;
+    isSelected: boolean;
+}
+/**
+ * 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.
+ */
+export declare function useDeviceList(devices: MediaDeviceInfo[], selectedDeviceId: string | undefined): {
+    deviceList: DeviceListItem[];
+    selectedDeviceInfo: DeviceListItem;
+    selectedIndex: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.12.2",
+  "version": "1.12.4",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -31,9 +31,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@stream-io/video-client": "1.18.0",
+    "@stream-io/video-client": "1.18.1",
     "@stream-io/video-filters-web": "0.1.7",
-    "@stream-io/video-react-bindings": "1.5.2",
+    "@stream-io/video-react-bindings": "1.5.3",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"

package/src/components/DeviceSettings/DeviceSelector.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import { ChangeEventHandler, useCallback } from 'react';
 
+import { useDeviceList } from '../../hooks/useDeviceList';
 import { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';
 import { useMenuContext } from '../Menu';
-import { useI18n } from '@stream-io/video-react-bindings';
 
 type DeviceSelectorOptionProps = {
   id: string;
@@ -60,7 +60,7 @@ const DeviceSelectorList = (props: {
 }) => {
   const { devices = [], selectedDeviceId, title, type, onChange } = props;
   const { close } = useMenuContext();
-  const { t } = useI18n();
+  const { deviceList } = useDeviceList(devices, selectedDeviceId);
 
   return (
     <div className="str-video__device-settings__device-kind">
@@ -69,34 +69,25 @@ const DeviceSelectorList = (props: {
           {title}
         </div>
       )}
-      {devices.length === 0 ? (
-        <DeviceSelectorOption
-          id={`${type}--default`}
-          label={t('Default')}
-          name={type}
-          defaultChecked
-          value="default"
-        />
-      ) : (
-        devices.map((device) => {
-          return (
-            <DeviceSelectorOption
-              id={`${type}--${device.deviceId}`}
-              value={device.deviceId}
-              label={device.label}
-              key={device.deviceId}
-              onChange={(e) => {
-                onChange?.(e.target.value);
-                close?.();
-              }}
-              name={type}
-              selected={
-                device.deviceId === selectedDeviceId || devices.length === 1
+      {deviceList.map((device) => {
+        return (
+          <DeviceSelectorOption
+            id={`${type}--${device.deviceId}`}
+            value={device.deviceId}
+            label={device.label}
+            key={device.deviceId}
+            onChange={(e) => {
+              const deviceId = e.target.value;
+              if (deviceId !== 'default') {
+                onChange?.(deviceId);
               }
-            />
-          );
-        })
-      )}
+              close?.();
+            }}
+            name={type}
+            selected={device.isSelected}
+          />
+        );
+      })}
     </div>
   );
 };
@@ -109,17 +100,19 @@ const DeviceSelectorDropdown = (props: {
   icon: string;
 }) => {
   const { devices = [], selectedDeviceId, title, onChange, icon } = props;
-  const { t } = useI18n();
-
-  const selectedIndex = devices.findIndex(
-    (d) => d.deviceId === selectedDeviceId,
+  const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(
+    devices,
+    selectedDeviceId,
   );
 
   const handleSelect = useCallback(
     (index: number) => {
-      onChange?.(devices[index].deviceId);
+      const deviceId = deviceList[index].deviceId;
+      if (deviceId !== 'default') {
+        onChange?.(deviceId);
+      }
     },
-    [devices, onChange],
+    [deviceList, onChange],
   );
 
   return (
@@ -130,23 +123,17 @@ const DeviceSelectorDropdown = (props: {
       <DropDownSelect
         icon={icon}
         defaultSelectedIndex={selectedIndex}
-        defaultSelectedLabel={devices[selectedIndex]?.label ?? t('Default')}
+        defaultSelectedLabel={selectedDeviceInfo.label}
         handleSelect={handleSelect}
       >
-        {devices.length === 0 ? (
-          <DropDownSelectOption icon={icon} label={t('Default')} selected />
-        ) : (
-          devices.map((device) => (
-            <DropDownSelectOption
-              key={device.deviceId}
-              icon={icon}
-              label={device.label}
-              selected={
-                device.deviceId === selectedDeviceId || devices.length === 1
-              }
-            />
-          ))
-        )}
+        {deviceList.map((device) => (
+          <DropDownSelectOption
+            key={device.deviceId}
+            icon={icon}
+            label={device.label}
+            selected={device.isSelected}
+          />
+        ))}
       </DropDownSelect>
     </div>
   );

package/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useFloatingUIPreset';
 export * from './usePersistedDevicePreferences';
 export * from './useScrollPosition';
 export * from './useRequestPermission';
+export * from './useDeviceList';

package/src/hooks/useDeviceList.tsx

@@ -0,0 +1,57 @@
+import { useI18n } from '@stream-io/video-react-bindings';
+import { useMemo } from 'react';
+
+export interface DeviceListItem {
+  deviceId: string;
+  label: string;
+  isSelected: boolean;
+}
+
+/**
+ * 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.
+ */
+export function useDeviceList(
+  devices: MediaDeviceInfo[],
+  selectedDeviceId: string | undefined,
+): {
+  deviceList: DeviceListItem[];
+  selectedDeviceInfo: DeviceListItem;
+  selectedIndex: number;
+} {
+  const { t } = useI18n();
+
+  return useMemo(() => {
+    let selectedDeviceInfo: DeviceListItem | null = null;
+    let selectedIndex: number | null = null;
+
+    const deviceList: DeviceListItem[] = 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]);
+}