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

package/dist/src/core/components/CallLayout/PipLayout.d.ts

@@ -30,7 +30,7 @@ export type PipLayoutProps = {
      * @default true
      */
     mirrorLocalParticipantVideo?: boolean;
-} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
+} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;
 export declare const PipLayout: {
     Pip: {
         (props: PipLayoutProps): import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.14.2",
+  "version": "1.14.4",
   "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.19.2",
+    "@stream-io/video-client": "1.20.0",
     "@stream-io/video-filters-web": "0.1.7",
-    "@stream-io/video-react-bindings": "1.5.14",
+    "@stream-io/video-react-bindings": "1.5.16",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -46,7 +46,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
     "@stream-io/audio-filters-web": "^0.2.3",
-    "@stream-io/video-styling": "^1.1.3",
+    "@stream-io/video-styling": "^1.1.4",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",

package/src/core/components/CallLayout/PipLayout.tsx

@@ -1,4 +1,8 @@
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import {
+  useCall,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-bindings';
 import { useEffect, useState } from 'react';
 
 import { ParticipantsAudio } from '../Audio';
@@ -13,6 +17,8 @@ import {
   useFilteredParticipants,
   usePaginatedLayoutSortPreset,
 } from './hooks';
+import { hasScreenShare } from '@stream-io/video-client';
+import { Icon } from '../../../components';
 
 export type PipLayoutProps = {
   /**
@@ -46,19 +52,16 @@ export type PipLayoutProps = {
    * @default true
    */
   mirrorLocalParticipantVideo?: boolean;
-} & Pick<
-  ParticipantViewProps,
-  'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'
->;
+} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;
 
 const Pip = (props: PipLayoutProps) => {
+  const { t } = useI18n();
   const {
     excludeLocalParticipant = false,
     filterParticipants,
     mirrorLocalParticipantVideo = true,
     VideoPlaceholder,
     ParticipantViewUI = DefaultParticipantViewUI,
-    PictureInPicturePlaceholder,
   } = props;
   const [layoutWrapperElement, setLayoutWrapperElement] =
     useState<HTMLDivElement | null>(null);
@@ -68,6 +71,7 @@ const Pip = (props: PipLayoutProps) => {
     excludeLocalParticipant,
     filterParticipants,
   });
+  const screenSharingParticipant = participants.find((p) => hasScreenShare(p));
 
   usePaginatedLayoutSortPreset(call);
 
@@ -82,6 +86,24 @@ const Pip = (props: PipLayoutProps) => {
 
   return (
     <div className="str-video__pip-layout" ref={setLayoutWrapperElement}>
+      {screenSharingParticipant &&
+        (screenSharingParticipant.isLocalParticipant ? (
+          <div className="str-video__pip-screen-share-local">
+            <Icon icon="screen-share-off" />
+            <span className="str-video__pip-screen-share-local__title">
+              {t('You are presenting your screen')}
+            </span>
+          </div>
+        ) : (
+          <ParticipantView
+            participant={screenSharingParticipant}
+            trackType="screenShareTrack"
+            muteAudio
+            mirror={false}
+            VideoPlaceholder={VideoPlaceholder}
+            ParticipantViewUI={ParticipantViewUI}
+          />
+        ))}
       {participants.map((participant) => (
         <ParticipantView
           key={participant.sessionId}
@@ -89,7 +111,6 @@ const Pip = (props: PipLayoutProps) => {
           muteAudio
           mirror={mirror}
           VideoPlaceholder={VideoPlaceholder}
-          PictureInPicturePlaceholder={PictureInPicturePlaceholder}
           ParticipantViewUI={ParticipantViewUI}
         />
       ))}

package/src/hooks/usePersistedDevicePreferences.ts

@@ -41,17 +41,36 @@ const defaultDevice = 'default';
 export const usePersistedDevicePreferences = (
   key: string = '@stream-io/device-preferences',
 ): void => {
-  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 = <K extends DeviceKey>(
   key: string,
   deviceKey: K,
   state: DeviceState<K>,
+  defaultMuted?: boolean,
 ): void => {
   const { useCallCallingState } = useCallStateHooks();
   const callingState = useCallCallingState();
@@ -65,6 +84,7 @@ const usePersistedDevicePreference = <K extends DeviceKey>(
       if (
         callingState === CallingState.LEFT ||
         !state.devices?.length ||
+        typeof defaultMuted !== 'boolean' ||
         applyingState !== 'idle'
       ) {
         return;
@@ -75,8 +95,16 @@ const usePersistedDevicePreference = <K extends 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`,
@@ -88,7 +116,15 @@ const usePersistedDevicePreference = <K extends DeviceKey>(
         setApplyingState('applied');
       }
     },
-    [applyingState, callingState, deviceKey, key, manager, state.devices],
+    [
+      applyingState,
+      callingState,
+      defaultMuted,
+      deviceKey,
+      key,
+      manager,
+      state.devices,
+    ],
   );
 
   useEffect(
@@ -206,10 +242,14 @@ const applyLocalDevicePreference = async (
   }
 
   if (typeof muted === 'boolean') {
-    await manager[muted ? 'disable' : 'enable']?.();
+    await applyMutedState(manager, muted);
   }
 };
 
+const applyMutedState = async (manager: DeviceManagerLike, muted: boolean) => {
+  await manager[muted ? 'disable' : 'enable']?.();
+};
+
 const getSelectedDevicePreference = (
   devices: MediaDeviceInfo[],
   selectedDevice: string | undefined,