Add capabilities selector to disable camera, microphone and screenshare buttons appropriately

change-beta/@azure-communication-react-18a95ef6-7288-4969-b748-2d14998a1850.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add capabilities selector to disable camera, microphone and screenshare buttons when corresponding capability is not present",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-18a95ef6-7288-4969-b748-2d14998a1850.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add capabilities selector to disable camera, microphone and screenshare buttons when corresponding capability is not present",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/calling-component-bindings/src/baseSelectors.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { DominantSpeakersInfo } from '@azure/communication-calling';
+/* @conditional-compile-remove(capabilities) */
+import { ParticipantCapabilities } from '@azure/communication-calling';
 /* @conditional-compile-remove(unsupported-browser) */
 import { EnvironmentInfo } from '@azure/communication-calling';
 import { ParticipantRole } from '@azure/communication-calling';
@@ -39,6 +41,15 @@ export const getRole = (state: CallClientState, props: CallingBaseSelectorProps)
   return 'Unknown';
 };
 
+/* @conditional-compile-remove(capabilities) */
+/**
+ * @private
+ */
+export const getCapabilites = (
+  state: CallClientState,
+  props: CallingBaseSelectorProps
+): ParticipantCapabilities | undefined => state.calls[props.callId]?.capabilities?.capabilities;
+
 /**
  * @private
  */

packages/calling-component-bindings/src/callControlSelectors.ts

@@ -12,8 +12,8 @@ import {
   getIsScreenSharingOn,
   getLocalVideoStreams
 } from './baseSelectors';
-/* @conditional-compile-remove(rooms) */
-import { getRole } from './baseSelectors';
+/* @conditional-compile-remove(capabilities) */
+import { getCapabilites } from './baseSelectors';
 /* @conditional-compile-remove(PSTN-calls) */
 import { getCallState } from './baseSelectors';
 import { _isPreviewOn } from './utils/callUtils';
