@azure/communication-react 1.20.0-alpha-202410030015 → 1.20.0-alpha-202410050015

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/dist/communication-react.d.ts +67 -1
  2. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-BfMoXn7s.js → ChatMessageComponentAsRichTextEditBox-Bc2rnHE3.js} +2 -2
  3. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-BfMoXn7s.js.map → ChatMessageComponentAsRichTextEditBox-Bc2rnHE3.js.map} +1 -1
  4. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-DoRv_d64.js → RichTextSendBoxWrapper-BhEvRpXU.js} +2 -2
  5. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-DoRv_d64.js.map → RichTextSendBoxWrapper-BhEvRpXU.js.map} +1 -1
  6. package/dist/dist-cjs/communication-react/{index-BcfT9uWf.js → index-CM02z9d2.js} +585 -412
  7. package/dist/dist-cjs/communication-react/index-CM02z9d2.js.map +1 -0
  8. package/dist/dist-cjs/communication-react/index.js +3 -1
  9. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  10. package/dist/dist-esm/acs-ui-common/src/dataConversion.js +5 -1
  11. package/dist/dist-esm/acs-ui-common/src/dataConversion.js.map +1 -1
  12. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  13. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  14. package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.js +1 -1
  15. package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.js.map +1 -1
  16. package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.js +1 -1
  17. package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.js.map +1 -1
  18. package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.js +1 -1
  19. package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.js.map +1 -1
  20. package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.js +1 -1
  21. package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.js.map +1 -1
  22. package/dist/dist-esm/calling-component-bindings/src/baseSelectors.d.ts +3 -3
  23. package/dist/dist-esm/calling-component-bindings/src/baseSelectors.js.map +1 -1
  24. package/dist/dist-esm/calling-component-bindings/src/callControlSelectors.js +1 -1
  25. package/dist/dist-esm/calling-component-bindings/src/callControlSelectors.js.map +1 -1
  26. package/dist/dist-esm/calling-component-bindings/src/getRemoteParticipantsExcludingConsumers.js +2 -1
  27. package/dist/dist-esm/calling-component-bindings/src/getRemoteParticipantsExcludingConsumers.js.map +1 -1
  28. package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.js +2 -1
  29. package/dist/dist-esm/calling-component-bindings/src/utils/callUtils.js.map +1 -1
  30. package/dist/dist-esm/calling-stateful-client/src/BreakoutRoomsSubscriber.js +2 -2
  31. package/dist/dist-esm/calling-stateful-client/src/BreakoutRoomsSubscriber.js.map +1 -1
  32. package/dist/dist-esm/calling-stateful-client/src/CallClientState.d.ts +46 -0
  33. package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
  34. package/dist/dist-esm/calling-stateful-client/src/CallContext.d.ts +3 -0
  35. package/dist/dist-esm/calling-stateful-client/src/CallContext.js +57 -12
  36. package/dist/dist-esm/calling-stateful-client/src/CallContext.js.map +1 -1
  37. package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.d.ts +1 -0
  38. package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js +6 -0
  39. package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js.map +1 -1
  40. package/dist/dist-esm/calling-stateful-client/src/Converter.js +2 -0
  41. package/dist/dist-esm/calling-stateful-client/src/Converter.js.map +1 -1
  42. package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js +49 -43
  43. package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js.map +1 -1
  44. package/dist/dist-esm/calling-stateful-client/src/StatefulCallClient.d.ts +2 -1
  45. package/dist/dist-esm/calling-stateful-client/src/StatefulCallClient.js.map +1 -1
  46. package/dist/dist-esm/calling-stateful-client/src/StreamUtils.d.ts +2 -1
  47. package/dist/dist-esm/calling-stateful-client/src/StreamUtils.js.map +1 -1
  48. package/dist/dist-esm/calling-stateful-client/src/TogetherModeSubscriber.d.ts +19 -0
  49. package/dist/dist-esm/calling-stateful-client/src/TogetherModeSubscriber.js +32 -0
  50. package/dist/dist-esm/calling-stateful-client/src/TogetherModeSubscriber.js.map +1 -0
  51. package/dist/dist-esm/calling-stateful-client/src/UserFacingDiagnosticsSubscriber.js +1 -1
  52. package/dist/dist-esm/calling-stateful-client/src/UserFacingDiagnosticsSubscriber.js.map +1 -1
  53. package/dist/dist-esm/calling-stateful-client/src/index-public.d.ts +2 -0
  54. package/dist/dist-esm/calling-stateful-client/src/index-public.js.map +1 -1
  55. package/dist/dist-esm/communication-react/src/index.d.ts +1 -1
  56. package/dist/dist-esm/communication-react/src/index.js +1 -1
  57. package/dist/dist-esm/communication-react/src/index.js.map +1 -1
  58. package/dist/dist-esm/react-components/src/components/HorizontalGallery.js +2 -1
  59. package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map +1 -1
  60. package/dist/dist-esm/react-components/src/components/LocalVideoTile.js +1 -1
  61. package/dist/dist-esm/react-components/src/components/LocalVideoTile.js.map +1 -1
  62. package/dist/dist-esm/react-components/src/components/Notification.js +1 -1
  63. package/dist/dist-esm/react-components/src/components/Notification.js.map +1 -1
  64. package/dist/dist-esm/react-components/src/components/VerticalGallery.js +2 -1
  65. package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map +1 -1
  66. package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.js +1 -1
  67. package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.js.map +1 -1
  68. package/dist/dist-esm/react-components/src/index.d.ts +1 -0
  69. package/dist/dist-esm/react-components/src/index.js +1 -0
  70. package/dist/dist-esm/react-components/src/index.js.map +1 -1
  71. package/dist/dist-esm/react-components/src/localization/locales/cy-GB/ComponentLocale.d.ts +8 -0
  72. package/dist/dist-esm/react-components/src/localization/locales/cy-GB/ComponentLocale.js +13 -0
  73. package/dist/dist-esm/react-components/src/localization/locales/cy-GB/ComponentLocale.js.map +1 -0
  74. package/dist/dist-esm/react-components/src/localization/locales/cy-GB/strings.json +670 -0
  75. package/dist/dist-esm/react-components/src/theming/generateTheme.js +10 -2
  76. package/dist/dist-esm/react-components/src/theming/generateTheme.js.map +1 -1
  77. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js +13 -9
  78. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map +1 -1
  79. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.d.ts +4 -0
  80. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.js.map +1 -1
  81. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +15 -14
  82. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
  83. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.d.ts +0 -3
  84. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js +28 -21
  85. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js.map +1 -1
  86. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.js +11 -7
  87. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.js.map +1 -1
  88. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +7 -8
  89. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
  90. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.d.ts +1 -0
  91. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js +1 -1
  92. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js.map +1 -1
  93. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js +7 -3
  94. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js.map +1 -1
  95. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js +5 -2
  96. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js.map +1 -1
  97. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js +7 -6
  98. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js.map +1 -1
  99. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Devices.js +4 -4
  100. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Devices.js.map +1 -1
  101. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.js +6 -7
  102. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.js.map +1 -1
  103. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/ScreenShare.js +5 -5
  104. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/ScreenShare.js.map +1 -1
  105. package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js +3 -2
  106. package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js.map +1 -1
  107. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js +15 -10
  108. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
  109. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/DtmfDialpadPage.js +7 -9
  110. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/DtmfDialpadPage.js.map +1 -1
  111. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.d.ts +20 -1
  112. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js +19 -0
  113. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js.map +1 -1
  114. package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js +33 -36
  115. package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js.map +1 -1
  116. package/dist/dist-esm/react-composites/src/composites/ChatComposite/hooks/useSelector.d.ts +6 -0
  117. package/dist/dist-esm/react-composites/src/composites/ChatComposite/hooks/useSelector.js +11 -0
  118. package/dist/dist-esm/react-composites/src/composites/ChatComposite/hooks/useSelector.js.map +1 -0
  119. package/dist/dist-esm/react-composites/src/composites/ChatComposite/selectors/baseSelectors.d.ts +16 -0
  120. package/dist/dist-esm/react-composites/src/composites/ChatComposite/selectors/baseSelectors.js +15 -0
  121. package/dist/dist-esm/react-composites/src/composites/ChatComposite/selectors/baseSelectors.js.map +1 -0
  122. package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js +4 -5
  123. package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js.map +1 -1
  124. package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.d.ts +3 -0
  125. package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js +4 -7
  126. package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js.map +1 -1
  127. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.d.ts +2 -0
  128. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js +9 -4
  129. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map +1 -1
  130. package/dist/dist-esm/react-composites/src/composites/index.d.ts +1 -0
  131. package/dist/dist-esm/react-composites/src/composites/index.js +1 -0
  132. package/dist/dist-esm/react-composites/src/composites/index.js.map +1 -1
  133. package/dist/dist-esm/react-composites/src/composites/localization/locales/cy-GB/CompositeLocale.d.ts +8 -0
  134. package/dist/dist-esm/react-composites/src/composites/localization/locales/cy-GB/CompositeLocale.js +15 -0
  135. package/dist/dist-esm/react-composites/src/composites/localization/locales/cy-GB/CompositeLocale.js.map +1 -0
  136. package/dist/dist-esm/react-composites/src/composites/localization/locales/cy-GB/strings.json +411 -0
  137. package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json +1 -0
  138. package/package.json +5 -5
  139. package/dist/dist-cjs/communication-react/index-BcfT9uWf.js.map +0 -1
