@azure/communication-react 1.4.3-alpha-202301060015.0 → 1.4.3-alpha-202301080014.0

package/dist/communication-react.d.ts

@@ -26,6 +26,7 @@ import { CallClientOptions } from '@azure/communication-calling';
 import { CallDirection } from '@azure/communication-calling';
 import { CallEndReason } from '@azure/communication-calling';
 import { CallerInfo } from '@azure/communication-calling';
+import { CallKind } from '@azure/communication-calling';
 import { CallState as CallState_2 } from '@azure/communication-calling';
 import { ChatClient } from '@azure/communication-chat';
 import { ChatClientOptions } from '@azure/communication-chat';
@@ -1237,6 +1238,10 @@ export declare type CallCompositeOptions = {
      * if this is not supplied, the composite will not show a unsupported browser page.
      */
     onEnvironmentInfoTroubleshootingClick?: () => void;
+    /**
+     * Remote participant video tile menu options
+     */
+    remoteVideoTileMenu?: RemoteVideoTileMenuOptions;
 };
 
 /**
@@ -1887,7 +1892,7 @@ export declare interface CallState {
     /**
      * Type of the call.
      */
-    type: 'Teams' | 'ACS';
+    kind: CallKind;
     /**
      * Proxy of {@link @azure/communication-calling#Call.callerInfo}.
      */
@@ -7041,6 +7046,20 @@ export declare interface RemoteVideoStreamState {
     view?: VideoStreamRendererViewState;
 }
 
+/**
+ * Menu options for remote video tiles in {@link VideoGallery}.
+ *
+ * @beta
+ */
+export declare interface RemoteVideoTileMenuOptions {
+    /**
+     * If set to true, remote video tiles in the VideoGallery will not have menu options
+     *
+     * @defaultValue false
+     */
+    isHidden?: boolean;
+}
+
 /**
  * @beta
  * The role of a call participant.
@@ -8225,22 +8244,23 @@ export declare interface VideoGalleryProps {
      */
     localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;
     /**
-     * List of pinned participant userIds
+     * List of pinned participant userIds.
      */
     pinnedParticipants?: string[];
     /**
-     * Whether to show the remote video tile contextual menu.
-     * @defaultValue `true`
-     */
-    showRemoteVideoTileContextualMenu?: boolean;
-    /**
-     * This callback will be called when a participant video tile is pinned
+     * This callback will be called when a participant video tile is pinned.
      */
     onPinParticipant?: (userId: string) => void;
     /**
-     * This callback will be called when a participant video tile is un-pinned
+     * This callback will be called when a participant video tile is un-pinned.
      */
     onUnpinParticipant?: (userId: string) => void;
+    /**
+     * Options for showing the remote video tile menu.
+     *
+     * @defaultValue \{ kind: 'contextual' \}
+     */
+    remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
 }
 
 /**
@@ -8377,6 +8397,36 @@ export declare interface VideoStreamRendererViewState {
  */
 export declare const VideoTile: (props: VideoTileProps) => JSX.Element;
 
