@azure/communication-react 1.5.1-alpha-202303090014 → 1.5.1-alpha-202303100015
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dist-cjs/communication-react/index.js +95 -27
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.d.ts +2 -0
- package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js +6 -5
- package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js +10 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js +17 -3
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/Layout.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/Layout.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.d.ts +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js +13 -5
- package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.d.ts +8 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js +6 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.d.ts +26 -2
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.js +42 -14
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils/responsive.d.ts +6 -0
- package/dist/dist-esm/react-components/src/components/utils/responsive.js +7 -0
- package/dist/dist-esm/react-components/src/components/utils/responsive.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-
|
|
1
|
+
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202303100015';\n"]}
|
|
@@ -17,6 +17,8 @@ export interface ResponsiveVerticalGalleryProps {
|
|
|
17
17
|
gapHeightRem: number;
|
|
18
18
|
/** Height of the control bar for navigating pages */
|
|
19
19
|
controlBarHeightRem?: number;
|
|
20
|
+
/** container is shorter than 480 px. */
|
|
21
|
+
isShort?: boolean;
|
|
20
22
|
}
|
|
21
23
|
/**
|
|
22
24
|
* Responsive container for the VerticalGallery Component. Performs calculations for number of children
|
|
@@ -5,7 +5,7 @@ import { _convertRemToPx } from "../../../acs-ui-common/src";
|
|
|
5
5
|
import React, { useRef } from 'react';
|
|
6
6
|
import { _useContainerHeight } from './utils/responsive';
|
|
7
7
|
import { VerticalGallery } from './VerticalGallery';
|
|
8
|
-
import { VERTICAL_GALLERY_TILE_SIZE_REM } from './VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles';
|
|
8
|
+
import { SHORT_VERTICAL_GALLERY_TILE_SIZE_REM, VERTICAL_GALLERY_TILE_SIZE_REM } from './VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles';
|
|
9
9
|
/**
|
|
10
10
|
* Responsive container for the VerticalGallery Component. Performs calculations for number of children
|
|
11
11
|
* for the VerticalGallery
|
|
@@ -14,7 +14,7 @@ import { VERTICAL_GALLERY_TILE_SIZE_REM } from './VideoGallery/styles/VideoGalle
|
|
|
14
14
|
* @beta
|
|
15
15
|
*/
|
|
16
16
|
export const ResponsiveVerticalGallery = (props) => {
|
|
17
|
-
const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem } = props;
|
|
17
|
+
const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort } = props;
|
|
18
18
|
const containerRef = useRef(null);
|
|
19
19
|
const containerHeight = _useContainerHeight(containerRef);
|
|
20
20
|
const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
|
|
@@ -23,7 +23,8 @@ export const ResponsiveVerticalGallery = (props) => {
|
|
|
23
23
|
numberOfChildren: React.Children.count(children),
|
|
24
24
|
containerHeight: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding,
|
|
25
25
|
gapHeightRem,
|
|
26
|
-
controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2
|
|
26
|
+
controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
|
|
27
|
+
isShort: isShort !== null && isShort !== void 0 ? isShort : false
|
|
27
28
|
});
|
|
28
29
|
return (React.createElement("div", { ref: containerRef, className: mergeStyles(containerStyles) },
|
|
29
30
|
React.createElement(VerticalGallery, { childrenPerPage: childrenPerPage, styles: verticalGalleryStyles }, children)));
|
|
@@ -32,8 +33,8 @@ export const ResponsiveVerticalGallery = (props) => {
|
|
|
32
33
|
* Helper function to find the number of children for the VerticalGallery on each page.
|
|
33
34
|
*/
|
|
34
35
|
const calculateChildrenPerPage = (args) => {
|
|
35
|
-
const { numberOfChildren, containerHeight, gapHeightRem, controlBarHeight } = args;
|
|
36
|
-
const childMinHeightPx = _convertRemToPx(VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);
|
|
36
|
+
const { numberOfChildren, containerHeight, gapHeightRem, controlBarHeight, isShort } = args;
|
|
37
|
+
const childMinHeightPx = _convertRemToPx(isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight);
|
|
37
38
|
const gapHeightPx = _convertRemToPx(gapHeightRem);
|
|
38
39
|
const controlBarHeightPx = _convertRemToPx(controlBarHeight);
|
|
39
40
|
/** First check how many children can fit in containerHeight.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,mCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAyB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,
|
|
1
|
+
{"version":3,"file":"ResponsiveVerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveVerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useRef } from 'react';\nimport { _useContainerHeight } from './utils/responsive';\nimport { VerticalGallery, VerticalGalleryStyles } from './VerticalGallery';\nimport {\n SHORT_VERTICAL_GALLERY_TILE_SIZE_REM,\n VERTICAL_GALLERY_TILE_SIZE_REM\n} from './VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Props for the Responsive wrapper of the VerticalGallery component\n *\n * @beta\n */\nexport interface ResponsiveVerticalGalleryProps {\n /** Video tiles to be rendered in the Vertical Gallery */\n children: React.ReactNode;\n /** Styles for the Children space container */\n containerStyles: IStyle;\n /** Styles for the VerticalGallery component */\n verticalGalleryStyles: VerticalGalleryStyles;\n /** Height of the gap in between the video tiles */\n gapHeightRem: number;\n /** Height of the control bar for navigating pages */\n controlBarHeightRem?: number;\n /** container is shorter than 480 px. */\n isShort?: boolean;\n}\n\n/**\n * Responsive container for the VerticalGallery Component. Performs calculations for number of children\n * for the VerticalGallery\n * @param props\n *\n * @beta\n */\nexport const ResponsiveVerticalGallery = (props: ResponsiveVerticalGalleryProps): JSX.Element => {\n const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const containerHeight = _useContainerHeight(containerRef);\n\n const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;\n const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;\n\n const childrenPerPage = calculateChildrenPerPage({\n numberOfChildren: React.Children.count(children),\n containerHeight: (containerHeight ?? 0) - topPadding - bottomPadding,\n gapHeightRem,\n controlBarHeight: controlBarHeightRem ?? 2,\n isShort: isShort ?? false\n });\n return (\n <div ref={containerRef} className={mergeStyles(containerStyles)}>\n <VerticalGallery childrenPerPage={childrenPerPage} styles={verticalGalleryStyles}>\n {children}\n </VerticalGallery>\n </div>\n );\n};\n\n/**\n * Helper function to find the number of children for the VerticalGallery on each page.\n */\nconst calculateChildrenPerPage = (args: {\n numberOfChildren: number;\n containerHeight: number;\n gapHeightRem: number;\n controlBarHeight: number;\n isShort: boolean;\n}): number => {\n const { numberOfChildren, containerHeight, gapHeightRem, controlBarHeight, isShort } = args;\n\n const childMinHeightPx = _convertRemToPx(\n isShort ? SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight : VERTICAL_GALLERY_TILE_SIZE_REM.minHeight\n );\n const gapHeightPx = _convertRemToPx(gapHeightRem);\n const controlBarHeightPx = _convertRemToPx(controlBarHeight);\n\n /** First check how many children can fit in containerHeight.\n *\n * _________________\n * | |\n * | |\n * |________________|\n * _________________\n * | |\n * | |\n * |________________|\n *\n * < n/m >\n *\n * number of children = container height - (2* gap height + button height) / childMinHeight\n *\n * we want to find the maximum number of children at the smallest size we can fit in the gallery and then resize them\n * to fill in the space as much as possible\n *\n * First we will find the max number of children without any controls we can fit.\n */\n\n const maxNumberOfChildrenInContainer = Math.floor((containerHeight + gapHeightPx) / (childMinHeightPx + gapHeightPx));\n // if all of the children fit in the container just return the number of children\n if (numberOfChildren <= maxNumberOfChildrenInContainer) {\n return maxNumberOfChildrenInContainer;\n }\n\n /**\n * For the pagination we know the container height, the height of the button bar and the 2 times the gap\n * height, top tile and bottom tile above control bar. So the child space is calculated as:\n *\n * space = height - controlbar - (2 * gap)\n */\n const childSpace = containerHeight - controlBarHeightPx - 2 * gapHeightPx;\n\n /**\n * Now that we have the childrenSpace height we can figure out how many Children can fir in the childrenSpace.\n * childrenSpace = n * childHeightMin + (n - 1) * gapHeight. isolate n and take the floor.\n *\n * We want to always return at least one video tile if there are children present.So we take the max.\n */\n return Math.max(Math.floor((childSpace + gapHeightPx) / (childMinHeightPx + gapHeightPx)), 1);\n};\n\"../../../acs-ui-common/src\""]}
|
|
@@ -4,6 +4,8 @@ import { Stack } from '@fluentui/react';
|
|
|
4
4
|
import React, { useMemo } from 'react';
|
|
5
5
|
import { GridLayout } from '../GridLayout';
|
|
6
6
|
import { isNarrowWidth } from '../utils/responsive';
|
|
7
|
+
/* @conditional-compile-remove(vertical-gallery) */
|
|
8
|
+
import { isShortHeight } from '../utils/responsive';
|
|
7
9
|
import { rootLayoutStyle } from './styles/DefaultLayout.styles';
|
|
8
10
|
import { videoGalleryLayoutGap } from './styles/Layout.styles';
|
|
9
11
|
import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
|
|
@@ -16,9 +18,13 @@ import { OverflowGallery } from './OverflowGallery';
|
|
|
16
18
|
*/
|
|
17
19
|
export const DefaultLayout = (props) => {
|
|
18
20
|
const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth,
|
|
21
|
+
/* @conditional-compile-remove(vertical-gallery) */
|
|
22
|
+
parentHeight,
|
|
19
23
|
/* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
|
|
20
24
|
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
|
|
21
25
|
const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
|
|
26
|
+
/* @conditional-compile-remove(vertical-gallery) */
|
|
27
|
+
const isShort = parentHeight ? isShortHeight(parentHeight) : false;
|
|
22
28
|
const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
|
|
23
29
|
remoteParticipants,
|
|
24
30
|
dominantSpeakers,
|
|
@@ -46,13 +52,16 @@ export const DefaultLayout = (props) => {
|
|
|
46
52
|
if (horizontalGalleryTiles.length === 0) {
|
|
47
53
|
return null;
|
|
48
54
|
}
|
|
49
|
-
return (React.createElement(OverflowGallery, { isNarrow: isNarrow,
|
|
55
|
+
return (React.createElement(OverflowGallery, { isNarrow: isNarrow,
|
|
56
|
+
/* @conditional-compile-remove(vertical-gallery) */
|
|
57
|
+
isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
|
|
50
58
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
51
59
|
veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
|
|
52
60
|
/* @conditional-compile-remove(pinned-participants) */
|
|
53
61
|
overflowGalleryLayout: overflowGalleryLayout }));
|
|
54
62
|
}, [
|
|
55
63
|
isNarrow,
|
|
64
|
+
/* @conditional-compile-remove(vertical-gallery) */ isShort,
|
|
56
65
|
horizontalGalleryTiles,
|
|
57
66
|
styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
|
|
58
67
|
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AASpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;IACtE,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,WAAW;IACX,sDAAsD,CAAC,wBAAwB;IAC/E,mDAAmD,CAAC,qBAAqB,GAAG,kBAAkB,EAC/F,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElE,MAAM,EAAE,gBAAgB,EAAE,6BAA6B,EAAE,GAAG,wBAAwB,CAAC;QACnF,kBAAkB;QAClB,gBAAgB;QAChB,qBAAqB;QACrB,mBAAmB,EAAE,CAAC,CAAC,oBAAoB;QAC3C,sDAAsD,CAAC,wBAAwB;KAChF,CAAC,CAAC;IAEH,IAAI,kBAAkB,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QAC3C,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,sBAAsB,GAAG,6BAA6B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;;QACrE,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC5E,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,mBAAmB,EAAE;QACvB,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACrC;IAED,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC,EAAE;YACvC,OAAO,IAAI,CAAC;SACb;QACD,OAAO,CACL,oBAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid and horizontal gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n parentWidth,\n /* @conditional-compile-remove(vertical-gallery) */\n parentHeight,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom'\n } = props;\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n /* @conditional-compile-remove(vertical-gallery) */\n const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n if (localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const overflowGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0) {\n return null;\n }\n return (\n <OverflowGallery\n isNarrow={isNarrow}\n /* @conditional-compile-remove(vertical-gallery) */\n isShort={isShort}\n shouldFloatLocalVideo={false}\n overflowGalleryElements={horizontalGalleryTiles}\n horizontalGalleryStyles={styles?.horizontalGallery}\n /* @conditional-compile-remove(vertical-gallery) */\n veritcalGalleryStyles={styles?.verticalGallery}\n /* @conditional-compile-remove(pinned-participants) */\n overflowGalleryLayout={overflowGalleryLayout}\n />\n );\n }, [\n isNarrow,\n /* @conditional-compile-remove(vertical-gallery) */ isShort,\n horizontalGalleryTiles,\n styles?.horizontalGallery,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,\n /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery\n ]);\n\n return (\n <Stack\n /* @conditional-compile-remove(vertical-gallery) */\n horizontal={overflowGalleryLayout === 'VerticalRight'}\n styles={rootLayoutStyle}\n tokens={videoGalleryLayoutGap}\n >\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {overflowGallery}\n </Stack>\n );\n};\n"]}
|
package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js
CHANGED
|
@@ -6,10 +6,12 @@ import React, { useMemo } from 'react';
|
|
|
6
6
|
import { useTheme } from '../../theming';
|
|
7
7
|
import { GridLayout } from '../GridLayout';
|
|
8
8
|
import { isNarrowWidth } from '../utils/responsive';
|
|
9
|
+
/* @conditional-compile-remove(vertical-gallery) */
|
|
10
|
+
import { isShortHeight } from '../utils/responsive';
|
|
9
11
|
import { FloatingLocalVideo } from './FloatingLocalVideo';
|
|
10
12
|
import { LARGE_FLOATING_MODAL_SIZE_PX, localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX, SMALL_FLOATING_MODAL_SIZE_PX } from './styles/FloatingLocalVideo.styles';
|
|
11
13
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
12
|
-
import { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './styles/FloatingLocalVideo.styles';
|
|
14
|
+
import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './styles/FloatingLocalVideo.styles';
|
|
13
15
|
import { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
|
|
14
16
|
import { videoGalleryLayoutGap } from './styles/Layout.styles';
|
|
15
17
|
import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
|
|
@@ -26,6 +28,8 @@ export const FloatingLocalVideoLayout = (props) => {
|
|
|
26
28
|
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom' } = props;
|
|
27
29
|
const theme = useTheme();
|
|
28
30
|
const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
|
|
31
|
+
/* @conditional-compile-remove(vertical-gallery) */
|
|
32
|
+
const isShort = parentHeight ? isShortHeight(parentHeight) : false;
|
|
29
33
|
const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
|
|
30
34
|
remoteParticipants,
|
|
31
35
|
dominantSpeakers,
|
|
@@ -57,12 +61,17 @@ export const FloatingLocalVideoLayout = (props) => {
|
|
|
57
61
|
}
|
|
58
62
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
59
63
|
if (horizontalGalleryTiles.length > 0 && overflowGalleryLayout === 'VerticalRight') {
|
|
60
|
-
return isNarrow
|
|
64
|
+
return isNarrow
|
|
65
|
+
? SMALL_FLOATING_MODAL_SIZE_PX
|
|
66
|
+
: isShort
|
|
67
|
+
? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX
|
|
68
|
+
: VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
|
|
61
69
|
}
|
|
62
70
|
return LARGE_FLOATING_MODAL_SIZE_PX;
|
|
63
71
|
}, [
|
|
64
72
|
horizontalGalleryTiles.length,
|
|
65
73
|
isNarrow,
|
|
74
|
+
/* @conditional-compile-remove(vertical-gallery) */ isShort,
|
|
66
75
|
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
|
|
67
76
|
]);
|
|
68
77
|
const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
|
|
@@ -75,13 +84,18 @@ export const FloatingLocalVideoLayout = (props) => {
|
|
|
75
84
|
if (horizontalGalleryTiles.length === 0) {
|
|
76
85
|
return null;
|
|
77
86
|
}
|
|
78
|
-
return (React.createElement(OverflowGallery
|
|
87
|
+
return (React.createElement(OverflowGallery
|
|
88
|
+
/* @conditional-compile-remove(vertical-gallery) */
|
|
89
|
+
, {
|
|
90
|
+
/* @conditional-compile-remove(vertical-gallery) */
|
|
91
|
+
isShort: isShort, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: horizontalGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
|
|
79
92
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
80
93
|
veritcalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
|
|
81
94
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
82
95
|
overflowGalleryLayout: overflowGalleryLayout }));
|
|
83
96
|
}, [
|
|
84
97
|
isNarrow,
|
|
98
|
+
/* @conditional-compile-remove(vertical-gallery) */ isShort,
|
|
85
99
|
horizontalGalleryTiles,
|
|
86
100
|
styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
|
|
87
101
|
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
|
package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n LARGE_FLOATING_MODAL_SIZE_PX,\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX,\n SMALL_FLOATING_MODAL_SIZE_PX\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n /**\n * Whether to display the local video camera switcher button\n */\n showCameraSwitcherInLocalPreview?: boolean;\n /**\n * Height of parent element\n */\n parentHeight?: number;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n showCameraSwitcherInLocalPreview,\n parentWidth,\n parentHeight,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom'\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n const localVideoSize = useMemo(() => {\n if (isNarrow) {\n return SMALL_FLOATING_MODAL_SIZE_PX;\n }\n /* @conditional-compile-remove(vertical-gallery) */\n if (horizontalGalleryTiles.length > 0 && overflowGalleryLayout === 'VerticalRight') {\n return isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;\n }\n return LARGE_FLOATING_MODAL_SIZE_PX;\n }, [\n horizontalGalleryTiles.length,\n isNarrow,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout\n ]);\n\n const wrappedLocalVideoComponent =\n localVideoComponent && shouldFloatLocalVideo ? (\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? (\n <Stack\n className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSize), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : horizontalGalleryTiles.length > 0 ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSize))}>\n {localVideoComponent}\n </Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n localVideoSize={localVideoSize}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const overflowGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0) {\n return null;\n }\n return (\n <OverflowGallery\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n overflowGalleryElements={horizontalGalleryTiles}\n horizontalGalleryStyles={styles?.horizontalGallery}\n /* @conditional-compile-remove(vertical-gallery) */\n veritcalGalleryStyles={styles?.verticalGallery}\n /* @conditional-compile-remove(vertical-gallery) */\n overflowGalleryLayout={overflowGalleryLayout}\n />\n );\n }, [\n isNarrow,\n horizontalGalleryTiles,\n styles?.horizontalGallery,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,\n /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery\n ]);\n\n return (\n <Stack styles={rootLayoutStyle}>\n {wrappedLocalVideoComponent}\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n <Stack\n /* @conditional-compile-remove(vertical-gallery) */\n horizontal={overflowGalleryLayout === 'VerticalRight'}\n styles={innerLayoutStyle}\n tokens={videoGalleryLayoutGap}\n >\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {overflowGallery}\n </Stack>\n </Stack>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"FloatingLocalVideoLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { LayerHost, mergeStyles, Stack } from '@fluentui/react';\nimport { useId } from '@fluentui/react-hooks';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { FloatingLocalVideo } from './FloatingLocalVideo';\nimport { LayoutProps } from './Layout';\nimport {\n LARGE_FLOATING_MODAL_SIZE_PX,\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX,\n SMALL_FLOATING_MODAL_SIZE_PX\n} from './styles/FloatingLocalVideo.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport {\n SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX,\n VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX\n} from './styles/FloatingLocalVideo.styles';\nimport { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link FloatingLocalVideoLayout}.\n *\n * @private\n */\nexport interface FloatingLocalVideoLayoutProps extends LayoutProps {\n /**\n * Whether to display the local video camera switcher button\n */\n showCameraSwitcherInLocalPreview?: boolean;\n /**\n * Height of parent element\n */\n parentHeight?: number;\n}\n\n/**\n * FloatingLocalVideoLayout displays remote participants and a screen sharing component in\n * a grid and horizontal gallery while floating the local video\n *\n * @private\n */\nexport const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps): JSX.Element => {\n const {\n remoteParticipants = [],\n dominantSpeakers,\n localVideoComponent,\n screenShareComponent,\n onRenderRemoteParticipant,\n styles,\n maxRemoteVideoStreams,\n showCameraSwitcherInLocalPreview,\n parentWidth,\n parentHeight,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom'\n } = props;\n\n const theme = useTheme();\n\n const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n /* @conditional-compile-remove(vertical-gallery) */\n const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n remoteParticipants,\n dominantSpeakers,\n maxRemoteVideoStreams,\n isScreenShareActive: !!screenShareComponent,\n /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n });\n\n let activeVideoStreams = 0;\n\n const gridTiles = gridParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const shouldFloatLocalVideo = remoteParticipants.length > 0;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n const localVideoSize = useMemo(() => {\n if (isNarrow) {\n return SMALL_FLOATING_MODAL_SIZE_PX;\n }\n /* @conditional-compile-remove(vertical-gallery) */\n if (horizontalGalleryTiles.length > 0 && overflowGalleryLayout === 'VerticalRight') {\n return isNarrow\n ? SMALL_FLOATING_MODAL_SIZE_PX\n : isShort\n ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX\n : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;\n }\n return LARGE_FLOATING_MODAL_SIZE_PX;\n }, [\n horizontalGalleryTiles.length,\n isNarrow,\n /* @conditional-compile-remove(vertical-gallery) */ isShort,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout\n ]);\n\n const wrappedLocalVideoComponent =\n localVideoComponent && shouldFloatLocalVideo ? (\n // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.\n showCameraSwitcherInLocalPreview ? (\n <Stack\n className={mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSize), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : horizontalGalleryTiles.length > 0 ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSize))}>\n {localVideoComponent}\n </Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n localVideoSize={localVideoSize}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const overflowGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0) {\n return null;\n }\n return (\n <OverflowGallery\n /* @conditional-compile-remove(vertical-gallery) */\n isShort={isShort}\n isNarrow={isNarrow}\n shouldFloatLocalVideo={true}\n overflowGalleryElements={horizontalGalleryTiles}\n horizontalGalleryStyles={styles?.horizontalGallery}\n /* @conditional-compile-remove(vertical-gallery) */\n veritcalGalleryStyles={styles?.verticalGallery}\n /* @conditional-compile-remove(vertical-gallery) */\n overflowGalleryLayout={overflowGalleryLayout}\n />\n );\n }, [\n isNarrow,\n /* @conditional-compile-remove(vertical-gallery) */ isShort,\n horizontalGalleryTiles,\n styles?.horizontalGallery,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,\n /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery\n ]);\n\n return (\n <Stack styles={rootLayoutStyle}>\n {wrappedLocalVideoComponent}\n <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />\n <Stack\n /* @conditional-compile-remove(vertical-gallery) */\n horizontal={overflowGalleryLayout === 'VerticalRight'}\n styles={innerLayoutStyle}\n tokens={videoGalleryLayoutGap}\n >\n {screenShareComponent ? (\n screenShareComponent\n ) : (\n <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n {gridTiles}\n </GridLayout>\n )}\n {overflowGallery}\n </Stack>\n </Stack>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/Layout.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { VideoGalleryRemoteParticipant } from '../../types';\nimport { VideoGalleryStyles } from '../VideoGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { OverflowGalleryLayout } from '../VideoGallery';\n\n/**\n * Props for a layout component\n *\n * @private\n */\nexport interface LayoutProps {\n /**\n * Styles for the {@link DefaultLayout}\n */\n styles?: Omit<VideoGalleryStyles, 'root'>;\n /** List of remote video particpants */\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /** Callback to render each remote participant */\n onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;\n /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n dominantSpeakers?: string[];\n /** Component that contains local video content */\n localVideoComponent?: JSX.Element;\n /** Component that contains screen share content */\n screenShareComponent?: JSX.Element;\n /**\n * Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n */\n maxRemoteVideoStreams?: number;\n /**\n * Width of parent element\n */\n parentWidth?: number;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * List of pinned participant userIds\n */\n pinnedParticipantUserIds?: string[];\n /* @conditional-compile-remove(vertical-gallery) */\n /**\n * Determines the layout of the overflowGallery.\n * @defaultValue 'HorizontalBottom'\n */\n overflowGalleryLayout?: OverflowGalleryLayout;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/Layout.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { VideoGalleryRemoteParticipant } from '../../types';\nimport { VideoGalleryStyles } from '../VideoGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { OverflowGalleryLayout } from '../VideoGallery';\n\n/**\n * Props for a layout component\n *\n * @private\n */\nexport interface LayoutProps {\n /**\n * Styles for the {@link DefaultLayout}\n */\n styles?: Omit<VideoGalleryStyles, 'root'>;\n /** List of remote video particpants */\n remoteParticipants?: VideoGalleryRemoteParticipant[];\n /** Callback to render each remote participant */\n onRenderRemoteParticipant: (participant: VideoGalleryRemoteParticipant, isVideoParticipant?: boolean) => JSX.Element;\n /** List of dominant speaker userIds in the order of their dominance. 0th index is the most dominant. */\n dominantSpeakers?: string[];\n /** Component that contains local video content */\n localVideoComponent?: JSX.Element;\n /** Component that contains screen share content */\n screenShareComponent?: JSX.Element;\n /**\n * Maximum number of participant remote video streams that is rendered.\n * @defaultValue 4\n */\n maxRemoteVideoStreams?: number;\n /**\n * Width of parent element\n */\n parentWidth?: number;\n /**\n * Height of parent element\n */\n parentHeight?: number;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * List of pinned participant userIds\n */\n pinnedParticipantUserIds?: string[];\n /* @conditional-compile-remove(vertical-gallery) */\n /**\n * Determines the layout of the overflowGallery.\n * @defaultValue 'HorizontalBottom'\n */\n overflowGalleryLayout?: OverflowGalleryLayout;\n}\n"]}
|
|
@@ -10,6 +10,7 @@ import { OverflowGalleryLayout } from '../VideoGallery';
|
|
|
10
10
|
export declare const OverflowGallery: (props: {
|
|
11
11
|
shouldFloatLocalVideo?: boolean;
|
|
12
12
|
isNarrow?: boolean;
|
|
13
|
+
isShort?: boolean;
|
|
13
14
|
overflowGalleryElements?: JSX.Element[];
|
|
14
15
|
horizontalGalleryStyles?: HorizontalGalleryStyles;
|
|
15
16
|
veritcalGalleryStyles?: VerticalGalleryStyles;
|
|
@@ -17,31 +17,39 @@ import { verticalGalleryContainerStyle, verticalGalleryStyle } from './styles/Vi
|
|
|
17
17
|
* @private
|
|
18
18
|
*/
|
|
19
19
|
export const OverflowGallery = (props) => {
|
|
20
|
-
const { shouldFloatLocalVideo = false, isNarrow = false,
|
|
20
|
+
const { shouldFloatLocalVideo = false, isNarrow = false,
|
|
21
|
+
/* @conditional-compile-remove(vertical-gallery) */
|
|
22
|
+
isShort = false, overflowGalleryElements, horizontalGalleryStyles,
|
|
21
23
|
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom',
|
|
22
24
|
/* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles } = props;
|
|
23
25
|
const containerStyles = useMemo(() => {
|
|
24
26
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
25
27
|
if (overflowGalleryLayout === 'VerticalRight') {
|
|
26
|
-
return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
|
|
28
|
+
return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);
|
|
27
29
|
}
|
|
28
30
|
return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
|
|
29
|
-
}, [
|
|
31
|
+
}, [
|
|
32
|
+
shouldFloatLocalVideo,
|
|
33
|
+
/* @conditional-compile-remove(vertical-gallery) */ isShort,
|
|
34
|
+
isNarrow,
|
|
35
|
+
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout
|
|
36
|
+
]);
|
|
30
37
|
const galleryStyles = useMemo(() => {
|
|
31
38
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
32
39
|
if (overflowGalleryLayout === 'VerticalRight') {
|
|
33
|
-
return concatStyleSets(verticalGalleryStyle, veritcalGalleryStyles);
|
|
40
|
+
return concatStyleSets(verticalGalleryStyle(isShort), veritcalGalleryStyles);
|
|
34
41
|
}
|
|
35
42
|
return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);
|
|
36
43
|
}, [
|
|
37
44
|
isNarrow,
|
|
45
|
+
/* @conditional-compile-remove(vertical-gallery) */ isShort,
|
|
38
46
|
horizontalGalleryStyles,
|
|
39
47
|
/* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,
|
|
40
48
|
/* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles
|
|
41
49
|
]);
|
|
42
50
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
43
51
|
if (overflowGalleryLayout === 'VerticalRight') {
|
|
44
|
-
return (React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP }, overflowGalleryElements));
|
|
52
|
+
return (React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort }, overflowGalleryElements));
|
|
45
53
|
}
|
|
46
54
|
/* @conditional-compile-remove(pinned-participants) */
|
|
47
55
|
if (isNarrow) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,mDAAmD;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAK7G,sDAAsD;AACtD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EACL,+BAA+B,EAC/B,sBAAsB,EACtB,sCAAsC,EACtC,sCAAsC,EACvC,MAAM,yDAAyD,CAAC;AACjE,mDAAmD;AACnD,OAAO,EACL,6BAA6B,EAC7B,oBAAoB,EACrB,MAAM,uDAAuD,CAAC;AAE/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/OverflowGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { HorizontalGalleryStyles } from '../HorizontalGallery';\nimport { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { VerticalGalleryStyles } from '../VerticalGallery';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { OverflowGalleryLayout } from '../VideoGallery';\n/* @conditional-compile-remove(pinned-participants) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport {\n horizontalGalleryContainerStyle,\n horizontalGalleryStyle,\n LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM\n} from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport {\n verticalGalleryContainerStyle,\n verticalGalleryStyle\n} from './styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}\n *\n * @private\n */\nexport const OverflowGallery = (props: {\n shouldFloatLocalVideo?: boolean;\n isNarrow?: boolean;\n /* @conditional-compile-remove(vertical-gallery) */\n isShort?: boolean;\n overflowGalleryElements?: JSX.Element[];\n horizontalGalleryStyles?: HorizontalGalleryStyles;\n /* @conditional-compile-remove(vertical-gallery) */\n veritcalGalleryStyles?: VerticalGalleryStyles;\n /* @conditional-compile-remove(vertical-gallery) */\n overflowGalleryLayout?: OverflowGalleryLayout;\n}): JSX.Element => {\n const {\n shouldFloatLocalVideo = false,\n isNarrow = false,\n /* @conditional-compile-remove(vertical-gallery) */\n isShort = false,\n overflowGalleryElements,\n horizontalGalleryStyles,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout = 'HorizontalBottom',\n /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles\n } = props;\n\n const containerStyles = useMemo(() => {\n /* @conditional-compile-remove(vertical-gallery) */\n if (overflowGalleryLayout === 'VerticalRight') {\n return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n }\n return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n }, [\n shouldFloatLocalVideo,\n /* @conditional-compile-remove(vertical-gallery) */ isShort,\n isNarrow,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout\n ]);\n\n const galleryStyles = useMemo(() => {\n /* @conditional-compile-remove(vertical-gallery) */\n if (overflowGalleryLayout === 'VerticalRight') {\n return concatStyleSets(verticalGalleryStyle(isShort), veritcalGalleryStyles);\n }\n return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n }, [\n isNarrow,\n /* @conditional-compile-remove(vertical-gallery) */ isShort,\n horizontalGalleryStyles,\n /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryLayout,\n /* @conditional-compile-remove(vertical-gallery) */ veritcalGalleryStyles\n ]);\n\n /* @conditional-compile-remove(vertical-gallery) */\n if (overflowGalleryLayout === 'VerticalRight') {\n return (\n <ResponsiveVerticalGallery\n key=\"responsive-vertical-gallery\"\n containerStyles={containerStyles}\n verticalGalleryStyles={galleryStyles as VerticalGalleryStyles}\n controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapHeightRem={HORIZONTAL_GALLERY_GAP}\n isShort={isShort}\n >\n {overflowGalleryElements}\n </ResponsiveVerticalGallery>\n );\n }\n\n /* @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n return <ScrollableHorizontalGallery horizontalGalleryElements={overflowGalleryElements} />;\n }\n\n return (\n <ResponsiveHorizontalGallery\n key=\"responsive-horizontal-gallery\"\n containerStyles={containerStyles}\n horizontalGalleryStyles={galleryStyles}\n childWidthRem={\n isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width\n }\n buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapWidthRem={HORIZONTAL_GALLERY_GAP}\n >\n {overflowGalleryElements}\n </ResponsiveHorizontalGallery>\n );\n};\n"]}
|
|
@@ -23,6 +23,14 @@ export declare const LARGE_FLOATING_MODAL_SIZE_PX: {
|
|
|
23
23
|
width: number;
|
|
24
24
|
height: number;
|
|
25
25
|
};
|
|
26
|
+
/**
|
|
27
|
+
* Vertical gallery floating modal width and height in rem
|
|
28
|
+
* Aspect ratio: 16:9
|
|
29
|
+
*/
|
|
30
|
+
export declare const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX: {
|
|
31
|
+
width: number;
|
|
32
|
+
height: number;
|
|
33
|
+
};
|
|
26
34
|
/**
|
|
27
35
|
* Vertical gallery floating modal width and height in rem
|
|
28
36
|
* Aspect ratio: 16:9
|
|
@@ -25,7 +25,12 @@ export const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
|
|
|
25
25
|
* Vertical gallery floating modal width and height in rem
|
|
26
26
|
* Aspect ratio: 16:9
|
|
27
27
|
*/
|
|
28
|
-
export const
|
|
28
|
+
export const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 144, height: 81 };
|
|
29
|
+
/**
|
|
30
|
+
* Vertical gallery floating modal width and height in rem
|
|
31
|
+
* Aspect ratio: 16:9
|
|
32
|
+
*/
|
|
33
|
+
export const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 176, height: 100 };
|
|
29
34
|
/**
|
|
30
35
|
* @private
|
|
31
36
|
* z-index to ensure that the local video tile is above the video gallery.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,eAAe,EAOf,WAAW,EAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAGnD;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAE9G;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAiB;IACtD,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;CACjF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAExE;;;GAGG;AACH,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n concatStyleSets,\n IButtonStyles,\n IModalStyleProps,\n IModalStyles,\n IStackStyles,\n IStyle,\n IStyleFunctionOrObject,\n mergeStyles,\n Theme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_PX = { width: 58, height: 104 };\n\n/**\n * Large floating modal width and height in rem for large screen\n * Aspect ratio: 16:9\n */\nexport const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 144, height: 81 };\n\n/**\n * Vertical gallery floating modal width and height in rem\n * Aspect ratio: 16:9\n */\nexport const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 176, height: 100 };\n/**\n * @private\n * z-index to ensure that the local video tile is above the video gallery.\n */\nexport const LOCAL_VIDEO_TILE_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyle = (\n theme: Theme,\n localVideoTileSize: { width: number; height: number }\n): IStyle => {\n return {\n minWidth: _pxToRem(localVideoTileSize.width),\n minHeight: _pxToRem(localVideoTileSize.height),\n position: 'absolute',\n bottom: _pxToRem(localVideoTileOuterPaddingPX),\n borderRadius: theme.effects.roundedCorner4,\n overflow: 'hidden',\n right: _pxToRem(localVideoTileOuterPaddingPX)\n };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (\n theme: Theme,\n localVideoTileSize: { width: number; height: number }\n): IStackStyles => {\n return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSize), {\n root: { boxShadow: theme.effects.elevation8 }\n });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n theme: Theme,\n modalSize: { width: number; height: number }\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n return concatStyleSets(\n {\n main: localVideoTileContainerStyle(theme, modalSize)\n },\n {\n main: {\n boxShadow: theme.effects.elevation8,\n ':focus-within': {\n boxShadow: theme.effects.elevation16,\n border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`\n }\n }\n },\n localVideoModalStyles\n );\n};\n\n/**\n * Padding equal to the amount the modal should stay inside the bounds of the container.\n * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.\n * @private\n */\nexport const localVideoTileOuterPaddingPX = 8;\n\n/**\n * @private\n */\nexport const floatingLocalVideoTileStyle: VideoTileStylesProps = {\n root: {\n position: 'absolute',\n zIndex: LOCAL_VIDEO_TILE_ZINDEX,\n height: '100%',\n width: '100%'\n }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme): IButtonStyles => {\n return {\n root: {\n position: 'absolute',\n width: _pxToRem(32),\n height: _pxToRem(32),\n right: '0rem',\n top: '0rem',\n color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n zIndex: 2, // shows the button directly over the local video feed.\n background: 'rgba(0,0,0,0.4)',\n borderRadius: theme.effects.roundedCorner2\n },\n rootFocused: {\n // styles to remove the unwanted white highlight and blue colour after tapping on button.\n color: '#FFFFFF',\n background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n },\n icon: {\n paddingLeft: _pxToRem(3),\n paddingRight: _pxToRem(3),\n margin: 0\n },\n flexContainer: {\n paddingBottom: _pxToRem(8)\n }\n };\n};\n\n/**\n * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video\n * @private\n */\nexport const localVideoModalStyles: Partial<IModalStyles> = {\n keyboardMoveIconContainer: {\n zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.\n }\n};\n\"../../../../../acs-ui-common/src\""]}
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
import { IStyle } from '@fluentui/react';
|
|
2
2
|
import { VerticalGalleryStyles } from '../../VerticalGallery';
|
|
3
|
+
/**
|
|
4
|
+
* VerticalGallery tile size in rem:
|
|
5
|
+
*
|
|
6
|
+
* min - smallest possible size of the tile (90px)
|
|
7
|
+
* max - Largest size we want the vertical tiles (144px)
|
|
8
|
+
*
|
|
9
|
+
* @private
|
|
10
|
+
*/
|
|
11
|
+
export declare const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM: {
|
|
12
|
+
minHeight: number;
|
|
13
|
+
maxHeight: number;
|
|
14
|
+
width: number;
|
|
15
|
+
};
|
|
3
16
|
/**
|
|
4
17
|
* VerticalGallery tile size in rem:
|
|
5
18
|
*
|
|
@@ -21,7 +34,18 @@ export declare const VERTICAL_GALLERY_TILE_SIZE_REM: {
|
|
|
21
34
|
* @param shouldFloatLocalVideo whether rendered in floating layout or not
|
|
22
35
|
* @returns Style set for VerticalGallery container.
|
|
23
36
|
*/
|
|
24
|
-
export declare const verticalGalleryContainerStyle: (shouldFloatLocalVideo: boolean, isNarrow: boolean) => IStyle;
|
|
37
|
+
export declare const verticalGalleryContainerStyle: (shouldFloatLocalVideo: boolean, isNarrow: boolean, isShort: boolean) => IStyle;
|
|
38
|
+
/**
|
|
39
|
+
* @private
|
|
40
|
+
*/
|
|
41
|
+
export declare const SHORT_VERTICAL_GALLERY_TILE_STYLE: {
|
|
42
|
+
minHeight: string;
|
|
43
|
+
minWidth: string;
|
|
44
|
+
maxHeight: string;
|
|
45
|
+
maxWidth: string;
|
|
46
|
+
width: string;
|
|
47
|
+
height: string;
|
|
48
|
+
};
|
|
25
49
|
/**
|
|
26
50
|
* @private
|
|
27
51
|
*/
|
|
@@ -36,5 +60,5 @@ export declare const VERTICAL_GALLERY_TILE_STYLE: {
|
|
|
36
60
|
/**
|
|
37
61
|
* @private
|
|
38
62
|
*/
|
|
39
|
-
export declare const verticalGalleryStyle: VerticalGalleryStyles;
|
|
63
|
+
export declare const verticalGalleryStyle: (isShort: boolean) => VerticalGalleryStyles;
|
|
40
64
|
//# sourceMappingURL=VideoGalleryResponsiveVerticalGallery.styles.d.ts.map
|