@@ -26,8 +26,9 @@ export const HorizontalGallery = (props) => {
26
26
  return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);
27
27
  }, [numberOfChildren, childrenPerPage]);
28
28
  useEffect(() => {
29
+ var _a;
29
30
  if (onFetchTilesToRender && indexesArray) {
30
- onFetchTilesToRender(indexesArray[page]);
31
+ onFetchTilesToRender((_a = indexesArray[page]) !== null && _a !== void 0 ? _a : []);
31
32
  }
32
33
  }, [indexesArray, onFetchTilesToRender, page]);
33
34
  const firstIndexOfCurrentPage = page * childrenPerPage;
@@ -1 +1 @@
1
- {"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * {@link HorizontalGallery} default children per page\n */\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n\n/**\n * {@link HorizontalGallery} Component Styles.\n * @public\n */\nexport interface HorizontalGalleryStyles extends BaseCustomStyles {\n /** Styles for each child of {@link HorizontalGallery} */\n children?: IStyle;\n /** Styles for navigation button to go to previous page */\n previousButton?: IStyle;\n /** Styles for navigation button to go to next page */\n nextButton?: IStyle;\n}\n\n/**\n * {@link HorizontalGallery} Component Props.\n */\nexport interface HorizontalGalleryProps {\n children: React.ReactNode;\n /**\n * Styles for HorizontalGallery\n */\n styles?: HorizontalGalleryStyles;\n /**\n * Children shown per page\n * @defaultValue 5\n */\n childrenPerPage?: number;\n /**\n * helper function to choose which tiles to give video to.\n */\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\n/**\n * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.\n * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}\n * @returns\n */\nexport const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {\n const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;\n\n const ids = useIdentifiers();\n\n const [page, setPage] = useState(0);\n\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\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]);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n\n const firstIndexOfCurrentPage = page * childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n\n const childrenOnCurrentPage = useMemo(() => {\n if (indexesArray && indexesArray[clippedPage] !== undefined) {\n return indexesArray[clippedPage].map((index) => {\n return React.Children.toArray(children)[index];\n });\n }\n return [];\n }, [indexesArray, clippedPage, children]);\n\n const showButtons = numberOfChildren > childrenPerPage;\n const disablePreviousButton = page === 0;\n const disableNextButton = page === lastPage;\n\n const childrenStyles = useMemo(() => {\n return { root: styles?.children };\n }, [styles?.children]);\n\n // If children per page is 0 or less return empty element\n if (childrenPerPage <= 0) {\n return <></>;\n }\n\n return (\n <Stack horizontal className={mergeStyles(rootStyle, props.styles?.root)}>\n {showButtons && (\n <HorizontalGalleryNavigationButton\n key=\"previous-nav-button\"\n icon={<Icon iconName=\"HorizontalGalleryLeftButton\" />}\n styles={styles?.previousButton}\n onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))}\n disabled={disablePreviousButton}\n identifier={ids.overflowGalleryLeftNavButton}\n />\n )}\n <Stack horizontal className={mergeStyles(childrenContainerStyle)}>\n {childrenOnCurrentPage.map((child, i) => {\n return (\n <Stack.Item styles={childrenStyles} key={i} data-ui-id={ids.horizontalGalleryVideoTile}>\n {child}\n </Stack.Item>\n );\n })}\n </Stack>\n {showButtons && (\n <HorizontalGalleryNavigationButton\n key=\"next-nav-button\"\n icon={<Icon iconName=\"HorizontalGalleryRightButton\" />}\n styles={styles?.nextButton}\n onClick={() => setPage(Math.min(lastPage, page + 1))}\n disabled={disableNextButton}\n identifier={ids.overflowGalleryRightNavButton}\n />\n )}\n </Stack>\n );\n};\n\nconst HorizontalGalleryNavigationButton = (props: {\n icon: JSX.Element;\n styles: IStyle;\n onClick?: () => void;\n disabled?: boolean;\n identifier?: string;\n}): JSX.Element => {\n const theme = useTheme();\n return (\n <DefaultButton\n className={mergeStyles(leftRightButtonStyles(theme), props.styles)}\n onClick={props.onClick}\n disabled={props.disabled}\n data-ui-id={props.identifier}\n >\n {props.icon}\n </DefaultButton>\n );\n};\n"]}
1
+ {"version":3,"file":"HorizontalGallery.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/HorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;GAEG;AACH,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAmCpC;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;;IAC9E,MAAM,EAAE,QAAQ,EAAE,eAAe,GAAG,yBAAyB,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAEtG,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpC,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IAEnE,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,CAAC,mCAAI,EAAE,CAAC,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC,CAAC;IAE/C,MAAM,uBAAuB,GAAG,IAAI,GAAG,eAAe,CAAC;IACvD,MAAM,WAAW,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAErF,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,IAAI,YAAY,IAAI,YAAY,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;YAC5D,OAAO,YAAY,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC7C,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;YACjD,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,gBAAgB,GAAG,eAAe,CAAC;IACvD,MAAM,qBAAqB,GAAG,IAAI,KAAK,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,IAAI,KAAK,QAAQ,CAAC;IAE5C,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,yDAAyD;IACzD,IAAI,eAAe,IAAI,CAAC,EAAE,CAAC;QACzB,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,SAAS,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,CAAC;QACpE,WAAW,IAAI,CACd,oBAAC,iCAAiC,IAChC,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,6BAA6B,GAAG,EACrD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,EACjE,QAAQ,EAAE,qBAAqB,EAC/B,UAAU,EAAE,GAAG,CAAC,4BAA4B,GAC5C,CACH;QACD,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,sBAAsB,CAAC,IAC7D,qBAAqB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACtC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,gBAAc,GAAG,CAAC,0BAA0B,IACnF,KAAK,CACK,CACd,CAAC;QACJ,CAAC,CAAC,CACI;QACP,WAAW,IAAI,CACd,oBAAC,iCAAiC,IAChC,GAAG,EAAC,iBAAiB,EACrB,IAAI,EAAE,oBAAC,IAAI,IAAC,QAAQ,EAAC,8BAA8B,GAAG,EACtD,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,EACpD,QAAQ,EAAE,iBAAiB,EAC3B,UAAU,EAAE,GAAG,CAAC,6BAA6B,GAC7C,CACH,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CAAC,KAM1C,EAAe,EAAE;IAChB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAClE,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,gBACZ,KAAK,CAAC,UAAU,IAE3B,KAAK,CAAC,IAAI,CACG,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { DefaultButton, Icon, IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\n\n/**\n * {@link HorizontalGallery} default children per page\n */\nconst DEFAULT_CHILDREN_PER_PAGE = 5;\n\n/**\n * {@link HorizontalGallery} Component Styles.\n * @public\n */\nexport interface HorizontalGalleryStyles extends BaseCustomStyles {\n /** Styles for each child of {@link HorizontalGallery} */\n children?: IStyle;\n /** Styles for navigation button to go to previous page */\n previousButton?: IStyle;\n /** Styles for navigation button to go to next page */\n nextButton?: IStyle;\n}\n\n/**\n * {@link HorizontalGallery} Component Props.\n */\nexport interface HorizontalGalleryProps {\n children: React.ReactNode;\n /**\n * Styles for HorizontalGallery\n */\n styles?: HorizontalGalleryStyles;\n /**\n * Children shown per page\n * @defaultValue 5\n */\n childrenPerPage?: number;\n /**\n * helper function to choose which tiles to give video to.\n */\n onFetchTilesToRender?: (indexes: number[]) => void;\n}\n\n/**\n * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.\n * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}\n * @returns\n */\nexport const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element => {\n const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;\n\n const ids = useIdentifiers();\n\n const [page, setPage] = useState(0);\n\n const numberOfChildren = React.Children.count(children);\n const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;\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] ?? []);\n }\n }, [indexesArray, onFetchTilesToRender, page]);\n\n const firstIndexOfCurrentPage = page * childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n\n const childrenOnCurrentPage = useMemo(() => {\n if (indexesArray && indexesArray[clippedPage] !== undefined) {\n return indexesArray[clippedPage].map((index) => {\n return React.Children.toArray(children)[index];\n });\n }\n return [];\n }, [indexesArray, clippedPage, children]);\n\n const showButtons = numberOfChildren > childrenPerPage;\n const disablePreviousButton = page === 0;\n const disableNextButton = page === lastPage;\n\n const childrenStyles = useMemo(() => {\n return { root: styles?.children };\n }, [styles?.children]);\n\n // If children per page is 0 or less return empty element\n if (childrenPerPage <= 0) {\n return <></>;\n }\n\n return (\n <Stack horizontal className={mergeStyles(rootStyle, props.styles?.root)}>\n {showButtons && (\n <HorizontalGalleryNavigationButton\n key=\"previous-nav-button\"\n icon={<Icon iconName=\"HorizontalGalleryLeftButton\" />}\n styles={styles?.previousButton}\n onClick={() => setPage(Math.max(0, Math.min(lastPage, page - 1)))}\n disabled={disablePreviousButton}\n identifier={ids.overflowGalleryLeftNavButton}\n />\n )}\n <Stack horizontal className={mergeStyles(childrenContainerStyle)}>\n {childrenOnCurrentPage.map((child, i) => {\n return (\n <Stack.Item styles={childrenStyles} key={i} data-ui-id={ids.horizontalGalleryVideoTile}>\n {child}\n </Stack.Item>\n );\n })}\n </Stack>\n {showButtons && (\n <HorizontalGalleryNavigationButton\n key=\"next-nav-button\"\n icon={<Icon iconName=\"HorizontalGalleryRightButton\" />}\n styles={styles?.nextButton}\n onClick={() => setPage(Math.min(lastPage, page + 1))}\n disabled={disableNextButton}\n identifier={ids.overflowGalleryRightNavButton}\n />\n )}\n </Stack>\n );\n};\n\nconst HorizontalGalleryNavigationButton = (props: {\n icon: JSX.Element;\n styles: IStyle;\n onClick?: () => void;\n disabled?: boolean;\n identifier?: string;\n}): JSX.Element => {\n const theme = useTheme();\n return (\n <DefaultButton\n className={mergeStyles(leftRightButtonStyles(theme), props.styles)}\n onClick={props.onClick}\n disabled={props.disabled}\n data-ui-id={props.identifier}\n >\n {props.icon}\n </DefaultButton>\n );\n};\n"]}
@@ -106,7 +106,7 @@ export const _LocalVideoTile = React.memo((props) => {
106
106
  return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStylesTransparent()) },
