Participant Item to show Participant States

change/@internal-calling-component-bindings-1eb745f8-7731-417e-a18f-3c2c53c29eae.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "videoGallerySelector returns remote participants with a participant state",
+  "packageName": "@internal/calling-component-bindings",
+  "email": "anjulgarg@live.com",
+  "dependentChangeType": "patch"
+}

change/@internal-react-components-4dea2b0c-77ea-4855-8137-3991286682fd.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "ParticipantItem can display a participant state using `participantState` prop",
+  "packageName": "@internal/react-components",
+  "email": "anjulgarg@live.com",
+  "dependentChangeType": "patch"
+}

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

@@ -9,9 +9,6 @@ import { memoizeFnAll, toFlatCommunicationIdentifier } from '@internal/acs-ui-co
 import { RemoteParticipantState, RemoteVideoStreamState } from '@internal/calling-stateful-client';
 import { VideoGalleryRemoteParticipant, VideoGalleryStream } from '@internal/react-components';
 import { checkIsSpeaking } from './SelectorUtils';
-/* @conditional-compile-remove(one-to-n-calling) */
-/* @conditional-compile-remove(PSTN-calls) */
-import { VideoGalleryRemoteParticipantState } from '@internal/react-components';
 
 /** @internal */
 export const _dominantSpeakersWithFlatId = (dominantSpeakers?: DominantSpeakersInfo): undefined | string[] => {
@@ -102,7 +99,7 @@ export const convertRemoteParticipantToVideoGalleryRemoteParticipant = (
     isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,
     /* @conditional-compile-remove(one-to-n-calling) */
     /* @conditional-compile-remove(PSTN-calls) */
-    state: convertRemoteParticipantStateToVideoGalleryRemoteParticipantState(state)
+    state
   };
 };
 
@@ -116,29 +113,3 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream: RemoteVideoStreamS
     renderElement: stream.view?.target
   };
 };
-
-/* @conditional-compile-remove(one-to-n-calling) */
-/* @conditional-compile-remove(PSTN-calls) */
-/**
- * We convert the Communication Participant states to simpler states that can be used with VideoTiles/VideoGallery.
- */
-const convertRemoteParticipantStateToVideoGalleryRemoteParticipantState = (
-  state: RemoteParticipantConnectionState
-): VideoGalleryRemoteParticipantState | undefined => {
-  // `Idle` is the first state of the participant.
-  if (state === 'Idle' || state === 'Connecting') {
-    return 'Connecting';
-  }
-  // `EarlyMedia` is a state when the media is played before a participant connects to the call.
-  // It occurs immediately after the `Connecting` state.
-  if (state === 'EarlyMedia' || state === 'Ringing') {
-    return 'Ringing';
-  }
-  if (state === 'Hold') {
-    return 'Hold';
-  }
-  if (state === 'Connected') {
-    return 'Connected';
-  }
-  return;
-};

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

