Skip to content

Commit a32fba7

Browse files
dmceachernmsftJamesBurnside
authored and
carocao-msft
committed
[Gallery layouts] Update storybook for gallery layouts (#3616)
* update storybook for gallery layouts * Change files * Duplicate change files for beta release * Update packages/storybook/stories/VideoGallery/VideoGallery.stories.tsx Co-authored-by: James Burnside <2684369+JamesBurnside@users.noreply.github.com> Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> * Update packages/storybook/stories/CallComposite/CallCompositeDocs.tsx Co-authored-by: James Burnside <2684369+JamesBurnside@users.noreply.github.com> Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> * add missing layout to storybook controls * fix prettier * videogallery QOL improvements * move layout state to composite * track overflow gallery position in composite * fix build * large gallery fixes --------- Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> Co-authored-by: James Burnside <2684369+JamesBurnside@users.noreply.github.com>
1 parent e7643a4 commit a32fba7

14 files changed

Lines changed: 267 additions & 26 deletions

‎change-beta/@azure-communication-react-80f39aac-d334-4781-b857-56079cde393e.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "prerelease",
3+
"area": "feature",
4+
"workstream": "Gallery layouts",
5+
"comment": "Introduce storybook docs for gallery layouts",
6+
"packageName": "@azure/communication-react",
7+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
8+
"dependentChangeType": "patch"
9+
}

‎change/@azure-communication-react-80f39aac-d334-4781-b857-56079cde393e.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "prerelease",
3+
"area": "feature",
4+
"workstream": "Gallery layouts",
5+
"comment": "Introduce storybook docs for gallery layouts",
6+
"packageName": "@azure/communication-react",
7+
"email": "94866715+dmceachernmsft@users.noreply.github.com",
8+
"dependentChangeType": "patch"
9+
}

‎packages/react-composites/src/composites/CallComposite/CallComposite.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,15 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
284284
const [sidePaneRenderer, setSidePaneRenderer] = React.useState<SidePaneRenderer | undefined>();
285285
const [injectedSidePaneProps, setInjectedSidePaneProps] = React.useState<InjectedSidePaneProps>();
286286

287+
/* @conditional-compile-remove(gallery-layouts) */
288+
const [userSetGalleryLayout, setUserSetGalleryLayout] = useState<VideoGalleryLayout>(
289+
props.options?.galleryOptions?.layout ?? 'floatingLocalVideo'
290+
);
291+
/* @conditional-compile-remove(gallery-layouts) */
292+
const [userSetOverflowGalleryPosition, setUserSetOverflowGalleryPosition] = useState<'Responsive' | 'HorizontalTop'>(
293+
'Responsive'
294+
);
295+
287296
const overridePropsRef = useRef<InjectedSidePaneProps | undefined>(props.overrideSidePane);
288297
useEffect(() => {
289298
setInjectedSidePaneProps(props.overrideSidePane);
@@ -472,9 +481,13 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
472481
latestErrors={latestErrors}
473482
onDismissError={onDismissError}
474483
/* @conditional-compile-remove(gallery-layouts) */
475-
galleryLayout={
476-
props.options?.galleryOptions?.layout ? props.options.galleryOptions.layout : 'floatingLocalVideo'
477-
}
484+
galleryLayout={userSetGalleryLayout}
485+
/* @conditional-compile-remove(gallery-layouts) */
486+
onUserSetGalleryLayoutChange={setUserSetGalleryLayout}
487+
/* @conditional-compile-remove(gallery-layouts) */
488+
onSetUserSetOverflowGalleryPosition={setUserSetOverflowGalleryPosition}
489+
/* @conditional-compile-remove(gallery-layouts) */
490+
userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}
478491
/* @conditional-compile-remove(capabilities) */
479492
capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}
480493
/>