107
107
  React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", styles: loadSpinnerStyles(theme, false) })));
108
108
  }, [strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, theme]);
109
- return (React.createElement(Stack, { className: mergeStyles({ width: '100%', height: '100%' }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
109
+ return (React.createElement(Stack, { "data-ui-id": "local-video-tile", className: mergeStyles({ width: '100%', height: '100%' }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
110
110
  React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay }), drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
111
111
  React.createElement(Stack, { styles: drawerMenuWrapperStyles },
112
112
  React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
@@ -1 +1 @@
1
- {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n videoContainerStyles,\n overlayStyles,\n overlayStylesTransparent,\n loadSpinnerStyles\n} from './styles/VideoTile.styles';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' | 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n participantsCount?: number;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources\n } = props;\n\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' || !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement || !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n {props.participantsCount === 1 && (\n <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, true)}\n />\n </Stack>\n )}\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview,\n props.participantsCount,\n strings?.waitingScreenText,\n theme\n ]);\n\n const videoTileOverlay = useMemo(() => {\n const reactionOverlay =\n reactionResources !== undefined ? (\n <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n ) : undefined;\n return reactionOverlay;\n }, [reaction, reactionResources]);\n\n const onRenderAvatarOneParticipant = useCallback(() => {\n return (\n <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, false)}\n />\n </Stack>\n );\n }, [strings?.waitingScreenText, theme]);\n\n return (\n <Stack\n className={mergeStyles({ width: '100%', height: '100%' })}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n alwaysShowLabelBackground={alwaysShowLabelBackground}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={props.participantsCount === 1 ? onRenderAvatarOneParticipant : onRenderAvatar}\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n raisedHand={raisedHand}\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n overlay={videoTileOverlay}\n >\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )}\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
1
+ {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n videoContainerStyles,\n overlayStyles,\n overlayStylesTransparent,\n loadSpinnerStyles\n} from './styles/VideoTile.styles';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' | 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n participantsCount?: number;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources\n } = props;\n\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' || !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement || !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n {props.participantsCount === 1 && (\n <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, true)}\n />\n </Stack>\n )}\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview,\n props.participantsCount,\n strings?.waitingScreenText,\n theme\n ]);\n\n const videoTileOverlay = useMemo(() => {\n const reactionOverlay =\n reactionResources !== undefined ? (\n <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n ) : undefined;\n return reactionOverlay;\n }, [reaction, reactionResources]);\n\n const onRenderAvatarOneParticipant = useCallback(() => {\n return (\n <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, false)}\n />\n </Stack>\n );\n }, [strings?.waitingScreenText, theme]);\n\n return (\n <Stack\n data-ui-id=\"local-video-tile\"\n className={mergeStyles({ width: '100%', height: '100%' })}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n alwaysShowLabelBackground={alwaysShowLabelBackground}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={props.participantsCount === 1 ? onRenderAvatarOneParticipant : onRenderAvatar}\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n raisedHand={raisedHand}\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n overlay={videoTileOverlay}\n >\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )}\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
@@ -31,7 +31,7 @@ export const Notification = (props) => {
31
31
  React.createElement(Icon, Object.assign({ className: notificationIconClassName, iconName: (_b = (_a = props.notificationIconProps) === null || _a === void 0 ? void 0 : _a.iconName) !== null && _b !== void 0 ? _b : 'ErrorBadge' }, props.notificationIconProps)),
32
32
  React.createElement(Text, { className: titleTextClassName }, strings === null || strings === void 0 ? void 0 : strings.title)),
33
33
  React.createElement(IconButton, { iconProps: cancelIcon, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.dismissButtonAriaLabel, "aria-live": 'polite', onClick: props.onDismiss })),
