npm - @azure/communication-react - Versions diffs - 1.5.1-alpha-202303230013 → 1.5.1-alpha-202303240013 - Mend

@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.

Files changed (36) hide show

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED Viewed

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.5.1-alpha-202303230013';
+module.exports = '1.5.1-alpha-202303240013';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED Viewed

	@@ -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-~~202303230013~~';\n"]}
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-202303240013';\n"]}

package/dist/dist-esm/react-components/src/components/HorizontalGallery.js CHANGED Viewed

@@ -16,7 +16,7 @@ const DEFAULT_CHILDREN_PER_PAGE = 5;
  * @returns
  */
 export const HorizontalGallery = (props) => {
-    var _a, _b;
+    var _a;
     const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;
     const ids = useIdentifiers();
     const [page, setPage] = useState(0);
@@ -40,13 +40,18 @@ export const HorizontalGallery = (props) => {
     const showButtons = numberOfChildren > childrenPerPage;
     const disablePreviousButton = page === 0;
     const disableNextButton = page === lastPage;
+    const childrenStyles = useMemo(() => {
+        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
+    }, [styles === null || styles === void 0 ? void 0 : styles.children]);
     // If children per page is 0 or less return empty element
     if (childrenPerPage <= 0) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement(Stack, { horizontal: true, className: mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
         showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.overflowGalleryLeftNavButton })),
-        React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
+        React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle) }, childrenOnCurrentPage.map((child, i) => {
+            return (React.createElement(Stack.Item, { styles: childrenStyles, key: i, "data-ui-id": ids.horizontalGalleryVideoTile }, child));
+        })),
         showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.overflowGalleryRightNavButton }))));
 };
 const HorizontalGalleryNavigationButton = (props) => {

package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"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~~EAAE~~,~~EAAE~~,KAAK,EAAE,~~MAAA~~,KAAK,CAAC,MAAM,~~0CAAE~~,~~QAAQ~~,EAAE,CAAC,~~IAChG~~,~~qBAAqB~~,~~CAChB~~;QACP,WAAW,IAAI,CACd,oBAAC,iCAAiC,IAChC,GAAG,EAAC,iBAAiB,EACrB,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,8BAA8B,GAAG,EACtD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,iBAAiB,EAC3B,UAAU,EAAE,GAAG,CAAC,6BAA6B,GAC7C,CACH,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CAAC,KAM1C,EAAe,EAAE;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAClE,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,gBACZ,KAAK,CAAC,UAAU,IAE3B,KAAK,CAAC,IAAI,CACG,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/*\n {@link HorizontalGallery} default children per page\n /\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n\n/\n {@link HorizontalGallery} Component Styles.\n * @public\n /\nexport interface HorizontalGalleryStyles extends BaseCustomStyles {\n /* Styles for each child of {@link HorizontalGallery} /\n children?: IStyle;\n /* Styles for navigation button to go to previous page /\n previousButton?: IStyle;\n /* Styles for navigation button to go to next page /\n nextButton?: IStyle;\n}\n\n/\n {@link HorizontalGallery} Component Props.\n /\nexport interface HorizontalGalleryProps {\n children: React.ReactNode;\n /\n Styles for HorizontalGallery\n /\n styles?: HorizontalGalleryStyles;\n /\n Children shown per page\n * @defaultValue 5\n /\n childrenPerPage?: number;\n /\n helper function to choose which tiles to give video to.\n /\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\n/\n Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.\n * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}\n * @returns\n /\nexport const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {\n const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;\n\n const ids = useIdentifiers();\n\n const [page, setPage] = useState(0);\n\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\n\n const indexesArray: number[][] = useMemo(() => {\n return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n }, [numberOfChildren, childrenPerPage]);\n\n useEffect(() => {\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray[page]);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n\n const firstIndexOfCurrentPage = page childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n\n const childrenOnCurrentPage = useMemo(() => {\n return indexesArray[clippedPage].map((index) => {\n return React.Children.toArray(children)[index];\n });\n }, [indexesArray, clippedPage, children]);\n\n const showButtons = numberOfChildren > childrenPerPage;\n const disablePreviousButton = page === 0;\n const disableNextButton = page === lastPage;\n\n // If children per page is 0 or less return empty element\n if (childrenPerPage <= 0) {\n return <></>;\n }\n\n return (\n <Stack horizontal className={mergeStyles(rootStyle, props.styles?.root)}>\n {showButtons && (\n <HorizontalGalleryNavigationButton\n key=\"previous-nav-button\"\n icon={<Icon iconName=\"HorizontalGalleryLeftButton\" />}\n styles={styles?.previousButton}\n onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))}\n disabled={disablePreviousButton}\n identifier={ids.overflowGalleryLeftNavButton}\n />\n )}\n <Stack horizontal className={mergeStyles(childrenContainerStyle, { '> *': ~~props~~.styles~~?.children~~ })}>\n {~~childrenOnCurrentPage~~}\n </Stack>\n {showButtons && (\n <HorizontalGalleryNavigationButton\n key=\"next-nav-button\"\n icon={<Icon iconName=\"HorizontalGalleryRightButton\" />}\n styles={styles?.nextButton}\n onClick={() => setPage(Math.min(lastPage, page + 1))}\n disabled={disableNextButton}\n identifier={ids.overflowGalleryRightNavButton}\n />\n )}\n </Stack>\n );\n};\n\nconst HorizontalGalleryNavigationButton = (props: {\n icon: JSX.Element;\n styles: IStyle;\n onClick?: () => void;\n disabled?: boolean;\n identifier?: string;\n}): JSX.Element => {\n const theme = useTheme();\n return (\n <DefaultButton\n className={mergeStyles(leftRightButtonStyles(theme), props.styles)}\n onClick={props.onClick}\n disabled={props.disabled}\n data-ui-id={props.identifier}\n >\n {props.icon}\n </DefaultButton>\n );\n};\n"]}
1	+ {"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/*\n {@link HorizontalGallery} default children per page\n /\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n\n/\n {@link HorizontalGallery} Component Styles.\n * @public\n /\nexport interface HorizontalGalleryStyles extends BaseCustomStyles {\n /* Styles for each child of {@link HorizontalGallery} /\n children?: IStyle;\n /* Styles for navigation button to go to previous page /\n previousButton?: IStyle;\n /* Styles for navigation button to go to next page /\n nextButton?: IStyle;\n}\n\n/\n {@link HorizontalGallery} Component Props.\n /\nexport interface HorizontalGalleryProps {\n children: React.ReactNode;\n /\n Styles for HorizontalGallery\n /\n styles?: HorizontalGalleryStyles;\n /\n Children shown per page\n * @defaultValue 5\n /\n childrenPerPage?: number;\n /\n helper function to choose which tiles to give video to.\n /\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\n/\n Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.\n * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}\n * @returns\n /\nexport const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {\n const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;\n\n const ids = useIdentifiers();\n\n const [page, setPage] = useState(0);\n\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\n\n const indexesArray: number[][] = useMemo(() => {\n return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n }, [numberOfChildren, childrenPerPage]);\n\n useEffect(() => {\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray[page]);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n\n const firstIndexOfCurrentPage = page childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n\n const childrenOnCurrentPage = useMemo(() => {\n return indexesArray[clippedPage].map((index) => {\n return React.Children.toArray(children)[index];\n });\n }, [indexesArray, clippedPage, children]);\n\n const showButtons = numberOfChildren > childrenPerPage;\n const disablePreviousButton = page === 0;\n const disableNextButton = page === lastPage;\n\n const childrenStyles = useMemo(() => {\n return { root: styles?.children };\n }, [styles?.children]);\n\n // If children per page is 0 or less return empty element\n if (childrenPerPage <= 0) {\n return <></>;\n }\n\n return (\n <Stack horizontal className={mergeStyles(rootStyle, props.styles?.root)}>\n {showButtons && (\n <HorizontalGalleryNavigationButton\n key=\"previous-nav-button\"\n icon={<Icon iconName=\"HorizontalGalleryLeftButton\" />}\n styles={styles?.previousButton}\n onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))}\n disabled={disablePreviousButton}\n identifier={ids.overflowGalleryLeftNavButton}\n />\n )}\n <Stack horizontal className={mergeStyles(childrenContainerStyle)}>\n {childrenOnCurrentPage.map((child, i) => {\n return (\n <Stack.Item styles={childrenStyles} key={i} data-ui-id={ids.horizontalGalleryVideoTile}>\n {child}\n </Stack.Item>\n );\n })}\n </Stack>\n {showButtons && (\n <HorizontalGalleryNavigationButton\n key=\"next-nav-button\"\n icon={<Icon iconName=\"HorizontalGalleryRightButton\" />}\n styles={styles?.nextButton}\n onClick={() => setPage(Math.min(lastPage, page + 1))}\n disabled={disableNextButton}\n identifier={ids.overflowGalleryRightNavButton}\n />\n )}\n </Stack>\n );\n};\n\nconst HorizontalGalleryNavigationButton = (props: {\n icon: JSX.Element;\n styles: IStyle;\n onClick?: () => void;\n disabled?: boolean;\n identifier?: string;\n}): JSX.Element => {\n const theme = useTheme();\n return (\n <DefaultButton\n className={mergeStyles(leftRightButtonStyles(theme), props.styles)}\n onClick={props.onClick}\n disabled={props.disabled}\n data-ui-id={props.identifier}\n >\n {props.icon}\n </DefaultButton>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.d.ts CHANGED Viewed

@@ -9,7 +9,6 @@ export declare const ResponsiveHorizontalGallery: (props: {
     children: React.ReactNode;
     containerStyles: IStyle;
     horizontalGalleryStyles: HorizontalGalleryStyles;
-    childWidthRem: number;
     gapWidthRem: number;
     buttonWidthRem?: number | undefined;
     onFetchTilesToRender?: ((indexes: number[]) => void) | undefined;

package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/Overflo
  * available width obtained from a ResizeObserver, width per child, gap width, and button width
  */
 export const ResponsiveHorizontalGallery = (props) => {
-    const { childWidthRem, gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender } = props;
+    const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender } = props;
     const containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
@@ -18,7 +18,6 @@ export const ResponsiveHorizontalGallery = (props) => {
     const childrenPerPage = calculateHorizontalChildrenPerPage({
         numberOfChildren: React.Children.count(props.children),
         containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
-        childWidthRem,
         gapWidthRem,
         buttonWidthRem
     });

package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,~~KAQ3C~~,EAAe,EAAE;IAChB,MAAM,EAAE,~~aAAa,EAAE,~~WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;~~IACvF~~,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhH,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY;QAClE,~~aAAa;QACb,~~WAAW;QACX,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QAC9G,oBAAC,iBAAiB,IAChB,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,KAAK,CAAC,uBAAuB,EACrC,oBAAoB,EAAE,oBAAoB,IAEzC,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/*\n Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n children: React.ReactNode;\n containerStyles: IStyle;\n horizontalGalleryStyles: HorizontalGalleryStyles;\n ~~childWidthRem: number;\n~~ gapWidthRem: number;\n buttonWidthRem?: number;\n onFetchTilesToRender?: (indexes: number[]) => void;\n}): JSX.Element => {\n const { ~~childWidthRem,~~ gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n\n const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n\n const childrenPerPage = calculateHorizontalChildrenPerPage({\n numberOfChildren: React.Children.count(props.children),\n containerWidth: (containerWidth ?? 0) - leftPadding - rightPadding,\n ~~childWidthRem,\n~~ gapWidthRem,\n buttonWidthRem\n });\n\n return (\n <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n <HorizontalGallery\n childrenPerPage={childrenPerPage}\n styles={props.horizontalGalleryStyles}\n onFetchTilesToRender={onFetchTilesToRender}\n >\n {props.children}\n </HorizontalGallery>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"ResponsiveHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ResponsiveHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kCAAkC,EAAE,MAAM,2CAA2C,CAAC;AAE/F;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAO3C,EAAe,EAAE;IAChB,MAAM,EAAE,WAAW,EAAE,cAAc,GAAG,CAAC,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IACxE,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,cAAc,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9G,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhH,MAAM,eAAe,GAAG,kCAAkC,CAAC;QACzD,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,cAAc,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,CAAC,GAAG,WAAW,GAAG,YAAY;QAClE,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,2CAAgB,+BAA+B,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,eAAe,CAAC;QAC9G,oBAAC,iBAAiB,IAChB,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,KAAK,CAAC,uBAAuB,EACrC,oBAAoB,EAAE,oBAAoB,IAEzC,KAAK,CAAC,QAAQ,CACG,CAChB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\nimport React, { useRef } from 'react';\nimport { HorizontalGallery, HorizontalGalleryStyles } from './HorizontalGallery';\nimport { _useContainerWidth } from './utils/responsive';\nimport { calculateHorizontalChildrenPerPage } from './VideoGallery/utils/OverflowGalleryUtils';\n\n/*\n Wrapped HorizontalGallery that adjusts the number of items per page based on the\n * available width obtained from a ResizeObserver, width per child, gap width, and button width\n */\nexport const ResponsiveHorizontalGallery = (props: {\n children: React.ReactNode;\n containerStyles: IStyle;\n horizontalGalleryStyles: HorizontalGalleryStyles;\n gapWidthRem: number;\n buttonWidthRem?: number;\n onFetchTilesToRender?: (indexes: number[]) => void;\n}): JSX.Element => {\n const { gapWidthRem, buttonWidthRem = 0, onFetchTilesToRender } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n\n const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;\n const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;\n\n const childrenPerPage = calculateHorizontalChildrenPerPage({\n numberOfChildren: React.Children.count(props.children),\n containerWidth: (containerWidth ?? 0) - leftPadding - rightPadding,\n gapWidthRem,\n buttonWidthRem\n });\n\n return (\n <div data-ui-id=\"responsive-horizontal-gallery\" ref={containerRef} className={mergeStyles(props.containerStyles)}>\n <HorizontalGallery\n childrenPerPage={childrenPerPage}\n styles={props.horizontalGalleryStyles}\n onFetchTilesToRender={onFetchTilesToRender}\n >\n {props.children}\n </HorizontalGallery>\n </div>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export interface FloatingLocalVideoProps {
     layerHostId: string;
     parentWidth?: number;
     parentHeight?: number;
-    localVideoSize: {
+    localVideoSizeRem: {
         width: number;
         height: number;
     };

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js CHANGED Viewed

@@ -1,10 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { ContextualMenu } from '@fluentui/react';
+import { _convertRemToPx } from "../../../../acs-ui-common/src";
 import React, { useMemo } from 'react';
 import { useTheme } from '../../theming';
 import { _ModalClone } from '../ModalClone/ModalClone';
-import { floatingLocalVideoModalStyle, localVideoTileOuterPaddingPX } from './styles/FloatingLocalVideo.styles';
+import { floatingLocalVideoModalStyle, localVideoTileOuterPaddingRem } from './styles/FloatingLocalVideo.styles';
 const DRAG_OPTIONS = {
     moveMenuItemText: 'Move',
     closeMenuItemText: 'Close',
@@ -15,12 +16,15 @@ const DRAG_OPTIONS = {
 // This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
 // Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
 // position the modal can be dragged to.
-const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTileOuterPaddingPX };
+const modalMaxDragPosition = {
+    x: _convertRemToPx(localVideoTileOuterPaddingRem),
+    y: _convertRemToPx(localVideoTileOuterPaddingRem)
+};
 /**
  * @private
  */
 export const FloatingLocalVideo = (props) => {
-    const { localVideoComponent, layerHostId, localVideoSize, parentWidth, parentHeight } = props;
+    const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;
     const theme = useTheme();
     // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
     // to be dragged offscreen and these are the top and left bounds of that calculation.
@@ -28,11 +32,11 @@ export const FloatingLocalVideo = (props) => {
         ? {
             // We use -parentWidth/Height because our modal is positioned to start in the bottom right,
             // hence (0,0) is the bottom right of the video gallery.
-            x: -parentWidth + localVideoSize.width + localVideoTileOuterPaddingPX,
-            y: -parentHeight + localVideoSize.height + localVideoTileOuterPaddingPX
+            x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(localVideoTileOuterPaddingRem),
+            y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(localVideoTileOuterPaddingRem)
         }
-        : undefined, [parentHeight, parentWidth, localVideoSize.width, localVideoSize.height]);
-    const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSize), [theme, localVideoSize]);
+        : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
+    const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);
     const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);
     return (React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition }, localVideoComponent));
 };

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,~~4BAA4B~~,EAAE,MAAM,oCAAoC,CAAC;~~AAEhH~~,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG,~~EAAE,~~CAAC,EAAE,~~4BAA4B~~,~~EAAE~~,CAAC,EAAE,~~4BAA4B~~,~~EAAE~~,CAAC;~~AAqBlG~~;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,~~cAAc~~,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;~~IAE9F~~,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EAAE,CAAC,WAAW,GAAG,~~cAAc~~,CAAC,KAAK,GAAG,~~4BAA4B~~;~~YACrE~~,CAAC,~~EAAE~~,CAAC,YAAY,GAAG,~~cAAc~~,CAAC,MAAM,GAAG,~~4BAA4B~~;~~SACxE~~;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,~~cAAc~~,CAAC,KAAK,EAAE,~~cAAc~~,CAAC,MAAM,CAAC,~~CACzE~~,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,~~cAAc~~,CAAC,EAAE,CAAC,KAAK,EAAE,~~cAAc~~,CAAC,CAAC,CAAC;~~IAChH~~,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,IAEpC,mBAAmB,CACR,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ContextualMenu, IDragOptions } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport { floatingLocalVideoModalStyle, ~~localVideoTileOuterPaddingPX~~ } from './styles/FloatingLocalVideo.styles';\n\nconst DRAG_OPTIONS: IDragOptions = {\n moveMenuItemText: 'Move',\n closeMenuItemText: 'Close',\n menu: ContextualMenu,\n keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = { x: ~~localVideoTileOuterPaddingPX,~~ y: ~~localVideoTileOuterPaddingPX~~ };\n\n/*\n @private\n /\nexport interface FloatingLocalVideoProps {\n // Local video component to make draggable\n localVideoComponent: JSX.Element;\n // Element id of layer host to constrain the dragging of local video\n layerHostId: string;\n // Parent component width in px\n parentWidth?: number;\n // Parent component height in px\n parentHeight?: number;\n // Local video width and height in px\n ~~localVideoSize~~: {\n width: number;\n height: number;\n };\n}\n\n/\n @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n const { localVideoComponent, layerHostId, ~~localVideoSize~~, parentWidth, parentHeight } = props;\n\n const theme = useTheme();\n\n // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n // to be dragged offscreen and these are the top and left bounds of that calculation.\n const modalMinDragPosition: _ICoordinates \| undefined = useMemo(\n () =>\n parentWidth && parentHeight\n ? {\n // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n // hence (0,0) is the bottom right of the video gallery.\n x: -parentWidth + ~~localVideoSize~~.width + ~~localVideoTileOuterPaddingPX~~,\n y: -parentHeight + ~~localVideoSize~~.height + ~~localVideoTileOuterPaddingPX~~\n }\n : undefined,\n [parentHeight, parentWidth, ~~localVideoSize~~.width, ~~localVideoSize~~.height]\n );\n\n const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, ~~localVideoSize~~), [theme, ~~localVideoSize~~]);\n const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n return (\n <_ModalClone\n isOpen={true}\n isModeless={true}\n dragOptions={DRAG_OPTIONS}\n styles={modalStyles}\n layerProps={layerProps}\n maxDragPosition={modalMaxDragPosition}\n minDragPosition={modalMinDragPosition}\n >\n {localVideoComponent}\n </_ModalClone>\n );\n};\n"]}
1	+ {"version":3,"file":"FloatingLocalVideo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/FloatingLocalVideo.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,cAAc,EAAgB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,sCAAgC;AAC1D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAiB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAEjH,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,4FAA4F;AAC5F,+EAA+E;AAC/E,sHAAsH;AACtH,wCAAwC;AACxC,MAAM,oBAAoB,GAAG;IAC3B,CAAC,EAAE,eAAe,CAAC,6BAA6B,CAAC;IACjD,CAAC,EAAE,eAAe,CAAC,6BAA6B,CAAC;CAClD,CAAC;AAqBF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,MAAM,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAEjG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,0GAA0G;IAC1G,qFAAqF;IACrF,MAAM,oBAAoB,GAA8B,OAAO,CAC7D,GAAG,EAAE,CACH,WAAW,IAAI,YAAY;QACzB,CAAC,CAAC;YACE,2FAA2F;YAC3F,wDAAwD;YACxD,CAAC,EAAE,CAAC,WAAW,GAAG,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC,6BAA6B,CAAC;YAC3G,CAAC,EACC,CAAC,YAAY,GAAG,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC,6BAA6B,CAAC;SAC7G;QACH,CAAC,CAAC,SAAS,EACf,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAC/E,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,oBAAoB,EACrC,eAAe,EAAE,oBAAoB,IAEpC,mBAAmB,CACR,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ContextualMenu, IDragOptions } from '@fluentui/react';\nimport { _convertRemToPx } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { useTheme } from '../../theming';\nimport { _ICoordinates, _ModalClone } from '../ModalClone/ModalClone';\nimport { floatingLocalVideoModalStyle, localVideoTileOuterPaddingRem } from './styles/FloatingLocalVideo.styles';\n\nconst DRAG_OPTIONS: IDragOptions = {\n moveMenuItemText: 'Move',\n closeMenuItemText: 'Close',\n menu: ContextualMenu,\n keepInBounds: true\n};\n\n// Manually override the max position used to keep the modal in the bounds of its container.\n// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122\n// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)\n// position the modal can be dragged to.\nconst modalMaxDragPosition = {\n x: _convertRemToPx(localVideoTileOuterPaddingRem),\n y: _convertRemToPx(localVideoTileOuterPaddingRem)\n};\n\n/*\n @private\n /\nexport interface FloatingLocalVideoProps {\n // Local video component to make draggable\n localVideoComponent: JSX.Element;\n // Element id of layer host to constrain the dragging of local video\n layerHostId: string;\n // Parent component width in px\n parentWidth?: number;\n // Parent component height in px\n parentHeight?: number;\n // Local video width and height in rem\n localVideoSizeRem: {\n width: number;\n height: number;\n };\n}\n\n/\n @private\n */\nexport const FloatingLocalVideo = (props: FloatingLocalVideoProps): JSX.Element => {\n const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;\n\n const theme = useTheme();\n\n // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able\n // to be dragged offscreen and these are the top and left bounds of that calculation.\n const modalMinDragPosition: _ICoordinates \| undefined = useMemo(\n () =>\n parentWidth && parentHeight\n ? {\n // We use -parentWidth/Height because our modal is positioned to start in the bottom right,\n // hence (0,0) is the bottom right of the video gallery.\n x: -parentWidth + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(localVideoTileOuterPaddingRem),\n y:\n -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(localVideoTileOuterPaddingRem)\n }\n : undefined,\n [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]\n );\n\n const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);\n const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);\n\n return (\n <_ModalClone\n isOpen={true}\n isModeless={true}\n dragOptions={DRAG_OPTIONS}\n styles={modalStyles}\n layerProps={layerProps}\n maxDragPosition={modalMaxDragPosition}\n minDragPosition={modalMinDragPosition}\n >\n {localVideoComponent}\n </_ModalClone>\n );\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js CHANGED Viewed

@@ -9,9 +9,9 @@ import { isNarrowWidth } from '../utils/responsive';
 /* @conditional-compile-remove(vertical-gallery) */
 import { isShortHeight } from '../utils/responsive';
 import { FloatingLocalVideo } from './FloatingLocalVideo';
-import { LARGE_FLOATING_MODAL_SIZE_PX, localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX, SMALL_FLOATING_MODAL_SIZE_PX } from './styles/FloatingLocalVideo.styles';
+import { LARGE_FLOATING_MODAL_SIZE_REM, localVideoTileContainerStyle, localVideoTileWithControlsContainerStyle, LOCAL_VIDEO_TILE_ZINDEX, SMALL_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
 /* @conditional-compile-remove(vertical-gallery) */
-import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX } from './styles/FloatingLocalVideo.styles';
+import { SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM, VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM } from './styles/FloatingLocalVideo.styles';
 import { innerLayoutStyle, layerHostStyle, rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
 import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
@@ -65,19 +65,19 @@ export const FloatingLocalVideoLayout = (props) => {
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = useId('layerhost');
-    const localVideoSize = useMemo(() => {
+    const localVideoSizeRem = useMemo(() => {
         if (isNarrow) {
-            return SMALL_FLOATING_MODAL_SIZE_PX;
+            return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         /* @conditional-compile-remove(vertical-gallery) */
         if ((horizontalGalleryTiles.length > 0 || !!screenShareComponent) && overflowGalleryLayout === 'VerticalRight') {
             return isNarrow
-                ? SMALL_FLOATING_MODAL_SIZE_PX
+                ? SMALL_FLOATING_MODAL_SIZE_REM
                 : isShort
-                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX
-                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX;
+                    ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
+                    : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
         }
-        return LARGE_FLOATING_MODAL_SIZE_PX;
+        return LARGE_FLOATING_MODAL_SIZE_REM;
     }, [
         horizontalGalleryTiles.length,
         isNarrow,
@@ -87,10 +87,10 @@ export const FloatingLocalVideoLayout = (props) => {
     ]);
     const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
     // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
-    showCameraSwitcherInLocalPreview ? (React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSize), {
+    showCameraSwitcherInLocalPreview ? (React.createElement(Stack, { className: mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
             boxShadow: theme.effects.elevation8,
             zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 || !!screenShareComponent ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSize)) }, localVideoComponent)) : (React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSize: localVideoSize, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 || !!screenShareComponent ? (React.createElement(Stack, { className: mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem)) }, localVideoComponent)) : (React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = useMemo(() => {
         if (horizontalGalleryTiles.length === 0 && !screenShareComponent) {
             return null;

package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map CHANGED Viewed

	@@ -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, useState } 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 \|\| !!screenShareComponent;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n /\n instantiate indexes available to render with indexes available that would be on first page\n \n For some components which do not strictly follow the order of the array, we might\n * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n * this case when those components are here\n /\n const [indexesToRender, setIndexesToRender] = useState<number[]>([\n ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()\n ]);\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p, i) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && indexesToRender.includes(i) && 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 \|\| !!screenShareComponent) && 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 / @conditional-compile-remove(vertical-gallery) / screenShareComponent\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 \|\| !!screenShareComponent ? (\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 && !screenShareComponent) {\n return null;\n }\n return (\n <OverflowGallery\n / @conditional-compile-remove(vertical-gallery) /\n isShort={isShort}\n onFetchTilesToRender={setIndexesToRender}\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 setIndexesToRender,\n screenShareComponent,\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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,mDAAmD;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EACL,6BAA6B,EAC7B,4BAA4B,EAC5B,wCAAwC,EACxC,uBAAuB,EACvB,6BAA6B,EAC9B,MAAM,oCAAoC,CAAC;AAC5C,mDAAmD;AACnD,OAAO,EACL,8CAA8C,EAC9C,wCAAwC,EACzC,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAC7G,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAkBpD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAe,EAAE;IAC5F,MAAM,EACJ,kBAAkB,GAAG,EAAE,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,MAAM,EACN,qBAAqB,EACrB,gCAAgC,EAChC,WAAW,EACX,YAAY;IACZ,sDAAsD,CAAC,wBAAwB;IAC/E,mDAAmD,CAAC,qBAAqB,GAAG,kBAAkB,EAC/F,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElE,mDAAmD;IACnD,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnE,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,qBAAqB,GAAG,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,oBAAoB,CAAC;IAEtF,IAAI,CAAC,qBAAqB,IAAI,mBAAmB,EAAE;QACjD,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACrC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW;QAC/D,GAAG,KAAK,CAAC,qBAAqB,GAAG,kBAAkB,CAAC,CAAC,IAAI,EAAE;KAC5D,CAAC,CAAC;IAEH,MAAM,sBAAsB,GAAG,6BAA6B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;;QACxE,OAAO,yBAAyB,CAC9B,CAAC,EACD,qBAAqB,IAAI,qBAAqB,IAAI,CAAC;YACjD,CAAC,CAAC,CAAA,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,KAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,GAAG,qBAAqB;YAC3G,CAAC,CAAC,MAAA,CAAC,CAAC,WAAW,0CAAE,WAAW,CAC/B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEvC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,QAAQ,EAAE;YACZ,OAAO,6BAA6B,CAAC;SACtC;QACD,mDAAmD;QACnD,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,oBAAoB,CAAC,IAAI,qBAAqB,KAAK,eAAe,EAAE;YAC9G,OAAO,QAAQ;gBACb,CAAC,CAAC,6BAA6B;gBAC/B,CAAC,CAAC,OAAO;oBACT,CAAC,CAAC,8CAA8C;oBAChD,CAAC,CAAC,wCAAwC,CAAC;SAC9C;QACD,OAAO,6BAA6B,CAAC;IACvC,CAAC,EAAE;QACD,sBAAsB,CAAC,MAAM;QAC7B,QAAQ;QACR,mDAAmD,CAAC,OAAO;QAC3D,mDAAmD,CAAC,qBAAqB;QACzE,mDAAmD,CAAC,oBAAoB;KACzE,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAC9B,mBAAmB,IAAI,qBAAqB,CAAC,CAAC,CAAC;IAC7C,kGAAkG;IAClG,gCAAgC,CAAC,CAAC,CAAC,CACjC,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,wCAAwC,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE;YACzF,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,MAAM,EAAE,uBAAuB;SAChC,CAAC,IAED,mBAAmB,CACd,CACT,CAAC,CAAC,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAChE,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,4BAA4B,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,IAClF,mBAAmB,CACd,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,IACjB,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,GAC1B,CACH,CACF,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAChE,OAAO,IAAI,CAAC;SACb;QACD,OAAO,CACL,oBAAC,eAAe;QACd,mDAAmD;;YAAnD,mDAAmD;YACnD,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,kBAAkB,EACxC,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,IAAI,EAC3B,uBAAuB,EAAE,sBAAsB,EAC/C,uBAAuB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;YAClD,mDAAmD;YACnD,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;YAC9C,mDAAmD;YACnD,qBAAqB,EAAE,qBAAqB,GAC5C,CACH,CAAC;IACJ,CAAC,EAAE;QACD,QAAQ;QACR,mDAAmD,CAAC,OAAO;QAC3D,sBAAsB;QACtB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB;QACzB,kBAAkB;QAClB,oBAAoB;QACpB,mDAAmD,CAAC,qBAAqB;QACzE,mDAAmD,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe;KAC5E,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,eAAe;QAC3B,0BAA0B;QAC3B,oBAAC,SAAS,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,GAAI;QACtE,oBAAC,KAAK;QACJ,mDAAmD;;YAAnD,mDAAmD;YACnD,UAAU,EAAE,qBAAqB,KAAK,eAAe,EACrD,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,qBAAqB;YAE5B,oBAAoB,CAAC,CAAC,CAAC,CACtB,oBAAoB,CACrB,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,GAAG,EAAC,aAAa,EAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IACrD,SAAS,CACC,CACd;YACA,eAAe,CACV,CACF,CACT,CAAC;AACJ,CAAC,CAAC","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, useState } 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_REM,\n localVideoTileContainerStyle,\n localVideoTileWithControlsContainerStyle,\n LOCAL_VIDEO_TILE_ZINDEX,\n SMALL_FLOATING_MODAL_SIZE_REM\n} from './styles/FloatingLocalVideo.styles';\n/ @conditional-compile-remove(vertical-gallery) /\nimport {\n SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,\n VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\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 \|\| !!screenShareComponent;\n\n if (!shouldFloatLocalVideo && localVideoComponent) {\n gridTiles.push(localVideoComponent);\n }\n\n /\n instantiate indexes available to render with indexes available that would be on first page\n \n For some components which do not strictly follow the order of the array, we might\n * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n * this case when those components are here\n /\n const [indexesToRender, setIndexesToRender] = useState<number[]>([\n ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()\n ]);\n\n const horizontalGalleryTiles = horizontalGalleryParticipants.map((p, i) => {\n return onRenderRemoteParticipant(\n p,\n maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n : p.videoStream?.isAvailable\n );\n });\n\n const layerHostId = useId('layerhost');\n\n const localVideoSizeRem = useMemo(() => {\n if (isNarrow) {\n return SMALL_FLOATING_MODAL_SIZE_REM;\n }\n / @conditional-compile-remove(vertical-gallery) /\n if ((horizontalGalleryTiles.length > 0 \|\| !!screenShareComponent) && overflowGalleryLayout === 'VerticalRight') {\n return isNarrow\n ? SMALL_FLOATING_MODAL_SIZE_REM\n : isShort\n ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM\n : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;\n }\n return LARGE_FLOATING_MODAL_SIZE_REM;\n }, [\n horizontalGalleryTiles.length,\n isNarrow,\n / @conditional-compile-remove(vertical-gallery) / isShort,\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryLayout,\n / @conditional-compile-remove(vertical-gallery) / screenShareComponent\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, localVideoSizeRem), {\n boxShadow: theme.effects.elevation8,\n zIndex: LOCAL_VIDEO_TILE_ZINDEX\n })}\n >\n {localVideoComponent}\n </Stack>\n ) : horizontalGalleryTiles.length > 0 \|\| !!screenShareComponent ? (\n <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem))}>\n {localVideoComponent}\n </Stack>\n ) : (\n <FloatingLocalVideo\n localVideoComponent={localVideoComponent}\n layerHostId={layerHostId}\n localVideoSizeRem={localVideoSizeRem}\n parentWidth={parentWidth}\n parentHeight={parentHeight}\n />\n )\n ) : undefined;\n\n const overflowGallery = useMemo(() => {\n if (horizontalGalleryTiles.length === 0 && !screenShareComponent) {\n return null;\n }\n return (\n <OverflowGallery\n / @conditional-compile-remove(vertical-gallery) /\n isShort={isShort}\n onFetchTilesToRender={setIndexesToRender}\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 setIndexesToRender,\n screenShareComponent,\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"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { ResponsiveVerticalGallery } from '../ResponsiveVerticalGallery';
 import { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';
 /* @conditional-compile-remove(pinned-participants) */
 import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
-import { horizontalGalleryContainerStyle, horizontalGalleryStyle, LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM, SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';
+import { horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';
 /* @conditional-compile-remove(vertical-gallery) */
 import { verticalGalleryContainerStyle, verticalGalleryStyle } from './styles/VideoGalleryResponsiveVerticalGallery.styles';
 /**
@@ -55,6 +55,6 @@ export const OverflowGallery = (props) => {
     if (isNarrow) {
         return (React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements, onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
     }
-    return (React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, overflowGalleryElements));
+    return (React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, overflowGalleryElements));
 };
 //# sourceMappingURL=OverflowGallery.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js.map CHANGED Viewed

	@@ -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,KAY/B,EAAe,EAAE;IAChB,MAAM,EACJ,qBAAqB,GAAG,KAAK,EAC7B,oBAAoB,EACpB,QAAQ,GAAG,KAAK;IAChB,mDAAmD;IACnD,OAAO,GAAG,KAAK,EACf,uBAAuB,EACvB,uBAAuB;IACvB,mDAAmD,CAAC,qBAAqB,GAAG,kBAAkB;IAC9F,mDAAmD,CAAC,qBAAqB,EAC1E,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,mDAAmD;QACnD,IAAI,qBAAqB,KAAK,eAAe,EAAE;YAC7C,OAAO,6BAA6B,CAAC,qBAAqB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;SAChF;QACD,OAAO,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,EAAE;QACD,qBAAqB;QACrB,mDAAmD,CAAC,OAAO;QAC3D,QAAQ;QACR,mDAAmD,CAAC,qBAAqB;KAC1E,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,mDAAmD;QACnD,IAAI,qBAAqB,KAAK,eAAe,EAAE;YAC7C,OAAO,eAAe,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC;SAC9E;QACD,OAAO,eAAe,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,CAAC;IACpF,CAAC,EAAE;QACD,QAAQ;QACR,mDAAmD,CAAC,OAAO;QAC3D,uBAAuB;QACvB,mDAAmD,CAAC,qBAAqB;QACzE,mDAAmD,CAAC,qBAAqB;KAC1E,CAAC,CAAC;IAEH,mDAAmD;IACnD,IAAI,qBAAqB,KAAK,eAAe,EAAE;QAC7C,OAAO,CACL,oBAAC,yBAAyB,IACxB,GAAG,EAAC,6BAA6B,EACjC,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,aAAsC,EAC7D,mBAAmB,EAAE,+BAA+B,EACpD,YAAY,EAAE,sBAAsB,EACpC,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,oBAAoB,IAEzC,uBAAuB,CACE,CAC7B,CAAC;KACH;IAED,sDAAsD;IACtD,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,oBAAC,2BAA2B,IAC1B,yBAAyB,EAAE,uBAAuB,EAClD,oBAAoB,EAAE,oBAAoB,EAC1C,GAAG,EAAC,+BAA+B,GACnC,CACH,CAAC;KACH;IAED,OAAO,CACL,oBAAC,2BAA2B,IAC1B,GAAG,EAAC,+BAA+B,EACnC,eAAe,EAAE,eAAe,EAChC,oBAAoB,EAAE,oBAAoB,EAC1C,uBAAuB,EAAE,aAAa,EACtC,~~aAAa,EACX,QAAQ,CAAC,CAAC,CAAC,sCAAsC,CAAC,KAAK,CAAC,CAAC,CAAC,sCAAsC,CAAC,KAAK,EAExG,~~cAAc,EAAE,+BAA+B,EAC/C,WAAW,EAAE,sBAAsB,IAElC,uBAAuB,CACI,CAC/B,CAAC;AACJ,CAAC,CAAC","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 onFetchTilesToRender?: (indexes: number[]) => void;\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 onFetchTilesToRender,\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 onFetchTilesToRender={onFetchTilesToRender}\n >\n {overflowGalleryElements}\n </ResponsiveVerticalGallery>\n );\n }\n\n / @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n return (\n <ScrollableHorizontalGallery\n horizontalGalleryElements={overflowGalleryElements}\n onFetchTilesToRender={onFetchTilesToRender}\n key=\"scrollable-horizontal-gallery\"\n />\n );\n }\n\n return (\n <ResponsiveHorizontalGallery\n key=\"responsive-horizontal-gallery\"\n containerStyles={containerStyles}\n onFetchTilesToRender={onFetchTilesToRender}\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"]}
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} 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 onFetchTilesToRender?: (indexes: number[]) => void;\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 onFetchTilesToRender,\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 onFetchTilesToRender={onFetchTilesToRender}\n >\n {overflowGalleryElements}\n </ResponsiveVerticalGallery>\n );\n }\n\n / @conditional-compile-remove(pinned-participants) */\n if (isNarrow) {\n return (\n <ScrollableHorizontalGallery\n horizontalGalleryElements={overflowGalleryElements}\n onFetchTilesToRender={onFetchTilesToRender}\n key=\"scrollable-horizontal-gallery\"\n />\n );\n }\n\n return (\n <ResponsiveHorizontalGallery\n key=\"responsive-horizontal-gallery\"\n containerStyles={containerStyles}\n onFetchTilesToRender={onFetchTilesToRender}\n horizontalGalleryStyles={galleryStyles}\n buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH}\n gapWidthRem={HORIZONTAL_GALLERY_GAP}\n >\n {overflowGalleryElements}\n </ResponsiveHorizontalGallery>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ export declare const videoGalleryContainerStyle: IStackStyles;
 /**
  * Small floating modal width and height in rem for small screen
  */
-export declare const SMALL_FLOATING_MODAL_SIZE_PX: {
+export declare const SMALL_FLOATING_MODAL_SIZE_REM: {
     width: number;
     height: number;
 };
@@ -19,7 +19,7 @@ export declare const SMALL_FLOATING_MODAL_SIZE_PX: {
  * Large floating modal width and height in rem for large screen
  * Aspect ratio: 16:9
  */
-export declare const LARGE_FLOATING_MODAL_SIZE_PX: {
+export declare const LARGE_FLOATING_MODAL_SIZE_REM: {
     width: number;
     height: number;
 };
@@ -27,7 +27,7 @@ export declare const LARGE_FLOATING_MODAL_SIZE_PX: {
  * Vertical gallery floating modal width and height in rem
  * Aspect ratio: 16:9
  */
-export declare const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX: {
+export declare const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM: {
     width: number;
     height: number;
 };
@@ -35,7 +35,7 @@ export declare const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX: {
  * Vertical gallery floating modal width and height in rem
  * Aspect ratio: 16:9
  */
-export declare const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX: {
+export declare const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM: {
     width: number;
     height: number;
 };
@@ -47,30 +47,30 @@ export declare const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-export declare const localVideoTileContainerStyle: (theme: Theme, localVideoTileSize: {
+export declare const localVideoTileContainerStyle: (theme: Theme, localVideoTileSizeRem: {
     width: number;
     height: number;
 }) => IStyle;
 /**
  * @private
  */
-export declare const localVideoTileWithControlsContainerStyle: (theme: Theme, localVideoTileSize: {
+export declare const localVideoTileWithControlsContainerStyle: (theme: Theme, localVideoTileSizeRem: {
     width: number;
     height: number;
 }) => IStackStyles;
 /**
  * @private
  */
-export declare const floatingLocalVideoModalStyle: (theme: Theme, modalSize: {
+export declare const floatingLocalVideoModalStyle: (theme: Theme, modalSizeRem: {
     width: number;
     height: number;
 }) => IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;
 /**
  * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
+ * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.
  * @private
  */
-export declare const localVideoTileOuterPaddingPX = 8;
+export declare const localVideoTileOuterPaddingRem = 0.5;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js CHANGED Viewed

@@ -15,22 +15,22 @@ export const videoGalleryContainerStyle = {
 /**
  * Small floating modal width and height in rem for small screen
  */
-export const SMALL_FLOATING_MODAL_SIZE_PX = { width: 58, height: 104 };
+export const SMALL_FLOATING_MODAL_SIZE_REM = { width: 3.625, height: 6.5 };
 /**
  * Large floating modal width and height in rem for large screen
  * Aspect ratio: 16:9
  */
-export const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
+export const LARGE_FLOATING_MODAL_SIZE_REM = { width: 13.438, height: 7.5 };
 /**
  * Vertical gallery floating modal width and height in rem
  * Aspect ratio: 16:9
  */
-export const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 144, height: 81 };
+export const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 9, height: 5.063 };
 /**
  * Vertical gallery floating modal width and height in rem
  * Aspect ratio: 16:9
  */
-export const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_PX = { width: 176, height: 100 };
+export const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM = { width: 11, height: 6.25 };
 /**
  * @private
  * z-index to ensure that the local video tile is above the video gallery.
@@ -39,31 +39,31 @@ export const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-export const localVideoTileContainerStyle = (theme, localVideoTileSize) => {
+export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem) => {
     return {
-        minWidth: _pxToRem(localVideoTileSize.width),
-        minHeight: _pxToRem(localVideoTileSize.height),
+        minWidth: `${localVideoTileSizeRem.width}rem`,
+        minHeight: `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
-        bottom: _pxToRem(localVideoTileOuterPaddingPX),
+        bottom: `${localVideoTileOuterPaddingRem}rem`,
         borderRadius: theme.effects.roundedCorner4,
         overflow: 'hidden',
-        right: _pxToRem(localVideoTileOuterPaddingPX)
+        right: `${localVideoTileOuterPaddingRem}rem`
     };
 };
 /**
  * @private
  */
-export const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSize) => {
-    return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSize), {
+export const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem) => {
+    return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {
         root: { boxShadow: theme.effects.elevation8 }
     });
 };
 /**
  * @private
  */
-export const floatingLocalVideoModalStyle = (theme, modalSize) => {
+export const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     return concatStyleSets({
-        main: localVideoTileContainerStyle(theme, modalSize)
+        main: localVideoTileContainerStyle(theme, modalSizeRem)
     }, {
         main: {
             boxShadow: theme.effects.elevation8,
@@ -76,10 +76,10 @@ export const floatingLocalVideoModalStyle = (theme, modalSize) => {
 };
 /**
  * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
+ * i.e. if this is 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.
  * @private
  */
-export const localVideoTileOuterPaddingPX = 8;
+export const localVideoTileOuterPaddingRem = 0.5;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js.map CHANGED Viewed

	@@ -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,~~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	+ {"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_REM = { width: 3.625, height: 6.5 };\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_REM = { width: 13.438, height: 7.5 };\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_REM = { width: 9, height: 5.063 };\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_REM = { width: 11, height: 6.25 };\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 localVideoTileSizeRem: { width: number; height: number }\n): IStyle => {\n return {\n minWidth: `${localVideoTileSizeRem.width}rem`,\n minHeight: `${localVideoTileSizeRem.height}rem`,\n position: 'absolute',\n bottom: `${localVideoTileOuterPaddingRem}rem`,\n borderRadius: theme.effects.roundedCorner4,\n overflow: 'hidden',\n right: `${localVideoTileOuterPaddingRem}rem`\n };\n};\n\n/\n @private\n /\nexport const localVideoTileWithControlsContainerStyle = (\n theme: Theme,\n localVideoTileSizeRem: { width: number; height: number }\n): IStackStyles => {\n return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n root: { boxShadow: theme.effects.elevation8 }\n });\n};\n\n/\n @private\n /\nexport const floatingLocalVideoModalStyle = (\n theme: Theme,\n modalSizeRem: { width: number; height: number }\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n return concatStyleSets(\n {\n main: localVideoTileContainerStyle(theme, modalSizeRem)\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 0.5rem, the modal should always be at least 0.5rem inside the container at all times on all sides.\n * @private\n /\nexport const localVideoTileOuterPaddingRem = 0.5;\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\""]}