@azure/communication-react 1.5.1-alpha-202304010014 → 1.5.1-alpha-202304020014

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

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202304010014';
+var telemetryVersion = '1.5.1-alpha-202304020014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -11886,37 +11886,40 @@ const CameraButton = (props) => {
             }
         }
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
+    const splitButtonMenuItems = [
+        {
+            key: 'cameraPrimaryAction',
+            text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,
+            onClick: () => {
+                onToggleClick();
+            },
+            iconProps: {
+                iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
+                styles: { root: { lineHeight: 0 } }
+            }
+        }
+    ];
+    /* @conditional-compile-remove(video-background-effects) */
+    if (props.onShowVideoEffectsPicker) {
+        splitButtonMenuItems.push({
+            key: 'effects',
+            text: 'Effects',
+            title: 'Video Effects',
+            iconProps: { iconName: 'OptionsVideoBackgroundEffect', styles: { root: { lineHeight: 0 } } },
+            onClick: () => {
+                if (props.onShowVideoEffectsPicker) {
+                    props.onShowVideoEffectsPicker(true);
+                }
+            }
+        });
+    }
     const splitButtonPrimaryAction = {
         key: 'primaryAction',
         title: 'toggle camera',
         itemType: react.ContextualMenuItemType.Section,
         sectionProps: {
             topDivider: true,
-            items: [
-                {
-                    key: 'cameraPrimaryAction',
-                    text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,
-                    onClick: () => {
-                        onToggleClick();
-                    },
-                    iconProps: {
-                        iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',
-                        styles: { root: { lineHeight: 0 } }
-                    }
-                },
-                /* @conditional-compile-remove(video-background-effects) */
-                {
-                    key: 'effects',
-                    text: 'Effects',
-                    title: 'Video Effects',
-                    iconProps: { iconName: 'OptionsVideoBackgroundEffect', styles: { root: { lineHeight: 0 } } },
-                    onClick: () => {
-                        if (props.onShowVideoEffectsPicker) {
-                            props.onShowVideoEffectsPicker(true);
-                        }
-                    }
-                }
-            ]
+            items: splitButtonMenuItems
         }
     };
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
@@ -13516,23 +13519,15 @@ const _VideoBackgroundEffectsPicker = (props) => {
  * @private
  */
 react.mergeStyles({
-    overflowY: 'scroll',
-    overflowX: 'hidden',
-    width: '100%',
-    height: _pxToRem(60),
-    display: 'grid',
-    gridTemplateColumns: 'auto 1fr',
-    alignItems: 'stretch',
-    columnGap: _pxToRem(16),
-    padding: _pxToRem(8)
+    marginRight: _pxToRem(8)
 });
 /**
  * @private
  */
 react.mergeStyles({
-    fontWeight: 600,
+    fontWeight: 400,
     fontSize: _pxToRem(12),
-    lineHeight: _pxToRem(30)
+    lineHeight: _pxToRem(16)
 });
 /**
  * @private
@@ -13540,7 +13535,21 @@ react.mergeStyles({
 react.mergeStyles({
     fontWeight: 400,
     fontSize: _pxToRem(16),
-    lineHeight: _pxToRem(30)
+    lineHeight: _pxToRem(22)
+});
+/**
+ * @private
+ */
+react.mergeStyles({
+    marginTop: _pxToRem(6),
+    marginBottom: _pxToRem(6)
+});
+/**
+ * @private
+ */
+react.mergeStyles({
+    height: _pxToRem(100),
+    overflow: 'scroll'
 });
 
 // Copyright (c) Microsoft Corporation.
@@ -19253,8 +19262,42 @@ const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) =>
 const CommonCallControlBar = (props) => {
     var _a, _b, _c;
     const theme = react.useTheme();
+    const controlBarContainerRef = React.useRef(null);
+    const sidepaneControlsRef = React.useRef(null);
+    const controlBarSizeRef = React.useRef(null);
+    const [controlBarButtonsWidth, setControlBarButtonsWidth] = React.useState(0);
+    const [panelsButtonsWidth, setPanelsButtonsWidth] = React.useState(0);
+    const [controlBarContainerWidth, setControlBarContainerWidth] = React.useState(0);
+    const [totalButtonsWidth, setTotalButtonsWidth] = React.useState(0);
+    const [isOutOfSpace, setIsOutOfSpace] = React.useState(false);
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCommonCallControlOptions(props.mobileView, props.callControls);
+    const handleResize = React.useCallback(() => {
+        setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
+        setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
+        setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);
+    }, []);
+    // on load set inital width
+    React.useEffect(() => {
+        setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
+        setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
+        setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);
+    }, []);
+    // get the current width of control bar buttons and panel control buttons when browser size change
+    React.useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [handleResize]);
+    /* when size change, reset total buttons width and compare with the control bar container width
+    if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width
+    Instead let them take up the remaining white space on the left */
+    React.useEffect(() => {
+        // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width
+        setTotalButtonsWidth((controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth);
+    }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);
+    React.useEffect(() => {
+        setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);
+    }, [totalButtonsWidth, controlBarContainerWidth]);
     const chatButtonStrings = React.useMemo(() => ({
         label: callWithChatStrings.chatButtonLabel,
         tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,
@@ -19281,6 +19324,11 @@ const CommonCallControlBar = (props) => {
     const screenShareButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined), [props.mobileView, theme]);
     const commonButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined), [props.mobileView, theme]);
     const endCallButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
