@azure/communication-react 1.22.0 → 1.23.0-alpha-202412200016

package/dist/dist-esm/react-components/src/components/VerticalGallery.js

@@ -17,10 +17,7 @@ import { _formatString } from "../../../acs-ui-common/src";
 export const VerticalGallery = (props) => {
     const { children, styles, childrenPerPage, onFetchTilesToRender } = props;
     const [page, setPage] = useState(1);
-    const [buttonState, setButtonState] = useState({
-        previous: true,
-        next: true
-    });
+    const [buttonState, setButtonState] = useState({ previous: true, next: true });
     const ids = useIdentifiers();
     const numberOfChildren = React.Children.count(children);
     const lastPage = Math.ceil(numberOfChildren / childrenPerPage);
@@ -38,7 +35,7 @@ export const VerticalGallery = (props) => {
     const childrenOnCurrentPage = useMemo(() => {
         var _a;
         if (indexesArray[0] !== undefined) {
-            return (_a = indexesArray[clippedPage - 1]) === null || _a === void 0 ? void 0 : _a.map(index => {
+            return (_a = indexesArray[clippedPage - 1]) === null || _a === void 0 ? void 0 : _a.map((index) => {
                 return React.Children.toArray(children)[index];
             });
         }
@@ -57,44 +54,31 @@ export const VerticalGallery = (props) => {
     useEffect(() => {
         if (page > 1 && page < lastPage && showButtons) {
             // we are somewhere in between first and last pages.
-            setButtonState({
-                previous: false,
-                next: false
-            });
+            setButtonState({ previous: false, next: false });
         }
         else if (page === 1 && showButtons) {
             // we are on the first page.
-            setButtonState({
-                previous: true,
-                next: false
-            });
+            setButtonState({ previous: true, next: false });
         }
         else if (page === lastPage && showButtons) {
             // we are on the last page.
-            setButtonState({
-                previous: false,
-                next: true
-            });
+            setButtonState({ previous: false, next: true });
         }
     }, [page, numberOfChildren, lastPage, showButtons]);
     const childContainerStyle = useMemo(() => {
-        return {
-            root: childrenContainerStyle(2)
-        };
+        return { root: childrenContainerStyle(2) };
     }, []);
     const childrenStyles = useMemo(() => {
-        return {
-            root: styles === null || styles === void 0 ? void 0 : styles.children
-        };
+        return { root: styles === null || styles === void 0 ? void 0 : styles.children };
     }, [styles === null || styles === void 0 ? void 0 : styles.children]);
     if (childrenPerPage <= 0) {
         return React.createElement(React.Fragment, null);
     }
-    return React.createElement(Stack, { className: mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+    return (React.createElement(Stack, { className: mergeStyles(rootStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
         React.createElement(Stack, { styles: childContainerStyle }, childrenOnCurrentPage === null || childrenOnCurrentPage === void 0 ? void 0 : childrenOnCurrentPage.map((child, i) => {
-            return React.createElement(Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child);
+            return (React.createElement(Stack.Item, { key: i, styles: childrenStyles, "data-ui-id": ids.verticalGalleryVideoTile }, child));
         })),
-        showButtons && React.createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }));
+        showButtons && (React.createElement(VerticalGalleryControlBar, { buttonsDisabled: buttonState, onPreviousButtonClick: onPreviousButtonClick, onNextButtonClick: onNextButtonClick, totalPages: lastPage, currentPage: page }))));
 };
 const VerticalGalleryControlBar = (props) => {
     const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;
@@ -113,22 +97,18 @@ const VerticalGalleryControlBar = (props) => {
     const nextButtonsStyles = useMemo(() => {
         return mergeStyles(leftRightButtonStyles(theme), styles === null || styles === void 0 ? void 0 : styles.nextButton);
     }, [styles === null || styles === void 0 ? void 0 : styles.nextButton, theme]);
-    const controlBarSpacing = {
-        childrenGap: '0.5rem'
-    };
-    const previousButtonAriaLabel = strings.leftNavButtonAriaLabel ? _formatString(strings.leftNavButtonAriaLabel, {
-        current: `${currentPage}`,
-        total: `${totalPages}`
-    }) : undefined;
-    const nextButtonAriaLabel = strings.rightNavButtonAriaLabel ? _formatString(strings.rightNavButtonAriaLabel, {
-        current: `${currentPage}`,
-        total: `${totalPages}`
-    }) : undefined;
-    return React.createElement(Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
+    const controlBarSpacing = { childrenGap: '0.5rem' };
+    const previousButtonAriaLabel = strings.leftNavButtonAriaLabel
+        ? _formatString(strings.leftNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })
+        : undefined;
+    const nextButtonAriaLabel = strings.rightNavButtonAriaLabel
+        ? _formatString(strings.rightNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })
+        : undefined;
+    return (React.createElement(Stack, { horizontalAlign: "center", tokens: controlBarSpacing, horizontal: true, className: pageCounterContainerStyles },
         React.createElement(DefaultButton, { className: previousButtonSyles, onClick: onPreviousButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.previous, ariaLabel: previousButtonAriaLabel, "data-ui-id": ids.overflowGalleryLeftNavButton },
             React.createElement(Icon, { iconName: "VerticalGalleryLeftButton", styles: navIconStyles })),
         React.createElement(Text, { "data-ui-id": ids.verticalGalleryPageCounter, className: pageCounterStyles }, `${currentPage} / ${totalPages}`),
         React.createElement(DefaultButton, { className: nextButtonsStyles, onClick: onNextButtonClick, disabled: buttonsDisabled === null || buttonsDisabled === void 0 ? void 0 : buttonsDisabled.next, ariaLabel: nextButtonAriaLabel, "data-ui-id": ids.overflowGalleryRightNavButton },
-            React.createElement(Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles })));
+            React.createElement(Icon, { iconName: "VerticalGalleryRightButton", styles: navIconStyles }))));
 };
 //# sourceMappingURL=VerticalGallery.js.map

package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { childrenContainerStyle, pageNavigationControlBarContainerStyle, participantPageCounter, leftRightButtonStyles, navIconStyles, rootStyle } from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each video tile in the vertical gallery */\n  children?: IStyle;\n  /** Styles for the verticalGallery control bar */\n  controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * Strings for localization of the vertical gallery.\n *\n * @public\n */\nexport interface VerticalGalleryStrings {\n  /** Aria label for the left page navigation button */\n  leftNavButtonAriaLabel?: string;\n  /** Aria label for the right page navigation button */\n  rightNavButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the control bar inside the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n  /**\n   * styles for the next button in the VerticalGalleryControlBar\n   */\n  nextButton?: IStyle;\n  /**\n   * Styles for the previous button in the VerticalGalleryControlBar\n   */\n  previousButton?: IStyle;\n  /**\n   * Styles for the counter in the VerticalGalleryControlBar\n   */\n  counter?: IStyle;\n}\n/**\n * Props for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryProps {\n  /** Video tiles for the remote participants in the vertical gallery */\n  children: React.ReactNode;\n  /** Max number of children per page in the vertical Gallery */\n  childrenPerPage: number;\n  /** Styles to customize the vertical gallery */\n  styles?: VerticalGalleryStyles;\n  /** helper function to choose which tiles to give video to. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: {\n    next: boolean;\n    previous: boolean;\n  };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @public\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const {\n    children,\n    styles,\n    childrenPerPage,\n    onFetchTilesToRender\n  } = props;\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{\n    previous: boolean;\n    next: boolean;\n  }>({\n    previous: true,\n    next: true\n  });\n  const ids = useIdentifiers();\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1] ?? []);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    if (indexesArray[0] !== undefined) {\n      return indexesArray[clippedPage - 1]?.map(index => {\n        return React.Children.toArray(children)[index];\n      });\n    }\n    return;\n  }, [indexesArray, clippedPage, children]);\n  const showButtons = numberOfChildren > childrenPerPage;\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({\n        previous: false,\n        next: false\n      });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({\n        previous: true,\n        next: false\n      });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({\n        previous: false,\n        next: true\n      });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n  const childContainerStyle = useMemo(() => {\n    return {\n      root: childrenContainerStyle(2)\n    };\n  }, []);\n  const childrenStyles = useMemo(() => {\n    return {\n      root: styles?.children\n    };\n  }, [styles?.children]);\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n  return <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n        return <Stack.Item key={i} styles={childrenStyles} data-ui-id={ids.verticalGalleryVideoTile}>\n              {child}\n            </Stack.Item>;\n      })}\n      </Stack>\n      {showButtons && <VerticalGalleryControlBar buttonsDisabled={buttonState} onPreviousButtonClick={onPreviousButtonClick} onNextButtonClick={onNextButtonClick} totalPages={lastPage} currentPage={page} />}\n    </Stack>;\n};\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const {\n    onNextButtonClick,\n    onPreviousButtonClick,\n    buttonsDisabled,\n    currentPage,\n    totalPages,\n    styles\n  } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n  const strings = useLocale().strings.verticalGallery;\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n  const controlBarSpacing = {\n    childrenGap: '0.5rem'\n  };\n  const previousButtonAriaLabel = strings.leftNavButtonAriaLabel ? _formatString(strings.leftNavButtonAriaLabel, {\n    current: `${currentPage}`,\n    total: `${totalPages}`\n  }) : undefined;\n  const nextButtonAriaLabel = strings.rightNavButtonAriaLabel ? _formatString(strings.rightNavButtonAriaLabel, {\n    current: `${currentPage}`,\n    total: `${totalPages}`\n  }) : undefined;\n  return <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton className={previousButtonSyles} onClick={onPreviousButtonClick} disabled={buttonsDisabled?.previous} ariaLabel={previousButtonAriaLabel} data-ui-id={ids.overflowGalleryLeftNavButton}>\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text data-ui-id={ids.verticalGalleryPageCounter} className={pageCounterStyles}>{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton className={nextButtonsStyles} onClick={onNextButtonClick} disabled={buttonsDisabled?.next} ariaLabel={nextButtonAriaLabel} data-ui-id={ids.overflowGalleryRightNavButton}>\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>;\n};"]}
+{"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VerticalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EACL,sBAAsB,EACtB,sCAAsC,EACtC,sBAAsB,EACtB,qBAAqB,EACrB,aAAa,EACb,SAAS,EACV,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,mCAAgC;AAsExD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAE1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAuC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAErH,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,CAAC;IAE/D,MAAM,YAAY,GAAe,OAAO,CAAC,GAAG,EAAE;QAC5C,OAAO,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,eAAe,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,MAAA,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,mCAAI,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC,CAAC;IAE/C,MAAM,uBAAuB,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC;IAC7D,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrF,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACzC,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;YAClC,OAAO,MAAA,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,0CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAClD,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;YACjD,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO;IACT,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,gBAAgB,GAAG,eAAe,CAAC;IAEvD,MAAM,qBAAqB,GAAG,GAAS,EAAE;QACvC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAS,EAAE;QACnC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,IAAI,IAAI,GAAG,QAAQ,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;QACpC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC/C,oDAAoD;YACpD,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QACnD,CAAC;aAAM,IAAI,IAAI,KAAK,CAAC,IAAI,WAAW,EAAE,CAAC;YACrC,4BAA4B;YAC5B,cAAc,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QAClD,CAAC;aAAM,IAAI,IAAI,KAAK,QAAQ,IAAI,WAAW,EAAE,CAAC;YAC5C,2BAA2B;YAC3B,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAEpD,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,IAAI,eAAe,IAAI,CAAC,EAAE,CAAC;QACzB,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC;QACpD,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,IAC/B,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACvC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,IAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,cAAc,gBAAc,GAAG,CAAC,wBAAwB,IACjF,KAAK,CACK,CACd,CAAC;QACJ,CAAC,CAAC,CACI;QACP,WAAW,IAAI,CACd,oBAAC,yBAAyB,IACxB,eAAe,EAAE,WAAW,EAC5B,qBAAqB,EAAE,qBAAqB,EAC5C,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,QAAQ,EACpB,WAAW,EAAE,IAAI,GACjB,CACH,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IACvF,MAAM,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAC7G,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;IAEpD,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9C,OAAO,WAAW,CAAC,sCAAsC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC,CAAC;IAEnB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpC,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,WAAW,CAAC,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhC,MAAM,iBAAiB,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;IAEpD,MAAM,uBAAuB,GAAG,OAAO,CAAC,sBAAsB;QAC5D,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,EAAE,CAAC;QACtG,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,mBAAmB,GAAG,OAAO,CAAC,uBAAuB;QACzD,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,uBAAuB,EAAE,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,EAAE,CAAC;QACvG,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,MAAM,EAAE,iBAAiB,EAAE,UAAU,QAAC,SAAS,EAAE,0BAA0B;QACzG,oBAAC,aAAa,IACZ,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,qBAAqB,EAC9B,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,EACnC,SAAS,EAAE,uBAAuB,gBACtB,GAAG,CAAC,4BAA4B;YAE5C,oBAAC,IAAI,IAAC,QAAQ,EAAC,2BAA2B,EAAC,MAAM,EAAE,aAAa,GAAI,CACtD;QAChB,oBAAC,IAAI,kBACS,GAAG,CAAC,0BAA0B,EAC1C,SAAS,EAAE,iBAAiB,IAC5B,GAAG,WAAW,MAAM,UAAU,EAAE,CAAQ;QAC1C,oBAAC,aAAa,IACZ,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,IAAI,EAC/B,SAAS,EAAE,mBAAmB,gBAClB,GAAG,CAAC,6BAA6B;YAE7C,oBAAC,IAAI,IAAC,QAAQ,EAAC,4BAA4B,EAAC,MAAM,EAAE,aAAa,GAAI,CACvD,CACV,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, mergeStyles, Stack, Text } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport {\n  childrenContainerStyle,\n  pageNavigationControlBarContainerStyle,\n  participantPageCounter,\n  leftRightButtonStyles,\n  navIconStyles,\n  rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Styles for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryStyles extends BaseCustomStyles {\n  /** Styles for each video tile in the vertical gallery */\n  children?: IStyle;\n  /** Styles for the verticalGallery control bar */\n  controlBar?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * Strings for localization of the vertical gallery.\n *\n * @public\n */\nexport interface VerticalGalleryStrings {\n  /** Aria label for the left page navigation button */\n  leftNavButtonAriaLabel?: string;\n  /** Aria label for the right page navigation button */\n  rightNavButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the control bar inside the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryControlBarStyles extends BaseCustomStyles {\n  /**\n   * styles for the next button in the VerticalGalleryControlBar\n   */\n  nextButton?: IStyle;\n  /**\n   * Styles for the previous button in the VerticalGalleryControlBar\n   */\n  previousButton?: IStyle;\n  /**\n   * Styles for the counter in the VerticalGalleryControlBar\n   */\n  counter?: IStyle;\n}\n/**\n * Props for the VerticalGallery component\n *\n * @public\n */\nexport interface VerticalGalleryProps {\n  /** Video tiles for the remote participants in the vertical gallery */\n  children: React.ReactNode;\n  /** Max number of children per page in the vertical Gallery */\n  childrenPerPage: number;\n  /** Styles to customize the vertical gallery */\n  styles?: VerticalGalleryStyles;\n  /** helper function to choose which tiles to give video to. */\n  onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\ninterface VerticalGalleryControlBarProps {\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n  buttonsDisabled: { next: boolean; previous: boolean };\n  totalPages: number;\n  currentPage: number;\n  styles?: VerticalGalleryControlBarStyles;\n}\n\n/**\n * VerticalGallery is a overflow gallery for participants in the {@link VideoGallery} component. Stacks\n * participants on the Y-axis of the VideoGallery for better use of horizontal space.\n *\n * @public\n */\nexport const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {\n  const { children, styles, childrenPerPage, onFetchTilesToRender } = props;\n\n  const [page, setPage] = useState(1);\n  const [buttonState, setButtonState] = useState<{ previous: boolean; next: boolean }>({ previous: true, next: true });\n\n  const ids = useIdentifiers();\n\n  const numberOfChildren = React.Children.count(children);\n  const lastPage = Math.ceil(numberOfChildren / childrenPerPage);\n\n  const indexesArray: number[][] = useMemo(() => {\n    return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);\n  }, [numberOfChildren, childrenPerPage]);\n\n  useEffect(() => {\n    if (onFetchTilesToRender && indexesArray) {\n      onFetchTilesToRender(indexesArray[page - 1] ?? []);\n    }\n  }, [indexesArray, onFetchTilesToRender, page]);\n\n  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;\n  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n  const childrenOnCurrentPage = useMemo(() => {\n    if (indexesArray[0] !== undefined) {\n      return indexesArray[clippedPage - 1]?.map((index) => {\n        return React.Children.toArray(children)[index];\n      });\n    }\n    return;\n  }, [indexesArray, clippedPage, children]);\n\n  const showButtons = numberOfChildren > childrenPerPage;\n\n  const onPreviousButtonClick = (): void => {\n    setPage(page - 1);\n  };\n  const onNextButtonClick = (): void => {\n    setPage(page + 1);\n  };\n\n  if (page > lastPage && lastPage > 0) {\n    setPage(lastPage);\n  }\n\n  useEffect(() => {\n    if (page > 1 && page < lastPage && showButtons) {\n      // we are somewhere in between first and last pages.\n      setButtonState({ previous: false, next: false });\n    } else if (page === 1 && showButtons) {\n      // we are on the first page.\n      setButtonState({ previous: true, next: false });\n    } else if (page === lastPage && showButtons) {\n      // we are on the last page.\n      setButtonState({ previous: false, next: true });\n    }\n  }, [page, numberOfChildren, lastPage, showButtons]);\n\n  const childContainerStyle = useMemo(() => {\n    return { root: childrenContainerStyle(2) };\n  }, []);\n\n  const childrenStyles = useMemo(() => {\n    return { root: styles?.children };\n  }, [styles?.children]);\n\n  if (childrenPerPage <= 0) {\n    return <></>;\n  }\n\n  return (\n    <Stack className={mergeStyles(rootStyle, styles?.root)}>\n      <Stack styles={childContainerStyle}>\n        {childrenOnCurrentPage?.map((child, i) => {\n          return (\n            <Stack.Item key={i} styles={childrenStyles} data-ui-id={ids.verticalGalleryVideoTile}>\n              {child}\n            </Stack.Item>\n          );\n        })}\n      </Stack>\n      {showButtons && (\n        <VerticalGalleryControlBar\n          buttonsDisabled={buttonState}\n          onPreviousButtonClick={onPreviousButtonClick}\n          onNextButtonClick={onNextButtonClick}\n          totalPages={lastPage}\n          currentPage={page}\n        />\n      )}\n    </Stack>\n  );\n};\n\nconst VerticalGalleryControlBar = (props: VerticalGalleryControlBarProps): JSX.Element => {\n  const { onNextButtonClick, onPreviousButtonClick, buttonsDisabled, currentPage, totalPages, styles } = props;\n  const theme = useTheme();\n  const ids = useIdentifiers();\n\n  const strings = useLocale().strings.verticalGallery;\n\n  const pageCounterContainerStyles = useMemo(() => {\n    return mergeStyles(pageNavigationControlBarContainerStyle, styles?.root);\n  }, [styles?.root]);\n\n  const previousButtonSyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.previousButton);\n  }, [styles?.previousButton, theme]);\n\n  const pageCounterStyles = useMemo(() => {\n    return mergeStyles(participantPageCounter, styles?.counter);\n  }, [styles?.counter]);\n\n  const nextButtonsStyles = useMemo(() => {\n    return mergeStyles(leftRightButtonStyles(theme), styles?.nextButton);\n  }, [styles?.nextButton, theme]);\n\n  const controlBarSpacing = { childrenGap: '0.5rem' };\n\n  const previousButtonAriaLabel = strings.leftNavButtonAriaLabel\n    ? _formatString(strings.leftNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })\n    : undefined;\n\n  const nextButtonAriaLabel = strings.rightNavButtonAriaLabel\n    ? _formatString(strings.rightNavButtonAriaLabel, { current: `${currentPage}`, total: `${totalPages}` })\n    : undefined;\n\n  return (\n    <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n      <DefaultButton\n        className={previousButtonSyles}\n        onClick={onPreviousButtonClick}\n        disabled={buttonsDisabled?.previous}\n        ariaLabel={previousButtonAriaLabel}\n        data-ui-id={ids.overflowGalleryLeftNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryLeftButton\" styles={navIconStyles} />\n      </DefaultButton>\n      <Text\n        data-ui-id={ids.verticalGalleryPageCounter}\n        className={pageCounterStyles}\n      >{`${currentPage} / ${totalPages}`}</Text>\n      <DefaultButton\n        className={nextButtonsStyles}\n        onClick={onNextButtonClick}\n        disabled={buttonsDisabled?.next}\n        ariaLabel={nextButtonAriaLabel}\n        data-ui-id={ids.overflowGalleryRightNavButton}\n      >\n        <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n      </DefaultButton>\n    </Stack>\n  );\n};\n"]}

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

@@ -54,7 +54,9 @@ const deriveProps = (props, fallbacks) => {
     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;
+    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,

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

@@ -1 +1 @@
-{"version":3,"file":"PresetVideoEffectsItems.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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;IACH,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;IACH,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;IACH,OAAO,oBAAC,iBAAiB,oBAAK,YAAY,EAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oDAAoD;AACpD,MAAM,WAAW,GAAG,CAAC,KAA6B,EAAE,SAKnD,EAA0B,EAAE;;IAC3B,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,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,KAAK,QAAQ,EAAC,CAAC,CAAC,OAAO,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAO,CAAA,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,SAAS,CAAC,SAAS,CAAC;IAC/J,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  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  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  return <_VideoEffectsItem {...derivedProps} />;\n};\n\n/** Applies fallbacks if props were not specified */\nconst deriveProps = (props: _VideoEffectsItemProps, fallbacks: {\n  iconName: string;\n  title: string;\n  tooltipContent: string;\n  ariaLabel: string;\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 = props.ariaLabel ?? typeof props.tooltipProps?.content === 'string' ? typeof props.tooltipProps?.content : props.title ?? fallbacks.ariaLabel;\n  return {\n    ...props,\n    iconProps,\n    title,\n    tooltipProps,\n    ariaLabel\n  };\n};"]}
+{"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.js

@@ -33,31 +33,27 @@ export const _VideoBackgroundEffectsPicker = (props) => {
         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.itemKey === selectedEffect, onSelect: () => setSelectedEffect(option.itemKey) }, option)));
+    const convertedOptions = props.options.map((option) => (Object.assign({ isSelected: option.itemKey === selectedEffect, onSelect: () => setSelectedEffect(option.itemKey) }, option)));
     const itemsPerRow = (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3;
     const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);
     // If the final row is not full, fill it with hidden items to ensure layout.
     const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - ((_d = (_c = optionsByRow[optionsByRow.length - 1]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0);
     const effectsLabelId = useId('effects-radio-label');
-    return React.createElement(FocusZone, null,
-        React.createElement(Stack, { tokens: {
-                childrenGap: '0.5rem'
-            }, role: "radiogroup", "aria-labelledby": effectsLabelId },
+    return (React.createElement(FocusZone, null,
+        React.createElement(Stack, { tokens: { childrenGap: '0.5rem' }, role: "radiogroup", "aria-labelledby": effectsLabelId },
             React.createElement(Label, { id: effectsLabelId, className: mergeStyles((_e = props.styles) === null || _e === void 0 ? void 0 : _e.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'
-                    }, "data-ui-id": "video-effects-picker-row" },
+                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' }, "data-ui-id": "video-effects-picker-row" },
                     options.map((option, i) => {
                         if (i === 0 && rowIndex === 0) {
-                            return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, componentRef: props.componentRef }));
+                            return (React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey, componentRef: props.componentRef })));
                         }
                         return React.createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey, key: option.itemKey }));
                     }),
-                    fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({
-                        length: fillCount
-                    }).map((_, index) => React.createElement(Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })));
-            })));
+                    fillCount > 0 &&
+                        rowIndex === optionsByRow.length - 1 &&
+                        Array.from({ length: fillCount }).map((_, index) => (React.createElement(Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })))));
+            }))));
 };
 //# sourceMappingURL=VideoBackgroundEffectsPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusZone, IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useId, useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\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   * Imperative handle for calling focus()\n   */\n  componentRef?: React.RefObject<{\n    focus: () => void;\n  }>;\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<string | undefined>(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  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;\n  const setSelectedEffect = (selectedEffectKey: string): void => {\n    setComponentControlledSelectedEffectKey(selectedEffectKey);\n    props.onChange?.(selectedEffectKey);\n  };\n  const convertedOptions: _VideoEffectsItemProps[] = props.options.map(option => ({\n    isSelected: option.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - (optionsByRow[optionsByRow.length - 1]?.length ?? 0);\n  const effectsLabelId = useId('effects-radio-label');\n  return <FocusZone>\n      <Stack tokens={{\n      childrenGap: '0.5rem'\n    }} role=\"radiogroup\" aria-labelledby={effectsLabelId}>\n        <Label id={effectsLabelId} className={mergeStyles(props.styles?.label)}>\n          {props.label}\n        </Label>\n\n        {optionsByRow.map((options, rowIndex) => <Stack className={mergeStyles(props.styles?.rowRoot)} wrap={props.itemsPerRow === 'wrap'} horizontal key={rowIndex} tokens={{\n        childrenGap: '0.5rem'\n      }} data-ui-id=\"video-effects-picker-row\">\n            {options.map((option, i) => {\n          if (i === 0 && rowIndex === 0) {\n            return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} componentRef={props.componentRef} />;\n          }\n          return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n        })}\n            {fillCount > 0 && rowIndex === optionsByRow.length - 1 && Array.from({\n          length: fillCount\n        }).map((_, index) => <Stack key={index} styles={hiddenVideoEffectsItemContainerStyles} data-ui-id=\"video-effects-hidden-item\" />)}\n          </Stack>)}\n      </Stack>\n    </FocusZone>;\n};"]}
