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

package/dist/index.es.js

@@ -252,21 +252,26 @@ const useFloatingUIPreset = ({ placement, strategy, }) => {
  * @param key the key to use for local storage.
  */
 const usePersistDevicePreferences = (key) => {
-    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 = {
                 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,
@@ -284,6 +289,7 @@ const usePersistDevicePreferences = (key) => {
         key,
         mic.isMute,
         mic.selectedDevice,
+        settings,
         speaker.selectedDevice,
     ]);
 };
@@ -294,8 +300,10 @@ const usePersistDevicePreferences = (key) => {
  */
 const useApplyDevicePreferences = (key) => {
     const call = useCall();
+    const { useCallSettings } = useCallStateHooks();
+    const settings = useCallSettings();
     useEffect(() => {
-        if (!call)
+        if (!call || !settings)
             return;
         const apply = async () => {
             const initMic = async (setting) => {
@@ -319,22 +327,30 @@ const useApplyDevicePreferences = (key) => {
             const initSpeaker = (setting) => {
                 call.speaker.select(setting.selectedDeviceId);
             };
+            let preferences = null;
             try {
-                const preferences = JSON.parse(window.localStorage.getItem(key));
-                if (preferences) {
-                    await initMic(preferences.mic);
-                    await initCamera(preferences.camera);
-                    initSpeaker(preferences.speaker);
-                }
+                preferences = JSON.parse(window.localStorage.getItem(key));
             }
             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]);
 };
 /**
  * This hook will apply and persist the device preferences from local storage.
@@ -816,8 +832,11 @@ const ScreenShareButton = (props) => {
     const { useHasOngoingScreenShare, useScreenShareState } = useCallStateHooks();
     const isSomeoneScreenSharing = useHasOngoingScreenShare();
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(OwnCapability.SCREENSHARE);
-    const { screenShare, isMute: isScreenSharing } = useScreenShareState();
-    return (jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(PermissionNotification, { permission: OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your screen.'), messageAwaitingApproval: t('Awaiting for an approval to share screen.'), messageRevoked: t('You can no longer share your screen.'), children: jsx(CompositeButton, { active: isSomeoneScreenSharing, caption: caption, children: jsx(IconButton, { icon: isScreenSharing ? 'screen-share-on' : 'screen-share-off', title: t('Share screen'), disabled: !isScreenSharing && isSomeoneScreenSharing, onClick: async () => {
+    const { screenShare, isMute: amIScreenSharing } = useScreenShareState();
+    const disableScreenShareButton = amIScreenSharing
+        ? isSomeoneScreenSharing
+        : false;
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(PermissionNotification, { permission: OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your screen.'), messageAwaitingApproval: t('Awaiting for an approval to share screen.'), messageRevoked: t('You can no longer share your screen.'), children: jsx(CompositeButton, { active: isSomeoneScreenSharing, caption: caption, children: jsx(IconButton, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off', title: t('Share screen'), disabled: disableScreenShareButton, onClick: async () => {
                         if (!hasPermission) {
                             await requestPermission();
                         }
@@ -1482,11 +1501,11 @@ const StreamTheme = ({ as: Component = 'div', className, children, ...props }) =
 
 const DefaultDisabledVideoPreview = () => {
     const { t } = useI18n();
-    return jsx("div", { children: t('Video is disabled') });
+    return (jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('Video is disabled') }));
 };
 const DefaultNoCameraPreview = () => {
     const { t } = useI18n();
-    return jsx("div", { children: t('No camera found') });
+    return (jsx("div", { className: "str_video__video-preview__no-camera-preview", children: t('No camera found') }));
 };
 const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, }) => {
     const { useCameraState } = useCallStateHooks();
@@ -2097,7 +2116,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 const hasScreenShare = (p) => !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("0.4.2" ).split('.');
+const [major, minor, patch] = ("0.4.4" ).split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,