@azure/communication-react 1.4.2-alpha-202211090017.0 → 1.4.2-alpha-202211110018.0

package/dist/communication-react.d.ts

@@ -260,6 +260,17 @@ export declare type AzureCommunicationCallAdapterArgs = {
     credential: CommunicationTokenCredential;
     locator: CallAdapterLocator;
     alternateCallerId?: string;
+    /**
+     * Optional parameters for the {@link AzureCommunicationCallAdapter} created
+     */
+    options?: {
+        /**
+         * Use this to hint the role of the user when the role is not available before a Rooms call is started. This value
+         * should be obtained using the Rooms API. This role will determine permissions in the configuration page of the
+         * {@link CallComposite}. The true role of the user will be synced with ACS services when a Rooms call starts.
+         */
+        roleHint?: Role;
+    };
 };
 
 /**
@@ -665,6 +676,12 @@ export declare type CallAdapterClientState = {
      * Azure communications Phone number to make PSTN calls with.
      */
     alternateCallerId?: string;
+    /**
+     * Use this to hint the role of the user when the role is not available before a Rooms call is started. This value
+     * should be obtained using the Rooms API. This role will determine permissions in the configuration page of the
+     * {@link CallComposite}. The true role of the user will be synced with ACS services when a Rooms call starts.
+     */
+    roleHint?: Role;
 };
 
 /**
@@ -1196,12 +1213,6 @@ export declare interface CallCompositeProps extends BaseCompositeProps<CallCompo
      * Flags to enable/disable or customize UI elements of the {@link CallComposite}.
      */
     options?: CallCompositeOptions;
-    /**
-     * Set the role to enable/disable capacities. This property should be properly set for Rooms calls. The role of a
-     * user for a room can be obtained using the Rooms API. The role of the user will be synced with ACS services when
-     * a Rooms call starts.
-     */
-    roleHint?: Role;
 }
 
 /**
@@ -3947,7 +3958,7 @@ export declare interface ControlBarProps {
  *
  * @public
  */
-export declare const createAzureCommunicationCallAdapter: ({ userId, displayName, credential, locator, alternateCallerId }: AzureCommunicationCallAdapterArgs) => Promise<CallAdapter>;
+export declare const createAzureCommunicationCallAdapter: ({ userId, displayName, credential, locator, alternateCallerId, options }: AzureCommunicationCallAdapterArgs) => Promise<CallAdapter>;
 
 /**
  * Create a {@link CallAdapter} using the provided {@link StatefulCallClient}.
@@ -3957,7 +3968,9 @@ export declare const createAzureCommunicationCallAdapter: ({ userId, displayName
  *
  * @public
  */
-export declare const createAzureCommunicationCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: CallAgent, locator: CallAdapterLocator) => Promise<CallAdapter>;
+export declare const createAzureCommunicationCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: CallAgent, locator: CallAdapterLocator, options?: {
+    roleHint?: Role;
+}) => Promise<CallAdapter>;
 
 /**
  * Create a CallWithChatAdapter backed by Azure Communication services
@@ -4336,7 +4349,7 @@ export declare const DEFAULT_COMPONENT_ICONS: {
     SendBoxSend: JSX.Element;
     SendBoxSendHovered: JSX.Element;
     VideoTileMicOff: JSX.Element;
-    BackSpace: JSX.Element;
+    DialpadBackspace: JSX.Element;
     DomainPermissionsSparkle: JSX.Element;
     DomainPermissionCamera: JSX.Element;
     DomainPermissionMic: JSX.Element;
@@ -4431,7 +4444,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     HoldCallContextualMenuItem: JSX.Element;
     HoldCallButton: JSX.Element;
     ResumeCall: JSX.Element;
-    BackSpace: JSX.Element;
+    DialpadBackspace: JSX.Element;
     DomainPermissionsSparkle: JSX.Element;
     DomainPermissionCamera: JSX.Element;
     DomainPermissionMic: JSX.Element;

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.2-alpha-202211090017.0';
+var telemetryVersion = '1.4.2-alpha-202211110018.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -2147,7 +2147,7 @@ const DEFAULT_COMPONENT_ICONS = {
     SendBoxSendHovered: React__default['default'].createElement(reactIcons.Send20Filled, null),
     VideoTileMicOff: React__default['default'].createElement(reactIcons.MicOff16Filled, null),
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    BackSpace: React__default['default'].createElement(reactIcons.Backspace20Regular, null),
+    DialpadBackspace: React__default['default'].createElement(reactIcons.Backspace20Regular, null),
     /* @conditional-compile-remove(call-readiness) */
     DomainPermissionsSparkle: React__default['default'].createElement(DomainPermissionSparkle20Filled, null),
     /* @conditional-compile-remove(call-readiness) */