+/**
+ * Properties for showing contextual menu for remote {@link VideoTile} components in {@link VideoGallery}.
+ *
+ * @beta
+ */
+export declare interface VideoTileContextualMenuProps {
+    /**
+     * The menu property kind
+     */
+    kind: 'contextual';
+}
+
+/**
+ * Properties for showing drawer menu on remote {@link VideoTile} long touch in {@link VideoGallery}.
+ *
+ * @beta
+ */
+export declare interface VideoTileDrawerMenuProps {
+    /**
+     * The menu property kind
+     */
+    kind: 'drawer';
+    /**
+     * The optional id property provided on an element that the drawer menu should render within when a
+     * remote participant video tile Drawer is shown. If an id is not provided, then a drawer menu will
+     * render within the VideoGallery component.
+     */
+    hostId?: string;
+}
+
 /**
  * Props for {@link VideoTile}.
  *

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

@@ -123,12 +123,6 @@ const memoizeFnAll = (fnToMemoize, shouldCacheUpdate = Object.is) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-const COMMUNICATION_USER_PREFIX = '8:acs:';
-const PHONE_NUMBER_PREFIX = '4:';
-const TEAMS_DOD_PREFIX = '8:dod:';
-const TEAMS_GCCH_PREFIX = '8:gcch:';
-const TEAMS_USER_PREFIX = '8:orgid:';
-const TEAMS_VISITOR_PREFIX = '8:teamsvisitor:';
 /**
  * A string representation of a {@link @azure/communication-common#CommunicationIdentifier}.
  *
@@ -140,25 +134,7 @@ const TEAMS_VISITOR_PREFIX = '8:teamsvisitor:';
  * @public
  */
 const toFlatCommunicationIdentifier = (identifier) => {
-    if (communicationCommon.isCommunicationUserIdentifier(identifier)) {
-        return identifier.communicationUserId;
-    }
-    if (communicationCommon.isMicrosoftTeamsUserIdentifier(identifier)) {
-        if (identifier.isAnonymous) {
-            return TEAMS_VISITOR_PREFIX + identifier.microsoftTeamsUserId;
-        }
-        if (identifier.cloud === 'dod') {
-            return TEAMS_DOD_PREFIX + identifier.microsoftTeamsUserId;
-        }
-        if (identifier.cloud === 'gcch') {
-            return TEAMS_GCCH_PREFIX + identifier.microsoftTeamsUserId;
-        }
-        return TEAMS_USER_PREFIX + identifier.microsoftTeamsUserId;
-    }
-    if (communicationCommon.isPhoneNumberIdentifier(identifier)) {
-        return PHONE_NUMBER_PREFIX + identifier.phoneNumber;
-    }
-    return identifier.id;
+    return communicationCommon.getIdentifierRawId(identifier);
 };
 /**
  * Reverse operation of {@link toFlatCommunicationIdentifier}.
@@ -166,27 +142,7 @@ const toFlatCommunicationIdentifier = (identifier) => {
  * @public
  */
 const fromFlatCommunicationIdentifier = (id) => {
-    if (id.startsWith(COMMUNICATION_USER_PREFIX)) {
-        // The prefix is preserved for this variant of the identifier.
-        return { communicationUserId: id };
-    }
-    if (id.startsWith(PHONE_NUMBER_PREFIX) || id.startsWith('+')) {
-        const isPhoneNumber = id.startsWith(PHONE_NUMBER_PREFIX) ? id.replace(PHONE_NUMBER_PREFIX, '') : id;
-        return { phoneNumber: isPhoneNumber };
-    }
-    if (id.startsWith(TEAMS_USER_PREFIX)) {
-        return { microsoftTeamsUserId: id.replace(TEAMS_USER_PREFIX, '') };
-    }
-    if (id.startsWith(TEAMS_DOD_PREFIX)) {
-        return { microsoftTeamsUserId: id.replace(TEAMS_DOD_PREFIX, ''), cloud: 'dod' };
-    }
-    if (id.startsWith(TEAMS_GCCH_PREFIX)) {
-        return { microsoftTeamsUserId: id.replace(TEAMS_GCCH_PREFIX, ''), cloud: 'gcch' };
-    }
-    if (id.startsWith(TEAMS_VISITOR_PREFIX)) {
-        return { microsoftTeamsUserId: id.replace(TEAMS_VISITOR_PREFIX, ''), isAnonymous: true };
-    }
-    return { id };
+    return communicationCommon.createIdentifierFromRawId(id);
 };
 /**
  * Returns a CommunicationIdentifier.
@@ -202,7 +158,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202301060015.0';
+var telemetryVersion = '1.4.3-alpha-202301080014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1886,7 +1842,7 @@ function convertSdkCallToDeclarativeCall(call) {
     return {
         id: call.id,
         /* @conditional-compile-remove(teams-identity-support) */