@@ -553,7 +553,7 @@ export interface CallingTheme {
 
 // @public
 export type CallParticipantListParticipant = ParticipantListParticipant & {
-    state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
+    state: ParticipantState;
     isScreenSharing?: boolean;
     isMuted?: boolean;
     isSpeaking?: boolean;
@@ -2306,6 +2306,7 @@ export interface ParticipantItemProps {
     onClick?: (props?: ParticipantItemProps) => void;
     onRenderAvatar?: OnRenderAvatarCallback;
     onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;
+    participantState?: ParticipantState;
     presence?: PersonaPresence;
     showParticipantOverflowTooltip?: boolean;
     strings?: Partial<ParticipantItemStrings>;
@@ -2319,6 +2320,9 @@ export interface ParticipantItemStrings {
     isMeText: string;
     menuTitle: string;
     mutedIconLabel: string;
+    participantStateConnecting: string;
+    participantStateHold: string;
+    participantStateRinging: string;
     removeButtonLabel: string;
     sharingIconLabel: string;
 }
@@ -2449,6 +2453,9 @@ export type ParticipantsRemovedListener = (event: {
     removedBy: ChatParticipant;
 }) => void;
 
+// @public
+export type ParticipantState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
+
 // @public
 export type ReadReceiptsBySenderId = {
     [key: string]: {
@@ -2779,12 +2786,9 @@ export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {
     isSpeaking?: boolean;
     screenShareStream?: VideoGalleryStream;
     // @beta
-    state?: VideoGalleryRemoteParticipantState;
+    state?: ParticipantState;
 }
 
-// @beta
-export type VideoGalleryRemoteParticipantState = 'Connecting' | 'Ringing' | 'Connected' | 'Hold';
-
 // @public
 export type VideoGallerySelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
     screenShareParticipant: VideoGalleryRemoteParticipant | undefined;
@@ -2846,7 +2850,7 @@ export interface VideoTileProps {
     isSpeaking?: boolean;
     noVideoAvailableAriaLabel?: string;
     onRenderPlaceholder?: OnRenderAvatarCallback;
-    participantState?: VideoGalleryRemoteParticipantState;
+    participantState?: ParticipantState;
     personaMaxSize?: number;
     personaMinSize?: number;
     renderElement?: JSX.Element | null;

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

@@ -506,7 +506,7 @@ export interface CallingTheme {
 
 // @public
 export type CallParticipantListParticipant = ParticipantListParticipant & {
-    state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
+    state: ParticipantState;
     isScreenSharing?: boolean;
     isMuted?: boolean;
     isSpeaking?: boolean;
@@ -2145,6 +2145,9 @@ export type ParticipantsRemovedListener = (event: {
     removedBy: ChatParticipant;
 }) => void;
 
+// @public
+export type ParticipantState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
+
 // @public
 export type ReadReceiptsBySenderId = {
     [key: string]: {

packages/communication-react/src/index.ts

@@ -183,6 +183,7 @@ export type {
   ParticipantListStyles,
   ParticipantMenuItemsCallback,
   ParticipantRemovedSystemMessage,
+  ParticipantState,
   ParticipantsButtonContextualMenuStyles,
   ParticipantsButtonProps,
   ParticipantsButtonStrings,
@@ -233,12 +234,7 @@ export type {
   FileMetadata
 } from '../../react-components/src';
 /* @conditional-compile-remove(PSTN-calls) */
-export type {
-  HoldButtonProps,
-  HoldButtonStrings,
-  VideoGalleryRemoteParticipantState,
-  VideoTileStrings
-} from '../../react-components/src';
+export type { HoldButtonProps, HoldButtonStrings, VideoTileStrings } from '../../react-components/src';
 
 export * from '../../react-components/src/localization/locales';
 export * from '../../react-components/src/theming';

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

@@ -64,7 +64,7 @@ export interface CallingTheme {
 
 // @public
 export type CallParticipantListParticipant = ParticipantListParticipant & {
-    state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
+    state: ParticipantState;
     isScreenSharing?: boolean;
     isMuted?: boolean;
     isSpeaking?: boolean;
@@ -1021,6 +1021,7 @@ export interface ParticipantItemProps {
     onClick?: (props?: ParticipantItemProps) => void;
     onRenderAvatar?: OnRenderAvatarCallback;
     onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;
+    participantState?: ParticipantState;
     presence?: PersonaPresence;
     showParticipantOverflowTooltip?: boolean;
     strings?: Partial<ParticipantItemStrings>;
@@ -1034,6 +1035,9 @@ export interface ParticipantItemStrings {
     isMeText: string;
     menuTitle: string;
     mutedIconLabel: string;
+    participantStateConnecting: string;
+    participantStateHold: string;
+    participantStateRinging: string;
     removeButtonLabel: string;
     sharingIconLabel: string;
 }
@@ -1130,6 +1134,9 @@ export interface ParticipantsButtonStyles extends ControlBarButtonStyles {
     menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;
 }
 
+// @public
+export type ParticipantState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
+
 // @internal (undocumented)
 export type _Permissions = {
     cameraButton: boolean;
@@ -1201,7 +1208,7 @@ export const _RemoteVideoTile: React_2.MemoExoticComponent<(props: {
     showMuteIndicator?: boolean | undefined;
     showLabel?: boolean | undefined;
     personaMinSize?: number | undefined;
-    state?: VideoGalleryRemoteParticipantState | undefined;
+    state?: ParticipantState | undefined;
 }) => JSX.Element>;
 
 // @beta (undocumented)
@@ -1396,12 +1403,9 @@ export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {
     isSpeaking?: boolean;
     screenShareStream?: VideoGalleryStream;
     // @beta
-    state?: VideoGalleryRemoteParticipantState;
+    state?: ParticipantState;
 }
 
-// @beta
-export type VideoGalleryRemoteParticipantState = 'Connecting' | 'Ringing' | 'Connected' | 'Hold';
-
 // @public
 export interface VideoGalleryStream {
     id?: number;
@@ -1448,7 +1452,7 @@ export interface VideoTileProps {
     isSpeaking?: boolean;
     noVideoAvailableAriaLabel?: string;
     onRenderPlaceholder?: OnRenderAvatarCallback;
-    participantState?: VideoGalleryRemoteParticipantState;
+    participantState?: ParticipantState;
     personaMaxSize?: number;
     personaMinSize?: number;
     renderElement?: JSX.Element | null;

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

@@ -55,7 +55,7 @@ export interface CallingTheme {
 
 // @public
 export type CallParticipantListParticipant = ParticipantListParticipant & {
-    state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
+    state: ParticipantState;
     isScreenSharing?: boolean;
     isMuted?: boolean;
     isSpeaking?: boolean;
@@ -1081,6 +1081,9 @@ export interface ParticipantsButtonStyles extends ControlBarButtonStyles {
     menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;
 }
 
+// @public
+export type ParticipantState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
+
 // @internal
 export const _PictureInPictureInPicture: (props: _PictureInPictureInPictureProps) => JSX.Element;
 
@@ -1130,7 +1133,7 @@ export const _RemoteVideoTile: React_2.MemoExoticComponent<(props: {
     showMuteIndicator?: boolean | undefined;
     showLabel?: boolean | undefined;
     personaMinSize?: number | undefined;
-    state?: VideoGalleryRemoteParticipantState | undefined;
+    state?: ParticipantState | undefined;
 }) => JSX.Element>;
 
 // @public
@@ -1302,9 +1305,6 @@ export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {
     screenShareStream?: VideoGalleryStream;
 }
 
-// @beta
-export type VideoGalleryRemoteParticipantState = 'Connecting' | 'Ringing' | 'Connected' | 'Hold';
-
 // @public
 export interface VideoGalleryStream {
     id?: number;