@@ -8347,7 +8347,7 @@ const DialpadContainer = (props) => {
                 setText(e.target.value);
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
-                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'BackSpace' } }))));
+                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));
             } }),
         React__default['default'].createElement(react.FocusZone, null, dialPadButtonsDefault.map((rows, rowIndex) => {
             return (React__default['default'].createElement(react.Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch" }, rows.map((button, columnIndex) => (React__default['default'].createElement(DialpadButton, { key: `button_${columnIndex}`, 
@@ -13613,8 +13613,8 @@ const coffeeIconStyle = {
  * @public
  */
 const COMPOSITE_ONLY_ICONS = {
-    ChevronLeft: React__default['default'].createElement(react.FontIcon, { iconName: "ChevronLeft" }),
-    Link: React__default['default'].createElement(react.FontIcon, { iconName: "Link" }),
+    ChevronLeft: undefined,
+    Link: undefined,
     LobbyScreenConnectingToCall: React__default['default'].createElement(CoffeeIcon, null),
     LobbyScreenWaitingToBeAdmitted: React__default['default'].createElement(CoffeeIcon, null),
     LocalDeviceSettingsCamera: React__default['default'].createElement(reactIcons.Video20Filled, null),
@@ -14582,11 +14582,20 @@ const BaseProvider = (props) => {
     if (alreadyWrapped) {
         return React__default['default'].createElement(React__default['default'].Fragment, null, props.children);
     }
+    /**
+     * Before registering fluent icons, we should check DEFAULT_COMPOSITE_ICONS and strip out the key value pairs where value is undefined
+     */
+    const iconsToRegister = {};
+    Object.entries(DEFAULT_COMPOSITE_ICONS).forEach(([key, value]) => {
+        if (value) {
+            iconsToRegister[key] = value;
+        }
+    });
     /**
      * We register the default icon mappings merged with custom icons provided through props
      * to ensure all icons render correctly.
      */
-    react.registerIcons({ icons: Object.assign(Object.assign({}, DEFAULT_COMPOSITE_ICONS), props.icons) });
+    react.registerIcons({ icons: Object.assign(Object.assign({}, iconsToRegister), props.icons) });
     // we use Customizer to override default LayerHost injected to <body />
     // which stop polluting global dom tree and increase compatibility with react-full-screen
     const CompositeElement = (React__default['default'].createElement(FluentThemeProvider, { fluentTheme: fluentTheme, rtl: rtl },
@@ -15551,6 +15560,32 @@ const isDisabled$2 = (option) => {
     }
     return option.disabled;
 };
+/* @conditional-compile-remove(call-readiness) */
+/**
+ *
+ * This function uses permission API to determine if device permission state is granted, prompt or denied
+ * @returns whether device permission state is granted, prompt or denied
+ * If permission API is not supported on this browser, do nothing and log out error
+ * @private
+ */
+const getDevicePermissionState = (setVideoState, setAudioState) => {
+    navigator.permissions
+        .query({ name: 'camera' })
+        .then((result) => {
+        setVideoState(result.state);
+    })
+        .catch((error) => {
+        console.log(error);
+    });
+    navigator.permissions
+        .query({ name: 'microphone' })
+        .then((result) => {
+        setAudioState(result.state);
+    })
+        .catch((error) => {
+        console.log(error);
+    });
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -18215,6 +18250,13 @@ const ConfigurationPage = (props) => {
     const options = useAdaptedSelector(getSelector$1(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers();
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector$1(devicePermissionSelector);
+    /* @conditional-compile-remove(call-readiness) */
+    // use permission API to get video and audio permission state
+    const [videoState, setVideoState] = React.useState(undefined);
+    /* @conditional-compile-remove(call-readiness) */
+    const [audioState, setAudioState] = React.useState(undefined);
+    /* @conditional-compile-remove(call-readiness) */
+    getDevicePermissionState(setVideoState, setAudioState);
     let errorBarProps = usePropsFor$1(ErrorBar);
     const adapter = useAdapter();
     const deviceState = adapter.getState().devices;
@@ -18251,8 +18293,9 @@ const ConfigurationPage = (props) => {
     mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;
     /* @conditional-compile-remove(call-readiness) */
     const permissionsState = {
-        camera: cameraPermissionGranted ? 'granted' : 'denied',
-        microphone: microphonePermissionGranted ? 'granted' : 'denied'
+        // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported
+        camera: videoState !== null && videoState !== void 0 ? videoState : (cameraPermissionGranted ? 'granted' : 'denied'),
+        microphone: audioState !== null && audioState !== void 0 ? audioState : (microphonePermissionGranted ? 'granted' : 'denied')
     };
     /* @conditional-compile-remove(call-readiness) */
     const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
@@ -18806,9 +18849,9 @@ const MainScreen = (props) => {
  * @public
  */
 const CallComposite = (props) => {
-    const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop', 
+    const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop' } = props;
     /* @conditional-compile-remove(rooms) */
-    roleHint } = props;
+    const roleHint = adapter.getState().roleHint;
     React.useEffect(() => {
         (() => __awaiter$5(void 0, void 0, void 0, function* () {
             var _a;
@@ -18963,8 +19006,8 @@ var __awaiter$4 = (window && window.__awaiter) || function (thisArg, _arguments,
 };
 /** Context of call, which is a centralized context for all state updates */
 class CallContext {
-    constructor(clientState, isTeamsCall, maxListeners = 50) {
-        var _a;
+    constructor(clientState, isTeamsCall, options) {
+        var _a, _b;
         this.emitter = new EventEmitter.EventEmitter();
         this.state = {
             isLocalPreviewMicrophoneEnabled: false,
@@ -18975,9 +19018,10 @@ class CallContext {
             page: 'configuration',
             latestErrors: clientState.latestErrors,
             isTeamsCall,
-            /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: clientState.alternateCallerId
+            /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: clientState.alternateCallerId,
+            /* @conditional-compile-remove(rooms) */ roleHint: options === null || options === void 0 ? void 0 : options.roleHint
         };
-        this.emitter.setMaxListeners(maxListeners);
+        this.emitter.setMaxListeners((_b = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _b !== void 0 ? _b : 50);
     }
     onStateChange(handler) {
         this.emitter.on('stateChanged', handler);
@@ -19042,7 +19086,8 @@ const findLatestEndedCall = (calls) => {
  * @private
  */
 class AzureCommunicationCallAdapter {
-    constructor(callClient, locator, callAgent, deviceManager) {
+    constructor(callClient, locator, callAgent, deviceManager, 
+    /* @conditional-compile-remove(rooms) */ options) {
         this.participantSubscribers = new Map();
         this.emitter = new EventEmitter.EventEmitter();
         this.isMyMutedChanged = () => {
@@ -19058,7 +19103,8 @@ class AzureCommunicationCallAdapter {
         this.locator = locator;
         this.deviceManager = deviceManager;
         const isTeamsMeeting = 'meetingLink' in this.locator;
-        this.context = new CallContext(callClient.getState(), isTeamsMeeting);
+        this.context = new CallContext(callClient.getState(), isTeamsMeeting, 
+        /* @conditional-compile-remove(rooms) */ options);
         this.context.onCallEnded((endCallData) => this.emitter.emit('callEnded', endCallData));
         const onStateChange = (clientState) => {
             var _a;
@@ -19506,7 +19552,8 @@ class AzureCommunicationCallAdapter {
  * @public
  */
 const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator, 
-/* @conditional-compile-remove(PSTN-calls) */ alternateCallerId }) => __awaiter$4(void 0, void 0, void 0, function* () {
+/* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
+/* @conditional-compile-remove(rooms) */ options }) => __awaiter$4(void 0, void 0, void 0, function* () {
     const callClient = createStatefulCallClient({
         userId,
         /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId
@@ -19514,7 +19561,8 @@ const createAzureCommunicationCallAdapter = ({ userId, displayName, credential,
     const callAgent = yield callClient.createCallAgent(credential, {
         displayName
     });
-    const adapter = createAzureCommunicationCallAdapterFromClient(callClient, callAgent, locator);
+    const adapter = createAzureCommunicationCallAdapterFromClient(callClient, callAgent, locator, 
+    /* @conditional-compile-remove(rooms) */ options);
     return adapter;
 });
 /**
@@ -19551,7 +19599,9 @@ afterCreate,
  * This is useful for clean up tasks, e.g., leaving any ongoing calls.
  */
 beforeDispose) => {
-    const { credential, displayName, locator, userId, /*@conditional-compile-remove(PSTN-calls) */ alternateCallerId } = args;
+    const { credential, displayName, locator, userId, 
+    /*@conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
+    /*@conditional-compile-remove(rooms) */ options } = args;
     // State update needed to rerender the parent component when a new adapter is created.
     const [adapter, setAdapter] = React.useState(undefined);
     // Ref needed for cleanup to access the old adapter created asynchronously.
@@ -19586,7 +19636,8 @@ beforeDispose) => {
                 displayName,
                 locator,
                 userId,
-                /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId
+                /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId,
+                /* @conditional-compile-remove(rooms) */ options
             });
             if (afterCreateRef.current) {
                 newAdapter = yield afterCreateRef.current(newAdapter);
@@ -19604,7 +19655,8 @@ beforeDispose) => {
         credential,
         displayName,
         locator,
-        userId
+        userId,
+        /* @conditional-compile-remove(PSTN-calls) */ options
     ]);
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
@@ -19630,9 +19682,11 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, locator) => __awaiter$4(void 0, void 0, void 0, function* () {
+const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, locator, 
+/* @conditional-compile-remove(rooms) */ options) => __awaiter$4(void 0, void 0, void 0, function* () {
     const deviceManager = (yield callClient.getDeviceManager());
-    return new AzureCommunicationCallAdapter(callClient, locator, callAgent, deviceManager);
+    /* @conditional-compile-remove(rooms) */
+    return new AzureCommunicationCallAdapter(callClient, locator, callAgent, deviceManager, options);
 });
 const isCallError = (e) => {
     return e['target'] !== undefined && e['innerError'] !== undefined;