34
- React.createElement(Text, { className: messageTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.message),
34
+ React.createElement(Text, { className: messageTextStyle(theme), style: { marginTop: '0.25rem' } }, strings === null || strings === void 0 ? void 0 : strings.message),
35
35
  React.createElement(Stack, { horizontal: true, horizontalAlign: "space-evenly" },
36
36
  (strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel) && (React.createElement(DefaultButton, { onClick: props.onClickSecondaryButton, style: { marginTop: '1rem' } }, strings === null || strings === void 0 ? void 0 : strings.secondaryButtonLabel)),
37
37
  (strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel) && (React.createElement(PrimaryButton, { onClick: props.onClickPrimaryButton, style: { marginTop: '1rem' } }, strings === null || strings === void 0 ? void 0 : strings.primaryButtonLabel)))),
@@ -1 +1 @@
1
- {"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Notification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState } from 'react';\nimport { Icon, IconButton, PrimaryButton, Stack, useTheme, Text, IIconProps, DefaultButton } from '@fluentui/react';\nimport { cancelIcon } from './styles/ImageOverlay.style';\nimport {\n containerStyles,\n hiddenContainerStyles,\n messageTextStyle,\n notificationIconClassName,\n titleTextClassName\n} from './styles/Notification.styles';\n\n/**\n * Props for {@link Notification}.\n *\n * @public\n */\nexport interface NotificationProps {\n /**\n * Notification bar strings;\n */\n notificationStrings?: NotificationStrings;\n\n /**\n * Notification bar icon;\n */\n notificationIconProps?: IIconProps;\n\n /**\n * If set, notifications will automatically dismiss after 5 seconds\n * @defaultValue false\n */\n autoDismiss?: boolean;\n\n /**\n * If set, notifications will be shown in a stacked effect\n * @defaultValue false\n */\n showStackedEffect?: boolean;\n\n /**\n * Callback called when the primary button inside notification bar is clicked.\n */\n onClickPrimaryButton?: () => void;\n\n /**\n * Callback called when the secondary button inside notification bar is clicked.\n */\n onClickSecondaryButton?: () => void;\n\n /**\n * Callback called when the notification is dismissed.\n */\n onDismiss?: () => void;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link Notification}.\n *\n * @public\n */\nexport interface NotificationStrings {\n /**\n * Notification bar title.\n */\n title: string;\n /**\n * Notification bar dismiss button aria label\n */\n dismissButtonAriaLabel: string;\n /**\n * Notification bar message.\n */\n message?: string;\n /**\n * Notification bar primary button label\n */\n primaryButtonLabel?: string;\n /**\n * Notification bar secondary button label\n */\n secondaryButtonLabel?: string;\n}\n\n/**\n * A component to show notification messages on the UI.\n *\n * @public\n */\nexport const Notification = (props: NotificationProps): JSX.Element => {\n const strings = props.notificationStrings;\n const theme = useTheme();\n const [show, setShow] = useState(true);\n\n if (props.autoDismiss) {\n setTimeout(() => {\n // After 5 seconds set the show value to false\n setShow(false);\n }, 5000);\n\n if (!show) {\n props.onDismiss && props.onDismiss();\n return <></>;\n }\n }\n\n return (\n <Stack horizontalAlign=\"center\">\n <Stack data-ui-id=\"notification-bar\" className={containerStyles(theme)}>\n <Stack horizontal horizontalAlign=\"space-between\">\n <Stack horizontal>\n <Icon\n className={notificationIconClassName}\n iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'}\n {...props.notificationIconProps}\n />\n <Text className={titleTextClassName}>{strings?.title}</Text>\n </Stack>\n\n <IconButton\n iconProps={cancelIcon}\n ariaLabel={strings?.dismissButtonAriaLabel}\n aria-live={'polite'}\n onClick={props.onDismiss}\n />\n </Stack>\n <Text className={messageTextStyle(theme)}>{strings?.message}</Text>\n <Stack horizontal horizontalAlign=\"space-evenly\">\n {strings?.secondaryButtonLabel && (\n <DefaultButton onClick={props.onClickSecondaryButton} style={{ marginTop: '1rem' }}>\n {strings?.secondaryButtonLabel}\n </DefaultButton>\n )}\n {strings?.primaryButtonLabel && (\n <PrimaryButton onClick={props.onClickPrimaryButton} style={{ marginTop: '1rem' }}>\n {strings?.primaryButtonLabel}\n </PrimaryButton>\n )}\n </Stack>\n </Stack>\n {props.showStackedEffect && <Stack className={hiddenContainerStyles(theme)}></Stack>}\n </Stack>\n );\n};\n"]}
1
+ {"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Notification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState } from 'react';\nimport { Icon, IconButton, PrimaryButton, Stack, useTheme, Text, IIconProps, DefaultButton } from '@fluentui/react';\nimport { cancelIcon } from './styles/ImageOverlay.style';\nimport {\n containerStyles,\n hiddenContainerStyles,\n messageTextStyle,\n notificationIconClassName,\n titleTextClassName\n} from './styles/Notification.styles';\n\n/**\n * Props for {@link Notification}.\n *\n * @public\n */\nexport interface NotificationProps {\n /**\n * Notification bar strings;\n */\n notificationStrings?: NotificationStrings;\n\n /**\n * Notification bar icon;\n */\n notificationIconProps?: IIconProps;\n\n /**\n * If set, notifications will automatically dismiss after 5 seconds\n * @defaultValue false\n */\n autoDismiss?: boolean;\n\n /**\n * If set, notifications will be shown in a stacked effect\n * @defaultValue false\n */\n showStackedEffect?: boolean;\n\n /**\n * Callback called when the primary button inside notification bar is clicked.\n */\n onClickPrimaryButton?: () => void;\n\n /**\n * Callback called when the secondary button inside notification bar is clicked.\n */\n onClickSecondaryButton?: () => void;\n\n /**\n * Callback called when the notification is dismissed.\n */\n onDismiss?: () => void;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link Notification}.\n *\n * @public\n */\nexport interface NotificationStrings {\n /**\n * Notification bar title.\n */\n title: string;\n /**\n * Notification bar dismiss button aria label\n */\n dismissButtonAriaLabel: string;\n /**\n * Notification bar message.\n */\n message?: string;\n /**\n * Notification bar primary button label\n */\n primaryButtonLabel?: string;\n /**\n * Notification bar secondary button label\n */\n secondaryButtonLabel?: string;\n}\n\n/**\n * A component to show notification messages on the UI.\n *\n * @public\n */\nexport const Notification = (props: NotificationProps): JSX.Element => {\n const strings = props.notificationStrings;\n const theme = useTheme();\n const [show, setShow] = useState(true);\n\n if (props.autoDismiss) {\n setTimeout(() => {\n // After 5 seconds set the show value to false\n setShow(false);\n }, 5000);\n\n if (!show) {\n props.onDismiss && props.onDismiss();\n return <></>;\n }\n }\n\n return (\n <Stack horizontalAlign=\"center\">\n <Stack data-ui-id=\"notification-bar\" className={containerStyles(theme)}>\n <Stack horizontal horizontalAlign=\"space-between\">\n <Stack horizontal>\n <Icon\n className={notificationIconClassName}\n iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'}\n {...props.notificationIconProps}\n />\n <Text className={titleTextClassName}>{strings?.title}</Text>\n </Stack>\n\n <IconButton\n iconProps={cancelIcon}\n ariaLabel={strings?.dismissButtonAriaLabel}\n aria-live={'polite'}\n onClick={props.onDismiss}\n />\n </Stack>\n <Text className={messageTextStyle(theme)} style={{ marginTop: '0.25rem' }}>\n {strings?.message}\n </Text>\n <Stack horizontal horizontalAlign=\"space-evenly\">\n {strings?.secondaryButtonLabel && (\n <DefaultButton onClick={props.onClickSecondaryButton} style={{ marginTop: '1rem' }}>\n {strings?.secondaryButtonLabel}\n </DefaultButton>\n )}\n {strings?.primaryButtonLabel && (\n <PrimaryButton onClick={props.onClickPrimaryButton} style={{ marginTop: '1rem' }}>\n {strings?.primaryButtonLabel}\n </PrimaryButton>\n )}\n </Stack>\n </Stack>\n {props.showStackedEffect && <Stack className={hiddenContainerStyles(theme)}></Stack>}\n </Stack>\n );\n};\n"]}
@@ -24,8 +24,9 @@ export const VerticalGallery = (props) => {
24
24
  return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);
