@azure/communication-react 1.5.1-beta.1 → 1.5.1-beta.2

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { _VideoEffectsItemProps } from './VideoEffectsItem';
+/**
+ * 'None' Video Effects Item.
+ *
+ * @internal
+ */
+export declare const _VideoEffectsItemNoBackground: (props: _VideoEffectsItemProps) => JSX.Element;
+/**
+ * 'Blur' Video Effects Item.
+ *
+ * @internal
+ */
+export declare const _VideoEffectsItemBlur: (props: _VideoEffectsItemProps) => JSX.Element;
+/**
+ * 'Add Image' Video Effects Item.
+ *
+ * @internal
+ */
+export declare const _VideoEffectsItemAddImage: (props: _VideoEffectsItemProps) => JSX.Element;
+//# sourceMappingURL=PresetVideoEffectsItems.d.ts.map

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

@@ -0,0 +1,65 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+import { _VideoEffectsItem } from './VideoEffectsItem';
+/**
+ * 'None' Video Effects Item.
+ *
+ * @internal
+ */
+export const _VideoEffectsItemNoBackground = (props) => {
+    const derivedProps = deriveProps(props, {
+        iconName: 'VideoEffectsNone',
+        title: 'None',
+        tooltipContent: 'Remove Background',
+        ariaLabel: 'Remove Background'
+    });
+    return React.createElement(_VideoEffectsItem, Object.assign({}, derivedProps));
+};
+/**
+ * 'Blur' Video Effects Item.
+ *
+ * @internal
+ */
+export const _VideoEffectsItemBlur = (props) => {
+    const derivedProps = deriveProps(props, {
+        iconName: 'VideoEffectsBlur',
+        title: 'Blurred',
+        tooltipContent: 'Blur Background',
+        ariaLabel: 'Blur Background'
+    });
+    return React.createElement(_VideoEffectsItem, Object.assign({}, derivedProps));
+};
+/**
+ * 'Add Image' Video Effects Item.
+ *
+ * @internal
+ */
+export const _VideoEffectsItemAddImage = (props) => {
+    const derivedProps = deriveProps(props, {
+        iconName: 'VideoEffectsAddImage',
+        title: 'Image',
+        tooltipContent: 'Upload Background Image',
+        ariaLabel: 'Upload Background Image'
+    });
+    return React.createElement(_VideoEffectsItem, Object.assign({}, derivedProps));
+};
+/** Applies fallbacks if props were not specified */
+const deriveProps = (props, fallbacks) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const iconProps = (_a = props.iconProps) !== null && _a !== void 0 ? _a : {
+        iconName: fallbacks.iconName
+    };
+    const title = (_b = props.title) !== null && _b !== void 0 ? _b : fallbacks.title;
+    const tooltipProps = (_c = props.tooltipProps) !== null && _c !== void 0 ? _c : {
+        content: (_d = props.title) !== null && _d !== void 0 ? _d : fallbacks.tooltipContent
+    };
+    const ariaLabel = ((_e = props.ariaLabel) !== null && _e !== void 0 ? _e : typeof ((_f = props.tooltipProps) === null || _f === void 0 ? void 0 : _f.content) === 'string')
+        ? typeof ((_g = props.tooltipProps) === null || _g === void 0 ? void 0 : _g.content)
+        : (_h = props.title) !== null && _h !== void 0 ? _h : fallbacks.ariaLabel;
+    return Object.assign(Object.assign({}, props), { iconProps,
+        title,
+        tooltipProps,
+        ariaLabel });
+};
+//# sourceMappingURL=PresetVideoEffectsItems.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PresetVideoEffectsItems.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/PresetVideoEffectsItems.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AAE/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC1F,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,mBAAmB;QACnC,SAAS,EAAE,mBAAmB;KAC/B,CAAC,CAAC;IAEH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,SAAS;QAChB,cAAc,EAAE,iBAAiB;QACjC,SAAS,EAAE,iBAAiB;KAC7B,CAAC,CAAC;IAEH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAA6B,EAAe,EAAE;IACtF,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE;QACtC,QAAQ,EAAE,sBAAsB;QAChC,KAAK,EAAE,OAAO;QACd,cAAc,EAAE,yBAAyB;QACzC,SAAS,EAAE,yBAAyB;KACrC,CAAC,CAAC;IAEH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oDAAoD;AACpD,MAAM,WAAW,GAAG,CAClB,KAA6B,EAC7B,SAKC,EACuB,EAAE;;IAC1B,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI;QACnC,QAAQ,EAAE,SAAS,CAAC,QAAQ;KAC7B,CAAC;IACF,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,KAAK,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI;QACzC,OAAO,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,cAAc;KACjD,CAAC;IACF,MAAM,SAAS,GACb,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,KAAK,QAAQ;QAChE,CAAC,CAAC,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA;QACpC,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,SAAS,CAAC;IAEzC,uCACK,KAAK,KACR,SAAS;QACT,KAAK;QACL,YAAY;QACZ,SAAS,IACT;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\n\n/**\n * 'None' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemNoBackground = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsNone',\n    title: 'None',\n    tooltipContent: 'Remove Background',\n    ariaLabel: 'Remove Background'\n  });\n\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Blur' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemBlur = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsBlur',\n    title: 'Blurred',\n    tooltipContent: 'Blur Background',\n    ariaLabel: 'Blur Background'\n  });\n\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/**\n * 'Add Image' Video Effects Item.\n *\n * @internal\n */\nexport const _VideoEffectsItemAddImage = (props: _VideoEffectsItemProps): JSX.Element => {\n  const derivedProps = deriveProps(props, {\n    iconName: 'VideoEffectsAddImage',\n    title: 'Image',\n    tooltipContent: 'Upload Background Image',\n    ariaLabel: 'Upload Background Image'\n  });\n\n  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/** Applies fallbacks if props were not specified */\nconst deriveProps = (\n  props: _VideoEffectsItemProps,\n  fallbacks: {\n    iconName: string;\n    title: string;\n    tooltipContent: string;\n    ariaLabel: string;\n  }\n): _VideoEffectsItemProps => {\n  const iconProps = props.iconProps ?? {\n    iconName: fallbacks.iconName\n  };\n  const title = props.title ?? fallbacks.title;\n  const tooltipProps = props.tooltipProps ?? {\n    content: props.title ?? fallbacks.tooltipContent\n  };\n  const ariaLabel =\n    props.ariaLabel ?? typeof props.tooltipProps?.content === 'string'\n      ? typeof props.tooltipProps?.content\n      : props.title ?? fallbacks.ariaLabel;\n\n  return {\n    ...props,\n    iconProps,\n    title,\n    tooltipProps,\n    ariaLabel\n  };\n};\n"]}

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

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import { IStyle } from '@fluentui/react';
+import { _VideoEffectsItemProps } from './VideoEffectsItem';
+/**
+ * Props for {@link _VideoBackgroundEffectsPicker}
+ * @internal
+ */
+export interface _VideoBackgroundEffectsPickerProps {
+    /**
+     * The options to display in the picker.
+     */
+    options: _VideoBackgroundEffectChoiceOption[];
+    /**
+     * The key of the current selected Video Background Effect.
+     * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.
+     */
+    selectedEffectKey?: string;
+    /**
+     * Callback to invoke when a Video Background Effect is selected.
+     * @param effectKey - The key of the Video Background Effect that was selected.
+     */
+    onChange?: (effectKey: string) => void;
+    /**
+     * The key of the Video Background Effect that is initially selected.
+     * Only provide this if the picker is an uncontrolled component;
+     * otherwise, use the `selectedEffectKey` property.
+     */
+    defaultSelectedEffectKey?: string;
+    /**
+     * The label to display for the picker.
+     */
+    label?: string;
+    /**
+     * The number of items to display per row.
+     * @default 3
+     */
+    itemsPerRow?: 'wrap' | number;
+    /**
+     * Styles for the picker.
+     */
+    styles?: _VideoBackgroundEffectsPickerStyles;
+}
+/**
+ * Option for the {@link _VideoBackgroundEffectsPicker}.
+ * @internal
+ */
+export declare type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;
+/**
+ * Styles for the {@link _VideoBackgroundEffectsPicker}.
+ * @internal
+ */
+export interface _VideoBackgroundEffectsPickerStyles {
+    /**
+     * Styles for the root element.
+     */
+    root?: IStyle;
+    /**
+     * Styles for the label.
+     */
+    label?: IStyle;
+    /**
+     * Styles for the root of each row element.
+     */
+    rowRoot?: IStyle;
+}
+/**
+ * Picker for choosing a Video Background Effect.
+ *
+ * @remarks
+ * This functions similar to a radio group of buttons, where the user can select one of the options.
+ *
+ * @internal
+ */
+export declare const _VideoBackgroundEffectsPicker: (props: _VideoBackgroundEffectsPickerProps) => JSX.Element;
+//# sourceMappingURL=VideoBackgroundEffectsPicker.d.ts.map

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

