@azure/communication-react 1.5.1-alpha-202303230013 → 1.5.1-alpha-202303240013
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/communication-react.d.ts +2 -0
- package/dist/dist-cjs/communication-react/index.js +108 -99
- 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/HorizontalGallery.js +7 -2
- package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.d.ts +0 -1
- package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js +1 -2
- package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js +11 -7
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js +10 -10
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js +2 -2
- 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 +9 -9
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js +15 -15
- 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/ScrollableHorizontalGallery.style.js +2 -2
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.d.ts +4 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.js +8 -7
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.js +4 -7
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.d.ts +0 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.js +5 -4
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js +1 -0
- package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.d.ts +2 -0
- package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js +1 -0
- package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js.map +1 -1
- package/package.json +8 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
|
2
2
|
// Licensed under the MIT license.
|
|
3
3
|
import { mergeStyles } from '@fluentui/react';
|
|
4
|
-
import {
|
|
4
|
+
import { SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
|
|
5
5
|
import { SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, SMALL_HORIZONTAL_GALLERY_TILE_STYLE } from './VideoGalleryResponsiveHorizontalGallery.styles';
|
|
6
6
|
/**
|
|
7
7
|
* @private
|
|
@@ -19,7 +19,7 @@ export const scrollableHorizontalGalleryStyles = {
|
|
|
19
19
|
*/
|
|
20
20
|
export const scrollableHorizontalGalleryContainerStyles = mergeStyles({
|
|
21
21
|
display: 'flex',
|
|
22
|
-
width: `calc(100% - ${
|
|
22
|
+
width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,
|
|
23
23
|
minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
24
24
|
overflow: 'scroll',
|
|
25
25
|
'-ms-overflow-style': 'none',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollableHorizontalGallery.style.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ScrollableHorizontalGallery.style.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EACL,sCAAsC,EACtC,mCAAmC,EACpC,MAAM,kDAAkD,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAiB;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;QAChE,YAAY,EAAE,QAAQ;QACtB,KAAK,EAAE,mCAAmC;KAC3C;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0CAA0C,GAAG,WAAW,CAAC;IACpE,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,eAAe,6BAA6B,CAAC,KAAK,MAAM;IAC/D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,QAAQ;IAClB,oBAAoB,EAAE,MAAM;IAC5B,iBAAiB,EAAE,MAAM;IACzB,qBAAqB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CAC3C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles } from '@fluentui/react';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\nimport {\n SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n} from './VideoGalleryResponsiveHorizontalGallery.styles';\n\n/**\n * @private\n */\nexport const scrollableHorizontalGalleryStyles: IStackStyles = {\n root: {\n width: '100%',\n minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n paddingRight: '0.5rem',\n '> *': SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n }\n};\n\n/**\n * @private\n */\nexport const scrollableHorizontalGalleryContainerStyles = mergeStyles({\n display: 'flex',\n width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,\n minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n overflow: 'scroll',\n '-ms-overflow-style': 'none',\n 'scrollbar-width': 'none',\n '::-webkit-scrollbar': { display: 'none' }\n});\n"]}
|
|
@@ -22,7 +22,8 @@ export declare const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
|
|
|
22
22
|
*/
|
|
23
23
|
export declare const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
|
|
24
24
|
height: number;
|
|
25
|
-
|
|
25
|
+
minWidth: number;
|
|
26
|
+
maxWidth: number;
|
|
26
27
|
};
|
|
27
28
|
/**
|
|
28
29
|
* @private
|
|
@@ -41,5 +42,7 @@ export declare const LARGE_HORIZONTAL_GALLERY_TILE_STYLE: {
|
|
|
41
42
|
minWidth: string;
|
|
42
43
|
maxHeight: string;
|
|
43
44
|
maxWidth: string;
|
|
45
|
+
width: string;
|
|
46
|
+
height: string;
|
|
44
47
|
};
|
|
45
48
|
//# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.styles.d.ts.map
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
|
2
2
|
// Licensed under the MIT license.
|
|
3
|
-
import {
|
|
4
|
-
import { LARGE_FLOATING_MODAL_SIZE_PX, SMALL_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
|
|
3
|
+
import { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
|
|
5
4
|
/**
|
|
6
5
|
* @private
|
|
7
6
|
*/
|
|
@@ -12,8 +11,8 @@ export const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow)
|
|
|
12
11
|
: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
13
12
|
width: shouldFloatLocalVideo
|
|
14
13
|
? isNarrow
|
|
15
|
-
? `calc(100% - ${
|
|
16
|
-
: `calc(100% - ${
|
|
14
|
+
? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`
|
|
15
|
+
: `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`
|
|
17
16
|
: '100%',
|
|
18
17
|
paddingRight: '0.5rem'
|
|
19
18
|
};
|
|
@@ -35,7 +34,7 @@ export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5
|
|
|
35
34
|
* Large horizontal gallery tile size in rem
|
|
36
35
|
* @private
|
|
37
36
|
*/
|
|
38
|
-
export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5,
|
|
37
|
+
export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };
|
|
39
38
|
/**
|
|
40
39
|
* @private
|
|
41
40
|
*/
|
|
@@ -50,8 +49,10 @@ export const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
|
|
|
50
49
|
*/
|
|
51
50
|
export const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
|
|
52
51
|
minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
53
|
-
minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.
|
|
52
|
+
minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth}rem`,
|
|
54
53
|
maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
55
|
-
maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.
|
|
54
|
+
maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,
|
|
55
|
+
width: '100%',
|
|
56
|
+
height: '100%'
|
|
56
57
|
};
|
|
57
58
|
//# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;
|
|
1
|
+
{"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,qBAA8B,EAAE,QAAiB,EAAU,EAAE;IAC3G,OAAO;QACL,SAAS,EAAE,QAAQ;YACjB,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;YACvD,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;QACzD,KAAK,EAAE,qBAAqB;YAC1B,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM;gBAC1D,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM;YAC5D,CAAC,CAAC,MAAM;QACV,YAAY,EAAE,QAAQ;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,QAAiB,EAA2B,EAAE;IACnF,OAAO;QACL,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,mCAAmC;KAC/F,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAElF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAEtG;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;IAC9D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;CAC/D,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { HorizontalGalleryStyles } from '../../HorizontalGallery';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\n\n/**\n * @private\n */\nexport const horizontalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean): IStyle => {\n return {\n minHeight: isNarrow\n ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`\n : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n width: shouldFloatLocalVideo\n ? isNarrow\n ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`\n : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`\n : '100%',\n paddingRight: '0.5rem'\n };\n};\n\n/**\n * @private\n */\nexport const horizontalGalleryStyle = (isNarrow: boolean): HorizontalGalleryStyles => {\n return {\n children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE\n };\n};\n\n/**\n * Small horizontal gallery tile size in rem\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };\n\n/**\n * Large horizontal gallery tile size in rem\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };\n\n/**\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {\n minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,\n maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n/**\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {\n minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth}rem`,\n maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,\n width: '100%',\n height: '100%'\n};\n"]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
|
2
2
|
// Licensed under the MIT license.
|
|
3
|
-
import {
|
|
4
|
-
import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX, SMALL_FLOATING_MODAL_SIZE_PX, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
|
|
3
|
+
import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
|
|
5
4
|
/**
|
|
6
5
|
* VerticalGallery tile size in rem:
|
|
7
6
|
*
|
|
@@ -34,22 +33,20 @@ export const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow, i
|
|
|
34
33
|
return isNarrow && isShort
|
|
35
34
|
? {
|
|
36
35
|
width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
|
|
37
|
-
height: shouldFloatLocalVideo ? `calc(100% - ${
|
|
36
|
+
height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
|
|
38
37
|
paddingBottom: '0.5rem'
|
|
39
38
|
}
|
|
40
39
|
: !isNarrow && isShort
|
|
41
40
|
? {
|
|
42
41
|
width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
|
|
43
42
|
height: shouldFloatLocalVideo
|
|
44
|
-
? `calc(100% - ${
|
|
43
|
+
? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)`
|
|
45
44
|
: '100%',
|
|
46
45
|
paddingBottom: '0.5rem'
|
|
47
46
|
}
|
|
48
47
|
: {
|
|
49
48
|
width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
|
|
50
|
-
height: shouldFloatLocalVideo
|
|
51
|
-
? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
|
|
52
|
-
: '100%',
|
|
49
|
+
height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
|
|
53
50
|
paddingBottom: '0.5rem'
|
|
54
51
|
};
|
|
55
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoGalleryResponsiveVerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;
|
|
1
|
+
{"version":3,"file":"VideoGalleryResponsiveVerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,OAAO,EACL,8CAA8C,EAC9C,6BAA6B,EAC7B,wCAAwC,EACzC,MAAM,6BAA6B,CAAC;AAErC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AAEjG;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAE5F;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,qBAA8B,EAC9B,QAAiB,EACjB,OAAgB,EACR,EAAE;IACV,OAAO,QAAQ,IAAI,OAAO;QACxB,CAAC,CAAC;YACE,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,GAAG,GAAG,KAAK;YAC/D,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,6BAA6B,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;YAClG,aAAa,EAAE,QAAQ;SACxB;QACH,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO;YACtB,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,GAAG,GAAG,KAAK;gBAC/D,MAAM,EAAE,qBAAqB;oBAC3B,CAAC,CAAC,eAAe,8CAA8C,CAAC,MAAM,MAAM;oBAC5E,CAAC,CAAC,MAAM;gBACV,aAAa,EAAE,QAAQ;aACxB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,GAAG,GAAG,KAAK;gBACzD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,wCAAwC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM;gBAC7G,aAAa,EAAE,QAAQ;aACxB,CAAC;AACR,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC/C,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,SAAS,EAAE,GAAG,oCAAoC,CAAC,SAAS,KAAK;IACjE,QAAQ,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;IAC5D,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,SAAS,EAAE,GAAG,8BAA8B,CAAC,SAAS,KAAK;IAC3D,QAAQ,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;IACtD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAgB,EAAyB,EAAE;IAC9E,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,iCAAiC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,2BAA2B,EAAE,CAAC;AAC/G,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VerticalGalleryStyles } from '../../VerticalGallery';\nimport {\n SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n SMALL_FLOATING_MODAL_SIZE_REM,\n VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n} from './FloatingLocalVideo.styles';\n\n/**\n * VerticalGallery tile size in rem:\n *\n * min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n *\n * @private\n */\nexport const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };\n\n/**\n * VerticalGallery tile size in rem:\n *\n * min - smallest possible size of the tile (90px)\n * max - Largest size we want the vertical tiles (144px)\n *\n * @private\n */\nexport const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 6.75, maxHeight: 11, width: 11 };\n\n/**\n * Styles for the VerticalGallery's container set in parent.\n *\n * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.\n *\n * Add 1.5 rem on width to account for horizontal padding\n *\n * @param shouldFloatLocalVideo whether rendered in floating layout or not\n * @returns Style set for VerticalGallery container.\n */\nexport const verticalGalleryContainerStyle = (\n shouldFloatLocalVideo: boolean,\n isNarrow: boolean,\n isShort: boolean\n): IStyle => {\n return isNarrow && isShort\n ? {\n width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n paddingBottom: '0.5rem'\n }\n : !isNarrow && isShort\n ? {\n width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,\n height: shouldFloatLocalVideo\n ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)`\n : '100%',\n paddingBottom: '0.5rem'\n }\n : {\n width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',\n paddingBottom: '0.5rem'\n };\n};\n\n/**\n * @private\n */\nexport const SHORT_VERTICAL_GALLERY_TILE_STYLE = {\n minHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n minWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n maxHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n maxWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n width: '100%',\n height: '100%'\n};\n\n/**\n * @private\n */\nexport const VERTICAL_GALLERY_TILE_STYLE = {\n minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,\n minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,\n maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n width: '100%',\n height: '100%'\n};\n\n/**\n * @private\n */\nexport const verticalGalleryStyle = (isShort: boolean): VerticalGalleryStyles => {\n return isShort ? { children: SHORT_VERTICAL_GALLERY_TILE_STYLE } : { children: VERTICAL_GALLERY_TILE_STYLE };\n};\n\"../../../../../acs-ui-common/src\""]}
|
package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
|
2
2
|
// Licensed under the MIT license.
|
|
3
3
|
import { _convertRemToPx as convertRemToPx } from "../../../../../acs-ui-common/src";
|
|
4
|
+
import { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';
|
|
4
5
|
import { SHORT_VERTICAL_GALLERY_TILE_SIZE_REM, VERTICAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveVerticalGallery.styles';
|
|
5
6
|
/**
|
|
6
7
|
* Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
|
|
@@ -9,8 +10,8 @@ import { SHORT_VERTICAL_GALLERY_TILE_SIZE_REM, VERTICAL_GALLERY_TILE_SIZE_REM }
|
|
|
9
10
|
* @private
|
|
10
11
|
*/
|
|
11
12
|
export const calculateHorizontalChildrenPerPage = (args) => {
|
|
12
|
-
const { numberOfChildren, containerWidth, buttonWidthRem,
|
|
13
|
-
const
|
|
13
|
+
const { numberOfChildren, containerWidth, buttonWidthRem, gapWidthRem } = args;
|
|
14
|
+
const childMinWidth = convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);
|
|
14
15
|
const gapWidth = convertRemToPx(gapWidthRem);
|
|
15
16
|
/** First check how many children can fit in containerWidth.
|
|
16
17
|
* __________________________________
|
|
@@ -20,7 +21,7 @@ export const calculateHorizontalChildrenPerPage = (args) => {
|
|
|
20
21
|
* <-----------containerWidth--------->
|
|
21
22
|
* containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
|
|
22
23
|
*/
|
|
23
|
-
const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (
|
|
24
|
+
const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));
|
|
24
25
|
// If all children fit then return numberOfChildrenInContainer
|
|
25
26
|
if (numberOfChildren <= numberOfChildrenInContainer) {
|
|
26
27
|
return numberOfChildrenInContainer;
|
|
@@ -38,7 +39,7 @@ export const calculateHorizontalChildrenPerPage = (args) => {
|
|
|
38
39
|
const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
|
|
39
40
|
// Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
|
|
40
41
|
// childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
|
|
41
|
-
return Math.max(Math.floor((childrenSpace + gapWidth) / (
|
|
42
|
+
return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);
|
|
42
43
|
};
|
|
43
44
|
/**
|
|
44
45
|
* Helper function to find the number of children for the VerticalGallery on each page.
|
package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverflowGalleryUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,yCAAgC;AAC5E,OAAO,EACL,oCAAoC,EACpC,8BAA8B,EAC/B,MAAM,wDAAwD,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"OverflowGalleryUtils.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,yCAAgC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,MAAM,0DAA0D,CAAC;AAClH,OAAO,EACL,oCAAoC,EACpC,8BAA8B,EAC/B,MAAM,wDAAwD,CAAC;AAEhE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,IAKlD,EAAU,EAAE;IACX,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAE/E,MAAM,aAAa,GAAG,cAAc,CAAC,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IACtF,MAAM,QAAQ,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE7C;;;;;;;OAOG;IACH,MAAM,2BAA2B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;IACzG,8DAA8D;IAC9D,IAAI,gBAAgB,IAAI,2BAA2B,EAAE;QACnD,OAAO,2BAA2B,CAAC;KACpC;IAED,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;IAEnD;;;;;;;;OAQG;IACH,MAAM,aAAa,GAAG,cAAc,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC;IACtE,qGAAqG;IACrG,qFAAqF;IACrF,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,IAMhD,EAAU,EAAE;IACX,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAE5F,MAAM,gBAAgB,GAAG,cAAc,CACrC,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,SAAS,CAAC,CAAC,CAAC,8BAA8B,CAAC,SAAS,CACpG,CAAC;IACF,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAE5D;;;;;;;;;;;;;;;;;;;OAmBG;IAEH,MAAM,8BAA8B,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,CAAC;IACtH,iFAAiF;IACjF,IAAI,gBAAgB,IAAI,8BAA8B,EAAE;QACtD,OAAO,8BAA8B,CAAC;KACvC;IAED;;;;;OAKG;IACH,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,GAAG,CAAC,GAAG,WAAW,CAAC;IAE1E;;;;;OAKG;IACH,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,gBAAgB,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAChG,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\nimport { LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM } from '../styles/VideoGalleryResponsiveHorizontalGallery.styles';\nimport {\n SHORT_VERTICAL_GALLERY_TILE_SIZE_REM,\n VERTICAL_GALLERY_TILE_SIZE_REM\n} from '../styles/VideoGalleryResponsiveVerticalGallery.styles';\n\n/**\n * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and\n * gaps in between\n *\n * @private\n */\nexport const calculateHorizontalChildrenPerPage = (args: {\n numberOfChildren: number;\n containerWidth: number;\n gapWidthRem: number;\n buttonWidthRem: number;\n}): number => {\n const { numberOfChildren, containerWidth, buttonWidthRem, gapWidthRem } = args;\n\n const childMinWidth = convertRemToPx(LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth);\n const gapWidth = convertRemToPx(gapWidthRem);\n\n /** First check how many children can fit in containerWidth.\n * __________________________________\n * | || |\n * | || |\n * |________________||________________|\n * <-----------containerWidth--------->\n * containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n */\n const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childMinWidth + gapWidth));\n // If all children fit then return numberOfChildrenInContainer\n if (numberOfChildren <= numberOfChildrenInContainer) {\n return numberOfChildrenInContainer;\n }\n\n const buttonWidth = convertRemToPx(buttonWidthRem);\n\n /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from\n * containerWidth to compute childrenSpace\n * <-----------containerWidth--------->\n * __________________________________\n * | || || || |\n * |<|| || ||>|\n * |_||_____________||_____________||_|\n * <-------childrenSpace------>\n */\n const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;\n // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.\n // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.\n return Math.max(Math.floor((childrenSpace + gapWidth) / (childMinWidth + gapWidth)), 1);\n};\n\n/**\n * Helper function to find the number of children for the VerticalGallery on each page.\n *\n * @private\n */\nexport const calculateVerticalChildrenPerPage = (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\""]}
|
package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/HorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,IAAI,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QACjD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,MAAM,EAAE,MAAM;IACd,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, Theme } from '@fluentui/react';\n\n/**\n * Horizontal Gallery button width in rem\n */\nexport const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;\n\n/**\n * @private\n */\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n return {\n background: 'none',\n padding: 0,\n height: 'auto',\n minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n border: `1px solid ${theme.palette.neutralLight}`,\n borderRadius: theme.effects.roundedCorner4\n };\n};\n\n/**\n * Horizontal Gallery gap size in rem between tiles and buttons\n */\nexport const HORIZONTAL_GALLERY_GAP = 0.5;\n\n/**\n * @private\n */\nexport const rootStyle: IStyle = {\n height: '100%',\n width: '100%',\n gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n\n/**\n * @private\n */\nexport const childrenContainerStyle: IStyle = {\n height: '100%',\n gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n"]}
|
|
1
|
+
{"version":3,"file":"HorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/HorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,IAAI,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QACjD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, Theme } from '@fluentui/react';\n\n/**\n * Horizontal Gallery button width in rem\n */\nexport const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;\n\n/**\n * @private\n */\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n return {\n background: 'none',\n padding: 0,\n height: 'auto',\n minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n border: `1px solid ${theme.palette.neutralLight}`,\n borderRadius: theme.effects.roundedCorner4\n };\n};\n\n/**\n * Horizontal Gallery gap size in rem between tiles and buttons\n */\nexport const HORIZONTAL_GALLERY_GAP = 0.5;\n\n/**\n * @private\n */\nexport const rootStyle: IStyle = {\n height: '100%',\n width: '100%',\n gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n\n/**\n * @private\n */\nexport const childrenContainerStyle: IStyle = {\n height: '100%',\n width: '100%',\n gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n"]}
|
|
@@ -39,6 +39,8 @@ export interface _Identifiers {
|
|
|
39
39
|
overflowGalleryLeftNavButton: string;
|
|
40
40
|
/** `data-ui-id` value for overflow gallery component's right navigation button */
|
|
41
41
|
overflowGalleryRightNavButton: string;
|
|
42
|
+
/** `data-ui-id` value for the video tiles in the horizontal gallery */
|
|
43
|
+
horizontalGalleryVideoTile: string;
|
|
42
44
|
/** `data-ui-id` value for `VerticalGallery` Component's children video tiles */
|
|
43
45
|
verticalGalleryVideoTile: string;
|
|
44
46
|
/** `data-ui-id` value for `VerticalGallery` Component's page counter */
|
|
@@ -17,6 +17,7 @@ const defaultIdentifiers = {
|
|
|
17
17
|
overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button',
|
|
18
18
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
19
19
|
verticalGalleryVideoTile: 'vertical-gallery-video-tile',
|
|
20
|
+
horizontalGalleryVideoTile: 'horizontal-gallery-video-tile',
|
|
20
21
|
/* @conditional-compile-remove(vertical-gallery) */
|
|
21
22
|
verticalGalleryPageCounter: 'vertical-gallery-page-counter'
|
|
22
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IdentifierProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/identifiers/IdentifierProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"IdentifierProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/identifiers/IdentifierProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAoDzD,MAAM,kBAAkB,GAAiB;IACvC,gBAAgB,EAAE,mBAAmB;IACrC,+BAA+B,EAAE,qCAAqC;IACtE,yBAAyB,EAAE,8BAA8B;IACzD,eAAe,EAAE,kBAAkB;IACnC,2BAA2B,EAAE,gCAAgC;IAC7D,sCAAsC,EAAE,4CAA4C;IACpF,cAAc,EAAE,iBAAiB;IACjC,gBAAgB,EAAE,mBAAmB;IACrC,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,4BAA4B,EAAE,kCAAkC;IAChE,6BAA6B,EAAE,mCAAmC;IAClE,mDAAmD;IACnD,wBAAwB,EAAE,6BAA6B;IACvD,0BAA0B,EAAE,+BAA+B;IAC3D,mDAAmD;IACnD,0BAA0B,EAAE,+BAA+B;CAC5D,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAe,kBAAkB,CAAC,CAAC;AAgBjF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,kBAAkB,IAAG,QAAQ,CAA8B,CAAC;AACvH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAiB,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { createContext, useContext } from 'react';\n\n/**\n * Identifiers that can be used to target specific components in a composite.\n *\n * @experimental\n *\n * These identifiers are assigned as `data-ui-id` HTML attribute of the root element of the targeted component.\n *\n * This API is intended for end to end test automation. As such, they are not covered by the API\n * guarantee of the public API. This will remain perenially experimental and compatibility breaking changes\n * may be made at any point.\n *\n * @internal\n */\nexport interface _Identifiers {\n /** `data-ui-id` value for `SendBox` Component */\n sendboxTextField: string;\n /** `data-ui-id` value for `ParticipantButton` Component's People menu item */\n participantButtonPeopleMenuItem: string;\n /** `data-ui-id` value for `ParticipantItem` Component's Menu button */\n participantItemMenuButton: string;\n /** `data-ui-id` value for `ParticipantList` Component */\n participantList: string;\n /** `data-ui-id` value for `ParticipantList` Component's People Button */\n participantListPeopleButton: string;\n /** `data-ui-id` value for `ParticipantList` Component's Remove Participant Button */\n participantListRemoveParticipantButton: string;\n /** `data-ui-id` value for `MessageThread` components message content */\n messageContent: string;\n /** `data-ui-id` value for `MessageThread` components message timestamp */\n messageTimestamp: string;\n /** `data-ui-id` value for `TypingIndicator` Component */\n typingIndicator: string;\n /** `data-ui-id` value for `VideoGallery` Component */\n videoGallery: string;\n /** `data-ui-id` value for `VideoTile` Component */\n videoTile: string;\n /** `data-ui-id` value for overflow gallery component's left navigation button */\n overflowGalleryLeftNavButton: string;\n /** `data-ui-id` value for overflow gallery component's right navigation button */\n overflowGalleryRightNavButton: string;\n /** `data-ui-id` value for the video tiles in the horizontal gallery */\n horizontalGalleryVideoTile: string;\n /* @conditional-compile-remove(vertical-gallery) */\n /** `data-ui-id` value for `VerticalGallery` Component's children video tiles */\n verticalGalleryVideoTile: string;\n /* @conditional-compile-remove(vertical-gallery) */\n /** `data-ui-id` value for `VerticalGallery` Component's page counter */\n verticalGalleryPageCounter: string;\n}\n\nconst defaultIdentifiers: _Identifiers = {\n sendboxTextField: 'sendbox-textfield',\n participantButtonPeopleMenuItem: 'participant-button-people-menu-item',\n participantItemMenuButton: 'participant-item-menu-button',\n participantList: 'participant-list',\n participantListPeopleButton: 'participant-list-people-button',\n participantListRemoveParticipantButton: 'participant-list-remove-participant-button',\n messageContent: 'message-content',\n messageTimestamp: 'message-timestamp',\n typingIndicator: 'typing-indicator',\n videoGallery: 'video-gallery',\n videoTile: 'video-tile',\n overflowGalleryLeftNavButton: 'overflow-gallery-left-nav-button',\n overflowGalleryRightNavButton: 'overflow-gallery-right-nav-button',\n /* @conditional-compile-remove(vertical-gallery) */\n verticalGalleryVideoTile: 'vertical-gallery-video-tile',\n horizontalGalleryVideoTile: 'horizontal-gallery-video-tile',\n /* @conditional-compile-remove(vertical-gallery) */\n verticalGalleryPageCounter: 'vertical-gallery-page-counter'\n};\n\n/**\n * @private\n */\nexport const IdentifierContext = createContext<_Identifiers>(defaultIdentifiers);\n\n/**\n * Arguments to Context Provider for {@link _Identifiers}.\n *\n * @experimental\n *\n * See documentation for {@link _Identifiers}.\n *\n * @internal\n */\nexport interface _IdentifierProviderProps {\n identifiers?: _Identifiers;\n children: React.ReactNode;\n}\n\n/**\n * React Context provider for {@link _Identifiers}.\n *\n * @experimental\n *\n * See documentation for {@link _Identifiers}.\n *\n * @internal\n */\nexport const _IdentifierProvider = (props: _IdentifierProviderProps): JSX.Element => {\n const { identifiers, children } = props;\n return <IdentifierContext.Provider value={identifiers ?? defaultIdentifiers}>{children}</IdentifierContext.Provider>;\n};\n\n/**\n * @private\n */\nexport const useIdentifiers = (): _Identifiers => useContext(IdentifierContext);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@azure/communication-react",
|
|
3
|
-
"version": "1.5.1-alpha-
|
|
3
|
+
"version": "1.5.1-alpha-202303240013",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React library for building modern communication user experiences utilizing Azure Communication Services",
|
|
6
6
|
"keywords": [
|
|
@@ -89,13 +89,13 @@
|
|
|
89
89
|
"@azure/core-auth": "1.3.2",
|
|
90
90
|
"@babel/cli": "~7.16.0",
|
|
91
91
|
"@babel/core": "~7.16.0",
|
|
92
|
-
"@internal/calling-component-bindings": "1.5.1-alpha-
|
|
93
|
-
"@internal/calling-stateful-client": "1.5.1-alpha-
|
|
94
|
-
"@internal/chat-component-bindings": "1.5.1-alpha-
|
|
95
|
-
"@internal/chat-stateful-client": "1.5.1-alpha-
|
|
96
|
-
"@internal/fake-backends": "1.5.1-alpha-
|
|
97
|
-
"@internal/react-components": "1.5.1-alpha-
|
|
98
|
-
"@internal/react-composites": "1.5.1-alpha-
|
|
92
|
+
"@internal/calling-component-bindings": "1.5.1-alpha-202303240013",
|
|
93
|
+
"@internal/calling-stateful-client": "1.5.1-alpha-202303240013",
|
|
94
|
+
"@internal/chat-component-bindings": "1.5.1-alpha-202303240013",
|
|
95
|
+
"@internal/chat-stateful-client": "1.5.1-alpha-202303240013",
|
|
96
|
+
"@internal/fake-backends": "1.5.1-alpha-202303240013",
|
|
97
|
+
"@internal/react-components": "1.5.1-alpha-202303240013",
|
|
98
|
+
"@internal/react-composites": "1.5.1-alpha-202303240013",
|
|
99
99
|
"@microsoft/api-documenter": "~7.12.11",
|
|
100
100
|
"@microsoft/api-extractor": "~7.18.0",
|
|
101
101
|
"@rollup/plugin-json": "~4.1.0",
|