Skip to content

Commit af40399

Browse files
anjulgarganjulgarg
authored
Participant Item to show Participant States (#2161)
* VideoTile call state * Change files * Update comment * add beta tag to videotilecallstate prop * Update api.md * Updating api.md * Tweak prop name * Update changelog * Tweak prop name * updating api.md * Tweaking types * update changelog * Update api.md * Return participant state from videoGallerySelector and wire it in gallery * Change files * Tweak changelog * Fixing build * Tweaking state conversion logic in videoGallerySelector * Localization for video tile participant state prop * Conditionally remove pstn code from participant item * Update api.md * Update Api.md * resolving PR comments * Change files * Debugging video tile participant state display logic * update api.md * Resolving PR comments * fixing conditional compilation * fixing conditional compilation * fixing conditional compilation * Fixing conditional compilation errors * Change files * Updating types to match video tile participant state * updating api.md * debugging * Change files * Remove duplicate interface * Update locale strings to match figma * Resolving PR comments * Update api.md * Update api.md * Hide menu when participant is connecting or ringing etc. * Updating storybook snapshots
1 parent 9576fb7 commit af40399

18 files changed

Lines changed: 443 additions & 701 deletions

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "videoGallerySelector returns remote participants with a participant state",
4+
"packageName": "@internal/calling-component-bindings",
5+
"email": "anjulgarg@live.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "ParticipantItem can display a participant state using `participantState` prop",
4+
"packageName": "@internal/react-components",
5+
"email": "anjulgarg@live.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@ import { memoizeFnAll, toFlatCommunicationIdentifier } from '@internal/acs-ui-co
99
import { RemoteParticipantState, RemoteVideoStreamState } from '@internal/calling-stateful-client';
1010
import { VideoGalleryRemoteParticipant, VideoGalleryStream } from '@internal/react-components';
1111
import { checkIsSpeaking } from './SelectorUtils';
12-
/* @conditional-compile-remove(one-to-n-calling) */
13-
/* @conditional-compile-remove(PSTN-calls) */
14-
import { VideoGalleryRemoteParticipantState } from '@internal/react-components';
1512

1613
/** @internal */
1714
export const _dominantSpeakersWithFlatId = (dominantSpeakers?: DominantSpeakersInfo): undefined | string[] => {
@@ -102,7 +99,7 @@ export const convertRemoteParticipantToVideoGalleryRemoteParticipant = (
10299
isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,
103100
/* @conditional-compile-remove(one-to-n-calling) */
104101
/* @conditional-compile-remove(PSTN-calls) */
105-
state: convertRemoteParticipantStateToVideoGalleryRemoteParticipantState(state)
102+
state
106103
};
107104
};
108105

@@ -116,29 +113,3 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream: RemoteVideoStreamS
116113
renderElement: stream.view?.target
117114
};
118115
};
119-
120-
/* @conditional-compile-remove(one-to-n-calling) */
121-
/* @conditional-compile-remove(PSTN-calls) */
122-
/**
123-
* We convert the Communication Participant states to simpler states that can be used with VideoTiles/VideoGallery.
124-
*/
125-
const convertRemoteParticipantStateToVideoGalleryRemoteParticipantState = (
126-
state: RemoteParticipantConnectionState
127-
): VideoGalleryRemoteParticipantState | undefined => {
128-
// `Idle` is the first state of the participant.
129-
if (state === 'Idle' || state === 'Connecting') {
130-
return 'Connecting';
131-
}
132-
// `EarlyMedia` is a state when the media is played before a participant connects to the call.
133-
// It occurs immediately after the `Connecting` state.
134-
if (state === 'EarlyMedia' || state === 'Ringing') {
135-
return 'Ringing';
136-
}
137-
if (state === 'Hold') {
138-
return 'Hold';
139-
}
140-
if (state === 'Connected') {
141-
return 'Connected';
142-
}
143-
return;
144-
};

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -553,7 +553,7 @@ export interface CallingTheme {
553553

554554
// @public
555555
export type CallParticipantListParticipant = ParticipantListParticipant & {
556-
state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
556+
state: ParticipantState;
557557
isScreenSharing?: boolean;
558558
isMuted?: boolean;
559559
isSpeaking?: boolean;
@@ -2308,6 +2308,7 @@ export interface ParticipantItemProps {
23082308
onClick?: (props?: ParticipantItemProps) => void;
23092309
onRenderAvatar?: OnRenderAvatarCallback;
23102310
onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;
2311+
participantState?: ParticipantState;
23112312
presence?: PersonaPresence;
23122313
showParticipantOverflowTooltip?: boolean;
23132314
strings?: Partial<ParticipantItemStrings>;
@@ -2321,6 +2322,9 @@ export interface ParticipantItemStrings {
23212322
isMeText: string;
23222323
menuTitle: string;
23232324
mutedIconLabel: string;
2325+
participantStateConnecting?: string;
2326+
participantStateHold?: string;
2327+
participantStateRinging?: string;
23242328
removeButtonLabel: string;
23252329
sharingIconLabel: string;
23262330
}
@@ -2451,6 +2455,9 @@ export type ParticipantsRemovedListener = (event: {
24512455
removedBy: ChatParticipant;
24522456
}) => void;
24532457

2458+
// @public
2459+
export type ParticipantState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
2460+
24542461
// @public
24552462
export type ReadReceiptsBySenderId = {
24562463
[key: string]: {
@@ -2781,12 +2788,9 @@ export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {
27812788
isSpeaking?: boolean;
27822789
screenShareStream?: VideoGalleryStream;
27832790
// @beta
2784-
state?: VideoGalleryRemoteParticipantState;
2791+
state?: ParticipantState;
27852792
}
27862793

2787-
// @beta
2788-
export type VideoGalleryRemoteParticipantState = 'Connecting' | 'Ringing' | 'Connected' | 'Hold';
2789-
27902794
// @public
27912795
export type VideoGallerySelector = (state: CallClientState, props: CallingBaseSelectorProps) => {
27922796
screenShareParticipant: VideoGalleryRemoteParticipant | undefined;
@@ -2848,7 +2852,7 @@ export interface VideoTileProps {
28482852
isSpeaking?: boolean;
28492853
noVideoAvailableAriaLabel?: string;
28502854
onRenderPlaceholder?: OnRenderAvatarCallback;
2851-
participantState?: VideoGalleryRemoteParticipantState;
2855+
participantState?: ParticipantState;
28522856
personaMaxSize?: number;
28532857
personaMinSize?: number;
28542858
renderElement?: JSX.Element | null;

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -506,7 +506,7 @@ export interface CallingTheme {
506506

507507
// @public
508508
export type CallParticipantListParticipant = ParticipantListParticipant & {
509-
state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
509+
state: ParticipantState;
510510
isScreenSharing?: boolean;
511511
isMuted?: boolean;
512512
isSpeaking?: boolean;
@@ -2146,6 +2146,9 @@ export type ParticipantsRemovedListener = (event: {
21462146
removedBy: ChatParticipant;
21472147
}) => void;
21482148

2149+
// @public
2150+
export type ParticipantState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
2151+
21492152
// @public
21502153
export type ReadReceiptsBySenderId = {
21512154
[key: string]: {

‎packages/communication-react/src/index.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ export type {
183183
ParticipantListStyles,
184184
ParticipantMenuItemsCallback,
185185
ParticipantRemovedSystemMessage,
186+
ParticipantState,
186187
ParticipantsButtonContextualMenuStyles,
187188
ParticipantsButtonProps,
188189
ParticipantsButtonStrings,
@@ -233,12 +234,7 @@ export type {
233234
FileMetadata
234235
} from '../../react-components/src';
235236
/* @conditional-compile-remove(PSTN-calls) */
236-
export type {
237-
HoldButtonProps,
238-
HoldButtonStrings,
239-
VideoGalleryRemoteParticipantState,
240-
VideoTileStrings
241-
} from '../../react-components/src';
237+
export type { HoldButtonProps, HoldButtonStrings, VideoTileStrings } from '../../react-components/src';
242238

243239
export * from '../../react-components/src/localization/locales';
244240
export * from '../../react-components/src/theming';

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export interface CallingTheme {
6464

6565
// @public
6666
export type CallParticipantListParticipant = ParticipantListParticipant & {
67-
state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
67+
state: ParticipantState;
6868
isScreenSharing?: boolean;
6969
isMuted?: boolean;
7070
isSpeaking?: boolean;
@@ -1022,6 +1022,7 @@ export interface ParticipantItemProps {
10221022
onClick?: (props?: ParticipantItemProps) => void;
10231023
onRenderAvatar?: OnRenderAvatarCallback;
10241024
onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;
1025+
participantState?: ParticipantState;
10251026
presence?: PersonaPresence;
10261027
showParticipantOverflowTooltip?: boolean;
10271028
strings?: Partial<ParticipantItemStrings>;
@@ -1035,6 +1036,9 @@ export interface ParticipantItemStrings {
10351036
isMeText: string;
10361037
menuTitle: string;
10371038
mutedIconLabel: string;
1039+
participantStateConnecting?: string;
1040+
participantStateHold?: string;
1041+
participantStateRinging?: string;
10381042
removeButtonLabel: string;
10391043
sharingIconLabel: string;
10401044
}
@@ -1131,6 +1135,9 @@ export interface ParticipantsButtonStyles extends ControlBarButtonStyles {
11311135
menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;
11321136
}
11331137

1138+
// @public
1139+
export type ParticipantState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
1140+
11341141
// @internal (undocumented)
11351142
export type _Permissions = {
11361143
cameraButton: boolean;
@@ -1202,7 +1209,7 @@ export const _RemoteVideoTile: React_2.MemoExoticComponent<(props: {
12021209
showMuteIndicator?: boolean | undefined;
12031210
showLabel?: boolean | undefined;
12041211
personaMinSize?: number | undefined;
1205-
state?: VideoGalleryRemoteParticipantState | undefined;
1212+
state?: ParticipantState | undefined;
12061213
}) => JSX.Element>;
12071214

12081215
// @beta (undocumented)
@@ -1397,12 +1404,9 @@ export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {
13971404
isSpeaking?: boolean;
13981405
screenShareStream?: VideoGalleryStream;
13991406
// @beta
1400-
state?: VideoGalleryRemoteParticipantState;
1407+
state?: ParticipantState;
14011408
}
14021409

1403-
// @beta
1404-
export type VideoGalleryRemoteParticipantState = 'Connecting' | 'Ringing' | 'Connected' | 'Hold';
1405-
14061410
// @public
14071411
export interface VideoGalleryStream {
14081412
id?: number;
@@ -1449,7 +1453,7 @@ export interface VideoTileProps {
14491453
isSpeaking?: boolean;
14501454
noVideoAvailableAriaLabel?: string;
14511455
onRenderPlaceholder?: OnRenderAvatarCallback;
1452-
participantState?: VideoGalleryRemoteParticipantState;
1456+
participantState?: ParticipantState;
14531457
personaMaxSize?: number;
14541458
personaMinSize?: number;
14551459
renderElement?: JSX.Element | null;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export interface CallingTheme {
5555

5656
// @public
5757
export type CallParticipantListParticipant = ParticipantListParticipant & {
58-
state: 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
58+
state: ParticipantState;
5959
isScreenSharing?: boolean;
6060
isMuted?: boolean;
6161
isSpeaking?: boolean;
@@ -1082,6 +1082,9 @@ export interface ParticipantsButtonStyles extends ControlBarButtonStyles {
10821082
menuStyles?: Partial<ParticipantsButtonContextualMenuStyles>;
10831083
}
10841084

1085+
// @public
1086+
export type ParticipantState = 'Idle' | 'Connecting' | 'Ringing' | 'Connected' | 'Hold' | 'InLobby' | 'EarlyMedia' | 'Disconnected';
1087+
10851088
// @internal
10861089
export const _PictureInPictureInPicture: (props: _PictureInPictureInPictureProps) => JSX.Element;
10871090

@@ -1131,7 +1134,7 @@ export const _RemoteVideoTile: React_2.MemoExoticComponent<(props: {
11311134
showMuteIndicator?: boolean | undefined;
11321135
showLabel?: boolean | undefined;
11331136
personaMinSize?: number | undefined;
1134-
state?: VideoGalleryRemoteParticipantState | undefined;
1137+
state?: ParticipantState | undefined;
11351138
}) => JSX.Element>;
11361139

11371140
// @public
@@ -1303,9 +1306,6 @@ export interface VideoGalleryRemoteParticipant extends VideoGalleryParticipant {
13031306
screenShareStream?: VideoGalleryStream;
13041307
}
13051308

1306-
// @beta
1307-
export type VideoGalleryRemoteParticipantState = 'Connecting' | 'Ringing' | 'Connected' | 'Hold';
1308-
13091309
// @public
13101310
export interface VideoGalleryStream {
13111311
id?: number;

0 commit comments

Comments
 (0)
⚡