@azure/communication-react 1.3.3-alpha-202209110016.0 → 1.3.3-alpha-202209140018.0

package/dist/dist-cjs/communication-react/index.js

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202209110016.0';
+var telemetryVersion = '1.3.3-alpha-202209140018.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6736,15 +6736,7 @@ const DevicesButton = (props) => {
     const { onRenderIcon } = props;
     const localeStrings = useLocale$1().strings.devicesButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    /* @conditional-compile-remove(rooms) */
-    const isSelectMicAllowed = _usePermissions().microphoneButton;
-    /* @conditional-compile-remove(rooms) */
-    const isSelectCamAllowed = _usePermissions().cameraButton;
-    const devicesButtonMenu = (_a = props.menuProps) !== null && _a !== void 0 ? _a : generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.menuStyles }), strings, 
-    /* @conditional-compile-remove(rooms) */
-    isSelectCamAllowed, 
-    /* @conditional-compile-remove(rooms) */
-    isSelectMicAllowed);
+    const devicesButtonMenu = (_a = props.menuProps) !== null && _a !== void 0 ? _a : generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_b = props.styles) === null || _b === void 0 ? void 0 : _b.menuStyles }), strings);
     const onRenderOptionsIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonOptions" }));
     return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { menuProps: devicesButtonMenu, menuIconProps: { hidden: true }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderOptionsIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'devicesButtonLabel' })));
 };
@@ -6778,11 +6770,7 @@ const CameraButton = (props) => {
     const localeStrings = useLocale$1().strings.cameraButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const [announcerString, setAnnouncerString] = React.useState(undefined);
-    let disabled = props.disabled || waitForCamera;
-    /* @conditional-compile-remove(rooms) */
-    const permissions = _usePermissions();
-    /* @conditional-compile-remove(rooms) */
-    disabled = disabled || !permissions.cameraButton;
+    const disabled = props.disabled || waitForCamera;
     const onRenderCameraOnIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOn" }));
     const onRenderCameraOffIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOff" }));
     if (waitForCamera && strings.tooltipVideoLoadingContent) {
@@ -6952,11 +6940,9 @@ const MicrophoneButton = (props) => {
     // no mics but there are speakers, then only the primary part of the button should be disabled to allow for
     // speaker change.
     const primaryDisabled = props.primaryDisabled || (isSplit && !((_b = props.microphones) === null || _b === void 0 ? void 0 : _b.length) ? true : undefined);
-    let disabled = props.disabled ||
+    const disabled = props.disabled ||
         (isSplit && !((_c = props.microphones) === null || _c === void 0 ? void 0 : _c.length) && !((_d = props.speakers) === null || _d === void 0 ? void 0 : _d.length)) ||
         (!isSplit && props.microphones && ((_e = props.microphones) === null || _e === void 0 ? void 0 : _e.length) === 0);
-    /* @conditional-compile-remove(rooms) */
-    disabled = !_usePermissions().microphoneButton || disabled;
     const onRenderMicOnIcon = () => {
         return React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOn" });
     };
@@ -7146,12 +7132,9 @@ const ScreenShareButton = (props) => {
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = react.useTheme();
     const styles = screenshareButtonStyles(theme);
-    let disabled = props.disabled;
-    /* @conditional-compile-remove(rooms) */
-    disabled = !_usePermissions().screenShare || disabled;
-    const onRenderScreenShareOnIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonScreenShareStop" }));
-    const onRenderScreenShareOffIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonScreenShareStart" }));
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { className: react.mergeStyles(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: disabled })));
+    const onRenderScreenShareOnIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStop" }));
+    const onRenderScreenShareOffIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStart" }));
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { className: react.mergeStyles(styles, props.styles), onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel', disabled: props.disabled })));
 };
 const screenshareButtonStyles = (theme) => ({
     rootChecked: {
@@ -14856,11 +14839,24 @@ const Devices = (props) => {
         var _a;
         return concatButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.increaseFlyoutItemSize, props.styles]);
+    /* @conditional-compile-remove(rooms) */
+    const permissions = _usePermissions();
+    /* @conditional-compile-remove(rooms) */
+    const locale = useLocale();
     return (React__default['default'].createElement(DevicesButton
     /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
     , Object.assign({ 
         /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
-        persistMenu: true }, devicesButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, "data-ui-id": "calling-composite-devices-button", disabled: props.disabled })));
+        persistMenu: true }, devicesButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, "data-ui-id": "calling-composite-devices-button", disabled: props.disabled, 
+        /* @conditional-compile-remove(rooms) */
+        strings: getLabelFromPermissions(permissions, locale) })));
+};
+/* @conditional-compile-remove(rooms) */
+const getLabelFromPermissions = (permissions, locale) => {
+    if (!permissions.cameraButton && !permissions.microphoneButton) {
+        return { label: locale.component.strings.microphoneButton.speakerMenuTitle };
+    }
+    return undefined;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -15239,14 +15235,25 @@ const CallControls = (props) => {
     const onDismissDialpad = () => {
         setShowDialpad(false);
     };
+    /* @conditional-compile-remove(rooms) */
+    const rolePermissions = _usePermissions();
+    let screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
+    /* @conditional-compile-remove(rooms) */
+    screenShareButtonIsEnabled = rolePermissions.screenShare && screenShareButtonIsEnabled;
+    let microphoneButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton);
+    /* @conditional-compile-remove(rooms) */
+    microphoneButtonIsEnabled = rolePermissions.microphoneButton && microphoneButtonIsEnabled;
+    let cameraButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton);
+    /* @conditional-compile-remove(rooms) */
+    cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
         /* @conditional-compile-remove(PSTN-calls) */
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
             React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
