@stream-io/video-react-sdk 1.7.14 → 1.7.16

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.7.16](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.15...@stream-io/video-react-sdk-1.7.16) (2024-11-14)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.11.1`
+* `@stream-io/video-react-bindings` updated to version `1.1.18`
+## [1.7.15](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.14...@stream-io/video-react-sdk-1.7.15) (2024-11-13)
+
+
+### Bug Fixes
+
+* race conditions in usePersistedDevicePreferences ([#1575](https://github.com/GetStream/stream-video-js/issues/1575)) ([08aacc4](https://github.com/GetStream/stream-video-js/commit/08aacc4e35920e30d9f091ba9207ecf757d86796))
+
 ## [1.7.14](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.13...@stream-io/video-react-sdk-1.7.14) (2024-11-13)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -79,13 +79,15 @@ const defaultDevice = 'default';
  *
  * @param key the key to use for local storage.
  */
-const usePersistDevicePreferences = (key) => {
+const usePersistDevicePreferences = (key, shouldPersistRef) => {
     const { useMicrophoneState, useCameraState, useSpeakerState } = videoReactBindings.useCallStateHooks();
     const call = videoReactBindings.useCall();
     const mic = useMicrophoneState();
     const camera = useCameraState();
     const speaker = useSpeakerState();
     react.useEffect(() => {
+        if (!shouldPersistRef.current)
+            return;
         if (!call)
             return;
         if (call.state.callingState === videoClient.CallingState.LEFT)
@@ -118,6 +120,7 @@ const usePersistDevicePreferences = (key) => {
         mic.isMute,
         mic.selectedDevice,
         speaker.selectedDevice,
+        shouldPersistRef,
     ]);
 };
 /**
@@ -125,16 +128,23 @@ const usePersistDevicePreferences = (key) => {
  *
  * @param key the key to use for local storage.
  */
-const useApplyDevicePreferences = (key) => {
+const useApplyDevicePreferences = (key, onApplied) => {
     const call = videoReactBindings.useCall();
+    const onAppliedRef = react.useRef(onApplied);
+    onAppliedRef.current = onApplied;
     react.useEffect(() => {
         if (!call)
             return;
         if (call.state.callingState === videoClient.CallingState.LEFT)
             return;
+        let cancel = false;
         const apply = async () => {
             const initMic = async (setting) => {
+                if (cancel)
+                    return;
                 await call.microphone.select(parseDeviceId(setting.selectedDeviceId));
+                if (cancel)
+                    return;
                 if (setting.muted) {
                     await call.microphone.disable();
                 }
@@ -143,7 +153,11 @@ const useApplyDevicePreferences = (key) => {
                 }
             };
             const initCamera = async (setting) => {
+                if (cancel)
+                    return;
                 await call.camera.select(parseDeviceId(setting.selectedDeviceId));
+                if (cancel)
+                    return;
                 if (setting.muted) {
                     await call.camera.disable();
                 }
@@ -152,6 +166,8 @@ const useApplyDevicePreferences = (key) => {
                 }
             };
             const initSpeaker = (setting) => {
+                if (cancel)
+                    return;
                 call.speaker.select(parseDeviceId(setting.selectedDeviceId) ?? '');
             };
             let preferences = null;
@@ -167,9 +183,14 @@ const useApplyDevicePreferences = (key) => {
                 initSpeaker(preferences.speaker);
             }
         };
-        apply().catch((err) => {
+        apply()
+            .then(() => onAppliedRef.current())
+            .catch((err) => {
             console.warn('Failed to apply device preferences', err);
         });
+        return () => {
+            cancel = true;
+        };
     }, [call, key]);
 };
 /**
@@ -178,8 +199,9 @@ const useApplyDevicePreferences = (key) => {
  * @param key the key to use for local storage.
  */
 const usePersistedDevicePreferences = (key = '@stream-io/device-preferences') => {
-    useApplyDevicePreferences(key);
-    usePersistDevicePreferences(key);
+    const shouldPersistRef = react.useRef(false);
+    useApplyDevicePreferences(key, () => (shouldPersistRef.current = true));
+    usePersistDevicePreferences(key, shouldPersistRef);
 };
 const parseDeviceId = (deviceId) => deviceId !== defaultDevice ? deviceId : undefined;
 
@@ -2529,7 +2551,7 @@ const LivestreamPlayer = (props) => {
     return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.7.14").split('.');
+const [major, minor, patch] = ("1.7.16").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,