@azure/communication-react 1.7.0-beta.2 → 1.7.1-alpha-202308170011

package/dist/dist-esm/react-components/src/components/VideoGallery/LocalScreenShare.js

@@ -18,14 +18,14 @@ export const LocalScreenShare = React.memo((props) => {
     if (!localParticipant || !localParticipant.isScreenSharingOn) {
         return null;
     }
-    const localScreenSharingNotification = React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
-        React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: {
-                childrenGap: '1rem'
-            } },
+    const localScreenSharingNotification = (React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
+        React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: { childrenGap: '1rem' } },
             React.createElement(Stack, { horizontal: true, verticalAlign: "center", className: screenSharingNotificationIconContainerStyle },
                 React.createElement(Icon, { iconName: "ControlButtonScreenShareStart", className: screenSharingNotificationIconStyle(theme) })),
-            React.createElement(Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage)));
-    const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName) ? locale.strings.videoGallery.displayNamePlaceholder : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
-    return React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React.createElement(React.Fragment, null) }, localScreenSharingNotification);
+            React.createElement(Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage))));
+    const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName)
+        ? locale.strings.videoGallery.displayNamePlaceholder
+        : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
+    return (React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React.createElement(React.Fragment, null) }, localScreenSharingNotification));
 });
 //# sourceMappingURL=LocalScreenShare.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/LocalScreenShare.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,2BAA2B,EAAE,uCAAuC,EAAE,2CAA2C,EAAE,kCAAkC,EAAE,kCAAkC,EAAE,MAAM,kCAAkC,CAAC;AAE7O;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAE3C,EAAE,EAAE;IACH,MAAM,EACJ,gBAAgB,EACjB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE;QAC5D,OAAO,IAAI,CAAC;KACb;IACD,MAAM,8BAA8B,GAAG,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2BAA2B;QAChI,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,uCAAuC,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE;gBAC1H,WAAW,EAAE,MAAM;aACpB;YACG,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2CAA2C;gBAC7F,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,kCAAkC,CAAC,KAAK,CAAC,GAAI,CACjG;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,kCAAkC,eAAY,QAAQ,IACpE,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAClD,CACD,CACF,CAAC;IACX,MAAM,WAAW,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAA,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAC;IACxI,OAAO,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,yCAAK,IAC3G,8BAA8B,CACrB,CAAC;AACjB,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../../localization';\nimport { useTheme } from '../../theming';\nimport { VideoGalleryLocalParticipant } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport { screenSharingContainerStyle, screenSharingNotificationContainerStyle, screenSharingNotificationIconContainerStyle, screenSharingNotificationIconStyle, screenSharingNotificationTextStyle } from './styles/LocalScreenShare.styles';\n\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const LocalScreenShare = React.memo((props: {\n  localParticipant: VideoGalleryLocalParticipant;\n}) => {\n  const {\n    localParticipant\n  } = props;\n  const theme = useTheme();\n  const locale = useLocale();\n  if (!localParticipant || !localParticipant.isScreenSharingOn) {\n    return null;\n  }\n  const localScreenSharingNotification = <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={screenSharingContainerStyle}>\n      <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={screenSharingNotificationContainerStyle(theme)} tokens={{\n      childrenGap: '1rem'\n    }}>\n        <Stack horizontal verticalAlign=\"center\" className={screenSharingNotificationIconContainerStyle}>\n          <Icon iconName=\"ControlButtonScreenShareStart\" className={screenSharingNotificationIconStyle(theme)} />\n        </Stack>\n        <Text className={screenSharingNotificationTextStyle} aria-live=\"polite\">\n          {locale.strings.videoGallery.screenIsBeingSharedMessage}\n        </Text>\n      </Stack>\n    </Stack>;\n  const displayName = !localParticipant?.displayName ? locale.strings.videoGallery.displayNamePlaceholder : localParticipant?.displayName;\n  return <VideoTile displayName={displayName} isMuted={localParticipant?.isMuted} onRenderPlaceholder={() => <></>}>\n      {localScreenSharingNotification}\n    </VideoTile>;\n});"]}