+{"version":3,"file":"VideoBackgroundEffectsPicker.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { FocusZone, IStyle, Label, mergeStyles, Stack } from '@fluentui/react';\nimport { useId, useWarnings } from '@fluentui/react-hooks';\nimport React from 'react';\nimport { chunk } from '../utils';\nimport { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';\nimport { hiddenVideoEffectsItemContainerStyles } from './VideoEffectsItem.styles';\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   * Imperative handle for calling focus()\n   */\n  componentRef?: React.RefObject<{\n    focus: () => void;\n  }>;\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.itemKey === selectedEffect,\n    onSelect: () => setSelectedEffect(option.itemKey),\n    ...option\n  }));\n\n  const itemsPerRow = props.itemsPerRow ?? 3;\n  const optionsByRow = itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, itemsPerRow);\n\n  // If the final row is not full, fill it with hidden items to ensure layout.\n  const fillCount = itemsPerRow === 'wrap' ? 0 : itemsPerRow - (optionsByRow[optionsByRow.length - 1]?.length ?? 0);\n\n  const effectsLabelId = useId('effects-radio-label');\n  return (\n    <FocusZone>\n      <Stack tokens={{ childrenGap: '0.5rem' }} role=\"radiogroup\" aria-labelledby={effectsLabelId}>\n        <Label id={effectsLabelId} className={mergeStyles(props.styles?.label)}>\n          {props.label}\n        </Label>\n\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            data-ui-id=\"video-effects-picker-row\"\n          >\n            {options.map((option, i) => {\n              if (i === 0 && rowIndex === 0) {\n                return (\n                  <_VideoEffectsItem\n                    {...option}\n                    itemKey={option.itemKey}\n                    key={option.itemKey}\n                    componentRef={props.componentRef}\n                  />\n                );\n              }\n              return <_VideoEffectsItem {...option} itemKey={option.itemKey} key={option.itemKey} />;\n            })}\n            {fillCount > 0 &&\n              rowIndex === optionsByRow.length - 1 &&\n              Array.from({ length: fillCount }).map((_, index) => (\n                <Stack\n                  key={index}\n                  styles={hiddenVideoEffectsItemContainerStyles}\n                  data-ui-id=\"video-effects-hidden-item\"\n                />\n              ))}\n          </Stack>\n        ))}\n      </Stack>\n    </FocusZone>\n  );\n};\n"]}

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

