@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.1-alpha-202306220014

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="react" />
+import { IIconProps, IStyle, ITooltipHostProps } from '@fluentui/react';
+/**
+ * Props for {@link _VideoEffectsItem}
+ *
+ * @internal
+ */
+export interface _VideoEffectsItemProps {
+    /**
+     * The key of the Video Background Effect.
+     * This is used to identify the Video Background Effect and is returned in the onChange event.
+     * It must be unique within the set of options.
+     * @example 'blur'
+     */
+    itemKey: string;
+    /**
+     * The text to display for the Video effects item.
+     */
+    title?: string;
+    /**
+     * Whether the Video effects item is currently in the selected state.
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Callback to invoke when the Video effects item is selected.
+     */
+    onSelect?: (key: string) => void;
+    /**
+     * Whether the Video effects item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The icon to display for the Video effects item.
+     * @default undefined (no icon)
+     */
+    iconProps?: IIconProps;
+    /**
+     * Properties to have a Tooltip display when hovering over the Video effects item.
+     * @default undefined (no tooltip)
+     */
+    tooltipProps?: ITooltipHostProps;
+    /**
+     * Aria label for the Video effects item.
+     */
+    ariaLabel?: string;
+    /**
+     * Background to display for the Video effects item.
+     * @default undefined (no background image)
+     */
+    backgroundProps?: {
+        /**
+         * The URL of the background image.
+         */
+        url: string;
+    };
+    /**
+     * Styles for the Video effects item.
+     */
+    styles?: _VideoEffectsItemStyles;
+}
+/**
+ * Styles for {@link _VideoEffectsItem}
+ *
+ * @internal
+ */
+export interface _VideoEffectsItemStyles {
+    /**
+     * Styles for the container of the Video effects item.
+     */
+    root: IStyle;
+    /**
+     * Styles for the container of the icon of the Video effects item.
+     */
+    iconContainer: IStyle;
+    /**
+     * Styles for the text container of the Video effects item.
+     */
+    textContainer: IStyle;
+}
+/**
+ * A component for displaying a Video Background Effect Option.
+ *
+ * @internal
+ */
+export declare const _VideoEffectsItem: (props: _VideoEffectsItemProps) => JSX.Element;
+//# sourceMappingURL=VideoEffectsItem.d.ts.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
+import React, { useCallback } from 'react';
+import { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';
+/**
+ * A component for displaying a Video Background Effect Option.
+ *
+ * @internal
+ */
+export const _VideoEffectsItem = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const theme = useTheme();
+    const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
+    const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
+    const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
+    const containerStyles = useCallback(() => videoEffectsItemContainerStyles({
+        theme,
+        isSelected,
+        disabled,
+        backgroundImage
+    }), [backgroundImage, disabled, isSelected, theme]);
+    return (React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
+        React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, "data-ui-id": `video-effects-item`, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, onKeyDown: disabled
+                ? undefined
+                : (e) => {
+                    var _a;
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey);
+                    }
+                }, tabIndex: props.disabled ? -1 : 0, "aria-label": props.ariaLabel, "aria-disabled": props.disabled, role: "button" },
+            props.iconProps && (React.createElement(Stack.Item, { styles: { root: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.iconContainer } },
+                React.createElement(Icon, Object.assign({}, props.iconProps)))),
+            props.title && (React.createElement(Stack.Item, { styles: { root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.textContainer } },
+                React.createElement(Text, { variant: "small" }, props.title))))));
+};
+//# sourceMappingURL=VideoEffectsItem.js.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,IAAI,EAIJ,WAAW,EACX,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AA8F5E;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAA,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,QAAQ,mCAAI,KAAK,CAAC;IACzC,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,GAAG,CAAC;IAEnD,MAAM,eAAe,GAAG,WAAW,CACjC,GAAG,EAAE,CACH,+BAA+B,CAAC;QAC9B,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EACJ,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAC/C,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACjC,oBAAC,KAAK,IACJ,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAC1C,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAC,QAAQ,EACxB,MAAM,EAAE,eAAe,gBACX,oBAAoB,EAChC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EACrE,SAAS,EACP,QAAQ;gBACN,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;;oBACJ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;wBACtC,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,KAAK,CAAC,OAAO,CAAC,CAAC;qBACjC;gBACH,CAAC,EAEP,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBACrB,KAAK,CAAC,SAAS,mBACZ,KAAK,CAAC,QAAQ,EAC7B,IAAI,EAAC,QAAQ;YAEZ,KAAK,CAAC,SAAS,IAAI,CAClB,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,EAAE;gBACvD,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB,CACd;YACA,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,EAAE;gBACvD,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,IAAE,KAAK,CAAC,KAAK,CAAQ,CAC/B,CACd,CACK,CACI,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  Icon,\n  IIconProps,\n  IStyle,\n  ITooltipHostProps,\n  mergeStyles,\n  Stack,\n  Text,\n  TooltipHost,\n  useTheme\n} from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { videoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\n\n/**\n * Props for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemProps {\n  /**\n   * The key of the Video Background Effect.\n   * This is used to identify the Video Background Effect and is returned in the onChange event.\n   * It must be unique within the set of options.\n   * @example 'blur'\n   */\n  itemKey: string;\n\n  /**\n   * The text to display for the Video effects item.\n   */\n  title?: string;\n\n  /**\n   * Whether the Video effects item is currently in the selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to invoke when the Video effects item is selected.\n   */\n  onSelect?: (key: string) => void;\n\n  /**\n   * Whether the Video effects item is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * The icon to display for the Video effects item.\n   * @default undefined (no icon)\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Properties to have a Tooltip display when hovering over the Video effects item.\n   * @default undefined (no tooltip)\n   */\n  tooltipProps?: ITooltipHostProps;\n\n  /**\n   * Aria label for the Video effects item.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Background to display for the Video effects item.\n   * @default undefined (no background image)\n   */\n  backgroundProps?: {\n    /**\n     * The URL of the background image.\n     */\n    url: string;\n  };\n\n  /**\n   * Styles for the Video effects item.\n   */\n  styles?: _VideoEffectsItemStyles;\n}\n\n/**\n * Styles for {@link _VideoEffectsItem}\n *\n * @internal\n */\nexport interface _VideoEffectsItemStyles {\n  /**\n   * Styles for the container of the Video effects item.\n   */\n  root: IStyle;\n\n  /**\n   * Styles for the container of the icon of the Video effects item.\n   */\n  iconContainer: IStyle;\n\n  /**\n   * Styles for the text container of the Video effects item.\n   */\n  textContainer: IStyle;\n}\n\n/**\n * A component for displaying a Video Background Effect Option.\n *\n * @internal\n */\nexport const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element => {\n  const theme = useTheme();\n  const isSelected = props.isSelected ?? false;\n  const disabled = props.disabled ?? false;\n  const backgroundImage = props.backgroundProps?.url;\n\n  const containerStyles = useCallback(\n    () =>\n      videoEffectsItemContainerStyles({\n        theme,\n        isSelected,\n        disabled,\n        backgroundImage\n      }),\n    [backgroundImage, disabled, isSelected, theme]\n  );\n\n  return (\n    <TooltipHost {...props.tooltipProps}>\n      <Stack\n        key={props.itemKey}\n        className={mergeStyles(props.styles?.root)}\n        verticalAlign=\"center\"\n        horizontalAlign=\"center\"\n        styles={containerStyles}\n        data-ui-id={`video-effects-item`}\n        onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n        onKeyDown={\n          disabled\n            ? undefined\n            : (e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  props.onSelect?.(props.itemKey);\n                }\n              }\n        }\n        tabIndex={props.disabled ? -1 : 0}\n        aria-label={props.ariaLabel}\n        aria-disabled={props.disabled}\n        role=\"button\"\n      >\n        {props.iconProps && (\n          <Stack.Item styles={{ root: props.styles?.iconContainer }}>\n            <Icon {...props.iconProps} />\n          </Stack.Item>\n        )}\n        {props.title && (\n          <Stack.Item styles={{ root: props.styles?.textContainer }}>\n            <Text variant=\"small\">{props.title}</Text>\n          </Stack.Item>\n        )}\n      </Stack>\n    </TooltipHost>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.d.ts

