Composite option to hide local screen share stream (#5699)

carocao-msft · dmceachernmsft · web-flow · commit 57a7c04be0aa · 2025-03-12T22:04:09.000Z
* update

* Change files

* update

---------

Co-authored-by: Donald McEachern &lt;94866715+dmceachernmsft@users.noreply.github.com&gt;
diff --git a/change-beta/@azure-communication-react-46abddf1-3c19-4736-a407-68e23b69a02e.json b/change-beta/@azure-communication-react-46abddf1-3c19-4736-a407-68e23b69a02e.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "local screenshare",
+  "comment": "Composite option to hide local screenshare stream",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md
@@ -778,6 +778,7 @@ export type CallCompositeOptions = {
     disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
+        localScreenShareView?: 'stream' | 'placeholderMessage';
     };
     surveyOptions?: {
         disableSurvey?: boolean;
@@ -1622,6 +1623,7 @@ export type CallWithChatCompositeOptions = {
     localVideoTile?: boolean | LocalVideoTileOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
+        localScreenShareView?: 'stream' | 'placeholderMessage';
     };
     surveyOptions?: {
         disableSurvey?: boolean;
@@ -5624,6 +5626,7 @@ export interface VideoGalleryProps {
     isTogetherModeActive?: boolean;
     layout?: VideoGalleryLayout;
     localParticipant: VideoGalleryLocalParticipant;
+    localScreenShareView?: 'stream' | 'placeholderMessage';
     localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;
     localVideoTileSize?: LocalVideoTileSize;
     localVideoViewOptions?: VideoStreamOptions;
diff --git a/packages/communication-react/review/stable/communication-react.api.md b/packages/communication-react/review/stable/communication-react.api.md
@@ -611,6 +611,7 @@ export type CallCompositeOptions = {
     disableAutoShowDtmfDialer?: boolean | DtmfDialPadOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
+        localScreenShareView?: 'stream' | 'placeholderMessage';
     };
     surveyOptions?: {
         disableSurvey?: boolean;
@@ -1389,6 +1390,7 @@ export type CallWithChatCompositeOptions = {
     localVideoTile?: boolean | LocalVideoTileOptions;
     galleryOptions?: {
         layout?: VideoGalleryLayout;
+        localScreenShareView?: 'stream' | 'placeholderMessage';
     };
     surveyOptions?: {
         disableSurvey?: boolean;
@@ -4787,6 +4789,7 @@ export interface VideoGalleryProps {
     dominantSpeakers?: string[];
     layout?: VideoGalleryLayout;
     localParticipant: VideoGalleryLocalParticipant;
+    localScreenShareView?: 'stream' | 'placeholderMessage';
     localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;
     localVideoTileSize?: LocalVideoTileSize;
     localVideoViewOptions?: VideoStreamOptions;
diff --git a/packages/react-components/src/components/VideoGallery.tsx b/packages/react-components/src/components/VideoGallery.tsx
@@ -387,6 +387,10 @@ export interface VideoGalleryProps {
    * This callback is to permit video for remote participant(s)
    */
   onPermitVideo?: (userIds: string[]) => Promise<void>;
+  /**
+   * Controls the view of the local screenshare stream in the gallery
+   */
+  localScreenShareView?: 'stream' | 'placeholderMessage';
 }
 
 /**
@@ -491,7 +495,8 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     onForbidAudio,
     onPermitAudio,
     onForbidVideo,
-    onPermitVideo
+    onPermitVideo,
+    localScreenShareView
   } = props;
 
   const ids = useIdentifiers();
@@ -786,6 +791,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       isAvailable={localParticipant.screenShareStream?.isAvailable}
       onCreateLocalStreamView={onCreateLocalStreamView}
       onDisposeLocalScreenShareStreamView={onDisposeLocalScreenShareStreamView}
+      localScreenShareView={localScreenShareView}
     />
   );
 
diff --git a/packages/react-components/src/components/VideoGallery/LocalScreenShare.tsx b/packages/react-components/src/components/VideoGallery/LocalScreenShare.tsx
@@ -1,13 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { Icon, Stack, Text } from '@fluentui/react';
 import React, { useEffect } from 'react';
 import { useLocale } from '../../localization';
+import { useTheme } from '../../theming';
 import { CreateVideoStreamViewResult, VideoGalleryLocalParticipant, VideoStreamOptions } from '../../types';
 import { VideoTile } from '../VideoTile';
 import { StreamMedia } from '../StreamMedia';
 import { LoadingSpinner } from './RemoteScreenShare';
 import { _formatString } from '@internal/acs-ui-common';
+import {
+  screenSharingContainerStyle,
+  screenSharingNotificationContainerStyle,
+  screenSharingNotificationIconContainerStyle,
+  screenSharingNotificationIconStyle,
+  screenSharingNotificationTextStyle
+} from './styles/LocalScreenShare.styles';
 
 /**
  * A memoized version of local screen share component. React.memo is used for a performance
@@ -21,16 +30,19 @@ export const LocalScreenShare = React.memo(
     isAvailable?: boolean;
     onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;
     onDisposeLocalScreenShareStreamView?: () => Promise<void>;
+    localScreenShareView?: 'stream' | 'placeholderMessage';
   }) => {
     const {
       localParticipant,
       renderElement,
       isAvailable,
       onCreateLocalStreamView,
-      onDisposeLocalScreenShareStreamView
+      onDisposeLocalScreenShareStreamView,
+      localScreenShareView = 'stream'
     } = props;
     const locale = useLocale();
-    if (!renderElement) {
+    const theme = useTheme();
+    if (!renderElement && localScreenShareView === 'stream') {
       onCreateLocalStreamView && onCreateLocalStreamView();
     }
 
@@ -44,13 +56,38 @@ export const LocalScreenShare = React.memo(
     if (!localParticipant || !localParticipant.isScreenSharingOn) {
       return null;
     }
+    const localScreenSharingPlaceholder = (
+      <Stack horizontalAlign="center" verticalAlign="center" className={screenSharingContainerStyle}>
+        <Stack
+          horizontalAlign="center"
+          verticalAlign="center"
+          className={screenSharingNotificationContainerStyle(theme)}
+          tokens={{ childrenGap: '1rem' }}
+        >
+          <Stack horizontal verticalAlign="center" className={screenSharingNotificationIconContainerStyle}>
+            <Icon iconName="ControlButtonScreenShareStart" className={screenSharingNotificationIconStyle(theme)} />
+          </Stack>
+          <Text className={screenSharingNotificationTextStyle} aria-live="polite">
+            {locale.strings.videoGallery.screenIsBeingSharedMessage}
+          </Text>
+        </Stack>
+      </Stack>
+    );
 
     const displayName = !localParticipant?.displayName
       ? locale.strings.videoGallery.displayNamePlaceholder
       : localParticipant?.displayName;
 
     const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;
 
+    if (localScreenShareView === 'placeholderMessage') {
+      return (
+        <VideoTile displayName={displayName} isMuted={localParticipant?.isMuted} onRenderPlaceholder={() => <></>}>
+          {localScreenSharingPlaceholder}
+        </VideoTile>
+      );
+    }
+
     return (
       <VideoTile
         displayName={displayName}
diff --git a/packages/react-composites/src/composites/CallComposite/CallComposite.tsx b/packages/react-composites/src/composites/CallComposite/CallComposite.tsx
@@ -262,6 +262,10 @@ export type CallCompositeOptions = {
      * Layout for the gallery when the call starts
      */
     layout?: VideoGalleryLayout;
+    /**
+     * Controls the view of the local screenshare stream in the gallery
+     */
+    localScreenShareView?: 'stream' | 'placeholderMessage';
   };
   /**
    * Options for end of call survey
diff --git a/packages/react-composites/src/composites/CallComposite/components/MediaGallery.tsx b/packages/react-composites/src/composites/CallComposite/components/MediaGallery.tsx
@@ -69,6 +69,7 @@ export interface MediaGalleryProps {
   captionsOptions?: {
     height: 'full' | 'default';
   };
+  localScreenShareView?: 'stream' | 'placeholderMessage';
 }
 
 /**
@@ -224,6 +225,7 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
             ? videoGalleryProps.onMuteParticipant
             : undefined
         }
+        localScreenShareView={props.localScreenShareView}
       />
     );
   }, [
@@ -250,7 +252,8 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
     onStartRemoteSpotlightWithPrompt,
     onStopRemoteSpotlightWithPrompt,
     layoutBasedOnTilePosition,
-    capabilities?.muteOthers
+    capabilities?.muteOthers,
+    props.localScreenShareView
   ]);
 
   return (
diff --git a/packages/react-composites/src/composites/CallComposite/pages/CallPage.tsx b/packages/react-composites/src/composites/CallComposite/pages/CallPage.tsx
@@ -200,6 +200,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
           hideSpotlightButtons={options?.spotlight?.hideSpotlightButtons}
           videoTilesOptions={options?.videoTilesOptions}
           captionsOptions={options?.captionsBanner}
+          localScreenShareView={options?.galleryOptions?.localScreenShareView}
         />
       );
     }
diff --git a/packages/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx b/packages/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx
@@ -185,6 +185,10 @@ export type CallWithChatCompositeOptions = {
      * Layout for the gallery when the call starts
      */
     layout?: VideoGalleryLayout;
+    /**
+     * Controls the view of the local screenshare stream in the gallery
+     */
+    localScreenShareView?: 'stream' | 'placeholderMessage';
   };
   /**
    * Options for end of call survey
@@ -321,6 +325,7 @@ type CallWithChatScreenProps = {
   localVideoTile?: boolean | LocalVideoTileOptions;
   galleryOptions?: {
     layout?: VideoGalleryLayout;
+    localScreenShareView?: 'stream' | 'placeholderMessage';
   };
   /**
    * Options for end of call survey

Original file line number	Diff line number	Diff line change
`@@ -200,6 +200,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {`
`200`	`200`	`hideSpotlightButtons={options?.spotlight?.hideSpotlightButtons}`
`201`	`201`	`videoTilesOptions={options?.videoTilesOptions}`
`202`	`202`	`captionsOptions={options?.captionsBanner}`
	`203`	`+ localScreenShareView={options?.galleryOptions?.localScreenShareView}`
`203`	`204`	`/>`
`204`	`205`	`);`
`205`	`206`	`}`