Added role to selectors (#2419)

* Added role to selectors

* Change files

* Avoid duplicate code

* remove 'Unknown' from Role type in react-components

* Use RemoteParticipantState type from calling

* Fix Role type comment

Co-authored-by: Anjul Garg <anjulgarg@live.com>

Author: mgamis-msft

change/@internal-calling-component-bindings-00117528-831f-4b99-a7cb-98e93037268a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added role to selectors",
+  "packageName": "@internal/calling-component-bindings",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@internal-react-components-e9cd63ce-7fcd-4afb-a8d9-c4cd58eb8088.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added role to CallParticipantListParticipant type",
+  "packageName": "@internal/react-components",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@internal-react-composites-b040d2b8-ef6c-4fa0-955f-6d8d97a20e36.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added getRole selector",
+  "packageName": "@internal/react-composites",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "patch"
+}

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(rooms) */
+import { ParticipantRole } from '@azure/communication-calling';
 import { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';
 import {
   CallClientState,
@@ -25,6 +27,13 @@ export type CallingBaseSelectorProps = {
  */
 export const getDeviceManager = (state: CallClientState): DeviceManagerState => state.deviceManager;
 
+/* @conditional-compile-remove(rooms) */
+/**
+ * @private
+ */
+export const getRole = (state: CallClientState, props: CallingBaseSelectorProps): ParticipantRole | undefined =>
+  state.calls[props.callId]?.role;
+
 /**
  * @private
  */

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

@@ -14,12 +14,15 @@ import {
 import { CallParticipantListParticipant } from '@internal/react-components';
 import { _updateUserDisplayNames } from './utils/callUtils';
 import { memoizedConvertAllremoteParticipants } from './utils/participantListSelectorUtils';
+/* @conditional-compile-remove(rooms) */
+import { memoizedConvertAllremoteParticipantsBeta } from './utils/participantListSelectorUtils';
 import { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';
 
 const convertRemoteParticipantsToParticipantListParticipants = (
   remoteParticipants: RemoteParticipantState[]
 ): CallParticipantListParticipant[] => {
-  return memoizedConvertAllremoteParticipants((memoizeFn) => {
+  /* eslint-disable @typescript-eslint/explicit-function-return-type */
+  const conversionCallback = (memoizeFn) => {
     return (
       remoteParticipants
         // temporarily hiding lobby participants in ACS clients till we can admit users through ACS clients
@@ -36,7 +39,8 @@ const convertRemoteParticipantsToParticipantListParticipants = (
             participant.state,
             participant.isMuted,
             isScreenSharing,
-            participant.isSpeaking
+            participant.isSpeaking,
+            /* @conditional-compile-remove(rooms) */ participant.role
           );
         })
         .sort((a, b) => {
@@ -51,7 +55,10 @@ const convertRemoteParticipantsToParticipantListParticipants = (
           }
         })
     );
-  });
+  };
+  /* @conditional-compile-remove(rooms) */
+  return memoizedConvertAllremoteParticipantsBeta(conversionCallback);
+  return memoizedConvertAllremoteParticipants(conversionCallback);
 };
 
 /**

packages/calling-component-bindings/src/utils/participantListSelectorUtils.ts

@@ -1,9 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+import { RemoteParticipantState } from '@azure/communication-calling';
 import { getIdentifierKind } from '@azure/communication-common';
 import { fromFlatCommunicationIdentifier, memoizeFnAll } from '@internal/acs-ui-common';
 import { CallParticipantListParticipant } from '@internal/react-components';
+/* @conditional-compile-remove(rooms) */
+import { Role } from '@internal/react-components';
 
 /**
  * @private
@@ -12,7 +15,7 @@ export const memoizedConvertAllremoteParticipants = memoizeFnAll(
   (
     userId: string,
     displayName: string | undefined,
-    state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected',
+    state: RemoteParticipantState,
     isMuted: boolean,
     isScreenSharing: boolean,
     isSpeaking: boolean
@@ -31,7 +34,7 @@ export const memoizedConvertAllremoteParticipants = memoizeFnAll(
 const convertRemoteParticipantToParticipantListParticipant = (
   userId: string,
   displayName: string | undefined,
-  state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected',
+  state: RemoteParticipantState,
   isMuted: boolean,
   isScreenSharing: boolean,
   isSpeaking: boolean
@@ -50,3 +53,52 @@ const convertRemoteParticipantToParticipantListParticipant = (
       getIdentifierKind(identifier).kind === 'communicationUser' || getIdentifierKind(identifier).kind === 'phoneNumber'
   };
 };
+
+/* @conditional-compile-remove(rooms) */
+/**
+ * @private
+ */
+export const memoizedConvertAllremoteParticipantsBeta = memoizeFnAll(
+  (
+    userId: string,
+    displayName: string | undefined,
+    state: RemoteParticipantState,
+    isMuted: boolean,
+    isScreenSharing: boolean,
+    isSpeaking: boolean,
+    role: Role
+  ): CallParticipantListParticipant => {
+    return convertRemoteParticipantToParticipantListParticipantBeta(
+      userId,
+      displayName,
+      state,
+      isMuted,
+      isScreenSharing,
+      isSpeaking,
+      role
+    );
+  }
+);
+
+/* @conditional-compile-remove(rooms) */
+const convertRemoteParticipantToParticipantListParticipantBeta = (
+  userId: string,
+  displayName: string | undefined,
+  state: RemoteParticipantState,
+  isMuted: boolean,
+  isScreenSharing: boolean,
+  isSpeaking: boolean,
+  role: Role
+): CallParticipantListParticipant => {
+  return {
+    ...convertRemoteParticipantToParticipantListParticipant(
+      userId,
+      displayName,
+      state,
+      isMuted,
+      isScreenSharing,
+      isSpeaking
+    ),
+    role
+  };
+};

packages/communication-react/review/beta/communication-react.api.md

@@ -653,6 +653,7 @@ export type CallParticipantListParticipant = ParticipantListParticipant & {
     isScreenSharing?: boolean;
     isMuted?: boolean;
     isSpeaking?: boolean;
+    role?: Role;
 };
 
 // @beta
@@ -2695,8 +2696,8 @@ export interface RemoteVideoStreamState {
     view?: VideoStreamRendererViewState;
 }
 
-// @beta (undocumented)
-export type Role = 'Presenter' | 'Attendee' | 'Consumer';
+// @beta
+export type Role = 'Presenter' | 'Attendee' | 'Consumer' | 'Organizer';
 
 // @public
 export const ScreenShareButton: (props: ScreenShareButtonProps) => JSX.Element;

packages/react-components/review/beta/react-components.api.md

@@ -133,6 +133,7 @@ export type CallParticipantListParticipant = ParticipantListParticipant & {
     isScreenSharing?: boolean;
     isMuted?: boolean;
     isSpeaking?: boolean;
+    role?: Role;
 };
 
 // @public
@@ -1344,8 +1345,8 @@ export const _RemoteVideoTile: React_2.MemoExoticComponent<(props: {
     participantState?: ParticipantState | undefined;
 }) => JSX.Element>;
 
-// @beta (undocumented)
-export type Role = 'Presenter' | 'Attendee' | 'Consumer';
+// @beta
+export type Role = 'Presenter' | 'Attendee' | 'Consumer' | 'Organizer';
 
 // @public
 export const ScreenShareButton: (props: ScreenShareButtonProps) => JSX.Element;

packages/react-components/src/permissions/PermissionsProvider.tsx

@@ -90,8 +90,9 @@ export const _usePermissions = (): _Permissions => useContext(PermissionsContext
 
 /**
  * @beta
+ * The role of a call participant.
  */
-export type Role = 'Presenter' | 'Attendee' | 'Consumer';
+export type Role = 'Presenter' | 'Attendee' | 'Consumer' | 'Organizer';
 
 /**
  * @internal

packages/react-components/src/types/ParticipantListParticipant.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+/* @conditional-compile-remove(rooms) */
+import { Role } from '../permissions';
 import { CommunicationParticipant } from './CommunicationParticipant';
 
 /**
@@ -17,6 +19,9 @@ export type CallParticipantListParticipant = ParticipantListParticipant & {
   isMuted?: boolean;
   /** Whether calling participant is speaking */
   isSpeaking?: boolean;
+  /* @conditional-compile-remove(rooms) */
+  /** Role of participant in Rooms call */
+  role?: Role;
 };
 
 /**