[Cherry-pick] Prevent showing screenShareButton when formFactor is set to mobile (#3919)

Author: mgamis-msft

change-beta/@azure-communication-react-814eca6b-6f1a-44e2-bc6a-7c372c6192c4.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "Screenshare button",
+  "comment": "Prevent showing screenShareButton when formFactor is set to mobile",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-814eca6b-6f1a-44e2-bc6a-7c372c6192c4.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "Screenshare button",
+  "comment": "Prevent showing screenShareButton when formFactor is set to mobile",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/react-composites/src/composites/CallComposite/components/CallControls.tsx

@@ -69,11 +69,31 @@ export type CallControlsProps = {
 // Enforce a background color on control bar to ensure it matches the composite background color.
 const controlBarStyles = memoizeFunction((background: string) => ({ root: { background: background } }));
 
+const inferCallControlOptions = (
+  mobileView: boolean,
+  callControlOptions?: boolean | CallControlOptions
+): CallControlOptions => {
+  if (callControlOptions === false) {
+    return {};
+  }
+
+  const options = callControlOptions === true || callControlOptions === undefined ? {} : callControlOptions;
+  if (mobileView) {
+    // Set options to always not show screen share button for mobile
+    options.screenShareButton = false;
+  }
+  return options;
+};
+
 /**
  * @private
  */
 export const CallControls = (props: CallControlsProps & ContainerRectProps): JSX.Element => {
-  const options = useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);
+  const options: CallControlOptions = useMemo(
+    () => inferCallControlOptions(!!props.isMobile, props.options),
+    [props.isMobile, props.options]
+  );
+
   /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(rooms) */
   const adapter = useAdapter();
 

packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx

@@ -89,11 +89,8 @@ const inferCommonCallControlOptions = (
   if (mobileView) {
     // Set to compressed mode when composite is optimized for mobile
     options.displayType = 'compact';
-    // Do not show screen share button when composite is optimized for mobile unless the developer
-    // has explicitly opted in.
-    if (options.screenShareButton !== true) {
-      options.screenShareButton = false;
-    }
+    // Set options to always not show screen share button for mobile
+    options.screenShareButton = false;
   }
   return options;
 };

samples/CallWithChat/src/app/views/CallScreen.tsx

@@ -146,15 +146,15 @@ export const CallScreen = (props: CallScreenProps): JSX.Element => {
     afterAdapterCreate
   );
 
-  const shouldDisableScreenShare = isIOS();
+  const shouldHideScreenShare = isMobileSession || isIOS();
 
   const options: CallWithChatCompositeOptions = useMemo(
     () => ({
       callControls: {
-        screenShareButton: !shouldDisableScreenShare
+        screenShareButton: shouldHideScreenShare ? false : undefined
       }
     }),
-    [shouldDisableScreenShare]
+    [shouldHideScreenShare]
   );
 
   // Dispose of the adapter in the window's before unload event.

samples/Calling/src/app/views/CallCompositeContainer.tsx

@@ -16,17 +16,17 @@ export const CallCompositeContainer = (props: CallCompositeContainerProps): JSX.
   const { adapter } = props;
   const { currentTheme, currentRtl } = useSwitchableFluentTheme();
   const isMobileSession = useIsMobile();
-  const shouldDisableScreenShare = isIOS();
+  const shouldHideScreenShare = isMobileSession || isIOS();
 
   const options: CallCompositeOptions = useMemo(
     () => ({
       /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,
       /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick,
       callControls: {
-        screenShareButton: !shouldDisableScreenShare
+        screenShareButton: shouldHideScreenShare ? false : undefined
       }
     }),
-    [shouldDisableScreenShare]
+    [shouldHideScreenShare]
   );
 
   // Dispose of the adapter in the window's before unload event.