@@ -41,11 +41,13 @@ export type MicrophoneButtonSelector = (
  * @public
  */
 export const microphoneButtonSelector: MicrophoneButtonSelector = reselect.createSelector(
-  [getCallExists, getIsMuted, getDeviceManager, /* @conditional-compile-remove(rooms) */ getRole],
-  (callExists, isMuted, deviceManager, /* @conditional-compile-remove(rooms) */ role) => {
+  [getCallExists, getIsMuted, getDeviceManager, /* @conditional-compile-remove(capabilities) */ getCapabilites],
+  (callExists, isMuted, deviceManager, /* @conditional-compile-remove(capabilities) */ capabilities) => {
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.audio : true;
+    /* @conditional-compile-remove(capabilities) */
+    const incapable = capabilities?.muteUnmuteMic.isPresent === false;
     return {
-      disabled: !callExists || !permission || /* @conditional-compile-remove(rooms) */ role === 'Consumer',
+      disabled: !callExists || !permission || /* @conditional-compile-remove(capabilities) */ incapable,
       checked: callExists ? !isMuted : false,
       microphones: deviceManager.microphones,
       speakers: deviceManager.speakers,
@@ -76,18 +78,19 @@ export type CameraButtonSelector = (
  * @public
  */
 export const cameraButtonSelector: CameraButtonSelector = reselect.createSelector(
-  [getLocalVideoStreams, getDeviceManager, /* @conditional-compile-remove(rooms) */ getRole],
-  (localVideoStreams, deviceManager, /* @conditional-compile-remove(rooms) */ role) => {
+  [getLocalVideoStreams, getDeviceManager, /* @conditional-compile-remove(capabilities) */ getCapabilites],
+  (localVideoStreams, deviceManager, /* @conditional-compile-remove(capabilities) */ capabilities) => {
     const previewOn = _isPreviewOn(deviceManager);
     const localVideoFromCall = localVideoStreams?.find((stream) => stream.mediaStreamType === 'Video');
     const permission = deviceManager.deviceAccess ? deviceManager.deviceAccess.video : true;
-
+    /* @conditional-compile-remove(capabilities) */
+    const incapable = capabilities?.turnVideoOnOff.isPresent === false;
     return {
       disabled:
         !deviceManager.selectedCamera ||
         !permission ||
         !deviceManager.cameras.length ||
-        /* @conditional-compile-remove(rooms) */ role === 'Consumer',
+        /* @conditional-compile-remove(capabilities) */ incapable,
       checked: localVideoStreams !== undefined && localVideoStreams.length > 0 ? !!localVideoFromCall : previewOn,
       cameras: deviceManager.cameras,
       selectedCamera: deviceManager.selectedCamera
@@ -118,20 +121,21 @@ export const screenShareButtonSelector: ScreenShareButtonSelector = reselect.cre
   [
     getIsScreenSharingOn,
     /* @conditional-compile-remove(PSTN-calls) */ getCallState,
-    /* @conditional-compile-remove(rooms) */ getRole
+    /* @conditional-compile-remove(capabilities) */ getCapabilites
   ],
   (
     isScreenSharingOn,
     /* @conditional-compile-remove(PSTN-calls) */ callState,
-    /* @conditional-compile-remove(rooms) */ role
+    /* @conditional-compile-remove(capabilities) */ capabilities
   ) => {
+    let disabled: boolean | undefined = undefined;
+    /* @conditional-compile-remove(capabilities) */
+    disabled = disabled || capabilities?.shareScreen.isPresent === false;
+    /* @conditional-compile-remove(PSTN-calls) */
+    disabled = disabled || ['InLobby', 'Connecting'].includes(callState);
     return {
       checked: isScreenSharingOn,
-      /* @conditional-compile-remove(PSTN-calls) */
-      disabled:
-        (callState === 'InLobby' ? true : callState === 'Connecting' ?? false) ||
-        /* @conditional-compile-remove(rooms) */ role === 'Consumer' ||
-        /* @conditional-compile-remove(rooms) */ role === 'Attendee'
+      disabled
     };
   }
 );

packages/react-composites/tests/browser/call/hermetic/fixture.ts

@@ -14,6 +14,10 @@ import type {
 } from '../../../common';
 /* @conditional-compile-remove(teams-identity-support) */
 import type { CallKind, ParticipantRole } from '@azure/communication-calling';
+/* @conditional-compile-remove(capabilities) */
+import type { ParticipantCapabilities } from '@azure/communication-calling';
+/* @conditional-compile-remove(capabilities) */
+import { CapabilitiesCallFeature } from '@internal/calling-stateful-client';
 
 const SERVER_URL = 'http://localhost';
 const APP_DIR = path.join(__dirname, '../../../app/call');
@@ -100,7 +104,9 @@ export function defaultMockCallAdapterState(
       /* @conditional-compile-remove(call-transfer) */
       optimalVideoCount: {
         maxRemoteVideoStreams: 4
-      }
+      },
+      /* @conditional-compile-remove(capabilities) */
+      capabilities: role ? getCapabilitiesFromRole(role) : undefined
     },
     userId: { kind: 'communicationUser', communicationUserId: '1' },
     devices: {
@@ -283,3 +289,87 @@ export const stubLocalCameraName = async (page: Page): Promise<void> => {
     }
   });
 };
+
+/* @conditional-compile-remove(capabilities) */
+const getCapabilitiesFromRole = (role: ParticipantRole): CapabilitiesCallFeature => {
+  switch (role) {
+    case 'Attendee':
+      return {
+        capabilities: attendeeCapabilitiesInRoomsCall
+      };
+    case 'Consumer':
+      return {
+        capabilities: consumerCapabilitiesInRoomsCall
+      };
+    default:
+      return {
+        capabilities: presenterCapabilitiesInRoomsCall
+      };
+  }
+};
+
+/* @conditional-compile-remove(capabilities) */
+const consumerCapabilitiesInRoomsCall: ParticipantCapabilities = {
+  addAcsUser: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  addPhoneNumber: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  addTeamsUser: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  blurBackground: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  hangUpForEveryOne: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  hardMuteParticipants: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  manageLobby: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  muteUnmuteMic: { isPresent: false, reason: 'RoleRestricted' },
+  pstnDialOut: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  raiseHand: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  removeParticipant: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  removeParticipantsSpotlight: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  shareScreen: { isPresent: false, reason: 'RoleRestricted' },
+  softMuteParticipants: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  spotlightParticipant: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  startLiveCaptions: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  stopLiveCaptions: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  turnVideoOnOff: { isPresent: false, reason: 'RoleRestricted' }
+};
+
+/* @conditional-compile-remove(capabilities) */
+const attendeeCapabilitiesInRoomsCall: ParticipantCapabilities = {
+  addAcsUser: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  addPhoneNumber: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  addTeamsUser: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  blurBackground: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  hangUpForEveryOne: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  hardMuteParticipants: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  manageLobby: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  muteUnmuteMic: { isPresent: true, reason: 'Capable' },
+  pstnDialOut: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  raiseHand: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  removeParticipant: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  removeParticipantsSpotlight: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  shareScreen: { isPresent: false, reason: 'RoleRestricted' },
+  softMuteParticipants: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  spotlightParticipant: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  startLiveCaptions: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  stopLiveCaptions: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  turnVideoOnOff: { isPresent: true, reason: 'Capable' }
+};
+
+/* @conditional-compile-remove(capabilities) */
+const presenterCapabilitiesInRoomsCall: ParticipantCapabilities = {
+  addAcsUser: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  addPhoneNumber: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  addTeamsUser: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  blurBackground: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  hangUpForEveryOne: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  hardMuteParticipants: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  manageLobby: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  muteUnmuteMic: { isPresent: true, reason: 'Capable' },
+  pstnDialOut: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  raiseHand: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  removeParticipant: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  removeParticipantsSpotlight: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  shareScreen: { isPresent: true, reason: 'Capable' },
+  softMuteParticipants: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  spotlightParticipant: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  startLiveCaptions: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  stopLiveCaptions: { isPresent: false, reason: 'CapabilityNotApplicableForTheCallType' },
+  turnVideoOnOff: { isPresent: true, reason: 'Capable' }
+};