@@ -14,35 +14,21 @@ export const _VideoEffectsItem = (props) => {
     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 iconContainerStyles = mergeStyles({
-        height: '1.25rem'
-    }, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.iconContainer);
-    const textContainerStyles = mergeStyles({
-        height: '1.25rem',
-        width: '100%',
-        overflow: 'hidden'
-    }, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.textContainer);
+    const iconContainerStyles = mergeStyles({ height: '1.25rem' }, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.iconContainer);
+    const textContainerStyles = mergeStyles({ height: '1.25rem', width: '100%', overflow: 'hidden' }, (_e = props.styles) === null || _e === void 0 ? void 0 : _e.textContainer);
     const containerStyles = useCallback(() => videoEffectsItemContainerStyles({
         theme,
         isSelected,
         disabled,
         backgroundImage
     }), [backgroundImage, disabled, isSelected, theme]);
-    return React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
+    return (React.createElement(TooltipHost, Object.assign({}, props.tooltipProps),
         React.createElement(Stack, { key: props.itemKey, className: mergeStyles((_f = props.styles) === null || _f === void 0 ? void 0 : _f.root), verticalAlign: "center", horizontalAlign: "center", "data-ui-id": `video-effects-item` },
             React.createElement(DefaultButton, { styles: containerStyles(), onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.itemKey); }, componentRef: props.componentRef, ariaLabel: (_j = (_g = props.ariaLabel) !== null && _g !== void 0 ? _g : (_h = props.tooltipProps) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : props.itemKey, "aria-disabled": props.disabled, role: "radio", "aria-checked": isSelected },
-                React.createElement(Stack, { horizontalAlign: 'center', className: mergeStyles({
-                        width: '100%'
-                    }) },
-                    props.iconProps && React.createElement(Stack.Item, { className: iconContainerStyles },
-                        React.createElement(Icon, Object.assign({}, props.iconProps))),
-                    props.title && React.createElement(Stack.Item, { className: textContainerStyles },
-                        React.createElement(Text, { variant: "small", styles: {
-                                root: {
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis'
-                                }
-                            } }, props.title))))));
+                React.createElement(Stack, { horizontalAlign: 'center', className: mergeStyles({ width: '100%' }) },
+                    props.iconProps && (React.createElement(Stack.Item, { className: iconContainerStyles },
+                        React.createElement(Icon, Object.assign({}, props.iconProps)))),
+                    props.title && (React.createElement(Stack.Item, { className: textContainerStyles },
+                        React.createElement(Text, { variant: "small", styles: { root: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } } }, props.title))))))));
 };
 //# sourceMappingURL=VideoEffectsItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAW,IAAI,EAAyC,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvJ,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC;AAqG5E;;;;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;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;KAClB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,mBAAmB,GAAG,WAAW,CAAC;QACtC,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,QAAQ;KACnB,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,aAAa,CAAC,CAAC;IAChC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,+BAA+B,CAAC;QACxE,KAAK;QACL,UAAU;QACV,QAAQ;QACR,eAAe;KAChB,CAAC,EAAE,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IACpD,OAAO,oBAAC,WAAW,oBAAK,KAAK,CAAC,YAAY;QACtC,oBAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,QAAQ,gBAAa,oBAAoB;YACrJ,oBAAC,aAAa,IAAC,MAAM,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,OAAO,CAAC,CAAA,EAAA,EAAE,YAAY,EAAE,KAAK,CAAC,YAAwC,EAAE,SAAS,EAAE,MAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,MAAA,KAAK,CAAC,YAAY,0CAAE,OAAiB,mCAAI,KAAK,CAAC,OAAO,mBAAiB,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,kBAAe,UAAU;gBACvU,oBAAC,KAAK,IAAC,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC;wBACzD,KAAK,EAAE,MAAM;qBACd,CAAC;oBACG,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBAC1D,oBAAC,IAAI,oBAAK,KAAK,CAAC,SAAS,EAAI,CAClB;oBACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,mBAAmB;wBACtD,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE;gCAChC,IAAI,EAAE;oCACJ,UAAU,EAAE,QAAQ;oCACpB,QAAQ,EAAE,QAAQ;oCAClB,YAAY,EAAE,UAAU;iCACzB;6BACF,IACM,KAAK,CAAC,KAAK,CACP,CACI,CACT,CACM,CACV,CACI,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, IButton, Icon, IIconProps, IStyle, ITooltipHostProps, mergeStyles, Stack, Text, TooltipHost, useTheme } 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   * Imperative handle for calling focus()\n   */\n  componentRef?: React.RefObject<{\n    focus: () => void;\n  }>;\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  const iconContainerStyles = mergeStyles({\n    height: '1.25rem'\n  }, props.styles?.iconContainer);\n  const textContainerStyles = mergeStyles({\n    height: '1.25rem',\n    width: '100%',\n    overflow: 'hidden'\n  }, props.styles?.textContainer);\n  const containerStyles = useCallback(() => videoEffectsItemContainerStyles({\n    theme,\n    isSelected,\n    disabled,\n    backgroundImage\n  }), [backgroundImage, disabled, isSelected, theme]);\n  return <TooltipHost {...props.tooltipProps}>\n      <Stack key={props.itemKey} className={mergeStyles(props.styles?.root)} verticalAlign=\"center\" horizontalAlign=\"center\" data-ui-id={`video-effects-item`}>\n        <DefaultButton styles={containerStyles()} onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)} componentRef={props.componentRef as React.RefObject<IButton>} ariaLabel={props.ariaLabel ?? props.tooltipProps?.content as string ?? props.itemKey} aria-disabled={props.disabled} role=\"radio\" aria-checked={isSelected}>\n          <Stack horizontalAlign={'center'} className={mergeStyles({\n          width: '100%'\n        })}>\n            {props.iconProps && <Stack.Item className={iconContainerStyles}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>}\n            {props.title && <Stack.Item className={textContainerStyles}>\n                <Text variant=\"small\" styles={{\n              root: {\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis'\n              }\n            }}>\n                  {props.title}\n                </Text>\n              </Stack.Item>}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>;\n};"]}