@@ -0,0 +1,11 @@
+import { IStackStyles, ITheme } from '@fluentui/react';
+/** @private */
+export declare const hiddenVideoEffectsItemContainerStyles: IStackStyles;
+/** @private */
+export declare const videoEffectsItemContainerStyles: (args: {
+    theme: ITheme;
+    isSelected: boolean;
+    disabled: boolean;
+    backgroundImage?: string;
+}) => IStackStyles;
+//# sourceMappingURL=VideoEffectsItem.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js

@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+const VideoEffectsItemContainerHeight = '3.375rem';
+const VideoEffectsItemContainerWidth = '4.83rem';
+const VideoEffectsItemContainerBorderSize = '2px';
+/** @private */
+export const hiddenVideoEffectsItemContainerStyles = {
+    root: {
+        visibility: 'hidden',
+        height: VideoEffectsItemContainerHeight,
+        width: VideoEffectsItemContainerWidth,
+        border: VideoEffectsItemContainerBorderSize
+    }
+};
+/** @private */
+export const videoEffectsItemContainerStyles = (args) => {
+    const borderDefaultThickness = '1px';
+    const borderActiveThickness = '2px';
+    return {
+        root: {
+            background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,
+            backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            borderRadius: '0.25rem',
+            color: args.theme.palette.neutralPrimary,
+            cursor: args.disabled ? 'default' : 'pointer',
+            height: VideoEffectsItemContainerHeight,
+            position: 'relative',
+            width: VideoEffectsItemContainerWidth,
+            // Use :after to display a border element. This is used to prevent the background image
+            // resizing when the border thichkness is changed. We also want the border to be inside
+            // the frame of the container, i.e. we want it to expand inwards and not outwards when
+            // border thickness changes from hover/selection.
+            ':after': {
+                content: '""',
+                position: 'absolute',
+                boxSizing: 'border-box',
+                border: args.isSelected
+                    ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                    : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
+                height: '100%',
+                width: '100%',
+                borderRadius: '0.25rem'
+            },
+            ':hover': {
+                ':after': {
+                    border: args.disabled && !args.isSelected
+                        ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
+                        : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                }
+            }
+        }
+    };
+};
+//# sourceMappingURL=VideoEffectsItem.styles.js.map

