Skip to content

Commit 8bb2ff8

Browse files
prabhjot-msftgithub-actions[bot]dmceachernmsft
authored
Stablize Pinning layouts and rendering options (#3394)
* Stablize Pinning layouts and rendering options * Change files * Duplicate change files for beta release * Update packages/react-composites CallComposite browser test snapshots * rename props * Stablize Pinning * Minor changes * Update packages/react-composites CallComposite browser test snapshots --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>
1 parent 225d650 commit 8bb2ff8

35 files changed

Lines changed: 152 additions & 31 deletions

File tree

‎change-beta/@azure-communication-react-9a04e371-cd36-43ab-b99a-bfc55df8702f.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "Stablize Pinning layouts and rendering options",
4+
"packageName": "@azure/communication-react",
5+
"email": "97124699+prabhjot-msft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@azure-communication-react-9a04e371-cd36-43ab-b99a-bfc55df8702f.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "Stablize Pinning layouts and rendering options",
4+
"packageName": "@azure/communication-react",
5+
"email": "97124699+prabhjot-msft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎common/config/babel/.babelrc.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,6 @@ process.env['COMMUNICATION_REACT_FLAVOR'] !== 'beta' &&
5454
'unsupported-browser',
5555
// Support Calling SDK isReceiving flag, shows a loading spinner on the video tile when isAvailable is true but isReceiving is false
5656
'video-stream-is-receiving-flag',
57-
// Pinned Participants
58-
'pinned-participants',
5957
// Feature to show the total number of participants in a call (currently in beta in calling SDK, hence this must be conditionally compiled)
6058
'total-participant-count',
6159
// feature for tracking environment info API different than unsupported browser. stable use of environment info affects other components possibly sooner
@@ -101,6 +99,8 @@ process.env['COMMUNICATION_REACT_FLAVOR'] !== 'beta' &&
10199
// Demo feature. Used in live-documentation of conditional compilation.
102100
// Do not use in production code.
103101
'stabilizedDemo',
102+
// Pinned Participants
103+
'pinned-participants'
104104
]
105105
}
106106
]);

‎packages/calling-stateful-client/review/stable/calling-stateful-client.api.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,10 @@ export interface RemoteVideoStreamState {
200200
id: number;
201201
isAvailable: boolean;
202202
mediaStreamType: MediaStreamType;
203+
streamSize?: {
204+
width: number;
205+
height: number;
206+
};
203207
view?: VideoStreamRendererViewState;
204208
}
205209

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -593,7 +593,7 @@ export type CallCompositeOptions = {
593593
}) => void;
594594
onNetworkingTroubleShootingClick?: () => void;
595595
onEnvironmentInfoTroubleshootingClick?: () => void;
596-
remoteVideoTileMenu?: RemoteVideoTileMenuOptions;
596+
remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
597597
localVideoTile?: boolean | LocalVideoTileOptions;
598598
galleryOptions?: {
599599
layout?: VideoGalleryLayout;
@@ -3549,7 +3549,7 @@ export interface RemoteVideoStreamState {
35493549
view?: VideoStreamRendererViewState;
35503550
}
35513551

3552-
// @beta
3552+
// @public
35533553
export interface RemoteVideoTileMenuOptions {
35543554
isHidden?: boolean;
35553555
}
@@ -4095,7 +4095,7 @@ export interface VideoGalleryProps {
40954095
overflowGalleryPosition?: OverflowGalleryPosition;
40964096
pinnedParticipants?: string[];
40974097
remoteParticipants?: VideoGalleryRemoteParticipant[];
4098-
remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
4098+
remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
40994099
remoteVideoViewOptions?: VideoStreamOptions;
41004100
showCameraSwitcherInLocalPreview?: boolean;
41014101
showMuteIndicator?: boolean;
@@ -4178,12 +4178,12 @@ export interface VideoStreamRendererViewState {
41784178
// @public
41794179
export const VideoTile: (props: VideoTileProps) => JSX.Element;
41804180

4181-
// @beta
4181+
// @public
41824182
export interface VideoTileContextualMenuProps {
41834183
kind: 'contextual';
41844184
}
41854185

4186-
// @beta
4186+
// @public
41874187
export interface VideoTileDrawerMenuProps {
41884188
hostId?: string;
41894189
kind: 'drawer';

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { IButtonProps } from '@fluentui/react';
3333
import { IButtonStyles } from '@fluentui/react';
3434
import { IContextualMenuItem } from '@fluentui/react';
3535
import { IContextualMenuItemStyles } from '@fluentui/react';
36+
import { IContextualMenuProps } from '@fluentui/react';
3637
import { IContextualMenuStyles } from '@fluentui/react';
3738
import { IMessageBarProps } from '@fluentui/react';
3839
import { IPersonaStyleProps } from '@fluentui/react';
@@ -377,6 +378,7 @@ export type CallCompositeIcons = {
377378
export type CallCompositeOptions = {
378379
errorBar?: boolean;
379380
callControls?: boolean | CallControlOptions;
381+
remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;
380382
};
381383

382384
// @public
@@ -1520,6 +1522,12 @@ export const DEFAULT_COMPONENT_ICONS: {
15201522
SendBoxSend: JSX.Element;
15211523
SendBoxSendHovered: JSX.Element;
15221524
VideoTileMicOff: JSX.Element;
1525+
VideoTilePinned: JSX.Element;
1526+
VideoTileMoreOptions: JSX.Element;
1527+
VideoTileScaleFit: JSX.Element;
1528+
VideoTileScaleFill: JSX.Element;
1529+
PinParticipant: JSX.Element;
1530+
UnpinParticipant: JSX.Element;
15231531
SplitButtonPrimaryActionCameraOn: JSX.Element;
15241532
SplitButtonPrimaryActionCameraOff: JSX.Element;
15251533
SplitButtonPrimaryActionMicUnmuted: JSX.Element;
@@ -1600,6 +1608,12 @@ export const DEFAULT_COMPOSITE_ICONS: {
16001608
ErrorBarCallVideoRecoveredBySystem: JSX.Element;
16011609
ErrorBarCallVideoStoppedBySystem: JSX.Element;
16021610
MessageResend: JSX.Element;
1611+
VideoTilePinned: JSX.Element;
1612+
VideoTileMoreOptions: JSX.Element;
1613+
VideoTileScaleFit: JSX.Element;
1614+
VideoTileScaleFill: JSX.Element;
1615+
PinParticipant: JSX.Element;
1616+
UnpinParticipant: JSX.Element;
16031617
SplitButtonPrimaryActionCameraOn: JSX.Element;
16041618
SplitButtonPrimaryActionCameraOff: JSX.Element;
16051619
SplitButtonPrimaryActionMicUnmuted: JSX.Element;
@@ -2351,9 +2365,18 @@ export interface RemoteVideoStreamState {
23512365
id: number;
23522366
isAvailable: boolean;
23532367
mediaStreamType: MediaStreamType;
2368+
streamSize?: {
2369+
width: number;
2370+
height: number;
2371+
};
23542372
view?: VideoStreamRendererViewState;
23552373
}
23562374

2375+
// @public
2376+
export interface RemoteVideoTileMenuOptions {
2377+
isHidden?: boolean;
2378+
}
2379+
23572380
// @public
23582381
export const ScreenShareButton: (props: ScreenShareButtonProps) => JSX.Element;
23592382

@@ -2612,10 +2635,14 @@ export interface VideoGalleryProps {
26122635
// @deprecated (undocumented)
26132636
onDisposeRemoteStreamView?: (userId: string) => Promise<void>;
26142637
onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;
2638+
onPinParticipant?: (userId: string) => void;
26152639
onRenderAvatar?: OnRenderAvatarCallback;
26162640
onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;
26172641
onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;
2642+
onUnpinParticipant?: (userId: string) => void;
2643+
pinnedParticipants?: string[];
26182644
remoteParticipants?: VideoGalleryRemoteParticipant[];
2645+
remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
26192646
remoteVideoViewOptions?: VideoStreamOptions;
26202647
showCameraSwitcherInLocalPreview?: boolean;
26212648
showMuteIndicator?: boolean;
@@ -2644,17 +2671,30 @@ export interface VideoGalleryStream {
26442671
isMirrored?: boolean;
26452672
isReceiving?: boolean;
26462673
renderElement?: HTMLElement;
2674+
scalingMode?: ViewScalingMode;
2675+
streamSize?: {
2676+
width: number;
2677+
height: number;
2678+
};
26472679
}
26482680

26492681
// @public
26502682
export interface VideoGalleryStrings {
26512683
displayNamePlaceholder: string;
2684+
fillRemoteParticipantFrame: string;
2685+
fitRemoteParticipantToFrame: string;
26522686
localVideoCameraSwitcherLabel: string;
26532687
localVideoLabel: string;
26542688
localVideoMovementLabel: string;
26552689
localVideoSelectedDescription: string;
2690+
pinnedParticipantAnnouncementAriaLabel: string;
2691+
pinParticipantForMe: string;
2692+
pinParticipantMenuItemAriaLabel: string;
26562693
screenIsBeingSharedMessage: string;
26572694
screenShareLoadingMessage: string;
2695+
unpinnedParticipantAnnouncementAriaLabel: string;
2696+
unpinParticipantForMe: string;
2697+
unpinParticipantMenuItemAriaLabel: string;
26582698
}
26592699

26602700
// @public
@@ -2680,15 +2720,29 @@ export interface VideoStreamRendererViewState {
26802720
// @public
26812721
export const VideoTile: (props: VideoTileProps) => JSX.Element;
26822722

2723+
// @public
2724+
export interface VideoTileContextualMenuProps {
2725+
kind: 'contextual';
2726+
}
2727+
2728+
// @public
2729+
export interface VideoTileDrawerMenuProps {
2730+
hostId?: string;
2731+
kind: 'drawer';
2732+
}
2733+
26832734
// @public
26842735
export interface VideoTileProps {
26852736
children?: React_2.ReactNode;
2737+
contextualMenu?: IContextualMenuProps;
26862738
displayName?: string;
26872739
initialsName?: string;
26882740
isMirrored?: boolean;
26892741
isMuted?: boolean;
2742+
isPinned?: boolean;
26902743
isSpeaking?: boolean;
26912744
noVideoAvailableAriaLabel?: string;
2745+
onLongTouch?: () => void;
26922746
onRenderPlaceholder?: OnRenderAvatarCallback;
26932747
personaMaxSize?: number;
26942748
personaMinSize?: number;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2323,7 +2323,7 @@ export interface VideoGalleryProps {
23232323
overflowGalleryPosition?: OverflowGalleryPosition;
23242324
pinnedParticipants?: string[];
23252325
remoteParticipants?: VideoGalleryRemoteParticipant[];
2326-
remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
2326+
remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
23272327
remoteVideoViewOptions?: VideoStreamOptions;
23282328
showCameraSwitcherInLocalPreview?: boolean;
23292329
showMuteIndicator?: boolean;
@@ -2390,12 +2390,12 @@ export interface VideoStreamOptions {
23902390
// @public
23912391
export const VideoTile: (props: VideoTileProps) => JSX.Element;
23922392

2393-
// @beta
2393+
// @public
23942394
export interface VideoTileContextualMenuProps {
23952395
kind: 'contextual';
23962396
}
23972397

2398-
// @beta
2398+
// @public
23992399
export interface VideoTileDrawerMenuProps {
24002400
hostId?: string;
24012401
kind: 'drawer';

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { IButtonProps } from '@fluentui/react';
88
import { IButtonStyles } from '@fluentui/react';
99
import { IContextualMenuItem } from '@fluentui/react';
1010
import { IContextualMenuItemStyles } from '@fluentui/react';
11+
import { IContextualMenuProps } from '@fluentui/react';
1112
import { IContextualMenuStyles } from '@fluentui/react';
1213
import { IDropdownOption } from '@fluentui/react';
1314
import { IDropdownStyles } from '@fluentui/react';
@@ -426,6 +427,12 @@ export const DEFAULT_COMPONENT_ICONS: {
426427
SendBoxSend: JSX.Element;
427428
SendBoxSendHovered: JSX.Element;
428429
VideoTileMicOff: JSX.Element;
430+
VideoTilePinned: JSX.Element;
431+
VideoTileMoreOptions: JSX.Element;
432+
VideoTileScaleFit: JSX.Element;
433+
VideoTileScaleFill: JSX.Element;
434+
PinParticipant: JSX.Element;
435+
UnpinParticipant: JSX.Element;
429436
SplitButtonPrimaryActionCameraOn: JSX.Element;
430437
SplitButtonPrimaryActionCameraOff: JSX.Element;
431438
SplitButtonPrimaryActionMicUnmuted: JSX.Element;
@@ -1572,10 +1579,14 @@ export interface VideoGalleryProps {
15721579
// @deprecated (undocumented)
15731580
onDisposeRemoteStreamView?: (userId: string) => Promise<void>;
15741581
onDisposeRemoteVideoStreamView?: (userId: string) => Promise<void>;
1582+
onPinParticipant?: (userId: string) => void;
15751583
onRenderAvatar?: OnRenderAvatarCallback;
15761584
onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;
15771585
onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;
1586+
onUnpinParticipant?: (userId: string) => void;
1587+
pinnedParticipants?: string[];
15781588
remoteParticipants?: VideoGalleryRemoteParticipant[];
1589+
remoteVideoTileMenu?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;
15791590
remoteVideoViewOptions?: VideoStreamOptions;
15801591
showCameraSwitcherInLocalPreview?: boolean;
15811592
showMuteIndicator?: boolean;
@@ -1596,17 +1607,30 @@ export interface VideoGalleryStream {
15961607
isMirrored?: boolean;
15971608
isReceiving?: boolean;
15981609
renderElement?: HTMLElement;
1610+
scalingMode?: ViewScalingMode;
1611+
streamSize?: {
1612+
width: number;
1613+
height: number;
1614+
};
15991615
}
16001616

16011617
// @public
16021618
export interface VideoGalleryStrings {
16031619
displayNamePlaceholder: string;
1620+
fillRemoteParticipantFrame: string;
1621+
fitRemoteParticipantToFrame: string;
16041622
localVideoCameraSwitcherLabel: string;
16051623
localVideoLabel: string;
16061624
localVideoMovementLabel: string;
16071625
localVideoSelectedDescription: string;
1626+
pinnedParticipantAnnouncementAriaLabel: string;
1627+
pinParticipantForMe: string;
1628+
pinParticipantMenuItemAriaLabel: string;
16081629
screenIsBeingSharedMessage: string;
16091630
screenShareLoadingMessage: string;
1631+
unpinnedParticipantAnnouncementAriaLabel: string;
1632+
unpinParticipantForMe: string;
1633+
unpinParticipantMenuItemAriaLabel: string;
16101634
}
16111635

16121636
// @public
@@ -1625,15 +1649,29 @@ export interface VideoStreamOptions {
16251649
// @public
16261650
export const VideoTile: (props: VideoTileProps) => JSX.Element;
16271651

1652+
// @public
1653+
export interface VideoTileContextualMenuProps {
1654+
kind: 'contextual';
1655+
}
1656+
1657+
// @public
1658+
export interface VideoTileDrawerMenuProps {
1659+
hostId?: string;
1660+
kind: 'drawer';
1661+
}
1662+
16281663
// @public
16291664
export interface VideoTileProps {
16301665
children?: React_2.ReactNode;
1666+
contextualMenu?: IContextualMenuProps;
16311667
displayName?: string;
16321668
initialsName?: string;
16331669
isMirrored?: boolean;
16341670
isMuted?: boolean;
1671+
isPinned?: boolean;
16351672
isSpeaking?: boolean;
16361673
noVideoAvailableAriaLabel?: string;
1674+
onLongTouch?: () => void;
16371675
onRenderPlaceholder?: OnRenderAvatarCallback;
16381676
personaMaxSize?: number;
16391677
personaMinSize?: number;

0 commit comments

Comments
 (0)
⚡