diff --git a/change-beta/@azure-communication-react-814eca6b-6f1a-44e2-bc6a-7c372c6192c4.json b/change-beta/@azure-communication-react-814eca6b-6f1a-44e2-bc6a-7c372c6192c4.json new file mode 100644 index 00000000000..3a9617b6e8d --- /dev/null +++ b/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" +} diff --git a/change/@azure-communication-react-814eca6b-6f1a-44e2-bc6a-7c372c6192c4.json b/change/@azure-communication-react-814eca6b-6f1a-44e2-bc6a-7c372c6192c4.json new file mode 100644 index 00000000000..3a9617b6e8d --- /dev/null +++ b/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" +} diff --git a/packages/react-composites/src/composites/CallComposite/components/CallControls.tsx b/packages/react-composites/src/composites/CallComposite/components/CallControls.tsx index 3b3f005bb3e..e6460f42443 100644 --- a/packages/react-composites/src/composites/CallComposite/components/CallControls.tsx +++ b/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(); diff --git a/packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx b/packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx index 7b3b57cb053..336abf1db2b 100644 --- a/packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx +++ b/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; }; diff --git a/samples/CallWithChat/src/app/views/CallScreen.tsx b/samples/CallWithChat/src/app/views/CallScreen.tsx index 56d422b5faf..ce182950c86 100644 --- a/samples/CallWithChat/src/app/views/CallScreen.tsx +++ b/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. diff --git a/samples/Calling/src/app/views/CallCompositeContainer.tsx b/samples/Calling/src/app/views/CallCompositeContainer.tsx index 4e1b97a494b..015291a0aba 100644 --- a/samples/Calling/src/app/views/CallCompositeContainer.tsx +++ b/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.