25
25
  }, [numberOfChildren, childrenPerPage]);
26
26
  useEffect(() => {
27
+ var _a;
27
28
  if (onFetchTilesToRender && indexesArray) {
28
- onFetchTilesToRender(indexesArray[page - 1]);
29
+ onFetchTilesToRender((_a = indexesArray[page - 1]) !== null && _a !== void 0 ? _a : []);
29
30
  }
30
31
  }, [indexesArray, onFetchTilesToRender, page]);
31
32
  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
@@ -1 +1 @@
1
- {"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;AAsE3D;;;;;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,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;QAC/C,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,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBACjD,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,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,OAAO,CAAC,sBAAsB,gBAC7B,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,OAAO,CAAC,uBAAuB,gBAC9B,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';\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 return (\n <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n <DefaultButton\n className={previousButtonSyles}\n onClick={onPreviousButtonClick}\n disabled={buttonsDisabled?.previous}\n ariaLabel={strings.leftNavButtonAriaLabel}\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={strings.rightNavButtonAriaLabel}\n data-ui-id={ids.overflowGalleryRightNavButton}\n >\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n </DefaultButton>\n </Stack>\n );\n};\n"]}
1
+ {"version":3,"file":"VerticalGallery.js","sourceRoot":"","sources":["../../../../../../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 {\n childrenContainerStyle,\n pageNavigationControlBarContainerStyle,\n participantPageCounter,\n leftRightButtonStyles,\n navIconStyles,\n rootStyle\n} from './styles/VerticalGallery.styles';\nimport { bucketize } from './utils/overFlowGalleriesUtils';\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 return (\n <Stack horizontalAlign=\"center\" tokens={controlBarSpacing} horizontal className={pageCounterContainerStyles}>\n <DefaultButton\n className={previousButtonSyles}\n onClick={onPreviousButtonClick}\n disabled={buttonsDisabled?.previous}\n ariaLabel={strings.leftNavButtonAriaLabel}\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={strings.rightNavButtonAriaLabel}\n data-ui-id={ids.overflowGalleryRightNavButton}\n >\n <Icon iconName=\"VerticalGalleryRightButton\" styles={navIconStyles} />\n </DefaultButton>\n </Stack>\n );\n};\n"]}
@@ -13,7 +13,7 @@ export const ScrollableHorizontalGallery = (props) => {
13
13
  useEffect(() => {
14
14
  const indexesArray = [...Array(horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length).keys()];
15
15
  if (onFetchTilesToRender && indexesArray) {
16
- onFetchTilesToRender(indexesArray);
16
+ onFetchTilesToRender(indexesArray !== null && indexesArray !== void 0 ? indexesArray : []);
17
17
  }
18
18
  }, [onFetchTilesToRender, horizontalGalleryElements === null || horizontalGalleryElements === void 0 ? void 0 : horizontalGalleryElements.length]);
19
19
  const ref = useRef();
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,0CAA0C,EAC1C,iCAAiC,EAClC,MAAM,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAI3C,EAAe,EAAE;IAChB,MAAM,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAEnF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;IAE9D,MAAM,GAAG,GAAG,MAAM,EAA8D,CAAC;IACjF,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,eAAe,IACnB,SAAS,EAAE,WAAW,CAAC,0CAA0C,EAAE,eAAe,CAAC;QAEnF,oBAAC,KAAK,kBACO,+BAA+B,EAC1C,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,iCAAiC,EACzC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAEhC,yBAAyB,CACpB,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport {\n scrollableHorizontalGalleryContainerStyles,\n scrollableHorizontalGalleryStyles\n} from './styles/ScrollableHorizontalGallery.style';\n\n/**\n * Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n horizontalGalleryElements?: JSX.Element[];\n onFetchTilesToRender?: (indexes: number[]) => void;\n containerStyles?: IStyle;\n}): JSX.Element => {\n const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;\n\n useEffect(() => {\n const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray);\n }\n }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n\n const ref = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n const { events: dragabbleEvents } = useDraggable(ref);\n\n return (\n <div\n ref={ref}\n {...dragabbleEvents}\n className={mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles)}\n >\n <Stack\n data-ui-id=\"scrollable-horizontal-gallery\"\n horizontal={true}\n styles={scrollableHorizontalGalleryStyles}\n tokens={{ childrenGap: '0.5rem' }}\n >\n {horizontalGalleryElements}\n </Stack>\n </div>\n );\n};\n"]}
1
+ {"version":3,"file":"ScrollableHorizontalGallery.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EACL,0CAA0C,EAC1C,iCAAiC,EAClC,MAAM,4CAA4C,CAAC;AAEpD;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAI3C,EAAe,EAAE;IAChB,MAAM,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAEnF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,oBAAoB,IAAI,YAAY,EAAE,CAAC;YACzC,oBAAoB,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,MAAM,CAAC,CAAC,CAAC;IAE9D,MAAM,GAAG,GAAG,MAAM,EAA8D,CAAC;IACjF,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAEtD,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,eAAe,IACnB,SAAS,EAAE,WAAW,CAAC,0CAA0C,EAAE,eAAe,CAAC;QAEnF,oBAAC,KAAK,kBACO,+BAA+B,EAC1C,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,iCAAiC,EACzC,MAAM,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,IAEhC,yBAAyB,CACpB,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, Stack, mergeStyles } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport {\n scrollableHorizontalGalleryContainerStyles,\n scrollableHorizontalGalleryStyles\n} from './styles/ScrollableHorizontalGallery.style';\n\n/**\n * Component to display elements horizontally in a scrollable container\n * @private\n */\nexport const ScrollableHorizontalGallery = (props: {\n horizontalGalleryElements?: JSX.Element[];\n onFetchTilesToRender?: (indexes: number[]) => void;\n containerStyles?: IStyle;\n}): JSX.Element => {\n const { horizontalGalleryElements, onFetchTilesToRender, containerStyles } = props;\n\n useEffect(() => {\n const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];\n if (onFetchTilesToRender && indexesArray) {\n onFetchTilesToRender(indexesArray ?? []);\n }\n }, [onFetchTilesToRender, horizontalGalleryElements?.length]);\n\n const ref = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n const { events: dragabbleEvents } = useDraggable(ref);\n\n return (\n <div\n ref={ref}\n {...dragabbleEvents}\n className={mergeStyles(scrollableHorizontalGalleryContainerStyles, containerStyles)}\n >\n <Stack\n data-ui-id=\"scrollable-horizontal-gallery\"\n horizontal={true}\n styles={scrollableHorizontalGalleryStyles}\n tokens={{ childrenGap: '0.5rem' }}\n >\n {horizontalGalleryElements}\n </Stack>\n </div>\n );\n};\n"]}
@@ -6,6 +6,7 @@ export { LocalizationProvider } from './localization';
6
6
  export { COMPONENT_LOCALE_EN_GB } from './localization/locales/en-GB/ComponentLocale';