+{"version":3,"file":"LocalScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/LocalScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACL,2BAA2B,EAC3B,uCAAuC,EACvC,2CAA2C,EAC3C,kCAAkC,EAClC,kCAAkC,EACnC,MAAM,kCAAkC,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAyD,EAAE,EAAE;IACvG,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAEnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,gBAAgB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE;QAC5D,OAAO,IAAI,CAAC;KACb;IAED,MAAM,8BAA8B,GAAG,CACrC,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2BAA2B;QAC3F,oBAAC,KAAK,IACJ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,uCAAuC,CAAC,KAAK,CAAC,EACzD,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;YAE/B,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,2CAA2C;gBAC7F,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,kCAAkC,CAAC,KAAK,CAAC,GAAI,CACjG;YACR,oBAAC,IAAI,IAAC,SAAS,EAAE,kCAAkC,eAAY,QAAQ,IACpE,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,CAClD,CACD,CACF,CACT,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAA;QAChD,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB;QACpD,CAAC,CAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,CAAC;IAElC,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,yCAAK,IACtG,8BAA8B,CACrB,CACb,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../../localization';\nimport { useTheme } from '../../theming';\nimport { VideoGalleryLocalParticipant } from '../../types';\nimport { VideoTile } from '../VideoTile';\nimport {\n  screenSharingContainerStyle,\n  screenSharingNotificationContainerStyle,\n  screenSharingNotificationIconContainerStyle,\n  screenSharingNotificationIconStyle,\n  screenSharingNotificationTextStyle\n} from './styles/LocalScreenShare.styles';\n\n/**\n * A memoized version of local screen share component. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const LocalScreenShare = React.memo((props: { localParticipant: VideoGalleryLocalParticipant }) => {\n  const { localParticipant } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  if (!localParticipant || !localParticipant.isScreenSharingOn) {\n    return null;\n  }\n\n  const localScreenSharingNotification = (\n    <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={screenSharingContainerStyle}>\n      <Stack\n        horizontalAlign=\"center\"\n        verticalAlign=\"center\"\n        className={screenSharingNotificationContainerStyle(theme)}\n        tokens={{ childrenGap: '1rem' }}\n      >\n        <Stack horizontal verticalAlign=\"center\" className={screenSharingNotificationIconContainerStyle}>\n          <Icon iconName=\"ControlButtonScreenShareStart\" className={screenSharingNotificationIconStyle(theme)} />\n        </Stack>\n        <Text className={screenSharingNotificationTextStyle} aria-live=\"polite\">\n          {locale.strings.videoGallery.screenIsBeingSharedMessage}\n        </Text>\n      </Stack>\n    </Stack>\n  );\n\n  const displayName = !localParticipant?.displayName\n    ? locale.strings.videoGallery.displayNamePlaceholder\n    : localParticipant?.displayName;\n\n  return (\n    <VideoTile displayName={displayName} isMuted={localParticipant?.isMuted} onRenderPlaceholder={() => <></>}>\n      {localScreenSharingNotification}\n    </VideoTile>\n  );\n});\n"]}

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

@@ -28,25 +28,36 @@ export const OverflowGallery = (props) => {
             return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);
         }
         return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
-    }, [shouldFloatLocalVideo, /* @conditional-compile-remove(vertical-gallery) */ isShort, isNarrow, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition]);
+    }, [
+        shouldFloatLocalVideo,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
+    ]);
     const galleryStyles = useMemo(() => {
         /* @conditional-compile-remove(vertical-gallery) */
         if (overflowGalleryPosition === 'VerticalRight') {
             return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);
         }
         return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);
-    }, [isNarrow, /* @conditional-compile-remove(vertical-gallery) */ isShort, horizontalGalleryStyles, /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition, /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles]);
+    }, [
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        horizontalGalleryStyles,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles
+    ]);
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryPosition === 'VerticalRight') {
-        return React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]);
+        return (React.createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]));
     }
     /* @conditional-compile-remove(pinned-participants) */
     if (isNarrow) {
         // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
         // participant tiles are visible
         onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
-        return React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" });
+        return (React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
     }
-    return React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]);
+    return (React.createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React.createElement(React.Fragment, null)]));
 };
 //# sourceMappingURL=OverflowGallery.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 { OverflowGalleryPosition } from '../VideoGallery';\n/* @conditional-compile-remove(pinned-participants) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport { horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { verticalGalleryContainerStyle, verticalGalleryStyle } 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  verticalGalleryStyles?: VerticalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\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) */overflowGalleryPosition = 'HorizontalBottom',\n    /* @conditional-compile-remove(vertical-gallery) */verticalGalleryStyles,\n    onChildrenPerPageChange\n  } = props;\n  const containerStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'VerticalRight') {\n      return verticalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow, isShort);\n    }\n    return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n  }, [shouldFloatLocalVideo, /* @conditional-compile-remove(vertical-gallery) */isShort, isNarrow, /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition]);\n  const galleryStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'VerticalRight') {\n      return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);\n    }\n    return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n  }, [isNarrow, /* @conditional-compile-remove(vertical-gallery) */isShort, horizontalGalleryStyles, /* @conditional-compile-remove(vertical-gallery) */overflowGalleryPosition, /* @conditional-compile-remove(vertical-gallery) */verticalGalleryStyles]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  if (overflowGalleryPosition === 'VerticalRight') {\n    return <ResponsiveVerticalGallery key=\"responsive-vertical-gallery\" containerStyles={containerStyles} verticalGalleryStyles={(galleryStyles as VerticalGalleryStyles)} controlBarHeightRem={HORIZONTAL_GALLERY_BUTTON_WIDTH} gapHeightRem={HORIZONTAL_GALLERY_GAP} isShort={isShort} onFetchTilesToRender={onFetchTilesToRender} onChildrenPerPageChange={onChildrenPerPageChange}>\n        {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n      </ResponsiveVerticalGallery>;\n  }\n\n  /* @conditional-compile-remove(pinned-participants) */\n  if (isNarrow) {\n    // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote\n    // participant tiles are visible\n    onChildrenPerPageChange?.(3);\n    return <ScrollableHorizontalGallery horizontalGalleryElements={overflowGalleryElements ? overflowGalleryElements : [<></>]} onFetchTilesToRender={onFetchTilesToRender} key=\"scrollable-horizontal-gallery\" />;\n  }\n  return <ResponsiveHorizontalGallery key=\"responsive-horizontal-gallery\" containerStyles={containerStyles} onFetchTilesToRender={onFetchTilesToRender} horizontalGalleryStyles={galleryStyles} buttonWidthRem={HORIZONTAL_GALLERY_BUTTON_WIDTH} gapWidthRem={HORIZONTAL_GALLERY_GAP} onChildrenPerPageChange={onChildrenPerPageChange}>\n      {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n    </ResponsiveHorizontalGallery>;\n};"]}