+                microphoneButtonIsEnabled && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
+                cameraButtonIsEnabled && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) })),
+                screenShareButtonIsEnabled && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
                     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                     !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
@@ -16804,9 +16811,9 @@ const LocalDeviceSettings = (props) => {
     // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for
     // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.
     return (React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens },
-        React__default['default'].createElement(react.Stack, null,
+        isSelectCamEnabled && (React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Label, { id: 'call-composite-local-camera-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !isSelectCamEnabled }, cameraLabel),
-            React__default['default'].createElement(react.Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": 'call-composite-local-camera-settings-label', placeholder: defaultPlaceHolder, options: isSelectCamEnabled ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }], styles: dropDownStyles(theme), disabled: !isSelectCamEnabled, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
+            React__default['default'].createElement(react.Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": 'call-composite-local-camera-settings-label', placeholder: defaultPlaceHolder, options: isSelectCamEnabled ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }], styles: dropDownStyles(theme), errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
                     ? undefined
                     : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: isSelectMicEnabled
                     ? props.selectedCamera
@@ -16816,11 +16823,11 @@ const LocalDeviceSettings = (props) => {
                             : ''
                     : 'deniedOrUnknown', onChange: (event, option, index) => {
                     props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOptions);
-                }, onRenderTitle: (props) => onRenderTitle('Camera', props) })),
+                }, onRenderTitle: (props) => onRenderTitle('Camera', props) }))),
         React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Label, { id: 'call-composite-local-sound-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !isSelectMicEnabled }, soundLabel),
             React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: mainStackTokens },
-                React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: !isSelectMicEnabled, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
+                isSelectMicEnabled && (React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
                         ? undefined
                         : locale.strings.call.microphonePermissionDenied, options: isSelectMicEnabled ? getDropDownList(props.microphones) : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: isSelectMicEnabled
                         ? props.selectedMicrophone
@@ -16828,7 +16835,7 @@ const LocalDeviceSettings = (props) => {
                             : defaultDeviceId(props.microphones)
                         : 'deniedOrUnknown', onChange: (event, option, index) => {
                         props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
-                    }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }),
+                    }, onRenderTitle: (props) => onRenderTitle('Microphone', props) })),
                 React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
                         props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
                     }, onRenderTitle: (props) => onRenderTitle('Speaker', props) })))));
@@ -17104,22 +17111,33 @@ const ConfigurationPage = (props) => {
     const locale = useLocale();
     const title = (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop }, locale.strings.call.configurationPageTitle));
     const callDescription = locale.strings.call.configurationPageCallDetails && (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
+    let mobileWithPreview = mobileView;
+    /* @conditional-compile-remove(rooms) */
+    mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;
     return (React__default['default'].createElement(react.Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
             React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps))),
-        React__default['default'].createElement(react.Stack, { grow: true, horizontal: !mobileView, horizontalAlign: mobileView ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileView ? configurationStackTokensMobile : configurationStackTokensDesktop },
-            mobileView && (React__default['default'].createElement(react.Stack.Item, null,
+        React__default['default'].createElement(react.Stack, { grow: true, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
+            mobileWithPreview && (React__default['default'].createElement(react.Stack.Item, null,
                 title,
                 callDescription)),
-            React__default['default'].createElement(LocalPreview, { mobileView: mobileView, showDevicesButton: mobileView }),
+            localPreviewTrampoline(mobileWithPreview, 
+            /* @conditional-compile-remove(rooms) */ !rolePermissions.cameraButton),
             React__default['default'].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle },
-                !mobileView && (React__default['default'].createElement(React__default['default'].Fragment, null,
+                !mobileWithPreview && (React__default['default'].createElement(React__default['default'].Fragment, null,
                     React__default['default'].createElement(react.Stack.Item, { styles: callDetailsContainerStylesDesktop },
                         title,
                         callDescription),
                     React__default['default'].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGranted, microphonePermissionGranted: microphonePermissionGranted })))),
-                React__default['default'].createElement(react.Stack, { styles: mobileView ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                    React__default['default'].createElement(StartCallButton, { className: mobileView ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton }))))));
+                React__default['default'].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
+                    React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton }))))));
+};
+const localPreviewTrampoline = (mobileView, doNotShow) => {
+    /* @conditional-compile-remove(rooms) */
+    if (doNotShow) {
+        return undefined;
+    }
+    return React__default['default'].createElement(LocalPreview, { mobileView: mobileView, showDevicesButton: mobileView });
 };
 
 // Copyright (c) Microsoft Corporation.