7
7
  export { COMPONENT_LOCALE_AR_SA } from './localization/locales/ar-SA/ComponentLocale';
8
8
  export { COMPONENT_LOCALE_CS_CZ } from './localization/locales/cs-CZ/ComponentLocale';
9
+ export { COMPONENT_LOCALE_CY_GB } from './localization/locales/cy-GB/ComponentLocale';
9
10
  export { COMPONENT_LOCALE_DE_DE } from './localization/locales/de-DE/ComponentLocale';
10
11
  export { COMPONENT_LOCALE_ES_ES } from './localization/locales/es-ES/ComponentLocale';
11
12
  export { COMPONENT_LOCALE_FI_FI } from './localization/locales/fi-FI/ComponentLocale';
@@ -7,6 +7,7 @@ export { LocalizationProvider } from './localization';
7
7
  export { COMPONENT_LOCALE_EN_GB } from './localization/locales/en-GB/ComponentLocale';
8
8
  export { COMPONENT_LOCALE_AR_SA } from './localization/locales/ar-SA/ComponentLocale';
9
9
  export { COMPONENT_LOCALE_CS_CZ } from './localization/locales/cs-CZ/ComponentLocale';
10
+ export { COMPONENT_LOCALE_CY_GB } from './localization/locales/cy-GB/ComponentLocale';
10
11
  export { COMPONENT_LOCALE_DE_DE } from './localization/locales/de-DE/ComponentLocale';