+{"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 { OverflowGalleryPosition } 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  verticalGalleryStyles?: VerticalGalleryStyles;\n  /* @conditional-compile-remove(vertical-gallery) */\n  overflowGalleryPosition?: OverflowGalleryPosition;\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\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) */ overflowGalleryPosition = 'HorizontalBottom',\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles,\n    onChildrenPerPageChange\n  } = props;\n\n  const containerStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === '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) */ overflowGalleryPosition\n  ]);\n\n  const galleryStyles = useMemo(() => {\n    /* @conditional-compile-remove(vertical-gallery) */\n    if (overflowGalleryPosition === 'VerticalRight') {\n      return concatStyleSets(verticalGalleryStyle(isShort), verticalGalleryStyles);\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) */ overflowGalleryPosition,\n    /* @conditional-compile-remove(vertical-gallery) */ verticalGalleryStyles\n  ]);\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  if (overflowGalleryPosition === '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        onChildrenPerPageChange={onChildrenPerPageChange}\n      >\n        {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n      </ResponsiveVerticalGallery>\n    );\n  }\n\n  /* @conditional-compile-remove(pinned-participants) */\n  if (isNarrow) {\n    // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote\n    // participant tiles are visible\n    onChildrenPerPageChange?.(3);\n    return (\n      <ScrollableHorizontalGallery\n        horizontalGalleryElements={overflowGalleryElements ? 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      onChildrenPerPageChange={onChildrenPerPageChange}\n    >\n      {overflowGalleryElements ? overflowGalleryElements : [<></>]}\n    </ResponsiveHorizontalGallery>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteScreenShare.js

@@ -24,13 +24,15 @@ export const RemoteScreenShare = React.memo((props) => {
             onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
         };
     }, [onDisposeRemoteStreamView, userId]);
-    const loadingMessage = displayName ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
-        participant: displayName
-    }) : '';
-    return React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) });
+    const loadingMessage = displayName
+        ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
+            participant: displayName
+        })
+        : '';
+    return (React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
 });
 const LoadingSpinner = (props) => {
-    return React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },
-        React.createElement(Spinner, { label: props.loadingMessage, size: SpinnerSize.xSmall, "aria-live": 'assertive' }));
+    return (React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },
+        React.createElement(Spinner, { label: props.loadingMessage, size: SpinnerSize.xSmall, "aria-live": 'assertive' })));
 };
 //# sourceMappingURL=RemoteScreenShare.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/RemoteScreenShare.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAU5C,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,aAAa,EAAE;QAClB,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,CAAC,CAAC;KAC9D;IACD,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;QACxG,WAAW,EAAE,WAAW;KACzB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACR,OAAO,oBAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAAC,CAAC,CAAC,SAAS,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAAI,CAAC;AAC3S,CAAC,CAAC,CAAC;AACH,MAAM,cAAc,GAAG,CAAC,KAEvB,EAAe,EAAE;IAChB,OAAO,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACxD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo((props: {\n  userId: string;\n  displayName?: string;\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  isAvailable?: boolean;\n  isReceiving?: boolean;\n  isMuted?: boolean;\n  isSpeaking?: boolean;\n  renderElement?: HTMLElement;\n}) => {\n  const {\n    userId,\n    displayName,\n    isMuted,\n    renderElement,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    isReceiving\n  } = props;\n  const locale = useLocale();\n  if (!renderElement) {\n    onCreateRemoteStreamView && onCreateRemoteStreamView(userId);\n  }\n  useEffect(() => {\n    return () => {\n      // TODO: Isolate disposing behaviors for screenShare and videoStream\n      onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n    };\n  }, [onDisposeRemoteStreamView, userId]);\n  const loadingMessage = displayName ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n    participant: displayName\n  }) : '';\n  return <VideoTile displayName={displayName} isMuted={isMuted} renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} /> : undefined} onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />} />;\n});\nconst LoadingSpinner = (props: {\n  loadingMessage: string;\n}): JSX.Element => {\n  return <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>;\n};\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"RemoteScreenShare.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/RemoteScreenShare.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,sCAAgC;AAExD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CACzC,CAAC,KAaA,EAAE,EAAE;IACH,MAAM,EACJ,MAAM,EACN,WAAW,EACX,OAAO,EACP,aAAa,EACb,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACZ,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,aAAa,EAAE;QAClB,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,CAAC,CAAC;KAC9D;IAED,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,oEAAoE;YACpE,yBAAyB,IAAI,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC;IAExC,MAAM,cAAc,GAAG,WAAW;QAChC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE;YACnE,WAAW,EAAE,WAAW;SACzB,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,aAAa,EACX,aAAa,CAAC,CAAC,CAAC,CACd,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,EAEf,mBAAmB,EAAE,GAAG,EAAE,CAAC,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAC7E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAiC,EAAe,EAAE;IACxE,OAAO,CACL,oBAAC,KAAK,IAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,YAAY;QACnD,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,eAAa,WAAW,GAAI,CACpF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Spinner, SpinnerSize, Stack } from '@fluentui/react';\nimport React, { useEffect } from 'react';\nimport { useLocale } from '../../localization';\nimport { StreamMedia } from '../StreamMedia';\nimport { VideoTile } from '../VideoTile';\nimport { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';\nimport { loadingStyle } from './styles/RemoteScreenShare.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * A memoized version of VideoTile for rendering the remote screen share stream. React.memo is used for a performance\n * boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.\n * https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport const RemoteScreenShare = React.memo(\n  (props: {\n    userId: string;\n    displayName?: string;\n    onCreateRemoteStreamView?: (\n      userId: string,\n      options?: VideoStreamOptions\n    ) => Promise<void | CreateVideoStreamViewResult>;\n    onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n    isAvailable?: boolean;\n    isReceiving?: boolean;\n    isMuted?: boolean;\n    isSpeaking?: boolean;\n    renderElement?: HTMLElement;\n  }) => {\n    const {\n      userId,\n      displayName,\n      isMuted,\n      renderElement,\n      onCreateRemoteStreamView,\n      onDisposeRemoteStreamView,\n      isReceiving\n    } = props;\n    const locale = useLocale();\n\n    if (!renderElement) {\n      onCreateRemoteStreamView && onCreateRemoteStreamView(userId);\n    }\n\n    useEffect(() => {\n      return () => {\n        // TODO: Isolate disposing behaviors for screenShare and videoStream\n        onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);\n      };\n    }, [onDisposeRemoteStreamView, userId]);\n\n    const loadingMessage = displayName\n      ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {\n          participant: displayName\n        })\n      : '';\n\n    return (\n      <VideoTile\n        displayName={displayName}\n        isMuted={isMuted}\n        renderElement={\n          renderElement ? (\n            <StreamMedia videoStreamElement={renderElement} loadingState={isReceiving === false ? 'loading' : 'none'} />\n          ) : undefined\n        }\n        onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}\n      />\n    );\n  }\n);\n\nconst LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {\n  return (\n    <Stack verticalAlign=\"center\" className={loadingStyle}>\n      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />\n    </Stack>\n  );\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.js

