@stream-io/video-react-sdk 1.14.2 → 1.14.4

package/dist/index.es.js

@@ -80,12 +80,13 @@ const defaultDevice = 'default';
  * @param key the key to use for local storage.
  */
 const usePersistedDevicePreferences = (key = '@stream-io/device-preferences') => {
-    const { useCameraState, useMicrophoneState, useSpeakerState } = useCallStateHooks();
-    usePersistedDevicePreference(key, 'camera', useCameraState());
-    usePersistedDevicePreference(key, 'microphone', useMicrophoneState());
-    usePersistedDevicePreference(key, 'speaker', useSpeakerState());
+    const { useCallSettings, useCameraState, useMicrophoneState, useSpeakerState, } = useCallStateHooks();
+    const settings = useCallSettings();
+    usePersistedDevicePreference(key, 'camera', useCameraState(), settings ? !settings.video.camera_default_on : undefined);
+    usePersistedDevicePreference(key, 'microphone', useMicrophoneState(), settings ? !settings.audio.mic_default_on : undefined);
+    usePersistedDevicePreference(key, 'speaker', useSpeakerState(), false);
 };
-const usePersistedDevicePreference = (key, deviceKey, state) => {
+const usePersistedDevicePreference = (key, deviceKey, state, defaultMuted) => {
     const { useCallCallingState } = useCallStateHooks();
     const callingState = useCallCallingState();
     const [applyingState, setApplyingState] = useState('idle');
@@ -93,14 +94,18 @@ const usePersistedDevicePreference = (key, deviceKey, state) => {
     useEffect(function apply() {
         if (callingState === CallingState.LEFT ||
             !state.devices?.length ||
+            typeof defaultMuted !== 'boolean' ||
             applyingState !== 'idle') {
             return;
         }
         const preferences = parseLocalDevicePreferences(key);
         const preference = preferences[deviceKey];
         setApplyingState('applying');
-        if (preference && !manager.state.selectedDevice) {
-            applyLocalDevicePreference(manager, [preference].flat(), state.devices)
+        if (!manager.state.selectedDevice) {
+            const applyPromise = preference
+                ? applyLocalDevicePreference(manager, [preference].flat(), state.devices)
+                : applyMutedState(manager, defaultMuted);
+            applyPromise
                 .catch((err) => {
                 console.warn(`Failed to apply ${deviceKey} device preferences`, err);
             })
@@ -109,7 +114,15 @@ const usePersistedDevicePreference = (key, deviceKey, state) => {
         else {
             setApplyingState('applied');
         }
-    }, [applyingState, callingState, deviceKey, key, manager, state.devices]);
+    }, [
+        applyingState,
+        callingState,
+        defaultMuted,
+        deviceKey,
+        key,
+        manager,
+        state.devices,
+    ]);
     useEffect(function persist() {
         if (callingState === CallingState.LEFT ||
             !state.devices?.length ||
@@ -189,9 +202,12 @@ const applyLocalDevicePreference = async (manager, preference, devices) => {
         }
     }
     if (typeof muted === 'boolean') {
-        await manager[muted ? 'disable' : 'enable']?.();
+        await applyMutedState(manager, muted);
     }
 };
+const applyMutedState = async (manager, muted) => {
+    await manager[muted ? 'disable' : 'enable']?.();
+};
 const getSelectedDevicePreference = (devices, selectedDevice) => ({
     selectedDeviceId: selectedDevice || defaultDevice,
     selectedDeviceLabel: devices?.find((d) => d.deviceId === selectedDevice)?.label ?? '',
@@ -2656,13 +2672,15 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 
 const Pip = (props) => {
-    const { excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, PictureInPicturePlaceholder, } = props;
+    const { t } = useI18n();
+    const { excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
     const [layoutWrapperElement, setLayoutWrapperElement] = useState(null);
     const call = useCall();
     const participants = useFilteredParticipants({
         excludeLocalParticipant,
         filterParticipants,
     });
+    const screenSharingParticipant = participants.find((p) => hasScreenShare(p));
     usePaginatedLayoutSortPreset(call);
     useEffect(() => {
         if (!layoutWrapperElement || !call)
@@ -2672,7 +2690,8 @@ const Pip = (props) => {
     const mirror = mirrorLocalParticipantVideo ? undefined : false;
     if (!call)
         return null;
-    return (jsx("div", { className: "str-video__pip-layout", ref: setLayoutWrapperElement, children: participants.map((participant) => (jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
+    return (jsxs("div", { className: "str-video__pip-layout", ref: setLayoutWrapperElement, children: [screenSharingParticipant &&
+                (screenSharingParticipant.isLocalParticipant ? (jsxs("div", { className: "str-video__pip-screen-share-local", children: [jsx(Icon, { icon: "screen-share-off" }), jsx("span", { className: "str-video__pip-screen-share-local__title", children: t('You are presenting your screen') })] })) : (jsx(ParticipantView, { participant: screenSharingParticipant, trackType: "screenShareTrack", muteAudio: true, mirror: false, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }))), participants.map((participant) => (jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId)))] }));
 };
 Pip.displayName = 'PipLayout.Pip';
 const Host = () => {
@@ -2707,7 +2726,7 @@ const LivestreamPlayer = (props) => {
     return (jsx(StreamCall, { call: call, children: jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.14.2").split('.');
+const [major, minor, patch] = ("1.14.4").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,