11
12
  export { COMPONENT_LOCALE_ES_ES } from './localization/locales/es-ES/ComponentLocale';
12
13
  export { COMPONENT_LOCALE_FI_FI } from './localization/locales/fi-FI/ComponentLocale';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../react-components/src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAEtF,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AA6CxC,OAAO,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport * from './components';\nexport { _IdentifierProvider } from './identifiers';\nexport type { _Identifiers, _IdentifierProviderProps } from './identifiers';\nexport * from './localization/locales';\nexport { LocalizationProvider } from './localization';\nexport { COMPONENT_LOCALE_EN_GB } from './localization/locales/en-GB/ComponentLocale';\nexport { COMPONENT_LOCALE_AR_SA } from './localization/locales/ar-SA/ComponentLocale';\nexport { COMPONENT_LOCALE_CS_CZ } from './localization/locales/cs-CZ/ComponentLocale';\nexport { COMPONENT_LOCALE_DE_DE } from './localization/locales/de-DE/ComponentLocale';\nexport { COMPONENT_LOCALE_ES_ES } from './localization/locales/es-ES/ComponentLocale';\nexport { COMPONENT_LOCALE_FI_FI } from './localization/locales/fi-FI/ComponentLocale';\nexport { COMPONENT_LOCALE_FR_FR } from './localization/locales/fr-FR/ComponentLocale';\nexport { COMPONENT_LOCALE_HE_IL } from './localization/locales/he-IL/ComponentLocale';\nexport { COMPONENT_LOCALE_IT_IT } from './localization/locales/it-IT/ComponentLocale';\nexport { COMPONENT_LOCALE_JA_JP } from './localization/locales/ja-JP/ComponentLocale';\nexport { COMPONENT_LOCALE_KO_KR } from './localization/locales/ko-KR/ComponentLocale';\nexport { COMPONENT_LOCALE_NB_NO } from './localization/locales/nb-NO/ComponentLocale';\nexport { COMPONENT_LOCALE_NL_NL } from './localization/locales/nl-NL/ComponentLocale';\nexport { COMPONENT_LOCALE_PL_PL } from './localization/locales/pl-PL/ComponentLocale';\nexport { COMPONENT_LOCALE_PT_BR } from './localization/locales/pt-BR/ComponentLocale';\nexport { COMPONENT_LOCALE_RU_RU } from './localization/locales/ru-RU/ComponentLocale';\nexport { COMPONENT_LOCALE_SV_SE } from './localization/locales/sv-SE/ComponentLocale';\nexport { COMPONENT_LOCALE_TR_TR } from './localization/locales/tr-TR/ComponentLocale';\nexport { COMPONENT_LOCALE_ZH_CN } from './localization/locales/zh-CN/ComponentLocale';\nexport { COMPONENT_LOCALE_ZH_TW } from './localization/locales/zh-TW/ComponentLocale';\nexport type { ComponentStrings, ComponentLocale, LocalizationProviderProps } from './localization';\nexport * from './theming';\nexport * from './theming/generateTheme';\n\nexport type {\n BaseCustomStyles,\n CallParticipantListParticipant,\n ChatMessage,\n CommunicationParticipant,\n ComponentSlotStyle,\n ContentSystemMessage,\n CreateVideoStreamViewResult,\n CustomAvatarOptions,\n CustomMessage,\n Message,\n MessageAttachedStatus,\n MessageCommon,\n MessageContentType,\n OnRenderAvatarCallback,\n ParticipantAddedSystemMessage,\n ParticipantListParticipant,\n ParticipantRemovedSystemMessage,\n ParticipantState,\n ReadReceiptsBySenderId,\n SystemMessage,\n SystemMessageCommon,\n TopicUpdatedSystemMessage,\n VideoGalleryLocalParticipant,\n VideoGalleryParticipant,\n VideoGalleryRemoteParticipant,\n VideoGalleryStream,\n VideoStreamOptions,\n ViewScalingMode\n} from './types';\n\nexport type { RaisedHand } from './types';\n\nexport type { Spotlight } from './types';\n\nexport type { Reaction, ReactionResources, ReactionSprite } from './types';\n\nexport type {\n SpokenLanguageStrings,\n CaptionLanguageStrings,\n _SupportedSpokenLanguage,\n _SupportedCaptionLanguage\n} from './types';\nexport { _spokenLanguageToCaptionLanguage } from './types';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nexport type { BlockedMessage } from './types';\n\nexport type { SurveyIssues } from './types';\n\nexport type { SurveyIssuesHeadingStrings } from './types';\n\nexport type { CallSurveyImprovementSuggestions } from './types';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../react-components/src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAEtF,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AA6CxC,OAAO,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport * from './components';\nexport { _IdentifierProvider } from './identifiers';\nexport type { _Identifiers, _IdentifierProviderProps } from './identifiers';\nexport * from './localization/locales';\nexport { LocalizationProvider } from './localization';\nexport { COMPONENT_LOCALE_EN_GB } from './localization/locales/en-GB/ComponentLocale';\nexport { COMPONENT_LOCALE_AR_SA } from './localization/locales/ar-SA/ComponentLocale';\nexport { COMPONENT_LOCALE_CS_CZ } from './localization/locales/cs-CZ/ComponentLocale';\nexport { COMPONENT_LOCALE_CY_GB } from './localization/locales/cy-GB/ComponentLocale';\nexport { COMPONENT_LOCALE_DE_DE } from './localization/locales/de-DE/ComponentLocale';\nexport { COMPONENT_LOCALE_ES_ES } from './localization/locales/es-ES/ComponentLocale';\nexport { COMPONENT_LOCALE_FI_FI } from './localization/locales/fi-FI/ComponentLocale';\nexport { COMPONENT_LOCALE_FR_FR } from './localization/locales/fr-FR/ComponentLocale';\nexport { COMPONENT_LOCALE_HE_IL } from './localization/locales/he-IL/ComponentLocale';\nexport { COMPONENT_LOCALE_IT_IT } from './localization/locales/it-IT/ComponentLocale';\nexport { COMPONENT_LOCALE_JA_JP } from './localization/locales/ja-JP/ComponentLocale';\nexport { COMPONENT_LOCALE_KO_KR } from './localization/locales/ko-KR/ComponentLocale';\nexport { COMPONENT_LOCALE_NB_NO } from './localization/locales/nb-NO/ComponentLocale';\nexport { COMPONENT_LOCALE_NL_NL } from './localization/locales/nl-NL/ComponentLocale';\nexport { COMPONENT_LOCALE_PL_PL } from './localization/locales/pl-PL/ComponentLocale';\nexport { COMPONENT_LOCALE_PT_BR } from './localization/locales/pt-BR/ComponentLocale';\nexport { COMPONENT_LOCALE_RU_RU } from './localization/locales/ru-RU/ComponentLocale';\nexport { COMPONENT_LOCALE_SV_SE } from './localization/locales/sv-SE/ComponentLocale';\nexport { COMPONENT_LOCALE_TR_TR } from './localization/locales/tr-TR/ComponentLocale';\nexport { COMPONENT_LOCALE_ZH_CN } from './localization/locales/zh-CN/ComponentLocale';\nexport { COMPONENT_LOCALE_ZH_TW } from './localization/locales/zh-TW/ComponentLocale';\nexport type { ComponentStrings, ComponentLocale, LocalizationProviderProps } from './localization';\nexport * from './theming';\nexport * from './theming/generateTheme';\n\nexport type {\n BaseCustomStyles,\n CallParticipantListParticipant,\n ChatMessage,\n CommunicationParticipant,\n ComponentSlotStyle,\n ContentSystemMessage,\n CreateVideoStreamViewResult,\n CustomAvatarOptions,\n CustomMessage,\n Message,\n MessageAttachedStatus,\n MessageCommon,\n MessageContentType,\n OnRenderAvatarCallback,\n ParticipantAddedSystemMessage,\n ParticipantListParticipant,\n ParticipantRemovedSystemMessage,\n ParticipantState,\n ReadReceiptsBySenderId,\n SystemMessage,\n SystemMessageCommon,\n TopicUpdatedSystemMessage,\n VideoGalleryLocalParticipant,\n VideoGalleryParticipant,\n VideoGalleryRemoteParticipant,\n VideoGalleryStream,\n VideoStreamOptions,\n ViewScalingMode\n} from './types';\n\nexport type { RaisedHand } from './types';\n\nexport type { Spotlight } from './types';\n\nexport type { Reaction, ReactionResources, ReactionSprite } from './types';\n\nexport type {\n SpokenLanguageStrings,\n CaptionLanguageStrings,\n _SupportedSpokenLanguage,\n _SupportedCaptionLanguage\n} from './types';\nexport { _spokenLanguageToCaptionLanguage } from './types';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nexport type { BlockedMessage } from './types';\n\nexport type { SurveyIssues } from './types';\n\nexport type { SurveyIssuesHeadingStrings } from './types';\n\nexport type { CallSurveyImprovementSuggestions } from './types';\n"]}