@@ -18,9 +18,7 @@ export const ScrollableHorizontalGallery = (props) => {
     }, [onFetchTilesToRender, horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length]);
     const ref = useRef();
     const { events: dragabbleEvents } = useDraggable(ref);
-    return React.createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: scrollableHorizontalGalleryContainerStyles }),
-        React.createElement(Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: {
-                childrenGap: '0.5rem'
-            } }, horizontalGalleryElements));
+    return (React.createElement("div", Object.assign({ ref: ref }, dragabbleEvents, { className: scrollableHorizontalGalleryContainerStyles }),
+        React.createElement(Stack, { "data-ui-id": "scrollable-horizontal-gallery", horizontal: true, styles: scrollableHorizontalGalleryStyles, tokens: { childrenGap: '0.5rem' } }, horizontalGalleryElements)));
 };
 //# sourceMappingURL=ScrollableHorizontalGallery.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,0CAA0C,EAAE,iCAAiC,EAAE,MAAM,4CAA4C,CAAC;AAE3I;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAG3C,EAAe,EAAE;IAChB,MAAM,EACJ,yBAAyB,EACzB,oBAAoB,EACrB,GAAG,KAAK,CAAC;IACV,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE;YACxC,oBAAoB,CAAC,YAAY,CAAC,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;IAC9D,MAAM,GAAG,GAAI,MAAM,EAA+D,CAAC;IACnF,MAAM,EACJ,MAAM,EAAE,eAAe,EACxB,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACtB,OAAO,2CAAK,GAAG,EAAE,GAAG,IAAM,eAAe,IAAE,SAAS,EAAE,0CAA0C;QAC5F,oBAAC,KAAK,kBAAY,+BAA+B,EAAC,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,iCAAiC,EAAE,MAAM,EAAE;gBACvH,WAAW,EAAE,QAAQ;aACtB,IACI,yBAAyB,CACpB,CACJ,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport { scrollableHorizontalGalleryContainerStyles, scrollableHorizontalGalleryStyles } from './styles/ScrollableHorizontalGallery.style';\n\n/**\n * Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n  horizontalGalleryElements?: JSX.Element[];\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}): JSX.Element => {\n  const {\n    horizontalGalleryElements,\n    onFetchTilesToRender\n  } = props;\n  useEffect(() => {\n    const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray);\n    }\n  }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n  const ref = (useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>);\n  const {\n    events: dragabbleEvents\n  } = useDraggable(ref);\n  return <div ref={ref} {...dragabbleEvents} className={scrollableHorizontalGalleryContainerStyles}>\n      <Stack data-ui-id=\"scrollable-horizontal-gallery\" horizontal={true} styles={scrollableHorizontalGalleryStyles} tokens={{\n      childrenGap: '0.5rem'\n    }}>\n        {horizontalGalleryElements}\n      </Stack>\n    </div>;\n};"]}