‎packages/react-composites/src/composites/CallComposite/pages/CallPage.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ import {
1313
/* @conditional-compile-remove(gallery-layouts) */
1414
import { VideoGalleryLayout } from '@internal/react-components';
1515
import React from 'react';
16-
/* @conditional-compile-remove(gallery-layouts) */
17-
import { useState } from 'react';
1816
import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
1917
import { useLocale } from '../../localization';
2018
import { CallCompositeOptions } from '../CallComposite';
@@ -54,6 +52,12 @@ export interface CallPageProps {
5452
galleryLayout: VideoGalleryLayout;
5553
/* @conditional-compile-remove(capabilities) */
5654
capabilitiesChangedNotificationBarProps?: CapabilitiesChangeNotificationBarProps;
55+
/* @conditional-compile-remove(gallery-layouts) */
56+
onUserSetGalleryLayoutChange?: (layout: VideoGalleryLayout) => void;
57+
/* @conditional-compile-remove(gallery-layouts) */
58+
userSetOverflowGalleryPosition?: 'Responsive' | 'HorizontalTop';
59+
/* @conditional-compile-remove(gallery-layouts) */
60+
onSetUserSetOverflowGalleryPosition?: (position: 'Responsive' | 'HorizontalTop') => void;
5761
}
5862

5963
/**
@@ -68,7 +72,13 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
6872
options,
6973
mobileView,
7074
/* @conditional-compile-remove(gallery-layouts) */
71-
galleryLayout = 'floatingLocalVideo'
75+
galleryLayout = 'floatingLocalVideo',
76+
/* @conditional-compile-remove(gallery-layouts) */
77+
onUserSetGalleryLayoutChange,
78+
/* @conditional-compile-remove(gallery-layouts) */
79+
userSetOverflowGalleryPosition = 'Responsive',
80+
/* @conditional-compile-remove(gallery-layouts) */
81+
onSetUserSetOverflowGalleryPosition
7282
} = props;
7383

7484
// To use useProps to get these states, we need to create another file wrapping Call,
@@ -88,13 +98,6 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
8898

8999
const drawerMenuHostId = useId('drawerMenuHost');
90100

91-
/* @conditional-compile-remove(gallery-layouts) */
92-
const [userSetOverflowGalleryPosition, setUserSetOverflowGalleryPosition] = useState<'Responsive' | 'HorizontalTop'>(
93-
'Responsive'
94-
);
95-
/* @conditional-compile-remove(gallery-layouts) */
96-
const [userSetGalleryLayout, setUserSetGalleryLayout] = useState<VideoGalleryLayout>(galleryLayout);
97-
98101
return (
99102
<CallArrangement
100103
id={drawerMenuHostId}
@@ -128,7 +131,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
128131
/* @conditional-compile-remove(gallery-layouts) */
129132
userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}
130133
/* @conditional-compile-remove(gallery-layouts) */
131-
userSetGalleryLayout={userSetGalleryLayout}
134+
userSetGalleryLayout={galleryLayout}
132135
/>
133136
) : (
134137
<NetworkReconnectTile {...networkReconnectTileProps} />
@@ -143,11 +146,11 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
143146
latestErrors={props.latestErrors}
144147
onDismissError={props.onDismissError}
145148
/* @conditional-compile-remove(gallery-layouts) */
146-
onUserSetOverflowGalleryPositionChange={setUserSetOverflowGalleryPosition}
149+
onUserSetOverflowGalleryPositionChange={onSetUserSetOverflowGalleryPosition}
147150
/* @conditional-compile-remove(gallery-layouts) */
148-
onUserSetGalleryLayoutChange={setUserSetGalleryLayout}
151+
onUserSetGalleryLayoutChange={onUserSetGalleryLayoutChange}
149152
/* @conditional-compile-remove(gallery-layouts) */
150-
userSetGalleryLayout={userSetGalleryLayout}
153+
userSetGalleryLayout={galleryLayout}
151154
/* @conditional-compile-remove(capabilities) */
152155
capabilitiesChangedNotificationBarProps={props.capabilitiesChangedNotificationBarProps}
153156
/>

‎packages/react-composites/src/composites/common/ControlBar/DesktopMoreButton.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element =>
300300
}
301301
};
302302
/* @conditional-compile-remove(large-gallery) */
303-
const largeGalleryOptions = {
303+
const largeGalleryOption = {
304304
key: 'largeGallerySelectionKey',
305305
text: localeStrings.strings.call.moreButtonLargeGalleryDefaultLayoutLabel,
306306
canCheck: true,
@@ -319,7 +319,7 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element =>
319319
};
320320

321321
/* @conditional-compile-remove(gallery-layouts) */
322-
const overflowGalleryOptions = {
322+
const overflowGalleryOption = {
323323
key: 'topKey',
324324
text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,
325325
canCheck: true,
@@ -343,10 +343,9 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element =>
343343
}
344344
};
345345
/* @conditional-compile-remove(large-gallery) */
346-
galleryOptions.subMenuProps?.items?.push(largeGalleryOptions);
346+
galleryOptions.subMenuProps?.items?.push(largeGalleryOption);
347347
/* @conditional-compile-remove(gallery-layouts) */
348-
galleryOptions.subMenuProps?.items?.push(overflowGalleryOptions);
349-
348+
galleryOptions.subMenuProps?.items?.push(overflowGalleryOption);
350349
/* @conditional-compile-remove(gallery-layouts) */
351350
moreButtonContextualMenuItems.push(galleryOptions);
352351
}

