@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.0

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { HorizontalGalleryStyles } from '../HorizontalGallery';
+/**
+ * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
+ *
+ * @private
+ */
+export declare const OverflowGallery: (props: {
+    shouldFloatLocalVideo?: boolean | undefined;
+    onFetchTilesToRender?: ((indexes: number[]) => void) | undefined;
+    isNarrow?: boolean | undefined;
+    overflowGalleryElements?: JSX.Element[] | undefined;
+    horizontalGalleryStyles?: HorizontalGalleryStyles | undefined;
+    onChildrenPerPageChange?: ((childrenPerPage: number) => void) | undefined;
+}) => JSX.Element;
+//# sourceMappingURL=OverflowGallery.d.ts.map

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

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { concatStyleSets } from '@fluentui/react';
+import React, { useMemo } from 'react';
+import { ResponsiveHorizontalGallery } from '../ResponsiveHorizontalGallery';
+import { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';
+import { horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';
+/**
+ * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
+ *
+ * @private
+ */
+export const OverflowGallery = (props) => {
+    const { shouldFloatLocalVideo = false, onFetchTilesToRender, isNarrow = false, overflowGalleryElements, horizontalGalleryStyles, onChildrenPerPageChange } = props;
+    const containerStyles = useMemo(() => {
+        return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);
+    }, [shouldFloatLocalVideo, isNarrow]);
+    const galleryStyles = useMemo(() => {
+        return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);
+    }, [isNarrow, horizontalGalleryStyles]);
+    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);
+};
+//# sourceMappingURL=OverflowGallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowGallery.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC7G,OAAO,EAAE,+BAA+B,EAAE,sBAAsB,EAAE,MAAM,yDAAyD,CAAC;AAClI;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAO/B,EAAe,EAAE;IAChB,MAAM,EACJ,qBAAqB,GAAG,KAAK,EAC7B,oBAAoB,EACpB,QAAQ,GAAG,KAAK,EAChB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,+BAA+B,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,eAAe,CAAC,sBAAsB,CAAC,QAAQ,CAAC,EAAE,uBAAuB,CAAC,CAAC;IACpF,CAAC,EAAE,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC,CAAC;IACxC,OAAO,oBAAC,2BAA2B,IAAC,GAAG,EAAC,+BAA+B,EAAC,eAAe,EAAE,eAAe,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,aAAa,EAAE,cAAc,EAAE,+BAA+B,EAAE,WAAW,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,uBAAuB,IAC/T,uBAAuB,CACI,CAAC;AACnC,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';\nimport { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styles/HorizontalGallery.styles';\nimport { horizontalGalleryContainerStyle, horizontalGalleryStyle } from './styles/VideoGalleryResponsiveHorizontalGallery.styles';\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  overflowGalleryElements?: JSX.Element[];\n  horizontalGalleryStyles?: HorizontalGalleryStyles;\n  onChildrenPerPageChange?: (childrenPerPage: number) => void;\n}): JSX.Element => {\n  const {\n    shouldFloatLocalVideo = false,\n    onFetchTilesToRender,\n    isNarrow = false,\n    overflowGalleryElements,\n    horizontalGalleryStyles,\n    onChildrenPerPageChange\n  } = props;\n  const containerStyles = useMemo(() => {\n    return horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow);\n  }, [shouldFloatLocalVideo, isNarrow]);\n  const galleryStyles = useMemo(() => {\n    return concatStyleSets(horizontalGalleryStyle(isNarrow), horizontalGalleryStyles);\n  }, [isNarrow, horizontalGalleryStyles]);\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}\n    </ResponsiveHorizontalGallery>;\n};"]}

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

@@ -24,15 +24,13 @@ 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":["../../../../../../../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\""]}
+{"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\""]}

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

@@ -4,6 +4,11 @@
  * @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":["../../../../../../../../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"]}
+{"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};"]}

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

@@ -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,23 @@ 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;
+};
+/**
+ * Vertical gallery floating modal width and height in rem
+ * Aspect ratio: 16:9
+ */
+export declare const SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM: {
+    width: number;
+    height: number;
+};
+/**
+ * Vertical gallery floating modal width and height in rem
+ * Aspect ratio: 16:9
+ */
+export declare const VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM: {
     width: number;
     height: number;
 };
@@ -31,21 +47,30 @@ export declare const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-export declare const localVideoTileContainerStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStyle;
+export declare const localVideoTileContainerStyle: (theme: Theme, localVideoTileSizeRem: {
+    width: number;
+    height: number;
+}) => IStyle;
 /**
  * @private
  */
-export declare const localVideoTileWithControlsContainerStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStackStyles;
+export declare const localVideoTileWithControlsContainerStyle: (theme: Theme, localVideoTileSizeRem: {
+    width: number;
+    height: number;
+}) => IStackStyles;
 /**
  * @private
  */
-export declare const floatingLocalVideoModalStyle: (theme: Theme, isNarrow?: boolean | undefined) => IStyleFunctionOrObject<IModalStyleProps, IModalStyles>;
+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

@@ -5,22 +5,53 @@ 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_PX = { width: 64, height: 88 };
+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_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
+};
 /**
  * @private
  * z-index to ensure that the local video tile is above the video gallery.
@@ -29,25 +60,33 @@ export const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-export const localVideoTileContainerStyle = (theme, isNarrow) => {
-    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
-        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
-        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
+export const localVideoTileContainerStyle = (theme, localVideoTileSizeRem) => {
+    return {
+        minWidth: `${localVideoTileSizeRem.width}rem`,
+        minHeight: `${localVideoTileSizeRem.height}rem`,
+        position: 'absolute',
+        bottom: `${localVideoTileOuterPaddingRem}rem`,
+        borderRadius: theme.effects.roundedCorner4,
+        overflow: 'hidden',
+        right: `${localVideoTileOuterPaddingRem}rem`
+    };
 };
 /**
  * @private
  */
-export const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
-    return concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
-        root: { boxShadow: theme.effects.elevation8 }
+export const localVideoTileWithControlsContainerStyle = (theme, localVideoTileSizeRem) => {
+    return concatStyleSets(localVideoTileContainerStyle(theme, localVideoTileSizeRem), {
+        root: {
+            boxShadow: theme.effects.elevation8
+        }
     });
 };
 /**
  * @private
  */
-export const floatingLocalVideoModalStyle = (theme, isNarrow) => {
+export const floatingLocalVideoModalStyle = (theme, modalSizeRem) => {
     return concatStyleSets({
-        main: localVideoTileContainerStyle(theme, isNarrow)
+        main: localVideoTileContainerStyle(theme, modalSizeRem)
     }, {
         main: {
             boxShadow: theme.effects.elevation8,
@@ -60,10 +99,10 @@ export const floatingLocalVideoModalStyle = (theme, isNarrow) => {
 };
 /**
  * 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
  */
@@ -87,7 +126,9 @@ 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":["../../../../../../../../react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  concatStyleSets,\n  IButtonStyles,\n  IModalStyleProps,\n  IModalStyles,\n  IStackStyles,\n  IStyle,\n  IStyleFunctionOrObject,\n  mergeStyles,\n  Theme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { VideoTileStylesProps } from '../../VideoTile';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * Small floating modal width and height in rem for small screen\n */\nexport const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };\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 * @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, isNarrow?: boolean): IStyle => {\n  return {\n    minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width),\n    minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height),\n    position: 'absolute',\n    bottom: _pxToRem(localVideoTileOuterPaddingPX),\n    borderRadius: theme.effects.roundedCorner4,\n    overflow: 'hidden',\n    ...(theme.rtl\n      ? { left: _pxToRem(localVideoTileOuterPaddingPX) }\n      : { right: _pxToRem(localVideoTileOuterPaddingPX) })\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileWithControlsContainerStyle = (theme: Theme, isNarrow?: boolean): IStackStyles => {\n  return concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {\n    root: { boxShadow: theme.effects.elevation8 }\n  });\n};\n\n/**\n * @private\n */\nexport const floatingLocalVideoModalStyle = (\n  theme: Theme,\n  isNarrow?: boolean\n): IStyleFunctionOrObject<IModalStyleProps, IModalStyles> => {\n  return concatStyleSets(\n    {\n      main: localVideoTileContainerStyle(theme, isNarrow)\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\""]}
+{"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}): 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 = (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\""]}

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

@@ -4,13 +4,22 @@
  * @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":["../../../../../../../../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"]}
+{"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};"]}

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

@@ -1 +1 @@
-{"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"]}
+{"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};"]}

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

@@ -1 +1 @@
-{"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"]}
+{"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});"]}

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

@@ -1 +1 @@
-{"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"]}
+{"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});"]}

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

@@ -1 +1 @@
-{"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"]}
+{"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};"]}

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