+{"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,0CAA0C,EAC1C,iCAAiC,EAClC,MAAM,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAG3C,EAAe,EAAE;IAChB,MAAM,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE;YACxC,oBAAoB,CAAC,YAAY,CAAC,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;IAE9D,MAAM,GAAG,GAAG,MAAM,EAA8D,CAAC;IACjF,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,IAAM,eAAe,IAAE,SAAS,EAAE,0CAA0C;QACvF,oBAAC,KAAK,kBACO,+BAA+B,EAC1C,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,iCAAiC,EACzC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAEhC,yBAAyB,CACpB,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport {\n  scrollableHorizontalGalleryContainerStyles,\n  scrollableHorizontalGalleryStyles\n} from './styles/ScrollableHorizontalGallery.style';\n\n/**\n * Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n  horizontalGalleryElements?: JSX.Element[];\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}): JSX.Element => {\n  const { horizontalGalleryElements, onFetchTilesToRender } = props;\n\n  useEffect(() => {\n    const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray);\n    }\n  }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n\n  const ref = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n  const { events: dragabbleEvents } = useDraggable(ref);\n\n  return (\n    <div ref={ref} {...dragabbleEvents} className={scrollableHorizontalGalleryContainerStyles}>\n      <Stack\n        data-ui-id=\"scrollable-horizontal-gallery\"\n        horizontal={true}\n        styles={scrollableHorizontalGalleryStyles}\n        tokens={{ childrenGap: '0.5rem' }}\n      >\n        {horizontalGalleryElements}\n      </Stack>\n    </div>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/DefaultLayout.styles.js

@@ -4,11 +4,6 @@
  * @private
  */
 export const rootLayoutStyle = {
-    root: {
-        position: 'relative',
-        height: '100%',
-        width: '100%',
-        padding: '0.5rem'
-    }
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
 };
 //# sourceMappingURL=DefaultLayout.styles.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/DefaultLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/DefaultLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    padding: '0.5rem'\n  }\n};"]}
+{"version":3,"file":"DefaultLayout.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/DefaultLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;CACjF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n"]}

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

@@ -50,7 +50,7 @@ export declare const LOCAL_VIDEO_TILE_ZINDEX = 2;
 export declare const localVideoTileContainerStyle: (theme: Theme, localVideoTileSizeRem: {
     width: number;
     height: number;
-}, screenSharePresent?: boolean | undefined) => IStyle;
+}, screenSharePresent?: boolean | undefined, overflowGalleryPosition?: "HorizontalBottom" | "VerticalRight" | "HorizontalTop" | undefined) => IStyle;
 /**
  * @private
  */

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

@@ -5,53 +5,32 @@ import { _pxToRem } from "../../../../../acs-ui-common/src";
 /**
  * @private
  */
-export const videoGalleryOuterDivStyle = mergeStyles({
-    position: 'relative',
-    width: '100%',
-    height: '100%'
-});
+export const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });
 /**
  * @private
  */
 export const videoGalleryContainerStyle = {
-    root: {
-        position: 'relative',
-        height: '100%',
-        width: '100%',
-        padding: '0.5rem'
-    }
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
 };
 /**
  * Small floating modal width and height in rem for small screen
  */
