@stream-io/video-react-sdk 0.4.3 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -31,11 +31,10 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/video-client": "^0.4.1",
-    "@stream-io/video-react-bindings": "^0.3.1",
+    "@stream-io/video-client": "^0.4.2",
+    "@stream-io/video-react-bindings": "^0.3.2",
     "clsx": "^2.0.0",
-    "prop-types": "^15.8.1",
-    "rxjs": "~7.8.1"
+    "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/src/components/CallControls/ScreenShareButton.tsx

@@ -21,7 +21,10 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SCREENSHARE);
 
-  const { screenShare, isMute: isScreenSharing } = useScreenShareState();
+  const { screenShare, isMute: amIScreenSharing } = useScreenShareState();
+  const disableScreenShareButton = amIScreenSharing
+    ? isSomeoneScreenSharing
+    : false;
   return (
     <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>
       <PermissionNotification
@@ -33,9 +36,11 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
       >
         <CompositeButton active={isSomeoneScreenSharing} caption={caption}>
           <IconButton
-            icon={isScreenSharing ? 'screen-share-on' : 'screen-share-off'}
+            icon={
+              isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off'
+            }
             title={t('Share screen')}
-            disabled={!isScreenSharing && isSomeoneScreenSharing}
+            disabled={disableScreenShareButton}
             onClick={async () => {
               if (!hasPermission) {
                 await requestPermission();

package/src/hooks/usePersistedDevicePreferences.ts

@@ -16,22 +16,30 @@ export type LocalDevicePreferences = {
  * @param key the key to use for local storage.
  */
 const usePersistDevicePreferences = (key: string) => {
-  const { useMicrophoneState, useCameraState, useSpeakerState } =
-    useCallStateHooks();
+  const {
+    useMicrophoneState,
+    useCameraState,
+    useSpeakerState,
+    useCallSettings,
+  } = useCallStateHooks();
   const mic = useMicrophoneState();
   const camera = useCameraState();
   const speaker = useSpeakerState();
+  const settings = useCallSettings();
   useEffect(() => {
+    if (!settings) return;
     try {
+      const hasPreferences = !!window.localStorage.getItem(key);
+      const { audio, video } = settings;
       const defaultDevice = 'default';
       const preferences: LocalDevicePreferences = {
         mic: {
           selectedDeviceId: mic.selectedDevice || defaultDevice,
-          muted: mic.isMute,
+          muted: hasPreferences ? mic.isMute : !audio.mic_default_on,
         },
         camera: {
           selectedDeviceId: camera.selectedDevice || defaultDevice,
-          muted: camera.isMute,
+          muted: hasPreferences ? camera.isMute : !video.camera_default_on,
         },
         speaker: {
           selectedDeviceId: speaker.selectedDevice || defaultDevice,
@@ -48,6 +56,7 @@ const usePersistDevicePreferences = (key: string) => {
     key,
     mic.isMute,
     mic.selectedDevice,
+    settings,
     speaker.selectedDevice,
   ]);
 };
@@ -59,8 +68,10 @@ const usePersistDevicePreferences = (key: string) => {
  */
 const useApplyDevicePreferences = (key: string) => {
   const call = useCall();
+  const { useCallSettings } = useCallStateHooks();
+  const settings = useCallSettings();
   useEffect(() => {
-    if (!call) return;
+    if (!call || !settings) return;
 
     const apply = async () => {
       const initMic = async (setting: LocalDevicePreference) => {
@@ -85,24 +96,29 @@ const useApplyDevicePreferences = (key: string) => {
         call.speaker.select(setting.selectedDeviceId);
       };
 
+      let preferences: LocalDevicePreferences | null = null;
       try {
-        const preferences = JSON.parse(
+        preferences = JSON.parse(
           window.localStorage.getItem(key)!,
         ) as LocalDevicePreferences;
-        if (preferences) {
-          await initMic(preferences.mic);
-          await initCamera(preferences.camera);
-          initSpeaker(preferences.speaker);
-        }
       } catch (err) {
         console.warn('Failed to load device preferences', err);
       }
+      if (preferences) {
+        await initMic(preferences.mic);
+        await initCamera(preferences.camera);
+        initSpeaker(preferences.speaker);
+      } else {
+        const { audio, video } = settings;
+        if (audio.mic_default_on) await call.microphone.enable();
+        if (video.camera_default_on) await call.camera.enable();
+      }
     };
 
     apply().catch((err) => {
       console.warn('Failed to apply device preferences', err);
     });
-  }, [call, key]);
+  }, [call, key, settings]);
 };
 
 /**