+    const controlBarWrapperDesktopStyles = React.useMemo(
+    // only center control bar buttons based on parent container if there are enough space on the screen and not mobile
+    () => (!props.mobileView && !isOutOfSpace ? (props.rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}), [props.mobileView, props.rtl, isOutOfSpace]);
+    // only center control bar buttons based on parent container if there are enough space on the screen and not mobile
+    const controlBarDesktopContainerStyles = React.useMemo(() => (!props.mobileView && !isOutOfSpace ? { position: 'relative' } : {}), [props.mobileView, isOutOfSpace]);
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customButtons = React.useMemo(() => generateCustomCallControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options === null || options === void 0 ? void 0 : options.displayType : undefined), [options]);
     // when options is false then we want to hide the whole control bar.
@@ -19288,47 +19336,51 @@ const CommonCallControlBar = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     const chatButton = props.chatAdapter ? (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: (_a = props.chatButtonChecked) !== null && _a !== void 0 ? _a : false, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.chatButton), strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel })) : (React__default['default'].createElement(React__default['default'].Fragment, null));
-    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles$1) },
-        React__default['default'].createElement(react.Stack.Item, { grow: true },
-            React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
-                React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
-                    React__default['default'].createElement(HiddenFocusStartPoint, null),
-                    React__default['default'].createElement(react.Stack.Item, null,
-                        React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
-                            isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
-                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.microphoneButton) })),
-                            isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
-                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton), 
-                                /* @conditional-compile-remove(video-background-effects) */
-                                onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })),
-                            props.mobileView && isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
-                            isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
-                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.screenShareButton) })), 
-                        /* @conditional-compile-remove(control-bar-button-injection) */
-                        (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
-                            _b.slice(0, props.mobileView
-                                ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
-                                : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
-                                return (React__default['default'].createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
-                            }),
-                            props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
-                            /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
-                                /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
-                                !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, 
+    return (React__default['default'].createElement("div", { ref: controlBarSizeRef },
+        React__default['default'].createElement(react.Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles$1, controlBarDesktopContainerStyles) },
+            React__default['default'].createElement(react.Stack.Item, { grow: true, className: react.mergeStyles(controlBarWrapperDesktopStyles) },
+                React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
+                    React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
+                        React__default['default'].createElement(HiddenFocusStartPoint, null),
+                        React__default['default'].createElement(react.Stack.Item, null,
+                            React__default['default'].createElement("div", { ref: controlBarContainerRef },
+                                React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
+                                    isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.microphoneButton) })),
+                                    isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton), 
+                                        /* @conditional-compile-remove(video-background-effects) */
+                                        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })),
+                                    props.mobileView && isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
+                                    isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
+                                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                                        disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.screenShareButton) })), 
                                 /* @conditional-compile-remove(control-bar-button-injection) */
-                                callControls: props.callControls })),
-                            React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles })))))),
-        !props.mobileView && (React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
-        /* @conditional-compile-remove(control-bar-button-injection) */
-        (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
-            _c.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
-                return (React__default['default'].createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
-            }),
-            isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
-            isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton))));
+                                (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
+                                    _b.slice(0, props.mobileView
+                                        ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
+                                        : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
+                                        return (React__default['default'].createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
+                                    }),
+                                    props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
+                                    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
+                                        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
+                                        !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, 
+                                        /* @conditional-compile-remove(control-bar-button-injection) */
+                                        callControls: props.callControls })),
+                                    React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles }))))))),
+            !props.mobileView && (React__default['default'].createElement(react.Stack.Item, null,
+                React__default['default'].createElement("div", { ref: sidepaneControlsRef },
+                    React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
+                    /* @conditional-compile-remove(control-bar-button-injection) */
+                    (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
+                        _c.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
+                            return (React__default['default'].createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
+                        }),
+                        isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
+                        isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton)))))));
 };
 const desktopButtonContainerStyle = {
     padding: '0.75rem',
@@ -19337,6 +19389,16 @@ const desktopButtonContainerStyle = {
 const desktopControlBarStyles = {
     root: desktopButtonContainerStyle
 };
+const wrapperDesktopStyles = {
+    position: 'absolute',
+    left: '50%',
+    transform: 'translate(-50%, 0)'
+};
+const wrapperDesktopRtlStyles = {
+    position: 'absolute',
+    right: '50%',
+    transform: 'translate(-50%, 0)'
+};
 const getDesktopCommonButtonStyles = (theme) => ({
     root: {
         border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,
@@ -24273,7 +24335,7 @@ const CallWithChatScreen = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */
                         onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
                         /* @conditional-compile-remove(video-background-effects) */
-                        onShowVideoEffectsPicker: setShowVideoEffectsPane })))),
+                        onShowVideoEffectsPicker: setShowVideoEffectsPane, rtl: props.rtl })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
                     React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles() },