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

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

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

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

@@ -1,6 +1,5 @@
-import { PropsWithErrorHandler } from '../../utilities/callControlHandler';
-export type DeviceSelectorVideoProps = PropsWithErrorHandler<{
+export type DeviceSelectorVideoProps = {
     title?: string;
     visualType?: 'list' | 'dropdown';
-}>;
-export declare const DeviceSelectorVideo: (props: DeviceSelectorVideoProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const DeviceSelectorVideo: ({ title, visualType, }: 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: <P extends unknown[]>(props: PropsWithErrorHandler, handler: (...args: P) => Promise<void>) => (() => Promise<void>);
+export declare const createCallControlHandler: (props: PropsWithErrorHandler, handler: () => Promise<void>) => (() => Promise<void>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.7.26",
+  "version": "1.7.28",
   "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.10",
+    "@stream-io/video-client": "1.11.12",
     "@stream-io/video-filters-web": "0.1.6",
-    "@stream-io/video-react-bindings": "1.2.4",
+    "@stream-io/video-react-bindings": "1.2.6",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"

package/src/components/DeviceSettings/DeviceSelectorAudio.tsx

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

package/src/components/DeviceSettings/DeviceSelectorVideo.tsx

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

package/src/hooks/usePersistedDevicePreferences.ts

@@ -68,14 +68,8 @@ const usePersistDevicePreferences = (
  *
  * @param key the key to use for local storage.
  */
-const useApplyDevicePreferences = (
-  key: string,
-  onWillApply: () => void,
-  onApplied: () => void,
-) => {
+const useApplyDevicePreferences = (key: string, onApplied: () => void) => {
   const call = useCall();
-  const onWillApplyRef = useRef(onWillApply);
-  onWillApplyRef.current = onWillApply;
   const onAppliedRef = useRef(onApplied);
   onAppliedRef.current = onApplied;
   useEffect(() => {
@@ -121,22 +115,17 @@ const useApplyDevicePreferences = (
         console.warn('Failed to load device preferences', err);
       }
       if (preferences) {
-        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);
-        });
+        await initMic(preferences.mic);
+        await initCamera(preferences.camera);
         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;
@@ -153,11 +142,7 @@ export const usePersistedDevicePreferences = (
   key: string = '@stream-io/device-preferences',
 ) => {
   const shouldPersistRef = useRef(false);
-  useApplyDevicePreferences(
-    key,
-    () => (shouldPersistRef.current = false),
-    () => (shouldPersistRef.current = true),
-  );
+  useApplyDevicePreferences(key, () => (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 = <P extends unknown[]>(
+export const createCallControlHandler = (
   props: PropsWithErrorHandler,
-  handler: (...args: P) => Promise<void>,
+  handler: () => Promise<void>,
 ): (() => Promise<void>) => {
   const logger = getLogger(['react-sdk']);
 
-  return async (...args: P) => {
+  return async () => {
     try {
-      await handler(...args);
+      await handler();
     } catch (error) {
       if (props.onError) {
         props.onError(error);