@azure/communication-react 1.7.0-alpha-202307280013 → 1.7.0-alpha-202307300015

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.0-alpha-202307280013';
+var telemetryVersion = '1.7.0-alpha-202307300015';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -332,6 +332,14 @@ const _logEvent = (logger, event) => {
  * @private
  */
 const getDeviceManager$1 = (state) => state.deviceManager;
+/**
+ * @private
+ */
+const getRole = (state, props) => {
+    var _a;
+    /* @conditional-compile-remove(rooms) */
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.role;
+};
 /**
  * @private
  */
@@ -535,10 +543,10 @@ const _isRingingPSTNParticipant = (participant) => {
  *
  * @public
  */
-const microphoneButtonSelector = reselect__namespace.createSelector([getCallExists, getIsMuted, getDeviceManager$1], (callExists, isMuted, deviceManager) => {
+const microphoneButtonSelector = reselect__namespace.createSelector([getCallExists, getIsMuted, getDeviceManager$1, /* @conditional-compile-remove(rooms) */ getRole], (callExists, isMuted, deviceManager, /* @conditional-compile-remove(rooms) */ role) => {
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.audio : true;
     return {
-        disabled: !callExists || !permission,
+        disabled: !callExists || !permission || /* @conditional-compile-remove(rooms) */ role === 'Consumer',
         checked: callExists ? !isMuted : false,
         microphones: deviceManager.microphones,
         speakers: deviceManager.speakers,
@@ -551,12 +559,15 @@ const microphoneButtonSelector = reselect__namespace.createSelector([getCallExis
  *
  * @public
  */
-const cameraButtonSelector = reselect__namespace.createSelector([getLocalVideoStreams$1, getDeviceManager$1], (localVideoStreams, deviceManager) => {
+const cameraButtonSelector = reselect__namespace.createSelector([getLocalVideoStreams$1, getDeviceManager$1, /* @conditional-compile-remove(rooms) */ getRole], (localVideoStreams, deviceManager, /* @conditional-compile-remove(rooms) */ role) => {
     const previewOn = _isPreviewOn(deviceManager);
     const localVideoFromCall = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.video : true;
     return {
-        disabled: !deviceManager.selectedCamera || !permission || !deviceManager.cameras.length,
+        disabled: !deviceManager.selectedCamera ||
+            !permission ||
+            !deviceManager.cameras.length ||
+            /* @conditional-compile-remove(rooms) */ role === 'Consumer',
         checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,
         cameras: deviceManager.cameras,
         selectedCamera: deviceManager.selectedCamera
@@ -567,12 +578,20 @@ const cameraButtonSelector = reselect__namespace.createSelector([getLocalVideoSt
  *
  * @public
  */
-const screenShareButtonSelector = reselect__namespace.createSelector([getIsScreenSharingOn, /* @conditional-compile-remove(PSTN-calls) */ getCallState], (isScreenSharingOn, /* @conditional-compile-remove(PSTN-calls) */ callState) => {
+const screenShareButtonSelector = reselect__namespace.createSelector([
+    getIsScreenSharingOn,
+    /* @conditional-compile-remove(PSTN-calls) */ getCallState,
+    /* @conditional-compile-remove(rooms) */ getRole
+], (isScreenSharingOn, 
+/* @conditional-compile-remove(PSTN-calls) */ callState, 
+/* @conditional-compile-remove(rooms) */ role) => {
     var _a;
     return {
         checked: isScreenSharingOn,
         /* @conditional-compile-remove(PSTN-calls) */
-        disabled: callState === 'InLobby' ? true : (_a = callState === 'Connecting') !== null && _a !== void 0 ? _a : false
+        disabled: (callState === 'InLobby' ? true : (_a = callState === 'Connecting') !== null && _a !== void 0 ? _a : false) ||
+            /* @conditional-compile-remove(rooms) */ role === 'Consumer' ||
+            /* @conditional-compile-remove(rooms) */ role === 'Attendee'
     };
 });
 /**
@@ -10555,78 +10574,6 @@ const participantStateStringTrampoline$1 = (props, strings) => {
             : undefined;
 };
 
-// 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,
-    removeParticipantButton: true
-};
-/**
- * @internal
- */
-const consumerPermissions = {
-    role: 'Consumer',
-    cameraButton: false,
-    microphoneButton: false,
-    screenShare: false,
-    removeParticipantButton: false
-};
-/**
- * @internal
- */
-const attendeePermissions = {
-    role: 'Attendee',
-    cameraButton: true,
-    microphoneButton: true,
-    screenShare: false,
-    removeParticipantButton: false
-};
-/**
- * @internal
- */
-const PermissionsContext = React.createContext(defaultPermissions);
-/**
- * @internal
- */
-const _PermissionsProvider = (props) => {
-    const { permissions, children } = props;
-    return React__default['default'].createElement(PermissionsContext.Provider, { value: permissions }, children);
-};
-/**
- * @internal
- * React hook to access permissions
- */
-const _usePermissions = () => React.useContext(PermissionsContext);
-/**
- * @internal
- */
-const _getPermissions = (role) => {
-    if (role === 'Consumer') {
-        return consumerPermissions;
-    }
-    else if (role === 'Attendee') {
-        return attendeePermissions;
-    }
-    else if (role === 'Presenter') {
-        return presenterPermissions;
-    }
-    return defaultPermissions;
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -10715,9 +10662,7 @@ const ParticipantList = (props) => {
     const createParticipantMenuItems = React.useCallback((participant) => {
         var _a, _b;
         let menuItems = [];
-        let participantIsRemovable = participant.isRemovable;
-        /* @conditional-compile-remove(rooms) */
-        participantIsRemovable = _usePermissions().removeParticipantButton && participantIsRemovable;
+        const participantIsRemovable = participant.isRemovable;
         if (participant.userId !== myUserId && onRemoveParticipant && participantIsRemovable) {
             menuItems.push({
                 key: 'remove',
@@ -13874,7 +13819,7 @@ const VideoGallery = (props) => {
     remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS, 
     /* @conditional-compile-remove(vertical-gallery) */
     overflowGalleryPosition = 'HorizontalBottom', 
-    /* @conditional-compile-remove(click-to-call) */
+    /* @conditional-compile-remove(rooms) */
     localVideoTileSize = 'followDeviceOrientation' } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
@@ -13907,15 +13852,13 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(pinned-participants) */
     // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants
     const pinnedParticipants = (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState;
-    /* @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 || /* @conditional-compile-remove(click-to-call) */ localVideoTileSize === 'hidden') {
+        /* @conditional-compile-remove(click-to-call) */
+        if (localVideoTileSize === 'hidden') {
             return undefined;
         }
         if (onRenderLocalVideoTile) {
@@ -13927,7 +13870,8 @@ const VideoGallery = (props) => {
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
         return (React__default['default'].createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
             React__default['default'].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !((shouldFloatLocalVideo && isNarrow) ||
-                    /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16'), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
+                    /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===
+                        '9:16'), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
     }, [
         isNarrow,
         localParticipant,
@@ -13946,8 +13890,8 @@ const VideoGallery = (props) => {
         strings.localVideoSelectedDescription,
         styles === null || styles === void 0 ? void 0 : styles.localVideo,
         theme.effects.roundedCorner4,
-        /* @conditional-compile-remove(rooms) */ permissions.cameraButton,
-        /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
+        /*@conditional-compile-remove(click-to-call) */
+        localVideoTileSize
     ]);
     /* @conditional-compile-remove(pinned-participants) */
     const onPinParticipant = React.useCallback((userId) => {
@@ -16615,7 +16559,8 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
     };
 };
 /** @private */
-const memoizeLocalParticipant = memoizeOne__default['default']((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream) => {
+const memoizeLocalParticipant = memoizeOne__default['default']((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
+/* @conditional-compile-remove(rooms) */ role) => {
     var _a, _b;
     return ({
         userId: identifier,
@@ -16626,7 +16571,9 @@ const memoizeLocalParticipant = memoizeOne__default['default']((identifier, disp
             isAvailable: !!localVideoStream,
             isMirrored: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
             renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
-        }
+        },
+        /* @conditional-compile-remove(rooms) */
+        role
     });
 });
 
@@ -16645,10 +16592,14 @@ const videoGallerySelector = reselect.createSelector([
     getIdentifier,
     getDominantSpeakers,
     /* @conditional-compile-remove(optimal-video-count) */
-    getOptimalVideoCount
+    getOptimalVideoCount,
+    /* @conditional-compile-remove(rooms) */
+    getRole
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
 /* @conditional-compile-remove(optimal-video-count) */
-optimalVideoCount) => {
+optimalVideoCount, 
+/* @conditional-compile-remove(rooms) */
+role) => {
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -16660,7 +16611,9 @@ optimalVideoCount) => {
         screenShareParticipant: screenShareRemoteParticipant
             ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName)
             : undefined,
-        localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream),
+        localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
+        /* @conditional-compile-remove(rooms) */
+        role),
         remoteParticipants: _videoGalleryRemoteParticipantsMemo(updateUserDisplayNamesTrampoline$2(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants)),
         dominantSpeakers: dominantSpeakerIds,
         /* @conditional-compile-remove(optimal-video-count) */
@@ -16673,7 +16626,7 @@ const updateUserDisplayNamesTrampoline$2 = (remoteParticipants) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-const convertRemoteParticipantToParticipantListParticipant = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking) => {
+const convertRemoteParticipantToParticipantListParticipant = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, localUserCanRemoveOthers) => {
     const identifier = fromFlatCommunicationIdentifier(userId);
     return {
         userId,
@@ -16684,23 +16637,25 @@ const convertRemoteParticipantToParticipantListParticipant = (userId, displayNam
         isSpeaking,
         // ACS users can not remove Teams users.
         // Removing unknown types of users is undefined.
-        isRemovable: communicationCommon.getIdentifierKind(identifier).kind === 'communicationUser' || communicationCommon.getIdentifierKind(identifier).kind === 'phoneNumber'
+        isRemovable: (communicationCommon.getIdentifierKind(identifier).kind === 'communicationUser' ||
+            communicationCommon.getIdentifierKind(identifier).kind === 'phoneNumber') &&
+            localUserCanRemoveOthers
     };
 };
 /* @conditional-compile-remove(rooms) */
 /**
  * @private
  */
-const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, role) => {
-    return convertRemoteParticipantToParticipantListParticipantBeta(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, role);
+const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll((userId, displayName, state, isMuted, isScreenSharing, isSpeaking, localUserCanRemoveOthers) => {
+    return convertRemoteParticipantToParticipantListParticipantBeta(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, localUserCanRemoveOthers);
 });
 /* @conditional-compile-remove(rooms) */
-const convertRemoteParticipantToParticipantListParticipantBeta = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, role) => {
-    return Object.assign(Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking)), { role });
+const convertRemoteParticipantToParticipantListParticipantBeta = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, localUserCanRemoveOthers) => {
+    return Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, localUserCanRemoveOthers));
 };
 
 // Copyright (c) Microsoft Corporation.
-const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipants) => {
+const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipants, localUserCanRemoveOthers) => {
     /* eslint-disable @typescript-eslint/explicit-function-return-type */
     const conversionCallback = (memoizeFn) => {
         return (remoteParticipants
@@ -16724,8 +16679,7 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
              * and mapping their state to be 'Ringing'
              */
             const state = _isRingingPSTNParticipant(participant);
-            return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), participant.displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking, 
-            /* @conditional-compile-remove(rooms) */ participant.role);
+            return memoizeFn(toFlatCommunicationIdentifier(participant.identifier), participant.displayName, state, participant.isMuted, isScreenSharing, participant.isSpeaking, localUserCanRemoveOthers);
         })
             .sort((a, b) => {
             var _a, _b;
@@ -16750,9 +16704,18 @@ const convertRemoteParticipantsToParticipantListParticipants = (remoteParticipan
  *
  * @public
  */
-const participantListSelector = reselect.createSelector([getIdentifier, getDisplayName$2, getRemoteParticipants$1, getIsScreenSharingOn, getIsMuted, getParticipantCount], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, partitipantCount) => {
+const participantListSelector = reselect.createSelector([
+    getIdentifier,
+    getDisplayName$2,
+    getRemoteParticipants$1,
+    getIsScreenSharingOn,
+    getIsMuted,
+    getRole,
+    getParticipantCount
+], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, role, partitipantCount) => {
+    const localUserCanRemoveOthers = localUserCanRemoveOthersTrampoline(role);
     const participants = remoteParticipants
-        ? convertRemoteParticipantsToParticipantListParticipants(updateUserDisplayNamesTrampoline$1(Object.values(remoteParticipants)))
+        ? convertRemoteParticipantsToParticipantListParticipants(updateUserDisplayNamesTrampoline$1(Object.values(remoteParticipants)), localUserCanRemoveOthers)
         : [];
     participants.push({
         userId: userId,
@@ -16776,6 +16739,10 @@ const updateUserDisplayNamesTrampoline$1 = (remoteParticipants) => {
     /* @conditional-compile-remove(PSTN-calls) */
     return _updateUserDisplayNames(remoteParticipants);
 };
+const localUserCanRemoveOthersTrampoline = (role) => {
+    /* @conditional-compile-remove(rooms) */
+    return role === 'Presenter' || role === 'Unknown' || role === undefined;
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -21773,9 +21740,16 @@ const usePropsFor$1 = (component) => {
  * @private
  */
 const Camera = (props) => {
+    var _a;
     const cameraButtonProps = usePropsFor$1(CameraButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
-    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled || props.disabled, 
+    /* @conditional-compile-remove(rooms) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(rooms) */
+    const isRoomsCall = adapter.getState().isRoomsCall;
+    return (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: props.displayType !== 'compact', styles: styles, enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: cameraButtonProps.disabled ||
+            props.disabled ||
+            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'), 
         /* @conditional-compile-remove(video-background-effects) */
         onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })));
 };
@@ -21813,17 +21787,20 @@ const onFetchCustomButtonPropsTrampoline$1 = (options) => {
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const Devices = (props) => {
+    var _a, _b;
     const devicesButtonProps = usePropsFor$1(DevicesButton);
     /* @conditional-compile-remove(rooms) */
-    const permissions = _usePermissions();
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(rooms) */
+    const role = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) !== null && _b !== void 0 ? _b : 'Unknown';
     const augmentedDeviceButtonProps = React.useMemo(() => (Object.assign(Object.assign({}, devicesButtonProps), { 
         /* @conditional-compile-remove(rooms) */
-        microphones: !permissions.microphoneButton ? [] : devicesButtonProps.microphones, 
+        microphones: role === 'Consumer' ? [] : devicesButtonProps.microphones, 
         /* @conditional-compile-remove(rooms) */
-        cameras: !permissions.cameraButton ? [] : devicesButtonProps.cameras })), [
+        cameras: role === 'Consumer' ? [] : devicesButtonProps.cameras })), [
         devicesButtonProps,
         /* @conditional-compile-remove(rooms) */
-        permissions
+        role
     ]);
     const styles = React.useMemo(() => {
         var _a;
@@ -21832,7 +21809,7 @@ const Devices = (props) => {
     /* @conditional-compile-remove(rooms) */
     const locale = useLocale();
     /* @conditional-compile-remove(rooms) */
-    const onlyManageSpeakers = !permissions.microphoneButton && !permissions.cameraButton;
+    const onlyManageSpeakers = role === 'Consumer';
     /* @conditional-compile-remove(rooms) */
     const onRenderDevicesIcon = () => {
         return React__default['default'].createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "OptionsSpeaker" });
@@ -21843,13 +21820,13 @@ const Devices = (props) => {
         /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
         persistMenu: true }, augmentedDeviceButtonProps, { 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: getLabelFromRole(role, locale), 
         /* @conditional-compile-remove(rooms) */
         onRenderIcon: onlyManageSpeakers ? onRenderDevicesIcon : undefined })));
 };
 /* @conditional-compile-remove(rooms) */
-const getLabelFromPermissions = (permissions, locale) => {
-    if (!permissions.cameraButton && !permissions.microphoneButton) {
+const getLabelFromRole = (role, locale) => {
+    if (role === 'Consumer') {
         return { label: locale.component.strings.microphoneButton.speakerMenuTitle };
     }
     return undefined;
@@ -21901,11 +21878,6 @@ const getIsScreenShareOn = (state) => { var _a, _b; return (_b = (_a = state.cal
  * @private
  */
 const getIsPreviewCameraOn = (state) => _isPreviewOn(state.devices);
-/* @conditional-compile-remove(rooms) */
-/**
- * @private
- */
-const getRole = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.role; };
 /**
  * @private
  */
@@ -21959,10 +21931,15 @@ const getIsTeamsCall = (state) => state.isTeamsCall;
  * @private
  */
 const Microphone = (props) => {
+    var _a;
     const microphoneButtonProps = usePropsFor$1(MicrophoneButton);
     const callStatus = useSelector$1(getCallStatus);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
     const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(rooms) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(rooms) */
+    const isRoomsCall = adapter.getState().isRoomsCall;
     /**
      * When call is in Lobby, microphone button should be disabled.
      * This is due to to headless limitation where a call can not be muted/unmuted in lobby.
@@ -21983,7 +21960,9 @@ const Microphone = (props) => {
         : {};
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     // tab focus on MicrophoneButton on page load
-    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled })));
+    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled ||
+            props.disabled ||
+            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown') })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -22006,13 +21985,20 @@ const isDisabled$1 = (option) => {
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const ScreenShare = (props) => {
+    var _a;
     const screenShareButtonProps = usePropsFor$1(ScreenShareButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
+    /* @conditional-compile-remove(rooms) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(rooms) */
+    const isRoomsCall = adapter.getState().isRoomsCall;
     const screenShareButtonDisabled = () => {
         /* @conditional-compile-remove(PSTN-calls) */
         return (screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) ? screenShareButtonProps.disabled : isDisabled(props.option);
     };
-    return (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled() || props.disabled, styles: styles })));
+    return (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled() ||
+            props.disabled ||
+            /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'), styles: styles })));
 };
 const isDisabled = (option) => {
     if (option === undefined || option === true || option === false) {
@@ -22257,6 +22243,8 @@ const controlBarStyles = react.memoizeFunction((background) => ({ root: { backgr
  */
 const CallControls = (props) => {
     const options = React.useMemo(() => (typeof props.options === 'boolean' ? {} : props.options), [props.options]);
+    /* @conditional-compile-remove(new-call-control-bar) */
+    const adapter = useAdapter();
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
     const localeStrings = useLocale();
     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
@@ -22301,7 +22289,7 @@ const CallControls = (props) => {
             });
         }
         /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-        if (!isRoomsCallTrampoline()) {
+        if (!isRoomsCallTrampoline(adapter)) {
             items.push({
                 key: 'holdButtonKey',
                 text: localeStrings.component.strings.holdButton.tooltipOffContent,
@@ -22345,17 +22333,9 @@ const CallControls = (props) => {
     const onDismissDialpad = () => {
         setShowDialpad(false);
     };
-    /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
-    let screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
-    /* @conditional-compile-remove(rooms) */
-    screenShareButtonIsEnabled = rolePermissions.screenShare && screenShareButtonIsEnabled;
-    let microphoneButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton);
-    /* @conditional-compile-remove(rooms) */
-    microphoneButtonIsEnabled = rolePermissions.microphoneButton && microphoneButtonIsEnabled;
-    let cameraButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton);
-    /* @conditional-compile-remove(rooms) */
-    cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;
+    const screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
+    const microphoneButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton);
+    const cameraButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton);
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
         /* @conditional-compile-remove(PSTN-calls) */
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
@@ -22377,11 +22357,9 @@ const CallControls = (props) => {
 };
 const isEnabled$2 = (option) => option !== false;
 /** @private */
-const isRoomsCallTrampoline = () => {
-    /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
+const isRoomsCallTrampoline = (adapter) => {
     /* @conditional-compile-remove(rooms) */
-    return !!rolePermissions.role;
+    return adapter.getState().isRoomsCall;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -22799,18 +22777,10 @@ const CommonCallControlBar = (props) => {
     if (options === false) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
-    /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
     const sideButtonsPresent = isEnabled$1(options.peopleButton) || isEnabled$1(options.chatButton) || customButtons['secondary'] !== undefined;
-    let screenShareButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.screenShareButton);
-    /* @conditional-compile-remove(rooms) */
-    screenShareButtonIsEnabled = rolePermissions.screenShare && screenShareButtonIsEnabled;
-    let microphoneButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.microphoneButton);
-    /* @conditional-compile-remove(rooms) */
-    microphoneButtonIsEnabled = rolePermissions.microphoneButton && microphoneButtonIsEnabled;
-    let cameraButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.cameraButton);
-    /* @conditional-compile-remove(rooms) */
-    cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;
+    const screenShareButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.screenShareButton);
+    const microphoneButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.microphoneButton);
+    const cameraButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.cameraButton);
     return (React__default['default'].createElement("div", { ref: controlBarSizeRef },
         React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter }, 
         /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings }))),
@@ -23953,7 +23923,7 @@ const PeoplePaneContent = (props) => {
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = adapter.getState().alternateCallerId;
     const participantListDefaultProps = usePropsFor$1(ParticipantList);
-    const removeButtonAllowed = hasRemoveParticipantsPermissionTrampoline();
+    const removeButtonAllowed = hasRemoveParticipantsPermissionTrampoline(adapter);
     const setDrawerMenuItemsForParticipant = React.useMemo(() => {
         return (participant) => {
             if (participant) {
@@ -24026,9 +23996,10 @@ const createDefaultContextualMenuItems = (participant, strings, onRemoveParticip
 /**
  * @private
  */
-const hasRemoveParticipantsPermissionTrampoline = () => {
+const hasRemoveParticipantsPermissionTrampoline = (adapter) => {
+    var _a;
     /* @conditional-compile-remove(rooms) */
-    return _usePermissions().removeParticipantButton;
+    return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Presenter';
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -24526,29 +24497,27 @@ const DRAG_OPTIONS = {
  * @private
  */
 const ModalLocalAndRemotePIP = (props) => {
-    var _a;
+    var _a, _b;
     const rootStyles = props.hidden ? hiddenStyle : PIPContainerStyle;
     /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(rooms) */
+    const role = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
     const pictureInPictureProps = useSelector$1(localAndRemotePIPSelector);
     const pictureInPictureHandlers = useHandlers();
     const localAndRemotePIP = React.useMemo(() => {
         var _a;
         /* @conditional-compile-remove(rooms) */
-        if (!rolePermissions.cameraButton && ((_a = pictureInPictureProps.dominantRemoteParticipant) === null || _a === void 0 ? void 0 : _a.userId)) {
+        if (role === 'Consumer' && ((_a = pictureInPictureProps.dominantRemoteParticipant) === null || _a === void 0 ? void 0 : _a.userId)) {
             return (React__default['default'].createElement(_RemoteVideoTile, Object.assign({}, pictureInPictureProps.dominantRemoteParticipant, { remoteParticipant: pictureInPictureProps.dominantRemoteParticipant })));
         }
         return React__default['default'].createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers));
-    }, [
-        pictureInPictureProps,
-        pictureInPictureHandlers,
-        /* @conditional-compile-remove(rooms) */ rolePermissions.cameraButton
-    ]);
+    }, [pictureInPictureProps, pictureInPictureHandlers, /* @conditional-compile-remove(rooms) */ role]);
     /* @conditional-compile-remove(rooms) */
-    if (!rolePermissions.cameraButton && !pictureInPictureProps.dominantRemoteParticipant) {
+    if (role === 'Consumer' && !pictureInPictureProps.dominantRemoteParticipant) {
         return null;
     }
-    const modalStylesThemed = react.concatStyleSets(modalStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.modal);
+    const modalStylesThemed = react.concatStyleSets(modalStyle, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.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 }, 
         // Only render LocalAndRemotePIP when this component is NOT hidden because VideoGallery needs to have
@@ -24589,7 +24558,7 @@ const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
  * @private
  */
 const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -24685,16 +24654,16 @@ const CallArrangement = (props) => {
     };
     const drawerContainerStylesValue = React.useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
     /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
+    const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     let canUnmute = true;
     /* @conditional-compile-remove(rooms) */
-    canUnmute = rolePermissions.microphoneButton;
+    canUnmute = role !== 'Consumer' ? true : false;
     let filteredLatestErrors = props.errorBarProps !== false ? props.latestErrors : [];
     /* @conditional-compile-remove(video-background-effects) */
     const isCameraOn = useSelector$1(localVideoSelector).isAvailable;
     /* @conditional-compile-remove(rooms) */
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
-    if (!rolePermissions.cameraButton && props.errorBarProps) {
+    if (role === 'Consumer' && props.errorBarProps) {
         filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
     }
     /* @conditional-compile-remove(video-background-effects) */
@@ -24713,10 +24682,10 @@ const CallArrangement = (props) => {
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React__default['default'].createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
-                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
+                ((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
                         zIndex: CONTROL_BAR_Z_INDEX,
                         padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+                    }) }, isLegacyCallControlEnabled((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: isPeoplePaneOpen, 
                     /* @conditional-compile-remove(one-to-n-calling) */
@@ -24729,7 +24698,7 @@ const CallArrangement = (props) => {
                     onShowVideoEffectsPicker: openVideoEffectsPane, 
                     /* @conditional-compile-remove(PSTN-calls) */
                     onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar }))))),
-                ((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
+                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */
                         onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
@@ -24738,7 +24707,7 @@ const CallArrangement = (props) => {
                         /* @conditional-compile-remove(close-captions) */
                         isCaptionsSupported: isTeamsCall && hasJoinedCall }))),
                 /* @conditional-compile-remove(PSTN-calls) */
-                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDtmfDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
+                ((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) !== false && showDtmfDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(SendDtmfDialpad, { isMobile: props.mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))),
                 React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
                     React__default['default'].createElement(react.Stack.Item, { style: callCompositeContainerCSS },
@@ -24758,7 +24727,7 @@ const CallArrangement = (props) => {
                         maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$2((_f = props.callControlProps.options) === null || _f === void 0 ? void 0 : _f.participantsButton), onChatButtonClicked: (_g = props.mobileChatTabHeader) === null || _g === void 0 ? void 0 : _g.onClick, disableChatButton: (_h = props.mobileChatTabHeader) === null || _h === void 0 ? void 0 : _h.disabled }),
+                            isDisabled$2((_g = props.callControlProps.options) === null || _g === void 0 ? void 0 : _g.participantsButton), onChatButtonClicked: (_h = props.mobileChatTabHeader) === null || _h === void 0 ? void 0 : _h.onClick, disableChatButton: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.disabled }),
                     props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, 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 }))))))));
@@ -24941,21 +24910,27 @@ const remoteVideoViewOptions = {
  * @private
  */
 const MediaGallery = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const videoGalleryProps = usePropsFor$1(VideoGallery);
     const cameraSwitcherCameras = useSelector$1(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers();
     const announcerString = useParticipantChangedAnnouncement();
-    /* @conditional-compile-remove(vertical-gallery) */
+    /* @conditional-compile-remove(rooms) */
+    const adapter = useAdapter();
+    /* @conditional-compile-remove(rooms) */
+    const userRole = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
+    /* @conditional-compile-remove(rooms) */
+    const isRoomsCall = adapter.getState().isRoomsCall;
+    /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */
     const containerRef = React.useRef(null);
-    /* @conditional-compile-remove(vertical-gallery) */
+    /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */
     const containerWidth = _useContainerWidth(containerRef);
-    /* @conditional-compile-remove(vertical-gallery) */
+    /* @conditional-compile-remove(vertical-gallery) */ /* @conditional-compile-remove(rooms) */
     const containerHeight = _useContainerHeight(containerRef);
-    /* @conditional-compile-remove(click-to-call) */
+    /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */
     const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
     const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline(
-    /* @conditional-compile-remove(click-to-call) */ (_a = props.localVideoTileOptions) === null || _a === void 0 ? void 0 : _a.position);
+    /* @conditional-compile-remove(click-to-call) */ (_b = props.localVideoTileOptions) === null || _b === void 0 ? void 0 : _b.position);
     const cameraSwitcherProps = React.useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
@@ -24972,7 +24947,7 @@ const MediaGallery = (props) => {
             : props.isMobile
                 ? { kind: 'drawer', hostId: props.drawerMenuHostId }
                 : { kind: 'contextual' };
-    }, [(_b = props.remoteVideoTileMenuOptions) === null || _b === void 0 ? void 0 : _b.isHidden, props.isMobile, props.drawerMenuHostId]);
+    }, [(_c = props.remoteVideoTileMenuOptions) === null || _c === void 0 ? void 0 : _c.isHidden, props.isMobile, props.drawerMenuHostId]);
     /* @conditional-compile-remove(vertical-gallery) */
     const overflowGalleryPosition = React.useMemo(() => containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
         ? 'VerticalRight'
@@ -24984,24 +24959,30 @@ const MediaGallery = (props) => {
             remoteVideoTileMenuOptions: remoteVideoTileMenuOptions, 
             /* @conditional-compile-remove(vertical-gallery) */
             overflowGalleryPosition: overflowGalleryPosition, 
-            /* @conditional-compile-remove(click-to-call) */
-            localVideoTileSize: props.localVideoTileOptions === false
+            /* @conditional-compile-remove(rooms) */
+            localVideoTileSize: props.localVideoTileOptions === false || userRole === 'Consumer' || (isRoomsCall && userRole === 'Unknown')
                 ? 'hidden'
                 : props.isMobile && containerAspectRatio < 1
                     ? '9:16'
                     : '16:9' })));
     }, [
         videoGalleryProps,
+        layoutBasedOnTilePosition,
         props.isMobile,
         props.onRenderAvatar,
-        onRenderAvatar,
+        /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(click-to-call) */
+        props.localVideoTileOptions,
         cameraSwitcherProps,
-        /* @conditional-compile-remove(pinned-participants) */ remoteVideoTileMenuOptions,
-        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
-        /* @conditional-compile-remove(click-to-call) */ props.localVideoTileOptions,
-        layoutBasedOnTilePosition,
-        /* @conditional-compile-remove(click-to-call) */
-        containerAspectRatio
+        onRenderAvatar,
+        /* @conditional-compile-remove(pinned-participants) */
+        remoteVideoTileMenuOptions,
+        /* @conditional-compile-remove(vertical-gallery) */
+        overflowGalleryPosition,
+        /* @conditional-compile-remove(rooms) */
+        isRoomsCall,
+        /* @conditional-compile-remove(rooms) */
+        userRole,
+        /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ containerAspectRatio
     ]);
     return (React__default['default'].createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React__default['default'].createElement(Announcer$1, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -25552,10 +25533,10 @@ const localVideoViewOptions = {
  * @private
  */
 const LocalDeviceSettings = (props) => {
-    var _a;
+    var _a, _b;
     const theme = useTheme();
     const locale = useLocale();
-    /* @conditional-compile-remove(call-readiness) */
+    /* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(rooms) */
     const adapter = useAdapter();
     const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;
     const cameraLabel = locale.strings.call.cameraLabel;
@@ -25563,16 +25544,16 @@ const LocalDeviceSettings = (props) => {
     const noSpeakersLabel = locale.strings.call.noSpeakersLabel;
     const noCameraLabel = locale.strings.call.noCamerasLabel;
     const noMicLabel = locale.strings.call.noMicrophonesLabel;
+    /* @conditional-compile-remove(rooms) */
+    const role = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
     const cameraPermissionGranted = props.cameraPermissionGranted;
     const micPermissionGranted = props.microphonePermissionGranted;
     let roleCanUseCamera = true;
     let roleCanUseMic = true;
     /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
-    /* @conditional-compile-remove(rooms) */
-    roleCanUseCamera = rolePermissions.cameraButton;
+    roleCanUseCamera = role === 'Consumer' ? false : true;
     /* @conditional-compile-remove(rooms) */
-    roleCanUseMic = rolePermissions.microphoneButton;
+    roleCanUseMic = role === 'Consumer' ? false : true;
     // 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.
@@ -25597,7 +25578,7 @@ const LocalDeviceSettings = (props) => {
             ? props.selectedCamera
                 ? props.selectedCamera.id
                 : props.cameras
-                    ? (_a = props.cameras[0]) === null || _a === void 0 ? void 0 : _a.id
+                    ? (_b = props.cameras[0]) === null || _b === void 0 ? void 0 : _b.id
                     : ''
             : 'deniedOrUnknown', onChange: (event, option, index) => {
             props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOptions);
@@ -26057,7 +26038,7 @@ var __awaiter$7 = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 const ConfigurationPage = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { startCallHandler, mobileView, modalLayerHostId, 
     /* @conditional-compile-remove(call-readiness) */ deviceChecks, 
     /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
@@ -26079,13 +26060,13 @@ const ConfigurationPage = (props) => {
     const environmentInfo = adapter.getState().environmentInfo;
     let disableStartCallButton = !microphonePermissionGranted || ((_a = deviceState.microphones) === null || _a === void 0 ? void 0 : _a.length) === 0;
     /* @conditional-compile-remove(rooms) */
-    const rolePermissions = _usePermissions();
+    const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     /* @conditional-compile-remove(video-background-effects) */
     const isCameraOn = useSelector$1(localVideoSelector).isAvailable;
     let filteredLatestErrors = props.latestErrors;
     /* @conditional-compile-remove(rooms) */
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
-    if (!rolePermissions.cameraButton) {
+    if (role !== 'Consumer') {
         filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari');
     }
     /* @conditional-compile-remove(video-background-effects) */
@@ -26093,7 +26074,7 @@ const ConfigurationPage = (props) => {
         filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');
     }
     /* @conditional-compile-remove(rooms) */
-    if (!rolePermissions.microphoneButton) {
+    if (role === 'Consumer') {
         // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button
         // because microphone device permission is not needed for the user's role
         disableStartCallButton = false;
@@ -26106,7 +26087,7 @@ const ConfigurationPage = (props) => {
             disableStartCallButton = false;
         }
         else if (deviceChecks.camera === 'required') {
-            disableStartCallButton = !cameraPermissionGranted || ((_b = deviceState.cameras) === null || _b === void 0 ? void 0 : _b.length) === 0;
+            disableStartCallButton = !cameraPermissionGranted || ((_c = deviceState.cameras) === null || _c === void 0 ? void 0 : _c.length) === 0;
         }
     }
     const locale = useLocale();
@@ -26114,7 +26095,7 @@ const ConfigurationPage = (props) => {
     const callDescription = locale.strings.call.configurationPageCallDetails && (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
-    mobileWithPreview = mobileWithPreview && rolePermissions.cameraButton;
+    mobileWithPreview = mobileWithPreview && role !== 'Consumer';
     /* @conditional-compile-remove(call-readiness) */
     const permissionsState = {
         // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported
@@ -26196,8 +26177,7 @@ const ConfigurationPage = (props) => {
                 mobileWithPreview && (React__default['default'].createElement(react.Stack.Item, null,
                     title,
                     callDescription)),
-                localPreviewTrampoline(mobileWithPreview, 
-                /* @conditional-compile-remove(rooms) */ !rolePermissions.cameraButton),
+                localPreviewTrampoline(mobileWithPreview, /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
                 React__default['default'].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle },
                     !mobileWithPreview && (React__default['default'].createElement(React__default['default'].Fragment, null,
                         React__default['default'].createElement(react.Stack.Item, { styles: callDetailsContainerStylesDesktop },
@@ -26838,8 +26818,6 @@ const MainScreen = (props) => {
     const locale = useLocale();
     const palette = useTheme().palette;
     const leavePageStyle = React.useMemo(() => leavingPageStyle(palette), [palette]);
-    /* @conditional-compile-remove(rooms) */
-    const role = useSelector$1(getRole);
     let pageElement;
     /* @conditional-compile-remove(rooms) */
     switch (page) {
@@ -26905,13 +26883,7 @@ const MainScreen = (props) => {
     if (!pageElement) {
         throw new Error('Invalid call composite page');
     }
-    /* @conditional-compile-remove(rooms) */
-    const permissions = _getPermissions(role === 'Unknown' || role === undefined ? props.roleHint : role);
-    // default retElement for stable version
-    let retElement = pageElement;
-    /* @conditional-compile-remove(rooms) */
-    retElement = React__default['default'].createElement(_PermissionsProvider, { permissions: permissions }, pageElement);
-    return (React__default['default'].createElement(SidePaneProvider, { sidePaneRenderer: sidePaneRenderer, overrideSidePane: injectedSidePaneProps }, retElement));
+    return (React__default['default'].createElement(SidePaneProvider, { sidePaneRenderer: sidePaneRenderer, overrideSidePane: injectedSidePaneProps }, pageElement));
 };
 /**
  * A customizable UI composite for calling experience.
@@ -26926,19 +26898,18 @@ const CallComposite = (props) => React__default['default'].createElement(CallCom
 /** @private */
 const CallCompositeInner = (props) => {
     const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop' } = props;
-    /* @conditional-compile-remove(rooms) */
-    const roleHint = adapter.getState().roleHint;
     React.useEffect(() => {
         (() => __awaiter$5(void 0, void 0, void 0, function* () {
+            var _a;
             const constrain = getQueryOptions({
-                /* @conditional-compile-remove(rooms) */ role: roleHint
+                /* @conditional-compile-remove(rooms) */ role: (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role
             });
             yield adapter.askDevicePermission(constrain);
             adapter.queryCameras();
             adapter.queryMicrophones();
             adapter.querySpeakers();
         }))();
-    }, [adapter, /* @conditional-compile-remove(rooms) */ roleHint]);
+    }, [adapter]);
     const mobileView = formFactor === 'mobile';
     const modalLayerHostId = reactHooks.useId('modalLayerhost');
     const mainScreenContainerClassName = React.useMemo(() => {
@@ -26947,9 +26918,7 @@ const CallCompositeInner = (props) => {
     return (React__default['default'].createElement("div", { className: mainScreenContainerClassName },
         React__default['default'].createElement(BaseProvider, Object.assign({}, props),
             React__default['default'].createElement(CallAdapterProvider, { adapter: adapter },
-                React__default['default'].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, modalLayerHostId: modalLayerHostId, options: options, 
-                    /* @conditional-compile-remove(rooms) */
-                    roleHint: roleHint, onSidePaneIdChange: props.onSidePaneIdChange, overrideSidePane: props.overrideSidePane, mobileChatTabHeader: props.mobileChatTabHeader }),
+                React__default['default'].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, modalLayerHostId: modalLayerHostId, options: options, onSidePaneIdChange: props.onSidePaneIdChange, overrideSidePane: props.overrideSidePane, mobileChatTabHeader: props.mobileChatTabHeader }),
                 // This layer host is for ModalLocalAndRemotePIP in SidePane. This LayerHost cannot be inside the SidePane
                 // because when the SidePane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging
                 // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.
@@ -27162,7 +27131,9 @@ var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments,
 };
 /** Context of call, which is a centralized context for all state updates */
 class CallContext {
-    constructor(clientState, isTeamsCall, options) {
+    constructor(clientState, isTeamsCall, 
+    /* @conditional-compile-remove(rooms) */
+    isRoomsCall, options) {
         var _a, _b;
         this.emitter = new EventEmitter.EventEmitter();
         this.state = {
@@ -27174,10 +27145,10 @@ class CallContext {
             page: 'configuration',
             latestErrors: clientState.latestErrors,
             isTeamsCall,
+            /* @conditional-compile-remove(rooms) */ isRoomsCall,
             /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: clientState.alternateCallerId,
             /* @conditional-compile-remove(unsupported-browser) */ environmentInfo: clientState.environmentInfo,
             /* @conditional-compile-remove(unsupported-browser) */ unsupportedBrowserVersionsAllowed: false,
-            /* @conditional-compile-remove(rooms) */ roleHint: options === null || options === void 0 ? void 0 : options.roleHint,
             /* @conditional-compile-remove(video-background-effects) */ videoBackgroundImages: options === null || options === void 0 ? void 0 : options.videoBackgroundImages,
             /* @conditional-compile-remove(video-background-effects) */ selectedVideoBackgroundEffect: undefined,
             cameraStatus: undefined
@@ -27323,13 +27294,9 @@ class AzureCommunicationCallAdapter {
         const isTeamsMeeting = 'meetingLink' in this.locator;
         /* @conditional-compile-remove(rooms) */
         const isRoomsCall = 'roomId' in this.locator;
-        /* @conditional-compile-remove(rooms) */
-        // to prevent showing components that depend on role such as local video tile, camera button, etc. in a rooms call
-        // we set the default roleHint as 'Consumer' when roleHint is undefined since it has the lowest level of permissions
-        if (isRoomsCall && (options === null || options === void 0 ? void 0 : options.roleHint) === undefined) {
-            options = Object.assign(Object.assign({}, options), { roleHint: 'Consumer' });
-        }
-        this.context = new CallContext(callClient.getState(), isTeamsMeeting, options);
+        this.context = new CallContext(callClient.getState(), isTeamsMeeting, 
+        /* @conditional-compile-remove(rooms) */ isRoomsCall, 
+        /* @conditional-compile-remove(video-background-effects) */ options);
         this.context.onCallEnded((endCallData) => this.emitter.emit('callEnded', endCallData));
         const onStateChange = (clientState) => {
             var _a, _b;
@@ -28094,7 +28061,7 @@ const useAzureCommunicationCallAdapterGeneric = (args, afterCreate, beforeDispos
     const displayName = 'displayName' in args ? args.displayName : undefined;
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = 'alternateCallerId' in args ? args.alternateCallerId : undefined;
-    /* @conditional-compile-remove(rooms) */
+    /* @conditional-compile-remove(video-background-effects) */
     const options = 'options' in args ? args.options : undefined;
     // State update needed to rerender the parent component when a new adapter is created.
     const [adapter, setAdapter] = React.useState(undefined);
@@ -28135,11 +28102,6 @@ const useAzureCommunicationCallAdapterGeneric = (args, afterCreate, beforeDispos
                 if (!displayName) {
                     throw new Error('Unreachable code, displayName already checked above.');
                 }
-                // This is just the type check to ensure that roleHint is defined.
-                /* @conditional-compile-remove(rooms) */
-                if (options && !('roleHint' in options)) {
-                    throw new Error('Unreachable code, provided a options without roleHint.');
-                }
                 if (creatingAdapterRef.current) {
                     console.warn('Adapter is already being created, please see storybook for more information: https://azure.github.io/communication-ui-library/?path=/story/troubleshooting--page');
                     return;
@@ -28151,7 +28113,7 @@ const useAzureCommunicationCallAdapterGeneric = (args, afterCreate, beforeDispos
                     locator,
                     userId: userId,
                     /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId,
-                    /* @conditional-compile-remove(rooms) */ options
+                    /* @conditional-compile-remove(video-background-effects) */ options
                 }));
             }
             else if (adapterKind === 'Teams') {
@@ -28194,7 +28156,6 @@ const useAzureCommunicationCallAdapterGeneric = (args, afterCreate, beforeDispos
         displayName,
         /* @conditional-compile-remove(PSTN-calls) */
         alternateCallerId,
-        /* @conditional-compile-remove(rooms) */
         /* @conditional-compile-remove(teams-identity-support) */
         options
     ]);
@@ -28304,7 +28265,7 @@ const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, lo
     /* @conditional-compile-remove(unsupported-browser) */
     yield callClient.feature(communicationCalling.Features.DebugInfo).getEnvironmentInfo();
     return new AzureCommunicationCallAdapter(callClient, locator, callAgent, deviceManager, 
-    /* @conditional-compile-remove(rooms) */ options);
+    /* @conditional-compile-remove(video-background-effects) */ options);
 });
 /* @conditional-compile-remove(teams-identity-support) */
 /**
@@ -28544,6 +28505,8 @@ function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState)
         call: callWithChatAdapterState.call,
         devices: callWithChatAdapterState.devices,
         isTeamsCall: callWithChatAdapterState.isTeamsCall,
+        /* @conditional-compile-remove(rooms) */
+        isRoomsCall: callWithChatAdapterState.isRoomsCall,
         latestErrors: callWithChatAdapterState.latestCallErrors,
         /* @conditional-compile-remove(PSTN-calls) */
         alternateCallerId: callWithChatAdapterState.alternateCallerId,
@@ -29034,6 +28997,8 @@ function callWithChatAdapterStateFromBackingStates(callAdapter, chatAdapter) {
         devices: callAdapterState.devices,
         isLocalPreviewMicrophoneEnabled: callAdapterState.isLocalPreviewMicrophoneEnabled,
         isTeamsCall: callAdapterState.isTeamsCall,
+        /* @conditional-compile-remove(rooms) */
+        isRoomsCall: callAdapterState.isRoomsCall,
         latestCallErrors: callAdapterState.latestErrors,
         latestChatErrors: chatAdapterState.latestErrors,
         /* @conditional-compile-remove(file-sharing) */
@@ -29693,7 +29658,7 @@ class AzureCommunicationCallWithChatAdapter {
  */
 const createAzureCommunicationCallWithChatAdapter = ({ userId, displayName, credential, endpoint, locator, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
-/* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(video-background-effects) */ callAdapterOptions }) => __awaiter(void 0, void 0, void 0, function* () {
+/* @conditional-compile-remove(video-background-effects) */ callAdapterOptions }) => __awaiter(void 0, void 0, void 0, function* () {
     const callAdapterLocator = isTeamsMeetingLinkLocator(locator) ? locator : locator.callLocator;
     const createCallAdapterPromise = createAzureCommunicationCallAdapter({
         userId,
@@ -29701,7 +29666,7 @@ const createAzureCommunicationCallWithChatAdapter = ({ userId, displayName, cred
         credential,
         locator: callAdapterLocator,
         /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId,
-        /* @conditional-compile-remove(rooms) */ options: callAdapterOptions
+        /* @conditional-compile-remove(video-background-effects) */ options: callAdapterOptions
     });
     const threadId = isTeamsMeetingLinkLocator(locator)
         ? getChatThreadFromTeamsLink(locator.meetingLink)
@@ -29752,7 +29717,7 @@ afterCreate,
 beforeDispose) => {
     const { credential, displayName, endpoint, locator, userId, 
     /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
-    /* @conditional-compile-remove(rooms) */ callAdapterOptions } = args;
+    /* @conditional-compile-remove(video-background-effects) */ callAdapterOptions } = args;
     // State update needed to rerender the parent component when a new adapter is created.
     const [adapter, setAdapter] = React.useState(undefined);
     // Ref needed for cleanup to access the old adapter created asynchronously.
@@ -29789,7 +29754,7 @@ beforeDispose) => {
                 locator,
                 userId,
                 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId,
-                /* @conditional-compile-remove(rooms) */ callAdapterOptions
+                /* @conditional-compile-remove(video-background-effects) */ callAdapterOptions
             });
             if (afterCreateRef.current) {
                 newAdapter = yield afterCreateRef.current(newAdapter);
@@ -29809,7 +29774,7 @@ beforeDispose) => {
         endpoint,
         locator,
         userId,
-        /* @conditional-compile-remove(rooms) */ callAdapterOptions
+        /* @conditional-compile-remove(video-background-effects) */ callAdapterOptions
     ]);
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {