Skip to content

Commit 61c570d

Browse files
dmceachernmsftcarocao-msft
dmceachernmsft
authored and
carocao-msft
committed
[Vertical Gallery] Storybook updates and API renaming (#2824)
* update storybook page * update API to be overflowGalleryPosition * update control name * Change files * Duplicate change files for beta release * fix nit --------- Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>
1 parent 0ef5dd5 commit 61c570d

17 files changed

Lines changed: 75 additions & 61 deletions

‎change-beta/@azure-communication-react-3ba6164b-1ceb-4e3c-a1f2-43f3ed62c181.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": "Update video gallery storybook page for better context of layouts and galleries. update API for better naming",
4+
"packageName": "@azure/communication-react",
5+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@azure-communication-react-3ba6164b-1ceb-4e3c-a1f2-43f3ed62c181.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": "Update video gallery storybook page for better context of layouts and galleries. update API for better naming",
4+
"packageName": "@azure/communication-react",
5+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2770,7 +2770,7 @@ export interface OptionsDevice {
27702770
}
27712771

27722772
// @beta
2773-
export type OverflowGalleryLayout = 'HorizontalBottom' | 'VerticalRight';
2773+
export type OverflowGalleryPosition = 'HorizontalBottom' | 'VerticalRight';
27742774

27752775
// @public
27762776
export interface ParticipantAddedSystemMessage extends SystemMessageCommon {
@@ -3399,7 +3399,7 @@ export interface VideoGalleryProps {
33993399
onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;
34003400
onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;
34013401
onUnpinParticipant?: (userId: string) => void;
3402-
overflowGalleryLayout?: OverflowGalleryLayout;
3402+
overflowGalleryPosition?: OverflowGalleryPosition;
34033403
pinnedParticipants?: string[];
34043404
remoteParticipants?: VideoGalleryRemoteParticipant[];
34053405
remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ export type {
272272
/* @conditional-compile-remove(pinned-participants) */
273273
export type { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '../../react-components/src';
274274
/* @conditional-compile-remove(vertical-gallery) */
275-
export type { OverflowGalleryLayout } from '../../react-components/src';
275+
export type { OverflowGalleryPosition } from '../../react-components/src';
276276
export * from '../../react-components/src/localization/locales';
277277
export * from '../../react-components/src/theming';
278278
export * from '../../calling-stateful-client/src/index-public';

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1227,7 +1227,7 @@ export interface OptionsDevice {
12271227
}
12281228

12291229
// @beta
1230-
export type OverflowGalleryLayout = 'HorizontalBottom' | 'VerticalRight';
1230+
export type OverflowGalleryPosition = 'HorizontalBottom' | 'VerticalRight';
12311231

12321232
// @public
12331233
export interface ParticipantAddedSystemMessage extends SystemMessageCommon {
@@ -1802,7 +1802,7 @@ export interface VideoGalleryProps {
18021802
onRenderLocalVideoTile?: (localParticipant: VideoGalleryLocalParticipant) => JSX.Element;
18031803
onRenderRemoteVideoTile?: (remoteParticipant: VideoGalleryRemoteParticipant) => JSX.Element;
18041804
onUnpinParticipant?: (userId: string) => void;
1805-
overflowGalleryLayout?: OverflowGalleryLayout;
1805+
overflowGalleryPosition?: OverflowGalleryPosition;
18061806
pinnedParticipants?: string[];
18071807
remoteParticipants?: VideoGalleryRemoteParticipant[];
18081808
remoteVideoTileMenuOptions?: false | VideoTileContextualMenuProps | VideoTileDrawerMenuProps;

‎packages/react-components/src/components/VideoGallery.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ describe('VideoGallery with vertical overflow gallery tests', () => {
442442
);
443443

444444
act(() => {
445-
root.setProps({ layout: 'floatingLocalVideo', overflowGalleryLayout: 'VerticalRight', remoteParticipants });
445+
root.setProps({ layout: 'floatingLocalVideo', overflowGalleryPosition: 'VerticalRight', remoteParticipants });
446446
});
447447
expect(gridTileCount(root)).toBe(1);
448448
expect(root.find(VerticalGallery).exists()).toBe(true);
@@ -476,7 +476,7 @@ describe('VideoGallery with vertical overflow gallery tests', () => {
476476
act(() => {
477477
root.setProps({
478478
layout: 'floatingLocalVideo',
479-
overflowGalleryLayout: 'VerticalRight',
479+
overflowGalleryPosition: 'VerticalRight',
480480
remoteParticipants,
481481
dominantSpeakers: ['remoteScreenSharingParticipant', 'remoteVideoParticipant']
482482
});
@@ -509,7 +509,7 @@ describe('VideoGallery with vertical overflow gallery tests', () => {
509509
act(() => {
510510
root.setProps({
511511
layout: 'floatingLocalVideo',
512-
overflowGalleryLayout: 'VerticalRight',
512+
overflowGalleryPosition: 'VerticalRight',
513513
remoteParticipants,
514514
dominantSpeakers: ['1', '6'],
515515
pinnedParticipants: ['7', '6']

‎packages/react-components/src/components/VideoGallery.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export interface VideoGalleryStyles extends BaseCustomStyles {
149149
*
150150
* @beta
151151
*/
152-
export type OverflowGalleryLayout = 'HorizontalBottom' | 'VerticalRight';
152+
export type OverflowGalleryPosition = 'HorizontalBottom' | 'VerticalRight';
153153

154154
/**
155155
* Props for {@link VideoGallery}.
@@ -242,7 +242,7 @@ export interface VideoGalleryProps {
242242
* Determines the layout of the overflowGallery inside the VideoGallery.
243243
* @defaultValue 'HorizontalBottom'
244244
*/
245-
overflowGalleryLayout?: OverflowGalleryLayout;
245+
overflowGalleryPosition?: OverflowGalleryPosition;
246246
}
247247

248248
/* @conditional-compile-remove(pinned-participants) */
@@ -309,7 +309,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
309309
/* @conditional-compile-remove(pinned-participants) */
310310
remoteVideoTileMenuOptions = DEFAULT_REMOTE_VIDEO_TILE_MENU_OPTIONS,
311311
/* @conditional-compile-remove(vertical-gallery) */
312-
overflowGalleryLayout = 'HorizontalBottom'
312+
overflowGalleryPosition = 'HorizontalBottom'
313313
} = props;
314314

315315
const ids = useIdentifiers();
@@ -555,7 +555,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
555555
parentWidth: containerWidth,
556556
parentHeight: containerHeight,
557557
/* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds: pinnedParticipants,
558-
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
558+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
559559
}),
560560
[
561561
remoteParticipants,
@@ -570,7 +570,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
570570
onRenderRemoteVideoTile,
571571
defaultOnRenderVideoTile,
572572
/* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
573-
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
573+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
574574
]
575575
);
576576

‎packages/react-components/src/components/VideoGallery/DefaultLayout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {
3939
/* @conditional-compile-remove(vertical-gallery) */
4040
parentHeight,
4141
pinnedParticipantUserIds = [],
42-
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom'
42+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom'
4343
} = props;
4444

4545
const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
@@ -111,7 +111,7 @@ export const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {
111111
/* @conditional-compile-remove(vertical-gallery) */
112112
verticalGalleryStyles={styles?.verticalGallery}
113113
/* @conditional-compile-remove(pinned-participants) */
114-
overflowGalleryLayout={overflowGalleryLayout}
114+
overflowGalleryPosition={overflowGalleryPosition}
115115
onFetchTilesToRender={setIndexesToRender}
116116
onChildrenPerPageChange={(n: number) => {
117117
childrenPerPage.current = n;
@@ -123,15 +123,15 @@ export const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {
123123
/* @conditional-compile-remove(vertical-gallery) */ isShort,
124124
overflowGalleryTiles,
125125
styles?.horizontalGallery,
126+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
126127
setIndexesToRender,
127-
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
128128
/* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery
129129
]);
130130

131131
return (
132132
<Stack
133133
/* @conditional-compile-remove(vertical-gallery) */
134-
horizontal={overflowGalleryLayout === 'VerticalRight'}
134+
horizontal={overflowGalleryPosition === 'VerticalRight'}
135135
styles={rootLayoutStyle}
136136
tokens={videoGalleryLayoutGap}
137137
>

‎packages/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
6262
showCameraSwitcherInLocalPreview,
6363
parentWidth,
6464
parentHeight,
65-
pinnedParticipantUserIds = [],
66-
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom'
65+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom',
66+
pinnedParticipantUserIds = []
6767
} = props;
6868

6969
const theme = useTheme();
@@ -131,7 +131,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
131131
return SMALL_FLOATING_MODAL_SIZE_REM;
132132
}
133133
/* @conditional-compile-remove(vertical-gallery) */
134-
if ((overflowGalleryTiles.length > 0 || !!screenShareComponent) && overflowGalleryLayout === 'VerticalRight') {
134+
if ((overflowGalleryTiles.length > 0 || !!screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
135135
return isNarrow
136136
? SMALL_FLOATING_MODAL_SIZE_REM
137137
: isShort
@@ -143,7 +143,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
143143
overflowGalleryTiles.length,
144144
isNarrow,
145145
/* @conditional-compile-remove(vertical-gallery) */ isShort,
146-
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
146+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
147147
/* @conditional-compile-remove(vertical-gallery) */ screenShareComponent
148148
]);
149149

@@ -190,7 +190,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
190190
/* @conditional-compile-remove(vertical-gallery) */
191191
verticalGalleryStyles={styles?.verticalGallery}
192192
/* @conditional-compile-remove(vertical-gallery) */
193-
overflowGalleryLayout={overflowGalleryLayout}
193+
overflowGalleryPosition={overflowGalleryPosition}
194194
onChildrenPerPageChange={(n: number) => {
195195
childrenPerPage.current = n;
196196
}}
@@ -201,9 +201,9 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
201201
/* @conditional-compile-remove(vertical-gallery) */ isShort,
202202
overflowGalleryTiles,
203203
styles?.horizontalGallery,
204+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
204205
setIndexesToRender,
205206
screenShareComponent,
206-
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
207207
/* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery
208208
]);
209209

@@ -213,7 +213,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
213213
<LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
214214
<Stack
215215
/* @conditional-compile-remove(vertical-gallery) */
216-
horizontal={overflowGalleryLayout === 'VerticalRight'}
216+
horizontal={overflowGalleryPosition === 'VerticalRight'}
217217
styles={innerLayoutStyle}
218218
tokens={videoGalleryLayoutGap}
219219
>

‎packages/react-components/src/components/VideoGallery/Layout.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { VideoGalleryRemoteParticipant } from '../../types';
55
import { VideoGalleryStyles } from '../VideoGallery';
66
/* @conditional-compile-remove(vertical-gallery) */
7-
import { OverflowGalleryLayout } from '../VideoGallery';
7+
import { OverflowGalleryPosition } from '../VideoGallery';
88

99
/**
1010
* Props for a layout component
@@ -48,5 +48,5 @@ export interface LayoutProps {
4848
* Determines the layout of the overflowGallery.
4949
* @defaultValue 'HorizontalBottom'
5050
*/
51-
overflowGalleryLayout?: OverflowGalleryLayout;
51+
overflowGalleryPosition?: OverflowGalleryPosition;
5252
}

0 commit comments

Comments
 (0)
⚡