-export const SMALL_FLOATING_MODAL_SIZE_REM = {
-    width: 3.625,
-    height: 6.5
-};
+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_REM = {
-    width: 13.438,
-    height: 7.5
-};
+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_REM = {
-    width: 9,
-    height: 5.063
-};
+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_REM = {
-    width: 11,
-    height: 6.25
-};
+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.
@@ -60,14 +39,15 @@ export const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent) => {
+export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent, overflowGalleryPosition) => {
     return {
         width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',
         height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',
         minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
         minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
-        bottom: `${localVideoTileOuterPaddingRem}rem`,
+        bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
+        top: overflowGalleryPosition === 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',
         borderRadius: theme.effects.roundedCorner4,
         overflow: 'hidden',
         right: `${localVideoTileOuterPaddingRem}rem`
@@ -78,9 +58,7 @@ export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, scree
  */
 export const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem) => {
     return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {
-        root: {
-            boxShadow: theme.effects.elevation8
-        }
+        root: { boxShadow: theme.effects.elevation8 }
     });
 };
 /**
@@ -128,9 +106,7 @@ export const localVideoCameraCycleButtonStyles = (theme) => {
             right: '0rem',
             top: '0rem',
             color: '#FFFFFF',
-            // only shows up on running video feed to we want to force specific colours.
             zIndex: 2,
-            // shows the button directly over the local video feed.
             background: 'rgba(0,0,0,0.4)',
             borderRadius: theme.effects.roundedCorner2
         },

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideo.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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 { concatStyleSets, IButtonStyles, IModalStyleProps, IModalStyles, IStackStyles, IStyle, IStyleFunctionOrObject, mergeStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({\n  position: 'relative',\n  width: '100%',\n  height: '100%'\n});\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_REM = {\n  width: 3.625,\n  height: 6.5\n};\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 = {\n  width: 13.438,\n  height: 7.5\n};\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 = {\n  width: 9,\n  height: 5.063\n};\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 = {\n  width: 11,\n  height: 6.25\n};\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 = (theme: Theme, localVideoTileSizeRem: {\n  width: number;\n  height: number;\n}, screenSharePresent?: boolean): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${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 = (theme: Theme, localVideoTileSizeRem: {\n  width: number;\n  height: number;\n}): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {\n    root: {\n      boxShadow: theme.effects.elevation8\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (theme: Theme, modalSizeRem: {\n  width: number;\n  height: number;\n}): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets({\n    main: localVideoTileContainerStyle(theme, modalSizeRem)\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  }, localVideoModalStyles);\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',\n      // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2,\n      // 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\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};\"../../../../../acs-ui-common/src\""]}
+{"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  screenSharePresent?: boolean,\n  overflowGalleryPosition?: 'HorizontalBottom' | 'VerticalRight' | 'HorizontalTop'\n): IStyle => {\n  return {\n    width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',\n    height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',\n    minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,\n    minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,\n    position: 'absolute',\n    bottom: overflowGalleryPosition !== 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',\n    top: overflowGalleryPosition === 'HorizontalTop' ? `${localVideoTileOuterPaddingRem}rem` : 'unset',\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\""]}

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

@@ -4,22 +4,13 @@
  * @private
  */
 export const rootLayoutStyle = {
-    root: {
-        position: 'relative',
-        height: '100%',
-        width: '100%'
-    }
+    root: { position: 'relative', height: '100%', width: '100%' }
 };
 /**
  * @private
  */
 export const innerLayoutStyle = {
-    root: {
-        position: 'relative',
-        height: '100%',
-        width: '100%',
-        padding: '0.5rem'
-    }
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
 };
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLocalVideoLayout.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/FloatingLocalVideoLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAiB;IAC5C,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,2EAA2E;IAC3E,aAAa,EAAE,MAAM;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, IStyle } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const innerLayoutStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * @private\n */\nexport const layerHostStyle: IStyle = {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  // pointer events for layerHost set to none to make descendants interactive\n  pointerEvents: 'none'\n};"]}
+{"version":3,"file":"FloatingLocalVideoLayout.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideoLayout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CAC9D,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAiB;IAC5C,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,cAAc,GAAW;IACpC,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,2EAA2E;IAC3E,aAAa,EAAE,MAAM;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, IStyle } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const rootLayoutStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%' }\n};\n\n/**\n * @private\n */\nexport const innerLayoutStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * @private\n */\nexport const layerHostStyle: IStyle = {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  // pointer events for layerHost set to none to make descendants interactive\n  pointerEvents: 'none'\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/Layout.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/Layout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiB;IACjD,WAAW,EAAE,QAAQ;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackTokens } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const videoGalleryLayoutGap: IStackTokens = {\n  childrenGap: '0.5rem'\n};"]}
+{"version":3,"file":"Layout.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/Layout.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiB;IACjD,WAAW,EAAE,QAAQ;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackTokens } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const videoGalleryLayoutGap: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/LocalScreenShare.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalScreenShare.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/LocalScreenShare.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACrD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IAC3F,eAAe,EAAE,SAAS;IAC1B,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;CACtC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2CAA2C,GAAG,WAAW,CAAC;IACrE,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,CAAC;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IACtF,2FAA2F;IAC3F,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;CACrC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,WAAW,CAAC;IAC5D,QAAQ,EAAE,MAAM;IAChB,kHAAkH;IAClH,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const screenSharingContainerStyle = mergeStyles({\n  width: '100%',\n  height: '100%'\n});\n\n/**\n * @private\n */\nexport const screenSharingNotificationContainerStyle = (theme: Theme): string => mergeStyles({\n  backgroundColor: 'inherit',\n  padding: '1rem',\n  maxWidth: '95%',\n  borderRadius: theme.effects.roundedCorner4,\n  color: theme.palette.neutralSecondary\n});\n\n/**\n * @private\n */\nexport const screenSharingNotificationIconContainerStyle = mergeStyles({\n  height: '2rem',\n  lineHeight: 0\n});\n\n/**\n * @private\n */\nexport const screenSharingNotificationIconStyle = (theme: Theme): string => mergeStyles({\n  // svg is (20px x 20px) but path is only (16px x 12px), so need to scale at 2.5 to get 40px\n  transform: 'scale(2.5)',\n  color: theme.palette.neutralTertiary\n});\n\n/**\n * @private\n */\nexport const screenSharingNotificationTextStyle = mergeStyles({\n  fontSize: '1rem',\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit'\n});"]}
+{"version":3,"file":"LocalScreenShare.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/LocalScreenShare.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACrD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uCAAuC,GAAG,CAAC,KAAY,EAAU,EAAE,CAC9E,WAAW,CAAC;IACV,eAAe,EAAE,SAAS;IAC1B,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;CACtC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,2CAA2C,GAAG,WAAW,CAAC;IACrE,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,CAAC;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,KAAY,EAAU,EAAE,CACzE,WAAW,CAAC;IACV,2FAA2F;IAC3F,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;CACrC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,WAAW,CAAC;IAC5D,QAAQ,EAAE,MAAM;IAChB,kHAAkH;IAClH,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const screenSharingContainerStyle = mergeStyles({\n  width: '100%',\n  height: '100%'\n});\n\n/**\n * @private\n */\nexport const screenSharingNotificationContainerStyle = (theme: Theme): string =>\n  mergeStyles({\n    backgroundColor: 'inherit',\n    padding: '1rem',\n    maxWidth: '95%',\n    borderRadius: theme.effects.roundedCorner4,\n    color: theme.palette.neutralSecondary\n  });\n\n/**\n * @private\n */\nexport const screenSharingNotificationIconContainerStyle = mergeStyles({\n  height: '2rem',\n  lineHeight: 0\n});\n\n/**\n * @private\n */\nexport const screenSharingNotificationIconStyle = (theme: Theme): string =>\n  mergeStyles({\n    // svg is (20px x 20px) but path is only (16px x 12px), so need to scale at 2.5 to get 40px\n    transform: 'scale(2.5)',\n    color: theme.palette.neutralTertiary\n  });\n\n/**\n * @private\n */\nexport const screenSharingNotificationTextStyle = mergeStyles({\n  fontSize: '1rem',\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit'\n});\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/RemoteScreenShare.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteScreenShare.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/RemoteScreenShare.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const loadingStyle = mergeStyles({\n  height: '100%',\n  width: '100%'\n});"]}
+{"version":3,"file":"RemoteScreenShare.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/RemoteScreenShare.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const loadingStyle = mergeStyles({\n  height: '100%',\n  width: '100%'\n});\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/RemoteVideoTile.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteVideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/RemoteVideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAkB;IACxD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,uBAAuB,GAEhC;IACF,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,+DAA+D;QAC/D,uCAAuC;QACvC,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { CSSProperties } from 'react';\n\n/** @private */\nexport const remoteVideoTileWrapperStyle: CSSProperties = {\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n};\n\n/** @private */\nexport const drawerMenuWrapperStyles: {\n  root: IStyle;\n} = {\n  root: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    // Any zIndex > 0 will work because this is the only absolutely\n    // positioned element in the container.\n    zIndex: 2\n  }\n};"]}
+{"version":3,"file":"RemoteVideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/RemoteVideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAkB;IACxD,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,uBAAuB,GAAqB;IACvD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,+DAA+D;QAC/D,uCAAuC;QACvC,MAAM,EAAE,CAAC;KACV;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { CSSProperties } from 'react';\n\n/** @private */\nexport const remoteVideoTileWrapperStyle: CSSProperties = {\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n};\n\n/** @private */\nexport const drawerMenuWrapperStyles: { root: IStyle } = {\n  root: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    // Any zIndex > 0 will work because this is the only absolutely\n    // positioned element in the container.\n    zIndex: 2\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.js

@@ -24,8 +24,6 @@ export const scrollableHorizontalGalleryContainerStyles = mergeStyles({
     overflow: 'scroll',
     '-ms-overflow-style': 'none',
     'scrollbar-width': 'none',
-    '::-webkit-scrollbar': {
-        display: 'none'
-    }
+    '::-webkit-scrollbar': { display: 'none' }
 });
 //# sourceMappingURL=ScrollableHorizontalGallery.style.js.map

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableHorizontalGallery.style.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,mCAAmC,EAAE,MAAM,kDAAkD,CAAC;AAE/I;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAiB;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;QAChE,YAAY,EAAE,QAAQ;QACtB,KAAK,EAAE,mCAAmC;KAC3C;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0CAA0C,GAAG,WAAW,CAAC;IACpE,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,eAAe,6BAA6B,CAAC,KAAK,MAAM;IAC/D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,QAAQ;IAClB,oBAAoB,EAAE,MAAM;IAC5B,iBAAiB,EAAE,MAAM;IACzB,qBAAqB,EAAE;QACrB,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles } from '@fluentui/react';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\nimport { SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM, SMALL_HORIZONTAL_GALLERY_TILE_STYLE } from './VideoGalleryResponsiveHorizontalGallery.styles';\n\n/**\n * @private\n */\nexport const scrollableHorizontalGalleryStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n    paddingRight: '0.5rem',\n    '> *': SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n  }\n};\n\n/**\n * @private\n */\nexport const scrollableHorizontalGalleryContainerStyles = mergeStyles({\n  display: 'flex',\n  width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,\n  minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  overflow: 'scroll',\n  '-ms-overflow-style': 'none',\n  'scrollbar-width': 'none',\n  '::-webkit-scrollbar': {\n    display: 'none'\n  }\n});"]}
+{"version":3,"file":"ScrollableHorizontalGallery.style.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EACL,sCAAsC,EACtC,mCAAmC,EACpC,MAAM,kDAAkD,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAiB;IAC7D,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;QAChE,YAAY,EAAE,QAAQ;QACtB,KAAK,EAAE,mCAAmC;KAC3C;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0CAA0C,GAAG,WAAW,CAAC;IACpE,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,eAAe,6BAA6B,CAAC,KAAK,MAAM;IAC/D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,QAAQ;IAClB,oBAAoB,EAAE,MAAM;IAC5B,iBAAiB,EAAE,MAAM;IACzB,qBAAqB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CAC3C,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles } from '@fluentui/react';\nimport { SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\nimport {\n  SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM,\n  SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n} from './VideoGalleryResponsiveHorizontalGallery.styles';\n\n/**\n * @private\n */\nexport const scrollableHorizontalGalleryStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n    paddingRight: '0.5rem',\n    '> *': SMALL_HORIZONTAL_GALLERY_TILE_STYLE\n  }\n};\n\n/**\n * @private\n */\nexport const scrollableHorizontalGalleryContainerStyles = mergeStyles({\n  display: 'flex',\n  width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,\n  minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  overflow: 'scroll',\n  '-ms-overflow-style': 'none',\n  'scrollbar-width': 'none',\n  '::-webkit-scrollbar': { display: 'none' }\n});\n"]}

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.js