@@ -22,7 +22,8 @@ export declare const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
  */
 export declare const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM: {
     height: number;
-    width: number;
+    minWidth: number;
+    maxWidth: number;
 };
 /**
  * @private
@@ -41,5 +42,7 @@ export declare const LARGE_HORIZONTAL_GALLERY_TILE_STYLE: {
     minWidth: string;
     maxHeight: string;
     maxWidth: string;
+    width: string;
+    height: string;
 };
 //# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.styles.d.ts.map

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

@@ -1,20 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { _pxToRem } from "../../../../../acs-ui-common/src";
-import { LARGE_FLOATING_MODAL_SIZE_PX, SMALL_FLOATING_MODAL_SIZE_PX } from './FloatingLocalVideo.styles';
+import { LARGE_FLOATING_MODAL_SIZE_REM, SMALL_FLOATING_MODAL_SIZE_REM } from './FloatingLocalVideo.styles';
 /**
  * @private
  */
 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% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
-                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
-            : '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'
     };
 };
@@ -30,12 +23,19 @@ export const horizontalGalleryStyle = (isNarrow) => {
  * Small horizontal gallery tile size in rem
  * @private
  */
-export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.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, width: 10 };
+export const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = {
+    height: 7.5,
+    minWidth: 7.5,
+    maxWidth: 13.43
+};
 /**
  * @private
  */
@@ -50,8 +50,10 @@ export const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
  */
 export const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
     minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.minWidth}rem`,
     maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.maxWidth}rem`,
+    width: '100%',
+    height: '100%'
 };
 //# sourceMappingURL=VideoGalleryResponsiveHorizontalGallery.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VideoGalleryResponsiveHorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD,OAAO,EAAE,4BAA4B,EAAE,4BAA4B,EAAE,MAAM,6BAA6B,CAAC;AAEzG;;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,QAAQ,CAAC,4BAA4B,CAAC,KAAK,CAAC,GAAG;gBAChE,CAAC,CAAC,eAAe,QAAQ,CAAC,4BAA4B,CAAC,KAAK,CAAC,GAAG;YAClE,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;AAClF;;;GAGG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAEjF;;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,KAAK,KAAK;IAC9D,SAAS,EAAE,GAAG,sCAAsC,CAAC,MAAM,KAAK;IAChE,QAAQ,EAAE,GAAG,sCAAsC,CAAC,KAAK,KAAK;CAC/D,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { HorizontalGalleryStyles } from '../../HorizontalGallery';\nimport { LARGE_FLOATING_MODAL_SIZE_PX, SMALL_FLOATING_MODAL_SIZE_PX } 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% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`\n        : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`\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: 5.5, width: 5.5 };\n/**\n * Large horizontal gallery tile size in rem\n * @private\n */\nexport const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };\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.width}rem`,\n  maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,\n  maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`\n};\n\"../../../../../acs-ui-common/src\""]}
+{"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};"]}

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

@@ -0,0 +1,64 @@
+import { IStyle } from '@fluentui/react';
+import { VerticalGalleryStyles } from '../../VerticalGallery';
+/**
+ * VerticalGallery tile size in rem:
+ *
+ * min - smallest possible size of the tile (90px)
+ * max - Largest size we want the vertical tiles (144px)
+ *
+ * @private
+ */
+export declare const SHORT_VERTICAL_GALLERY_TILE_SIZE_REM: {
+    minHeight: number;
+    maxHeight: number;
+    width: number;
+};
+/**
+ * VerticalGallery tile size in rem:
+ *
+ * min - smallest possible size of the tile (90px)
+ * max - Largest size we want the vertical tiles (144px)
+ *
+ * @private
+ */
+export declare const VERTICAL_GALLERY_TILE_SIZE_REM: {
+    minHeight: number;
+    maxHeight: number;
+    width: number;
+};
+/**
+ * Styles for the VerticalGallery's container set in parent.
+ *
+ * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.
+ *
+ * @param shouldFloatLocalVideo whether rendered in floating layout or not
+ * @returns Style set for VerticalGallery container.
+ */
+export declare const verticalGalleryContainerStyle: (shouldFloatLocalVideo: boolean, isNarrow: boolean, isShort: boolean) => IStyle;
+/**
+ * @private
+ */
+export declare const SHORT_VERTICAL_GALLERY_TILE_STYLE: {
+    minHeight: string;
+    minWidth: string;
+    maxHeight: string;
+    maxWidth: string;
+    width: string;
+    height: string;
+};
+/**
+ * @private
+ */
+export declare const VERTICAL_GALLERY_TILE_STYLE: {
+    minHeight: string;
+    minWidth: string;
+    maxHeight: string;
+    maxWidth: string;
+    width: string;
+    height: string;
+};
+/**
+ * @private
+ */
+export declare const verticalGalleryStyle: (isShort: boolean) => VerticalGalleryStyles;
+//# sourceMappingURL=VideoGalleryResponsiveVerticalGallery.styles.d.ts.map