@azure/communication-react 1.5.1-alpha-202302100014 → 1.5.1-alpha-202302132135

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

@@ -143,7 +143,9 @@ const toFlatCommunicationIdentifier = (identifier) => {
  * @public
  */
 const fromFlatCommunicationIdentifier = (id) => {
-    return communicationCommon.createIdentifierFromRawId(id);
+    // if the id passed is a phone number we need to build the rawId to pass in
+    const rawId = id.indexOf('+') === 0 ? '4:' + id.slice(1) : id;
+    return communicationCommon.createIdentifierFromRawId(rawId);
 };
 /**
  * Returns a CommunicationIdentifier.
@@ -159,7 +161,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-202302100014';
+var telemetryVersion = '1.5.1-alpha-202302132135';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -395,7 +397,7 @@ const _isInCall = (callStatus) => !!callStatus && !['None', 'Disconnected', 'Con
  *
  * @internal
  */
-const _isInLobbyOrConnecting = (callStatus) => !!callStatus && ['Connecting', 'Ringing', 'InLobby'].includes(callStatus);
+const _isInLobbyOrConnecting = (callStatus) => !!callStatus && ['Connecting', 'Ringing', 'InLobby', 'EarlyMedia'].includes(callStatus);
 /**
  * Check if the device manager local video is on when not part of a call
  * i.e. do unparented views exist.
@@ -719,8 +721,11 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         if (!participant || !participant.videoStreams) {
             return;
         }
-        const remoteVideoStream = Object.values(participant.videoStreams).find((i) => i.mediaStreamType === 'Video');
-        const screenShareStream = Object.values(participant.videoStreams).find((i) => i.mediaStreamType === 'ScreenSharing');
+        // Find the first available stream, if there is none, then get the first stream
+        const remoteVideoStream = Object.values(participant.videoStreams).find((i) => i.mediaStreamType === 'Video' && i.isAvailable) ||
+            Object.values(participant.videoStreams).find((i) => i.mediaStreamType === 'Video');
+        const screenShareStream = Object.values(participant.videoStreams).find((i) => i.mediaStreamType === 'ScreenSharing' && i.isAvailable) ||
+            Object.values(participant.videoStreams).find((i) => i.mediaStreamType === 'ScreenSharing');
         let createViewResult = undefined;
         if (remoteVideoStream && remoteVideoStream.isAvailable && !remoteVideoStream.view) {
             createViewResult = yield callClient.createView(call.id, participant.identifier, remoteVideoStream, options);
@@ -5069,7 +5074,7 @@ const SitePermissionMic20Filled = () => {
     const theme = useTheme();
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: 'center', styles: sitePermissionIconBackgroundStyle(theme) },
         React__default['default'].createElement("div", { className: react.mergeStyles(scaledIconStyles(theme)) },
-            React__default['default'].createElement(reactIcons.MicOn20Filled, null))));
+            React__default['default'].createElement(reactIcons.Mic20Filled, null))));
 };
 /* @conditional-compile-remove(call-readiness) */
 const SitePermissionCamera20Filled = () => {
@@ -5130,7 +5135,7 @@ const DEFAULT_COMPONENT_ICONS = {
     ControlButtonCameraOn: React__default['default'].createElement(reactIcons.Video20Filled, null),
     ControlButtonEndCall: React__default['default'].createElement(reactIcons.CallEnd20Filled, null),
     ControlButtonMicOff: React__default['default'].createElement(reactIcons.MicOff20Filled, null),
-    ControlButtonMicOn: React__default['default'].createElement(reactIcons.MicOn20Filled, null),
+    ControlButtonMicOn: React__default['default'].createElement(reactIcons.Mic20Filled, null),
     ControlButtonOptions: React__default['default'].createElement(reactIcons.Settings20Filled, null),
     ControlButtonParticipants: React__default['default'].createElement(reactIcons.People20Filled, null),
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
@@ -5150,7 +5155,7 @@ const DEFAULT_COMPONENT_ICONS = {
     ErrorBarCallMacOsMicrophoneAccessDenied: React__default['default'].createElement(reactIcons.MicProhibited16Filled, null),
     ErrorBarCallMicrophoneAccessDenied: React__default['default'].createElement(reactIcons.MicProhibited16Filled, null),
     ErrorBarCallMicrophoneMutedBySystem: React__default['default'].createElement(reactIcons.MicOff16Filled, null),
-    ErrorBarCallMicrophoneUnmutedBySystem: React__default['default'].createElement(reactIcons.MicOn16Filled, null),
+    ErrorBarCallMicrophoneUnmutedBySystem: React__default['default'].createElement(reactIcons.Mic16Filled, null),
     ErrorBarCallNetworkQualityLow: React__default['default'].createElement(WifiWarning16Filled, null),
     ErrorBarCallNoMicrophoneFound: React__default['default'].createElement(reactIcons.MicProhibited16Filled, null),
     ErrorBarCallNoSpeakerFound: React__default['default'].createElement(reactIcons.SpeakerMute16Filled, null),
@@ -5164,10 +5169,10 @@ const DEFAULT_COMPONENT_ICONS = {
     MessageFailed: React__default['default'].createElement(reactIcons.ErrorCircle16Regular, null),
     MessageRemove: React__default['default'].createElement(reactIcons.Delete20Regular, null),
     MessageResend: React__default['default'].createElement(reactIcons.ArrowClockwise16Regular, null),
-    MessageSeen: React__default['default'].createElement(reactIcons.EyeShow16Regular, null),
+    MessageSeen: React__default['default'].createElement(reactIcons.Eye16Regular, null),
     MessageSending: React__default['default'].createElement(reactIcons.Circle16Regular, null),
     OptionsCamera: React__default['default'].createElement(reactIcons.Video20Regular, null),
-    OptionsMic: React__default['default'].createElement(reactIcons.MicOn20Regular, null),
+    OptionsMic: React__default['default'].createElement(reactIcons.Mic20Regular, null),
     OptionsSpeaker: React__default['default'].createElement(reactIcons.Speaker220Regular, null),
     ParticipantItemMicOff: React__default['default'].createElement(reactIcons.MicOff16Regular, null),
     ParticipantItemOptions: React__default['default'].createElement(React__default['default'].Fragment, null),
@@ -9054,7 +9059,7 @@ react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
 /**
  * Small floating modal width and height in rem for small screen
  */
-const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
+const SMALL_FLOATING_MODAL_SIZE_PX = { width: 58, height: 104 };
 /**
  * Large floating modal width and height in rem for large screen
  * Aspect ratio: 16:9
@@ -9153,7 +9158,7 @@ const horizontalGalleryStyle = (isNarrow) => {
  * Small horizontal gallery tile size in rem
  * @private
  */
-const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
+const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };
 /**
  * Large horizontal gallery tile size in rem
  * @private
@@ -12535,21 +12540,15 @@ const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted
     const rawVideoStreamsArray = Object.values(videoStreams);
     let videoStream = undefined;
     let screenShareStream = undefined;
-    if (rawVideoStreamsArray[0]) {
-        if (rawVideoStreamsArray[0].mediaStreamType === 'Video') {
-            videoStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[0]);
-        }
-        else {
-            screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[0]);
-        }
+    const sdkRemoteVideoStream = Object.values(rawVideoStreamsArray).find((i) => i.mediaStreamType === 'Video' && i.isAvailable) ||
+        Object.values(rawVideoStreamsArray).find((i) => i.mediaStreamType === 'Video');
+    const sdkScreenShareStream = Object.values(rawVideoStreamsArray).find((i) => i.mediaStreamType === 'ScreenSharing' && i.isAvailable) ||
+        Object.values(rawVideoStreamsArray).find((i) => i.mediaStreamType === 'ScreenSharing');
+    if (sdkRemoteVideoStream) {
+        videoStream = convertRemoteVideoStreamToVideoGalleryStream(sdkRemoteVideoStream);
     }
-    if (rawVideoStreamsArray[1]) {
-        if (rawVideoStreamsArray[1].mediaStreamType === 'ScreenSharing') {
-            screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[1]);
-        }
-        else {
-            videoStream = convertRemoteVideoStreamToVideoGalleryStream(rawVideoStreamsArray[1]);
-        }
+    if (sdkScreenShareStream) {
+        screenShareStream = convertRemoteVideoStreamToVideoGalleryStream(sdkScreenShareStream);
     }
     return {
         userId,
@@ -14851,17 +14850,17 @@ const COMPOSITE_ONLY_ICONS = {
     LobbyScreenConnectingToCall: React__default['default'].createElement(CoffeeIcon, null),
     LobbyScreenWaitingToBeAdmitted: React__default['default'].createElement(CoffeeIcon, null),
     LocalDeviceSettingsCamera: React__default['default'].createElement(reactIcons.Video20Filled, null),
-    LocalDeviceSettingsMic: React__default['default'].createElement(reactIcons.MicOn20Filled, null),
+    LocalDeviceSettingsMic: React__default['default'].createElement(reactIcons.Mic20Filled, null),
     LocalDeviceSettingsSpeaker: React__default['default'].createElement(reactIcons.Speaker220Filled, null),
     LocalPreviewPlaceholder: React__default['default'].createElement(reactIcons.VideoOff20Filled, null),
     LocalCameraSwitch: React__default['default'].createElement(reactIcons.CameraSwitch24Regular, null),
     ControlBarChatButtonActive: React__default['default'].createElement(reactIcons.Chat20Filled, null),
     ControlBarChatButtonInactive: React__default['default'].createElement(reactIcons.Chat20Regular, null),
     ControlBarPeopleButton: React__default['default'].createElement(reactIcons.People20Regular, null),
-    MoreDrawerMicrophones: React__default['default'].createElement(reactIcons.MicOn20Regular, null),
+    MoreDrawerMicrophones: React__default['default'].createElement(reactIcons.Mic20Regular, null),
     MoreDrawerPeople: React__default['default'].createElement(reactIcons.People20Regular, null),
     MoreDrawerSpeakers: React__default['default'].createElement(reactIcons.Speaker220Regular, null),
-    MoreDrawerSelectedMicrophone: React__default['default'].createElement(reactIcons.MicOn20Filled, null),
+    MoreDrawerSelectedMicrophone: React__default['default'].createElement(reactIcons.Mic20Filled, null),
     MoreDrawerSelectedSpeaker: React__default['default'].createElement(reactIcons.Speaker220Filled, null),
     Muted: React__default['default'].createElement(reactIcons.MicOff20Filled, null),
     NetworkReconnectIcon: React__default['default'].createElement(reactIcons.CallMissed20Filled, null),
@@ -21851,12 +21850,13 @@ const generateCustomCallWithChatDrawerButtons = (onFetchCustomButtonProps, displ
         response[key] = (React__default['default'].createElement(React__default['default'].Fragment, null, allButtonProps
             .filter((buttonProps) => buttonProps.placement === key)
             .map((buttonProps, i) => {
-            var _a;
+            var _a, _b;
             return ({
                 disabled: buttonProps.disabled,
                 id: buttonProps.id,
                 iconProps: { iconName: buttonProps.iconName },
                 itemKey: (_a = buttonProps.key) !== null && _a !== void 0 ? _a : `${buttonProps.placement}_${i}`,
+                key: (_b = buttonProps.key) !== null && _b !== void 0 ? _b : `${buttonProps.placement}_${i}`,
                 onItemClick: buttonProps.onItemClick,
                 text: buttonProps.text
             });
@@ -21878,6 +21878,7 @@ const onFetchCustomButtonPropsTrampoline = (options) => {
  * @private
  */
 const DesktopMoreButton = (props) => {
+    var _a;
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const localeStrings = useLocale();
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -21887,41 +21888,46 @@ const DesktopMoreButton = (props) => {
         label: localeStrings.strings.call.moreButtonCallingLabel,
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
     }), [localeStrings]);
-    const moreButtonContextualMenuItems = () => {
-        const items = [];
-        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        items.push({
-            key: 'holdButtonKey',
-            text: localeStrings.component.strings.holdButton.tooltipOffContent,
+    const moreButtonContextualMenuItems = [];
+    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    moreButtonContextualMenuItems.push({
+        key: 'holdButtonKey',
+        text: localeStrings.component.strings.holdButton.tooltipOffContent,
+        onClick: () => {
+            holdButtonProps.onToggleHold();
+        },
+        iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+        itemProps: {
+            styles: buttonFlyoutIncreasedSizeStyles
+        },
+        disabled: props.disableButtonsForHoldScreen
+    });
+    /*@conditional-compile-remove(PSTN-calls) */
+    if (props.onClickShowDialpad) {
+        moreButtonContextualMenuItems.push({
+            key: 'showDialpadKey',
+            text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,
             onClick: () => {
-                holdButtonProps.onToggleHold();
+                props.onClickShowDialpad && props.onClickShowDialpad();
             },
-            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
             disabled: props.disableButtonsForHoldScreen
         });
-        /*@conditional-compile-remove(PSTN-calls) */
-        if (props.onClickShowDialpad) {
-            items.push({
-                key: 'showDialpadKey',
-                text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,
-                onClick: () => {
-                    props.onClickShowDialpad && props.onClickShowDialpad();
-                },
-                iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
-                itemProps: {
-                    styles: buttonFlyoutIncreasedSizeStyles
-                },
-                disabled: props.disableButtonsForHoldScreen
-            });
-        }
-        return items;
-    };
+    }
+    /* @conditional-compile-remove(control-bar-button-injection) */
+    const customDrawerButtons = React.useMemo(() => generateCustomCallWithChatDrawerButtons(onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined), typeof props.callControls === 'object' ? props.callControls.displayType : undefined), [props.callControls]);
+    /* @conditional-compile-remove(control-bar-button-injection) */
+    (_a = customDrawerButtons['overflow']) === null || _a === void 0 ? void 0 : _a.props.children.forEach((element) => {
+        moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            } }, element));
+    });
     return (React__default['default'].createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-more-button", 
         /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() } })));
+        strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems } })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -22045,7 +22051,9 @@ const CallWithChatControlBar = (props) => {
                             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 })),
+                                !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, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
         /* @conditional-compile-remove(control-bar-button-injection) */
@@ -22146,7 +22154,8 @@ const callCompositeContainerStyles = {
     root: {
         // Start a new stacking context so that any `position:absolute` elements
         // inside the call composite do not compete with its siblings.
-        position: 'relative'
+        position: 'relative',
+        width: '100%'
     }
 };
 /** @private */