@@ -6,8 +6,14 @@ import { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './
  */
 export const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
     return {
-        minHeight: isNarrow ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem` : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-        width: shouldFloatLocalVideo ? isNarrow ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)` : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)` : '100%',
+        minHeight: isNarrow
+            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
+            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+        width: shouldFloatLocalVideo
+            ? isNarrow
+                ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`
+                : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`
+            : '100%',
         paddingRight: '0.5rem'
     };
 };
@@ -23,19 +29,12 @@ export const horizontalGalleryStyle = (isNarrow) => {
  * Small horizontal gallery tile size in rem
  * @private
  */
-export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = {
-    height: 6.5,
-    width: 6.5
-};
+export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };
 /**
  * Large horizontal gallery tile size in rem
  * @private
  */
-export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = {
-    height: 7.5,
-    minWidth: 7.5,
-    maxWidth: 13.43
-};
+export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,qBAA8B,EAAE,QAAiB,EAAU,EAAE;IAC3G,OAAO;QACL,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;QACnI,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM;QACtK,YAAY,EAAE,QAAQ;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,QAAiB,EAA2B,EAAE;IACnF,OAAO;QACL,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,mCAAmC;KAC/F,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG;IACpD,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;CACX,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG;IACpD,MAAM,EAAE,GAAG;IACX,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;IAC9D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;CAC/D,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { HorizontalGalleryStyles } from '../../HorizontalGallery';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\n\n/**\n * @private\n */\nexport const horizontalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean): IStyle => {\n  return {\n    minHeight: isNarrow ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem` : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n    width: shouldFloatLocalVideo ? isNarrow ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)` : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)` : '100%',\n    paddingRight: '0.5rem'\n  };\n};\n\n/**\n * @private\n */\nexport const horizontalGalleryStyle = (isNarrow: boolean): HorizontalGalleryStyles => {\n  return {\n    children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE\n  };\n};\n\n/**\n * Small horizontal gallery tile size in rem\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = {\n  height: 6.5,\n  width: 6.5\n};\n\n/**\n * Large horizontal gallery tile size in rem\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = {\n  height: 7.5,\n  minWidth: 7.5,\n  maxWidth: 13.43\n};\n\n/**\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {\n  minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n/**\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {\n  minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth}rem`,\n  maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,\n  width: '100%',\n  height: '100%'\n};"]}
+{"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,OAAO,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,qBAA8B,EAAE,QAAiB,EAAU,EAAE;IAC3G,OAAO;QACL,SAAS,EAAE,QAAQ;YACjB,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;YACvD,CAAC,CAAC,GAAG,sCAAsC,CAAC,MAAM,KAAK;QACzD,KAAK,EAAE,qBAAqB;YAC1B,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM;gBAC1D,CAAC,CAAC,eAAe,6BAA6B,CAAC,KAAK,MAAM;YAC5D,CAAC,CAAC,MAAM;QACV,YAAY,EAAE,QAAQ;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,QAAiB,EAA2B,EAAE;IACnF,OAAO;QACL,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,mCAAmC;KAC/F,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AAElF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAEtG;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;IAC9D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;CAC/D,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,QAAQ,KAAK;IACjE,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { HorizontalGalleryStyles } from '../../HorizontalGallery';\nimport { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';\n\n/**\n * @private\n */\nexport const horizontalGalleryContainerStyle = (shouldFloatLocalVideo: boolean, isNarrow: boolean): IStyle => {\n  return {\n    minHeight: isNarrow\n      ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`\n      : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n    width: shouldFloatLocalVideo\n      ? isNarrow\n        ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`\n        : `calc(100% - ${LARGE_FLOATING_MODAL_SIZE_REM.width}rem)`\n      : '100%',\n    paddingRight: '0.5rem'\n  };\n};\n\n/**\n * @private\n */\nexport const horizontalGalleryStyle = (isNarrow: boolean): HorizontalGalleryStyles => {\n  return {\n    children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE\n  };\n};\n\n/**\n * Small horizontal gallery tile size in rem\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };\n\n/**\n * Large horizontal gallery tile size in rem\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, minWidth: 7.5, maxWidth: 13.43 };\n\n/**\n * @private\n */\nexport const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {\n  minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,\n  maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n/**\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {\n  minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth}rem`,\n  maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,\n  width: '100%',\n  height: '100%'\n};\n"]}