package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,mCAAmC,GAAG,KAAK,CAAC;AAElD,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAiB;IACjE,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,+BAA+B;QACvC,KAAK,EAAE,8BAA8B;QACrC,MAAM,EAAE,mCAAmC;KAC5C;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,IAK/C,EAAgB,EAAE;IACjB,MAAM,sBAAsB,GAAG,KAAK,CAAC;IACrC,MAAM,qBAAqB,GAAG,KAAK,CAAC;IACpC,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS;YAC/E,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;YAClF,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACxC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC7C,MAAM,EAAE,+BAA+B;YACvC,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,8BAA8B;YACrC,uFAAuF;YACvF,uFAAuF;YACvF,sFAAsF;YACtF,iDAAiD;YACjD,QAAQ,EAAE;gBACR,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,UAAU;gBACpB,SAAS,EAAE,YAAY;gBACvB,MAAM,EAAE,IAAI,CAAC,UAAU;oBACrB,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;oBACrE,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;gBAChF,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;gBACb,YAAY,EAAE,SAAS;aACxB;YACD,QAAQ,EAAE;gBACR,QAAQ,EAAE;oBACR,MAAM,EACJ,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU;wBAC/B,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;wBAC9E,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;iBAC1E;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, ITheme } from '@fluentui/react';\n\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderSize = '2px';\n\n/** @private */\nexport const hiddenVideoEffectsItemContainerStyles: IStackStyles = {\n  root: {\n    visibility: 'hidden',\n    height: VideoEffectsItemContainerHeight,\n    width: VideoEffectsItemContainerWidth,\n    border: VideoEffectsItemContainerBorderSize\n  }\n};\n\n/** @private */\nexport const videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n}): IStackStyles => {\n  const borderDefaultThickness = '1px';\n  const borderActiveThickness = '2px';\n  return {\n    root: {\n      background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,\n      backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,\n      backgroundPosition: 'center',\n      backgroundSize: 'cover',\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: VideoEffectsItemContainerHeight,\n      position: 'relative', // Used for absolute positioning of :after\n      width: VideoEffectsItemContainerWidth,\n      // Use :after to display a border element. This is used to prevent the background image\n      // resizing when the border thichkness is changed. We also want the border to be inside\n      // the frame of the container, i.e. we want it to expand inwards and not outwards when\n      // border thickness changes from hover/selection.\n      ':after': {\n        content: '\"\"',\n        position: 'absolute',\n        boxSizing: 'border-box',\n        border: args.isSelected\n          ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n          : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n        height: '100%',\n        width: '100%',\n        borderRadius: '0.25rem'\n      },\n      ':hover': {\n        ':after': {\n          border:\n            args.disabled && !args.isSelected\n              ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`\n              : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n        }\n      }\n    }\n  };\n};\n"]}

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

@@ -8,7 +8,7 @@ import { LayoutProps } from './Layout';
 export declare type DefaultLayoutProps = LayoutProps;
 /**
  * DefaultLayout displays remote participants, local video component, and screen sharing component in
- * a grid and horizontal gallery.
+ * a grid an overflow gallery.
  *
  * @private
  */

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

@@ -1,30 +1,42 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { Stack } from '@fluentui/react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useRef } from 'react';
 import { GridLayout } from '../GridLayout';
 import { isNarrowWidth } from '../utils/responsive';
-/* @conditional-compile-remove(pinned-participants) */
-import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
+/* @conditional-compile-remove(vertical-gallery) */
+import { isShortHeight } from '../utils/responsive';
 import { rootLayoutStyle } from './styles/DefaultLayout.styles';
 import { videoGalleryLayoutGap } from './styles/Layout.styles';
 import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
-import { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';
+import { OverflowGallery } from './OverflowGallery';
 /**
  * DefaultLayout displays remote participants, local video component, and screen sharing component in
- * a grid and horizontal gallery.
+ * a grid an overflow gallery.
  *
  * @private
  */
 export const DefaultLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
-    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds } = props;
+    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
+    /* @conditional-compile-remove(vertical-gallery) */
+    parentHeight, pinnedParticipantUserIds = [], 
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom' } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({
+    /* @conditional-compile-remove(vertical-gallery) */
+    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
+    // This is for tracking the number of children in the first page of overflow gallery.
+    // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
+    // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.
+    const childrenPerPage = useRef(4);
+    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
+        localParticipant,
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
+            : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
     let activeVideoStreams = 0;
@@ -34,27 +46,51 @@ export const DefaultLayout = (props) => {
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
-    const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {
+    /**
+     * instantiate indexes available to render with indexes available that would be on first page
+     *
+     * For some components which do not strictly follow the order of the array, we might
+     * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
+     * this case when those components are here
+     */
+    const [indexesToRender, setIndexesToRender] = useState([]);
+    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     if (localVideoComponent) {
         gridTiles.push(localVideoComponent);
     }
-    const horizontalGallery = useMemo(() => {
-        if (horizontalGalleryTiles.length === 0) {
+    const overflowGallery = useMemo(() => {
+        if (overflowGalleryTiles.length === 0) {
             return null;
         }
-        /* @conditional-compile-remove(pinned-participants) */
-        if (isNarrow) {
-            return React.createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: horizontalGalleryTiles });
-        }
-        return (React.createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }));
-    }, [isNarrow, horizontalGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery]);
-    return (React.createElement(Stack, { horizontal: false, styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
+        return (React.createElement(OverflowGallery, { isNarrow: isNarrow, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            /* @conditional-compile-remove(vertical-gallery) */
+            verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
+            /* @conditional-compile-remove(pinned-participants) */
+            overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+                childrenPerPage.current = n;
+            } }));
+    }, [
+        isNarrow,
+        /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        overflowGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+        setIndexesToRender,
+        /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery
+    ]);
+    return (React.createElement(Stack
+    /* @conditional-compile-remove(vertical-gallery) */
+    , { 
+        /* @conditional-compile-remove(vertical-gallery) */
+        horizontal: overflowGalleryPosition === 'VerticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
         screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-        horizontalGallery));
+        overflowGallery));
 };
 //# sourceMappingURL=DefaultLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\n/* @conditional-compile-remove(pinned-participants) */\nimport { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { VideoGalleryResponsiveHorizontalGallery } from './VideoGalleryResponsiveHorizontalGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid and horizontal gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  const { gridParticipants, horizontalGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  const horizontalGalleryTiles = horizontalGalleryParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const horizontalGallery = useMemo(() => {\n    if (horizontalGalleryTiles.length === 0) {\n      return null;\n    }\n    /* @conditional-compile-remove(pinned-participants) */\n    if (isNarrow) {\n      return <ScrollableHorizontalGallery horizontalGalleryElements={horizontalGalleryTiles} />;\n    }\n    return (\n      <VideoGalleryResponsiveHorizontalGallery\n        isNarrow={isNarrow}\n        shouldFloatLocalVideo={true}\n        horizontalGalleryElements={horizontalGalleryTiles}\n        styles={styles?.horizontalGallery}\n      />\n    );\n  }, [isNarrow, horizontalGalleryTiles, styles?.horizontalGallery]);\n\n  return (\n    <Stack horizontal={false} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {horizontalGallery}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/DefaultLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Stack } from '@fluentui/react';\nimport React, { useMemo, useState, useRef } from 'react';\nimport { GridLayout } from '../GridLayout';\nimport { isNarrowWidth } from '../utils/responsive';\n/* @conditional-compile-remove(vertical-gallery) */\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';\nimport { OverflowGallery } from './OverflowGallery';\n\n/**\n * Props for {@link DefaultLayout}.\n *\n * @private\n */\nexport type DefaultLayoutProps = LayoutProps;\n\n/**\n * DefaultLayout displays remote participants, local video component, and screen sharing component in\n * a grid an overflow gallery.\n *\n * @private\n */\nexport const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {\n  const {\n    remoteParticipants = [],\n    localParticipant,\n    dominantSpeakers,\n    localVideoComponent,\n    screenShareComponent,\n    onRenderRemoteParticipant,\n    styles,\n    maxRemoteVideoStreams,\n    parentWidth,\n    /* @conditional-compile-remove(vertical-gallery) */\n    parentHeight,\n    pinnedParticipantUserIds = [],\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom'\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\n  /* @conditional-compile-remove(vertical-gallery) */\n  const isShort = parentHeight ? isShortHeight(parentHeight) : false;\n\n  // This is for tracking the number of children in the first page of overflow gallery.\n  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.\n  // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.\n  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds\n  });\n\n  let activeVideoStreams = 0;\n\n  const gridTiles = gridParticipants.map((p) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  /**\n   * instantiate indexes available to render with indexes available that would be on first page\n   *\n   * For some components which do not strictly follow the order of the array, we might\n   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of\n   * this case when those components are here\n   */\n  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);\n\n  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {\n    return onRenderRemoteParticipant(\n      p,\n      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0\n        ? p.videoStream?.isAvailable && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams\n        : p.videoStream?.isAvailable\n    );\n  });\n\n  if (localVideoComponent) {\n    gridTiles.push(localVideoComponent);\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        /* @conditional-compile-remove(vertical-gallery) */\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        /* @conditional-compile-remove(vertical-gallery) */\n        verticalGalleryStyles={styles?.verticalGallery}\n        /* @conditional-compile-remove(pinned-participants) */\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n      />\n    );\n  }, [\n    isNarrow,\n    /* @conditional-compile-remove(vertical-gallery) */ isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,\n    setIndexesToRender,\n    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery\n  ]);\n\n  return (\n    <Stack\n      /* @conditional-compile-remove(vertical-gallery) */\n      horizontal={overflowGalleryPosition === 'VerticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGallery}\n    </Stack>\n  );\n};\n"]}

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

@@ -2,11 +2,18 @@
 /**
  * @private
  */
-export declare const FloatingLocalVideo: (props: {
+export interface FloatingLocalVideoProps {
     localVideoComponent: JSX.Element;
     layerHostId: string;
-    isNarrow?: boolean;
     parentWidth?: number;
     parentHeight?: number;
-}) => JSX.Element;
+    localVideoSizeRem: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * @private
+ */
+export declare const FloatingLocalVideo: (props: FloatingLocalVideoProps) => JSX.Element;
 //# sourceMappingURL=FloatingLocalVideo.d.ts.map

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

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

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

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

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { LayoutProps } from './Layout';
+import { LocalVideoTileSize } from '../VideoGallery';
 /**
  * Props for {@link FloatingLocalVideoLayout}.
  *
@@ -14,10 +15,14 @@ export interface FloatingLocalVideoLayoutProps extends LayoutProps {
      * Height of parent element
      */
     parentHeight?: number;
+    /**
+     * Local video tile mode
+     */
+    localVideoTileSize?: LocalVideoTileSize;
 }
 /**
  * FloatingLocalVideoLayout displays remote participants and a screen sharing component in
- * a grid and horizontal gallery while floating the local video
+ * a grid and overflow gallery while floating the local video
  *
  * @private
  */