@@ -0,0 +1,8 @@
1
+ import type { ComponentLocale } from '../..';
2
+ /**
3
+ * Locale for Welsh (GB).
4
+ *
5
+ * @public
6
+ */
7
+ export declare const COMPONENT_LOCALE_CY_GB: ComponentLocale;
8
+ //# sourceMappingURL=ComponentLocale.d.ts.map
@@ -0,0 +1,13 @@
1
+ // Copyright (c) Microsoft Corporation.
2
+ // Licensed under the MIT License.
3
+ import { createComponentStrings } from '../utils';
4
+ import cy_GB from './strings.json';
5
+ /**
6
+ * Locale for Welsh (GB).
7
+ *
8
+ * @public
9
+ */
10
+ export const COMPONENT_LOCALE_CY_GB = {
11
+ strings: createComponentStrings(cy_GB)
12
+ };
13
+ //# sourceMappingURL=ComponentLocale.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ComponentLocale.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/localization/locales/cy-GB/ComponentLocale.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAGnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAoB;IACrD,OAAO,EAAE,sBAAsB,CAAC,KAAsC,CAAC;CACxE,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { createComponentStrings } from '../utils';\nimport type { ComponentLocale, ComponentStrings } from '../..';\nimport cy_GB from './strings.json';\nimport { PartialDeep } from 'type-fest';\n\n/**\n * Locale for Welsh (GB).\n *\n * @public\n */\nexport const COMPONENT_LOCALE_CY_GB: ComponentLocale = {\n strings: createComponentStrings(cy_GB as PartialDeep<ComponentStrings>)\n};\n"]}