@azure/communication-react 1.3.3-alpha-202209220018.0 → 1.3.3-alpha-202210060021.0

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

@@ -188,11 +188,21 @@ const fromFlatCommunicationIdentifier = (id) => {
     }
     return { id };
 };
+/**
+ * Returns a CommunicationIdentifier.
+ * @internal
+ */
+const _toCommunicationIdentifier = (id) => {
+    if (typeof id === 'string') {
+        return fromFlatCommunicationIdentifier(id);
+    }
+    return id;
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202209220018.0';
+var telemetryVersion = '1.3.3-alpha-202210060021.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -391,7 +401,7 @@ const getCallState = (state, props) => { var _a; return (_a = state.calls[props.
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -429,7 +439,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$w(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$y(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -536,7 +546,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -560,7 +570,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @public
  */
 const createDefaultCallingHandlers = memoizeOne__default['default']((callClient, callAgent, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$x(void 0, void 0, void 0, function* () {
         // Before the call object creates a stream, dispose of any local preview streams.
         // @TODO: is there any way to parent the unparented view to the call object instead
         // of disposing and creating a new stream?
@@ -580,7 +590,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$x(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -593,7 +603,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             });
         }
     });
-    const onToggleCamera = (options) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (call && _isInCall(call.state)) {
             const stream = call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
             if (stream) {
@@ -619,23 +629,22 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             }
         }
     });
-    // FIXME: onStartCall API should use string, not the underlying SDK types.
     const onStartCall = (participants, options) => {
         return callAgent ? callAgent.startCall(participants, options) : undefined;
     };
-    const onSelectMicrophone = (device) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -658,19 +667,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!call || !_isInCall(call.state)) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$v(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = () => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
+    const onStartScreenShare = () => __awaiter$x(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$x(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$x(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = () => __awaiter$x(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$v(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
-    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$x(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
+    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$x(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -686,7 +695,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         const { view } = (_a = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _a !== void 0 ? _a : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -714,7 +723,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
         return (createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view) ? { view: createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view } : undefined;
     });
-    const onDisposeRemoteStreamView = (userId) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -735,7 +744,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$x(void 0, void 0, void 0, function* () {
         // If the user is currently in a call, dispose of the local stream view attached to that call.
         const callState = call && callClient.getState().calls[call.id];
         const localStream = callState === null || callState === void 0 ? void 0 : callState.localVideoStreams.find((item) => item.mediaStreamType === 'Video');
@@ -747,11 +756,12 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         // TODO: we need to remember which LocalVideoStream was used for LocalPreview and dispose that one.
         yield disposeAllLocalPreviewViews(callClient);
     });
-    const onRemoveParticipant = (userId) => __awaiter$v(void 0, void 0, void 0, function* () {
-        yield (call === null || call === void 0 ? void 0 : call.removeParticipant(fromFlatCommunicationIdentifier(userId)));
+    const onRemoveParticipant = (userId) => __awaiter$x(void 0, void 0, void 0, function* () {
+        const participant = _toCommunicationIdentifier(userId);
+        yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
     });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onAddParticipant = (participant, options) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onAddParticipant = (participant, options) => __awaiter$x(void 0, void 0, void 0, function* () {
         const participantType = participantTypeHelper(participant);
         switch (participantType) {
             case 'PSTN':
@@ -763,7 +773,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$x(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     return {
         onHangUp,
         /* @conditional-compile-remove(PSTN-calls) */
@@ -3494,7 +3504,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
-var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3519,7 +3529,7 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$w(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -3667,7 +3677,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3701,7 +3711,7 @@ const ChatMessageComponent = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     else if (isEditing) {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$t(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$v(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
                     (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
@@ -3800,7 +3810,7 @@ const getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4027,7 +4037,7 @@ const MessageThread = (props) => {
         setChatMessagesInitialized(chatMessagesInitialized);
     };
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$u(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -4078,14 +4088,13 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$u(void 0, void 0, void 0, function* () {
         if (chatScrollDivRef.current && !isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
                 // Fetch message until scrollTop reach the threshold for fetching new message
                 while (!isAllChatMessagesLoadedRef.current && chatScrollDivRef.current.scrollTop <= 500) {
                     isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
-                    // Release CPU resources for 200 milliseconds between each loop.
                     yield delay(200);
                 }
                 isLoadingChatMessagesRef.current = false;
@@ -4113,11 +4122,8 @@ const MessageThread = (props) => {
         if (!chatScrollDivRef.current) {
             return;
         }
-        if (previousTopRef.current === 0) {
-            const currentHeight = chatScrollDivRef.current.scrollHeight;
-            chatScrollDivRef.current.scrollTop =
-                chatScrollDivRef.current.scrollTop + currentHeight - previousHeightRef.current;
-        }
+        chatScrollDivRef.current.scrollTop =
+            chatScrollDivRef.current.scrollHeight - (previousHeightRef.current - previousTopRef.current);
     }, [messages]);
     // Fetch more messages to make the scroll bar appear, infinity scroll is then handled in the handleScroll function.
     React.useEffect(() => {
@@ -4568,10 +4574,20 @@ const participantStateStringTrampoline$1 = (props, strings) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ */
+const defaultPermissions = {
+    cameraButton: true,
+    microphoneButton: true,
+    screenShare: true,
+    removeParticipantButton: true
+};
 /**
  * @internal
  */
 const presenterPermissions = {
+    role: 'Presenter',
     cameraButton: true,
     microphoneButton: true,
     screenShare: true,
@@ -4581,6 +4597,7 @@ const presenterPermissions = {
  * @internal
  */
 const consumerPermissions = {
+    role: 'Consumer',
     cameraButton: false,
     microphoneButton: false,
     screenShare: false,
@@ -4590,6 +4607,7 @@ const consumerPermissions = {
  * @internal
  */
 const attendeePermissions = {
+    role: 'Attendee',
     cameraButton: true,
     microphoneButton: true,
     screenShare: false,
@@ -4598,7 +4616,7 @@ const attendeePermissions = {
 /**
  * @internal
  */
-const PermissionsContext = React.createContext(presenterPermissions);
+const PermissionsContext = React.createContext(defaultPermissions);
 /**
  * @internal
  */
@@ -4621,9 +4639,10 @@ const _getPermissions = (role) => {
     else if (role === 'Attendee') {
         return attendeePermissions;
     }
-    else {
+    else if (role === 'Presenter') {
         return presenterPermissions;
     }
+    return defaultPermissions;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -6384,11 +6403,17 @@ const VideoGallery = (props) => {
         lastVisibleParticipants: visibleAudioParticipants.current,
         maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
     });
+    /* @conditional-compile-remove(rooms) */
+    const permissions = _usePermissions();
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
     const localVideoTile = React.useMemo(() => {
         var _a, _b;
+        /* @conditional-compile-remove(rooms) */
+        if (!permissions.cameraButton) {
+            return undefined;
+        }
         if (onRenderLocalVideoTile) {
             return onRenderLocalVideoTile(localParticipant);
         }
@@ -6416,7 +6441,8 @@ const VideoGallery = (props) => {
         strings.localVideoSelectedDescription,
         strings.displayNamePlaceholder,
         styles === null || styles === void 0 ? void 0 : styles.localVideo,
-        theme.effects.roundedCorner4
+        theme.effects.roundedCorner4,
+        /* @conditional-compile-remove(rooms) */ permissions.cameraButton
     ]);
     const defaultOnRenderVideoTile = React.useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
@@ -6461,7 +6487,7 @@ const VideoGallery = (props) => {
         }
     };
     const horizontalGalleryTiles = createHorizontalGalleryTiles();
-    if (!shouldFloatLocalVideo && localParticipant) {
+    if (!shouldFloatLocalVideo && localVideoTile) {
         gridTiles.push(localVideoTile);
     }
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
@@ -6471,10 +6497,10 @@ const VideoGallery = (props) => {
     return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
         shouldFloatLocalVideo &&
             !shouldFloatNonDraggableLocalVideo &&
-            localParticipant &&
+            localVideoTile &&
             (horizontalGalleryPresent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS$1, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: layerHostId }, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoTile))),
         // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-        shouldFloatNonDraggableLocalVideo && localParticipant && remoteParticipants.length > 0 && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
+        shouldFloatNonDraggableLocalVideo && localVideoTile && remoteParticipants.length > 0 && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
                 boxShadow: theme.effects.elevation8,
                 zIndex: LOCAL_VIDEO_TILE_ZINDEX
             }) }, localVideoTile)),
@@ -6697,9 +6723,9 @@ const ControlBarButton = (props) => {
 /**
  * This is a helper component to define and unify icon colors
  *
- * @private
+ * @internal
  */
-const HighContrastAwareIcon = (props) => {
+const _HighContrastAwareIcon = (props) => {
     const { iconName, disabled } = props;
     const theme = useTheme();
     // setting colors for the icons using color from theme, so in dark mode or other accessibility modes, they have pre-defined contrast colors
@@ -6843,13 +6869,15 @@ const DevicesButton = (props) => {
     const localeStrings = useLocale$1().strings.devicesButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     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" }));
+    const onRenderOptionsIcon = () => {
+        return 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' })));
 };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6877,8 +6905,8 @@ const CameraButton = (props) => {
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const [announcerString, setAnnouncerString] = React.useState(undefined);
     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" }));
+    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) {
         strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;
     }
@@ -6887,7 +6915,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$t(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -7019,7 +7047,7 @@ const lightThemeCallButtonStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7050,17 +7078,17 @@ const MicrophoneButton = (props) => {
         (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);
     const onRenderMicOnIcon = () => {
-        return React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOn" });
+        return React__default['default'].createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOn" });
     };
     const onRenderMicOffIcon = () => {
-        return React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOff" });
+        return React__default['default'].createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonMicOff" });
     };
     const isMicOn = props.checked;
     const splitButtonAriaString = isMicOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -7196,7 +7224,7 @@ const ParticipantsButton = (props) => {
     var _a, _b, _c, _d;
     const { callInvitationURL, styles, onMuteAll, onRenderIcon, onRenderParticipantList, participants, myUserId, excludeMe, onRenderParticipant, onRenderAvatar, onRemoveParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
     const disabled = props.disabled;
-    const onRenderPeopleIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonParticipants" }));
+    const onRenderPeopleIcon = () => (React__default['default'].createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonParticipants" }));
     const ids = useIdentifiers();
     const onMuteAllCallback = React.useCallback(() => {
         if (onMuteAll) {
@@ -7339,8 +7367,8 @@ const ScreenShareButton = (props) => {
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = react.useTheme();
     const styles = screenshareButtonStyles(theme);
-    const onRenderScreenShareOnIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStop" }));
-    const onRenderScreenShareOffIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ControlButtonScreenShareStart" }));
+    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) => ({
@@ -7924,7 +7952,11 @@ const iconButtonStyles = (theme) => {
             color: `${theme.palette.black}`
         },
         icon: {
-            height: 'auto'
+            height: 'auto',
+            // Needed to keep the icon vertically centered.
+            '> span': {
+                display: 'flex'
+            }
         }
     };
 };
@@ -8036,7 +8068,7 @@ function useLongPress(onClick, onLongPress, isMobile) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -8077,10 +8109,10 @@ const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
     const { digit, index, onClick, onLongPress, isMobile = false } = props;
-    const clickFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+    const clickFunction = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
         onClick(digit, index);
     }), [digit, index, onClick]);
-    const longPressFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+    const longPressFunction = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
         onLongPress(digit, index);
     }), [digit, index, onLongPress]);
     const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);
@@ -8200,10 +8232,10 @@ const sanitizeInput = (input) => {
 const HoldButton = (props) => {
     const { onToggleHold, strings } = props;
     const onRenderHoldIcon = () => {
-        return React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "HoldCallButton" });
+        return React__default['default'].createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "HoldCallButton" });
     };
     const onRenderResumeIcon = () => {
-        return React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ResumeCall" });
+        return React__default['default'].createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ResumeCall" });
     };
     return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleHold !== null && onToggleHold !== void 0 ? onToggleHold : props.onClick, onRenderOnIcon: onRenderResumeIcon, onRenderOffIcon: onRenderHoldIcon })));
 };
@@ -8283,6 +8315,25 @@ const UnsupportedBrowser = (props) => {
     return React__default['default'].createElement(UnsupportedBrowserContainer, Object.assign({}, props, { strings: strings }));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * A dropdown to trigger device permission prompt
+ *
+ * @internal
+ */
+const _DevicePermissionDropdown = (props) => {
+    const { icon, onClickActionButton, strings, options, styles } = props;
+    const onRenderPlaceholder = () => {
+        return (React__default['default'].createElement(react.Stack, { horizontal: true, verticalAlign: "center" },
+            icon,
+            React__default['default'].createElement(react.Text, null, strings === null || strings === void 0 ? void 0 : strings.placeHolderText)));
+    };
+    const onRenderCaretDown = () => {
+        return React__default['default'].createElement(react.Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent);
+    };
+    return (React__default['default'].createElement(react.Dropdown, { placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: onClickActionButton, options: options !== null && options !== void 0 ? options : [], styles: styles }));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -8725,7 +8776,7 @@ const findConditionalCompiledSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -8748,35 +8799,35 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$o(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$q(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$o(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$q(void 0, void 0, void 0, function* () {
             const updatedMetadata = metadata ? Object.assign({}, metadata) : {};
             updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
-        onDeleteMessage: (messageId) => __awaiter$o(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$o(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$o(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$o(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$o(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$q(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$o(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$q(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
@@ -9478,7 +9529,7 @@ const findSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -9527,10 +9578,10 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$n(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$p(this, void 0, void 0, function* () {
             this._context.setDeviceManagerCameras(dedupeById(yield this._deviceManager.getCameras()));
         });
-        this.audioDevicesUpdated = () => __awaiter$n(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$p(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -9733,7 +9784,7 @@ class CallIdHistory {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10218,7 +10269,7 @@ class CallContext$1 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$m(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$o(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -10282,7 +10333,7 @@ const findOldestCallEnded = (calls) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10302,63 +10353,63 @@ class ProxyCall {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
             }
             case 'addParticipant': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -10566,7 +10617,7 @@ class RemoteVideoStreamSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10576,7 +10627,7 @@ var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$k(this, void 0, void 0, function* () {
+    return __awaiter$m(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
         let participantKey;
@@ -10684,7 +10735,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     });
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$k(this, void 0, void 0, function* () {
+    return __awaiter$m(this, void 0, void 0, function* () {
         _logEvent(callingStatefulLogger, {
             name: EventNames.START_LOCAL_STREAM_RENDERING,
             level: 'info',
@@ -10800,7 +10851,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$k(this, void 0, void 0, function* () {
+    return __awaiter$m(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -11428,7 +11479,7 @@ class CallSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11448,14 +11499,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$j(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$j(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -11503,6 +11554,16 @@ class IncomingCallSubscriber {
 }
 
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+(window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /**
  * ProxyCallAgent proxies CallAgent and saves any returned state in the given context. It will subscribe to all state
  * updates in the CallAgent and in the contained Calls and RemoteParticipants. When dispose is called it will
@@ -11656,10 +11717,10 @@ class ProxyCallAgent {
                 };
             }
             case 'dispose': {
+                /* @conditional-compile-remove(calling-beta-sdk) */
                 return () => {
-                    return target.dispose().then(() => {
-                        this.unsubscribe();
-                    });
+                    target.dispose();
+                    this.unsubscribe();
                 };
             }
             /**
@@ -11793,7 +11854,7 @@ class InternalCallContext {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11815,7 +11876,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -11828,7 +11889,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$k(this, void 0, void 0, function* () {
                     // As of writing, the SDK always returns the same instance of DeviceManager so we keep a reference of
                     // DeviceManager and if it does not change we return the cached DeclarativeDeviceManager. If it does not we'll
                     // throw an error that indicate we need to fix this issue as our implementation has diverged from the SDK.
@@ -11951,7 +12012,7 @@ const chatStatefulLogger = logger.createClientLogger('communication-react:chat-s
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12226,7 +12287,7 @@ class ChatContext$1 {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$h(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$j(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -12333,7 +12394,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12417,7 +12478,7 @@ class EventSubscriber {
             this.fetchLastParticipantMessage(event.threadId, 'participantAdded');
         };
         // This is a hot fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$g(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$i(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
                 for (var _b = __asyncValues$1(this.chatClient
@@ -12503,7 +12564,7 @@ class EventSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12525,7 +12586,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$f(this, void 0, void 0, function* () {
+                return __awaiter$h(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -12540,7 +12601,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$f(this, void 0, void 0, function* () {
+                        return __awaiter$h(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -12624,7 +12685,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12643,14 +12704,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
                     const message = yield chatThreadClient.getMessage(...args);
                     this._context.setChatMessage(chatThreadClient.threadId, convertChatMessage(message));
                     return message;
                 }), 'ChatThreadClient.getMessage');
             }
             case 'sendMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
                     // Retry logic?
                     const [request, options] = args;
                     const { content } = request;
@@ -12690,7 +12751,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -12699,7 +12760,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
                     // DeleteMessage is able to either delete local one(for failed message) or synced message
                     const [messageId] = args;
                     if (this._context.deleteLocalMessage(chatThreadClient.threadId, messageId)) {
@@ -12717,7 +12778,7 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -12725,7 +12786,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateMessage(...args);
                     const [messageId, updateOption] = args;
                     this._context.updateChatMessageContent(chatThreadClient.threadId, messageId, updateOption === null || updateOption === void 0 ? void 0 : updateOption.content);
@@ -12733,7 +12794,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -12741,7 +12802,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -12778,7 +12839,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12797,7 +12858,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$f(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -12810,7 +12871,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$f(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -12830,7 +12891,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$f(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -12841,7 +12902,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$f(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -13030,7 +13091,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$c={chatListHeader:"In this chat"};var callWithChat$c={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButton:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -13432,7 +13493,7 @@ const convertObservableFileUploadToFileUploadsUiState = (fileUploads) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -13558,9 +13619,9 @@ class AzureCommunicationChatAdapter {
         this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 var e_1, _a;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -13594,8 +13655,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$c(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
                 /* @conditional-compile-remove(file-sharing) */
@@ -13612,49 +13673,49 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$c(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
             yield this.handlers.onTyping();
         });
     }
     removeParticipant(userId) {
-        return __awaiter$c(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$c(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$c(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$c(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$c(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -13735,7 +13796,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$c(this, void 0, void 0, function* () {
+        return __awaiter$e(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -13777,7 +13838,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$c(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$e(void 0, void 0, void 0, function* () {
     const chatClient = createStatefulChatClient({
         userId,
         displayName,
@@ -13840,7 +13901,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$c(void 0, void 0, void 0, function* () {
+        (() => __awaiter$e(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -13872,7 +13933,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$c(void 0, void 0, void 0, function* () {
+            (() => __awaiter$e(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -13893,7 +13954,7 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$c(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$e(void 0, void 0, void 0, function* () {
     return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
 });
 const isChatError = (e) => {
@@ -14095,7 +14156,7 @@ const sendboxContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -14116,7 +14177,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$b(void 0, void 0, void 0, function* () {
+        (() => __awaiter$d(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -14903,7 +14964,7 @@ const isDisabled$2 = (option) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$a = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -14922,72 +14983,72 @@ _component) => {
     return createCompositeHandlers(useAdapter());
 };
 const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onCreateLocalStreamView: (options) => __awaiter$c(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(undefined, options);
     }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onCreateRemoteStreamView: (userId, options) => __awaiter$c(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(userId, options);
     }),
-    onHangUp: () => __awaiter$a(void 0, void 0, void 0, function* () {
+    onHangUp: () => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.leaveCall();
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onToggleHold: () => __awaiter$a(void 0, void 0, void 0, function* () {
+    onToggleHold: () => __awaiter$c(void 0, void 0, void 0, function* () {
         var _a;
         return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold' ? yield adapter.resumeCall() : yield adapter.holdCall();
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onAddParticipant: (participant, options) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onAddParticipant: (participant, options) => __awaiter$c(void 0, void 0, void 0, function* () {
         return yield adapter.addParticipant(participant, options);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onSendDtmfTone: (dtmfTone) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onSendDtmfTone: (dtmfTone) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.sendDtmfTone(dtmfTone);
     }),
-    onRemoveParticipant: (userId) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onRemoveParticipant: (userId) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onSelectCamera: (deviceInfo, options) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onSelectMicrophone: (deviceInfo) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.setMicrophone(deviceInfo);
     }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onSelectSpeaker: (deviceInfo) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.setSpeaker(deviceInfo);
     }),
     onStartCall: (participants, options) => {
         const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
         return adapter.startCall(rawIds, options);
     },
-    onStartScreenShare: () => __awaiter$a(void 0, void 0, void 0, function* () {
+    onStartScreenShare: () => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
     }),
-    onStopScreenShare: () => __awaiter$a(void 0, void 0, void 0, function* () {
+    onStopScreenShare: () => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.stopScreenShare();
     }),
-    onToggleCamera: (options) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onToggleCamera: (options) => __awaiter$c(void 0, void 0, void 0, function* () {
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
-    onToggleMicrophone: () => __awaiter$a(void 0, void 0, void 0, function* () {
+    onToggleMicrophone: () => __awaiter$c(void 0, void 0, void 0, function* () {
         var _b;
         return ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.isMuted) ? yield adapter.unmute() : yield adapter.mute();
     }),
-    onToggleScreenShare: () => __awaiter$a(void 0, void 0, void 0, function* () {
+    onToggleScreenShare: () => __awaiter$c(void 0, void 0, void 0, function* () {
         var _c;
         return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isScreenSharingOn)
             ? yield adapter.stopScreenShare()
             : yield adapter.startScreenShare();
     }),
-    onStartLocalVideo: () => __awaiter$a(void 0, void 0, void 0, function* () {
+    onStartLocalVideo: () => __awaiter$c(void 0, void 0, void 0, function* () {
         if (adapter.getState().call) {
             return adapter.startCamera();
         }
     }),
-    onDisposeLocalStreamView: () => __awaiter$a(void 0, void 0, void 0, function* () {
+    onDisposeLocalStreamView: () => __awaiter$c(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView();
     }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$a(void 0, void 0, void 0, function* () {
+    onDisposeRemoteStreamView: (userId) => __awaiter$c(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     })
 }));
@@ -15151,13 +15212,21 @@ const Devices = (props) => {
     const permissions = _usePermissions();
     /* @conditional-compile-remove(rooms) */
     const locale = useLocale();
+    /* @conditional-compile-remove(rooms) */
+    const onlyManageSpeakers = !permissions.microphoneButton && !permissions.cameraButton;
+    /* @conditional-compile-remove(rooms) */
+    const onRenderDevicesIcon = () => {
+        return React__default['default'].createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "OptionsSpeaker" });
+    };
     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, 
         /* @conditional-compile-remove(rooms) */
-        strings: getLabelFromPermissions(permissions, locale) })));
+        strings: getLabelFromPermissions(permissions, locale), 
+        /* @conditional-compile-remove(rooms) */
+        onRenderIcon: onlyManageSpeakers ? onRenderDevicesIcon : undefined })));
 };
 /* @conditional-compile-remove(rooms) */
 const getLabelFromPermissions = (permissions, locale) => {
@@ -15461,9 +15530,9 @@ const CallControls = (props) => {
     const localeStrings = useLocale();
     /* @conditional-compile-remove(one-to-n-calling) */
     const peopleButtonStrings = React.useMemo(() => ({
-        label: localeStrings.strings.callWithChat.peopleButtonLabel,
-        tooltipOffContent: localeStrings.strings.callWithChat.peopleButtonTooltipOpen,
-        tooltipOnContent: localeStrings.strings.callWithChat.peopleButtonTooltipClose
+        label: localeStrings.strings.call.peopleButtonLabel,
+        tooltipOffContent: localeStrings.strings.call.peopleButtonTooltipOpen,
+        tooltipOnContent: localeStrings.strings.call.peopleButtonTooltipClose
     }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const moreButtonStrings = React.useMemo(() => ({
@@ -15500,19 +15569,21 @@ const CallControls = (props) => {
                 ['data-ui-id']: 'call-composite-more-menu-people-button'
             });
         }
-        items.push({
-            key: 'holdButtonKey',
-            text: localeStrings.component.strings.holdButton.tooltipOffContent,
-            onClick: () => {
-                holdButtonProps.onToggleHold();
-            },
-            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
-            itemProps: {
-                styles: buttonFlyoutIncreasedSizeStyles
-            },
-            disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.holdButton),
-            ['data-ui-id']: 'hold-button'
-        });
+        if (!isRoomsCallTrampoline()) {
+            items.push({
+                key: 'holdButtonKey',
+                text: localeStrings.component.strings.holdButton.tooltipOffContent,
+                onClick: () => {
+                    holdButtonProps.onToggleHold();
+                },
+                iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                },
+                disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.holdButton),
+                ['data-ui-id']: 'hold-button'
+            });
+        }
         /* @conditional-compile-remove(PSTN-calls) */
         // dtmf tone sending only works for 1:1 PSTN call
         if (alternateCallerId) {
@@ -15569,11 +15640,18 @@ const CallControls = (props) => {
                 React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: !props.isMobile })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: !props.isMobile })),
                 customButtons['primary'],
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default['default'].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
 const isEnabled$2 = (option) => option !== false;
+/** @private */
+const isRoomsCallTrampoline = () => {
+    /* @conditional-compile-remove(rooms) */
+    const rolePermissions = _usePermissions();
+    /* @conditional-compile-remove(rooms) */
+    return !!rolePermissions.role;
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -15938,12 +16016,34 @@ const DRAG_OPTIONS = {
     menu: react.ContextualMenu,
     keepInBounds: true
 };
-const _ModalLocalAndRemotePIP = (props) => {
+/**
+ * A wrapping component with a draggable {@link LocalAndRemotePIP} component that is bound to a LayerHost component with id
+ * specified by `modalLayerHostId` prop
+ * @private
+ */
+const ModalLocalAndRemotePIP = (props) => {
     var _a;
     const rootStyles = props.hidden ? hiddenStyle : PIPContainerStyle;
+    /* @conditional-compile-remove(rooms) */
+    const rolePermissions = _usePermissions();
     const pictureInPictureProps = useSelector$1(localAndRemotePIPSelector);
     const pictureInPictureHandlers = useHandlers();
-    const localAndRemotePIP = React.useMemo(() => React__default['default'].createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers)), [pictureInPictureProps, pictureInPictureHandlers]);
+    const localAndRemotePIP = React.useMemo(() => {
+        var _a;
+        /* @conditional-compile-remove(rooms) */
+        if (!rolePermissions.cameraButton && ((_a = pictureInPictureProps.dominantRemoteParticipant) === null || _a === void 0 ? void 0 : _a.userId)) {
+            return React__default['default'].createElement(_RemoteVideoTile, Object.assign({}, pictureInPictureProps.dominantRemoteParticipant));
+        }
+        return React__default['default'].createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers));
+    }, [
+        pictureInPictureProps,
+        pictureInPictureHandlers,
+        /* @conditional-compile-remove(rooms) */ rolePermissions.cameraButton
+    ]);
+    /* @conditional-compile-remove(rooms) */
+    if (!rolePermissions.cameraButton && !pictureInPictureProps.dominantRemoteParticipant) {
+        return null;
+    }
     const modalStylesThemed = react.concatStyleSets(modalStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.modal);
     return (React__default['default'].createElement(react.Stack, { styles: rootStyles },
         React__default['default'].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStylesThemed, layerProps: { hostId: props.modalLayerHostId }, minDragPosition: props.minDragPosition, maxDragPosition: props.maxDragPosition }, 
@@ -15951,15 +16051,6 @@ const _ModalLocalAndRemotePIP = (props) => {
         // possession of the dominant remote participant video stream
         !props.hidden && localAndRemotePIP)));
 };
-/**
- * A wrapping component with a draggable {@link LocalAndRemotePIP} component that is bound to a LayerHost component with id
- * specified by `modalLayerHostId` prop
- * @private
- */
-const ModalLocalAndRemotePIP = (props) => {
-    return (React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
-        React__default['default'].createElement(_ModalLocalAndRemotePIP, Object.assign({}, props), props.children)));
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -16259,8 +16350,8 @@ const AddPeopleDropdown = (props) => {
     if (mobileView) {
         return (React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
-            React__default['default'].createElement(react.Stack.Item, { styles: copyLinkButtonContainerStyles },
-                React__default['default'].createElement(react.PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" })),
+            defaultMenuProps.items.length > 0 && (React__default['default'].createElement(react.Stack.Item, { styles: copyLinkButtonContainerStyles },
+                React__default['default'].createElement(react.PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" }))),
             addPeopleDrawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles, "data-ui-id": "call-add-people-dropdown" },
                 React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems }))),
             alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }))));
@@ -16268,8 +16359,8 @@ const AddPeopleDropdown = (props) => {
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Stack, null,
         React__default['default'].createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
         alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId })),
-        React__default['default'].createElement(react.Stack, { styles: copyLinkButtonStackStyles },
-            React__default['default'].createElement(react.DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" })))));
+        defaultMenuProps.items.length > 0 && (React__default['default'].createElement(react.Stack, { styles: copyLinkButtonStackStyles },
+            React__default['default'].createElement(react.DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" }))))));
 };
 function PeoplePaneOpenDialpadIconNameTrampoline() {
     /* @conditional-compile-remove(PSTN-calls) */
@@ -16299,7 +16390,7 @@ const AddPeopleButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16335,7 +16426,7 @@ const PeoplePaneContent = (props) => {
         setDrawerMenuItems
     ]);
     const participantListProps = React.useMemo(() => {
-        const onRemoveAParticipant = (participantId) => __awaiter$9(void 0, void 0, void 0, function* () { return onRemoveParticipant(participantId); });
+        const onRemoveAParticipant = (participantId) => __awaiter$b(void 0, void 0, void 0, function* () { return onRemoveParticipant(participantId); });
         return Object.assign(Object.assign({}, participantListDefaultProps), { 
             // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked
             onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant, 
@@ -16533,7 +16624,7 @@ const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
     return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
 };
 
-var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$a = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16563,11 +16654,11 @@ const CallPane = (props) => {
     /**
      * In a Call Composite when a participant is removed, we must remove them from the call.
      */
-    const removeParticipantFromCall = (participantId) => __awaiter$8(void 0, void 0, void 0, function* () {
+    const removeParticipantFromCall = (participantId) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield props.callAdapter.removeParticipant(participantId);
     });
     /* @conditional-compile-remove(PSTN-calls) */
-    const addParticipantToCall = (participant, options) => __awaiter$8(void 0, void 0, void 0, function* () {
+    const addParticipantToCall = (participant, options) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield props.callAdapter.addParticipant(participant, options);
     });
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
@@ -16587,7 +16678,8 @@ const CallPane = (props) => {
                                 onAddParticipant: addParticipantToCall, setDrawerMenuItems: setDrawerMenuItems, strings: strings, 
                                 /* @conditional-compile-remove(PSTN-calls) */
                                 alternateCallerId: alternateCallerId }))))))),
-        props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { callAdapter: props.callAdapter, modalLayerHostId: props.modalLayerHostId, hidden: !props.activePane, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
+        props.mobileView && (React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
+            React__default['default'].createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !props.activePane, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition }))),
         drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles },
             React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
@@ -17067,6 +17159,75 @@ const optionIconStyles = react.mergeStyles({
     verticalAlign: 'text-top'
 });
 
+var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * @private
+ */
+const ConfigurationpageCameraDropdown = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
+    const theme = useTheme();
+    /* @conditional-compile-remove(call-readiness) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(call-readiness) */
+    const devicePermissionDropdownStringsCamera = {
+        placeHolderText: 'Enable Camera (optional)',
+        actionButtonContent: 'Allow'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    const cameraBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, { styles: dropDownStyles(theme), onClickActionButton: () => __awaiter$9(void 0, void 0, void 0, function* () {
+            yield adapter.askDevicePermission({ video: true, audio: false });
+            if (props.cameraPermissionGranted) {
+                adapter.queryCameras();
+            }
+        }), strings: devicePermissionDropdownStringsCamera, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }) }));
+    /* @conditional-compile-remove(call-readiness) */
+    return React__default['default'].createElement(React__default['default'].Fragment, null, props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown);
+};
+
+var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * @private
+ */
+const ConfigurationpageMicDropdown = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
+    const theme = useTheme();
+    /* @conditional-compile-remove(call-readiness) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(call-readiness) */
+    const devicePermissionDropdownStringsMicrophone = {
+        placeHolderText: 'Enable Microphone (required)',
+        actionButtonContent: 'Allow'
+    };
+    /* @conditional-compile-remove(call-readiness) */
+    const microphoneBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, { styles: dropDownStyles(theme), onClickActionButton: () => __awaiter$8(void 0, void 0, void 0, function* () {
+            yield adapter.askDevicePermission({ video: false, audio: true });
+            if (props.micPermissionGranted) {
+                adapter.queryMicrophones();
+                adapter.querySpeakers();
+            }
+        }), strings: devicePermissionDropdownStringsMicrophone, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }) }));
+    /* @conditional-compile-remove(call-readiness) */
+    return React__default['default'].createElement(React__default['default'].Fragment, null,
+        " ",
+        props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown);
+};
+
 // Copyright (c) Microsoft Corporation.
 const getDropDownList = (list) => {
     // Remove duplicates
@@ -17114,46 +17275,62 @@ const LocalDeviceSettings = (props) => {
     var _a;
     const theme = useTheme();
     const locale = useLocale();
+    /* @conditional-compile-remove(call-readiness) */
+    const adapter = useAdapter();
     const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;
     const cameraLabel = locale.strings.call.cameraLabel;
     const soundLabel = locale.strings.call.soundLabel;
-    let isSelectCamEnabled = props.cameraPermissionGranted;
-    let isSelectMicEnabled = props.microphonePermissionGranted;
+    const cameraPermissionGranted = props.cameraPermissionGranted;
+    const micPermissionGranted = props.microphonePermissionGranted;
+    let roleCanUseCamera = true;
+    let roleCanUseMic = true;
     /* @conditional-compile-remove(rooms) */
-    const permissions = _usePermissions();
+    const rolePermissions = _usePermissions();
     /* @conditional-compile-remove(rooms) */
-    isSelectCamEnabled = isSelectCamEnabled && permissions.cameraButton;
+    roleCanUseCamera = rolePermissions.cameraButton;
     /* @conditional-compile-remove(rooms) */
-    isSelectMicEnabled = isSelectMicEnabled && permissions.microphoneButton;
+    roleCanUseMic = rolePermissions.microphoneButton;
     // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its
     // 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.
+    /* @conditional-compile-remove(call-readiness) */
+    React.useEffect(() => {
+        if (cameraPermissionGranted) {
+            adapter.queryCameras();
+        }
+        if (micPermissionGranted) {
+            adapter.queryMicrophones();
+        }
+        adapter.querySpeakers();
+    }, [adapter, cameraPermissionGranted, micPermissionGranted]);
+    const cameraGrantedDropdown = (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: cameraPermissionGranted ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }], styles: dropDownStyles(theme), disabled: !cameraPermissionGranted, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
+            ? undefined
+            : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: micPermissionGranted
+            ? props.selectedCamera
+                ? props.selectedCamera.id
+                : props.cameras
+                    ? (_a = props.cameras[0]) === null || _a === void 0 ? void 0 : _a.id
+                    : ''
+            : 'deniedOrUnknown', onChange: (event, option, index) => {
+            props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOptions);
+        }, onRenderTitle: (props) => onRenderTitle('Camera', props) }));
+    const micGrantedDropdown = (React__default['default'].createElement(React__default['default'].Fragment, null, roleCanUseMic && (React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: !micPermissionGranted, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
+            ? undefined
+            : locale.strings.call.microphonePermissionDenied, options: micPermissionGranted ? getDropDownList(props.microphones) : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: micPermissionGranted
+            ? props.selectedMicrophone
+                ? props.selectedMicrophone.id
+                : defaultDeviceId(props.microphones)
+            : 'deniedOrUnknown', onChange: (event, option, index) => {
+            props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
+        }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }))));
     return (React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens },
-        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), errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
-                    ? undefined
-                    : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: isSelectMicEnabled
-                    ? props.selectedCamera
-                        ? props.selectedCamera.id
-                        : props.cameras
-                            ? (_a = props.cameras[0]) === null || _a === void 0 ? void 0 : _a.id
-                            : ''
-                    : 'deniedOrUnknown', onChange: (event, option, index) => {
-                    props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOptions);
-                }, onRenderTitle: (props) => onRenderTitle('Camera', props) }))),
+        roleCanUseCamera && (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: !cameraPermissionGranted }, cameraLabel),
+            React__default['default'].createElement(ConfigurationpageCameraDropdown, { cameraGrantedDropdown: cameraGrantedDropdown, cameraPermissionGranted: cameraPermissionGranted !== null && cameraPermissionGranted !== void 0 ? cameraPermissionGranted : false }))),
         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.Label, { id: 'call-composite-local-sound-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !micPermissionGranted }, soundLabel),
             React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: mainStackTokens },
-                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
-                            ? props.selectedMicrophone.id
-                            : defaultDeviceId(props.microphones)
-                        : 'deniedOrUnknown', onChange: (event, option, index) => {
-                        props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
-                    }, onRenderTitle: (props) => onRenderTitle('Microphone', props) })),
+                React__default['default'].createElement(ConfigurationpageMicDropdown, { micGrantedDropdown: micGrantedDropdown, micPermissionGranted: micPermissionGranted !== null && micPermissionGranted !== void 0 ? micPermissionGranted : false }),
                 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) })))));
@@ -18071,7 +18248,7 @@ class CallContext {
         this.emitter.off('callEnded', handler);
     }
     updateClientState(clientState) {
-        var _a, _b, _c;
+        var _a;
         const call = this.callId ? clientState.calls[this.callId] : undefined;
         const latestEndedCall = findLatestEndedCall(clientState.callsEnded);
         // As the state is transitioning to a new state, trigger appropriate callback events.
@@ -18079,13 +18256,11 @@ class CallContext {
         const newPage = getCallCompositePage(call, latestEndedCall);
         if (!IsCallEndedPage(oldPage) && IsCallEndedPage(newPage)) {
             this.emitter.emit('callEnded', {
-                callId: this.callId,
-                callEndedCode: (_a = latestEndedCall === null || latestEndedCall === void 0 ? void 0 : latestEndedCall.callEndReason) === null || _a === void 0 ? void 0 : _a.code,
-                callEndedSubCode: (_b = latestEndedCall === null || latestEndedCall === void 0 ? void 0 : latestEndedCall.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode
+                callId: this.callId
             });
         }
         if (this.state.page) {
-            this.setState(Object.assign(Object.assign({}, this.state), { userId: clientState.userId, displayName: (_c = clientState.callAgent) === null || _c === void 0 ? void 0 : _c.displayName, call, page: newPage, endedCall: latestEndedCall, devices: clientState.deviceManager, latestErrors: clientState.latestErrors }));
+            this.setState(Object.assign(Object.assign({}, this.state), { userId: clientState.userId, displayName: (_a = clientState.callAgent) === null || _a === void 0 ? void 0 : _a.displayName, call, page: newPage, endedCall: latestEndedCall, devices: clientState.deviceManager, latestErrors: clientState.latestErrors }));
         }
     }
 }
@@ -18400,10 +18575,10 @@ class AzureCommunicationCallAdapter {
         const idsToAdd = participants.map((participant) => {
             // FIXME: `onStartCall` does not allow a Teams user.
             // Need some way to return an error if a Teams user is provided.
-            const backendId = fromFlatCommunicationIdentifier(participant);
+            const backendId = _toCommunicationIdentifier(participant);
             if (communicationCommon.isPhoneNumberIdentifier(backendId)) {
                 if ((options === null || options === void 0 ? void 0 : options.alternateCallerId) === undefined) {
-                    throw new Error('unable to start call, PSTN user present with no alternateCallerId.');
+                    throw new Error('Unable to start call, PSTN user present with no alternateCallerId.');
                 }
                 return backendId;
             }
@@ -18429,7 +18604,10 @@ class AzureCommunicationCallAdapter {
     }
     removeParticipant(userId) {
         return __awaiter$4(this, void 0, void 0, function* () {
-            this.handlers.onRemoveParticipant(userId);
+            let participant = userId;
+            /* @conditional-compile-remove(PSTN-calls) */
+            participant = _toCommunicationIdentifier(userId);
+            this.handlers.onRemoveParticipant(participant);
         });
     }
     /* @conditional-compile-remove(PSTN-calls) */
@@ -19212,7 +19390,10 @@ class CallWithChatBackedCallAdapter {
         };
         this.leaveCall = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.leaveCall(); });
         this.startCall = (participants, options) => {
-            return this.callWithChatAdapter.startCall(participants, options);
+            let communicationParticipants = participants;
+            /* @conditional-compile-remove(PSTN-calls) */
+            communicationParticipants = participants.map(_toCommunicationIdentifier);
+            return this.callWithChatAdapter.startCall(communicationParticipants, options);
         };
         this.setCamera = (sourceId, options) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setCamera(sourceId, options); });
         this.setMicrophone = (sourceId) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setMicrophone(sourceId); });
@@ -19227,7 +19408,12 @@ class CallWithChatBackedCallAdapter {
         this.unmute = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.unmute(); });
         this.startScreenShare = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.startScreenShare(); });
         this.stopScreenShare = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.stopScreenShare(); });
-        this.removeParticipant = (userId) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.removeParticipant(userId); });
+        this.removeParticipant = (userId) => __awaiter$3(this, void 0, void 0, function* () {
+            let participant = userId;
+            /* @conditional-compile-remove(PSTN-calls) */
+            participant = _toCommunicationIdentifier(userId);
+            yield this.callWithChatAdapter.removeParticipant(participant);
+        });
         this.createStreamView = (remoteUserId, options) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.createStreamView(remoteUserId, options); });
         this.disposeStreamView = (remoteUserId, options) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.disposeStreamView(remoteUserId, options); });
         /* @conditional-compile-remove(PSTN-calls) */
@@ -19621,7 +19807,8 @@ const CallWithChatPane = (props) => {
                 React__default['default'].createElement(react.Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                     React__default['default'].createElement(react.Stack, { styles: props.activePane === 'chat' ? availableSpaceStyles : hiddenStyles }, chatContent),
                     React__default['default'].createElement(react.Stack, { styles: props.activePane === 'people' ? availableSpaceStyles : hiddenStyles }, peopleContent)))),
-        props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { callAdapter: props.callAdapter, modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
+        props.mobileView && (React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
+            React__default['default'].createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition }))),
         drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
             React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
@@ -20039,7 +20226,10 @@ class AzureCommunicationCallWithChatAdapter {
     }
     /** Start a new Call. */
     startCall(participants, options) {
-        return this.callAdapter.startCall(participants, options);
+        let communicationParticipants = participants;
+        /* @conditional-compile-remove(PSTN-calls) */
+        communicationParticipants = participants.map(_toCommunicationIdentifier);
+        return this.callAdapter.startCall(communicationParticipants, options);
     }
     /**
      * Subscribe to state change events.
@@ -20069,8 +20259,10 @@ class AzureCommunicationCallWithChatAdapter {
     /** Remove a participant from the Call only. */
     removeParticipant(userId) {
         return __awaiter(this, void 0, void 0, function* () {
-            // Only remove the participant from the GroupCall. Contoso must manage access to Chat.
-            yield this.callAdapter.removeParticipant(userId);
+            let participant = userId;
+            /* @conditional-compile-remove(PSTN-calls) */
+            participant = _toCommunicationIdentifier(userId);
+            yield this.callAdapter.removeParticipant(participant);
         });
     }
     setCamera(device, options) {
@@ -20638,6 +20830,7 @@ exports.TypingIndicator = TypingIndicator;
 exports.UnsupportedBrowser = UnsupportedBrowser;
 exports.VideoGallery = VideoGallery;
 exports.VideoTile = VideoTile;
+exports._DevicePermissionDropdown = _DevicePermissionDropdown;
 exports._IdentifierProvider = _IdentifierProvider;
 exports.createAzureCommunicationCallAdapter = createAzureCommunicationCallAdapter;
 exports.createAzureCommunicationCallAdapterFromClient = createAzureCommunicationCallAdapterFromClient;