@azure/communication-react 1.5.1-alpha-202303080017 → 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 +110 -33
- 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/chat-component-bindings/src/messageThreadSelector.js +1 -1
- package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.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/SendBox.js +5 -2
- package/dist/dist-esm/react-components/src/components/SendBox.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 +15 -4
- 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":"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.
|
|
@@ -35,9 +40,15 @@ export const LOCAL_VIDEO_TILE_ZINDEX = 2;
|
|
|
35
40
|
* @private
|
|
36
41
|
*/
|
|
37
42
|
export const localVideoTileContainerStyle = (theme, localVideoTileSize) => {
|
|
38
|
-
return
|
|
39
|
-
|
|
40
|
-
:
|
|
43
|
+
return {
|
|
44
|
+
minWidth: _pxToRem(localVideoTileSize.width),
|
|
45
|
+
minHeight: _pxToRem(localVideoTileSize.height),
|
|
46
|
+
position: 'absolute',
|
|
47
|
+
bottom: _pxToRem(localVideoTileOuterPaddingPX),
|
|
48
|
+
borderRadius: theme.effects.roundedCorner4,
|
|
49
|
+
overflow: 'hidden',
|
|
50
|
+
right: _pxToRem(localVideoTileOuterPaddingPX)
|
|
51
|
+
};
|
|
41
52
|
};
|
|
42
53
|
/**
|
|
43
54
|
* @private
|
|
@@ -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":"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,6CAA6C,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;AAExF;;;GAGG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AACnF;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,KAAY,EACZ,kBAAqD,EAC7C,EAAE;IACV,OAAO;QACL,QAAQ,EAAE,QAAQ,CAAC,kBAAkB,CAAC,KAAK,CAAC;QAC5C,SAAS,EAAE,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CAAC;QAC9C,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,QAAQ,CAAC,4BAA4B,CAAC;QAC9C,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,QAAQ,CAAC,4BAA4B,CAAC;KAC9C,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wCAAwC,GAAG,CACtD,KAAY,EACZ,kBAAqD,EACvC,EAAE;IAChB,OAAO,eAAe,CAAC,4BAA4B,CAAC,KAAK,EAAE,kBAAkB,CAAC,EAAE;QAC9E,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;KAC9C,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAC1C,KAAY,EACZ,SAA4C,EACY,EAAE;IAC1D,OAAO,eAAe,CACpB;QACE,IAAI,EAAE,4BAA4B,CAAC,KAAK,EAAE,SAAS,CAAC;KACrD,EACD;QACE,IAAI,EAAE;YACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,eAAe,EAAE;gBACf,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;gBACpC,MAAM,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE;aAC/D;SACF;KACF,EACD,qBAAqB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAyB;IAC/D,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,uBAAuB;QAC/B,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAY,EAAiB,EAAE;IAC/E,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC;YACnB,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC;YACpB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,CAAC;YACT,UAAU,EAAE,iBAAiB;YAC7B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C;QACD,WAAW,EAAE;YACX,yFAAyF;YACzF,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,iBAAiB,CAAC,6EAA6E;SAC5G;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;YACxB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;YACzB,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE;YACb,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;SAC3B;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA0B;IAC1D,yBAAyB,EAAE;QACzB,MAAM,EAAE,uBAAuB,GAAG,CAAC,CAAC,qFAAqF;KAC1H;CACF,CAAC","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
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
|
2
2
|
// Licensed under the MIT license.
|
|
3
3
|
import { _pxToRem } from "../../../../../acs-ui-common/src";
|
|
4
|
-
import { SMALL_FLOATING_MODAL_SIZE_PX, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
|
|
4
|
+
import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX, SMALL_FLOATING_MODAL_SIZE_PX, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
|
|
5
5
|
/**
|
|
6
6
|
* VerticalGallery tile size in rem:
|
|
7
7
|
*
|
|
@@ -10,7 +10,16 @@ import { SMALL_FLOATING_MODAL_SIZE_PX, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX }
|
|
|
10
10
|
*
|
|
11
11
|
* @private
|
|
12
12
|
*/
|
|
13
|
-
export const
|
|
13
|
+
export const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9, width: 9 };
|
|
14
|
+
/**
|
|
15
|
+
* VerticalGallery tile size in rem:
|
|
16
|
+
*
|
|
17
|
+
* min - smallest possible size of the tile (90px)
|
|
18
|
+
* max - Largest size we want the vertical tiles (144px)
|
|
19
|
+
*
|
|
20
|
+
* @private
|
|
21
|
+
*/
|
|
22
|
+
export const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 6.75, maxHeight: 11, width: 11 };
|
|
14
23
|
/**
|
|
15
24
|
* Styles for the VerticalGallery's container set in parent.
|
|
16
25
|
*
|
|
@@ -19,20 +28,39 @@ export const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 5.625, maxHeight: 9,
|
|
|
19
28
|
* @param shouldFloatLocalVideo whether rendered in floating layout or not
|
|
20
29
|
* @returns Style set for VerticalGallery container.
|
|
21
30
|
*/
|
|
22
|
-
export const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
|
|
23
|
-
return isNarrow
|
|
31
|
+
export const verticalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow, isShort) => {
|
|
32
|
+
return isNarrow && isShort
|
|
24
33
|
? {
|
|
25
|
-
width: `${
|
|
34
|
+
width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
|
|
26
35
|
height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',
|
|
27
36
|
paddingBottom: '0.5rem'
|
|
28
37
|
}
|
|
29
|
-
:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
: !isNarrow && isShort
|
|
39
|
+
? {
|
|
40
|
+
width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
|
|
41
|
+
height: shouldFloatLocalVideo
|
|
42
|
+
? `calc(100% - ${_pxToRem(SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
|
|
43
|
+
: '100%',
|
|
44
|
+
paddingBottom: '0.5rem'
|
|
45
|
+
}
|
|
46
|
+
: {
|
|
47
|
+
width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
|
|
48
|
+
height: shouldFloatLocalVideo
|
|
49
|
+
? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`
|
|
50
|
+
: '100%',
|
|
51
|
+
paddingBottom: '0.5rem'
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* @private
|
|
56
|
+
*/
|
|
57
|
+
export const SHORT_VERTICAL_GALLERY_TILE_STYLE = {
|
|
58
|
+
minHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,
|
|
59
|
+
minWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
|
|
60
|
+
maxHeight: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,
|
|
61
|
+
maxWidth: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
|
|
62
|
+
width: '100%',
|
|
63
|
+
height: '100%'
|
|
36
64
|
};
|
|
37
65
|
/**
|
|
38
66
|
* @private
|
|
@@ -48,7 +76,7 @@ export const VERTICAL_GALLERY_TILE_STYLE = {
|
|
|
48
76
|
/**
|
|
49
77
|
* @private
|
|
50
78
|
*/
|
|
51
|
-
export const verticalGalleryStyle = {
|
|
52
|
-
children: VERTICAL_GALLERY_TILE_STYLE
|
|
79
|
+
export const verticalGalleryStyle = (isShort) => {
|
|
80
|
+
return isShort ? { children: SHORT_VERTICAL_GALLERY_TILE_STYLE } : { children: VERTICAL_GALLERY_TILE_STYLE };
|
|
53
81
|
};
|
|
54
82
|
//# sourceMappingURL=VideoGalleryResponsiveVerticalGallery.styles.js.map
|
|
@@ -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;AAGlC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD,OAAO,
|
|
1
|
+
{"version":3,"file":"VideoGalleryResponsiveVerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD,OAAO,EACL,6CAA6C,EAC7C,4BAA4B,EAC5B,uCAAuC,EACxC,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;;;;;;;GAOG;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,KAAK;YACzD,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,eAAe,QAAQ,CAAC,4BAA4B,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;YACxG,aAAa,EAAE,QAAQ;SACxB;QACH,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO;YACtB,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,oCAAoC,CAAC,KAAK,KAAK;gBACzD,MAAM,EAAE,qBAAqB;oBAC3B,CAAC,CAAC,eAAe,QAAQ,CAAC,6CAA6C,CAAC,MAAM,CAAC,GAAG;oBAClF,CAAC,CAAC,MAAM;gBACV,aAAa,EAAE,QAAQ;aACxB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,8BAA8B,CAAC,KAAK,KAAK;gBACnD,MAAM,EAAE,qBAAqB;oBAC3B,CAAC,CAAC,eAAe,QAAQ,CAAC,uCAAuC,CAAC,MAAM,CAAC,GAAG;oBAC5E,CAAC,CAAC,MAAM;gBACV,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_PX,\n SMALL_FLOATING_MODAL_SIZE_PX,\n VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX\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 * @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}rem`,\n height: shouldFloatLocalVideo ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height)})` : '100%',\n paddingBottom: '0.5rem'\n }\n : !isNarrow && isShort\n ? {\n width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo\n ? `calc(100% - ${_pxToRem(SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`\n : '100%',\n paddingBottom: '0.5rem'\n }\n : {\n width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,\n height: shouldFloatLocalVideo\n ? `calc(100% - ${_pxToRem(VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX.height)})`\n : '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\""]}
|
|
@@ -19,4 +19,10 @@ export declare const _useContainerHeight: (containerRef: RefObject<HTMLElement>)
|
|
|
19
19
|
* @returns boolean
|
|
20
20
|
*/
|
|
21
21
|
export declare const isNarrowWidth: (containerWidthRem: number) => boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Utility function to determine if container width is short
|
|
24
|
+
* @param containerWidthRem container height in rem
|
|
25
|
+
* @returns boolean
|
|
26
|
+
*/
|
|
27
|
+
export declare const isShortHeight: (containerHeightRem: number) => boolean;
|
|
22
28
|
//# sourceMappingURL=responsive.d.ts.map
|
|
@@ -49,10 +49,17 @@ export const _useContainerHeight = (containerRef) => {
|
|
|
49
49
|
return height;
|
|
50
50
|
};
|
|
51
51
|
const NARROW_WIDTH_REM = 30;
|
|
52
|
+
const SHORT_HEIGHT_REM = 23.75;
|
|
52
53
|
/**
|
|
53
54
|
* Utility function to determine if container width is narrow
|
|
54
55
|
* @param containerWidthRem container width in rem
|
|
55
56
|
* @returns boolean
|
|
56
57
|
*/
|
|
57
58
|
export const isNarrowWidth = (containerWidthRem) => containerWidthRem <= convertRemToPx(NARROW_WIDTH_REM);
|
|
59
|
+
/**
|
|
60
|
+
* Utility function to determine if container width is short
|
|
61
|
+
* @param containerWidthRem container height in rem
|
|
62
|
+
* @returns boolean
|
|
63
|
+
*/
|
|
64
|
+
export const isShortHeight = (containerHeightRem) => containerHeightRem <= convertRemToPx(SHORT_HEIGHT_REM);
|
|
58
65
|
//# sourceMappingURL=responsive.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/responsive.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,sCAAgC;AAE5E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,YAAoC,EAAsB,EAAE;IAC7F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAElE,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QACzC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,UAAU,EAAE,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,YAAoC,EAAsB,EAAE;IAC9F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAEpE,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAC1C,SAAS,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,UAAU,EAAE,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,iBAAyB,EAAW,EAAE,CAClE,iBAAiB,IAAI,cAAc,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { RefObject, useEffect, useState, useRef } from 'react';\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\n\n/**\n * A utility hook for providing the width of a parent element.\n * Returns updated width if parent/window resizes.\n * @param containerRef - Ref of a parent element whose width will be returned.\n * @internal\n */\nexport const _useContainerWidth = (containerRef: RefObject<HTMLElement>): number | undefined => {\n const [width, setWidth] = useState<number | undefined>(undefined);\n\n const observer = useRef(\n new ResizeObserver((entries) => {\n const { width } = entries[0].contentRect;\n setWidth(width);\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n\n const currentObserver = observer.current;\n return () => {\n currentObserver.disconnect();\n };\n }, [containerRef, observer]);\n\n return width;\n};\n\n/**\n * A utility hook for providing the height of a parent element.\n * Returns updated height if parent/window resizes.\n * @param containerRef - Ref of a parent element whose height will be returned.\n * @internal\n */\nexport const _useContainerHeight = (containerRef: RefObject<HTMLElement>): number | undefined => {\n const [height, setHeight] = useState<number | undefined>(undefined);\n\n const observer = useRef(\n new ResizeObserver((entries) => {\n const { height } = entries[0].contentRect;\n setHeight(height);\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n\n const currentObserver = observer.current;\n return () => {\n currentObserver.disconnect();\n };\n }, [containerRef, observer]);\n\n return height;\n};\n\nconst NARROW_WIDTH_REM = 30;\n\n/**\n * Utility function to determine if container width is narrow\n * @param containerWidthRem container width in rem\n * @returns boolean\n */\nexport const isNarrowWidth = (containerWidthRem: number): boolean =>\n containerWidthRem <= convertRemToPx(NARROW_WIDTH_REM);\n\"../../../../acs-ui-common/src\""]}
|
|
1
|
+
{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/responsive.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,sCAAgC;AAE5E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,YAAoC,EAAsB,EAAE;IAC7F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAElE,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QACzC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,CAAC,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,UAAU,EAAE,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,YAAoC,EAAsB,EAAE;IAC9F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAEpE,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAC1C,SAAS,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,UAAU,EAAE,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAE/B;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,iBAAyB,EAAW,EAAE,CAClE,iBAAiB,IAAI,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,kBAA0B,EAAW,EAAE,CACnE,kBAAkB,IAAI,cAAc,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { RefObject, useEffect, useState, useRef } from 'react';\nimport { _convertRemToPx as convertRemToPx } from '@internal/acs-ui-common';\n\n/**\n * A utility hook for providing the width of a parent element.\n * Returns updated width if parent/window resizes.\n * @param containerRef - Ref of a parent element whose width will be returned.\n * @internal\n */\nexport const _useContainerWidth = (containerRef: RefObject<HTMLElement>): number | undefined => {\n const [width, setWidth] = useState<number | undefined>(undefined);\n\n const observer = useRef(\n new ResizeObserver((entries) => {\n const { width } = entries[0].contentRect;\n setWidth(width);\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n\n const currentObserver = observer.current;\n return () => {\n currentObserver.disconnect();\n };\n }, [containerRef, observer]);\n\n return width;\n};\n\n/**\n * A utility hook for providing the height of a parent element.\n * Returns updated height if parent/window resizes.\n * @param containerRef - Ref of a parent element whose height will be returned.\n * @internal\n */\nexport const _useContainerHeight = (containerRef: RefObject<HTMLElement>): number | undefined => {\n const [height, setHeight] = useState<number | undefined>(undefined);\n\n const observer = useRef(\n new ResizeObserver((entries) => {\n const { height } = entries[0].contentRect;\n setHeight(height);\n })\n );\n\n useEffect(() => {\n if (containerRef.current) {\n observer.current.observe(containerRef.current);\n }\n\n const currentObserver = observer.current;\n return () => {\n currentObserver.disconnect();\n };\n }, [containerRef, observer]);\n\n return height;\n};\n\nconst NARROW_WIDTH_REM = 30;\n\nconst SHORT_HEIGHT_REM = 23.75;\n\n/**\n * Utility function to determine if container width is narrow\n * @param containerWidthRem container width in rem\n * @returns boolean\n */\nexport const isNarrowWidth = (containerWidthRem: number): boolean =>\n containerWidthRem <= convertRemToPx(NARROW_WIDTH_REM);\n\n/**\n * Utility function to determine if container width is short\n * @param containerWidthRem container height in rem\n * @returns boolean\n */\nexport const isShortHeight = (containerHeightRem: number): boolean =>\n containerHeightRem <= convertRemToPx(SHORT_HEIGHT_REM);\n\"../../../../acs-ui-common/src\""]}
|
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-202303100015",
|
|
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-202303100015",
|
|
93
|
+
"@internal/calling-stateful-client": "1.5.1-alpha-202303100015",
|
|
94
|
+
"@internal/chat-component-bindings": "1.5.1-alpha-202303100015",
|
|
95
|
+
"@internal/chat-stateful-client": "1.5.1-alpha-202303100015",
|
|
96
|
+
"@internal/fake-backends": "1.5.1-alpha-202303100015",
|
|
97
|
+
"@internal/react-components": "1.5.1-alpha-202303100015",
|
|
98
|
+
"@internal/react-composites": "1.5.1-alpha-202303100015",
|
|
99
99
|
"@microsoft/api-documenter": "~7.12.11",
|
|
100
100
|
"@microsoft/api-extractor": "~7.18.0",
|
|
101
101
|
"@rollup/plugin-json": "~4.1.0",
|