‎packages/storybook/public/images/callcomposite-dynamic-layout.png‎

25.7 KB
Loading

‎packages/storybook/public/images/callcomposite-focused-content.png‎

505 KB
Loading

‎packages/storybook/public/images/callcomposite-gallery-layout.png‎

24.7 KB
Loading

‎packages/storybook/public/images/callcomposite-speaker-layout.png‎

19.7 KB
Loading

‎packages/storybook/stories/CallComposite/CallCompositeDocs.tsx‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,55 @@ export const Docs: () => JSX.Element = () => {
271271
gallery](./?path=/docs/ui-components-videogallery--video-gallery) component docs for more information on our
272272
local video tile and some of the other options we have for the local video tile when just using the components.
273273
</Description>
274-
274+
<Heading>Customizing the default Gallery Layout</Heading>
275+
<SingleLineBetaBanner />
276+
<Description>
277+
We allow for the customization of the starting layout of the gallery. The layout can be changed by the user
278+
though the gallery options menu found in the more button of the call controls.
279+
</Description>
280+
<Stack horizontal horizontalAlign="space-between" tokens={{ childrenGap: '1rem' }}>
281+
<Stack>
282+
<Stack horizontalAlign="center">
283+
<img
284+
style={{ width: '100%', maxWidth: '25rem' }}
285+
src="images/callcomposite-dynamic-layout.png"
286+
alt="Dynamic layout for composite video gallery"
287+
/>
288+
<Description>Call Composite with `dynamic` layout.</Description>
289+
</Stack>
290+
<Stack horizontalAlign="center">
291+
<img
292+
style={{ width: '100%', maxWidth: '25rem' }}
293+
src="images/callcomposite-focused-content.png"
294+
alt="Focused content layout for composite video gallery"
295+
/>
296+
<Description>Call Composite with `focused content` layout.</Description>
297+
</Stack>
298+
</Stack>
299+
<Stack>
300+
<Stack horizontalAlign="center">
301+
<img
302+
style={{ width: '100%', maxWidth: '25rem' }}
303+
src="images/callcomposite-gallery-layout.png"
304+
alt="Gallery layout for composite video gallery"
305+
/>
306+
<Description>Call Composite with `gallery` layout.</Description>
307+
</Stack>
308+
<Stack horizontalAlign="center">
309+
<img
310+
style={{ width: '100%', maxWidth: '25rem' }}
311+
src="images/callcomposite-speaker-layout.png"
312+
alt="Speaker layout for composite video gallery"
313+
/>
314+
<Description>Call Composite with `speaker` layout.</Description>
315+
</Stack>
316+
</Stack>
317+
</Stack>
318+
<Description>You can set the gallery layout using the following: </Description>
319+
<Source code="<CallComposite options={galleryOptions: {layout: 'speaker'}} />" />
320+
<Source code="<CallComposite options={galleryOptions: {layout: 'default'}} />" />
321+
<Source code="<CallComposite options={galleryOptions: {layout: 'floatingLocalVideo'}} />" />
322+
<Source code="<CallComposite options={galleryOptions: {layout: 'focusedContent'}} />" />
275323
<div ref={refExistedJoinCall}>
276324
<Heading>Joining an existing Call</Heading>
277325
<Description>

0 commit comments

Comments
 (0)
⚡