@stream-io/video-react-sdk 1.7.24 → 1.7.26

package/dist/src/components/DeviceSettings/DeviceSelectorAudio.d.ts

@@ -1,8 +1,9 @@
-export type DeviceSelectorAudioInputProps = {
+import { PropsWithErrorHandler } from '../../utilities/callControlHandler';
+export type DeviceSelectorAudioInputProps = PropsWithErrorHandler<{
     title?: string;
     visualType?: 'list' | 'dropdown';
-};
-export declare const DeviceSelectorAudioInput: ({ title, visualType, }: DeviceSelectorAudioInputProps) => import("react/jsx-runtime").JSX.Element;
+}>;
+export declare const DeviceSelectorAudioInput: (props: DeviceSelectorAudioInputProps) => import("react/jsx-runtime").JSX.Element;
 export type DeviceSelectorAudioOutputProps = {
     title?: string;
     visualType?: 'list' | 'dropdown';

package/dist/src/components/DeviceSettings/DeviceSelectorVideo.d.ts

@@ -1,5 +1,6 @@
-export type DeviceSelectorVideoProps = {
+import { PropsWithErrorHandler } from '../../utilities/callControlHandler';
+export type DeviceSelectorVideoProps = PropsWithErrorHandler<{
     title?: string;
     visualType?: 'list' | 'dropdown';
-};
-export declare const DeviceSelectorVideo: ({ title, visualType, }: DeviceSelectorVideoProps) => import("react/jsx-runtime").JSX.Element;
+}>;
+export declare const DeviceSelectorVideo: (props: DeviceSelectorVideoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/utilities/callControlHandler.d.ts

@@ -13,4 +13,4 @@ export type PropsWithErrorHandler<T = unknown> = T & {
  * @param props component props, including the onError callback
  * @param handler event handler to wrap
  */
-export declare const createCallControlHandler: (props: PropsWithErrorHandler, handler: () => Promise<void>) => (() => Promise<void>);
+export declare const createCallControlHandler: <P extends unknown[]>(props: PropsWithErrorHandler, handler: (...args: P) => Promise<void>) => (() => Promise<void>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.7.24",
+  "version": "1.7.26",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -32,9 +32,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@stream-io/video-client": "1.11.8",
+    "@stream-io/video-client": "1.11.10",
     "@stream-io/video-filters-web": "0.1.6",
-    "@stream-io/video-react-bindings": "1.2.2",
+    "@stream-io/video-react-bindings": "1.2.4",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"

package/src/components/DeviceSettings/DeviceSelectorAudio.tsx

@@ -1,28 +1,35 @@
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { DeviceSelector } from './DeviceSelector';
+import {
+  createCallControlHandler,
+  PropsWithErrorHandler,
+} from '../../utilities/callControlHandler';
 
-export type DeviceSelectorAudioInputProps = {
+export type DeviceSelectorAudioInputProps = PropsWithErrorHandler<{
   title?: string;
   visualType?: 'list' | 'dropdown';
-};
+}>;
 
-export const DeviceSelectorAudioInput = ({
-  title,
-  visualType,
-}: DeviceSelectorAudioInputProps) => {
+export const DeviceSelectorAudioInput = (
+  props: DeviceSelectorAudioInputProps,
+) => {
   const { useMicrophoneState } = useCallStateHooks();
   const { microphone, selectedDevice, devices } = useMicrophoneState();
+  const handleChange = createCallControlHandler(
+    props,
+    async (deviceId: string) => {
+      await microphone.select(deviceId);
+    },
+  );
 
   return (
     <DeviceSelector
       devices={devices || []}
       selectedDeviceId={selectedDevice}
       type="audioinput"
-      onChange={async (deviceId) => {
-        await microphone.select(deviceId);
-      }}
-      title={title}
-      visualType={visualType}
+      onChange={handleChange}
+      title={props.title}
+      visualType={props.visualType}
       icon="mic"
     />
   );

package/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -1,28 +1,33 @@
+import {
+  createCallControlHandler,
+  PropsWithErrorHandler,
+} from '../../utilities/callControlHandler';
 import { DeviceSelector } from './DeviceSelector';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
-export type DeviceSelectorVideoProps = {
+export type DeviceSelectorVideoProps = PropsWithErrorHandler<{
   title?: string;
   visualType?: 'list' | 'dropdown';
-};
+}>;
 
-export const DeviceSelectorVideo = ({
-  title,
-  visualType,
-}: DeviceSelectorVideoProps) => {
+export const DeviceSelectorVideo = (props: DeviceSelectorVideoProps) => {
   const { useCameraState } = useCallStateHooks();
   const { camera, devices, selectedDevice } = useCameraState();
+  const handleChange = createCallControlHandler(
+    props,
+    async (deviceId: string) => {
+      await camera.select(deviceId);
+    },
+  );
 
   return (
     <DeviceSelector
       devices={devices || []}
       type="videoinput"
       selectedDeviceId={selectedDevice}
-      onChange={async (deviceId) => {
-        await camera.select(deviceId);
-      }}
-      title={title}
-      visualType={visualType}
+      onChange={handleChange}
+      title={props.title}
+      visualType={props.visualType}
       icon="camera"
     />
   );

package/src/hooks/usePersistedDevicePreferences.ts

@@ -68,8 +68,14 @@ const usePersistDevicePreferences = (
  *
  * @param key the key to use for local storage.
  */
-const useApplyDevicePreferences = (key: string, onApplied: () => void) => {
+const useApplyDevicePreferences = (
+  key: string,
+  onWillApply: () => void,
+  onApplied: () => void,
+) => {
   const call = useCall();
+  const onWillApplyRef = useRef(onWillApply);
+  onWillApplyRef.current = onWillApply;
   const onAppliedRef = useRef(onApplied);
   onAppliedRef.current = onApplied;
   useEffect(() => {
@@ -115,17 +121,22 @@ const useApplyDevicePreferences = (key: string, onApplied: () => void) => {
         console.warn('Failed to load device preferences', err);
       }
       if (preferences) {
-        await initMic(preferences.mic);
-        await initCamera(preferences.camera);
+        await initMic(preferences.mic).catch((err) => {
+          console.warn('Failed to apply microphone preferences', err);
+        });
+        await initCamera(preferences.camera).catch((err) => {
+          console.warn('Failed to apply camera preferences', err);
+        });
         initSpeaker(preferences.speaker);
       }
     };
 
+    onWillApplyRef.current();
     apply()
-      .then(() => onAppliedRef.current())
       .catch((err) => {
         console.warn('Failed to apply device preferences', err);
-      });
+      })
+      .then(() => onAppliedRef.current());
 
     return () => {
       cancel = true;
@@ -142,7 +153,11 @@ export const usePersistedDevicePreferences = (
   key: string = '@stream-io/device-preferences',
 ) => {
   const shouldPersistRef = useRef(false);
-  useApplyDevicePreferences(key, () => (shouldPersistRef.current = true));
+  useApplyDevicePreferences(
+    key,
+    () => (shouldPersistRef.current = false),
+    () => (shouldPersistRef.current = true),
+  );
   usePersistDevicePreferences(key, shouldPersistRef);
 };
 

package/src/utilities/callControlHandler.ts

@@ -16,15 +16,15 @@ export type PropsWithErrorHandler<T = unknown> = T & {
  * @param props component props, including the onError callback
  * @param handler event handler to wrap
  */
-export const createCallControlHandler = (
+export const createCallControlHandler = <P extends unknown[]>(
   props: PropsWithErrorHandler,
-  handler: () => Promise<void>,
+  handler: (...args: P) => Promise<void>,
 ): (() => Promise<void>) => {
   const logger = getLogger(['react-sdk']);
 
-  return async () => {
+  return async (...args: P) => {
     try {
-      await handler();
+      await handler(...args);
     } catch (error) {
       if (props.onError) {
         props.onError(error);