@@ -0,0 +1,44 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Label, mergeStyles, Stack } from '@fluentui/react';
+import { useWarnings } from '@fluentui/react-hooks';
+import React from 'react';
+import { chunk } from '../utils';
+import { _VideoEffectsItem } from './VideoEffectsItem';
+/**
+ * Picker for choosing a Video Background Effect.
+ *
+ * @remarks
+ * This functions similar to a radio group of buttons, where the user can select one of the options.
+ *
+ * @internal
+ */
+export const _VideoBackgroundEffectsPicker = (props) => {
+    var _a, _b, _c;
+    const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState(props.defaultSelectedEffectKey);
+    // Warn the developer if they use the component in an incorrect controlled way.
+    useWarnings({
+        name: 'VideoBackgroundEffectsPicker',
+        props,
+        controlledUsage: {
+            onChangeProp: 'onChange',
+            valueProp: 'selectedEffectKey',
+            defaultValueProp: 'defaultSelectedEffectKey'
+        }
+    });
+    const selectedEffect = (_a = props.selectedEffectKey) !== null && _a !== void 0 ? _a : componentControlledSelectedEffectKey;
+    const setSelectedEffect = (selectedEffectKey) => {
+        var _a;
+        setComponentControlledSelectedEffectKey(selectedEffectKey);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, selectedEffectKey);
+    };
+    const convertedOptions = props.options.map((option) => (Object.assign({ isSelected: option.key === selectedEffect, onSelect: () => setSelectedEffect(option.key) }, option)));
+    const optionsByRow = props.itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3);
+    return (React.createElement(Stack, { tokens: { childrenGap: '0.5rem' } },
+        React.createElement(Label, { className: mergeStyles((_c = props.styles) === null || _c === void 0 ? void 0 : _c.label) }, props.label),
+        optionsByRow.map((options, rowIndex) => {
+            var _a;
+            return (React.createElement(Stack, { className: mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' } }, options.map((option) => (React.createElement(_VideoEffectsItem, Object.assign({}, option, { key: option.key }))))));
+        })));
+};
+//# sourceMappingURL=VideoBackgroundEffectsPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AA2E/E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;;IACtG,MAAM,CAAC,oCAAoC,EAAE,uCAAuC,CAAC,GAAG,KAAK,CAAC,QAAQ,CAEpG,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAElC,+EAA+E;IAC/E,WAAW,CAAC;QACV,IAAI,EAAE,8BAA8B;QACpC,KAAK;QACL,eAAe,EAAE;YACf,YAAY,EAAE,UAAU;YACxB,SAAS,EAAE,mBAAmB;YAC9B,gBAAgB,EAAE,0BAA0B;SAC7C;KACF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,MAAA,KAAK,CAAC,iBAAiB,mCAAI,oCAAoC,CAAC;IACvF,MAAM,iBAAiB,GAAG,CAAC,iBAAyB,EAAQ,EAAE;;QAC5D,uCAAuC,CAAC,iBAAiB,CAAC,CAAC;QAC3D,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,iBAAiB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAA6B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,iBAC/E,UAAU,EAAE,MAAM,CAAC,GAAG,KAAK,cAAc,EACzC,QAAQ,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,IAC1C,MAAM,EACT,CAAC,CAAC;IAEJ,MAAM,YAAY,GAChB,KAAK,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,EAAE,MAAA,KAAK,CAAC,WAAW,mCAAI,CAAC,CAAC,CAAC;IAEtG,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE;QACtC,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,IAAG,KAAK,CAAC,KAAK,CAAS;QACxE,YAAY,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;;YAAC,OAAA,CACvC,oBAAC,KAAK,IACJ,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO,CAAC,EAC7C,IAAI,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,EAClC,UAAU,QACV,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAEhC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,iBAAiB,oBAAK,MAAM,IAAE,GAAG,EAAE,MAAM,CAAC,GAAG,IAAI,CACnD,CAAC,CACI,CACT,CAAA;SAAA,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\n\n/**\n * Props for {@link _VideoBackgroundEffectsPicker}\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerProps {\n  /**\n   * The options to display in the picker.\n   */\n  options: _VideoBackgroundEffectChoiceOption[];\n\n  /**\n   * The key of the current selected Video Background Effect.\n   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.\n   */\n  selectedEffectKey?: string;\n\n  /**\n   * Callback to invoke when a Video Background Effect is selected.\n   * @param effectKey - The key of the Video Background Effect that was selected.\n   */\n  onChange?: (effectKey: string) => void;\n\n  /**\n   * The key of the Video Background Effect that is initially selected.\n   * Only provide this if the picker is an uncontrolled component;\n   * otherwise, use the `selectedEffectKey` property.\n   */\n  defaultSelectedEffectKey?: string;\n\n  /**\n   * The label to display for the picker.\n   */\n  label?: string;\n\n  /**\n   * The number of items to display per row.\n   * @default 3\n   */\n  itemsPerRow?: 'wrap' | number;\n\n  /**\n   * Styles for the picker.\n   */\n  styles?: _VideoBackgroundEffectsPickerStyles;\n}\n\n/**\n * Option for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;\n\n/**\n * Styles for the {@link _VideoBackgroundEffectsPicker}.\n * @internal\n */\nexport interface _VideoBackgroundEffectsPickerStyles {\n  /**\n   * Styles for the root element.\n   */\n  root?: IStyle;\n\n  /**\n   * Styles for the label.\n   */\n  label?: IStyle;\n\n  /**\n   * Styles for the root of each row element.\n   */\n  rowRoot?: IStyle;\n}\n\n/**\n * Picker for choosing a Video Background Effect.\n *\n * @remarks\n * This functions similar to a radio group of buttons, where the user can select one of the options.\n *\n * @internal\n */\nexport const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {\n  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<\n    string | undefined\n  >(props.defaultSelectedEffectKey);\n\n  // Warn the developer if they use the component in an incorrect controlled way.\n  useWarnings({\n    name: 'VideoBackgroundEffectsPicker',\n    props,\n    controlledUsage: {\n      onChangeProp: 'onChange',\n      valueProp: 'selectedEffectKey',\n      defaultValueProp: 'defaultSelectedEffectKey'\n    }\n  });\n\n  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({\n    isSelected: option.key === selectedEffect,\n    onSelect: () => setSelectedEffect(option.key),\n    ...option\n  }));\n\n  const optionsByRow =\n    props.itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, props.itemsPerRow ?? 3);\n\n  return (\n    <Stack tokens={{ childrenGap: '0.5rem' }}>\n      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>\n      {optionsByRow.map((options, rowIndex) => (\n        <Stack\n          className={mergeStyles(props.styles?.rowRoot)}\n          wrap={props.itemsPerRow === 'wrap'}\n          horizontal\n          key={rowIndex}\n          tokens={{ childrenGap: '0.5rem' }}\n        >\n          {options.map((option) => (\n            <_VideoEffectsItem {...option} key={option.key} />\n          ))}\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n"]}

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'
+     */
+    key: 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,80 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Icon, mergeStyles, Stack, Text, TooltipHost, useTheme } from '@fluentui/react';
+import React, { useCallback } from 'react';
+/**
+ * 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,
+        backgroundPosition,
+        backgroundSize
+    }), [backgroundImage, disabled, isSelected, theme]);
+    return (React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
+        React.createElement(Stack, { key: props.key, className: mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.key); }, 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.key);
+                    }
+                }, 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))))));
+};
+const backgroundPosition = 'center';
+const backgroundSize = 'cover';
+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: args.backgroundPosition,
+            backgroundSize: args.backgroundSize,
+            borderRadius: '0.25rem',
+            color: args.theme.palette.neutralPrimary,
+            cursor: args.disabled ? 'default' : 'pointer',
+            height: '3.375rem',
+            position: 'relative',
+            width: '4.83rem',
+            // 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.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":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n  Icon,\n  IIconProps,\n  IStackStyles,\n  IStyle,\n  ITheme,\n  ITooltipHostProps,\n  mergeStyles,\n  Stack,\n  Text,\n  TooltipHost,\n  useTheme\n} from '@fluentui/react';\nimport React, { useCallback } from 'react';\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  key: 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        backgroundPosition,\n        backgroundSize\n      }),\n    [backgroundImage, disabled, isSelected, theme]\n  );\n\n  return (\n    <TooltipHost {...props.tooltipProps}>\n      <Stack\n        key={props.key}\n        className={mergeStyles(props.styles?.root)}\n        verticalAlign=\"center\"\n        horizontalAlign=\"center\"\n        styles={containerStyles}\n        onClick={disabled ? undefined : () => props.onSelect?.(props.key)}\n        onKeyDown={\n          disabled\n            ? undefined\n            : (e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  props.onSelect?.(props.key);\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\nconst backgroundPosition = 'center';\nconst backgroundSize = 'cover';\n\nconst videoEffectsItemContainerStyles = (args: {\n  theme: ITheme;\n  isSelected: boolean;\n  disabled: boolean;\n  backgroundImage?: string;\n  backgroundPosition?: string;\n  backgroundSize?: 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: args.backgroundPosition,\n      backgroundSize: args.backgroundSize,\n      borderRadius: '0.25rem',\n      color: args.theme.palette.neutralPrimary,\n      cursor: args.disabled ? 'default' : 'pointer',\n      height: '3.375rem',\n      position: 'relative', // Used for absolute positioning of :after\n      width: '4.83rem',\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,40 @@
 // 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;
+    /* @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.
+    const childrenPerPage = useRef(4);
+    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
+            : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
     let activeVideoStreams = 0;
@@ -34,27 +44,53 @@ 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([
+        ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()
+    ]);
+    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    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  const childrenPerPage = useRef(4);\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    dominantSpeakers,\n    maxRemoteVideoStreams,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - (pinnedParticipantUserIds.length % 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    ...Array(maxRemoteVideoStreams - activeVideoStreams).keys()\n  ]);\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