+{"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  DefaultButton,\n  IButton,\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   * Imperative handle for calling focus()\n   */\n  componentRef?: React.RefObject<{\n    focus: () => void;\n  }>;\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  const iconContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.iconContainer);\n  const textContainerStyles = mergeStyles(\n    { height: '1.25rem', width: '100%', overflow: 'hidden' },\n    props.styles?.textContainer\n  );\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        data-ui-id={`video-effects-item`}\n      >\n        <DefaultButton\n          styles={containerStyles()}\n          onClick={disabled ? undefined : () => props.onSelect?.(props.itemKey)}\n          componentRef={props.componentRef as React.RefObject<IButton>}\n          ariaLabel={props.ariaLabel ?? (props.tooltipProps?.content as string) ?? props.itemKey}\n          aria-disabled={props.disabled}\n          role=\"radio\"\n          aria-checked={isSelected}\n        >\n          <Stack horizontalAlign={'center'} className={mergeStyles({ width: '100%' })}>\n            {props.iconProps && (\n              <Stack.Item className={iconContainerStyles}>\n                <Icon {...props.iconProps} />\n              </Stack.Item>\n            )}\n            {props.title && (\n              <Stack.Item className={textContainerStyles}>\n                <Text\n                  variant=\"small\"\n                  styles={{ root: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }}\n                >\n                  {props.title}\n                </Text>\n              </Stack.Item>\n            )}\n          </Stack>\n        </DefaultButton>\n      </Stack>\n    </TooltipHost>\n  );\n};\n"]}

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

