@stream-io/video-react-sdk 1.18.3 → 1.18.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.18.3",
+  "version": "1.18.5",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.23.4",
+    "@stream-io/video-client": "1.24.0",
     "@stream-io/video-filters-web": "0.2.1",
-    "@stream-io/video-react-bindings": "1.6.7",
+    "@stream-io/video-react-bindings": "1.7.0",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"

package/src/hooks/usePersistedDevicePreferences.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { CallingState } from '@stream-io/video-client';
+import { CallingState, InputDeviceStatus } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
 export type LocalDevicePreference = {
@@ -25,7 +25,7 @@ type DeviceState<K extends DeviceKey> = {
 };
 
 interface DeviceManagerLike {
-  state: { selectedDevice: string | undefined };
+  state: { selectedDevice: string | undefined; status?: InputDeviceStatus };
   select: (deviceId: string) => Promise<void> | void;
   enable?: () => Promise<void>;
   disable?: () => Promise<void>;
@@ -86,22 +86,20 @@ export const usePersistedDevicePreferences = (
             state as DeviceState<'camera' | 'microphone' | 'speaker'>
           )[deviceKey];
 
-          if (!manager.state.selectedDevice) {
-            const applyPromise = preference
-              ? applyLocalDevicePreference(
-                  manager,
-                  [preference].flat(),
-                  state.devices,
-                )
-              : applyMutedState(manager, defaultMuted);
-
-            await applyPromise.catch((err) => {
-              console.warn(
-                `Failed to apply ${deviceKey} device preferences`,
-                err,
-              );
-            });
-          }
+          const applyPromise = preference
+            ? applyLocalDevicePreference(
+                manager,
+                [preference].flat(),
+                state.devices,
+              )
+            : applyMutedState(manager, defaultMuted);
+
+          await applyPromise.catch((err) => {
+            console.warn(
+              `Failed to apply ${deviceKey} device preferences`,
+              err,
+            );
+          });
         }
       })().finally(() =>
         setApplyingState((state) => (state === 'applying' ? 'applied' : state)),
@@ -344,7 +342,10 @@ const applyLocalDevicePreference = async (
       devices.find((d) => d.label === p.selectedDeviceLabel);
 
     if (device) {
-      await manager.select(device.deviceId);
+      if (!manager.state.selectedDevice) {
+        await manager.select(device.deviceId);
+      }
+
       muted = p.muted;
       break;
     }
@@ -356,7 +357,9 @@ const applyLocalDevicePreference = async (
 };
 
 const applyMutedState = async (manager: DeviceManagerLike, muted: boolean) => {
-  await manager[muted ? 'disable' : 'enable']?.();
+  if (!manager.state.status) {
+    await manager[muted ? 'disable' : 'enable']?.();
+  }
 };
 
 const getSelectedDevicePreference = (

package/src/wrappers/LivestreamPlayer/LivestreamPlayer.tsx

@@ -108,7 +108,7 @@ const useLivestreamCall = (props: {
   const call = useCall();
   const { useIsCallLive, useOwnCapabilities } = useCallStateHooks();
   const canJoinLive = useIsCallLive();
-  const canJoinEarly = useCanJoinEearly();
+  const canJoinEarly = useCanJoinEarly();
   const canJoinBackstage =
     useOwnCapabilities()?.includes('join-backstage') ?? false;
   const canJoinAsap = canJoinLive || canJoinEarly || canJoinBackstage;
@@ -130,24 +130,26 @@ const useLivestreamCall = (props: {
   return call;
 };
 
-const useCanJoinEearly = () => {
+const useCanJoinEarly = () => {
   const { useCallStartsAt, useCallSettings } = useCallStateHooks();
   const startsAt = useCallStartsAt();
   const settings = useCallSettings();
   const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;
-  const [canJoinEarly, setCanJoinEearly] = useState(() =>
+  const [canJoinEarly, setCanJoinEarly] = useState(() =>
     checkCanJoinEarly(startsAt, joinAheadTimeSeconds),
   );
 
   useEffect(() => {
     if (!canJoinEarly) {
       const handle = setInterval(() => {
-        setCanJoinEearly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+        setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
       }, 1000);
 
       return () => clearInterval(handle);
     }
   }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
+
+  return canJoinEarly;
 };
 
 const checkCanJoinEarly = (