Hide screenshare button for iOS (#3864)

* Hide screenshare button in Calling and CallWithChat samples when on iOS

* Change files

* Duplicate change files for beta release

* fix imports

Author: mgamis-msft

change-beta/@azure-communication-react-aec4f243-84ab-4bb4-aad5-4e73d5ff20c2.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "Calling and CallWithChat samples",
+  "comment": "Hide screenshare button in Calling and CallWithChat samples when on iOS",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-aec4f243-84ab-4bb4-aad5-4e73d5ff20c2.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "Calling and CallWithChat samples",
+  "comment": "Hide screenshare button in Calling and CallWithChat samples when on iOS",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

samples/CallWithChat/src/app/utils/utils.ts

@@ -44,3 +44,9 @@ export const getBackgroundColor = (avatar: string): { backgroundColor: string }
       };
   }
 };
+
+/**
+ * Function to detect iOS devices like IPhones, IPads, and IPods
+ */
+export const isIOS = (): boolean =>
+  /iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

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

@@ -9,7 +9,8 @@ import {
   CallAndChatLocator,
   CallWithChatAdapterState,
   CallWithChatComposite,
-  CallWithChatAdapter
+  CallWithChatAdapter,
+  CallWithChatCompositeOptions
 } from '@azure/communication-react';
 /* @conditional-compile-remove(video-background-effects) */
 import { onResolveVideoEffectDependencyLazy, AzureCommunicationCallAdapterOptions } from '@azure/communication-react';
@@ -19,6 +20,7 @@ import { useSwitchableFluentTheme } from '../theming/SwitchableFluentThemeProvid
 import { createAutoRefreshingCredential } from '../utils/credential';
 import { WEB_APP_TITLE } from '../utils/constants';
 import { useIsMobile } from '../utils/useIsMobile';
+import { isIOS } from '../utils/utils';
 
 export interface CallScreenProps {
   token: string;
@@ -144,6 +146,17 @@ export const CallScreen = (props: CallScreenProps): JSX.Element => {
     afterAdapterCreate
   );
 
+  const shouldDisableScreenShare = isIOS();
+
+  const options: CallWithChatCompositeOptions = useMemo(
+    () => ({
+      callControls: {
+        screenShareButton: !shouldDisableScreenShare
+      }
+    }),
+    [shouldDisableScreenShare]
+  );
+
   // Dispose of the adapter in the window's before unload event.
   // This ensures the service knows the user intentionally left the call if the user
   // closed the browser tab during an active call.
@@ -169,6 +182,7 @@ export const CallScreen = (props: CallScreenProps): JSX.Element => {
       fluentTheme={currentTheme.theme}
       rtl={currentRtl}
       joinInvitationURL={callInvitationUrl}
+      options={options}
       formFactor={isMobileSession ? 'mobile' : 'desktop'}
     />
   );

samples/Calling/src/app/utils/utils.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/**
+ * Function to detect iOS devices like IPhones, IPads, and IPods
+ */
+export const isIOS = (): boolean =>
+  /iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

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

@@ -1,35 +1,32 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { CommonCallAdapter, CallComposite, CallAdapterLocator } from '@azure/communication-react';
-/* @conditional-compile-remove(call-readiness) */
-import { CallCompositeOptions } from '@azure/communication-react';
+import { GroupCallLocator, TeamsMeetingLinkLocator } from '@azure/communication-calling';
+import { CallAdapterLocator, CallComposite, CallCompositeOptions, CommonCallAdapter } from '@azure/communication-react';
 import { Spinner } from '@fluentui/react';
+import React, { useEffect, useMemo } from 'react';
 import { useSwitchableFluentTheme } from '../theming/SwitchableFluentThemeProvider';
 import { useIsMobile } from '../utils/useIsMobile';
-import React, { useEffect } from 'react';
-/* @conditional-compile-remove(call-readiness) */
-import { useMemo } from 'react';
+import { isIOS } from '../utils/utils';
 import { CallScreenProps } from './CallScreen';
-import { GroupCallLocator, TeamsMeetingLinkLocator } from '@azure/communication-calling';
 
 export type CallCompositeContainerProps = CallScreenProps & { adapter?: CommonCallAdapter };
 
 export const CallCompositeContainer = (props: CallCompositeContainerProps): JSX.Element => {
   const { adapter } = props;
   const { currentTheme, currentRtl } = useSwitchableFluentTheme();
   const isMobileSession = useIsMobile();
+  const shouldDisableScreenShare = isIOS();
 
-  /* @conditional-compile-remove(call-readiness) */
   const options: CallCompositeOptions = useMemo(
     () => ({
-      onPermissionsTroubleshootingClick,
-      onNetworkingTroubleShootingClick,
+      /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,
+      /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick,
       callControls: {
-        legacyControlBarExperience: false
+        screenShareButton: !shouldDisableScreenShare
       }
     }),
-    []
+    [shouldDisableScreenShare]
   );
 
   // Dispose of the adapter in the window's before unload event.
@@ -58,7 +55,6 @@ export const CallCompositeContainer = (props: CallCompositeContainerProps): JSX.
       rtl={currentRtl}
       callInvitationUrl={callInvitationUrl}
       formFactor={isMobileSession ? 'mobile' : 'desktop'}
-      /* @conditional-compile-remove(call-readiness) */
       options={options}
     />
   );