-        type: _isACSCall(call) ? 'ACS' : 'Teams',
+        kind: _isACSCall(call) ? 'Call' : 'TeamsCall',
         callerInfo: call.callerInfo,
         state: call.state,
         callEndReason: call.callEndReason,
@@ -7609,13 +7565,15 @@ const ParticipantItem = (props) => {
     const localeStrings = useLocale$1().strings.participantItem;
     const ids = useIdentifiers();
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
+    // For 'me' show empty name so avatar will get 'Person' icon, when there is no name
+    const meAvatarText = (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || '';
     const avatarOptions = {
-        text: (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || strings.displayNamePlaceholder,
+        text: me ? meAvatarText : (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || strings.displayNamePlaceholder,
         size: react.PersonaSize.size32,
         presence: presence,
         initialsTextColor: 'white',
         showOverflowTooltip: showParticipantOverflowTooltip,
-        showUnknownPersonaCoin: !(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === strings.displayNamePlaceholder
+        showUnknownPersonaCoin: !me && (!(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === strings.displayNamePlaceholder)
     };
     const avatar = onRenderAvatar ? (onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', avatarOptions)) : (React__default['default'].createElement(react.Persona, Object.assign({ className: react.mergeStyles({
             // Prevents persona text from being vertically truncated if a global line height is less than 1.15.
@@ -8519,7 +8477,7 @@ const VideoTile = (props) => {
     ]);
     const placeholderOptions = {
         userId,
-        text: initialsName || displayName,
+        text: initialsName !== null && initialsName !== void 0 ? initialsName : displayName,
         noVideoAvailableAriaLabel,
         coinSize: personaSize,
         styles: defaultPersonaStyles,
@@ -10241,6 +10199,13 @@ const PinnedParticipantsLayout = (props) => {
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+/**
+ * @private
+ * Default remote video tile menu options
+ */
+const DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS = {
+    kind: 'contextual'
+};
 /**
  * VideoGallery represents a layout of video tiles for a specific call.
  * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.
@@ -10253,14 +10218,19 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     onPinParticipant: onPinParticipantHandler, 
     /* @conditional-compile-remove(pinned-participants) */
-    onUnpinParticipant: onUnpinParticipantHandler } = props;
+    onUnpinParticipant: onUnpinParticipantHandler, 
+    /* @conditional-compile-remove(pinned-participants) */
+    remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
     const strings = React.useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
-    // @TODO: Provide a default value to this hook using the `drawerMenuHostId` value in the props when VideoGallery props have been updated.
-    // Example: `const drawerMenuHostId = useId('drawerMenuHost', props.drawerMenuHostId);`
-    const drawerMenuHostId = reactHooks.useId('drawerMenuHost');
+    /* @conditional-compile-remove(pinned-participants) */
+    const drawerMenuHostIdFromProp = remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'drawer'
+        ? remoteVideoTileMenuOptions.hostId
+        : undefined;
+    /* @conditional-compile-remove(pinned-participants) */
+    const drawerMenuHostId = reactHooks.useId('drawerMenuHost', drawerMenuHostIdFromProp);
     const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
@@ -10288,7 +10258,7 @@ const VideoGallery = (props) => {
         const localVideoTileStyles = react.concatStyleSets(shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {}, {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
-        const initialsName = !localParticipant.displayName ? strings.displayNamePlaceholder : localParticipant.displayName;
+        const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
         return (React__default['default'].createElement(react.Stack, { key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
             React__default['default'].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !(shouldFloatLocalVideo && isNarrow), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
     }, [
@@ -10307,7 +10277,6 @@ const VideoGallery = (props) => {
         strings.localVideoLabel,
         strings.localVideoMovementLabel,
         strings.localVideoSelectedDescription,
-        strings.displayNamePlaceholder,
         styles === null || styles === void 0 ? void 0 : styles.localVideo,
         theme.effects.roundedCorner4,
         /* @conditional-compile-remove(rooms) */ permissions.cameraButton
@@ -10332,7 +10301,9 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
-            showRemoteVideoTileContextualMenu: props.showRemoteVideoTileContextualMenu, drawerMenuHostId: drawerMenuHostId, 
+            showRemoteVideoTileContextualMenu: remoteVideoTileMenuOptions && remoteVideoTileMenuOptions.kind === 'contextual', 
+            /* @conditional-compile-remove(pinned-participants) */
+            drawerMenuHostId: drawerMenuHostId, 
             /* @conditional-compile-remove(pinned-participants) */
             onPinParticipant: onPinParticipant, 
             /* @conditional-compile-remove(pinned-participants) */
@@ -10346,8 +10317,8 @@ const VideoGallery = (props) => {
         onRenderAvatar,
         showMuteIndicator,
         strings,
-        drawerMenuHostId,
-        /* @conditional-compile-remove(pinned-participants) */ props.showRemoteVideoTileContextualMenu,
+        /* @conditional-compile-remove(pinned-participants) */ drawerMenuHostId,
+        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
         /* @conditional-compile-remove(pinned-participants) */ onPinParticipant,
         /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant
@@ -10398,7 +10369,10 @@ const VideoGallery = (props) => {
         }
         return React__default['default'].createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [layout, layoutProps]);
-    return (React__default['default'].createElement("div", { id: drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
+    return (React__default['default'].createElement("div", { 
+        /* @conditional-compile-remove(pinned-participants) */
+        // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
+        id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18589,7 +18563,7 @@ const createAnnouncmentString = (direction, participants, strings) => {
      * Filter participants into two arrays to put all the unnamed participants at the back of the
      * names being announced.
      */
-    const unnamedParticipants = participants.filter((p) => p.displayName === undefined);
+    const unnamedParticipants = participants.filter((p) => !p.displayName);
     const namedParicipants = participants.filter((p) => p.displayName);
     const sortedParticipants = namedParicipants.concat(unnamedParticipants);
     /**
@@ -18652,6 +18626,7 @@ const remoteVideoViewOptions = {
  * @private
  */
 const MediaGallery = (props) => {
+    var _a;
     const videoGalleryProps = usePropsFor$1(VideoGallery);
     const cameraSwitcherCameras = useSelector$1(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers();
@@ -18665,11 +18640,26 @@ const MediaGallery = (props) => {
                 React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))));
     }, [props.onFetchAvatarPersonaData]);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
+    /* @conditional-compile-remove(pinned-participants) */
+    const remoteVideoTileMenuOptions = React.useMemo(() => {
+        var _a;
+        return ((_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden)
+            ? false
+            : props.isMobile
+                ? { kind: 'drawer', hostId: props.drawerMenuHostId }
+                : { kind: 'contextual' };
+    }, [(_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden, props.isMobile, props.drawerMenuHostId]);
     const VideoGalleryMemoized = React.useMemo(() => {
         return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, 
             /* @conditional-compile-remove(pinned-participants) */
-            showRemoteVideoTileContextualMenu: !props.isMobile })));
-    }, [videoGalleryProps, props.isMobile, cameraSwitcherProps, onRenderAvatar]);
+            remoteVideoTileMenuOptions: remoteVideoTileMenuOptions })));
+    }, [
+        videoGalleryProps,
+        props.isMobile,
+        onRenderAvatar,
+        cameraSwitcherProps,
+        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions
+    ]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
         VideoGalleryMemoized));
@@ -18900,7 +18890,9 @@ const CallPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, 
         /* @conditional-compile-remove(one-to-n-calling) */
-        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, drawerMenuHostId: drawerMenuHostId }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
+        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
+            /* @conditional-compile-remove(pinned-participants) */
+            remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenu, drawerMenuHostId: drawerMenuHostId }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
 };
 /**
  * @private