@@ -30,13 +30,17 @@ export const videoEffectsItemContainerStyles = (args) => {
             height: VideoEffectsItemContainerHeight,
             width: VideoEffectsItemContainerWidth,
             outlineOffset: '-1px',
-            outline: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
+            outline: args.isSelected
+                ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
             ':hover': {
                 boxSizing: 'border-box',
                 width: VideoEffectsItemContainerBorderWidth,
                 height: VideoEffectsItemContainerBorderHeight,
                 outlineOffset: '-1px',
-                outline: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                outline: args.disabled && !args.isSelected
+                    ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
+                    : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
             },
             padding: '0.5rem'
         }

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

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsItem.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,MAAM,+BAA+B,GAAG,UAAU,CAAC;AACnD,MAAM,8BAA8B,GAAG,SAAS,CAAC;AACjD,MAAM,qCAAqC,GAAG,UAAU,CAAC;AACzD,MAAM,oCAAoC,GAAG,SAAS,CAAC;AACvD,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,EAAiB,EAAE;IAClB,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,KAAK,EAAE,8BAA8B;YACrC,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;YAC7K,QAAQ,EAAE;gBACR,SAAS,EAAE,YAAY;gBACvB,KAAK,EAAE,oCAAoC;gBAC3C,MAAM,EAAE,qCAAqC;gBAC7C,aAAa,EAAE,MAAM;gBACrB,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;aAChM;YACD,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderHeight = '3.373rem';\nconst VideoEffectsItemContainerBorderWidth = '4.85rem';\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}): IButtonStyles => {\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      width: VideoEffectsItemContainerWidth,\n      outlineOffset: '-1px',\n      outline: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n      ':hover': {\n        boxSizing: 'border-box',\n        width: VideoEffectsItemContainerBorderWidth,\n        height: VideoEffectsItemContainerBorderHeight,\n        outlineOffset: '-1px',\n        outline: args.disabled && !args.isSelected ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n      },\n      padding: '0.5rem'\n    }\n  };\n};"]}
+{"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,qCAAqC,GAAG,UAAU,CAAC;AACzD,MAAM,oCAAoC,GAAG,SAAS,CAAC;AACvD,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,EAAiB,EAAE;IAClB,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,KAAK,EAAE,8BAA8B;YACrC,aAAa,EAAE,MAAM;YACrB,OAAO,EAAE,IAAI,CAAC,UAAU;gBACtB,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;gBACrE,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;YAChF,QAAQ,EAAE;gBACR,SAAS,EAAE,YAAY;gBACvB,KAAK,EAAE,oCAAoC;gBAC3C,MAAM,EAAE,qCAAqC;gBAC7C,aAAa,EAAE,MAAM;gBACrB,OAAO,EACL,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU;oBAC/B,CAAC,CAAC,GAAG,sBAAsB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;oBAC9E,CAAC,CAAC,GAAG,qBAAqB,UAAU,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;aAC1E;YACD,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, ITheme } from '@fluentui/react';\n\nconst VideoEffectsItemContainerHeight = '3.375rem';\nconst VideoEffectsItemContainerWidth = '4.83rem';\nconst VideoEffectsItemContainerBorderHeight = '3.373rem';\nconst VideoEffectsItemContainerBorderWidth = '4.85rem';\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}): IButtonStyles => {\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      width: VideoEffectsItemContainerWidth,\n      outlineOffset: '-1px',\n      outline: args.isSelected\n        ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n        : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,\n      ':hover': {\n        boxSizing: 'border-box',\n        width: VideoEffectsItemContainerBorderWidth,\n        height: VideoEffectsItemContainerBorderHeight,\n        outlineOffset: '-1px',\n        outline:\n          args.disabled && !args.isSelected\n            ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`\n            : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`\n      },\n      padding: '0.5rem'\n    }\n  };\n};\n"]}

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

