@stream-io/video-react-sdk 1.14.1 → 1.14.3

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/dist/src/core/components/CallLayout/index.d.ts

@@ -2,4 +2,5 @@ export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';
 export * from './PipLayout';
+export { useFilteredParticipants } from './hooks';
 export type { FilterableParticipant, ParticipantFilter, ParticipantPredicate, } from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.14.1",
+  "version": "1.14.3",
   "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.1",
+    "@stream-io/video-client": "1.19.3",
     "@stream-io/video-filters-web": "0.1.7",
-    "@stream-io/video-react-bindings": "1.5.13",
+    "@stream-io/video-react-bindings": "1.5.15",
     "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/core/components/CallLayout/index.ts

@@ -2,6 +2,7 @@ export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';
 export * from './PipLayout';
+export { useFilteredParticipants } from './hooks';
 export type {
   FilterableParticipant,
   ParticipantFilter,