@@ -23,14 +23,16 @@ export const DefaultLayout = (props) => {
     // 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 remoteVideosOn = remoteParticipants.filter(p => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; }).length > 0;
+    const remoteVideosOn = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; }).length > 0;
     const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
         localParticipant,
         dominantSpeakers,
         maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,
         isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current,
+        maxOverflowGalleryDominantSpeakers: screenShareComponent
+            ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
+            : childrenPerPage.current,
         pinnedParticipantUserIds,
         layout: 'default',
         spotlightedParticipantUserIds
@@ -56,14 +58,23 @@ export const DefaultLayout = (props) => {
         if (overflowGalleryTiles.length === 0) {
             return null;
         }
-        return React.createElement(OverflowGallery, { isNarrow: isNarrow, isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
+        return (React.createElement(OverflowGallery, { isNarrow: isNarrow, isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            }, parentWidth: parentWidth });
-    }, [isNarrow, isShort, overflowGalleryTiles, styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles === null || styles === void 0 ? void 0 : styles.verticalGallery, parentWidth]);
-    return React.createElement(Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
+            }, parentWidth: parentWidth }));
+    }, [
+        isNarrow,
+        isShort,
+        overflowGalleryTiles,
+        styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
+        overflowGalleryPosition,
+        setIndexesToRender,
+        styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
+        parentWidth
+    ]);
+    return (React.createElement(Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle, tokens: videoGalleryLayoutGap },
         props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
-        screenShareComponent ? screenShareComponent : React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles),
-        overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition));
+        screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+        overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)));
 };
 const overflowGalleryTrampoline = (gallery, galleryPosition) => {
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultLayout.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport { MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY, renderTiles, 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    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    spotlightedParticipantUserIds = []\n  } = props;\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\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 remoteVideosOn = remoteParticipants.filter(p => p.videoStream?.isAvailable).length > 0;\n  const {\n    gridParticipants,\n    overflowGalleryParticipants\n  } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent ? childrenPerPage.current - (pinnedParticipantUserIds.length + 1) % childrenPerPage.current : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    spotlightedParticipantUserIds\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  let {\n    gridTiles,\n    overflowGalleryTiles\n  } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);\n  if (localVideoComponent) {\n    if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return <OverflowGallery isNarrow={isNarrow} isShort={isShort} shouldFloatLocalVideo={false} overflowGalleryElements={overflowGalleryTiles} horizontalGalleryStyles={styles?.horizontalGallery} verticalGalleryStyles={styles?.verticalGallery} overflowGalleryPosition={overflowGalleryPosition} onFetchTilesToRender={setIndexesToRender} onChildrenPerPageChange={(n: number) => {\n      childrenPerPage.current = n;\n    }} parentWidth={parentWidth} />;\n  }, [isNarrow, isShort, overflowGalleryTiles, styles?.horizontalGallery, overflowGalleryPosition, setIndexesToRender, styles?.verticalGallery, parentWidth]);\n  return <Stack horizontal={overflowGalleryPosition === 'verticalRight'} styles={rootLayoutStyle} tokens={videoGalleryLayoutGap}>\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? screenShareComponent : <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>;\n};\nconst overflowGalleryTrampoline = (gallery: JSX.Element | null, galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\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';\nimport { isShortHeight } from '../utils/responsive';\nimport { LayoutProps } from './Layout';\nimport { rootLayoutStyle } from './styles/DefaultLayout.styles';\nimport { videoGalleryLayoutGap } from './styles/Layout.styles';\nimport {\n  MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n  renderTiles,\n  useOrganizedParticipants\n} 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    parentHeight,\n    pinnedParticipantUserIds = [],\n    overflowGalleryPosition = 'horizontalBottom',\n    spotlightedParticipantUserIds = []\n  } = props;\n\n  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;\n\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 remoteVideosOn = remoteParticipants.filter((p) => p.videoStream?.isAvailable).length > 0;\n  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({\n    remoteParticipants,\n    localParticipant,\n    dominantSpeakers,\n    maxGridParticipants: remoteVideosOn ? maxRemoteVideoStreams : MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY,\n    isScreenShareActive: !!screenShareComponent,\n    maxOverflowGalleryDominantSpeakers: screenShareComponent\n      ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)\n      : childrenPerPage.current,\n    pinnedParticipantUserIds,\n    layout: 'default',\n    spotlightedParticipantUserIds\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  let { gridTiles, overflowGalleryTiles } = renderTiles(\n    gridParticipants,\n    onRenderRemoteParticipant,\n    maxRemoteVideoStreams,\n    indexesToRender,\n    overflowGalleryParticipants,\n    dominantSpeakers\n  );\n\n  if (localVideoComponent) {\n    if (screenShareComponent || spotlightedParticipantUserIds.length > 0) {\n      overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);\n    } else {\n      gridTiles = [localVideoComponent].concat(gridTiles);\n    }\n  }\n\n  const overflowGallery = useMemo(() => {\n    if (overflowGalleryTiles.length === 0) {\n      return null;\n    }\n    return (\n      <OverflowGallery\n        isNarrow={isNarrow}\n        isShort={isShort}\n        shouldFloatLocalVideo={false}\n        overflowGalleryElements={overflowGalleryTiles}\n        horizontalGalleryStyles={styles?.horizontalGallery}\n        verticalGalleryStyles={styles?.verticalGallery}\n        overflowGalleryPosition={overflowGalleryPosition}\n        onFetchTilesToRender={setIndexesToRender}\n        onChildrenPerPageChange={(n: number) => {\n          childrenPerPage.current = n;\n        }}\n        parentWidth={parentWidth}\n      />\n    );\n  }, [\n    isNarrow,\n    isShort,\n    overflowGalleryTiles,\n    styles?.horizontalGallery,\n    overflowGalleryPosition,\n    setIndexesToRender,\n    styles?.verticalGallery,\n    parentWidth\n  ]);\n\n  return (\n    <Stack\n      horizontal={overflowGalleryPosition === 'verticalRight'}\n      styles={rootLayoutStyle}\n      tokens={videoGalleryLayoutGap}\n    >\n      {props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : <></>}\n      {screenShareComponent ? (\n        screenShareComponent\n      ) : (\n        <GridLayout key=\"grid-layout\" styles={styles?.gridLayout}>\n          {gridTiles}\n        </GridLayout>\n      )}\n      {overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)}\n    </Stack>\n  );\n};\n\nconst overflowGalleryTrampoline = (\n  gallery: JSX.Element | null,\n  galleryPosition?: 'horizontalBottom' | 'verticalRight' | 'horizontalTop'\n): JSX.Element | null => {\n  return galleryPosition !== 'horizontalTop' ? gallery : <></>;\n  return gallery;\n};\n"]}

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

@@ -31,17 +31,21 @@ export const FloatingLocalVideo = (props) => {
     const strings = useLocale().strings.videoGallery;
     // 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 + _convertRemToPx(localVideoSizeRem.width) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
-        y: -parentHeight + _convertRemToPx(localVideoSizeRem.height) + _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
-    } : undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
+    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 +
+                _convertRemToPx(localVideoSizeRem.width) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
+            y: -parentHeight +
+                _convertRemToPx(localVideoSizeRem.height) +
+                _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
+        }
+        : 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, dataUiId: "floating-local-video-host" },
-        React.createElement(Stack, { "aria-label": (_a = strings.localVideoMovementAriaLabel) !== null && _a !== void 0 ? _a : strings.localVideoMovementLabel, tabIndex: 0, role: 'dialog' }, localVideoComponent));
+    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, dataUiId: "floating-local-video-host" },
+        React.createElement(Stack, { "aria-label": (_a = strings.localVideoMovementAriaLabel) !== null && _a !== void 0 ? _a : strings.localVideoMovementLabel, tabIndex: 0, role: 'dialog' }, localVideoComponent)));
 };
 //# sourceMappingURL=FloatingLocalVideo.js.map